From 71bac22ab3f7e19ba38dd4c8cee7da0b2f878bf2 Mon Sep 17 00:00:00 2001
From: Steven Zhang <steven.zhang@suse.com>
Date: Thu, 28 Aug 2025 17:23:29 -0700
Subject: [PATCH 1/3] Fixed UI display bugs

---
 .../components/RegistryDetails.vue            |   2 +-
 .../components/common/ScanButton.vue          |  14 +-
 .../config/table-headers.ts                   |   4 +-
 .../formatters/PreviousScanCell.vue           |  10 +-
 .../list/sbombastic.rancher.io.registry.vue   | 363 ------------------
 .../models/sbombastic.rancher.io.registry.js  |  94 ++---
 .../ImageOverview.vue                         |   1 +
 .../RegistriesConfiguration.vue               |  51 +--
 8 files changed, 74 insertions(+), 465 deletions(-)
 delete mode 100644 pkg/sbombastic-image-vulnerability-scanner/list/sbombastic.rancher.io.registry.vue

diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue b/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue
index 8358d03..b92ce00 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue
@@ -23,7 +23,7 @@
             <i class="icon icon-refresh"></i>
             {{ t('imageScanner.general.refresh') }}
           </button>
-          <ScanButton :selectedRegistries="[{name: $route.params.id, namespace: $route.params.ns}]" :reloadFn="loadData" />
+          <ScanButton :selectedRegistries="[{name: $route.params.id, namespace: $route.params.ns, currStatus: registryStatus}]" :reloadFn="loadData" />
           <ActionMenu
             v-if="registry"
             button-role="multiAction"
diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/common/ScanButton.vue b/pkg/sbombastic-image-vulnerability-scanner/components/common/ScanButton.vue
index b65331c..90ff3eb 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/common/ScanButton.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/common/ScanButton.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     class="btn role-primary"
-    :disabled="!(selectedRegistries && selectedRegistries.length)"
+    :disabled="disableBtn"
     @click="startScan()"
 >
     <i class="icon icon-play"></i>
