Changes for refining code, new common component and correct some algorithm

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="`/c/${this.$route.params.cluster}/${ this.PRODUCT_NAME }/${ this.RESOURCE.REGISTRY }/`">{{ 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" />
@@ -27,7 +27,15 @@
       </div>
       <RancherMeta :properties="registryMetadata" />
     </div>
-    <RegistryDetailScanTable :registry="registry" />
+    Recent scans
+    <ResourceTable
+      :headers="headers"
+      :rows="scanHistory"
+      :namespaced="false"
+      :rowActions="false"
+      :search="false"
+      class="table"
+    />
   </div>
 </template>
 
@@ -38,7 +46,6 @@
   import RancherMeta from './common/RancherMeta.vue';
   import RegisterStatusBadge from './common/RegisterStatusBadge.vue';
   import { REGISTRY_SCAN_HISTORY_TABLE } from '@sbombastic-image-vulnerability-scanner/config/table-headers';
-  import RegistryDetailScanTable from './RegistryDetailScanTable.vue';
 
   export default {
     name: 'registryDetails',
@@ -47,22 +54,31 @@
       ResourceTable,
       RancherMeta,
       RegisterStatusBadge,
-      RegistryDetailScanTable
     },
     data() {
       return {
         PRODUCT_NAME,
         RESOURCE,
-        registry: null,
         registryStatus: null,
         registryMetadata: [],
+        scanHistory: [],
+        headers: REGISTRY_SCAN_HISTORY_TABLE
       }
     },
     async fetch() {
 
       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}`);
 
+
+      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 = [
         {
@@ -73,7 +89,7 @@
         {
           type: 'text',
           label: this.t('imageScanner.registries.configuration.meta.repositories'),
-          value: registry.spec.repositories?.length || 0
+          value: registry.spec.repositories.length
         },
         {
           type: 'text',
@@ -94,7 +110,19 @@
         }
       ];
 
-      this.registry = registry;
+      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) {
@@ -122,6 +150,10 @@
     gap: 24px;
     flex: 1 0 0;
     align-self: stretch;
+
+    .table {
+      width: 100%;
+    }
   }
 
   .about {
@@ -170,7 +202,7 @@
         .resource-header-description {
           /* layout */
           display: flex;
-          max-width: 900px;
+          width: 900px;
           height: 21px;
           flex-direction: column;
           justify-content: center;

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

@@ -1,6 +1,6 @@
 <template>
   <div class="badge" :class="statusClass">
-    <div v-if="status" class="text">{{ t(`imageScanner.enum.status.${status.toLowerCase()}`) }}</div>
+    <div v-if="status" class="text" :class="statusClass">{{ t(`imageScanner.enum.status.${status.toLowerCase()}`) }}</div>
   </div>
 </template>
 
@@ -29,7 +29,7 @@
             case REGISTRY_STATUS.FAILED:
                 return "failed";
             default:
-                return "";
+                return "none";
         }
       }
     }
@@ -82,6 +82,9 @@
       font-style: normal;
       font-weight: 400;
       line-height: 19px;
+      &.none {
+        color: var(--muted);
+      }
     }
   }
 </style>

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

@@ -1,11 +1,11 @@
 <template>
-    <div v-if="registryStatus.registry_name" class="registry-status-record">
-        <RouterLink class="registry-name" :to="`/c/${this.$route.params.cluster}/${ this.PRODUCT_NAME }/${ this.PAGE.REGISTRIES }/${ registryStatus.namespace }/${ registryStatus.registry_name }`">{{ registryStatus.registry_name }}</RouterLink>
+    <div v-if="registryStatus.registryName" class="registry-status-record">
+        <RouterLink class="registry-name" :to="`/c/${this.$route.params.cluster}/${ this.PRODUCT_NAME }/${ this.PAGE.REGISTRIES }/${ registryStatus.namespace }/${ registryStatus.registryName }`">{{ registryStatus.registryName }}</RouterLink>
         <div class="uri">{{ registryStatus.uri }}</div>
-        <div class="prev-status"><RegisterStatusBadge :status="registryStatus.prev_status"/></div>
+        <div class="prev-status"><RegisterStatusBadge :status="registryStatus.prevScanStatus"/></div>
         <div class="arrow"></div>
-        <div  class="curr-status"><RegisterStatusBadge :status="registryStatus.curr_status"/></div>
-        <div class="update-time">{{ `${updateTime(registryStatus.last_update_time)} ${t("imageScanner.general.ago")}`}}</div>
+        <div  class="curr-status"><RegisterStatusBadge :status="registryStatus.currStatus"/></div>
+        <div class="update-time">{{ `${statusUpdateTime(registryStatus.lastTransitionTime)}` }}</div>
     </div>
     <div v-else class="registry-status-record">
         <div class="no-data"></div>
@@ -37,8 +37,8 @@
      };
     },
     methods: {
-        updateTime(lastUpdateTime) {
-            return  elapsedTime(Date.now() / 1000 - new Date(lastUpdateTime).getTime() / 1000).label;
+        statusUpdateTime(lastTransitionTime) {
+            return  elapsedTime(Math.ceil(Date.now() / 1000) - Math.ceil((new Date(lastTransitionTime).getTime() / 1000))).label + ' ' + this.t("imageScanner.general.ago");
         }
     }
   }

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

@@ -0,0 +1,64 @@
+<template>
+  <button
+    class="btn role-primary"
+    :disabled="!(selectedRegistries && selectedRegistries.length)"
+    @click="startScan()"
+>
+    <i class="icon icon-play"></i>
+    {{ t('imageScanner.registries.button.startScan') || 'Enable' }}
+  </button>
+</template>
+
+<script>
+import { RESOURCE } from "@sbombastic-image-vulnerability-scanner/types";
+
+export default {
+  name: 'scanButton',
+  props: {
+    // Element object -> { name: string, namespace: string }
+    selectedRegistries: {
+      type: Array,
+      default: () => []
+    },
+    reloadFn: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  methods: {
+    async startScan() {
+        if (!this.selectedRegistries || !this.selectedRegistries.length) {
+            return;
+        }
+        this.selectedRegistries.forEach(async (registry) => {
+            const scanjobObj = await this.$store.dispatch('cluster/create', {
+                type: RESOURCE.SCAN_JOB,
+                metadata: {
+                    generateName: registry.name,
+                    namespace: registry.namespace,
+                },
+                spec: {
+                    registry: registry.name,
+                }
+            });
+            try {
+                await scanjobObj.save();
+                this.$store.dispatch('growl/success', {
+                    title: this.t('imageScanner.registries.messages.registryScanComplete'),
+                    message: this.t('imageScanner.registries.messages.registryScanComplete', { name: registry.name }),
+                });
+            } catch (e) {
+                this.$store.dispatch('growl/error', {
+                    title: this.t('imageScanner.registries.messages.registryScanFailed'),
+                    message: e.message,
+                });
+            } finally {
+                setTimeout(() => {
+                    this.reloadFn(true);
+                }, 1000);
+            }
+        });
+    },
+  },
+}
+</script>

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

@@ -69,9 +69,9 @@ export function init($plugin: IPlugin, store: any) {
         PAGE.IMAGE_OVERVIEW,
         PAGE.VULNERABILITY_OVERVIEW,
         PAGE.VEX_MANAGEMENT,
-        "demo"
+        //"demo"
     ]);
 
-    basicType([RESOURCE.REGISTRY], 'Advanced');
+  basicType([RESOURCE.REGISTRY, PAGE.VEX_MANAGEMENT], 'Advanced');
 
 }

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

@@ -36,16 +36,20 @@ export const REGISTRY_SCAN_TABLE = [
   {
     name: "status",
     labelKey: "imageScanner.registries.registrytable.header.status",
-    value: "scanjobs.0.status.statusResult.type",
+    value: "currStatus",
     formatter: "RegistryStatusCellBadge",
     sort: "status",
     width: 100,
   },
   {
-    name: "_progress",
+    name: "progress",
     labelKey: "imageScanner.registries.registrytable.header.progress",
-    value: "scanjobs.0.status.imagesCount",
-    getValue: (row: any) => row.scanjobs[0].status.imagesCount,
+    getValue: (row: any) => {
+      return {
+        progress: row.progress,
+        error: row.error,
+      }
+    },
     formatter: "ProgressCell",
     sort: "progress",
   },

pkg/sbombastic-image-vulnerability-scanner/formatters/PreviousScanCell.vue

@@ -12,36 +12,27 @@ export default {
     }
   },
   methods: {
-    getStatusStyle(row) {
-      if (row && row.scanjobs[1] && row.scanjobs[1].status && row.scanjobs[1].status.statusResult && row.scanjobs[1].status.statusResult.type) {
-        return { color: 'var(--text-secondary)' };
-      } else {
-        return { color: 'var(--text-muted)' };
-      }
-    },
     getStatusText(row) {
-      if (row && row.scanjobs[1] && row.scanjobs[1].status && row.scanjobs[1].status.statusResult && row.scanjobs[1].status.statusResult.type) {
-        return this.t(`imageScanner.enum.status.${row.scanjobs[1].status.statusResult.type.toLowerCase()}`);
-      } else {
-        return this.t('imageScanner.enum.status.none');
-      }
+      return this.t(`imageScanner.enum.status.${row.prevScanStatus.toLowerCase()}`);
+    },
+    getStatusLabelClass(row) {
+      return row.prevScanStatus.toLowerCase();
+    },
+    getStatusDotClass(row) {
+      return `dot ${row.prevScanStatus.toLowerCase()}`;
     }
   }
 };
 </script>
 
 <template>
-    <div v-if="row && row.scanjobs[1] && row.scanjobs[1].status && row.scanjobs[1].status.statusResult && row.scanjobs[1].status.statusResult.type" class="previous-scan-cell">
-        <div class="dot" :class="row.scanjobs[1].status.statusResult.type.toLowerCase()"></div>
-        <div class="status" :style="getStatusStyle(row)">{{ getStatusText(row) }}</div>  
-        <div v-if="row.scanjobs[1].status.statusResult.progress">
-          <ProgressCell :status="row.scanjobs[1].status.statusResult" />
+    <div class="previous-scan-cell">
+        <div class="dot" :class="getStatusDotClass(row)"></div>
+        <div class="status" :class="getStatusLabelClass(row)">{{ getStatusText(row) }}</div>
+        <div v-if="row.prevProgress">
+          <ProgressCell :status="{ progress: row.prevProgress, error: row.error }" />
         </div>
     </div>
-    <div v-else class="previous-scan-cell">
-      <div class="dot pending"></div>
-      <div class="status" style="color: var(--text-secondary)">{{ t('imageScanner.enum.status.pending') }}</div>  
-    </div>
 </template>
 
 <style lang="scss" scoped>
@@ -53,6 +44,9 @@ export default {
         font-size: 14px;
         .status {
             font-size: 14px;
+            &.none {
+                color: var(--muted);
+            }
         }
         .dot {
             width: 8px;

pkg/sbombastic-image-vulnerability-scanner/formatters/ProgressCell.vue

@@ -10,7 +10,7 @@ export default {
 </script>
 <template>
   <div class="progress-cell">
-    <span v-if="value.progress" class="progress-text">{{ value.progress }}% | <span v-if="value.errors">{{ value.errors }}</span></span>
+    <span v-if="value.progress" class="progress-text">{{ value.progress }}% | <span v-if="value.error">{{ value.error }}</span></span>
     <span v-else class="progress-text text-muted">n/a</span>
   </div>
 </template>

pkg/sbombastic-image-vulnerability-scanner/formatters/RegistryStatusCellBadge.vue

@@ -14,5 +14,5 @@ export default {
 </script>
 
 <template>
-  <RegisterStatusBadge :status="value.toLowerCase() || 'pending'" />
+  <RegisterStatusBadge :status="value.toLowerCase()" />
 </template>

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

@@ -7,6 +7,7 @@ imageScanner:
       addNew: Add new
       refresh: Refresh data
       startScan: Start scan
+      delete: Delete
     recentUpdatedRegistries:
       title: Latest status updates
     StatusDistribution:
@@ -62,8 +63,8 @@ imageScanner:
           imagesFound: Images found
           error: Error
     messages:
-      registryScanFailed: Registry scan failed
-      registryScanComplete: Registry scan complete
+      registryScanFailed: Registry scan failed to start
+      registryScanComplete: Registry scan is started successfully
   images:
     title: Images
     downloadReport: Download full report
@@ -119,6 +120,7 @@ imageScanner:
       inprogress: In progress
       complete: Complete
       failed: Failed
+      none: n/a
       enabled: Enabled
       disabled: Disabled
     prevScan:
@@ -130,6 +132,7 @@ imageScanner:
   general:
     refresh: Refresh data
     ago: ago
+    justNow: Just now
     none: none
 
 typeLabel: