Basic implementation of Vulnerabilities charts, Various fixes for Vexhub details

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>

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>

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

@@ -0,0 +1,84 @@
+<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>
+          <BlockPercentageBar
+            class="percentage-bar"
+            :percentage="(vulnerability.impactedImages / total) * 100"
+          />
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+  import BlockPercentageBar from './BlockPercentageBar.vue';
+  import ScoreBadge from './ScoreBadge.vue';
+
+  export default {
+    name: 'severeVulnerabilitiesItem',
+    components: {
+      ScoreBadge,
+      BlockPercentageBar
+    },
+    props: {
+      vulnerability: {
+        type: Object,
+        required: true
+      },
+      total: {
+        type: Number,
+        required: true
+      }
+    },
+    data() {
+      return { };
+    },
+    methods: {
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .vulnerability-record {
+    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;
+    }
+
+    .impacted-container {
+      display: flex;
+      padding: 0 16px;
+      align-items: center;
+      justify-content: end;
+      min-width: 230px;
+    }
+
+    .impacted {
+      display: flex;
+      align-items: center;
+      justify-content: end;
+      gap: 16px;
+      flex: 1 0 0;
+      align-self: stretch;
+
+      .percentage-bar {
+        width: 158px;
+      }
+    }
+  }
+</style>

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>

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.

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; 
 	}

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;