fix(Registry Configuration details): Modify Scan History table to keep Steve API reference such that WebSocket updates render automatically

rushk014 · xingzhang-suse · commit 0d585ec98d14 · 2025-09-30T11:00:28.000+08:00
diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetailScanTable.vue b/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetailScanTable.vue
@@ -29,6 +29,7 @@
       :namespaced="false"
       :row-actions="false"
       :table-actions="false"
+      :sub-rows-description="false"
       :search="false"
       :headers="headers"
       :rows="scanHistory"
diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue b/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue
@@ -76,28 +76,22 @@
     },
     methods: {
       async loadData(isForceLoading = false) {
-        await this.$store.dispatch('cluster/find', { type: RESOURCE.REGISTRY, id: `${this.$route.params.ns}/${this.$route.params.id}`, opt: {force: isForceLoading} });
-        if (this.$store.getters['cluster/canList'](RESOURCE.SCAN_JOB)) {
-          await this.$store.dispatch('cluster/findAll', { type: RESOURCE.SCAN_JOB, opt: {force: isForceLoading} });
-        }
-        this.scanHistory = [];
-
-        let registry = this.$store.getters['cluster/byId'](RESOURCE.REGISTRY, `${this.$route.params.ns}/${this.$route.params.id}`);
-        let scanJobs = this.$store.getters['cluster/all'](RESOURCE.SCAN_JOB).filter((rec) => {
-          return rec.spec.registry === registry.metadata.name;
+        this.registry = await this.$store.dispatch('cluster/find', { type: RESOURCE.REGISTRY, id: `${this.$route.params.ns}/${this.$route.params.id}`, opt: {force: isForceLoading} });
+        this.scanHistory = (await this.$store.dispatch('cluster/findAll', { type: RESOURCE.SCAN_JOB, opt: {force: isForceLoading} })).filter((rec) => {
+          return rec.spec.registry === this.registry.metadata.name;
         });
 
-        this.registryStatus = this.getRegistryStatus(registry);
+        this.registryStatus = this.scanHistory.sort((a, b) => new Date(b.status?.statusResult?.lastTransitionTime) - new Date(a.status?.statusResult?.lastTransitionTime))[0]?.status?.statusResult?.type.toLowerCase();
         this.registryMetadata = [
           {
             type: 'text',
             label: this.t('imageScanner.registries.configuration.meta.namespace'),
-            value: registry.metadata.namespace
+            value: this.registry.metadata.namespace
           },
           {
             type: 'text',
             label: this.t('imageScanner.registries.configuration.meta.repositories'),
-            value: registry.spec.repositories?.length || 0
+            value: this.registry.spec.repositories?.length || 0
           },
           {
             type: 'text',
@@ -106,44 +100,18 @@
           {
             type: 'text',
             label: this.t('imageScanner.registries.configuration.meta.uri'),
-            value: registry.spec.uri
+            value: this.registry.spec.uri
           },
           {
             type: 'tags',
-            tags: registry.spec.repositories || []
+            tags: this.registry.spec.repositories || []
           },
           {
             type: 'text',
-            value: registry.spec.scanInterval ? 
-              this.t('imageScanner.general.schedule', { i: registry.spec.scanInterval }) : '',
+            value: this.registry.spec.scanInterval ? 
+              this.t('imageScanner.general.schedule', { i: this.registry.spec.scanInterval }) : '',
           }
         ];
-        
-        scanJobs.forEach((rec) => {
-          this.scanHistory.push({
-            ...rec,
-            progress: rec.status.scannedImagesCount && rec.status.imagesCount ? Math.ceil(rec.status.scannedImagesCount / rec.status.imagesCount * 100) : 0,
-            status: {
-              ...rec.status,
-              statusResult: rec.status?.conditions?.filter(condition => {
-                return condition.status === "True";
-              })[0] || {
-                type: "Pending",
-                lastTransitionTime: null,
-              }
-            }
-          })
-        });
-        this.registry = registry;
-        this.scanHistory = this.scanHistory.sort((a, b) => new Date(b.status?.statusResult?.lastTransitionTime) - new Date(a.status?.statusResult?.lastTransitionTime));
-        this.registryStatus = this.scanHistory[0]?.status?.statusResult?.type.toLowerCase();
-      },
-      getRegistryStatus(registry) {
-        if (!registry || !registry.status || !registry.status.conditions || !registry.status.conditions.length) {
-          return null;
-        }
-        let status = registry.status.conditions[0].type.toLowerCase()  === "discovering" ? "InProgress" : registry.status.conditions[0].type;
-        return status.toLowerCase();
       },
     },
   }
diff --git a/pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts b/pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts
@@ -60,17 +60,17 @@ export const REGISTRY_SCAN_HISTORY_TABLE = [
   {
     name: "status",
     labelKey: "imageScanner.registries.configuration.scanTable.header.status",
-    value: "status.statusResult.type",
-    formatter: "RegistryStatusCellBadge",
-    sort: "status.statusResult.type",
+    value: "status",
+    formatter: "ScanHistoryStatusCell",
+    sort: "status.conditions[?(@.status=='True')].type",
     width: 100,
   },
   {
     name: "since",
     labelKey: "imageScanner.registries.configuration.scanTable.header.since",
-    value: "status.statusResult.lastTransitionTime",
-    formatter: "Date",
-    sort: "status.statusResult.lastTransitionTime:desc",
+    value: "status",
+    formatter: "ScanHistorySinceCell",
+    sort: "status.conditions[?(@.status=='True')].lastTransitionTime",
     width: 210,
   },
   {
@@ -100,9 +100,8 @@ export const REGISTRY_SCAN_HISTORY_TABLE = [
   {
     name: "errors",
     labelKey: "imageScanner.registries.configuration.scanTable.header.error",
-    value: "status.statusResult.message",
+    value: "status",
     formatter: "ScanErrorCell",
-    sort: "errors",
   },
 ];
 
diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/ScanErrorCell.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/ScanErrorCell.vue
@@ -12,18 +12,21 @@ export default {
       required: true
     }
   },
-  data() {
-    return {
-      failedStatus: REGISTRY_STATUS.FAILED
+  computed: {
+    error() {
+      const statusResult = this.value.conditions.find(condition => {
+        return condition.status === "True";
+      });
+      return statusResult?.type.toLowerCase() === REGISTRY_STATUS.FAILED ? statusResult.message : null;
     }
-  }
+  },
 };
 </script>
 
 <template>
-    <div v-if="row && row.status.statusResult.type.toLowerCase() === failedStatus" class="scan-error-cell">
+    <div v-if="error" class="scan-error-cell">
         <div class="dot failed"></div>
-        <div class="status">{{ value }}</div>
+        <div class="status">{{ error }}</div>
     </div>
     <div v-else class="scan-error-cell">
       <div class="status text-muted">{{ t('imageScanner.general.none') }}</div>  
diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/ScanHistorySinceCell.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/ScanHistorySinceCell.vue
@@ -0,0 +1,25 @@
+<script>
+import Date from "@shell/components/formatter/Date";
+export default {
+  components: {
+    Date
+  },
+  props: {
+    value: {
+      type:    String,
+      required: true
+    }
+  },
+  computed: {
+    since() {
+      return this.value.conditions.find(condition => {
+        return condition.status === "True";
+      })?.lastTransitionTime;
+    }
+  }
+};
+</script>
+
+<template>
+  <Date :value="since" />
+</template>
diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/ScanHistoryStatusCell.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/ScanHistoryStatusCell.vue
@@ -0,0 +1,25 @@
+<script>
+import RegisterStatusBadge from "@pkg/components/common/RegisterStatusBadge";
+export default {
+  components: {
+    RegisterStatusBadge,
+  },
+  props: {
+    value: {
+      type:    String,
+      required: true
+    }
+  },
+  computed: {
+    status() {
+      return this.value.conditions.find(condition => {
+        return condition.status === "True";
+      })?.type || "Pending";
+    }
+  }
+};
+</script>
+
+<template>
+  <RegisterStatusBadge :status="status.toLowerCase()" />
+</template>
