feat(vulnerabilities): Add Vulnerabilities overview table based on mock data

Author: rushk014

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

@@ -173,7 +173,7 @@ export const IMAGE_LIST_TABLE = [
     labelKey: "imageScanner.images.listTable.headers.registry",
     value: "spec.registry",
     sort: "spec.registry",
-  }
+  },
 ];
 
 export const REPO_BASED_TABLE = [
@@ -230,3 +230,46 @@ export const REPO_BASED_IMAGE_LIST_TABLE = [
     width: 450,
   },
 ];
+
+export const VULNERABILITIES_TABLE = [
+  {
+    name: "cve",
+    labelKey: "imageScanner.vulnerabilities.table.headers.cve",
+    value: "cve",
+    sort: "cve",
+    width: 140,
+  },
+  {
+    name: "score",
+    labelKey: "imageScanner.vulnerabilities.table.headers.score",
+    value: "scoreV3",
+    formatter: "ScoreBadgeCell",
+    sort: "severity",
+    width: 100,
+  },
+  {
+    name: "affectedImages",
+    labelKey: "imageScanner.vulnerabilities.table.headers.affectedImages",
+    value: "impactedImages",
+    formatter: "ImpactedCell",
+    formatterParams: { ticks: 23 },
+    sort: "impactedImages",
+    width: 200,
+  },
+  {
+    name: "severity",
+    labelKey: "imageScanner.vulnerabilities.table.headers.severity",
+    value: "severity",
+    sort: "severity",
+    width: 120,
+  },
+  {
+    name: "identifiedImages",
+    labelKey: "imageScanner.vulnerabilities.table.headers.identifiedImages",
+    value: "identifiedImages",
+    formatter: "ImpactedCell",
+    formatterParams: { ticks: 45 },
+    sort: "identifiedImages",
+    width: 300,
+  },
+];

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

