Modified implementation of column base filters for both client side and server side filtering

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

@@ -249,8 +249,8 @@ export default {
       <div class="header-section">
         <div class="title">
           <span class="resource-header-name">
-            <RouterLink :to="`/c/${this.$route.params.cluster}/${this.PRODUCT_NAME}/${this.PAGE.VULNERABILITIES}`">{{ t('imageScanner.vulnerabilities.title') }}:</RouterLink>
-          {{ $route.params.id }}
+            <!-- <RouterLink :to="`/c/${this.$route.params.cluster}/${this.PRODUCT_NAME}/${this.PAGE.VULNERABILITIES}`">{{ t('imageScanner.vulnerabilities.title') }}:</RouterLink> -->
+             {{ t('imageScanner.vulnerabilities.title') }}: {{ $route.params.id }}
           </span>
           <BadgeState
               :color="getSeverityColor(cveDetail.severity.toLowerCase())"

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

@@ -115,7 +115,7 @@
         </div>
         <div class="info-item" v-if="showAllProperties">
           <span class="label">{{ t('imageScanner.imageDetails.layers') }}:</span>
-          <span class="value">{{ imageDetails.layers || '12' }}</span>
+          <span class="value">{{ imageDetails.layers?.length || '0' }}</span>
         </div>
       </div>
     </div>
@@ -411,7 +411,8 @@ export default {
 
       const metadata = this.currentImage.imageMetadata;
       if (metadata?.registryURI && metadata?.repository && metadata?.tag) {
-        return `${metadata.registryURI}/${metadata.repository}:${metadata.tag}`;
+        // return `${metadata.registryURI}/${metadata.repository}:${metadata.tag}`;
+        return `${metadata.repository.split("/")[0]}:${metadata.tag}`;
       }
 
       // Fallback to the hash ID if metadata is not available

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

@@ -27,7 +27,7 @@ export default {
       <InstallHelmCharts
         style="margin-top: 16px;"
         chart-name="sbombastic"
-        repo-url="https://github.com/rancher-sandbox/sbombastic.git"
+        repo-url="https://rancher-sandbox.github.io"
         repo-name="sbombastic"
         target-namespace="sbombastic"
         chart-display-name="sbombastic"

pkg/sbombastic-image-vulnerability-scanner/components/common/ScanButton.vue

@@ -20,10 +20,6 @@ export default {
       type: Array,
       default: () => []
     },
-    reloadFn: {
-      type: Function,
-      default: () => {}
-    }
   },
   methods: {
     async startScan() {
@@ -54,10 +50,6 @@ export default {
                     title: this.t('imageScanner.registries.messages.registryScanFailed'),
                     message: e.message,
                 });
-            } finally {
-                setTimeout(() => {
-                    this.reloadFn(true);
-                }, 2000);
             }
         });
     },

pkg/sbombastic-image-vulnerability-scanner/config/sbombastic-image-vulnerability-scanner.ts

@@ -33,10 +33,11 @@ export function init($plugin: any, store: any) {
     route:    {
         name:   `c-cluster-${PRODUCT_NAME}-${PAGE.REGISTRIES}`,
         params: {
-            product: PRODUCT_NAME
+            product: PRODUCT_NAME,
+            resource: RESOURCE.REGISTRY,
         },
         meta: { pkg: PRODUCT_NAME, product: PRODUCT_NAME }
-    }
+    },
   });
 
   virtualType({
@@ -52,18 +53,18 @@ export function init($plugin: any, store: any) {
     }
   });
 
-  virtualType({
-    labelKey: "imageScanner.vulnerabilities.title",
-    name: PAGE.VULNERABILITIES,
-    namespaced: false,
-    route: {
-      name: `c-cluster-${PRODUCT_NAME}-${PAGE.VULNERABILITIES}`,
-      params: {
-        product: PRODUCT_NAME,
-      },
-      meta: { pkg: PRODUCT_NAME, product: PRODUCT_NAME },
-    },
-  });
+  // virtualType({
+  //   labelKey: "imageScanner.vulnerabilities.title",
+  //   name: PAGE.VULNERABILITIES,
+  //   namespaced: false,
+  //   route: {
+  //     name: `c-cluster-${PRODUCT_NAME}-${PAGE.VULNERABILITIES}`,
+  //     params: {
+  //       product: PRODUCT_NAME,
+  //     },
+  //     meta: { pkg: PRODUCT_NAME, product: PRODUCT_NAME },
+  //   },
+  // });
 
   virtualType({
     labelKey: "imageScanner.vexManagement.title",
@@ -80,13 +81,13 @@ export function init($plugin: any, store: any) {
 
   weightType(PAGE.DASHBOARD, 98, true);
   weightType(PAGE.IMAGES, 97, true);
-  weightType(PAGE.VULNERABILITIES, 96, true);
+  // weightType(PAGE.VULNERABILITIES, 96, true);
   weightType(PAGE.VEX_MANAGEMENT, 95, true);
 
   basicType([
     PAGE.DASHBOARD,
     PAGE.IMAGES,
-    PAGE.VULNERABILITIES,
+    // PAGE.VULNERABILITIES,
   ]);
   // Prepend spaces on group name, as Rancher 2.12 render group name algin with sidemenu
   basicType([PAGE.REGISTRIES, PAGE.VEX_MANAGEMENT], '    Advanced');

pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts

@@ -27,7 +27,8 @@ export const REGISTRY_SCAN_TABLE = [
   {
     name: "scanInterval",
     labelKey: "imageScanner.registries.registrytable.header.schedule",
-    value: (row: any) => `Every ${row.spec.scanInterval}`,
+    value: "spec.scanInterval",
+    formatter: "ScanInterval",
     sort: "spec.scanInterval",
   },
   {

pkg/sbombastic-image-vulnerability-scanner/formatters/ImageNameCell.vue

@@ -25,7 +25,8 @@ export default {
     displayName() {
       // For real Kubernetes resources, show human-readable reference
       if (this.row.imageMetadata?.repository) {
-        return `${this.row.imageMetadata.registryURI}/${this.row.imageMetadata.repository}:${this.row.imageMetadata.tag}`;
+        // return `${this.row.imageMetadata.registryURI}/${this.row.imageMetadata.repository}:${this.row.imageMetadata.tag}`;
+        return `${this.row.imageMetadata.repository.split("/")[0]}:${this.row.imageMetadata.tag}`;
       }
       // For mock data, show the metadata name
       return this.row.metadata.name;

pkg/sbombastic-image-vulnerability-scanner/formatters/ScanInterval.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="scan-interval-cell">
+    <span v-if="value" class="scan-interval-text">{{ t('imageScanner.general.every') }}&nbsp;{{ value }}</span>
+    <span v-else class="scan-interval-text text-muted">n/a</span>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      required: true
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.scan-interval-cell {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  color: var(--text-secondary);
+
+  .scan-interval-text {
+    margin-left: 8px;
+  }
+}
+</style> 

pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml

@@ -275,7 +275,7 @@ imageScanner:
       medium: Medium
       low: Low
       none: None
-      unknown: Unknown
+      unknown: None
       suppressed: Suppressed
     status:
       pending: Pending
@@ -302,6 +302,7 @@ imageScanner:
     schedule: Every {i}
     reload: Reload
     any: Any
+    every: Every
 
 typeLabel:
   sbombastic.rancher.io.registry: Registries configuration