@@ -30,7 +30,9 @@ export default {
         if (!this.selectedRegistries || !this.selectedRegistries.length) {
             return;
         }
-        this.selectedRegistries.forEach(async (registry) => {
+        this.selectedRegistries.filter(registry => {
+          return !registry.currStatus || ["none", "failed", "complete"].includes(registry.currStatus.toLowerCase());
+        }).forEach(async (registry) => {
             const scanjobObj = await this.$store.dispatch('cluster/create', {
                 type: RESOURCE.SCAN_JOB,
                 metadata: {
@@ -60,5 +62,13 @@ export default {
         });
     },
   },
+  computed: {
+    disableBtn() {
+      return !(this.selectedRegistries && this.selectedRegistries.length) ||
+        !this.selectedRegistries.some(registry => {
+          return !registry.currStatus || ["none", "failed", "complete"].includes(registry.currStatus.toLowerCase());
+        });
+    },
+  },
 }
 </script>
diff --git a/pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts b/pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts
index 4f3c0f9..d594999 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts
+++ b/pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts
@@ -1,4 +1,3 @@
-import { elapsedTime } from "@shell/utils/time";
 
 export const REGISTRY_SCAN_TABLE = [
   {
@@ -29,8 +28,7 @@ export const REGISTRY_SCAN_TABLE = [
   {
     name: "scanInterval",
     labelKey: "imageScanner.registries.registrytable.header.schedule",
-    value: "spec.scanInterval",
-    getValue: (row: any) => elapsedTime(row.scanInterval * 3600 * 1000).label,
+    value: (row: any) => `Every ${row.spec.scanInterval}`,
     sort: "scanInterval",
   },
   {
diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/PreviousScanCell.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/PreviousScanCell.vue
index 170624d..cce2f9a 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/formatters/PreviousScanCell.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/formatters/PreviousScanCell.vue
@@ -19,13 +19,13 @@ export default {
   },
   methods: {
     getStatusText(row) {
-      return this.t(`imageScanner.enum.status.${row.prevScanStatus?.toLowerCase()}`);
+      return row.prevScanStatus ? this.t(`imageScanner.enum.status.${row.prevScanStatus.toLowerCase()}`) : "";
     },
     getStatusLabelClass(row) {
-      return row.prevScanStatus?.toLowerCase();
+      return row.prevScanStatus? row.prevScanStatus.toLowerCase() : "";
     },
     getStatusDotClass(row) {
-      return `dot ${row.prevScanStatus?.toLowerCase()}`;
+      return row.prevScanStatus? `dot ${row.prevScanStatus.toLowerCase()}` : "";
     }
   }
 };
@@ -33,12 +33,12 @@ export default {
 
 <template>
     <div class="previous-scan-cell">
-        <div class="dot" :class="getStatusDotClass(row)"></div>
+        <div :class="getStatusDotClass(row)"></div>
         <div class="status" :class="getStatusLabelClass(row)">{{ getStatusText(row) }}</div> 
         <div v-if="row.prevProgress">
           <span>{{ t("imageScanner.general.at") }}</span><ProgressCell style="display: inline-block;" :row="{ metadata: { name: row.metadata.name }, progress: row.prevProgress, progressDetail: row.prevProgressDetail, error: null}" />
         </div>
-        <div v-if="row.prevScanStatus.toLowerCase() === 'failed' && row.PrevError">
+        <div v-if="row.prevScanStatus?.toLowerCase() === 'failed' && row.PrevError">
           <span>|
             <TextWithPopedDetail
               :value="t('imageScanner.general.error')"
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
deleted file mode 100644
index f1a4392..0000000
--- a/pkg/sbombastic-image-vulnerability-scanner/list/sbombastic.rancher.io.registry.vue
+++ /dev/null
@@ -1,363 +0,0 @@
-<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>
-    <SortableTable
-      ref="table"
-      :has-advanced-filtering="false"
-      :rows="rows"
-      :headers="headers"
-      @selection="onSelectionChange"
-    >
-      <template #header-left>
-          <div class="bulk-actions">
-            <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)"
-              @click="promptRemoveRegistry()"
-            >
-              <i class="icon icon-delete"></i>
-              {{ t('imageScanner.registries.button.delete') || 'Delete' }}
-            </button>
-          </div>
-      </template>
-    </SortableTable>
-  </div>
-</template>
-
-<script>
-
-  import { ref } from "vue";
-  import { RESOURCE } from "@sbombastic-image-vulnerability-scanner/types";
-  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";
-  import {
-    PRODUCT_NAME,
-  } from "@sbombastic-image-vulnerability-scanner/types";
-  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';
-  import ScanButton from "@sbombastic-image-vulnerability-scanner/components/common/ScanButton";
-import { template } from "lodash";
-
-  export default {
-    name: 'registries',
-    components: {
-      SortableTable,
-      RecentUpdatedRegistries,
-      StatusDistribution,
-      ScanButton,
-    },
-    data() {
-      return {
-        content: ref("Registries"),
-        PRODUCT_NAME: PRODUCT_NAME,
-        rows: [],
-        registryStatusList: [],
-        latestUpdateTime: null,
-        statusSummary: {
-          scheduled: 0,
-          pending: 0,
-          inprogress: 0,
-          complete: 0,
-          failed: 0
-        },
-        headers: REGISTRY_SCAN_TABLE,
-      }
-    },
-
-    async fetch() {
-      await this.loadData();
-    },
-    methods: {
-      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 = {};
-        
-        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;
-          }
-          if (!b.status || !b.status.startTime) {
-            return -1;
-          }
-          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) => {
-          let statusIndex = rec.status?.conditions?.findIndex((condition) => {
-            return condition.status === "True";
-          });
-          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",
-            lastTransitionTime: null,
-            statusIndex: -1
-          };
-
-          // 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];
-          }
-        });
-        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 = 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.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?
-            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
-          registryStatusList.push({
-            registryName: rec.metadata.name,
-            uri: rec.spec.uri,
-            namespace: rec.metadata.namespace,
-            prevScanStatus: prevStatus,
-            currStatus: status,
-            lastTransitionTime: scanjobs[0]?.status?.statusResult?.lastTransitionTime || rec.metadata.creationTimestamp,
-          });
-
-          //Summarize the data for Status distribution panel
-          if (status && statusSummary.hasOwnProperty(status)) {
-            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;
-        }); 
-        // Sort and limit the registryStatusList to 5 most recent updates
-        registryStatusList = registryStatusList.sort((a, b) => new Date(b.lastTransitionTime) - new Date(a.lastTransitionTime)).slice(0, 5);
-        while (registryStatusList.length < 5) {
-          registryStatusList.push({
-            registryName: "",
-            uri: "",
-            prevScanStatus: "",
-            currStatus: "",
-            lastTransitionTime: new Date().toISOString()
-          });
-        }
-        return {
-          rows,
-          registryStatusList,
-          statusSummary
-        }
-      },
-      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";
-        }
-      }
-    },
-    computed: {
-      schema() {
-        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>
-
-
-<style lang="scss" scoped>
-  .page {
-    display: flex;
-    flex-direction: column;
-    padding: 0 20px 20px 20px;
-    min-height: 100%;
-  }
-  .header-section {
-    display: flex;
-    align-items: flex-start;
-    gap: 24px;
-    align-self: stretch;
-    margin-bottom: 24px;
-    .header-left {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: flex-start;
-      gap: 4px;
-      flex: 1 0 0;
-    }
-    .title-wrap {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      align-self: stretch;
-      .title {
-        color: #141419;
-        font-family: Lato;
-        font-size: 24px;
-        font-style: normal;
-        font-weight: 600;
-        line-height: 32px; /* 133.333% */
-      }
-      .state {
-        display: -webkit-box;
-        max-width: 900px;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 1;
-        align-self: stretch;
-        overflow: hidden;
-        color: #717179;
-
-        text-overflow: ellipsis;
-        font-family: Lato;
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 21px; /* 150% */
-
-        .state-date-time {
-          overflow: hidden;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 1;
-          color: #717179;
-          text-overflow: ellipsis;
-          font-family: Lato;
-          font-size: 14px;
-          font-style: normal;
-          font-weight: 600;
-          line-height: 21px;
-        }
-      }
-    }
-    .header-right {
-      display: flex;
-      align-items: flex-end;
-      justify-content: end;
-      flex: 1 0 0;
-      gap: 24px;
-    }
-    .header-btn {
-      height: 40px;
-    }
-    .icon-add {
-      width: 16px;
-      height: 16px;
-      margin-right: 12px;
-      background: url('../assets/img/add.svg') no-repeat center center;
-      background-size: contain;
-    }
-    .icon-refresh-ss {
-      width: 16px;
-      height: 16px;
-      margin-right: 12px;
-      background: url('../assets/img/refresh.svg') no-repeat center center;
-      background-size: contain;
-    }
-  }
-  .summary-section {
-    display: flex;
-    min-width: 912px;
-    align-items: flex-start;
-    align-self: stretch;
-    border-radius: 6px;
-    border: 1px solid #DCDEE7;
-    background: #FFF;
-    margin: 24px 0;
-  }
-   
-</style>
\ No newline at end of file
diff --git a/pkg/sbombastic-image-vulnerability-scanner/models/sbombastic.rancher.io.registry.js b/pkg/sbombastic-image-vulnerability-scanner/models/sbombastic.rancher.io.registry.js
index 1395aa5..6c2012b 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/models/sbombastic.rancher.io.registry.js
+++ b/pkg/sbombastic-image-vulnerability-scanner/models/sbombastic.rancher.io.registry.js
@@ -4,56 +4,61 @@ import { RESOURCE } from '@sbombastic-image-vulnerability-scanner/types';
 import { _CREATE } from '@shell/config/query-params';
 export default class Registry extends SteveModel {
   get _availableActions() {
+    if (this.$rootState.targetRoute.params.resource === "sbombastic.rancher.io.registry") {
+      return super._availableActions;
+    }
     const out = super._availableActions.filter(action => !['showConfiguration','download','downloadYaml'].includes(action.action));
-
+    
     // In details page, we don't want to show the scan action
-    if (this.$rootState.targetRoute && 'id' in this.$rootState.targetRoute.params) {
+    if (this.$rootState.targetRoute && 'id' in this.$rootState.targetRoute.params ||
+      this.$rootState.targetRoute.params.resource === "sbombastic.rancher.io.registry") {
       return out;
     }
 
     const scanAction = {
-          action:   'scanRegistry',
-          label:    this.t('imageScanner.registries.button.startScan'),
-          icon:     'icon-play',
-          enabled:  true,
-          bulkable: true,
-          invoke:   async ({}, res = []) => {
-            const target = (res && res.length ? res[0] : r);
-            const model = target._model || target;
-            const scanjobObj = await this.$dispatch('create', {
-                type: RESOURCE.SCAN_JOB,
-                metadata: {
-                    generateName: model.metadata.name,
-                    namespace: model.metadata.namespace,
-                },
-                spec: {
-                    registry: model.metadata.name,
-                }
-            });
-            try {
-                await scanjobObj.save();
-                this.$dispatch('growl/success', {
-                    title: this.$rootGetters['i18n/t']('imageScanner.registries.messages.registryScanComplete'),
-                    message: this.$rootGetters['i18n/t']('imageScanner.registries.messages.registryScanComplete', { name: model.metadata.name }),
-                }, { root: true });
-            } catch (e) {
-                this.$dispatch('growl/error', {
-                    title: this.$rootGetters['i18n/t']('imageScanner.registries.messages.registryScanFailed'),
-                    message: e.message,
-                }, { root: true });
-            } finally {
-                setTimeout(() => {
-                    target.refreshFn();
-                }, 2000);
+      action:   'scanRegistry',
+      label:    this.t('imageScanner.registries.button.startScan'),
+      icon:     'icon-play',
+      enabled:  true,
+      bulkable: false,
+      invoke:   async ({}, res = []) => {
+        const target = (res && res.length ? res[0] : r);
+        const model = target._model || target;
+        const scanjobObj = await this.$dispatch('create', {
+            type: RESOURCE.SCAN_JOB,
+            metadata: {
+                generateName: model.metadata.name,
+                namespace: model.metadata.namespace,
+            },
+            spec: {
+                registry: model.metadata.name,
             }
-          },
-        };
-        const divider = {
-          divider:true
-        };
-
-    out.unshift(divider);
-    out.unshift(scanAction);
+        });
+        try {
+            await scanjobObj.save();
+            this.$dispatch('growl/success', {
+                title: this.$rootGetters['i18n/t']('imageScanner.registries.messages.registryScanComplete'),
+                message: this.$rootGetters['i18n/t']('imageScanner.registries.messages.registryScanComplete', { name: model.metadata.name }),
+            }, { root: true });
+        } catch (e) {
+            this.$dispatch('growl/error', {
+                title: this.$rootGetters['i18n/t']('imageScanner.registries.messages.registryScanFailed'),
+                message: e.message,
+            }, { root: true });
+        } finally {
+            setTimeout(() => {
+                target.refreshFn();
+            }, 2000);
+        }
+      },
+    };
+    const divider = {
+      divider:true
+    };
+    if (!this.currStatus || ["none", "failed", "complete"].includes(this.currStatus.toLowerCase())) {
+      out.unshift(divider);
+      out.unshift(scanAction);
+    }
 
     return out;
   }
@@ -62,6 +67,9 @@ export default class Registry extends SteveModel {
     this._availableActions = actions;
   }
   get listLocation() {
+    // if (this.$rootState.targetRoute.params.resource === "sbombastic.rancher.io.registry") {
+    //   return this._listLocation;
+    // }
     return { name: `c-cluster-${PRODUCT_NAME}-${PAGE.REGISTRIES}`, };
   }
 
diff --git a/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ImageOverview.vue b/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ImageOverview.vue
index 5e9144f..b4ea208 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ImageOverview.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ImageOverview.vue
@@ -184,6 +184,7 @@
             repoMap.set(mapKey, currRepo);
           } else {
             repoRec = {
+              id: mapKey,
               repository: image.spec.repository,
               registry: image.spec.registry,
               cveCntByRepo: currImageScanResult,
diff --git a/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/RegistriesConfiguration.vue b/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/RegistriesConfiguration.vue
index cf66895..a258cb3 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/RegistriesConfiguration.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/RegistriesConfiguration.vue
@@ -46,11 +46,12 @@
       :use-query-params-for-simple-filtering="true"
       :rows="rows"
       :headers="headers"
+      :key-field="'id'"
       @selection="onSelectionChange"
     >
       <template #header-left>
           <div class="table-top-left">
-            <ScanButton class="table-btn" :selectedRegistries="selectedRows?.map(row => {return {name: row.metadata.name, namespace: row.metadata.namespace}})" :reloadFn="loadData" />
+            <ScanButton class="table-btn" :selectedRegistries="selectedRows?.map(row => {return {name: row.metadata.name, namespace: row.metadata.namespace, currStatus: row.currStatus}})" :reloadFn="loadData" />
             <button
               class="btn role-primary table-btn"
               :disabled="!(selectedRows && selectedRows.length)"
@@ -216,7 +217,6 @@
           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.prevScanStatus = prevScanStatus;
           rec.progress = scanjobs[0] && scanjobs[0].status.imagesCount && scanjobs[0].status.scannedImagesCount?
@@ -256,6 +256,7 @@
             lastTransitionTime: new Date().toISOString()
           });
         }
+        console.log("rows", rows)
         return {
           rows,
           registryStatusList,
@@ -276,52 +277,6 @@
           return "none";
         }
       },
-      addCustomActions(rec) {
-        const actions = Array.isArray(rec.availableActions) ? rec.availableActions.filter(a => !['download','downloadYaml'].includes(a.action)): [];
-        const scanAction = {
-          action:   'scanRegistry',
-          label:    this.t('imageScanner.registries.button.startScan'),
-          icon:     'icon-play',
-          enabled:  true,
-          bulkable: false,
-          invoke:   async ({}, res = []) => {
-            const target = (res && res.length ? res[0] : r);
-            const model = target._model || target;
-            const scanjobObj = await this.$store.dispatch('cluster/create', {
-                type: RESOURCE.SCAN_JOB,
-                metadata: {
-                    generateName: model.metadata.name,
-                    namespace: model.metadata.namespace,
-                },
-                spec: {
-                    registry: model.metadata.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: model.metadata.name }),
-                });
-            } catch (e) {
-                this.$store.dispatch('growl/error', {
-                    title: this.t('imageScanner.registries.messages.registryScanFailed'),
-                    message: e.message,
-                });
-            } finally {
-                setTimeout(() => {
-                    this.refresh();
-                }, 2000);
-            }
-          },
-        };
-        const divider = {
-          divider:true
-        };
-        const availableActions = [scanAction, divider, ...actions];
-        const _model = rec;
-        return { ...rec, _model, availableActions};
-      },
       getLastTransitionTime(conditions) {
         let lastTransitionTime = 0;
         conditions.forEach(condition => {

From 082935f3a72cda98ba755a7a59a76ef6dedd9386 Mon Sep 17 00:00:00 2001
From: Steven Zhang <steven.zhang@suse.com>
Date: Thu, 28 Aug 2025 18:02:56 -0700
Subject: [PATCH 2/3] Test CI/CD build

---
 jest.config.ts                                |  2 +-
 .../components/ImageRiskAssessment.vue        |  2 +-
 .../components/RecentUpdatedRegistries.vue    |  2 +-
 .../components/RegistryDetailScanTable.vue    |  2 +-
 .../components/RegistryDetails.vue            |  2 +-
 .../components/SeverityDistribution.vue       |  2 +-
 .../components/StatusDistribution.vue         |  2 +-
 .../components/TopRiskyImagesChart.vue        |  2 +-
 .../components/common/AmountBarBySeverity.vue |  2 +-
 .../components/common/BarChart.vue            |  2 +-
 .../components/common/RancherMetaProperty.vue |  2 +-
 .../components/common/RegisterStatusBadge.vue |  2 +-
 .../common/RegistryStatusUpdate.vue           |  2 +-
 .../components/common/ScanButton.vue          |  2 +-
 .../components/common/VexStatusBadge.vue      |  2 +-
 .../shell/components/PercentageBar.vue        |  2 +-
 .../sbombastic-image-vulnerability-scanner.ts |  2 +-
 .../detail/sbombastic.rancher.io.registry.vue |  2 +-
 .../detail/sbombastic.rancher.io.vexhub.vue   |  2 +-
 .../edit/sbombastic.rancher.io.registry.vue   |  4 +-
 .../edit/sbombastic.rancher.io.vexhub.vue     |  2 +-
 .../formatters/IdentifiedCVEsCell.vue         |  2 +-
 .../IdentifiedCVEsPercentageCell.vue          |  2 +-
 .../formatters/ImageNameCell.vue              |  2 +-
 .../formatters/ImpactedCell.vue               |  2 +-
 .../formatters/PreviousScanCell.vue           |  4 +-
 .../formatters/ProgressCell.vue               |  2 +-
 .../formatters/RegistryNameCell.vue           |  2 +-
 .../formatters/RegistryStatusCellBadge.vue    |  2 +-
 .../formatters/ScanErrorCell.vue              |  2 +-
 .../formatters/ScoreBadgeCell.vue             |  2 +-
 .../formatters/VexStatusCellBadge.vue         |  2 +-
 .../index.ts                                  |  2 +-
 .../list/sbombastic.rancher.io.vexhub.vue     |  8 ++--
 .../models/sbombastic.rancher.io.registry.js  |  4 +-
 .../ComponentDemo.vue                         | 10 ++---
 .../ImageOverview.vue                         | 12 +++---
 .../RegistriesConfiguration.vue               | 12 +++---
 .../VexManagement.vue                         |  8 ++--
 .../Vulnerabilities.vue                       | 12 +++---
 ...stic-image-vulnerability-scanner-routes.ts | 18 ++++-----
 .../tsconfig.json                             |  2 +-
 .../vue.config.js                             | 38 +------------------
 tsconfig.json                                 |  2 +-
 vue.config.js                                 | 27 ++-----------
 45 files changed, 84 insertions(+), 139 deletions(-)

diff --git a/jest.config.ts b/jest.config.ts
index 6fe08a7..cb5e89f 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -13,7 +13,7 @@ const config: Config.InitialOptions = {
     '@shell/(.*)': '<rootDir>/node_modules/@rancher/shell/$1',
     '@components/(.*)':
       '<rootDir>/node_modules/@rancher/components/dist/@rancher/components.common.js',
-    '@sbombastic-image-vulnerability-scanner/(.*)': '<rootDir>/pkg/sbombastic-image-vulnerability-scanner/$1',
+    '@pkg/(.*)': '<rootDir>/pkg/sbombastic-image-vulnerability-scanner/$1',
     '@network/(.*)': '<rootDir>/pkg/network/$1',
     '@runtime-process-profile/(.*)': '<rootDir>/pkg/runtime-process-profile/$1',
     '@tests/(.*)':      '<rootDir>/tests/$1',
diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/ImageRiskAssessment.vue b/pkg/sbombastic-image-vulnerability-scanner/components/ImageRiskAssessment.vue
index b1ea3f5..1dd59f8 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/ImageRiskAssessment.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/ImageRiskAssessment.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-  import BarChart from '@sbombastic-image-vulnerability-scanner/components/common/BarChart';
+  import BarChart from '@pkg/components/common/BarChart';
 
   export default {
     name: 'imageRiskAssessment',
diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/RecentUpdatedRegistries.vue b/pkg/sbombastic-image-vulnerability-scanner/components/RecentUpdatedRegistries.vue
index 438c43f..72103ef 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/RecentUpdatedRegistries.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/RecentUpdatedRegistries.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-  import RegistryStatusUpdate from '@sbombastic-image-vulnerability-scanner/components/common/RegistryStatusUpdate';
+  import RegistryStatusUpdate from '@pkg/components/common/RegistryStatusUpdate';
 
   export default {
     name: 'recentUpdatedRegistries',
diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetailScanTable.vue b/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetailScanTable.vue
index 6217f51..1ca1797 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetailScanTable.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetailScanTable.vue
@@ -1,5 +1,5 @@
 <script>
-  import { REGISTRY_SCAN_HISTORY_TABLE } from "@sbombastic-image-vulnerability-scanner/config/table-headers";
+  import { REGISTRY_SCAN_HISTORY_TABLE } from "@pkg/config/table-headers";
   import SortableTable from "@shell/components/SortableTable";
 
   export default {
diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue b/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue
index b92ce00..c1d635a 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue
@@ -41,7 +41,7 @@
 
 <script>
   import { BadgeState } from '@rancher/components';
-  import { PRODUCT_NAME, RESOURCE, PAGE } from '@sbombastic-image-vulnerability-scanner/types';
+  import { PRODUCT_NAME, RESOURCE, PAGE } from '@pkg/types';
   import ResourceTable from "@shell/components/ResourceTable";
   import ActionMenu from '@shell/components/ActionMenuShell.vue';
   import RancherMeta from './common/RancherMeta.vue';
diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/SeverityDistribution.vue b/pkg/sbombastic-image-vulnerability-scanner/components/SeverityDistribution.vue
index 28a7dcd..25fa73a 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/SeverityDistribution.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/SeverityDistribution.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-  import BarChart from '@sbombastic-image-vulnerability-scanner/components/common/BarChart';
+  import BarChart from '@pkg/components/common/BarChart';
 
   export default {
     name: 'severityDistribution',
diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/StatusDistribution.vue b/pkg/sbombastic-image-vulnerability-scanner/components/StatusDistribution.vue
index 609c5db..d0ac8ed 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/StatusDistribution.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/StatusDistribution.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-  import BarChart from '@sbombastic-image-vulnerability-scanner/components/common/BarChart';
+  import BarChart from '@pkg/components/common/BarChart';
 
   export default {
     name: 'statusDistribution',
diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/TopRiskyImagesChart.vue b/pkg/sbombastic-image-vulnerability-scanner/components/TopRiskyImagesChart.vue
index cbea8e5..c7be328 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/TopRiskyImagesChart.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/TopRiskyImagesChart.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script>
-  import AmountBarBySeverity from "@sbombastic-image-vulnerability-scanner/components/common/AmountBarBySeverity";
+  import AmountBarBySeverity from "@pkg/components/common/AmountBarBySeverity";
   export default {
     name: 'amountBarBySeverity',
     components: {
diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/common/AmountBarBySeverity.vue b/pkg/sbombastic-image-vulnerability-scanner/components/common/AmountBarBySeverity.vue
index a4aae44..f8857ae 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/common/AmountBarBySeverity.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/common/AmountBarBySeverity.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-  import StackedPercentageBar from '@sbombastic-image-vulnerability-scanner/components/common/StackedPercentageBar';
+  import StackedPercentageBar from '@pkg/components/common/StackedPercentageBar';
   export default {
     name: 'amountBarBySeverity',
     components: {
diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/common/BarChart.vue b/pkg/sbombastic-image-vulnerability-scanner/components/common/BarChart.vue
index c5530d7..d7ea353 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/common/BarChart.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/common/BarChart.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import PercentageBar from '@sbombastic-image-vulnerability-scanner/components/rancher-rewritten/shell/components/PercentageBar';
+import PercentageBar from '@pkg/components/rancher-rewritten/shell/components/PercentageBar';
 
 export default {
   name: 'BarChart',
diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/common/RancherMetaProperty.vue b/pkg/sbombastic-image-vulnerability-scanner/components/common/RancherMetaProperty.vue
index 258d0d9..06e0d5c 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/common/RancherMetaProperty.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/common/RancherMetaProperty.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts">
-import { MetadataProperty } from '@sbombastic-image-vulnerability-scanner/types';
+import { MetadataProperty } from '@pkg/types';
 import { PropType } from 'vue';
 
 export default {
diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/common/RegisterStatusBadge.vue b/pkg/sbombastic-image-vulnerability-scanner/components/common/RegisterStatusBadge.vue
index 0e12036..cdcf513 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/common/RegisterStatusBadge.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/common/RegisterStatusBadge.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-  import { REGISTRY_STATUS } from "@sbombastic-image-vulnerability-scanner/types";
+  import { REGISTRY_STATUS } from "@pkg/types";
   export default {
     name: 'registerStatusBadge',
     props: {
diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/common/RegistryStatusUpdate.vue b/pkg/sbombastic-image-vulnerability-scanner/components/common/RegistryStatusUpdate.vue
index fd6e9d7..fcef051 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/common/RegistryStatusUpdate.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/common/RegistryStatusUpdate.vue
@@ -18,7 +18,7 @@
   import {
     PRODUCT_NAME,
     PAGE,
-  } from "@sbombastic-image-vulnerability-scanner/types";
+  } from "@pkg/types";
   export default {
     name: 'registryStatusUpdate',
     components: {
diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/common/ScanButton.vue b/pkg/sbombastic-image-vulnerability-scanner/components/common/ScanButton.vue
index 90ff3eb..4ff9c6c 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/common/ScanButton.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/common/ScanButton.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import { RESOURCE } from "@sbombastic-image-vulnerability-scanner/types";
+import { RESOURCE } from "@pkg/types";
 
 export default {
   name: 'scanButton',
diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/common/VexStatusBadge.vue b/pkg/sbombastic-image-vulnerability-scanner/components/common/VexStatusBadge.vue
index 61a6267..275dd50 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/common/VexStatusBadge.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/common/VexStatusBadge.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import { VEX_STATUS } from "@sbombastic-image-vulnerability-scanner/types";
+import { VEX_STATUS } from "@pkg/types";
 export default {
   name: 'VexStatusBadge',
   props: {
diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/rancher-rewritten/shell/components/PercentageBar.vue b/pkg/sbombastic-image-vulnerability-scanner/components/rancher-rewritten/shell/components/PercentageBar.vue
index df65b6f..1172879 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/rancher-rewritten/shell/components/PercentageBar.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/rancher-rewritten/shell/components/PercentageBar.vue
@@ -1,5 +1,5 @@
 <script>
-import Bar from '@sbombastic-image-vulnerability-scanner/components/rancher-rewritten/shell/components/graph/Bar';
+import Bar from '@pkg/components/rancher-rewritten/shell/components/graph/Bar';
 import { formatPercent } from '@shell/utils/string';
 
 export const PreferredDirection = {
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 310cf9d..1b2a218 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
@@ -3,7 +3,7 @@ import {
   PRODUCT_NAME,
   PAGE,
   RESOURCE
-} from "@sbombastic-image-vulnerability-scanner/types";
+} from "@pkg/types";
 
 export function init($plugin: IPlugin, store: any) {
   const { product, virtualType, basicType } = $plugin.DSL(store, PRODUCT_NAME);
diff --git a/pkg/sbombastic-image-vulnerability-scanner/detail/sbombastic.rancher.io.registry.vue b/pkg/sbombastic-image-vulnerability-scanner/detail/sbombastic.rancher.io.registry.vue
index 36b11a5..ce6a994 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/detail/sbombastic.rancher.io.registry.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/detail/sbombastic.rancher.io.registry.vue
@@ -1,7 +1,7 @@
 <script>
   import DetailPage from '@rancher/shell/components/Resource/Detail/Page.vue';
   import Metadata from '@rancher/shell/components/Resource/Detail/Metadata/index.vue';
-  import RegistryDetailScanTable from '@sbombastic-image-vulnerability-scanner/components/RegistryDetailScanTable.vue';
+  import RegistryDetailScanTable from '@pkg/components/RegistryDetailScanTable.vue';
 
 
   export default {
diff --git a/pkg/sbombastic-image-vulnerability-scanner/detail/sbombastic.rancher.io.vexhub.vue b/pkg/sbombastic-image-vulnerability-scanner/detail/sbombastic.rancher.io.vexhub.vue
index 155cea9..0bdb3e8 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/detail/sbombastic.rancher.io.vexhub.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/detail/sbombastic.rancher.io.vexhub.vue
@@ -4,7 +4,7 @@ import Masthead from '@shell/components/Resource/Detail/Masthead/index.vue';
 import Date from '@shell/components/formatter/Date.vue';
 import { useStore } from 'vuex';
 import { useI18n } from '@shell/composables/useI18n';
-import UriExternalLink from '@sbombastic-image-vulnerability-scanner/formatters/UriExternalLink.vue';
+import UriExternalLink from '@pkg/formatters/UriExternalLink.vue';
 import { computed } from 'vue';
 
 const store = useStore();
diff --git a/pkg/sbombastic-image-vulnerability-scanner/edit/sbombastic.rancher.io.registry.vue b/pkg/sbombastic-image-vulnerability-scanner/edit/sbombastic.rancher.io.registry.vue
index c7e034c..d168a45 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/edit/sbombastic.rancher.io.registry.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/edit/sbombastic.rancher.io.registry.vue
@@ -11,8 +11,8 @@ import { MANAGEMENT, NAMESPACE } from '@shell/config/types';
 import {
   REGISTRY_TYPE_OPTIONS,
   SCAN_INTERVAL_OPTIONS, SCAN_INTERVALS
-} from "@sbombastic-image-vulnerability-scanner/constants/scan-interval-options";
-import { PRODUCT_NAME, PAGE } from "@sbombastic-image-vulnerability-scanner/types";
+} from "@pkg/constants/scan-interval-options";
+import { PRODUCT_NAME, PAGE } from "@pkg/types";
 
 export default {
   name: 'CruRegistry',
diff --git a/pkg/sbombastic-image-vulnerability-scanner/edit/sbombastic.rancher.io.vexhub.vue b/pkg/sbombastic-image-vulnerability-scanner/edit/sbombastic.rancher.io.vexhub.vue
index 45f51d4..fcc3b0b 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/edit/sbombastic.rancher.io.vexhub.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/edit/sbombastic.rancher.io.vexhub.vue
@@ -5,7 +5,7 @@ import Banner from "@components/Banner/Banner.vue";
 import { Checkbox } from '@components/Form/Checkbox';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import CreateEditView from "@shell/mixins/create-edit-view";
-import {PAGE, PRODUCT_NAME} from "@sbombastic-image-vulnerability-scanner/types/sbombastic-image-vulnerability-scanner";
+import {PAGE, PRODUCT_NAME} from "@pkg/types/sbombastic-image-vulnerability-scanner";
 
 export default {
   name: 'CruVexHub',
diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/IdentifiedCVEsCell.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/IdentifiedCVEsCell.vue
index 885485d..387072f 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/formatters/IdentifiedCVEsCell.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/formatters/IdentifiedCVEsCell.vue
@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import AmountBarBySeverity from "@sbombastic-image-vulnerability-scanner/components/common/AmountBarBySeverity";
+import AmountBarBySeverity from "@pkg/components/common/AmountBarBySeverity";
 export default {
   props: {
     value: {
diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/IdentifiedCVEsPercentageCell.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/IdentifiedCVEsPercentageCell.vue
index 7e8d6ef..646140b 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/formatters/IdentifiedCVEsPercentageCell.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/formatters/IdentifiedCVEsPercentageCell.vue
@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import AmountBarBySeverity from "@sbombastic-image-vulnerability-scanner/components/common/AmountBarBySeverity";
+import AmountBarBySeverity from "@pkg/components/common/AmountBarBySeverity";
 export default {
   props: {
     value: {
diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/ImageNameCell.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/ImageNameCell.vue
index d58a3e8..af029f0 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/formatters/ImageNameCell.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/formatters/ImageNameCell.vue
@@ -7,7 +7,7 @@
 import {
     PRODUCT_NAME,
     PAGE,
-} from "@sbombastic-image-vulnerability-scanner/types";
+} from "@pkg/types";
 export default {
   props: {
     row: {
diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/ImpactedCell.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/ImpactedCell.vue
index d0643c4..e8dcd67 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/formatters/ImpactedCell.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/formatters/ImpactedCell.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script>
-  import BlockPercentageBarAlt from '@sbombastic-image-vulnerability-scanner/components/common/BlockPercentageBarAlt.vue';
+  import BlockPercentageBarAlt from '@pkg/components/common/BlockPercentageBarAlt.vue';
 
   export default {
     components: {
diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/PreviousScanCell.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/PreviousScanCell.vue
index cce2f9a..a4168cc 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/formatters/PreviousScanCell.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/formatters/PreviousScanCell.vue
@@ -1,6 +1,6 @@
 <script>
-import ProgressCell from "@sbombastic-image-vulnerability-scanner/formatters/ProgressCell";
-import TextWithPopedDetail from "@sbombastic-image-vulnerability-scanner/components/common/TextWithPopedDetail";
+import ProgressCell from "@pkg/formatters/ProgressCell";
+import TextWithPopedDetail from "@pkg/components/common/TextWithPopedDetail";
 export default {
   components: {
     ProgressCell,
diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/ProgressCell.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/ProgressCell.vue
index e65de15..b66fa7a 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/formatters/ProgressCell.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/formatters/ProgressCell.vue
@@ -1,5 +1,5 @@
 <script>
-import TextWithPopedDetail from '@sbombastic-image-vulnerability-scanner/components/common/TextWithPopedDetail';
+import TextWithPopedDetail from '@pkg/components/common/TextWithPopedDetail';
 export default {
   props: {
     row: {
diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/RegistryNameCell.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/RegistryNameCell.vue
index 58fe7f6..9e1e306 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/formatters/RegistryNameCell.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/formatters/RegistryNameCell.vue
@@ -7,7 +7,7 @@
 import {
     PRODUCT_NAME,
     PAGE,
-} from "@sbombastic-image-vulnerability-scanner/types";
+} from "@pkg/types";
 export default {
   props: {
     row: {
diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/RegistryStatusCellBadge.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/RegistryStatusCellBadge.vue
index cb1c1c2..dd15404 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/formatters/RegistryStatusCellBadge.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/formatters/RegistryStatusCellBadge.vue
@@ -1,5 +1,5 @@
 <script>
-import RegisterStatusBadge from "@sbombastic-image-vulnerability-scanner/components/common/RegisterStatusBadge";
+import RegisterStatusBadge from "@pkg/components/common/RegisterStatusBadge";
 export default {
   components: {
     RegisterStatusBadge,
diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/ScanErrorCell.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/ScanErrorCell.vue
index 72ef579..444d1a4 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/formatters/ScanErrorCell.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/formatters/ScanErrorCell.vue
@@ -1,5 +1,5 @@
 <script>
-import { REGISTRY_STATUS } from '@sbombastic-image-vulnerability-scanner/types';
+import { REGISTRY_STATUS } from '@pkg/types';
 
 export default {
   props: {
diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/ScoreBadgeCell.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/ScoreBadgeCell.vue
index b59db42..779c094 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/formatters/ScoreBadgeCell.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/formatters/ScoreBadgeCell.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-  import ScoreBadge from '@sbombastic-image-vulnerability-scanner/components/common/ScoreBadge.vue';
+  import ScoreBadge from '@pkg/components/common/ScoreBadge.vue';
 
   export default {
     components: {
diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/VexStatusCellBadge.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/VexStatusCellBadge.vue
index b65516c..226edeb 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/formatters/VexStatusCellBadge.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/formatters/VexStatusCellBadge.vue
@@ -1,5 +1,5 @@
 <script>
-import VexStatusBadge from "@sbombastic-image-vulnerability-scanner/components/common/VexStatusBadge.vue";
+import VexStatusBadge from "@pkg/components/common/VexStatusBadge.vue";
 export default {
   components: {
     VexStatusBadge,
diff --git a/pkg/sbombastic-image-vulnerability-scanner/index.ts b/pkg/sbombastic-image-vulnerability-scanner/index.ts
index f5f0075..79690ac 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/index.ts
+++ b/pkg/sbombastic-image-vulnerability-scanner/index.ts
@@ -1,6 +1,6 @@
 import { importTypes } from '@rancher/auto-import';
 import { IPlugin } from '@shell/core/types';
-import imageScanRoutes from '@sbombastic-image-vulnerability-scanner/routes/sbombastic-image-vulnerability-scanner-routes';
+import imageScanRoutes from '@pkg/routes/sbombastic-image-vulnerability-scanner-routes';
 
 
 // Init the package
diff --git a/pkg/sbombastic-image-vulnerability-scanner/list/sbombastic.rancher.io.vexhub.vue b/pkg/sbombastic-image-vulnerability-scanner/list/sbombastic.rancher.io.vexhub.vue
index 419b5a5..2e9e6f2 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/list/sbombastic.rancher.io.vexhub.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/list/sbombastic.rancher.io.vexhub.vue
@@ -21,14 +21,14 @@
 </template>
 
 <script>
-import { RESOURCE } from "@sbombastic-image-vulnerability-scanner/types";
+import { RESOURCE } from "@pkg/types";
 import ResourceTable from "@shell/components/ResourceTable";
 import Banner from '@components/Banner/Banner.vue';
-import RegisterStatusBadge from "@sbombastic-image-vulnerability-scanner/components/common/RegisterStatusBadge";
-import { VEX_MANAGEMENT_TABLE } from "@sbombastic-image-vulnerability-scanner/config/table-headers";
+import RegisterStatusBadge from "@pkg/components/common/RegisterStatusBadge";
+import { VEX_MANAGEMENT_TABLE } from "@pkg/config/table-headers";
 import {
   PRODUCT_NAME,
-} from "@sbombastic-image-vulnerability-scanner/types";
+} from "@pkg/types";
 
 export default {
   name: 'VexManagement',
diff --git a/pkg/sbombastic-image-vulnerability-scanner/models/sbombastic.rancher.io.registry.js b/pkg/sbombastic-image-vulnerability-scanner/models/sbombastic.rancher.io.registry.js
index 6c2012b..be25608 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/models/sbombastic.rancher.io.registry.js
+++ b/pkg/sbombastic-image-vulnerability-scanner/models/sbombastic.rancher.io.registry.js
@@ -1,6 +1,6 @@
 import SteveModel from '@shell/plugins/steve/steve-class';
-import { PRODUCT_NAME, PAGE } from "@sbombastic-image-vulnerability-scanner/types";
-import { RESOURCE } from '@sbombastic-image-vulnerability-scanner/types';
+import { PRODUCT_NAME, PAGE } from "@pkg/types";
+import { RESOURCE } from '@pkg/types';
 import { _CREATE } from '@shell/config/query-params';
 export default class Registry extends SteveModel {
   get _availableActions() {
diff --git a/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ComponentDemo.vue b/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ComponentDemo.vue
index bd2f25d..1e13144 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ComponentDemo.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ComponentDemo.vue
@@ -33,12 +33,12 @@
 <script>
 
   import { ref } from "vue";
-  import { RESOURCE } from "@sbombastic-image-vulnerability-scanner/types";
+  import { RESOURCE } from "@pkg/types";
   import ResourceTable from '@shell/components/ResourceTable';
-  import AmountBarBySeverity from "@sbombastic-image-vulnerability-scanner/components/common/AmountBarBySeverity";
-  import TopRiskyImagesChart from "@sbombastic-image-vulnerability-scanner/components/TopRiskyImagesChart";
-  import BlockPercentageBar from "@sbombastic-image-vulnerability-scanner/components/common/BlockPercentageBar";
-  import BlockPercentageBarAlt from "@sbombastic-image-vulnerability-scanner/components/common/BlockPercentageBarAlt.vue";
+  import AmountBarBySeverity from "@pkg/components/common/AmountBarBySeverity";
+  import TopRiskyImagesChart from "@pkg/components/TopRiskyImagesChart";
+  import BlockPercentageBar from "@pkg/components/common/BlockPercentageBar";
+  import BlockPercentageBarAlt from "@pkg/components/common/BlockPercentageBarAlt.vue";
 
   export default {
     name: 'registries',
diff --git a/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ImageOverview.vue b/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ImageOverview.vue
index b4ea208..46fb68c 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ImageOverview.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ImageOverview.vue
@@ -96,13 +96,13 @@
 <script>
   import SortableTable from "@shell/components/SortableTable";
   import LabeledSelect from "@shell/components/form/LabeledSelect";
-  import DownloadCustomReport from "@sbombastic-image-vulnerability-scanner/components/common/DownloadCustomReport";
-  import TopRiskyImagesChart from "@sbombastic-image-vulnerability-scanner/components/TopRiskyImagesChart";
-  import ImageRiskAssessment from "@sbombastic-image-vulnerability-scanner/components/ImageRiskAssessment"
-  import { images } from "@sbombastic-image-vulnerability-scanner/data/sbombastic.rancher.io.image";
-  import { IMAGE_LIST_TABLE, REPO_BASED_TABLE, REPO_BASED_IMAGE_LIST_TABLE } from "@sbombastic-image-vulnerability-scanner/config/table-headers";
+  import DownloadCustomReport from "@pkg/components/common/DownloadCustomReport";
+  import TopRiskyImagesChart from "@pkg/components/TopRiskyImagesChart";
+  import ImageRiskAssessment from "@pkg/components/ImageRiskAssessment"
+  import { images } from "@pkg/data/sbombastic.rancher.io.image";
+  import { IMAGE_LIST_TABLE, REPO_BASED_TABLE, REPO_BASED_IMAGE_LIST_TABLE } from "@pkg/config/table-headers";
   import { Checkbox } from '@components/Form/Checkbox';
-  import { RESOURCE } from '@sbombastic-image-vulnerability-scanner/types/sbombastic-image-vulnerability-scanner';
+  import { RESOURCE } from '@pkg/types/sbombastic-image-vulnerability-scanner';
   export default {
     name: 'imageOverview',
     components: {
diff --git a/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/RegistriesConfiguration.vue b/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/RegistriesConfiguration.vue
index a258cb3..02804a4 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/RegistriesConfiguration.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/RegistriesConfiguration.vue
@@ -69,19 +69,19 @@
 <script>
 
   import { ref } from "vue";
-  import { RESOURCE } from "@sbombastic-image-vulnerability-scanner/types";
+  import { RESOURCE } from "@pkg/types";
   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";
+  import RecentUpdatedRegistries from "@pkg/components/RecentUpdatedRegistries";
+  import StatusDistribution from "@pkg/components/StatusDistribution";
+  import { REGISTRY_SCAN_TABLE } from "@pkg/config/table-headers";
   import {
     PRODUCT_NAME,
-  } from "@sbombastic-image-vulnerability-scanner/types";
+  } from "@pkg/types";
   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';
-  import ScanButton from "@sbombastic-image-vulnerability-scanner/components/common/ScanButton";
+  import ScanButton from "@pkg/components/common/ScanButton";
   
   export default {
     name: 'registries',
diff --git a/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/VexManagement.vue b/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/VexManagement.vue
index 183c6ca..29e22cc 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/VexManagement.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/VexManagement.vue
@@ -37,13 +37,13 @@
 </template>
 
 <script>
-import { RESOURCE } from "@sbombastic-image-vulnerability-scanner/types";
+import { RESOURCE } from "@pkg/types";
 import ResourceTable from "@shell/components/ResourceTable";
-import RegisterStatusBadge from "@sbombastic-image-vulnerability-scanner/components/common/RegisterStatusBadge";
-import { VEX_MANAGEMENT_TABLE } from "@sbombastic-image-vulnerability-scanner/config/table-headers";
+import RegisterStatusBadge from "@pkg/components/common/RegisterStatusBadge";
+import { VEX_MANAGEMENT_TABLE } from "@pkg/config/table-headers";
 import {
   PRODUCT_NAME,
-} from "@sbombastic-image-vulnerability-scanner/types";
+} from "@pkg/types";
 
 export default {
   name: 'VexManagement',
diff --git a/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/Vulnerabilities.vue b/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/Vulnerabilities.vue
index 86e7bf7..4b5f45e 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/Vulnerabilities.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/Vulnerabilities.vue
@@ -41,7 +41,7 @@
         <template #header-left>
           <div class="table-top-left">
             <DownloadCustomReport
-              class="table-btn" 
+              class="table-btn"
               :selectedRows="selectedRows"
               :buttonName="t('imageScanner.images.buttons.downloadCustomReport')"
             />
@@ -55,11 +55,11 @@
 <script>
   import SortableTable from '@shell/components/SortableTable';
   import LabeledSelect from "@shell/components/form/LabeledSelect";
-  import SeverityDistribution from '@sbombastic-image-vulnerability-scanner/components/SeverityDistribution';
-  import TopSevereVulnerabilitiesChart from '@sbombastic-image-vulnerability-scanner/components/TopSevereVulnerabilitiesChart';
-  import DownloadCustomReport from '@sbombastic-image-vulnerability-scanner/components/common/DownloadCustomReport';
-  import { VULNERABILITIES_TABLE } from '@sbombastic-image-vulnerability-scanner/config/table-headers';
-  import { severityDistribution, cves } from '@sbombastic-image-vulnerability-scanner/data/sbombastic.rancher.io.vulnerability';
+  import SeverityDistribution from '@pkg/components/SeverityDistribution';
+  import TopSevereVulnerabilitiesChart from '@pkg/components/TopSevereVulnerabilitiesChart';
+  import DownloadCustomReport from '@pkg/components/common/DownloadCustomReport';
+  import { VULNERABILITIES_TABLE } from '@pkg/config/table-headers';
+  import { severityDistribution, cves } from '@pkg/data/sbombastic.rancher.io.vulnerability';
 
   export default {
     name: 'vulnerabilities',
diff --git a/pkg/sbombastic-image-vulnerability-scanner/routes/sbombastic-image-vulnerability-scanner-routes.ts b/pkg/sbombastic-image-vulnerability-scanner/routes/sbombastic-image-vulnerability-scanner-routes.ts
index 331f01a..8c4781d 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/routes/sbombastic-image-vulnerability-scanner-routes.ts
+++ b/pkg/sbombastic-image-vulnerability-scanner/routes/sbombastic-image-vulnerability-scanner-routes.ts
@@ -1,15 +1,15 @@
-import RegistryDetails from "@sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue";
-import ComponentDemo from "@sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ComponentDemo.vue";
-import ImageOverview from "@sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ImageOverview.vue";
-import RegistriesConfiguration from "@sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/RegistriesConfiguration.vue";
-import Vulnerabilities from "@sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/Vulnerabilities.vue";
-import VexManagement from "@sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/VexManagement.vue";
-import CreateResource from "@sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/_resource/create.vue";
-import ListResource from "@sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/_resource/index.vue";
+import RegistryDetails from "@pkg/components/RegistryDetails.vue";
+import ComponentDemo from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ComponentDemo.vue";
+import ImageOverview from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ImageOverview.vue";
+import RegistriesConfiguration from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/RegistriesConfiguration.vue";
+import Vulnerabilities from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/Vulnerabilities.vue";
+import VexManagement from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/VexManagement.vue";
+import CreateResource from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/_resource/create.vue";
+import ListResource from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/_resource/index.vue";
 import {
   PRODUCT_NAME,
   PAGE,
-} from "@sbombastic-image-vulnerability-scanner/types";
+} from "@pkg/types";
 
 const routes = [
   {
diff --git a/pkg/sbombastic-image-vulnerability-scanner/tsconfig.json b/pkg/sbombastic-image-vulnerability-scanner/tsconfig.json
index ac45a6e..e0a4e18 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/tsconfig.json
+++ b/pkg/sbombastic-image-vulnerability-scanner/tsconfig.json
@@ -43,7 +43,7 @@
         "@rancher/components/*"
       ],
       "@tests/*": ["./tests/*"],
-      "@sbombastic-image-vulnerability-scanner/*": ["./*"],
+      "@pkg/*": ["./*"],
     }
   },
   "include": [
diff --git a/pkg/sbombastic-image-vulnerability-scanner/vue.config.js b/pkg/sbombastic-image-vulnerability-scanner/vue.config.js
index 4f86662..2cd177f 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/vue.config.js
+++ b/pkg/sbombastic-image-vulnerability-scanner/vue.config.js
@@ -1,37 +1 @@
-const path = require('path');
-const webpack = require('webpack');
-const vendorConfigFactory = require('./.shell/pkg/vue.config');
-
-module.exports = () => {
-  const vendorConfig =
-    typeof vendorConfigFactory === 'function' ? vendorConfigFactory(__dirname) : vendorConfigFactory;
-
-  // Wrap the vendor configureWebpack if it exists.
-  const vendorConfigureWebpack = vendorConfig.configureWebpack;
-  const customConfigureWebpack = (config) => {
-    if (typeof vendorConfigureWebpack === 'function') {
-      vendorConfigureWebpack(config);
-    }
-    // Add the @sbombastic-image-vulnerability-scanner alias to point to the pkg/sbombastic-image-vulnerability-scanner directory.
-    config.resolve.alias.set(['@sbombastic-image-vulnerability-scanner'], path.resolve(__dirname));
-  };
-
-  // Create an override for __tests__ directories.
-  const kwChainWebpack = (config) => {
-    config.plugin('ignore-tests')
-      .use(webpack.IgnorePlugin, [{ resourceRegExp: /[\\/]__tests__[\\/]/ }]);
-  };
-
-  const mergedChainWebpack = (config) => {
-    if (typeof vendorConfig.chainWebpack === 'function') {
-      vendorConfig.chainWebpack(config);
-    }
-    kwChainWebpack(config);
-  };
-
-  // Merge our custom chainWebpack and configureWebpack with the vendor config.
-  return Object.assign({}, vendorConfig, {
-    chainWebpack:     mergedChainWebpack,
-    configureWebpack: customConfigureWebpack,
-  });
-};
+module.exports = require('./.shell/pkg/vue.config')(__dirname);
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index a82bee0..726ce8c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -31,7 +31,7 @@
       "@tests/*": [
         "./tests/*"
       ],
-      "@sbombastic-image-vulnerability-scanner/*": ["./pkg/sbombastic-image-vulnerability-scanner/*"],
+      "@pkg/*": ["./pkg/sbombastic-image-vulnerability-scanner/*"],
     },
     "typeRoots": [
       "./node_modules",
diff --git a/vue.config.js b/vue.config.js
index afd81dd..10ec2b1 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,25 +1,6 @@
-const config = require('@rancher/shell/vue.config'); // eslint-disable-line @typescript-eslint/no-var-requires
-const path = require('path');
+const config = require('@rancher/shell/vue.config');
 
-module.exports = () => {
-  const vendorConfig = config(__dirname, { excludes: [] });
-
-  // Extend the chainWebpack hook to add our alias
-  if (typeof vendorConfig.chainWebpack === 'function') {
-    const originalChainWebpack = vendorConfig.chainWebpack;
-
-    vendorConfig.chainWebpack = (webpackConfig) => {
-      // Call the original chainWebpack configuration first
-      originalChainWebpack(webpackConfig);
-      // Add the @sbombastic-image-vulnerability-scanner alias pointing to the pkg/sbombastic-image-vulnerability-scanner folder
-      webpackConfig.resolve.alias.set('@sbombastic-image-vulnerability-scanner', path.resolve(__dirname, 'pkg/sbombastic-image-vulnerability-scanner'));
-    };
-  } else {
-    vendorConfig.chainWebpack = (webpackConfig) => {
-      webpackConfig.resolve.alias.set('@sbombastic-image-vulnerability-scanner', path.resolve(__dirname, 'pkg/sbombastic-image-vulnerability-scanner'));
-    };
-  }
-
-  return vendorConfig;
-};
+module.exports = config(__dirname, {
+  excludes: [],
+});
 

From 5cad964a2e26e30924b7e84080e9055434691ceb Mon Sep 17 00:00:00 2001
From: Steven Zhang <steven.zhang@suse.com>
Date: Fri, 29 Aug 2025 20:09:19 -0700
Subject: [PATCH 3/3] Fix color difference on block percentage bar

---
 .../components/common/BlockPercentageBar.vue                  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/common/BlockPercentageBar.vue b/pkg/sbombastic-image-vulnerability-scanner/components/common/BlockPercentageBar.vue
index 910cb68..63ac66c 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/common/BlockPercentageBar.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/common/BlockPercentageBar.vue
@@ -77,12 +77,12 @@
     }
 
     .block {
-        background-color: #e0e0e0;
+        background-color: #EDEFF3;
         border-radius: 1px;
         transition: background-color 0.2s ease;
     }
 
     .block.filled {
-        background-color: #888ca0;
+        background-color: #BEC1D2;
     }
 </style>
\ No newline at end of file