Skip to content

Commit feb5691

Browse files
rushk014rushk014
committed
feat(vulnerability-overview): Add basic implementation for summary charts using mock data
1 parent e5f77cf commit feb5691

File tree

5 files changed

+255
-22
lines changed

5 files changed

+255
-22
lines changed

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<template>
2+
<div class="chart-section">
3+
<div class="title">
4+
{{ t('imageScanner.vulnerabilities.severityDistribution.title') }}
5+
</div>
6+
<div class="severity-bar-chart">
7+
<BarChart :chartData="chartData" colorPrefix="cve" :description="t('imageScanner.vulnerabilities.severityDistribution.subTitle')" />
8+
</div>
9+
</div>
10+
</template>
11+
12+
<script>
13+
import BarChart from '@sbombastic-image-vulnerability-scanner/components/common/BarChart';
14+
15+
export default {
16+
name: 'severityDistribution',
17+
components: {
18+
BarChart
19+
},
20+
props: {
21+
chartData: {
22+
type: Object,
23+
required: true
24+
}
25+
},
26+
data() {}
27+
}
28+
</script>
29+
30+
<style lang="scss" scoped>
31+
.chart-section {
32+
display: flex;
33+
padding: 16px;
34+
flex-direction: column;
35+
align-items: flex-start;
36+
gap: 12px;
37+
flex: 1 0 0;
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+
.severity-bar-chart {
47+
padding: 4px 8px;
48+
align-items: center;
49+
align-self: stretch;
50+
}
51+
}
52+
</style>

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

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<template>
2+
<div class="chart-section">
3+
<div class="title">
4+
{{ t('imageScanner.vulnerabilities.vulnerabilitiesBySeverityChart.title') }}
5+
</div>
6+
<div class="vulnerability-list">
7+
<SevereVulnerabilitiesItem
8+
v-for="vulnerability in topSevereVulnerabilities"
9+
:vulnerability="vulnerability"
10+
:total="totalVulnerabilities"
11+
/>
12+
</div>
13+
</div>
14+
</template>
15+
16+
<script>
17+
import SevereVulnerabilitiesItem from './common/SevereVulnerabilitiesItem.vue';
18+
19+
export default {
20+
name: 'topSevereVulnerabilitiesChart',
21+
components: {
22+
SevereVulnerabilitiesItem
23+
},
24+
props: {
25+
topSevereVulnerabilities: {
26+
type: Array,
27+
required: true
28+
},
29+
totalVulnerabilities: {
30+
type: Number,
31+
required: true
32+
}
33+
},
34+
data() {}
35+
}
36+
</script>
37+
38+
<style lang="scss" scoped>
39+
.chart-section {
40+
display: flex;
41+
padding: 16px;
42+
flex-direction: column;
43+
align-items: flex-start;
44+
gap: 12px;
45+
flex: 1 0 0;
46+
border-right: 1px solid #DCDEE7;
47+
.title {
48+
color: #141419;
49+
font-family: Lato;
50+
font-size: 18px;
51+
font-style: normal;
52+
font-weight: 600;
53+
line-height: 21px; /* 116.667% */
54+
}
55+
.vulnerability-list {
56+
display: flex;
57+
padding: 4px 0;
58+
flex-direction: column;
59+
align-items: flex-start;
60+
gap: 1px;
61+
align-self: stretch;
62+
}
63+
}
64+
</style>

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

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<template>
2+
<div class="vulnerability-record">
3+
<div class="cve">
4+
{{ vulnerability.cve }}
5+
</div>
6+
<ScoreBadge :score="vulnerability.scoreV3" scoreType="v3" />
7+
<div class="impacted-container">
8+
<div class="impacted">
9+
<span>{{ vulnerability.impactedImages }}</span>
10+
<BlockPercentageBarAlt
11+
:percentage="(vulnerability.impactedImages / total) * 100"
12+
:ticks="23"
13+
/>
14+
</div>
15+
</div>
16+
</div>
17+
</template>
18+
19+
<script>
20+
import BlockPercentageBarAlt from './BlockPercentageBarAlt.vue';
21+
import ScoreBadge from './ScoreBadge.vue';
22+
23+
export default {
24+
name: 'severeVulnerabilitiesItem',
25+
components: {
26+
ScoreBadge,
27+
BlockPercentageBarAlt
28+
},
29+
props: {
30+
vulnerability: {
31+
type: Object,
32+
required: true
33+
},
34+
total: {
35+
type: Number,
36+
required: true
37+
}
38+
},
39+
data() {
40+
return { };
41+
},
42+
methods: {
43+
}
44+
}
45+
</script>
46+
47+
<style lang="scss" scoped>
48+
.vulnerability-record {
49+
display: flex;
50+
padding: 4px 0;
51+
align-items: center;
52+
align-self: stretch;
53+
54+
.cve {
55+
display: flex;
56+
padding: 0 16px;
57+
align-items: flex-start;
58+
gap: 8px;
59+
flex: 1 0 0;
60+
}
61+
62+
.impacted-container {
63+
display: flex;
64+
width: 260px;
65+
padding: 0 16px;
66+
align-items: center;
67+
}
68+
69+
.impacted {
70+
display: flex;
71+
align-items: center;
72+
justify-content: end;
73+
gap: 16px;
74+
flex: 1 0 0;
75+
align-self: stretch;
76+
}
77+
}
78+
</style>

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,11 @@ imageScanner:
9999
vulnerabilities: vulnerabilities
100100
vulnerabilities:
101101
title: Vulnerabilities
102+
vulnerabilitiesBySeverityChart:
103+
title: Most severe, affecting vulnerabilities
104+
severityDistribution:
105+
title: Severity distribution
106+
subTitle: vulnerabilities in total
102107
vexManagement:
103108
title: VEX management
104109
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.

