Skip to content

Commit ac866bd

Browse files
xingzhang-susexingzhang-suse
committed
Fixed some bugs and created image overview page
1 parent ec03b24 commit ac866bd

File tree

10 files changed

+562
-37
lines changed

10 files changed

+562
-37
lines changed

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

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<template>
2+
<div class="chart-area">
3+
<div class="title">
4+
Most affected images at risk
5+
</div>
6+
<div class="image-record" v-for="image in topRiskyImages">
7+
<div class="image-name">{{ image.image_name }}</div>
8+
<AmountBarBySeverity class="image-cve" :cveAmount="image.cve_cnt"/>
9+
</div>
10+
</div>
11+
</template>
12+
13+
<script>
14+
import AmountBarBySeverity from "@sbombastic-image-vulnerability-scanner/components/common/AmountBarBySeverity";
15+
export default {
16+
name: 'amountBarBySeverity',
17+
components: {
18+
AmountBarBySeverity,
19+
},
20+
props: {
21+
topRiskyImages: {
22+
type: Array,
23+
default: () => []
24+
}
25+
},
26+
}
27+
</script>
28+
29+
<style lang="scss" scoped>
30+
.chart-area {
31+
display: flex;
32+
padding: 16px;
33+
flex-direction: column;
34+
align-items: flex-start;
35+
gap: 12px;
36+
flex: 1 0 0;
37+
border-right: 1px solid #DCDEE7;
38+
.title {
39+
color: #141419;
40+
font-family: Lato;
41+
font-size: 18px;
42+
font-style: normal;
43+
font-weight: 600;
44+
line-height: 21px; /* 116.667% */
45+
}
46+
.image-record {
47+
display: flex;
48+
padding: 4px 0px;
49+
padding: 0px 16px;
50+
align-items: center;
51+
align-self: stretch;
52+
.image-name {
53+
display: -webkit-box;
54+
-webkit-box-orient: vertical;
55+
-webkit-line-clamp: 1;
56+
flex: 1 1 0;
57+
overflow: hidden;
58+
color: #5696CE;
59+
text-overflow: ellipsis;
60+
font-family: Lato;
61+
font-size: 14px;
62+
font-style: normal;
63+
font-weight: 400;
64+
line-height: 21px; /* 150% */
65+
}
66+
.image-cve {
67+
flex: 1 1 0;
68+
}
69+
}
70+
}
71+
</style>

‎pkg/sbombastic-image-vulnerability-scanner/components/common/AmountBarBySeverity.vue‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<template>
2+
<div>
3+
<div class="bar">
4+
<div class="badge" :class="badgeColor('critical', cveAmount.critical)">{{ cveAmount.critical }}</div>
5+
<div class="badge" :class="badgeColor('high', cveAmount.high)">{{ cveAmount.high }}</div>
6+
<div class="badge" :class="badgeColor('medium', cveAmount.medium)">{{ cveAmount.medium }}</div>
7+
<div class="badge" :class="badgeColor('low', cveAmount.low)">{{ cveAmount.low }}</div>
8+
<div class="badge" :class="badgeColor('none', cveAmount.none)">{{ cveAmount.none }}</div>
9+
</div>
10+
</div>
11+
</template>
12+
13+
<script>
14+
export default {
15+
name: 'amountBarBySeverity',
16+
props: {
17+
cveAmount: {
18+
type: Object,
19+
default: () => {}
20+
}
21+
},
22+
methods: {
23+
badgeColor(severity, cnt) {
24+
const _class = {};
25+
let className = cnt > 0 ? severity : 'zero';
26+
_class[className] = true;
27+
return _class;
28+
}
29+
}
30+
}
31+
</script>
32+
33+
<style lang="scss" scoped>
34+
.bar {
35+
display: flex;
36+
border-radius: 4px;
37+
overflow: hidden;
38+
font-family: sans-serif;
39+
color: white;
40+
font-weight: bold;
41+
text-align: center;
42+
height: 24px;
43+
align-items: center;
44+
45+
.badge {
46+
display: flex;
47+
justify-content: center;
48+
align-items: center;
49+
flex: 1 0 0;
50+
align-self: stretch;
51+
padding: 0px 2px;
52+
font-family: Lato;
53+
font-size: 13px;
54+
font-style: normal;
55+
font-weight: 500;
56+
line-height: 20px; /* 153.846% */
57+
}
58+
.badge.critical {
59+
background-color: #880E1E;
60+
color: rgba(255, 255, 255, 0.90);
61+
}
62+
.badge.high {
63+
background-color: #D32F2F;
64+
color: rgba(255, 255, 255, 0.90);
65+
}
66+
.badge.medium {
67+
background-color: #FB8C00;
68+
color: rgba(255, 255, 255, 0.90);
69+
}
70+
.badge.low {
71+
background-color: #FDD835;
72+
color: rgba(255, 255, 255, 0.90);
73+
}
74+
.badge.none {
75+
background-color: #E0E0E0;
76+
color: #717179;
77+
}
78+
.badge.zero {
79+
background-color: #F4F5FA;
80+
color: #BEC1D2;
81+
}
82+
}
83+
</style>

