Replace mock data on Images page and fix API reference issue on Registry details

package.json

@@ -9,6 +9,7 @@
     "@kubernetes/client-node": "^1.3.0",
     "@rancher/components": "^0.3.0-alpha.1",
     "@rancher/shell": "3.0.5-rc.8",
+    "file-saver": "^2.0.5",
     "vue": "^3.5.17",
     "vue-router": "^4.5.0",
     "vuex": "^4.1.0"

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"

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();
       },
     },
   }

pkg/sbombastic-image-vulnerability-scanner/components/common/AmountBarBySeverity.vue

@@ -12,7 +12,7 @@
       <div class="badge"  :class="badgeColor('high', cveAmount.high)">{{ cveAmount.high }}</div>
       <div class="badge"  :class="badgeColor('medium', cveAmount.medium)">{{ cveAmount.medium }}</div>
       <div class="badge"  :class="badgeColor('low', cveAmount.low)">{{ cveAmount.low }}</div>
-      <div class="badge"  :class="badgeColor('none', cveAmount.none)">{{ cveAmount.none }}</div>
+      <div class="badge"  :class="badgeColor('unknown', cveAmount.unknown)">{{ cveAmount.unknown }}</div>
     </div>
   </div>
 </template>
@@ -44,13 +44,13 @@
     },
     computed: {
       pecentages() {
-        let total = this.cveAmount.critical + this.cveAmount.high + this.cveAmount.medium + this.cveAmount.low + this.cveAmount.none;
+        let total = this.cveAmount.critical + this.cveAmount.high + this.cveAmount.medium + this.cveAmount.low + this.cveAmount.unknown;
         return [
           this.cveAmount.critical * 100 / total,
           this.cveAmount.high * 100 / total,
-         this.cveAmount.medium * 100 / total,
+          this.cveAmount.medium * 100 / total,
           this.cveAmount.low * 100 / total,
-          this.cveAmount.none * 100 / total,
+          this.cveAmount.unknown * 100 / total,
         ];
       }
     }
@@ -98,7 +98,7 @@
       background-color: #FDD835;
       color: rgba(255, 255, 255, 0.90);
     }
-    .badge.none {
+    .badge.unknown {
       background-color: #E0E0E0;
       color: #717179;
     }

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",
   },
 ];
 
@@ -164,7 +163,7 @@ export const IMAGE_LIST_TABLE = [
       "spec.scanResult.high",
       "spec.scanResult.medium",
       "spec.scanResult.low",
-      "spec.scanResult.none",
+      "spec.scanResult.unknown",
     ],
     width: 300,
   },

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>  

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>

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>

pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml

@@ -123,13 +123,11 @@ imageScanner:
       cve:
         allCves: All identified CVEs
         affectingCvesOnly: Affecting CVEs only
-      imageList:
-        image: Image
-        severity: severity
-        repository: repository
-        registry: Registry
     buttons:
       downloadCustomReport: Download custom report
+      downloadSbom: Download SBOM
+      downloadCsv: Image detail report (CSV)
+      downloadJson: Vulnerability report (JSON)
     listTable:
       checkbox:
         groupByRepo: Group by repository
@@ -139,6 +137,14 @@ imageScanner:
         repository: Repository
         registry: Registry
         vulnerabilities: vulnerabilities
+      filters:
+        placeholder:
+          image: Search by name
+        label:
+          image: Image
+          severity: Severity
+          repository: Repository
+          registry: Registry
   imageDetails:
     status: Status
     vulnerabilities: Vulnerabilities