Refactored fetch method, Changed the algorithom for previous status, Added common scan button component, Added refresh button on Registry ilst page

Author: xingzhang-suse

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

@@ -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,15 +54,15 @@
       ResourceTable,
       RancherMeta,
       RegisterStatusBadge,
-      RegistryDetailScanTable
     },
     data() {
       return {
         PRODUCT_NAME,
         RESOURCE,
-        registry: null,
         registryStatus: null,
         registryMetadata: [],
+        scanHistory: [],
+        headers: REGISTRY_SCAN_HISTORY_TABLE
       }
     },
     async fetch() {
@@ -82,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',
@@ -103,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) {
@@ -131,6 +150,10 @@
     gap: 24px;
     flex: 1 0 0;
     align-self: stretch;
+
+    .table {
+      width: 100%;
+    }
   }
 
   .about {
@@ -179,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/RegistryStatusUpdate.vue

@@ -2,10 +2,10 @@
     <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.prevStatus"/></div>
+        <div class="prev-status"><RegisterStatusBadge :status="registryStatus.prevScanStatus"/></div>
         <div class="arrow"></div>
         <div  class="curr-status"><RegisterStatusBadge :status="registryStatus.currStatus"/></div>
-        <div class="update-time">{{ `${updateTime(registryStatus.lastUpdateTime)}` }}</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(Math.ceil(Date.now() / 1000) - Math.ceil((new Date(lastUpdateTime).getTime() / 1000))).label + ' ' + this.t("imageScanner.general.ago");
+        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/formatters/PreviousScanCell.vue

@@ -13,13 +13,13 @@ export default {
   },
   methods: {
     getStatusText(row) {
-      return this.t(`imageScanner.enum.status.${row.prevStatus.toLowerCase()}`);
+      return this.t(`imageScanner.enum.status.${row.prevScanStatus.toLowerCase()}`);
     },
     getStatusLabelClass(row) {
-      return row.prevStatus.toLowerCase();
+      return row.prevScanStatus.toLowerCase();
     },
     getStatusDotClass(row) {
-      return `dot ${row.prevStatus.toLowerCase()}`;
+      return `dot ${row.prevScanStatus.toLowerCase()}`;
     }
   }
 };