‎pkg/sbombastic-image-vulnerability-scanner/config/sbombastic-image-vulnerability-scanner.ts‎

Lines changed: 34 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,25 +7,36 @@ import {
77
export function init($plugin: IPlugin, store: any) {
88
const { product, virtualType, basicType } = $plugin.DSL(store, PRODUCT_NAME);
99

10-
// registering a cluster-level product
1110
product({
12-
icon: "pod_security",
13-
inStore: "cluster",
11+
icon: "pod_security",
12+
inStore: "cluster",
1413
});
1514

16-
// => => => creating a custom page
17-
virtualType({
18-
label: store.getters["i18n/t"]("image_scanner.registries.title"),
19-
name: PAGE.REGISTRIES,
20-
namespaced: false,
21-
route: {
22-
name: `c-cluster-${PRODUCT_NAME}-${PAGE.REGISTRIES}`,
23-
params: {
24-
product: PRODUCT_NAME,
25-
},
26-
meta: { pkg: PRODUCT_NAME, product: PRODUCT_NAME },
27-
},
28-
});
15+
virtualType({
16+
labelKey: 'imageScanner.registries.title',
17+
name: PAGE.REGISTRIES,
18+
namespaced: false,
19+
route: {
20+
name: `c-cluster-${PRODUCT_NAME}-${PAGE.REGISTRIES}`,
21+
params: {
22+
product: PRODUCT_NAME
23+
},
24+
meta: { pkg: PRODUCT_NAME, product: PRODUCT_NAME }
25+
}
26+
});
27+
28+
virtualType({
29+
labelKey: 'imageScanner.images.title',
30+
name: PAGE.IMAGE_OVERVIEW,
31+
namespaced: false,
32+
route: {
33+
name: `c-cluster-${PRODUCT_NAME}-${PAGE.IMAGE_OVERVIEW}`,
34+
params: {
35+
product: PRODUCT_NAME
36+
},
37+
meta: { pkg: PRODUCT_NAME, product: PRODUCT_NAME }
38+
}
39+
});
2940

3041
virtualType({
3142
label: store.getters["i18n/t"]("image_scanner.vulnerabilities.title"),
@@ -40,5 +51,10 @@ export function init($plugin: IPlugin, store: any) {
4051
},
4152
});
4253

43-
basicType([PAGE.REGISTRIES, PAGE.VULNERABILITY_OVERVIEW]);
44-
}
54+
basicType([
55+
PAGE.REGISTRIES,
56+
PAGE.IMAGE_OVERVIEW,
57+
PAGE.VULNERABILITY_OVERVIEW
58+
]);
59+
60+
}

‎pkg/sbombastic-image-vulnerability-scanner/i10n/en-us.yaml‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
imageScanner:
2+
registries:
3+
title: Registries
4+
images:
5+
title: Images
6+
downloadReport: Download full report
7+
filters:
8+
image:
9+
allImages: All images
10+
excludeBaseImages: Exclude base images
11+
includeBaseImages: Include base images
12+
cve:
13+
allCves: All identified CVEs
14+
affectingCvesOnly: Affecting CVEs only
15+
imageList:
16+
image: Image
17+
severity: severity
18+
repository: repository
19+
registry: Registry
20+
vulnerabilities:
21+
title: Vulnerabilities
22+

0 commit comments

Comments
 (0)