Fix bugs for UI and CI/CD build

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',

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',

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',

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 {

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"
@@ -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';

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',

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',

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: {

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: {

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',

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>

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 {

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: {

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: {

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>
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import { RESOURCE } from "@sbombastic-image-vulnerability-scanner/types";
+import { RESOURCE } from "@pkg/types";
 
 export default {
   name: 'scanButton',
@@ -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>

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: {

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 = {

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);

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",
   },
   {

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 {

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();

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',

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',

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: {

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: {

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: {

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: {

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,
@@ -19,26 +19,26 @@ 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()}` : "";
     }
   }
 };
 </script>
 
 <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')"

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: {

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: {

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,

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: {

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: {

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,

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