Changed status setting for no-scanjob pattern, simplified the scanjob map, embeded scan button into resource table's table actions

Author: xingzhang-suse

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" />
@@ -63,6 +63,15 @@
       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 = [
         {

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.prevStatus"/></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">{{ `${updateTime(registryStatus.lastUpdateTime)}` }}</div>
     </div>
     <div v-else class="registry-status-record">
         <div class="no-data"></div>
@@ -38,7 +38,7 @@
     },
     methods: {
         updateTime(lastUpdateTime) {
-            return  elapsedTime(Date.now() / 1000 - new Date(lastUpdateTime).getTime() / 1000).label;
+            return  elapsedTime(Math.ceil(Date.now() / 1000) - Math.ceil((new Date(lastUpdateTime).getTime() / 1000))).label + ' ' + this.t("imageScanner.general.ago");
         }
     }
   }

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.prevStatus.toLowerCase()}`);
+    },
+    getStatusLabelClass(row) {
+      return row.prevStatus.toLowerCase();
+    },
+    getStatusDotClass(row) {
+      return `dot ${row.prevStatus.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: