backup size: display stats correctly

dashboard/src/components/app/Backups.vue

@@ -6,7 +6,7 @@ const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef } from 'vue';
 import { Icon, Button, Switch, Checkbox, FormGroup, TextInput, TableView, Menu, Dialog, ProgressBar } from '@cloudron/pankow';
-import { prettyLongDate } from '@cloudron/pankow/utils';
+import { prettyLongDate, prettyFileSize } from '@cloudron/pankow/utils';
 import { API_ORIGIN, RSTATES } from '../../constants.js';
 import { download } from '../../utils.js';
 import AppImportDialog from '../AppImportDialog.vue';
@@ -38,6 +38,10 @@ const columns = ref({
     label: t('backup.target.label'),
     sort: true,
   },
+  size: {
+    label: t('backup.target.size'),
+    sort: true,
+  },
   creationTime: {
     label: t('app.backups.backups.time'),
     sort: true,
@@ -408,7 +412,10 @@ onMounted(async () => {
         {{ prettyLongDate(backup.creationTime) }} <b v-show="backup.label">({{ backup.label }})</b>
       </template>
       <template #site="backup">
-        {{ backup.site ? backup.site.name : 'unknown' }}
+        {{ backup.site.name }}
+      </template>
+      <template #size="backup">
+        <span v-if="backup.stats">{{ prettyFileSize(backup.stats.size) }} - {{ backup.stats.fileCount }} file(s)</span>
       </template>
       <template #actions="backup">
         <div style="text-align: right;">