From 3b1ed32efc362028c55c366cbc26f2657ddc14fd Mon Sep 17 00:00:00 2001
From: Rush Kapoor <rush.kapoor@berkeley.edu>
Date: Thu, 21 Aug 2025 20:05:17 -0700
Subject: [PATCH 1/4] feat(vulnerability-overview): Add basic implementation
 for summary charts using mock data

---
 .../components/SeverityDistribution.vue       | 52 +++++++++++++
 .../TopSevereVulnerabilitiesChart.vue         | 64 +++++++++++++++
 .../common/SevereVulnerabilitiesItem.vue      | 78 +++++++++++++++++++
 .../l10n/en-us.yaml                           |  5 ++
 .../Vulnerabilities.vue                       | 78 +++++++++++++------
 5 files changed, 255 insertions(+), 22 deletions(-)
 create mode 100644 pkg/sbombastic-image-vulnerability-scanner/components/SeverityDistribution.vue
 create mode 100644 pkg/sbombastic-image-vulnerability-scanner/components/TopSevereVulnerabilitiesChart.vue
 create mode 100644 pkg/sbombastic-image-vulnerability-scanner/components/common/SevereVulnerabilitiesItem.vue

diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/SeverityDistribution.vue b/pkg/sbombastic-image-vulnerability-scanner/components/SeverityDistribution.vue
new file mode 100644
index 0000000..28a7dcd
--- /dev/null
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/SeverityDistribution.vue
@@ -0,0 +1,52 @@
+<template>
+    <div class="chart-section">
+        <div class="title">
+            {{ t('imageScanner.vulnerabilities.severityDistribution.title') }}
+        </div>
+        <div class="severity-bar-chart">
+            <BarChart :chartData="chartData" colorPrefix="cve" :description="t('imageScanner.vulnerabilities.severityDistribution.subTitle')" />
+        </div>
+    </div>
+</template>
+
+<script>
+  import BarChart from '@sbombastic-image-vulnerability-scanner/components/common/BarChart';
+
+  export default {
+    name: 'severityDistribution',
+    components: {
+      BarChart
+    },
+    props: {
+        chartData: {
+            type: Object,
+            required: true
+        }
+    },
+    data() {}
+  }
+</script>
+
+<style lang="scss" scoped>
+    .chart-section {
+        display: flex;
+        padding: 16px;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 12px;
+        flex: 1 0 0;
+        .title {
+            color: #141419;
+            font-family: Lato;
+            font-size: 18px;
+            font-style: normal;
+            font-weight: 600;
+            line-height: 21px; /* 116.667% */
+        }
+        .severity-bar-chart {
+            padding: 4px 8px;
+            align-items: center;
+            align-self: stretch;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/TopSevereVulnerabilitiesChart.vue b/pkg/sbombastic-image-vulnerability-scanner/components/TopSevereVulnerabilitiesChart.vue
new file mode 100644
index 0000000..60f5c95
--- /dev/null
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/TopSevereVulnerabilitiesChart.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="chart-section">
+    <div class="title">
+        {{ t('imageScanner.vulnerabilities.vulnerabilitiesBySeverityChart.title') }}
+    </div>
+    <div class="vulnerability-list">
+      <SevereVulnerabilitiesItem 
+        v-for="vulnerability in topSevereVulnerabilities"
+        :vulnerability="vulnerability"
+        :total="totalVulnerabilities"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import SevereVulnerabilitiesItem from './common/SevereVulnerabilitiesItem.vue';
+
+  export default {
+    name: 'topSevereVulnerabilitiesChart',
+    components: {
+      SevereVulnerabilitiesItem
+    },
+    props: {
+      topSevereVulnerabilities: {
+        type: Array,
+        required: true
+      },
+      totalVulnerabilities: {
+        type: Number,
+        required: true
+      }
+    },
+    data() {}
+  }
+</script>
+
+<style lang="scss" scoped>
+  .chart-section {
+    display: flex;
+    padding: 16px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+    flex: 1 0 0;
+    border-right: 1px solid #DCDEE7;
+    .title {
+      color: #141419;
+      font-family: Lato;
+      font-size: 18px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 21px; /* 116.667% */
+    }
+    .vulnerability-list {
+      display: flex;
+      padding: 4px 0;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 1px;
+      align-self: stretch;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/common/SevereVulnerabilitiesItem.vue b/pkg/sbombastic-image-vulnerability-scanner/components/common/SevereVulnerabilitiesItem.vue
new file mode 100644
index 0000000..295eee1
--- /dev/null
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/common/SevereVulnerabilitiesItem.vue
@@ -0,0 +1,78 @@
+<template>
+    <div class="vulnerability-record">
+      <div class="cve">
+        {{ vulnerability.cve }}
+      </div>
+      <ScoreBadge :score="vulnerability.scoreV3" scoreType="v3" />
+      <div class="impacted-container">
+        <div class="impacted">
+          <span>{{ vulnerability.impactedImages }}</span>
+          <BlockPercentageBarAlt 
+            :percentage="(vulnerability.impactedImages / total) * 100"
+            :ticks="23"
+          />
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+  import BlockPercentageBarAlt from './BlockPercentageBarAlt.vue';
+  import ScoreBadge from './ScoreBadge.vue';
+
+  export default {
+    name: 'severeVulnerabilitiesItem',
+    components: {
+      ScoreBadge,
+      BlockPercentageBarAlt
+    },
+    props: {
+      vulnerability: {
+        type: Object,
+        required: true
+      },
+      total: {
+        type: Number,
+        required: true
+      }
+    },
+    data() {
+      return { };
+    },
+    methods: {
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .vulnerability-record {
+    display: flex;
+    padding: 4px 0;
+    align-items: center;
+    align-self: stretch;
+    
+    .cve {
+      display: flex;
+      padding: 0 16px;
+      align-items: flex-start;
+      gap: 8px;
+      flex: 1 0 0;
+    }
+
+    .impacted-container {
+      display: flex;
+      width: 260px;
+      padding: 0 16px;
+      align-items: center;
+    }
+
+    .impacted {
+      display: flex;
+      align-items: center;
+      justify-content: end;
+      gap: 16px;
+      flex: 1 0 0;
+      align-self: stretch;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml b/pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml
index dc2ed0f..f37182c 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml
+++ b/pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml
@@ -99,6 +99,11 @@ imageScanner:
         vulnerabilities: vulnerabilities
   vulnerabilities:
     title: Vulnerabilities
+    vulnerabilitiesBySeverityChart:
+      title: Most severe, affecting vulnerabilities
+    severityDistribution:
+      title: Severity distribution
+      subTitle: vulnerabilities in total
   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.
diff --git a/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/Vulnerabilities.vue b/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/Vulnerabilities.vue
index 6c0294a..27dbd41 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/Vulnerabilities.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/Vulnerabilities.vue
@@ -1,38 +1,73 @@
 <template>
   <div class="page">
-    <div class="header">
+    <div class="header-section">
         <h1>Vulnerabilities</h1>
     </div>
-    <div class="charts">
-      <BarChart :chartData="chartData" colorPrefix="cve"  description="vulnerabilities in total"/>
+    <div class="summary-section">
+      <TopSevereVulnerabilitiesChart 
+        :topSevereVulnerabilities="topSevereVulnerabilities"
+        :totalVulnerabilities="totalVulnerabilities"
+      />
+      <SeverityDistribution :chartData="severityDistribution" />
     </div>
     <div class="table">
-      <ScoreBadge :score="7.8" :scoreType="'v2'" style="width: 123px; height: 24px;"/>
     </div>
   </div>
 </template>
 
 <script>
-  import ScoreBadge from '../../../../components/common/ScoreBadge.vue';
-  import BarChart from '../../../../components/common/BarChart.vue';
+  import SeverityDistribution from '@sbombastic-image-vulnerability-scanner/components/SeverityDistribution.vue';
+  import TopSevereVulnerabilitiesChart from '@sbombastic-image-vulnerability-scanner/components/TopSevereVulnerabilitiesChart.vue';
 
   export default {
     name: 'vulnerabilities',
     components: {
-      ScoreBadge,
-      BarChart
+      SeverityDistribution,
+      TopSevereVulnerabilitiesChart,
     },
     data() {
       return {
-        chartData: {
-          critical: 1627,
-          high: 353,
-          medium: 246,
-          low: 1265,
-          none: 293,
-        }
+        severityDistribution: {
+          critical: 120,
+          high: 54,
+          medium: 23,
+          low: 65,
+          none: 200,
+        },
+        topSevereVulnerabilities: [
+          {
+            cve: 'CVE-2017-5337',
+            scoreV3: '9.9',
+            impactedImages: 103,
+          },
+          {
+            cve: 'CVE-2017-5336',
+            scoreV3: '9.6',
+            impactedImages: 98,
+          },
+          {
+            cve: 'CVE-2017-5335',
+            scoreV3: '8.8',
+            impactedImages: 95,
+          },
+          {
+            cve: 'CVE-2017-5334',
+            scoreV3: '8.6',
+            impactedImages: 92,
+          },
+          {
+            cve: 'CVE-2017-5333',
+            scoreV3: '8.5',
+            impactedImages: 90,
+          },
+        ],
       };
-    }
+    },
+    computed: {
+      totalVulnerabilities() {
+        return Object.values(this.severityDistribution).reduce((sum, value) => sum + value, 0);
+      },
+    },
   }
 </script>
 
@@ -47,19 +82,18 @@
     align-self: stretch;
   }
 
-  .header {
+  .header-section {
     display: flex;
     align-items: flex-start;
     gap: 24px;
     align-self: stretch;
   }
 
-  .charts {
-    /* layout */
-    align-items: center;
+  .summary-section {
+    display: flex;
+    min-width: 912px;
+    align-items: flex-start;
     align-self: stretch;
-    padding: 4px 48px;
-    /* style */
     border-radius: 6px;
     border: 1px solid #DCDEE7;
     background: #FFF;

From c6a253852c222519c8696de49d7316114ab51970 Mon Sep 17 00:00:00 2001
From: Rush Kapoor <rush.kapoor@berkeley.edu>
Date: Mon, 25 Aug 2025 16:05:54 -0700
Subject: [PATCH 2/4] fix(vexhub): Fix Vexhub detail page navigation error
 caused by `/list/` view override

---
 .../models/sbombastic.rancher.io.vexhub.js         | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/pkg/sbombastic-image-vulnerability-scanner/models/sbombastic.rancher.io.vexhub.js b/pkg/sbombastic-image-vulnerability-scanner/models/sbombastic.rancher.io.vexhub.js
index 6350964..7a20a25 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/models/sbombastic.rancher.io.vexhub.js
+++ b/pkg/sbombastic-image-vulnerability-scanner/models/sbombastic.rancher.io.vexhub.js
@@ -1,6 +1,4 @@
 import SteveModel from '@shell/plugins/steve/steve-class';
-import { PRODUCT_NAME, PAGE } from "@sbombastic-image-vulnerability-scanner/types";
-import { insertAt } from '@shell/utils/array';
 
 export default class SbombasticRancherIoVexhub extends SteveModel {
 	get _availableActions() {
@@ -57,18 +55,6 @@ export default class SbombasticRancherIoVexhub extends SteveModel {
 		return !this.spec?.enabled;
 	}
 
-	get listLocation() {
-    return { name: `c-cluster-${PRODUCT_NAME}-${PAGE.VEX_MANAGEMENT}`, };
-  }
-
-  get doneOverride() {
-    return this.listLocation;
-  }
-
-  get parentLocationOverride() {
-    return this.listLocation;
-  }
-
 	get fullDetailPageOverride() {
 		return true; 
 	}

From 42ccc1c2b98e14014481a0918e21db2bd829c5a1 Mon Sep 17 00:00:00 2001
From: Rush Kapoor <rush.kapoor@berkeley.edu>
Date: Mon, 25 Aug 2025 16:36:05 -0700
Subject: [PATCH 3/4] fix(vexhub): Fix Vex management detail styling

Removes empty labels/annotations in masthead metadata to align with UX design
---
 .../detail/sbombastic.rancher.io.vexhub.vue               | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/pkg/sbombastic-image-vulnerability-scanner/detail/sbombastic.rancher.io.vexhub.vue b/pkg/sbombastic-image-vulnerability-scanner/detail/sbombastic.rancher.io.vexhub.vue
index 82a0ca5..cf4847c 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/detail/sbombastic.rancher.io.vexhub.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/detail/sbombastic.rancher.io.vexhub.vue
@@ -64,7 +64,7 @@ const defaultMastheadProps = computed(() => {
 <template>
   <DetailPage>
     <template #top-area>
-      <Masthead v-bind="defaultMastheadProps">
+      <Masthead class="masthead" v-bind="defaultMastheadProps">
         <template #additional-actions>
           <button
             data-testid="detail-explore-button"
@@ -85,4 +85,10 @@ const defaultMastheadProps = computed(() => {
 .btn.actions {
   gap: 12px;
 }
+
+/* Hide empty labels and annotations section */
+/* TODO: Remove when rancher provides option in their masthead component */
+.masthead:deep(.labels-and-annotations-empty) {
+  display: none;
+}
 </style>
\ No newline at end of file

From 887604cd6c8cad51f23742cb3c140d88732c6e8d Mon Sep 17 00:00:00 2001
From: Rush Kapoor <rush.kapoor@berkeley.edu>
Date: Mon, 25 Aug 2025 20:52:43 -0700
Subject: [PATCH 4/4] fix(vulnerabilities): Use dynamic BlockPercentageBar

Still need to set responsiveness behavior by fixed height
---
 .../common/SevereVulnerabilitiesItem.vue      | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/common/SevereVulnerabilitiesItem.vue b/pkg/sbombastic-image-vulnerability-scanner/components/common/SevereVulnerabilitiesItem.vue
index 295eee1..2fe6117 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/common/SevereVulnerabilitiesItem.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/common/SevereVulnerabilitiesItem.vue
@@ -7,9 +7,9 @@
       <div class="impacted-container">
         <div class="impacted">
           <span>{{ vulnerability.impactedImages }}</span>
-          <BlockPercentageBarAlt 
+          <BlockPercentageBar
+            class="percentage-bar"
             :percentage="(vulnerability.impactedImages / total) * 100"
-            :ticks="23"
           />
         </div>
       </div>
@@ -17,14 +17,14 @@
 </template>
 
 <script>
-  import BlockPercentageBarAlt from './BlockPercentageBarAlt.vue';
+  import BlockPercentageBar from './BlockPercentageBar.vue';
   import ScoreBadge from './ScoreBadge.vue';
 
   export default {
     name: 'severeVulnerabilitiesItem',
     components: {
       ScoreBadge,
-      BlockPercentageBarAlt
+      BlockPercentageBar
     },
     props: {
       vulnerability: {
@@ -46,24 +46,26 @@
 
 <style lang="scss" scoped>
   .vulnerability-record {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 0.75fr 1.25fr;
     padding: 4px 0;
     align-items: center;
     align-self: stretch;
+    max-height: 28px;
     
     .cve {
       display: flex;
       padding: 0 16px;
       align-items: flex-start;
       gap: 8px;
-      flex: 1 0 0;
     }
 
     .impacted-container {
       display: flex;
-      width: 260px;
       padding: 0 16px;
       align-items: center;
+      justify-content: end;
+      min-width: 230px;
     }
 
     .impacted {
@@ -73,6 +75,10 @@
       gap: 16px;
       flex: 1 0 0;
       align-self: stretch;
+
+      .percentage-bar {
+        width: 158px;
+      }
     }
   }
 </style>
\ No newline at end of file