From 6dbd9d753f9ecc24af9d8fd771f3c3bd64546418 Mon Sep 17 00:00:00 2001
From: Steven Zhang <steven.zhang@suse.com>
Date: Tue, 12 Aug 2025 20:25:02 -0700
Subject: [PATCH 1/2] Changed status setting for no-scanjob pattern, simplified
 the scanjob map, embeded scan button into resource table's table actions

---
 .../components/RegistryDetails.vue            |  11 +-
 .../components/common/RegisterStatusBadge.vue |   7 +-
 .../common/RegistryStatusUpdate.vue           |  12 +-
 .../sbombastic-image-vulnerability-scanner.ts |   4 +-
 .../config/table-headers.ts                   |  12 +-
 .../formatters/PreviousScanCell.vue           |  36 +++---
 .../formatters/ProgressCell.vue               |   2 +-
 .../formatters/RegistryStatusCellBadge.vue    |   2 +-
 .../l10n/en-us.yaml                           |   7 +-
 .../list/sbombastic.rancher.io.registry.vue   | 117 +++++++++++++-----
 10 files changed, 136 insertions(+), 74 deletions(-)

diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue b/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue
index e69745d..bcd9a68 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue
+++ b/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 = [
         {
diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/common/RegisterStatusBadge.vue b/pkg/sbombastic-image-vulnerability-scanner/components/common/RegisterStatusBadge.vue
index e8cfc6a..0e12036 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/common/RegisterStatusBadge.vue
+++ b/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>
\ No newline at end of file
diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/common/RegistryStatusUpdate.vue b/pkg/sbombastic-image-vulnerability-scanner/components/common/RegistryStatusUpdate.vue
index cf19398..4aa5dbb 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/common/RegistryStatusUpdate.vue
+++ b/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");
         }
     }
   }
diff --git a/pkg/sbombastic-image-vulnerability-scanner/config/sbombastic-image-vulnerability-scanner.ts b/pkg/sbombastic-image-vulnerability-scanner/config/sbombastic-image-vulnerability-scanner.ts
index 7bd134c..1285013 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/config/sbombastic-image-vulnerability-scanner.ts
+++ b/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');
 
 }
\ No newline at end of file
diff --git a/pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts b/pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts
index 6a1e79a..e70e63d 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts
+++ b/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",
   },
diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/PreviousScanCell.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/PreviousScanCell.vue
index f3ecd70..d0df4b3 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/formatters/PreviousScanCell.vue
+++ b/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;
diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/ProgressCell.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/ProgressCell.vue
index 16b9d26..d1329ad 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/formatters/ProgressCell.vue
+++ b/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>
diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/RegistryStatusCellBadge.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/RegistryStatusCellBadge.vue
index 0d5e9f7..cb1c1c2 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/formatters/RegistryStatusCellBadge.vue
+++ b/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>
diff --git a/pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml b/pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml
index d263a4d..e5dd95c 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml
+++ b/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:
diff --git a/pkg/sbombastic-image-vulnerability-scanner/list/sbombastic.rancher.io.registry.vue b/pkg/sbombastic-image-vulnerability-scanner/list/sbombastic.rancher.io.registry.vue
index 41af3eb..24d367c 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/list/sbombastic.rancher.io.registry.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/list/sbombastic.rancher.io.registry.vue
@@ -5,15 +5,6 @@
       <RecentUpdatedRegistries :registryStatusList="registryStatusList"/>
       <StatusDistribution :chartData="statusSummary"/>
     </div>
-    <button
-      mat-button
-      class="btn role-secondary"
-      style="margin-bottom: 12px;"
-      aria-label="Refresh data"
-      type="button"
-      @click="startScan()">
-      <em class="icon-refresh-ss"></em>{{ t('imageScanner.registries.button.startScan') }}
-    </button>
     <ResourceTable
       ref="table"
       :schema="schema"
@@ -21,7 +12,28 @@
       :rows="rows"
       :headers="headers"
       @selection="onSelectionChange"
-    />
+    >
+      <template #header-left>
+          <div class="bulk-actions">
+            <button
+              class="btn role-primary"
+              :disabled="!(selectedRows && selectedRows.length)"
+              @click="startScan()"
+            >
+              <i class="icon icon-play"></i>
+              {{ t('imageScanner.registries.button.startScan') || 'Enable' }}
+            </button>
+            <button
+              class="btn role-primary"
+              :disabled="!(selectedRows && selectedRows.length)"
+              @click="promptRemoveRegistry()"
+            >
+              <i class="icon icon-delete"></i>
+              {{ t('imageScanner.registries.button.delete') || 'Delete' }}
+            </button>
+          </div>
+      </template>
+    </ResourceTable>
   </div>
 </template>
 
