backup: show integrity column for dependsOn backups

dashboard/src/components/BackupInfoDialog.vue

@@ -1,6 +1,6 @@
 <script setup>
 
-import { ref, useTemplateRef } from 'vue';
+import { ref, computed, useTemplateRef } from 'vue';
 import { ClipboardAction, TableView, Dialog } from '@cloudron/pankow';
 import { prettyDuration, prettyLongDate, prettyFileSize } from '@cloudron/pankow/utils';
 import AppsModel from '../models/AppsModel.js';
@@ -15,26 +15,38 @@ const backupsModel = BackupsModel.create();
 
 const busy = ref(true);
 
-const backupContentTableColumns = {
-  label: {
-    label: t('backups.listing.contents'),
-    sort: true,
-  },
-  fileCount: {
-    label: t('backup.target.fileCount'),
-    sort(a, b, A, B) {
-      return A.stats?.upload?.fileCount - B.stats?.upload?.fileCount;
+const backupContentTableColumns = computed(() => {
+  const columns = {
+    label: {
+      label: t('backups.listing.contents'),
+      sort: true,
     },
-    align: 'right',
-  },
-  size: {
-    label: t('backup.target.size'),
-    sort(a, b, A , B) {
-      return A.stats?.upload?.size - B.stats?.upload?.size;
+    fileCount: {
+      label: t('backup.target.fileCount'),
+      sort(a, b, A, B) {
+        return A.stats?.upload?.fileCount - B.stats?.upload?.fileCount;
+      },
+      align: 'right',
     },
-    align: 'right',
+    size: {
+      label: t('backup.target.size'),
+      sort(a, b, A , B) {
+        return A.stats?.upload?.size - B.stats?.upload?.size;
+      },
+      align: 'right',
+    },
+  };
+
+  if (backup.value.lastIntegrityCheckTime || backup.value.integrityCheckTask?.active) {
+    columns.integrity = {
+      label: 'Integrity',
+      sort: false,
+      width: '100px',
+    };
   }
-};
+
+  return columns;
+});
 
 const backup = ref({ contents: [], validStats: false });
 const dialog = useTemplateRef('dialog');
@@ -69,8 +81,10 @@ defineExpose({
       if (!match) continue;
       const [error, result] = await backupsModel.get(contentId);
       if (error) console.error(error);
-      const content = { id: null, label: null, fqdn: null, stats: null };
+      const content = { id: null, label: null, fqdn: null, stats: null, integrityCheckStatus: null, lastIntegrityCheckTime: null };
       content.stats = result.stats;
+      content.integrityCheckStatus = result.integrityCheckStatus;
+      content.lastIntegrityCheckTime = result.lastIntegrityCheckTime;
       if (match[1] === 'mail') {
         content.id = 'mail';
         content.label = 'Mail Server';
@@ -165,6 +179,13 @@ defineExpose({
           <div v-if="content.stats?.upload" style="text-align: right">{{ prettyFileSize(content.stats.upload.size) }}</div>
           <div v-else style="text-align: right">-</div>
         </template>
+        <template #integrity="{ item:content }">
+          <div v-if="content.lastIntegrityCheckTime" style="display: flex; align-items: center;">
+            <i v-if="content.integrityCheckStatus === 'passed'" class="fa-solid fa-check-circle" v-tooltip="prettyLongDate(content.lastIntegrityCheckTime)"></i>
+            <i v-else class="fa-solid fa-times-circle" v-tooltip="prettyLongDate(content.lastIntegrityCheckTime)"></i>
+          </div>
+          <div v-else>-</div>
+        </template>
       </TableView>
     </div>
   </Dialog>