Feat: Vulnerabilities overview

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

@@ -7,7 +7,6 @@
       <SevereVulnerabilitiesItem 
         v-for="vulnerability in topSevereVulnerabilities"
         :vulnerability="vulnerability"
-        :total="totalVulnerabilities"
       />
     </div>
   </div>
@@ -26,10 +25,6 @@
         type: Array,
         required: true
       },
-      totalVulnerabilities: {
-        type: Number,
-        required: true
-      }
     },
     data() {}
   }

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

@@ -10,12 +10,12 @@
     name: 'scoreBadge',
     props: {
       score:{
-        type: Number,
-        default: 0
+        type: String,
+        default: ''
       },
       scoreType: {
         type: String,
-        default: ""
+        default: ''
       }
     },
     computed: {

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

@@ -1,15 +1,15 @@
 <template>
     <div class="vulnerability-record">
       <div class="cve">
-        {{ vulnerability.cve }}
+        {{ vulnerability.metadata.name }}
       </div>
-      <ScoreBadge :score="vulnerability.scoreV3" scoreType="v3" />
+      <ScoreBadge :score="vulnerability.spec.scoreV3" scoreType="v3" />
       <div class="impacted-container">
         <div class="impacted">
-          <span>{{ vulnerability.impactedImages }}</span>
+          <span>{{ vulnerability.spec.impactedImages }}</span>
           <BlockPercentageBar
             class="percentage-bar"
-            :percentage="(vulnerability.impactedImages / total) * 100"
+            :percentage="(vulnerability.spec.impactedImages / vulnerability.spec.totalImages) * 100"
           />
         </div>
       </div>
@@ -31,10 +31,6 @@
         type: Object,
         required: true
       },
-      total: {
-        type: Number,
-        required: true
-      }
     },
     data() {
       return { };

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: "metadata.name",
+    sort: "metadata.name",
+    width: 140,
+  },
+  {
+    name: "score",
+    labelKey: "imageScanner.vulnerabilities.table.headers.score",
+    value: "spec.scoreV3",
+    formatter: "ScoreBadgeCell",
+    sort: "spec.scoreV3",
+    width: 100,
+  },
+  {
+    name: "affectedImages",
+    labelKey: "imageScanner.vulnerabilities.table.headers.affectedImages",
+    value: "spec.impactedImages",
+    formatter: "ImpactedCell",
+    formatterParams: { ticks: 23 },
+    sort: "spec.impactedImages",
+    width: 200,
+  },
+  {
+    name: "severity",
+    labelKey: "imageScanner.vulnerabilities.table.headers.severity",
+    value: "spec.severity",
+    sort: "spec.severity",
+    width: 120,
+  },
+  {
+    name: "identifiedImages",
+    labelKey: "imageScanner.vulnerabilities.table.headers.identifiedImages",
+    value: "spec.identifiedImages",
+    formatter: "ImpactedCell",
+    formatterParams: { ticks: 45 },
+    sort: "spec.identifiedImages",
+    width: 300,
+  },
+];

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

@@ -0,0 +1,142 @@
+export const severityDistribution = {
+  critical: 120,
+  high: 54,
+  medium: 23,
+  low: 65,
+  none: 200,
+};
+
+export const cves = [
+  {
+    id: 'CVE-2017-5337',
+    metadata: {
+      name: 'CVE-2017-5337',
+    },
+    spec: {
+      scoreV3: '9.9',
+      severity: 'Critical',
+      identifiedImages: 106,
+      impactedImages: 103,
+    }
+  },
+  {
+    id: 'CVE-2017-5336',
+    metadata: {
+      name: 'CVE-2017-5336',
+    },
+    spec: {
+      scoreV3: '9.6',
+      severity: 'Critical',
+      identifiedImages: 234,
+      impactedImages: 98,
+    }
+  },
+  {
+    id: 'CVE-2017-5335',
+    metadata: {
+      name: 'CVE-2017-5335',
+    },
+    spec: {
+      scoreV3: '8.8',
+      severity: 'High',
+      identifiedImages: 321,
+      impactedImages: 95,
+    }
+  },
+  {
+    id: 'CVE-2017-5334',
+    metadata: {
+      name: 'CVE-2017-5334',
+    },
+    spec: {
+      scoreV3: '8.6',
+      severity: 'High',
+      identifiedImages: 450,
+      impactedImages: 92,
+    }
+  },
+  {
+    id: 'CVE-2017-5333',
+    metadata: {
+      name: 'CVE-2017-5333',
+    },
+    spec: {
+      scoreV3: '8.5',
+      severity: 'High',
+      identifiedImages: 300,
+      impactedImages: 90,
+    }
+  },
+  {
+    id: 'CVE-2017-5332',
+    metadata: {
+      name: 'CVE-2017-5332',
+    },
+    spec: {
+      scoreV3: '7.5',
+      severity: 'Medium',
+      identifiedImages: 250,
+      impactedImages: 85,
+    }
+  },
+  {
+    id: 'CVE-2017-5331',
+    metadata: {
+      name: 'CVE-2017-5331',
+    },
+    spec: {
+      scoreV3: '7.2',
+      severity: 'Medium',
+      identifiedImages: 200,
+      impactedImages: 80,
+    }
+  },
+  {
+    id: 'CVE-2017-5330',
+    metadata: {
+      name: 'CVE-2017-5330',
+    },
+    spec: {
+      scoreV3: '6.8',
+      severity: 'Medium',
+      identifiedImages: 150,
+      impactedImages: 75,
+    }
+  },
+  {
+    id: 'CVE-2017-5329',
+    metadata: {
+      name: 'CVE-2017-5329',
+    },
+    spec: {
+      scoreV3: '5.5',
+      severity: 'Low',
+      identifiedImages: 100,
+      impactedImages: 70,
+    }
+  },
+  {
+    id: 'CVE-2017-5328',
+    metadata: {
+      name: 'CVE-2017-5328',
+    },
+    spec: {
+      scoreV3: '4.3',
+      severity: 'Low',
+      identifiedImages: 50,
+      impactedImages: 65,
+    }
+  },
+  {
+    id: 'CVE-2024-12345',
+    metadata: {
+      name: 'CVE-2024-12345',
+    },
+    spec: {
+      scoreV3: '9.8',
+      severity: 'Critical',
+      identifiedImages: 150,
+      impactedImages: 145,
+    }
+  }
+];

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

@@ -0,0 +1,53 @@
+<template>
+  <div class="impacted-container">
+    <div class="impacted">
+      <span>{{ value }}</span>
+      <BlockPercentageBarAlt
+        :ticks="col.formatterParams?.ticks || 10"
+        :percentage="(row.spec.totalImages && value) ? (value / row.spec.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: Number,
+        required: true
+      },
+      row: {
+        type: Object,
+        required: true
+      },
+      col: {
+        type: Object,
+        required: true
+      }
+    },
+  };
+</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

@@ -77,7 +77,7 @@ imageScanner:
       image:
         allImages: All images
         excludeBaseImages: Exclude base images
-        includeBaseImages: Include base images
+        includeBaseImages: Include base images only
       cve:
         allCves: All identified CVEs
         affectingCvesOnly: Affecting CVEs only
@@ -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.