feat(vulnerabilities-overview): Mock master filter implementation

Author: rushk014

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

@@ -6,7 +6,7 @@
       <ScoreBadge :score="vulnerability.spec.scoreV3" scoreType="v3" />
       <div class="impacted-container">
         <div class="impacted">
-          <span>{{ vulnerability.spec.impactedImages }}</span>
+          <span>{{ vulnerability.spec.impactedImages_count }}</span>
           <BlockPercentageBar
             class="percentage-bar"
             :percentage="(vulnerability.spec.impactedImages / vulnerability.spec.totalImages) * 100"

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

@@ -1,4 +1,3 @@
-
 export const REGISTRY_SCAN_TABLE = [
   {
     name: "registry",
@@ -249,10 +248,10 @@ export const VULNERABILITIES_TABLE = [
   {
     name: "affectedImages",
     labelKey: "imageScanner.vulnerabilities.table.headers.affectedImages",
-    value: "spec.impactedImages",
+    value: "spec.impactedImages_count",
     formatter: "ImpactedCell",
     formatterParams: { ticks: 23 },
-    sort: "spec.impactedImages",
+    sort: "spec.impactedImages_count",
     width: 200,
   },
   {
@@ -265,10 +264,10 @@ export const VULNERABILITIES_TABLE = [
   {
     name: "identifiedImages",
     labelKey: "imageScanner.vulnerabilities.table.headers.identifiedImages",
-    value: "spec.identifiedImages",
+    value: "spec.identifiedImages_count",
     formatter: "ImpactedCell",
     formatterParams: { ticks: 45 },
-    sort: "spec.identifiedImages",
+    sort: "spec.identifiedImages_count",
     width: 300,
   },
 ];

pkg/sbombastic-image-vulnerability-scanner/data/sbombastic.rancher.io.vulnerability.js

@@ -15,8 +15,14 @@ export const cves = [
     spec: {
       scoreV3: '9.9',
       severity: 'Critical',
-      identifiedImages: 106,
-      impactedImages: 103,
+      identifiedImages: {
+        base: 40,
+        nonBase: 66,
+      },
+      impactedImages: {
+        base: 38,
+        nonBase: 65,
+      },
     }
   },
   {
@@ -27,8 +33,14 @@ export const cves = [
     spec: {
       scoreV3: '9.6',
       severity: 'Critical',
-      identifiedImages: 234,
-      impactedImages: 98,
+      identifiedImages: {
+        base: 100,
+        nonBase: 134,
+      },
+      impactedImages: {
+        base: 40,
+        nonBase: 58,
+      },
     }
   },
   {
@@ -39,8 +51,14 @@ export const cves = [
     spec: {
       scoreV3: '8.8',
       severity: 'High',
-      identifiedImages: 321,
-      impactedImages: 95,
+      identifiedImages: {
+        base: 121,
+        nonBase: 200,
+      },
+      impactedImages: {
+        base: 45,
+        nonBase: 50,
+      },
     }
   },
   {
@@ -51,8 +69,14 @@ export const cves = [
     spec: {
       scoreV3: '8.6',
       severity: 'High',
-      identifiedImages: 450,
-      impactedImages: 92,
+      identifiedImages: {
+        base: 200,
+        nonBase: 250,
+      },
+      impactedImages: {
+        base: 40,
+        nonBase: 52,
+      },
     }
   },
   {
@@ -63,8 +87,14 @@ export const cves = [
     spec: {
       scoreV3: '8.5',
       severity: 'High',
-      identifiedImages: 300,
-      impactedImages: 90,
+      identifiedImages: {
+        base: 100,
+        nonBase: 200,
+      },
+      impactedImages: {
+        base: 30,
+        nonBase: 60,
+      },
     }
   },
   {
@@ -75,8 +105,14 @@ export const cves = [
     spec: {
       scoreV3: '7.5',
       severity: 'Medium',
-      identifiedImages: 250,
-      impactedImages: 85,
+      identifiedImages: {
+        base: 100,
+        nonBase: 150,
+      },
+      impactedImages: {
+        base: 35,
+        nonBase: 50,
+      },
     }
   },
   {
@@ -87,8 +123,14 @@ export const cves = [
     spec: {
       scoreV3: '7.2',
       severity: 'Medium',
-      identifiedImages: 200,
-      impactedImages: 80,
+      identifiedImages: {
+        base: 80,
+        nonBase: 120,
+      },
+      impactedImages: {
+        base: 30,
+        nonBase: 50,
+      },
     }
   },
   {
@@ -99,8 +141,14 @@ export const cves = [
     spec: {
       scoreV3: '6.8',
       severity: 'Medium',
-      identifiedImages: 150,
-      impactedImages: 75,
+      identifiedImages: {
+        base: 50,
+        nonBase: 100,
+      },
+      impactedImages: {
+        base: 25,
+        nonBase: 50,
+      },
     }
   },
   {
@@ -111,8 +159,14 @@ export const cves = [
     spec: {
       scoreV3: '5.5',
       severity: 'Low',
-      identifiedImages: 100,
-      impactedImages: 70,
+      identifiedImages: {
+        base: 40,
+        nonBase: 60,
+      },
+      impactedImages: {
+        base: 20,
+        nonBase: 50,
+      },
     }
   },
   {
@@ -123,20 +177,50 @@ export const cves = [
     spec: {
       scoreV3: '4.3',
       severity: 'Low',
-      identifiedImages: 50,
-      impactedImages: 65,
+      identifiedImages: {
+        base: 20,
+        nonBase: 30,
+      },
+      impactedImages: {
+        base: 15,
+        nonBase: 50,
+      },
     }
   },
   {
-    id: 'CVE-2024-12345',
+    id: 'CVE-2017-5327',
     metadata: {
-      name: 'CVE-2024-12345',
+      name: 'CVE-2017-5327',
     },
     spec: {
-      scoreV3: '9.8',
-      severity: 'Critical',
-      identifiedImages: 150,
-      impactedImages: 145,
+      scoreV3: '3.1',
+      severity: 'Low',
+      identifiedImages: {
+        base: 10,
+        nonBase: 20,
+      },
+      impactedImages: {
+        base: 10,
+        nonBase: 50,
+      },
     }
-  }
+  },
+  {
+    id: 'CVE-2017-5326',
+    metadata: {
+      name: 'CVE-2017-5326',
+    },
+    spec: {
+      scoreV3: '1.0',
+      severity: 'None',
+      identifiedImages: {
+        base: 5,
+        nonBase: 10,
+      },
+      impactedImages: {
+        base: 5,
+        nonBase: 50,
+      },
+    }
+  },
 ];

pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/Vulnerabilities.vue

@@ -8,8 +8,7 @@
         <LabeledSelect
           v-model:value="selectedImageFilter"
           :options="filterImageOptions"
-          :close-on-select="true"
-          :multiple="false"
+          @update:value="updateFilter"
         />
       </div>
       <div>
@@ -72,9 +71,9 @@
     },
     data() {
       const filterImageOptions = [
-        this.t('imageScanner.images.filters.image.allImages'),
-        this.t('imageScanner.images.filters.image.excludeBaseImages'),
-        this.t('imageScanner.images.filters.image.includeBaseImages')
+        { label: this.t('imageScanner.images.filters.image.allImages'), value: 'all' },
+        { label: this.t('imageScanner.images.filters.image.excludeBaseImages'), value: 'excludeBase' },
+        { label: this.t('imageScanner.images.filters.image.includeBaseImages'), value: 'includeBase' }
       ];
       return {
         VULNERABILITIES_TABLE,
@@ -83,7 +82,7 @@
         vulnerabilities: [],
         selectedRows: [],
         filterImageOptions,
-        selectedImageFilter: filterImageOptions[0],
+        selectedImageFilter: filterImageOptions[0].value,
       };
     },
     async fetch() {
@@ -97,13 +96,28 @@
           totalImages: totalVulnerabilities
         }
       }));
+      this.updateFilter(this.selectedImageFilter);
       this.topSevereVulnerabilities = this.vulnerabilities.sort((a, b) => Number(b.spec.scoreV3) - Number(a.spec.scoreV3)).slice(0, 5);
-
     },
     methods: {
       onSelectionChange(selected) {
         this.selectedRows = selected || [];
       },
+      updateFilter(value) {
+        console.log('Selected filter:', value);
+        this.vulnerabilities.forEach(vul => {
+          if (value === 'all') {
+            vul.spec.identifiedImages_count = vul.spec.identifiedImages.base + vul.spec.identifiedImages.nonBase;
+            vul.spec.impactedImages_count = vul.spec.impactedImages.base + vul.spec.impactedImages.nonBase;
+          } else if (value === 'excludeBase') {
+            vul.spec.identifiedImages_count = vul.spec.identifiedImages.nonBase;
+            vul.spec.impactedImages_count = vul.spec.impactedImages.nonBase;
+          } else if (value === 'includeBase') {
+            vul.spec.identifiedImages_count = vul.spec.identifiedImages.base;
+            vul.spec.impactedImages_count = vul.spec.impactedImages.base;
+          }
+        });
+      }
     },
   }
 </script>