From ef515c2756c4bcbc64e61b0566f9c1ae88ef280f Mon Sep 17 00:00:00 2001
From: lsongsuse <long.song@suse.com>
Date: Wed, 10 Sep 2025 12:24:42 -0700
Subject: [PATCH 1/2] feat: CVE details page with mockdata

# Conflicts:
#	pkg/sbombastic-image-vulnerability-scanner/components/ImageDetails.vue
#	pkg/sbombastic-image-vulnerability-scanner/routes/sbombastic-image-vulnerability-scanner-routes.ts
---
 .../components/CveDetails.vue                 | 420 ++++++++++++++++++
 .../config/table-headers.ts                   | 113 +++++
 .../data/sbombastic.rancher.io.cveDetails.js  | 302 +++++++++++++
 .../formatters/CveNameLink.vue                |  29 ++
 .../l10n/en-us.yaml                           |  19 +
 ...stic-image-vulnerability-scanner-routes.ts |   6 +
 6 files changed, 889 insertions(+)
 create mode 100644 pkg/sbombastic-image-vulnerability-scanner/components/CveDetails.vue
 create mode 100644 pkg/sbombastic-image-vulnerability-scanner/data/sbombastic.rancher.io.cveDetails.js
 create mode 100644 pkg/sbombastic-image-vulnerability-scanner/formatters/CveNameLink.vue

diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/CveDetails.vue b/pkg/sbombastic-image-vulnerability-scanner/components/CveDetails.vue
new file mode 100644
index 0000000..39a0b12
--- /dev/null
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/CveDetails.vue
@@ -0,0 +1,420 @@
+<script>
+import SortableTable from "@shell/components/SortableTable";
+import LabeledSelect from "@shell/components/form/LabeledSelect";
+import { BadgeState } from '@components/BadgeState';
+import { Checkbox } from '@components/Form/Checkbox';
+import {
+  VULNERABILITIES_DETAIL_GROUP_BY_REPOSITORY_TABLE,
+  VULNERABILITIES_DETAIL_IMAGE_LIST_TABLE, VULNERABILITIES_DETAIL_SUB_IMAGES_TABLE,
+} from "@pkg/config/table-headers";
+import { cveDetail, images } from "@pkg/data/sbombastic.rancher.io.cveDetails";
+
+import { PRODUCT_NAME, RESOURCE, PAGE } from "@pkg/types";
+import DownloadCustomReport from "@pkg/components/common/DownloadCustomReport.vue";
+import Metadata, { MetadataProps } from '@shell/components/Resource/Detail/Metadata/index.vue';
+
+export default {
+  name: 'CveDetails',
+  components: {
+    DownloadCustomReport,
+    SortableTable,
+    BadgeState,
+    Checkbox,
+    LabeledSelect,
+    Metadata,
+    MetadataProps,
+  },
+  data() {
+    const imageFilterOptions = [
+      this.t('imageScanner.images.filters.image.allImages'),
+      this.t('imageScanner.images.filters.image.excludeBaseImages'),
+      this.t('imageScanner.images.filters.image.includeBaseImages')
+    ];
+    return {
+      PRODUCT_NAME,
+      RESOURCE,
+      PAGE,
+      cveDetail: cveDetail,
+      rows: images,
+      images_table: VULNERABILITIES_DETAIL_IMAGE_LIST_TABLE,
+      group_by_repository_table: VULNERABILITIES_DETAIL_GROUP_BY_REPOSITORY_TABLE,
+      sub_images_table: VULNERABILITIES_DETAIL_SUB_IMAGES_TABLE,
+      isGrouped: false,
+      selected_images: [],
+      selectedRows: [],
+      preprocessedDataset: {},
+      selectedImageFilter: imageFilterOptions[0],
+      imageFilterOptions,
+      showPopup: false,
+      showVendorPopup: false,
+      selectedVendor: {},
+    }
+  },
+
+  async fetch() {
+    this.preprocessedDataset = this.preprocessData(this.rows);
+    console.log("this.preprocessedDataset", this.preprocessedDataset);
+  },
+
+  methods: {
+    updateData(event) {
+      console.log("isGrouped", this.isGrouped);
+    },
+    onSelectionChange(selected) {
+      console.log("selected", selected)
+      this.selectedRows = selected || [];
+    },
+    preprocessData(images) {
+      const repoMap = new Map();
+
+      images.map(image => {
+        let repoRec = {};
+        const mapKey = `${image.repository},${image.registry}`;
+        if(repoMap.has(mapKey)) {
+          const currRepo = repoMap.get(mapKey);
+          currRepo.images.push(image);
+          repoMap.set(mapKey, currRepo);
+        }else{
+          repoRec = {
+            id: mapKey,
+            repository: image.repository,
+            registry: image.registry,
+            images: [image]
+          }
+          repoMap.set(mapKey, repoRec);
+        }
+      });
+
+      return {
+        rowsByRepo: Array.from(repoMap.values())
+      };
+    },
+    showVendorPopup(vendor) {
+      this.selectedVendor = vendor;
+      this.showPopup = true;
+    },
+
+    getSeverityColor(severity) {
+      console.log("getSeverityColor", severity);
+      const colors = {
+        critical: 'critical-severity',
+        high: 'bg-error',
+        medium: 'bg-warning',
+        low: 'bg-warning',
+        none: 'bg-info'
+      };
+      return colors[severity] || colors.none;
+    },
+
+  },
+}
+</script>
+<template>
+  <div class="page">
+    <div class="about">
+      <div class="header-section">
+        <div class="title">
+          <RouterLink :to="`/c/${this.$route.params.cluster}/${this.PRODUCT_NAME}/${this.PAGE.VULNERABILITY_OVERVIEW}`">{{ t('imageScanner.vulnerabilities.title') }}:</RouterLink>
+        {{ $route.params.id }}
+          <BadgeState
+              :color="getSeverityColor(cveDetail.severity)"
+              :label="t(`imageScanner.enum.cve.${cveDetail.severity}`)"
+              class="severity-badge"
+          />
+        </div>
+        <div class="filter-dropdown">
+          <LabeledSelect
+              v-model:value="selectedImageFilter"
+              :options="imageFilterOptions"
+              :close-on-select="true"
+              :multiple="false"
+          />
+        </div>
+        <div>
+          <button class="btn role-primary">
+            <i class="icon icon-download"></i>
+            {{ t('imageScanner.images.downloadReport') }}
+          </button>
+        </div>
+
+      </div>
+  <!--    description -->
+      <span class="description">{{ cveDetail.description }}</span>
+  <!--  meta data  -->
+      <div class="stats">
+        <div class="column column-1">
+          <div class="stats-item">
+            <div class="stat-item">
+              <span class="label">{{ t('imageScanner.vulnerabilities.details.score') }}:</span>
+              <span class="value">{{ cveDetail.score }}</span>
+            </div>
+            <div class="stat-item">
+              <span class="label">{{ t('imageScanner.vulnerabilities.details.affectedImages') }}:</span>
+              <span class="value">{{ cveDetail.affectedImages }}</span>
+            </div>
+            <div class="stat-item">
+              <span class="label">{{ t('imageScanner.vulnerabilities.details.imageIdentifiedIn') }}:</span>
+              <span class="value">{{ cveDetail.totalImages }}</span>
+            </div>
+            <div class="stat-item">
+              <span class="label">{{ t('imageScanner.vulnerabilities.details.published') }}:</span>
+              <span class="value">{{ cveDetail.publishedDate }}</span>
+            </div>
+            <div class="stat-item">
+              <span class="label">{{ t('imageScanner.vulnerabilities.details.lastModified') }}:</span>
+              <span class="value">{{ cveDetail.lastModifiedDate }}</span>
+            </div>
+            <div class="stat-item">
+              <span class="label">Sources</span>
+              <span class="value">
+                <a v-for="(source, index) in cveDetail.sources" :key="index" :href="source.link" target="_blank" class="source-link">
+                  {{ source.name }}
+                </a>
+              </span>
+            </div>
+          </div>
+        </div>
+        <div class="column column-2">
+          <div class="stat-item">
+            <span class="label"> Advisory vendors </span>
+            <span class="value">{{cveDetail.advisoryVendors.length}}</span>
+          </div>
+          <div class="vendor-tags">
+            <span v-for="(vendor, index) in cveDetail.advisoryVendors" :key="index" class="vendor-tag" @click="showVendorPopup(vendor.link)">
+              {{ vendor.name}}
+            </span>
+          </div>
+          <div v-if="showPopup" class="popup">
+            <div class="popup-content">
+              Reference for {{ cveDetail.id }}
+            </div>
+          </div>
+        </div>
+        <div class="column column-3">
+          <div class="stat-item">
+            <span class="label">CVSS scores</span>
+            <span class="value">{{cveDetail.cvssScores.length}}</span>
+          </div>
+          <div class="cvss-list">
+            <a v-for="(score, index) in cveDetail.cvssScores" :key="index" :href="score.link" target="_blank" class="cvss-link">
+              {{ score.source }} {{ score.score }}
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="table">
+      <SortableTable
+          :has-advanced-filtering="false"
+          :namespaced="false"
+          :row-actions="false"
+          :table-actions="true"
+          :force-update-live-and-delayed="0"
+          :use-query-params-for-simple-filtering="true"
+          :sub-expandable="isGrouped"
+          :sub-rows="isGrouped"
+          :sub-expand-column="isGrouped"
+          :rows="isGrouped ? preprocessedDataset.rowsByRepo : rows"
+          :headers="isGrouped ? group_by_repository_table : images_table"
+          :key-field="'id'"
+          @selection="onSelectionChange"
+      >
+        <template #header-left>
+          <div class="table-top-left">
+            <DownloadCustomReport
+                class="table-btn"
+                :selectedRows="selectedRows"
+                :buttonName="t('imageScanner.images.buttons.downloadCustomReport')"
+            />
+          </div>
+        </template>
+        <template #header-right>
+          <div class="table-top-right">
+            <Checkbox
+                style="margin-top: 8px; width: 180px;"
+                label-key="imageScanner.images.listTable.checkbox.groupByRepo"
+                v-model:value="isGrouped"
+                @update:value="updateData($event)"
+            />
+          </div>
+        </template>
+        <template v-if="isGrouped" #sub-row="{ row, fullColspan }">
+          <tr
+              class="sub-row"
+          >
+            <td :colspan="fullColspan">
+              <SortableTable
+                  class="sub-table"
+                  :rows="row.images"
+                  :headers="sub_images_table"
+                  :search="false"
+                  :row-actions="false"
+                  :table-actions="false"
+              />
+            </td>
+          </tr>
+        </template>
+      </SortableTable>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.btn {
+  padding: 0 16px;
+  gap: 12px;
+}
+
+.about {
+  /* layout */
+  display: flex;
+  padding-bottom: 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  /* style */
+  border-bottom: 1px dashed #DCDEE7;
+}
+
+.page {
+  display: flex;
+  padding: 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+
+.header-section {
+  display: flex;
+  align-items: flex-start;
+  gap: 24px;
+  align-self: stretch;
+
+  .title {
+    display: flex;
+    align-items: flex-start;
+    gap: 4px;
+    flex: 1 0 0;
+    color: #141419;
+    font-family: Lato;
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 600;
+  }
+
+  .filter-dropdown {
+    display: flex;
+    width: 225px;
+    height: 40px;
+  }
+}
+
+.description {
+  display: flex;
+  max-width: 900px;
+  height: 21px;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  color: #717179;
+  font-family: Lato;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 21px;
+}
+
+.stats {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  align-items: flex-start;
+  row-gap: 4px;
+  column-gap: 24px;
+  align-self: stretch;
+  margin-top: 16px;
+}
+
+.stat-item {
+  display: flex;
+  align-items: flex-start;
+  align-self: stretch;
+  font-family: Lato;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 21px;
+}
+.label {
+  display: flex;
+  width: 144px;
+  align-items: center;
+  gap: 8px;
+  color: #717179;
+}
+.value {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1 0 0;
+  color: #141419;
+}
+.vendor-tags {
+  margin-top: 10px;
+}
+.vendor-tag {
+  display: inline-block;
+  margin-right: 5px;
+  padding: 2px 6px;
+  background-color: #e9ecef;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.vendor-tag:hover {
+  background-color: #d1d3e0;
+}
+.cvss-list {
+  display: flex;
+  flex-direction: column;
+}
+.cvss-link, .source-link {
+  color: #007bff;
+  text-decoration: none;
+  margin-bottom: 5px;
+}
+.cvss-link:hover, .source-link:hover {
+  text-decoration: underline;
+}
+.popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.popup-content {
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+  text-align: center;
+}
+
+.severity-badge {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.critical-severity {
+  background-color: #850917 !important;
+  color: white !important;
+}
+
+.table {
+  width: 100%;
+}
+
+</style>
\ No newline at end of file
diff --git a/pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts b/pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts
index 2441f1f..4df293e 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts
+++ b/pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts
@@ -234,6 +234,7 @@ export const VULNERABILITIES_TABLE = [
     name: "cve",
     labelKey: "imageScanner.vulnerabilities.table.headers.cve",
     value: "metadata.name",
+    formatter: "CveNameLink",
     sort: "metadata.name",
     width: 140,
   },
@@ -335,3 +336,115 @@ export const VULNERABILITY_DETAILS_TABLE = [
     width: 200,
   },
 ];
+
+export const VULNERABILITIES_DETAIL_IMAGE_LIST_TABLE = [
+  {
+    name: "imageName",
+    labelKey: "imageScanner.vulnerabilities.details.table.headers.imageName",
+    value: "imageName",
+    formatter: "ImageNameCell",
+    sort: "imageName",
+    width: 200,
+  },
+  {
+    name: "package",
+    labelKey: "imageScanner.vulnerabilities.details.table.headers.package",
+    value: "package",
+    sort: "package"
+  },
+  {
+    name: "status",
+    labelKey: "imageScanner.vulnerabilities.details.table.headers.status",
+    value: "status",
+    sort: "status",
+  },
+  {
+    name: "fixAvailable",
+    labelKey: "imageScanner.vulnerabilities.details.table.headers.fixVersion",
+    formatter: "FixAvailableCell",
+    value: "fixAvailable",
+    sort: "fixAvailable",
+  },
+  {
+    name: "packageVersion",
+    labelKey: "imageScanner.vulnerabilities.details.table.headers.packageVersion",
+    value: "packageVersion",
+    sort: "packageVersion",
+  },
+  {
+    name: "packagePath",
+    labelKey: "imageScanner.vulnerabilities.details.table.headers.packagePath",
+    value: "packagePath",
+    sort: "packagePath",
+  },
+  {
+    name: "repository",
+    labelKey: "imageScanner.vulnerabilities.details.table.headers.repository",
+    value: "repository",
+    sort: "repository",
+  }
+];
+
+export const VULNERABILITIES_DETAIL_GROUP_BY_REPOSITORY_TABLE = [
+  {
+    name: "repository",
+    labelKey: "imageScanner.vulnerabilities.details.table.headers.repository",
+    value: "repository",
+    sort: "repository",
+    width: 300,
+  },
+  {
+    name: "registry",
+    labelKey: "imageScanner.vulnerabilities.details.table.headers.registry",
+    value: "registry",
+    sort: "registry",
+  }
+]
+
+export const VULNERABILITIES_DETAIL_SUB_IMAGES_TABLE = [
+  {
+    name: "",
+    value: "",
+    sort: "",
+    width: 60,
+  },
+  {
+    name: "imageName",
+    labelKey: "imageScanner.vulnerabilities.details.table.headers.imageName",
+    value: "imageName",
+    formatter: "ImageNameCell",
+    sort: "imageName",
+  },
+  {
+    name: "package",
+    labelKey: "imageScanner.vulnerabilities.details.table.headers.package",
+    value: "package",
+    sort: "package",
+  },
+  {
+    name: "status",
+    labelKey: "imageScanner.vulnerabilities.details.table.headers.status",
+    value: "status",
+    sort: "status",
+  },
+  {
+    name: "fixAvailable",
+    labelKey: "imageScanner.vulnerabilities.details.table.headers.fixVersion",
+    formatter: "FixAvailableCell",
+    value: "fixAvailable",
+    sort: "fixAvailable",
+  },
+  {
+    name: "packageVersion",
+    labelKey: "imageScanner.vulnerabilities.details.table.headers.packageVersion",
+    value: "packageVersion",
+    sort: "packageVersion",
+  },
+  {
+    name: "packagePath",
+    labelKey: "imageScanner.vulnerabilities.details.table.headers.packagePath",
+    value: "packagePath",
+    sort: "packagePath",
+  }
+
+]
diff --git a/pkg/sbombastic-image-vulnerability-scanner/data/sbombastic.rancher.io.cveDetails.js b/pkg/sbombastic-image-vulnerability-scanner/data/sbombastic.rancher.io.cveDetails.js
new file mode 100644
index 0000000..6afe79e
--- /dev/null
+++ b/pkg/sbombastic-image-vulnerability-scanner/data/sbombastic.rancher.io.cveDetails.js
@@ -0,0 +1,302 @@
+export const cveDetail = {
+    "id": "CVE-2017-5337",
+    "severity": "critical",
+    "description": "The ReadMATImageV4 function in ImageMagick 7.0.8-7 uses an uninitialized variable, leading to memory corruption.",
+    "score": "9.9",
+    "cvssVersion": "v3",
+    "advisoryVendors": [
+      {
+        "name": "Microsoft",
+        "link": "https://docs.microsoft.com/en-us/security-updates/securitybulletins/2015/ms15-131"
+      },
+      {
+        "name": "SUSE",
+        "link": "https://www.suse.com/security/cve/CVE-2017-5337/"
+      },
+      {
+        "name": "Red Hat",
+        "link": "https://access.redhat.com/security/cve/CVE-2017-5337"
+      },
+      {
+        "name": "Alpine",
+        "link": "https://security.alpinelinux.org/vuln/CVE-2017-5337"
+      },
+      {
+        "name": "CISA",
+        "link": "https://www.cisa.gov/known-exploited-vulnerabilities-catalog/CVE-2017-5337"
+      }
+    ],
+    "cvssScores": [
+      {
+        "source": "NVD CVSSv3",
+        "score": 9.9,
+        "link": "https://nvd.nist.gov/vuln-metrics/cvss/v3-calculator?name=CVE-2017-5337"
+      },
+      {
+        "source": "NVD CVSSv2",
+        "score": 9.8,
+        "link": "https://nvd.nist.gov/vuln-metrics/cvss/v2-calculator?name=CVE-2017-5337"
+      }
+    ],
+    "affectedImages": 150,
+    "totalImages": 900,
+    "imagesIdentifiedDate": "Sep 01, 2025 10:00 AM",
+    "publishedDate": "Oct 19, 2024 4:37 AM",
+    "lastModifiedDate": "Sep 01, 2025 9:00 AM",
+    "sources": [
+      {
+        "name": "NVD",
+        "link": "https://nvd.nist.gov/vuln/detail/CVE-2017-5337"
+      },
+      {
+        "name": "GHSA",
+        "link": "https://github.com/advisories/GHSA-1234-5678"
+      }
+    ],
+    "references": [
+      {
+        "url": "https://docs.microsoft.com/en-us/security-updates/securitybulletins/2015/ms15-131",
+        "title": "Microsoft Security Bulletin MS15-131 - Critical | Microsoft Docs"
+      },
+      {
+        "url": "http://www.securitytracker.com/id/1034324",
+        "title": "Microsoft Office File Processing Flaws Lets Remote Users Execute Arbitrary Code"
+      },
+      {
+        "url": "https://www.exploit-db.com/exploits/40878/",
+        "title": "Microsoft Edge - CMarkup::EnsureDeleteCFState Use-After-Free (MS15-131)"
+      },
+      {
+        "url": "https://imagemagick.org/script/security-policy.php",
+        "title": "ImageMagick Security Policy"
+      }
+    ]
+  };
+
+  export const images = [
+    {
+      "id": "struts-attachment:1.0",
+      "metadata": {
+        name: 'struts-attachment:1.0',
+      },
+      "package": "tomcat-embed-jasper:9.1",
+      "status": "Affected",
+      "fixAvailable": true,
+      "fixVersion": "7.28.1.3",
+      "packageVersion": "7.26.0.1+weezy20",
+      "packagePath": "/usr/local/bin/",
+      "repository": "coredns",
+      "registry": "Docker Hub",
+      "cve": "CVE-2017-5337"
+    },
+    {
+      "id": "imagemagick:4.8.5613",
+      "metadata": {
+        name: 'imagemagick:4.8.5613',
+      },
+      "package": "libxml2",
+      "status": "Not affected",
+      "fixAvailable": false,
+      "fixVersion": null,
+      "packageVersion": "2.8.0+dfsg17+weezy9",
+      "packagePath": "/usr/local/bin/",
+      "repository": "demo-cody-protected",
+      "registry": "demo.suse-security-ivs.io",
+      "cve": "CVE-2017-5337"
+    },
+    {
+      "id": "centos:7.1908",
+      "metadata": {
+        name: 'centos:7.1908',
+      },
+      "package": "python:2.7",
+      "status": "Affected",
+      "fixAvailable": false,
+      "fixVersion": null,
+      "packageVersion": "2.7.3.6+deb7u3",
+      "packagePath": "/",
+      "repository": "kube-controller-manager",
+      "registry": "Docker Hub",
+      "cve": "CVE-2017-5337"
+    },
+    {
+      "id": "nginx:1.19.10",
+      "metadata": {
+        name: 'nginx:1.19.10',
+      },
+      "package": "tomcat-api-el-9.0",
+      "status": "Affected",
+      "fixAvailable": true,
+      "fixVersion": "10.1.39+deb",
+      "packageVersion": "10.1.34.11.0.2.9.0.28",
+      "packagePath": "/",
+      "repository": "kube-apiserver",
+      "registry": "demo.suse-security-ivs.io",
+      "cve": "CVE-2017-5337"
+    },
+    {
+      "id": "docker-compose:1.29.2",
+      "metadata": {
+        name: 'docker-compose:1.29.2',
+      },
+      "package": "imagemagick",
+      "status": "Not affected",
+      "fixAvailable": false,
+      "fixVersion": null,
+      "packageVersion": "4.8.5613+deb7u9",
+      "packagePath": "/usr/bin/",
+      "repository": "coredns",
+      "registry": "Docker Hub",
+      "cve": "CVE-2017-5337"
+    },
+    {
+      "id": "python:3.9.7",
+      "metadata": {
+        name: 'python:3.9.7',
+      },
+      "package": "tomcat-embed-jasper:9.1",
+      "status": "Affected",
+      "fixAvailable": true,
+      "fixVersion": "8.21.6",
+      "packageVersion": "7.26.0.1+weezy20",
+      "packagePath": "/home/klipper-helm/lo...",
+      "repository": "flask-app",
+      "registry": "ecr.ap-southeast-emea.2",
+      "cve": "CVE-2017-5337"
+    },
+    {
+      "id": "nodejs:14.17.3",
+      "metadata": {
+        name: 'nodejs:14.17.3',
+      },
+      "package": "libxml2",
+      "status": "Affected",
+      "fixAvailable": false,
+      "fixVersion": null,
+      "packageVersion": "2.8.0+dfsg17+weezy9",
+      "packagePath": "/home/klipper-helm/lo...",
+      "repository": "data-store",
+      "registry": "ecr.ap-southeast-emea.2",
+      "cve": "CVE-2017-5337"
+    },
+    {
+      "id": "redis:5.0.7",
+      "metadata": {
+        name: 'redis:5.0.7',
+      },
+      "package": "python:2.7",
+      "status": "Not affected",
+      "fixAvailable": false,
+      "fixVersion": null,
+      "packageVersion": "2.7.3.6+deb7u3",
+      "packagePath": "/usr/local/bin/",
+      "repository": "cache-service",
+      "registry": "Docker Hub",
+      "cve": "CVE-2017-5337"
+    },
+    {
+      "id": "mongodb:4.4.1",
+      "metadata": {
+        name: 'mongodb:4.4.1',
+      },
+      "package": "tomcat-api-el-9.0",
+      "status": "Affected",
+      "fixAvailable": true,
+      "fixVersion": "7.28.1.3",
+      "packageVersion": "10.1.34.11.0.2.9.0.28",
+      "packagePath": "/usr/local/bin/",
+      "repository": "data-store",
+      "registry": "ecr.ap-southeast-emea.2",
+      "cve": "CVE-2017-5337"
+    },
+    {
+      "id": "colangi:1.6.5",
+      "metadata": {
+        name: 'colangi:1.6.5',
+      },
+      "package": "imagemagick",
+      "status": "Affected",
+      "fixAvailable": false,
+      "fixVersion": null,
+      "packageVersion": "4.8.5613+deb7u9",
+      "packagePath": "/usr/bin/",
+      "repository": "api-gateway",
+      "registry": "ecr.ap-southeast-emea.2",
+      "cve": "CVE-2017-5337"
+    },
+    {
+      "id": "ruby:2.7.3",
+      "metadata": {
+        name: 'ruby:2.7.3',
+      },
+      "package": "tomcat-embed-jasper:9.1",
+      "status": "Affected",
+      "fixAvailable": true,
+      "fixVersion": "10.1.39+deb",
+      "packageVersion": "7.26.0.1+weezy20",
+      "packagePath": "/usr/bin/",
+      "repository": "web-application",
+      "registry": "demo.suse-security-ivs.io",
+      "cve": "CVE-2017-5337"
+    },
+    {
+      "id": "postgres:13.4",
+      "metadata": {
+        name: 'postgres:13.4',
+      },
+      "package": "libxml2",
+      "status": "Not affected",
+      "fixAvailable": false,
+      "fixVersion": null,
+      "packageVersion": "2.9.1+deb11u1",
+      "packagePath": "/usr/lib/",
+      "repository": "etcd",
+      "registry": "demo.suse-security-ivs.io",
+      "cve": "CVE-2017-5337"
+    },
+    {
+      "id": "elasticsearch:7.15.2",
+      "metadata": {
+        name: 'elasticsearch:7.15.2',
+      },
+      "package": "python:3.8",
+      "status": "Affected",
+      "fixAvailable": true,
+      "fixVersion": "3.8.12",
+      "packageVersion": "3.8.10",
+      "packagePath": "/opt/elasticsearch/",
+      "repository": "search-service",
+      "registry": "demo.suse-security-ivs.io",
+      "cve": "CVE-2017-5337"
+    },
+    {
+      "id": "kafka:2.8.0",
+      "metadata": {
+        name: 'kafka:2.8.0',
+      },
+      "package": "tomcat-api-el-9.0",
+      "status": "Not affected",
+      "fixAvailable": false,
+      "fixVersion": null,
+      "packageVersion": "9.0.45",
+      "packagePath": "/usr/local/kafka/",
+      "repository": "message-broker",
+      "registry": "demo.suse-security-ivs.io",
+      "cve": "CVE-2017-5337"
+    },
+    {
+      "id": "jenkins:2.319.1",
+      "metadata": {
+        name: 'jenkins:2.319.1',
+      },
+      "package": "imagemagick",
+      "status": "Affected",
+      "fixAvailable": true,
+      "fixVersion": "7.1.0-20",
+      "packageVersion": "7.0.8-7",
+      "packagePath": "/var/jenkins_home/",
+      "repository": "ci-cd-pipeline",
+      "registry": "Docker Hub",
+      "cve": "CVE-2017-5337"
+    }
+  ];
\ No newline at end of file
diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/CveNameLink.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/CveNameLink.vue
new file mode 100644
index 0000000..c682be2
--- /dev/null
+++ b/pkg/sbombastic-image-vulnerability-scanner/formatters/CveNameLink.vue
@@ -0,0 +1,29 @@
+<script>
+import {
+  PRODUCT_NAME,
+  PAGE,
+} from "@pkg/types";
+export default {
+  name: 'CveNameLink',
+  props: {
+    value: {
+      type: String,
+      required: true
+    },
+    row: {
+      type: Object,
+      required: true
+    }
+  },
+  data(){
+    return {
+      PRODUCT_NAME,
+      PAGE,
+    }
+  }
+};
+</script>
+
+<template>
+  <RouterLink :to="`/c/${this.$route.params.cluster}/${ this.PRODUCT_NAME }/${this.PAGE.CVE_DETAIL}/${value}`">{{ value }}</RouterLink>
+</template>
\ 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 e2ab236..e6c5673 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml
+++ b/pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml
@@ -196,6 +196,25 @@ imageScanner:
         affectedImages: Affected images
         severity: Severity
         identifiedImages: Images identified in
+    details:
+      score: Score
+      affectedImages: Affected images
+      imageIdentifiedIn: Image identified in
+      published: Published
+      lastModified: Last modified
+      source: Source
+      advisoryVendors: Advisory vendors
+      cvssScores: CVSS scores
+      table:
+        headers:
+          imageName: Image name
+          package: Package
+          status: Status
+          fixVersion: Fix available
+          packageVersion: Package version
+          packagePath: Package path
+          repository: Repository
+          registry: Registry
   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/routes/sbombastic-image-vulnerability-scanner-routes.ts b/pkg/sbombastic-image-vulnerability-scanner/routes/sbombastic-image-vulnerability-scanner-routes.ts
index 0098038..577b9ad 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/routes/sbombastic-image-vulnerability-scanner-routes.ts
+++ b/pkg/sbombastic-image-vulnerability-scanner/routes/sbombastic-image-vulnerability-scanner-routes.ts
@@ -7,6 +7,7 @@ import CreateResource from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability
 import ListResource from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/_resource/index.vue";
 import Entry from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/index.vue";
 import VexManagement from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/VexManagement.vue";
+import CveDetails from "@pkg/components/CveDetails.vue";
 import {
   PRODUCT_NAME,
   PAGE,
@@ -49,6 +50,11 @@ const routes = [
     path: `/c/:cluster/${PRODUCT_NAME}/${PAGE.VEX_MANAGEMENT}`,
     component: VexManagement,
   },
+  {
+    name: `c-cluster-${PRODUCT_NAME}-${PAGE.CVE_DETAIL}-id`,
+    path: `/c/:cluster/${PRODUCT_NAME}/${PAGE.CVE_DETAIL}/:id`,
+    component: CveDetails,
+  },
   {
     name:      `${ PRODUCT_NAME }-c-cluster-resource-create`,
     path:      `/${ PRODUCT_NAME }/c/:cluster/:resource/create`,

From a67039c18dc030d9f5e96f7e09d8cec9203d0990 Mon Sep 17 00:00:00 2001
From: lsongsuse <long.song@suse.com>
Date: Wed, 10 Sep 2025 12:08:24 -0700
Subject: [PATCH 2/2] Update the CVE details page based on PR #139 feedback

---
 .../components/CveDetails.vue                 | 97 ++++++++++++++++---
 .../data/sbombastic.rancher.io.cveDetails.js  | 97 +++++++++++--------
 2 files changed, 141 insertions(+), 53 deletions(-)

diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/CveDetails.vue b/pkg/sbombastic-image-vulnerability-scanner/components/CveDetails.vue
index 39a0b12..001c027 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/CveDetails.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/CveDetails.vue
@@ -11,7 +11,6 @@ import { cveDetail, images } from "@pkg/data/sbombastic.rancher.io.cveDetails";
 
 import { PRODUCT_NAME, RESOURCE, PAGE } from "@pkg/types";
 import DownloadCustomReport from "@pkg/components/common/DownloadCustomReport.vue";
-import Metadata, { MetadataProps } from '@shell/components/Resource/Detail/Metadata/index.vue';
 
 export default {
   name: 'CveDetails',
@@ -21,8 +20,6 @@ export default {
     BadgeState,
     Checkbox,
     LabeledSelect,
-    Metadata,
-    MetadataProps,
   },
   data() {
     const imageFilterOptions = [
@@ -45,7 +42,8 @@ export default {
       preprocessedDataset: {},
       selectedImageFilter: imageFilterOptions[0],
       imageFilterOptions,
-      showPopup: false,
+      hoverVendor: null,
+      inside: false,
       showVendorPopup: false,
       selectedVendor: {},
     }
@@ -179,14 +177,32 @@ export default {
             <span class="label"> Advisory vendors </span>
             <span class="value">{{cveDetail.advisoryVendors.length}}</span>
           </div>
-          <div class="vendor-tags">
-            <span v-for="(vendor, index) in cveDetail.advisoryVendors" :key="index" class="vendor-tag" @click="showVendorPopup(vendor.link)">
-              {{ vendor.name}}
-            </span>
-          </div>
-          <div v-if="showPopup" class="popup">
-            <div class="popup-content">
-              Reference for {{ cveDetail.id }}
+          <div class="vendor-tags-wrapper"
+               @mouseenter="inside = true"
+               @mouseleave="inside = false; hoverVendor = null"
+          >
+            <div class="vendor-tags">
+               <span
+                   v-for="(vendor, index) in cveDetail.advisoryVendors"
+                   :key="index"
+                   class="vendor-tag"
+                   @mouseenter="hoverVendor = vendor"
+               >
+                {{ vendor.name }}
+              </span>
+            </div>
+
+            <!-- Hover panel (always aligned with first tag) -->
+            <div v-if="hoverVendor && inside" class="hover-panel">
+              <h4>References for {{ cveDetail.id }}</h4>
+              <div
+                  v-for="(ref, rIndex) in hoverVendor.references"
+                  :key="rIndex"
+                  class="ref-item"
+              >
+                <a :href="ref.url" target="_blank" class="ref-url">{{ ref.url }}</a>
+                <div class="ref-title">{{ ref.title }}</div>
+              </div>
             </div>
           </div>
         </div>
@@ -359,11 +375,17 @@ export default {
   flex: 1 0 0;
   color: #141419;
 }
+.vendor-tags-wrapper {
+  position: relative;
+  display: inline-block;
+  margin-top: 5px;
+}
 .vendor-tags {
-  margin-top: 10px;
+  display: flex;
+  gap: 3px;
+  flex-wrap: wrap;
 }
 .vendor-tag {
-  display: inline-block;
   margin-right: 5px;
   padding: 2px 6px;
   background-color: #e9ecef;
@@ -373,6 +395,53 @@ export default {
 .vendor-tag:hover {
   background-color: #d1d3e0;
 }
+.hover-panel {
+  position: absolute;
+  top: 20px;
+  left: 0;
+  background: white;
+  border: 1px solid #ddd;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+  border-radius: 8px;
+  padding: 12px;
+
+  min-width: 400px;
+  max-width: 500px;
+  width: auto;
+  box-sizing: border-box;
+
+  z-index: 1000;
+}
+.hover-panel h4 {
+  margin: 0 0 6px;
+  font-size: 14px;
+}
+
+.hover-panel a {
+  color: #007acc;
+  text-decoration: none;
+}
+
+.hover-panel a:hover {
+  text-decoration: underline;
+}
+
+.ref-item {
+  margin-bottom: 10px;
+}
+
+.ref-url {
+  display: block;
+  color: #0073e6;
+  text-decoration: none;
+  word-break: break-all;
+}
+
+.ref-title {
+  font-size: 0.9rem;
+  color: #444;
+  margin-top: 2px;
+}
 .cvss-list {
   display: flex;
   flex-direction: column;
diff --git a/pkg/sbombastic-image-vulnerability-scanner/data/sbombastic.rancher.io.cveDetails.js b/pkg/sbombastic-image-vulnerability-scanner/data/sbombastic.rancher.io.cveDetails.js
index 6afe79e..e632399 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/data/sbombastic.rancher.io.cveDetails.js
+++ b/pkg/sbombastic-image-vulnerability-scanner/data/sbombastic.rancher.io.cveDetails.js
@@ -5,27 +5,64 @@ export const cveDetail = {
     "score": "9.9",
     "cvssVersion": "v3",
     "advisoryVendors": [
-      {
-        "name": "Microsoft",
-        "link": "https://docs.microsoft.com/en-us/security-updates/securitybulletins/2015/ms15-131"
-      },
-      {
-        "name": "SUSE",
-        "link": "https://www.suse.com/security/cve/CVE-2017-5337/"
-      },
-      {
-        "name": "Red Hat",
-        "link": "https://access.redhat.com/security/cve/CVE-2017-5337"
-      },
-      {
-        "name": "Alpine",
-        "link": "https://security.alpinelinux.org/vuln/CVE-2017-5337"
-      },
-      {
-        "name": "CISA",
-        "link": "https://www.cisa.gov/known-exploited-vulnerabilities-catalog/CVE-2017-5337"
-      }
-    ],
+    {
+      "name": "Microsoft",
+      "references": [
+        {
+          "url": "https://docs.microsoft.com/en-us/security-updates/securitybulletins/2015/ms15-131",
+          "title": "Microsoft Security Bulletin MS15-131 - Critical | Microsoft Docs"
+        },
+        {
+          "url": "http://www.securitytracker.com/id/1034324",
+          "title": "Microsoft Office File Processing Flaws Lets Remote Users Execute Arbitrary Code"
+        },
+        {
+          "url": "https://www.exploit-db.com/exploits/40878/",
+          "title": "Microsoft Edge - CMarkup::EnsureDeleteCFState Use-After-Free (MS15-131)"
+        },
+        {
+          "url": "https://imagemagick.org/script/security-policy.php",
+          "title": "ImageMagick Security Policy"
+        }
+      ]
+    },
+    {
+      "name": "SUSE",
+      "references": [
+        {
+          "url": "https://www.suse.com/security/cve/CVE-2017-5337/",
+          "title": "SUSE Security CVE-2017-5337"
+        }
+      ]
+    },
+    {
+      "name": "Red Hat",
+      "references": [
+        {
+          "url": "https://access.redhat.com/security/cve/CVE-2017-5337",
+          "title": "Red Hat CVE-2017-5337"
+        }
+      ]
+    },
+    {
+      "name": "Alpine",
+      "references": [
+        {
+          "url": "https://security.alpinelinux.org/vuln/CVE-2017-5337",
+          "title": "Alpine Linux CVE-2017-5337"
+        }
+      ]
+    },
+    {
+      "name": "CISA",
+      "references": [
+        {
+          "url": "https://www.cisa.gov/known-exploited-vulnerabilities-catalog/CVE-2017-5337",
+          "title": "CISA Known Exploited Vulnerabilities - CVE-2017-5337"
+        }
+      ]
+    }
+  ],
     "cvssScores": [
       {
         "source": "NVD CVSSv3",
@@ -53,24 +90,6 @@ export const cveDetail = {
         "link": "https://github.com/advisories/GHSA-1234-5678"
       }
     ],
-    "references": [
-      {
-        "url": "https://docs.microsoft.com/en-us/security-updates/securitybulletins/2015/ms15-131",
-        "title": "Microsoft Security Bulletin MS15-131 - Critical | Microsoft Docs"
-      },
-      {
-        "url": "http://www.securitytracker.com/id/1034324",
-        "title": "Microsoft Office File Processing Flaws Lets Remote Users Execute Arbitrary Code"
-      },
-      {
-        "url": "https://www.exploit-db.com/exploits/40878/",
-        "title": "Microsoft Edge - CMarkup::EnsureDeleteCFState Use-After-Free (MS15-131)"
-      },
-      {
-        "url": "https://imagemagick.org/script/security-policy.php",
-        "title": "ImageMagick Security Policy"
-      }
-    ]
   };
 
   export const images = [