Update the CVE details page based on PR #139 feedback

Author: lsongsuse

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;

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 = [