Fixed bugs on chart filters and routing

Author: xingzhang-suse

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

@@ -99,7 +99,7 @@
             class="row"
           >
             <div class="col span-4">
-              <RouterLink>
+              <RouterLink :to="`/c/${this.$route.params.cluster}/${ this.PRODUCT_NAME }/${this.PAGE.VULNERABILITIES}/${vuln.cveId}`">
                 {{ vuln.cveId }}
               </RouterLink>
             </div>
@@ -217,6 +217,7 @@
       :namespaced="false"
       :row-actions="false"
       :search="true"
+      :key-field="'cveId'"
       @selection="onSelectionChange"
     >
       <template #header-left>
@@ -699,7 +700,7 @@ export default {
 .vulnerabilities-list {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 8px;
   width: 100%;
 }
 
@@ -709,8 +710,8 @@ export default {
 }
 
 .vulnerabilities-list .col {
-  padding: 8px 16px;
-  min-height: 32px;
+  padding: 0 16px;
+  min-height: 24px;
 }
 
 .cve-id {

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

@@ -40,7 +40,7 @@
             font-family: Lato;
             font-size: 18px;
             font-style: normal;
-            font-weight: 400;
+            font-weight: 600;
             line-height: 21px; /* 116.667% */
         }
         .severity-bar-chart {

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

@@ -157,7 +157,7 @@ export const IMAGE_LIST_TABLE = [
     labelKey: "imageScanner.images.listTable.headers.identifiedCVEs",
     value: "spec.scanResult",
     formatter: "IdentifiedCVEsCell",
-    sort: "spec.scanResult",
+    sort: ["spec.scanResult.critical", "spec.scanResult.high", "spec.scanResult.medium", "spec.scanResult.low", "spec.scanResult.none"],
     width: 300,
   },
   {
@@ -278,7 +278,7 @@ export const VULNERABILITY_DETAILS_TABLE = [
     name: "cveId",
     labelKey: "imageScanner.imageDetails.table.headers.cveId",
     value: "cveId",
-    formatter: "CveIdCell",
+    formatter: "CveNameLink",
     sort: "cveId",
     width: 150,
   },

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

@@ -138,10 +138,13 @@
         this.loadData(true);
       },
       filterByStatus(status) {
-        console.log("filter by status", status);
-        this.rows = this.rows.filter(row => row.status === status);
-        this.registryStatusList = this.registryStatusList.filter(item => item.status === status);
-        this.statusSummary = this.statusSummary[status] || {};
+        const el = document.querySelector(
+          'input[type="search"][placeholder="Filter"][aria-label="Filter table results"]'
+        );
+        el.value = status;
+
+        el.dispatchEvent(new Event('input', { bubbles: true }));
+        el.dispatchEvent(new KeyboardEvent('keyup', { bubbles: true, key: 'a' }));
       },
       openAddEditRegistry() {
         this.$router.push({
@@ -206,7 +209,7 @@
         });
         return scanJobMap;
       },
-      getRegistryDataset(registriesCRD, scanJobMap) {
+      getRegistryDataset(registriesCRD, scanJobMap ) {
         let registryStatusList = [];
         const statusSummary = {
           pending: 0,