Skip to content

Commit a67039c

Browse files
lsongsuselsongsuse
committed
Update the CVE details page based on PR #139 feedback
1 parent ef515c2 commit a67039c

File tree

2 files changed

+141
-53
lines changed

2 files changed

+141
-53
lines changed

‎pkg/sbombastic-image-vulnerability-scanner/components/CveDetails.vue‎

Lines changed: 83 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import { cveDetail, images } from "@pkg/data/sbombastic.rancher.io.cveDetails";
1111
1212
import { PRODUCT_NAME, RESOURCE, PAGE } from "@pkg/types";
1313
import DownloadCustomReport from "@pkg/components/common/DownloadCustomReport.vue";
14-
import Metadata, { MetadataProps } from '@shell/components/Resource/Detail/Metadata/index.vue';
1514
1615
export default {
1716
name: 'CveDetails',
@@ -21,8 +20,6 @@ export default {
2120
BadgeState,
2221
Checkbox,
2322
LabeledSelect,
24-
Metadata,
25-
MetadataProps,
2623
},
2724
data() {
2825
const imageFilterOptions = [
@@ -45,7 +42,8 @@ export default {
4542
preprocessedDataset: {},
4643
selectedImageFilter: imageFilterOptions[0],
4744
imageFilterOptions,
48-
showPopup: false,
45+
hoverVendor: null,
46+
inside: false,
4947
showVendorPopup: false,
5048
selectedVendor: {},
5149
}
@@ -179,14 +177,32 @@ export default {
179177
<span class="label"> Advisory vendors </span>
180178
<span class="value">{{cveDetail.advisoryVendors.length}}</span>
181179
</div>
182-
<div class="vendor-tags">
183-
<span v-for="(vendor, index) in cveDetail.advisoryVendors" :key="index" class="vendor-tag" @click="showVendorPopup(vendor.link)">
184-
{{ vendor.name}}
185-
</span>
186-
</div>
187-
<div v-if="showPopup" class="popup">
188-
<div class="popup-content">
189-
Reference for {{ cveDetail.id }}
180+
<div class="vendor-tags-wrapper"
181+
@mouseenter="inside = true"
182+
@mouseleave="inside = false; hoverVendor = null"
183+
>
184+
<div class="vendor-tags">
185+
<span
186+
v-for="(vendor, index) in cveDetail.advisoryVendors"
187+
:key="index"
188+
class="vendor-tag"
189+
@mouseenter="hoverVendor = vendor"
190+
>
191+
{{ vendor.name }}
192+
</span>
193+
</div>
194+
195+
<!-- Hover panel (always aligned with first tag) -->
196+
<div v-if="hoverVendor && inside" class="hover-panel">
197+
<h4>References for {{ cveDetail.id }}</h4>
198+
<div
199+
v-for="(ref, rIndex) in hoverVendor.references"
200+
:key="rIndex"
201+
class="ref-item"
202+
>
203+
<a :href="ref.url" target="_blank" class="ref-url">{{ ref.url }}</a>
204+
<div class="ref-title">{{ ref.title }}</div>
205+
</div>
190206
</div>
191207
</div>
192208
</div>
@@ -359,11 +375,17 @@ export default {
359375
flex: 1 0 0;
360376
color: #141419;
361377
}
378+
.vendor-tags-wrapper {
379+
position: relative;
380+
display: inline-block;
381+
margin-top: 5px;
382+
}
362383
.vendor-tags {
363-
margin-top: 10px;
384+
display: flex;
385+
gap: 3px;
386+
flex-wrap: wrap;
364387
}
365388
.vendor-tag {
366-
display: inline-block;
367389
margin-right: 5px;
368390
padding: 2px 6px;
369391
background-color: #e9ecef;
@@ -373,6 +395,53 @@ export default {
373395
.vendor-tag:hover {
374396
background-color: #d1d3e0;
375397
}
398+
.hover-panel {
399+
position: absolute;
400+
top: 20px;
401+
left: 0;
402+
background: white;
403+
border: 1px solid #ddd;
404+
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
405+
border-radius: 8px;
406+
padding: 12px;
407+
408+
min-width: 400px;
409+
max-width: 500px;
410+
width: auto;
411+
box-sizing: border-box;
412+
413+
z-index: 1000;
414+
}
415+
.hover-panel h4 {
416+
margin: 0 0 6px;
417+
font-size: 14px;
418+
}
419+
420+
.hover-panel a {
421+
color: #007acc;
422+
text-decoration: none;
423+
}
424+
425+
.hover-panel a:hover {
426+
text-decoration: underline;
427+
}
428+
429+
.ref-item {
430+
margin-bottom: 10px;
431+
}
432+
433+
.ref-url {
434+
display: block;
435+
color: #0073e6;
436+
text-decoration: none;
437+
word-break: break-all;
438+
}
439+
440+
.ref-title {
441+
font-size: 0.9rem;
442+
color: #444;
443+
margin-top: 2px;
444+
}
376445
.cvss-list {
377446
display: flex;
378447
flex-direction: column;

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

Lines changed: 58 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,64 @@ export const cveDetail = {
55
"score": "9.9",
66
"cvssVersion": "v3",
77
"advisoryVendors": [
8-
{
9-
"name": "Microsoft",
10-
"link": "https://docs.microsoft.com/en-us/security-updates/securitybulletins/2015/ms15-131"
11-
},
12-
{
13-
"name": "SUSE",
14-
"link": "https://www.suse.com/security/cve/CVE-2017-5337/"
15-
},
16-
{
17-
"name": "Red Hat",
18-
"link": "https://access.redhat.com/security/cve/CVE-2017-5337"
19-
},
20-
{
21-
"name": "Alpine",
22-
"link": "https://security.alpinelinux.org/vuln/CVE-2017-5337"
23-
},
24-
{
25-
"name": "CISA",
26-
"link": "https://www.cisa.gov/known-exploited-vulnerabilities-catalog/CVE-2017-5337"
27-
}
28-
],
8+
{
9+
"name": "Microsoft",
10+
"references": [
11+
{
12+
"url": "https://docs.microsoft.com/en-us/security-updates/securitybulletins/2015/ms15-131",
13+
"title": "Microsoft Security Bulletin MS15-131 - Critical | Microsoft Docs"
14+
},
15+
{
16+
"url": "http://www.securitytracker.com/id/1034324",
17+
"title": "Microsoft Office File Processing Flaws Lets Remote Users Execute Arbitrary Code"
18+
},
19+
{
20+
"url": "https://www.exploit-db.com/exploits/40878/",
21+
"title": "Microsoft Edge - CMarkup::EnsureDeleteCFState Use-After-Free (MS15-131)"
22+
},
23+
{
24+
"url": "https://imagemagick.org/script/security-policy.php",
25+
"title": "ImageMagick Security Policy"
26+
}
27+
]
28+
},
29+
{
30+
"name": "SUSE",
31+
"references": [
32+
{
33+
"url": "https://www.suse.com/security/cve/CVE-2017-5337/",
34+
"title": "SUSE Security CVE-2017-5337"
35+
}
36+
]
37+
},
38+
{
39+
"name": "Red Hat",
40+
"references": [
41+
{
42+
"url": "https://access.redhat.com/security/cve/CVE-2017-5337",
43+
"title": "Red Hat CVE-2017-5337"
44+
}
45+
]
46+
},
47+
{
48+
"name": "Alpine",
49+
"references": [
50+
{
51+
"url": "https://security.alpinelinux.org/vuln/CVE-2017-5337",
52+
"title": "Alpine Linux CVE-2017-5337"
53+
}
54+
]
55+
},
56+
{
57+
"name": "CISA",
58+
"references": [
59+
{
60+
"url": "https://www.cisa.gov/known-exploited-vulnerabilities-catalog/CVE-2017-5337",
61+
"title": "CISA Known Exploited Vulnerabilities - CVE-2017-5337"
62+
}
63+
]
64+
}
65+
],
2966
"cvssScores": [
3067
{
3168
"source": "NVD CVSSv3",
@@ -53,24 +90,6 @@ export const cveDetail = {
5390
"link": "https://github.com/advisories/GHSA-1234-5678"
5491
}
5592
],
56-
"references": [
57-
{
58-
"url": "https://docs.microsoft.com/en-us/security-updates/securitybulletins/2015/ms15-131",
59-
"title": "Microsoft Security Bulletin MS15-131 - Critical | Microsoft Docs"
60-
},
61-
{
62-
"url": "http://www.securitytracker.com/id/1034324",
63-
"title": "Microsoft Office File Processing Flaws Lets Remote Users Execute Arbitrary Code"
64-
},
65-
{
66-
"url": "https://www.exploit-db.com/exploits/40878/",
67-
"title": "Microsoft Edge - CMarkup::EnsureDeleteCFState Use-After-Free (MS15-131)"
68-
},
69-
{
70-
"url": "https://imagemagick.org/script/security-policy.php",
71-
"title": "ImageMagick Security Policy"
72-
}
73-
]
7493
};
7594

7695
export const images = [

0 commit comments

Comments
 (0)