Feat: Registries configuration - Detail: Recent scans table

pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue

@@ -5,7 +5,7 @@
         <div class="resource-header">
           <div class="resource-header-name-state">
             <span class="resource-header-name">
-              <RouterLink to="../">{{ t('imageScanner.registries.title') }}:</RouterLink> 
+              <RouterLink :to="`/c/${this.$route.params.cluster}/${ this.PRODUCT_NAME }/${ this.RESOURCE.REGISTRY }/`">{{ t('imageScanner.registries.title') }}:</RouterLink> 
               {{ $route.params.id }}
             </span>
             <RegisterStatusBadge :status="registryStatus" />
@@ -41,7 +41,7 @@
 
 <script>
   import { BadgeState } from '@rancher/components';
-  import { RESOURCE } from '@sbombastic-image-vulnerability-scanner/types';
+  import { PRODUCT_NAME, RESOURCE } from '@sbombastic-image-vulnerability-scanner/types';
   import ResourceTable from "@shell/components/ResourceTable";
   import RancherMeta from './common/RancherMeta.vue';
   import RegisterStatusBadge from './common/RegisterStatusBadge.vue';
@@ -57,20 +57,29 @@
     },
     data() {
       return {
+        PRODUCT_NAME,
+        RESOURCE,
         registryStatus: null,
         registryMetadata: [],
         scanHistory: [],
         headers: REGISTRY_SCAN_HISTORY_TABLE
       }
     },
     async fetch() {
-      await this.$store.dispatch('cluster/find', { type: RESOURCE.SCAN_JOB, id: `${this.$route.params.ns}/${this.$route.params.id}` });
-      let scanJob = this.$store.getters['cluster/byId'](RESOURCE.SCAN_JOB, `${this.$route.params.ns}/${this.$route.params.id}`);
 
-      await this.$store.dispatch('cluster/find', { type: RESOURCE.REGISTRY, id: `${this.$route.params.ns}/${scanJob.spec.registry}` });
-      let registry = this.$store.getters['cluster/byId'](RESOURCE.REGISTRY, `${this.$route.params.ns}/${scanJob.spec.registry}`);
+      await this.$store.dispatch('cluster/find', { type: RESOURCE.REGISTRY, id: `${this.$route.params.ns}/${this.$route.params.id}` });
+      let registry = this.$store.getters['cluster/byId'](RESOURCE.REGISTRY, `${this.$route.params.ns}/${this.$route.params.id}`);
 
-      this.registryStatus = (registry.status.conditions[0].type.toLowerCase() === "discovering" ? "InProgress" : registry.status.conditions[0].type).toLowerCase();
+
+      await this.$store.dispatch('cluster/findAll', { type: RESOURCE.SCAN_JOB });
+      let scanJobs = this.$store.getters['cluster/all'](RESOURCE.SCAN_JOB);
+
+      // filter scan jobs for the current registry
+      scanJobs = scanJobs.filter((job) => {
+        return job.spec.registry === registry.metadata.name;
+      });
+
+      this.registryStatus = this.getRegistryStatus(registry);
       this.registryMetadata = [
         {
           type: 'text',
@@ -100,17 +109,29 @@
           value: registry.metadata.schedule || '',
         }
       ];
-
-      this.scanHistory = scanJob.status.conditions.map((rec) => {
-        return {
-          status: rec.type.toLowerCase(),
-          timestamp: rec.lastUpdateTime,
-          progress: rec.progress || 0,
-          imagesScanned: rec.imagesScanned || 0,
-          imagesFound: rec.imagesFound || 0,
-          errors: rec.errors || []
+
+      this.scanHistory = scanJobs.map((rec) => {
+        rec.status.statusResult = rec.status.conditions.filter(condition => {
+          return condition.status === "True";
+        })[0] || {
+          type: "Pending",
+          lastTransitionTime: null,
         };
+        rec.status['scannedImagesCount'] = this.$route.params.id === 'kw-controller' ? 1000 : 500;
+        rec.status['imagesCount'] = 2000;
+        return rec;
       });
+
+      console.log("Scan history:", this.scanHistory);
+    },
+    methods: {
+      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();
+      },
     },
   }
 </script>

pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts

@@ -63,43 +63,47 @@ export const REGISTRY_SCAN_HISTORY_TABLE = [
   {
     name: "status",
     labelKey: "imageScanner.registries.configuration.scanTable.header.status",
-    value: "status",
+    value: "status.statusResult.type",
     formatter: "RegistryStatusCellBadge",
     sort: "status",
   },
   {
     name: "since",
     labelKey: "imageScanner.registries.configuration.scanTable.header.since",
-    value: "timestamp",
+    value: "status.statusResult.lastTransitionTime",
     formatter: "Date",
     sort: "timestamp",
   },
   {
     name: "progress",
     labelKey: "imageScanner.registries.configuration.scanTable.header.progress",
-    value: "progress",
-    getValue: (row: any) => row.progress.toString(),
+    getValue: (row: any) => {
+      let progress = Math.round(
+        (row.status.scannedImagesCount / row.status.imagesCount) * 100
+      );
+      return { progress };
+    },
     formatter: "ProgressCell",
     sort: "progress",
   },
   {
     name: "imagesScanned",
     labelKey:
       "imageScanner.registries.configuration.scanTable.header.imagesScanned",
-    value: "imagesScanned",
+    value: "status.scannedImagesCount",
     sort: "imagesScanned",
   },
   {
     name: "imagesFound",
     labelKey:
       "imageScanner.registries.configuration.scanTable.header.imagesFound",
-    value: "imagesFound",
+    value: "status.imagesCount",
     sort: "imagesFound",
   },
   {
     name: "errors",
-    labelKey: "imageScanner.registries.configuration.scanTable.header.errors",
-    value: "errors",
+    labelKey: "imageScanner.registries.configuration.scanTable.header.error",
+    value: "status.statusResult.message",
     sort: "errors",
   },
 ];

pkg/sbombastic-image-vulnerability-scanner/detail/sbombastic.rancher.io.registry.vue

@@ -0,0 +1,37 @@
+<script>
+  import CreateEditView from '@shell/mixins/create-edit-view';
+  import RegistryDetails from '@sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue';
+  import { RESOURCE } from '@sbombastic-image-vulnerability-scanner/types';
+  import { _CREATE } from '@shell/config/query-params';
+  import Loading from '@shell/components/Loading';
+
+  export default {
+    name: 'CruRegistry',
+
+    props: {
+      mode: {
+        type:    String,
+        default: _CREATE,
+      },
+      value: {
+        type:     Object,
+        required: true,
+      },
+    },
+
+    components: { RegistryDetails, Loading },
+
+    mixins: [CreateEditView],
+
+    data() {
+      return { resource: RESOURCE.REGISTRY };
+    }
+  };
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    {{ value | escapeHtml }}
+  </div>
+</template>

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

@@ -58,7 +58,7 @@ imageScanner:
           progress: Progress
           imagesScanned: Images scan
           imagesFound: Images found
-          errors: Error(s)
+          error: Error
     messages:
       registryScanFailed: Registry scan failed
       registryScanComplete: Registry scan complete
@@ -107,4 +107,4 @@ imageScanner:
     ago: ago
 
 typeLabel:
-  sbombastic.rancher.io.registry: Registries configuration
+  sbombastic.rancher.io.registry: Registries configuration