@@ -0,0 +1,59 @@
+<template>
+  <div class="impacted-container">
+    <div class="impacted">
+      <span>{{ value }}</span>
+      <BlockPercentageBarAlt
+        :ticks="col.formatterParams?.ticks || 10"
+        :percentage="(row.totalImages && value) ? (value / row.totalImages) * 100 : 0"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import BlockPercentageBarAlt from '@sbombastic-image-vulnerability-scanner/components/common/BlockPercentageBarAlt.vue';
+
+  export default {
+    components: {
+      BlockPercentageBarAlt
+    },
+    props: {
+      value: {
+        type: String,
+        required: true
+      },
+      row: {
+        type: Object,
+        required: true
+      },
+      col: {
+        type: Object,
+        required: true
+      }
+    },
+    computed: {
+      vulnerability() {
+        console.log('col', this.col);
+        return this.value;
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .impacted-container {
+    display: flex;
+    padding: 0 16px;
+    align-items: center;
+    justify-content: end;
+  }
+
+  .impacted {
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    gap: 16px;
+    flex: 1 0 0;
+    align-self: stretch;
+  }
+</style>

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

@@ -0,0 +1,19 @@
+<template>
+  <ScoreBadge :score="value" scoreType="v3" />
+</template>
+
+<script>
+  import ScoreBadge from '@sbombastic-image-vulnerability-scanner/components/common/ScoreBadge.vue';
+
+  export default {
+    components: {
+      ScoreBadge
+    },
+    props: {
+      value: {
+        type: String,
+        required: true
+      }
+    },
+  };
+</script>

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

@@ -104,6 +104,13 @@ imageScanner:
     severityDistribution:
       title: Severity distribution
       subTitle: vulnerabilities in total
+    table:
+      headers:
+        cve: CVE ID
+        score: Score
+        affectedImages: Affected images
+        severity: Severity
+        identifiedImages: Images identified in
   vexManagement:
     title: VEX management
     description: Configure the security scanner to use up-to-date VEX reports. This will prioritize remediation efforts, focusing on vulnerabilities that are confirmed to be exploitable and reducing the noise coming from false positives.

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

@@ -11,54 +11,112 @@
       <SeverityDistribution :chartData="severityDistribution" />
     </div>
     <div class="table">
+      <SortableTable
+        :has-advanced-filtering="false"
+        :namespaced="false"
+        :row-actions="false"
+        :force-update-live-and-delayed="0"
+        :use-query-params-for-simple-filtering="true"
+        :rows="vulnerabilities"
+        :headers="VULNERABILITIES_TABLE"
+      />
     </div>
   </div>
 </template>
 
 <script>
+  import SortableTable from '@shell/components/SortableTable';
   import SeverityDistribution from '@sbombastic-image-vulnerability-scanner/components/SeverityDistribution.vue';
   import TopSevereVulnerabilitiesChart from '@sbombastic-image-vulnerability-scanner/components/TopSevereVulnerabilitiesChart.vue';
+  import { VULNERABILITIES_TABLE } from '@sbombastic-image-vulnerability-scanner/config/table-headers';
 
   export default {
     name: 'vulnerabilities',
     components: {
       SeverityDistribution,
       TopSevereVulnerabilitiesChart,
+      SortableTable,
     },
     data() {
       return {
+        VULNERABILITIES_TABLE,
         severityDistribution: {
           critical: 120,
           high: 54,
           medium: 23,
           low: 65,
           none: 200,
         },
-        topSevereVulnerabilities: [
+        cves: [
           {
             cve: 'CVE-2017-5337',
             scoreV3: '9.9',
+            identifiedImages: 106,
             impactedImages: 103,
+            severity: 'Critical',
           },
           {
             cve: 'CVE-2017-5336',
             scoreV3: '9.6',
+            identifiedImages: 234,
             impactedImages: 98,
+            severity: 'Critical',
           },
           {
             cve: 'CVE-2017-5335',
             scoreV3: '8.8',
+            identifiedImages: 321,
             impactedImages: 95,
+            severity: 'High',
           },
           {
             cve: 'CVE-2017-5334',
             scoreV3: '8.6',
+            identifiedImages: 450,
             impactedImages: 92,
+            severity: 'High',
           },
           {
             cve: 'CVE-2017-5333',
             scoreV3: '8.5',
+            identifiedImages: 300,
             impactedImages: 90,
+            severity: 'High',
+          },
+          {
+            cve: 'CVE-2017-5332',
+            scoreV3: '7.5',
+            identifiedImages: 250,
+            impactedImages: 85,
+            severity: 'Medium',
+          },
+          {
+            cve: 'CVE-2017-5331',
+            scoreV3: '7.2',
+            identifiedImages: 200,
+            impactedImages: 80,
+            severity: 'Medium',
+          },
+          {
+            cve: 'CVE-2017-5330',
+            scoreV3: '6.8',
+            identifiedImages: 150,
+            impactedImages: 75,
+            severity: 'Medium',
+          },
+          {
+            cve: 'CVE-2017-5329',
+            scoreV3: '5.5',
+            identifiedImages: 100,
+            impactedImages: 70,
+            severity: 'Low',
+          },
+          {
+            cve: 'CVE-2017-5328',
+            scoreV3: '4.3',
+            identifiedImages: 50,
+            impactedImages: 65,
+            severity: 'Low',
           },
         ],
       };
@@ -67,6 +125,15 @@
       totalVulnerabilities() {
         return Object.values(this.severityDistribution).reduce((sum, value) => sum + value, 0);
       },
+      vulnerabilities() {
+        return this.cves.map(vul => ({
+          ...vul,
+          totalImages: this.totalVulnerabilities
+        }));
+      },
+      topSevereVulnerabilities() {
+        return this.vulnerabilities.sort((a, b) => Number(b.scoreV3) - Number(a.scoreV3)).slice(0, 5);
+      },
     },
   }
 </script>
@@ -100,10 +167,6 @@
   }
 
   .table {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 24px;
-    align-self: stretch;
+    width: 100%;
   }
 </style>