@@ -39,6 +51,7 @@
   import { escapeHtml } from '@shell/utils/string';
   import day from 'dayjs';
   import { DATE_FORMAT, TIME_FORMAT } from '@shell/store/prefs';
+  import { findBy } from '@shell/utils/array';
 
   export default {
     name: 'registries',
@@ -82,9 +95,10 @@
           complete: 0,
           failed: 0
         };
-        this.latestUpdateTime = null;
         
         let registriesCRD = this.$store.getters['cluster/all'](RESOURCE.REGISTRY);
+
+        //Fetch ScanJob CRD and sort by startTime DESC
         let scanJobCRD = this.$store.getters['cluster/all'](RESOURCE.SCAN_JOB).sort((a, b) => {
           if (!a.status || !a.status.startTime) {
             return 1;
@@ -97,13 +111,19 @@
 
         let scanJobMap = {};
         scanJobCRD.forEach((rec) => {
-          rec.status.statusResult = rec.status.conditions.filter(condition => {
+          rec.status.statusResult = rec.status?.conditions?.filter(condition => {
             return condition.status === "True";
           })[0] || {
             type: "Pending",
             lastUpdateTime: null,
           };
-          if (scanJobMap[`${rec.metadata.namespace}/${rec.spec.registry}`]) {
+
+          // Set ScanJobe map with namespace/registry as key and up to 2 scan jobs as value
+          if (
+            scanJobMap[`${rec.metadata.namespace}/${rec.spec.registry}`] &&
+            Array.isArray(scanJobMap[`${rec.metadata.namespace}/${rec.spec.registry}`]) &&
+            scanJobMap[`${rec.metadata.namespace}/${rec.spec.registry}`].length > 0 &&
+            scanJobMap[`${rec.metadata.namespace}/${rec.spec.registry}`].length < 2) {
             scanJobMap[`${rec.metadata.namespace}/${rec.spec.registry}`].push(rec);
           } else {
             scanJobMap[`${rec.metadata.namespace}/${rec.spec.registry}`] = [rec];
@@ -112,48 +132,68 @@
 
         this.rows = registriesCRD.map((rec) => {
           this.latestUpdateTime = new Date();
+          let scanjobs = scanJobMap[`${rec.metadata.namespace}/${rec.metadata.name}`] || [];
+          const status = scanjobs[0] ? scanjobs[0].status.statusResult.type.toLowerCase() || "pending" : "none";
+          const prevStatus = scanjobs[1] ? scanjobs[1].status.statusResult.type.toLowerCase() || "pending" : "none";
+          
+          // Reform the record for the table
           rec.id = `${rec.metadata.namespace}/${rec.metadata.name}`;
-          rec.scanjobs = scanJobMap[`${rec.metadata.namespace}/${rec.metadata.name}`] || [];
-          const status = rec.scanjobs?.[0]?.status?.statusResult?.type?.toLowerCase() || 'pending';
-          const prevStatus = rec.scanjobs?.[1]?.status?.statusResult?.type?.toLowerCase() || 'pending';
+          rec.currStatus = status;
+          rec.prevStatus = prevStatus;
+          rec.progress = scanjobs[0] && scanjobs[0].status.imageCount && scanjobs[0].status.scannedImageCount?
+            Math.ceil(scanjobs[0].status.scannedImageCount / scanjobs[0].status.imageCount * 100) : 0;
+          rec.prevProgress = scanjobs[1] && scanjobs[1].status.imageCount && scanjobs[1].status.scannedImageCount?
+            Math.ceil(scanjobs[1].status.scannedImageCount / scanjobs[1].status.imageCount * 100) : 0;
+          rec.error = scanjobs[0] && scanjobs[0].status.statusResult.type === "Failed" ? scanjobs[0].status.statusResult.message : "";
+
+          // Summarize the data for Latest status updates panel
           this.registryStatusList.push({
-            registry_name: rec.metadata.name,
+            registryName: rec.metadata.name,
             uri: rec.spec.uri,
             namespace: rec.metadata.namespace,
-            prev_status: prevStatus,
-            curr_status: status,
-            last_update_time: rec.scanjobs?.[0]?.status?.statusResult?.lastUpdateTime || rec.metadata.creationTimestamp,
+            prevStatus: prevStatus,
+            currStatus: status,
+            lastUpdateTime: scanjobs[0]?.status?.statusResult?.lastUpdateTime || rec.metadata.creationTimestamp,
           });
+
+          //Summarize the data for Status distribution panel
           if (status && this.statusSummary.hasOwnProperty(status)) {
             this.statusSummary[status]++;
           }
+
+          rec.availableActions.push({
+            action: 'startScan',
+            label: this.t('imageScanner.registries.buttons.startScan') || 'Start Scan',
+            icon: 'icon-play',
+            enabled: true,
+            invoke:   ({}, resources) => { this.startScan(resources); }
+          });
+
+          console.log("rec.availableActions", rec.availableActions)
           return rec;
         });
 
-        this.registryStatusList.sort((a, b) => new Date(b.last_update_time) - new Date(a.last_update_time)).slice(0, 5)
+        // Sort and limit the registryStatusList to 5 most recent updates
+        this.registryStatusList = this.registryStatusList.sort((a, b) => new Date(b.lastUpdateTime) - new Date(a.lastUpdateTime)).slice(0, 5);
         while (this.registryStatusList.length < 5) {
           this.registryStatusList.push({
-            registry_name: "",
+            registryName: "",
             uri: "",
-            prev_status: "",
-            curr_status: "",
-            last_update_time: new Date().toISOString()
+            prevStatus: "",
+            currStatus: "",
+            lastUpdateTime: new Date().toISOString()
           });
         }
       },
       refresh() {
         window.location.reload();
       },
-      async startScan() {
-        const table = this.$refs.table;
-        if ( !table ) {
-          return;
-        }
+      async startScan(selected) {
         const scanjobObj = await this.$store.dispatch('cluster/create', {
           type: RESOURCE.SCAN_JOB,
           metadata: {
-            generateName: this.selectedRows[0].metadata.name,
-            namespace: this.selectedRows[0].metadata.namespace,
+            generateName: selected?.[0]?.metadata.name || this.selectedRows[0].metadata.name,
+            namespace: selected?.[0]?.metadata.namespace || this.selectedRows[0].metadata.namespace,
           },
           spec: {
             registry: this.selectedRows[0].metadata.name,
@@ -161,10 +201,10 @@
         });
         try {
           await scanjobObj.save();
-          this.loadData();
+          // this.refresh();
           this.$store.dispatch('growl/success', {
             title: this.t('imageScanner.registries.messages.registryScanComplete'),
-            message: this.t('imageScanner.registries.messages.registryScanComplete', { name: selection[0].metadata.name }),
+            message: this.t('imageScanner.registries.messages.registryScanComplete', { name: this.selectedRows[0].metadata.name }),
           });
         } catch (e) {
           this.$store.dispatch('growl/error', {
@@ -177,6 +217,15 @@
       onSelectionChange(selected) {
         this.selectedRows = selected || [];
       },
+      async promptRemoveRegistry() {
+        const table = this.$refs.table.$refs.table;
+        const act = findBy(table.availableActions, 'action', 'promptRemove');
+        if ( act ) {
+          table.setBulkActionOfInterest(act);
+          table.applyTableAction(act);
+        }
+        return;
+      },
     },
     computed: {
       schema() {

From a149a2eb6ee2d8dbd6ccaeeab818484866451b0a Mon Sep 17 00:00:00 2001
From: Steven Zhang <steven.zhang@suse.com>
Date: Wed, 13 Aug 2025 22:36:47 -0700
Subject: [PATCH 2/2] Refactored fetch method, Changed the algorithom for
 previous status, Added common scan button component, Added refresh button on
 Registry ilst page

---
 .../components/RegistryDetails.vue            |  37 +++-
 .../common/RegistryStatusUpdate.vue           |   8 +-
 .../components/common/ScanButton.vue          |  64 ++++++
 .../formatters/PreviousScanCell.vue           |   6 +-
 .../list/sbombastic.rancher.io.registry.vue   | 194 ++++++++++--------
 5 files changed, 207 insertions(+), 102 deletions(-)
 create mode 100644 pkg/sbombastic-image-vulnerability-scanner/components/common/ScanButton.vue

diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue b/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue
index bcd9a68..e0cebf2 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue
+++ b/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;
diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/common/RegistryStatusUpdate.vue b/pkg/sbombastic-image-vulnerability-scanner/components/common/RegistryStatusUpdate.vue
index 4aa5dbb..fd6e9d7 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/common/RegistryStatusUpdate.vue
+++ b/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");
         }
     }
   }
diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/common/ScanButton.vue b/pkg/sbombastic-image-vulnerability-scanner/components/common/ScanButton.vue
new file mode 100644
index 0000000..9e7deb9
--- /dev/null
+++ b/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>
diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/PreviousScanCell.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/PreviousScanCell.vue
index d0df4b3..fd328df 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/formatters/PreviousScanCell.vue
+++ b/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()}`;
     }
   }
 };
diff --git a/pkg/sbombastic-image-vulnerability-scanner/list/sbombastic.rancher.io.registry.vue b/pkg/sbombastic-image-vulnerability-scanner/list/sbombastic.rancher.io.registry.vue
index 24d367c..bb77c13 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/list/sbombastic.rancher.io.registry.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/list/sbombastic.rancher.io.registry.vue
@@ -1,28 +1,30 @@
 <template>
   <div>
+    <div>
+      <button
+          class="btn role-secondary"
+          style="position: absolute; top: 80px; right: 120px;"
+          @click="refresh()"
+        >
+          <i class="icon icon-refresh"></i>
+          {{ t('imageScanner.registries.button.refresh') || 'Refresh data' }}
+        </button>
+    </div>
     <div class="state">State as of <span class="state-date-time">{{ latestUpdateTimeText }}</span></div>
     <div class="summary-section">
       <RecentUpdatedRegistries :registryStatusList="registryStatusList"/>
       <StatusDistribution :chartData="statusSummary"/>
     </div>
-    <ResourceTable
+    <SortableTable
       ref="table"
-      :schema="schema"
-      :has-advanced-filtering="true"
+      :has-advanced-filtering="false"
       :rows="rows"
       :headers="headers"
       @selection="onSelectionChange"
     >
       <template #header-left>
           <div class="bulk-actions">
-            <button
-              class="btn role-primary"
-              :disabled="!(selectedRows && selectedRows.length)"
-              @click="startScan()"
-            >
-              <i class="icon icon-play"></i>
-              {{ t('imageScanner.registries.button.startScan') || 'Enable' }}
-            </button>
+            <ScanButton :selectedRegistries="selectedRows?.map(row => {return {name: row.metadata.name, namespace: row.metadata.namespace}})" :reloadFn="loadData" />
             <button
               class="btn role-primary"
               :disabled="!(selectedRows && selectedRows.length)"
@@ -33,7 +35,7 @@
             </button>
           </div>
       </template>
-    </ResourceTable>
+    </SortableTable>
   </div>
 </template>
 
@@ -41,7 +43,7 @@
 
   import { ref } from "vue";
   import { RESOURCE } from "@sbombastic-image-vulnerability-scanner/types";
-  import ResourceTable from "@shell/components/ResourceTable";
+  import SortableTable from "@shell/components/SortableTable";
   import RecentUpdatedRegistries from "@sbombastic-image-vulnerability-scanner/components/RecentUpdatedRegistries";
   import StatusDistribution from "@sbombastic-image-vulnerability-scanner/components/StatusDistribution";
   import { REGISTRY_SCAN_TABLE } from "@sbombastic-image-vulnerability-scanner/config/table-headers";
@@ -52,13 +54,16 @@
   import day from 'dayjs';
   import { DATE_FORMAT, TIME_FORMAT } from '@shell/store/prefs';
   import { findBy } from '@shell/utils/array';
+  import ScanButton from "@sbombastic-image-vulnerability-scanner/components/common/ScanButton";
+import { template } from "lodash";
 
   export default {
     name: 'registries',
     components: {
-      ResourceTable,
+      SortableTable,
       RecentUpdatedRegistries,
-      StatusDistribution
+      StatusDistribution,
+      ScanButton,
     },
     data() {
       return {
@@ -79,22 +84,16 @@
     },
 
     async fetch() {
-      await this.$store.dispatch('cluster/findAll', { type: RESOURCE.REGISTRY });
-      if (this.$store.getters['cluster/canList'](RESOURCE.SCAN_JOB)) {
-        await this.$store.dispatch('cluster/findAll', { type: RESOURCE.SCAN_JOB });
-      }
-      this.loadData();
+      await this.loadData();
     },
     methods: {
-      loadData() {
+      async loadData(isForceLoading = false) {
+        await this.$store.dispatch('cluster/findAll', { type: RESOURCE.REGISTRY, 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.registryStatusList = [];
-        this.statusSummary = {
-          scheduled: 0,
-          pending: 0,
-          inprogress: 0,
-          complete: 0,
-          failed: 0
-        };
+        this.statusSummary = {};
         
         let registriesCRD = this.$store.getters['cluster/all'](RESOURCE.REGISTRY);
 
@@ -109,13 +108,44 @@
           return new Date(b.status.startTime) - new Date(a.status.startTime);
         });
 
+        const scanJobMap = this.getScanJobMap(scanJobCRD);
+        const registryDataset  = this.getRegistryDataset(registriesCRD, scanJobMap);
+        this.rows = registryDataset.rows;
+        this.registryStatusList = registryDataset.registryStatusList;
+        this.statusSummary = registryDataset.statusSummary;
+        console.log("this.rows",this.rows)
+      },
+      refresh() {
+        this.loadData(true);
+      },
+      openAddEditRegistry() {},
+      onSelectionChange(selected) {
+        this.selectedRows = selected || [];
+      },
+      async promptRemoveRegistry() {
+        const table = this.$refs.table;
+        const act = findBy(table.availableActions, 'action', 'promptRemove');
+        if ( act ) {
+          table.setBulkActionOfInterest(act);
+          table.applyTableAction(act);
+        }
+        return;
+      },
+      getScanJobMap(scanJobCRD) {
         let scanJobMap = {};
         scanJobCRD.forEach((rec) => {
-          rec.status.statusResult = rec.status?.conditions?.filter(condition => {
+          let statusIndex = rec.status?.conditions?.findIndex((condition) => {
             return condition.status === "True";
-          })[0] || {
+          });
+          console.log("statusIndex", statusIndex, rec.status?.conditions);
+          rec.status.statusResult = statusIndex > -1 ? {
+            type: rec.status.conditions[statusIndex].type,
+            lastTransitionTime: rec.status.conditions[statusIndex].lastTransitionTime,
+            statusIndex: statusIndex
+          } : {
             type: "Pending",
-            lastUpdateTime: null,
+            lastTransitionTime: null,
+            statusIndex: -1
           };
 
           // Set ScanJobe map with namespace/registry as key and up to 2 scan jobs as value
@@ -129,17 +159,28 @@
             scanJobMap[`${rec.metadata.namespace}/${rec.spec.registry}`] = [rec];
           }
         });
-
-        this.rows = registriesCRD.map((rec) => {
+        return scanJobMap;
+      },
+      getRegistryDataset(registriesCRD, scanJobMap) {
+        let registryStatusList = [];
+        const statusSummary = {
+          scheduled: 0,
+          pending: 0,
+          inprogress: 0,
+          complete: 0,
+          failed: 0
+        };
+        const rows = registriesCRD.map((rec) => {
           this.latestUpdateTime = new Date();
           let scanjobs = scanJobMap[`${rec.metadata.namespace}/${rec.metadata.name}`] || [];
           const status = scanjobs[0] ? scanjobs[0].status.statusResult.type.toLowerCase() || "pending" : "none";
-          const prevStatus = scanjobs[1] ? scanjobs[1].status.statusResult.type.toLowerCase() || "pending" : "none";
+          const prevStatus = this.getPreviousStatus(scanjobs);
+          const prevScanStatus = scanjobs[1] ? scanjobs[1].status.statusResult.type.toLowerCase() || "pending" : "none";
           
           // Reform the record for the table
           rec.id = `${rec.metadata.namespace}/${rec.metadata.name}`;
           rec.currStatus = status;
-          rec.prevStatus = prevStatus;
+          rec.prevScanStatus = prevScanStatus;
           rec.progress = scanjobs[0] && scanjobs[0].status.imageCount && scanjobs[0].status.scannedImageCount?
             Math.ceil(scanjobs[0].status.scannedImageCount / scanjobs[0].status.imageCount * 100) : 0;
           rec.prevProgress = scanjobs[1] && scanjobs[1].status.imageCount && scanjobs[1].status.scannedImageCount?
@@ -147,18 +188,18 @@
           rec.error = scanjobs[0] && scanjobs[0].status.statusResult.type === "Failed" ? scanjobs[0].status.statusResult.message : "";
 
           // Summarize the data for Latest status updates panel
-          this.registryStatusList.push({
+          registryStatusList.push({
             registryName: rec.metadata.name,
             uri: rec.spec.uri,
             namespace: rec.metadata.namespace,
-            prevStatus: prevStatus,
+            prevScanStatus: prevStatus,
             currStatus: status,
-            lastUpdateTime: scanjobs[0]?.status?.statusResult?.lastUpdateTime || rec.metadata.creationTimestamp,
+            lastTransitionTime: scanjobs[0]?.status?.statusResult?.lastTransitionTime || rec.metadata.creationTimestamp,
           });
 
           //Summarize the data for Status distribution panel
-          if (status && this.statusSummary.hasOwnProperty(status)) {
-            this.statusSummary[status]++;
+          if (status && statusSummary.hasOwnProperty(status)) {
+            statusSummary[status]++;
           }
 
           rec.availableActions.push({
@@ -171,72 +212,49 @@
 
           console.log("rec.availableActions", rec.availableActions)
           return rec;
-        });
-
+        }); 
         // Sort and limit the registryStatusList to 5 most recent updates
-        this.registryStatusList = this.registryStatusList.sort((a, b) => new Date(b.lastUpdateTime) - new Date(a.lastUpdateTime)).slice(0, 5);
-        while (this.registryStatusList.length < 5) {
-          this.registryStatusList.push({
+        registryStatusList = registryStatusList.sort((a, b) => new Date(b.lastTransitionTime) - new Date(a.lastTransitionTime)).slice(0, 5);
+        while (registryStatusList.length < 5) {
+          registryStatusList.push({
             registryName: "",
             uri: "",
-            prevStatus: "",
+            prevScanStatus: "",
             currStatus: "",
-            lastUpdateTime: new Date().toISOString()
+            lastTransitionTime: new Date().toISOString()
           });
         }
-      },
-      refresh() {
-        window.location.reload();
-      },
-      async startScan(selected) {
-        const scanjobObj = await this.$store.dispatch('cluster/create', {
-          type: RESOURCE.SCAN_JOB,
-          metadata: {
-            generateName: selected?.[0]?.metadata.name || this.selectedRows[0].metadata.name,
-            namespace: selected?.[0]?.metadata.namespace || this.selectedRows[0].metadata.namespace,
-          },
-          spec: {
-            registry: this.selectedRows[0].metadata.name,
-          }
-        });
-        try {
-          await scanjobObj.save();
-          // this.refresh();
-          this.$store.dispatch('growl/success', {
-            title: this.t('imageScanner.registries.messages.registryScanComplete'),
-            message: this.t('imageScanner.registries.messages.registryScanComplete', { name: this.selectedRows[0].metadata.name }),
-          });
-        } catch (e) {
-          this.$store.dispatch('growl/error', {
-            title: this.t('imageScanner.registries.messages.registryScanFailed'),
-            message: e.message,
-          });
+        return {
+          rows,
+          registryStatusList,
+          statusSummary
         }
       },
-      openAddEditRegistry() {},
-      onSelectionChange(selected) {
-        this.selectedRows = selected || [];
-      },
-      async promptRemoveRegistry() {
-        const table = this.$refs.table.$refs.table;
-        const act = findBy(table.availableActions, 'action', 'promptRemove');
-        if ( act ) {
-          table.setBulkActionOfInterest(act);
-          table.applyTableAction(act);
+      getPreviousStatus(scanjobs) {
+        if (scanjobs && scanjobs[0] && scanjobs[0].status && scanjobs[0].status.statusResult && scanjobs[0].status.statusResult.statusIndex > 0) {
+          let index = scanjobs[0].status.statusResult.statusIndex;
+          if (index < 3) {
+            return scanjobs[0].status.conditions[index - 1].type.toLowerCase();
+          } else {
+            return scanjobs[0].status.conditions[index - 2].type.toLowerCase();
+          }
+        } else if (scanjobs && scanjobs[1]) {
+          return scanjobs[1].status.statusResult.type.toLowerCase();
+        } else {
+          return "none";
         }
-        return;
-      },
+      }
     },
     computed: {
       schema() {
-        return this.$store.getters['cluster/schemaFor'](RESOURCE.SCAN_JOB);
+        return this.$store.getters['cluster/schemaFor'](RESOURCE.REGISTRY);
       },
       latestUpdateTimeText() {
         const dateFormat = escapeHtml( this.$store.getters['prefs/get'](DATE_FORMAT));
         const timeFormat = escapeHtml( this.$store.getters['prefs/get'](TIME_FORMAT));
         return `${day(new Date(this.latestUpdateTime).getTime()).format(dateFormat)} ${day(new Date(this.latestUpdateTime).getTime()).format(timeFormat)}`;
       },
-    }
+    },
   }
 
 </script>