add aggregated size to system backups

dashboard/src/components/SystemBackupList.vue

@@ -6,7 +6,7 @@ const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef } from 'vue';
 import { Button, ClipboardAction, Menu, FormGroup, TextInput, Checkbox, TableView, Dialog } from '@cloudron/pankow';
-import { prettyLongDate } from '@cloudron/pankow/utils';
+import { prettyLongDate, prettyFileSize } from '@cloudron/pankow/utils';
 import { TASK_TYPES } from '../constants.js';
 import Section from  '../components/Section.vue';
 import BackupsModel from '../models/BackupsModel.js';
@@ -45,6 +45,10 @@ const columns = {
     sort: false,
     hideMobile: true,
   },
+  size: {
+    label: t('backup.target.size'),
+    sort: true,
+  },
   creationTime: {
     label: t('main.table.date'),
     sort: true
@@ -166,7 +170,8 @@ async function refreshBackups() {
       return {
         id: c,
         label: null,
-        fqdn: null
+        fqdn: null,
+        stats: null
       };
     });
   });
@@ -202,9 +207,12 @@ async function onInfo(backup) {
     appsById[app.id] = app;
   });
 
-  infoBackup.value.contents.forEach(function (content) {
+  for (const content of infoBackup.value.contents) {
     const match = content.id.match(/app_(.*?)_.*/); // *? means non-greedy
-    if (!match) return;
+    if (!match) continue;
+    const [error, backup] = await backupsModel.get(content.id);
+    if (error) console.error(error);
+    content.stats = backup.stats;
     const app = appsById[match[1]];
     if (app) {
       content.id = app.id;
@@ -213,7 +221,7 @@ async function onInfo(backup) {
     } else {
       content.id = match[1];
     }
-  });
+  }
 }
 
 // edit backups dialog
@@ -307,6 +315,7 @@ defineExpose({ refresh });
       <div v-for="content in infoBackup.contents" :key="content.id">
         <a v-if="content.fqdn" :href="`/#/app/${content.id}/backups`">{{ content.label || content.fqdn }}</a>
         <a v-else :href="`/#/system-eventlog?search=${content.id}`">{{ content.id }}</a>
+        <span>&nbsp;{{ prettyFileSize(content.stats.size) }} - {{ content.stats.fileCount }} file(s)</span>
       </div>
     </Dialog>
 
@@ -350,6 +359,10 @@ defineExpose({ refresh });
         <span v-else>{{ $t('backups.listing.noApps') }}</span>
       </template>
 
+      <template #size="backup">
+        <span v-if="backup.stats.aggregated">{{ prettyFileSize(backup.stats.aggregated.size) }} - {{ backup.stats.aggregated.fileCount }} file(s)</span>
+      </template>
+
       <template #site="backup">{{ backup.site.name }}</template>
 
       <template #actions="backup">