‎pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/Vulnerabilities.vue‎

Lines changed: 56 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,73 @@
11
<template>
22
<div class="page">
3-
<div class="header">
3+
<div class="header-section">
44
<h1>Vulnerabilities</h1>
55
</div>
6-
<div class="charts">
7-
<BarChart :chartData="chartData" colorPrefix="cve" description="vulnerabilities in total"/>
6+
<div class="summary-section">
7+
<TopSevereVulnerabilitiesChart
8+
:topSevereVulnerabilities="topSevereVulnerabilities"
9+
:totalVulnerabilities="totalVulnerabilities"
10+
/>
11+
<SeverityDistribution :chartData="severityDistribution" />
812
</div>
913
<div class="table">
10-
<ScoreBadge :score="7.8" :scoreType="'v2'" style="width: 123px; height: 24px;"/>
1114
</div>
1215
</div>
1316
</template>
1417

1518
<script>
16-
import ScoreBadge from '../../../../components/common/ScoreBadge.vue';
17-
import BarChart from '../../../../components/common/BarChart.vue';
19+
import SeverityDistribution from '@sbombastic-image-vulnerability-scanner/components/SeverityDistribution.vue';
20+
import TopSevereVulnerabilitiesChart from '@sbombastic-image-vulnerability-scanner/components/TopSevereVulnerabilitiesChart.vue';
1821
1922
export default {
2023
name: 'vulnerabilities',
2124
components: {
22-
ScoreBadge,
23-
BarChart
25+
SeverityDistribution,
26+
TopSevereVulnerabilitiesChart,
2427
},
2528
data() {
2629
return {
27-
chartData: {
28-
critical: 1627,
29-
high: 353,
30-
medium: 246,
31-
low: 1265,
32-
none: 293,
33-
}
30+
severityDistribution: {
31+
critical: 120,
32+
high: 54,
33+
medium: 23,
34+
low: 65,
35+
none: 200,
36+
},
37+
topSevereVulnerabilities: [
38+
{
39+
cve: 'CVE-2017-5337',
40+
scoreV3: '9.9',
41+
impactedImages: 103,
42+
},
43+
{
44+
cve: 'CVE-2017-5336',
45+
scoreV3: '9.6',
46+
impactedImages: 98,
47+
},
48+
{
49+
cve: 'CVE-2017-5335',
50+
scoreV3: '8.8',
51+
impactedImages: 95,
52+
},
53+
{
54+
cve: 'CVE-2017-5334',
55+
scoreV3: '8.6',
56+
impactedImages: 92,
57+
},
58+
{
59+
cve: 'CVE-2017-5333',
60+
scoreV3: '8.5',
61+
impactedImages: 90,
62+
},
63+
],
3464
};
35-
}
65+
},
66+
computed: {
67+
totalVulnerabilities() {
68+
return Object.values(this.severityDistribution).reduce((sum, value) => sum + value, 0);
69+
},
70+
},
3671
}
3772
</script>
3873

@@ -47,19 +82,18 @@
4782
align-self: stretch;
4883
}
4984
50-
.header {
85+
.header-section {
5186
display: flex;
5287
align-items: flex-start;
5388
gap: 24px;
5489
align-self: stretch;
5590
}
5691
57-
.charts {
58-
/* layout */
59-
align-items: center;
92+
.summary-section {
93+
display: flex;
94+
min-width: 912px;
95+
align-items: flex-start;
6096
align-self: stretch;
61-
padding: 4px 48px;
62-
/* style */
6397
border-radius: 6px;
6498
border: 1px solid #DCDEE7;
6599
background: #FFF;

0 commit comments

Comments
 (0)