Skip to content

Commit 2f88ba6

Browse files
xingzhang-susexingzhang-suse
authored
Merge pull request #50 from xingzhang-suse/main
Fixed bugs and created image overview page.
2 parents ec03b24 + 1a35143 commit 2f88ba6

File tree

13 files changed

+650
-52
lines changed

13 files changed

+650
-52
lines changed

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

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<div class="chart-area">
3+
<div class="title">
4+
Most affected images at risk
5+
</div>
6+
<div class="severity-bar-chart">
7+
<SeverityBarChart :severityData="severityData" />
8+
</div>
9+
</div>
10+
</template>
11+
12+
<script>
13+
import SeverityBarChart from '@sbombastic-image-vulnerability-scanner/components/common/SeverityBarChart';
14+
15+
export default {
16+
name: 'imageRiskAssessment',
17+
components: {
18+
SeverityBarChart
19+
},
20+
props: {
21+
severityData: {
22+
type: Object,
23+
required: true
24+
}
25+
},
26+
data() {
27+
return {
28+
severityData: {
29+
Critical: 1627,
30+
High: 353,
31+
Medium: 246,
32+
Low: 65,
33+
None: 293,
34+
}
35+
};
36+
}
37+
}
38+
</script>
39+
40+
<style lang="scss" scoped>
41+
.chart-area {
42+
display: flex;
43+
padding: 16px;
44+
flex-direction: column;
45+
align-items: flex-start;
46+
gap: 12px;
47+
flex: 1 0 0;
48+
border-right: 1px solid #DCDEE7;
49+
.title {
50+
color: #141419;
51+
font-family: Lato;
52+
font-size: 18px;
53+
font-style: normal;
54+
font-weight: 600;
55+
line-height: 21px; /* 116.667% */
56+
}
57+
.severity-bar-chart {
58+
padding: 4px 8px;
59+
align-items: center;
60+
align-self: stretch;
61+
}
62+
}
63+
</style>

‎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/components/common/SeverityBarChart.vue‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<div class="severity-chart">
88
<div v-for="(value, key) in severityData" :key="key" class="severity-item">
99
<div class="severity-item-name">{{ key }}</div>
10-
<PercentageBar :modelValue="percentage(value)" style="width: 314px" />
10+
<PercentageBar class="severity-item-bar" :modelValue="percentage(value)" />
1111
<div class="severity-item-value"> {{ value }}</div>
1212
</div>
1313
</div>
@@ -51,6 +51,7 @@ export default {
5151
5252
.severity-heading {
5353
display: flex;
54+
flex: 1;
5455
width: 160px;
5556
flex-direction: column;
5657
justify-content: center;
@@ -74,39 +75,39 @@ export default {
7475
font-style: normal;
7576
font-weight: 400;
7677
line-height: normal;
78+
text-align: center;
7779
}
7880
}
7981
8082
.severity-chart {
8183
display: flex;
8284
flex-direction: column;
83-
align-items: flex-start;
8485
gap: 4px;
85-
flex: 1 0 0;
86+
flex: 3;
8687
8788
.severity-item {
8889
display: flex;
89-
justify-content: flex-end;
9090
align-items: center;
9191
gap: 12px;
92-
align-self: stretch;
9392
9493
.severity-item-name {
95-
display: flex;
9694
width: 80px;
97-
align-items: center;
95+
align-items: right;
9896
gap: 12px;
99-
align-self: stretch;
10097
}
10198
99+
.severity-item-bar {
100+
flex: 1;
101+
overflow: hidden;
102+
}
102103
.severity-item-value {
103-
display: flex;
104-
width: 45px;
105-
justify-content: flex-end;
106-
align-items: center;
104+
width: 30px;
105+
text-align: right;
106+
align-items: left;
107107
gap: 12px;
108-
align-self: stretch;
109108
}
109+
110+
110111
}
111112
}
112113
}

‎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)