Skip to content

Commit b3f419f

Browse files
rushk014xingzhang-suse
rushk014
authored and
xingzhang-suse
committed
feat(#218): Add Critical CVE Severity to support CVSS v3 scores 9.0-10.0
Adds Critical labeling to all `Severity`-related data and filtering options
1 parent 394677e commit b3f419f

22 files changed

Lines changed: 160 additions & 21 deletions

‎pkg/neuvector-ui-ext/components/Dashboard/buttons/ExposureReport.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ export default {
3636
Direction: direction,
3737
Service: exposure.service,
3838
Pod: exposure.pod_name,
39+
'Critical Vuls': exposure.critical,
3940
'High Vuls': exposure.high,
4041
'Medium Vuls': exposure.medium,
4142
'Policy Mode': exposure.policy_mode,

‎pkg/neuvector-ui-ext/components/Dashboard/charts/BarChart4TopVulnerableContainers.vue‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,11 @@
4141
setup(props) {
4242
let isEmptyData = ref(false);
4343
let topVulnerableAssetsLabel = new Array(5);
44+
let topCriticalVulnerableAssetsData = new Array(5);
4445
let topHighVulnerableAssetsData = new Array(5);
4546
let topMediumVulnerableAssetsData = new Array(5);
4647
topVulnerableAssetsLabel.fill('');
48+
topCriticalVulnerableAssetsData.fill(0);
4749
topHighVulnerableAssetsData.fill(0);
4850
topMediumVulnerableAssetsData.fill(0);
4951
if (props.topVulContainers.top5Containers.length === 0) {
@@ -52,13 +54,24 @@
5254
isEmptyData.value = false;
5355
props.topVulContainers.top5Containers.forEach((asset, index) => {
5456
topVulnerableAssetsLabel[index] = asset.display_name;
57+
topCriticalVulnerableAssetsData[index] = asset.critical4Dashboard;
5558
topHighVulnerableAssetsData[index] = asset.high4Dashboard;
5659
topMediumVulnerableAssetsData[index] = asset.medium4Dashboard;
5760
});
5861
}
5962
const chartData = ref({
6063
labels: topVulnerableAssetsLabel,
6164
datasets: [
65+
{
66+
data: topCriticalVulnerableAssetsData,
67+
label: props.parentContext.t('enum.CRITICAL'),
68+
backgroundColor: 'rgba(233, 30, 99, 0.3)',
69+
borderColor: '#e91e63',
70+
hoverBackgroundColor: 'rgba(233, 30, 99, 0.3)',
71+
hoverBorderColor: '#e91e63',
72+
barThickness: 8,
73+
borderWidth: 2,
74+
},
6275
{
6376
data: topHighVulnerableAssetsData,
6477
label: props.parentContext.t('enum.HIGH'),

‎pkg/neuvector-ui-ext/components/Dashboard/charts/BarChart4TopVulnerableHosts.vue‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,11 @@
3434
setup(props) {
3535
let isEmptyData = ref(false);
3636
let topVulnerableAssetsLabel = new Array(5);
37+
let topCriticalVulnerableAssetsData = new Array(5);
3738
let topHighVulnerableAssetsData = new Array(5);
3839
let topMediumVulnerableAssetsData = new Array(5);
3940
topVulnerableAssetsLabel.fill('');
41+
topCriticalVulnerableAssetsData.fill(0);
4042
topHighVulnerableAssetsData.fill(0);
4143
topMediumVulnerableAssetsData.fill(0);
4244
if (props.topVulHosts.top5Nodes.length === 0) {
@@ -45,13 +47,24 @@
4547
isEmptyData.value = false;
4648
props.topVulHosts.top5Nodes.forEach((asset, index) => {
4749
topVulnerableAssetsLabel[index] = asset.name;
50+
topCriticalVulnerableAssetsData[index] = asset.scan_summary.critical;
4851
topHighVulnerableAssetsData[index] = asset.scan_summary.high;
4952
topMediumVulnerableAssetsData[index] = asset.scan_summary.medium;
5053
});
5154
}
5255
const chartData = ref({
5356
labels: topVulnerableAssetsLabel,
5457
datasets: [
58+
{
59+
data: topCriticalVulnerableAssetsData,
60+
label: props.parentContext.t('enum.CRITICAL'),
61+
backgroundColor: 'rgba(233, 30, 99, 0.3)',
62+
borderColor: '#e91e63',
63+
hoverBackgroundColor: 'rgba(233, 30, 99, 0.3)',
64+
hoverBorderColor: '#e91e63',
65+
barThickness: 8,
66+
borderWidth: 2,
67+
},
5568
{
5669
data: topHighVulnerableAssetsData,
5770
label: props.parentContext.t('enum.HIGH'),

‎pkg/neuvector-ui-ext/components/Dashboard/grids/ExposureGrid.vue‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -78,15 +78,16 @@ const vueApp = createApp({});
7878
cellRenderer: params => {
7979
if (params && params.data) {
8080
return (
81-
`<span class="nv-badge nv-badge-danger">${params.data.high}</span>
81+
`<span class="nv-badge nv-badge-critical">${params.data.critical}</span>
82+
<span class="nv-badge nv-badge-danger">${params.data.high}</span>
8283
<span class="nv-badge nv-badge-warning">${params.data.medium}</span>`
8384
);
8485
}
8586
return '';
8687
},
87-
width: 110,
88-
maxWidth: 110,
89-
minWidth: 110,
88+
width: 130,
89+
maxWidth: 130,
90+
minWidth: 130,
9091
sortable: false,
9192
},
9293
{
@@ -186,6 +187,10 @@ const vueApp = createApp({});
186187
margin-left: 8px;
187188
padding: 4px 8px;
188189
}
190+
.nv-badge-critical {
191+
background-color: #E91E63;
192+
color: #fff;
193+
}
189194
.nv-badge-danger {
190195
background-color: #c5161f;
191196
color: #fff;

‎pkg/neuvector-ui-ext/components/Dashboard/panels/Exposures.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ export default {
7676
peerEndpoint: '',
7777
service: k,
7878
policy_mode: v[0].policy_mode,
79+
critical: v[0].critical,
7980
high: v[0].high,
8081
medium: v[0].medium,
8182
workload: '',

‎pkg/neuvector-ui-ext/components/Vulnerabilities/charts/TopVulnerableImagesBarChart.vue‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,22 +27,35 @@
2727
},
2828
setup(props) {
2929
let topVulnerableAssetsLabel = new Array(5);
30+
let topCriticalVulnerableAssetsData = new Array(5);
3031
let topHighVulnerableAssetsData = new Array(5);
3132
let topMediumVulnerableAssetsData = new Array(5);
3233
let topLowVulnerableAssetsData = new Array(5);
3334
topVulnerableAssetsLabel.fill('');
35+
topCriticalVulnerableAssetsData.fill(0);
3436
topHighVulnerableAssetsData.fill(0);
3537
topMediumVulnerableAssetsData.fill(0);
3638
topLowVulnerableAssetsData.fill(0);
3739
props.topVulImages.forEach((asset, index) => {
3840
topVulnerableAssetsLabel[index] = asset.display_name;
41+
topCriticalVulnerableAssetsData[index] = asset.critical;
3942
topHighVulnerableAssetsData[index] = asset.high;
4043
topMediumVulnerableAssetsData[index] = asset.medium;
4144
topLowVulnerableAssetsData[index] = asset.low;
4245
});
4346
const chartData = ref({
4447
labels: topVulnerableAssetsLabel,
4548
datasets: [
49+
{
50+
data: topCriticalVulnerableAssetsData,
51+
label: props.parentContext.t('enum.CRITICAL'),
52+
backgroundColor: 'rgba(233, 30, 99, 0.3)',
53+
borderColor: '#e91e63',
54+
hoverBackgroundColor: 'rgba(233, 30, 99, 0.3)',
55+
hoverBorderColor: '#e91e63',
56+
barThickness: 8,
57+
borderWidth: 2,
58+
},
4659
{
4760
data: topHighVulnerableAssetsData,
4861
label: props.parentContext.t('enum.HIGH'),

‎pkg/neuvector-ui-ext/components/Vulnerabilities/charts/TopVulnerableNodesBarChart.vue‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,22 +27,35 @@
2727
},
2828
setup(props) {
2929
let topVulnerableAssetsLabel = new Array(5);
30+
let topCriticalVulnerableAssetsData = new Array(5);
3031
let topHighVulnerableAssetsData = new Array(5);
3132
let topMediumVulnerableAssetsData = new Array(5);
3233
let topLowVulnerableAssetsData = new Array(5);
3334
topVulnerableAssetsLabel.fill('');
35+
topCriticalVulnerableAssetsData.fill(0);
3436
topHighVulnerableAssetsData.fill(0);
3537
topMediumVulnerableAssetsData.fill(0);
3638
topLowVulnerableAssetsData.fill(0);
3739
props.topVulHosts.forEach((asset, index) => {
3840
topVulnerableAssetsLabel[index] = asset.display_name;
41+
topCriticalVulnerableAssetsData[index] = asset.critical;
3942
topHighVulnerableAssetsData[index] = asset.high;
4043
topMediumVulnerableAssetsData[index] = asset.medium;
4144
topLowVulnerableAssetsData[index] = asset.low;
4245
});
4346
const chartData = ref({
4447
labels: topVulnerableAssetsLabel,
4548
datasets: [
49+
{
50+
data: topCriticalVulnerableAssetsData,
51+
label: props.parentContext.t('enum.CRITICAL'),
52+
backgroundColor: 'rgba(233, 30, 99, 0.3)',
53+
borderColor: '#e91e63',
54+
hoverBackgroundColor: 'rgba(233, 30, 99, 0.3)',
55+
hoverBorderColor: '#e91e63',
56+
barThickness: 8,
57+
borderWidth: 2,
58+
},
4659
{
4760
data: topHighVulnerableAssetsData,
4861
label: props.parentContext.t('enum.HIGH'),

‎pkg/neuvector-ui-ext/components/Vulnerabilities/contents/VulnerabilityItemsChart.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,13 @@ export default defineComponent({
1414
},
1515
setup(props) {
1616
const targetDistChartData = ref({
17-
labels: [['High'], ['Medium'], ['Low']],
17+
labels: [['Critical'], ['High'], ['Medium'], ['Low']],
1818
datasets: [
1919
{
20-
hoverBackgroundColor: ['#ef5350', '#ff9800', '#4caf50'],
21-
backgroundColor: ['#ef5350', '#ff9800', '#4caf50'],
20+
hoverBackgroundColor: ['#e91e63', '#ef5350', '#ff9800', '#4caf50'],
21+
backgroundColor: ['#e91e63', '#ef5350', '#ff9800', '#4caf50'],
2222
data: [
23+
props.countDistribution.critical,
2324
props.countDistribution.high,
2425
props.countDistribution.medium,
2526
props.countDistribution.low,

‎pkg/neuvector-ui-ext/components/Vulnerabilities/dialogs/AdvancedFilterModal.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@
103103
],
104104
severityOptions: [
105105
{ label: this.t('setting.ALL'), value: 'all' },
106+
{ label: this.t('enum.CRITICAL'), value: 'critical' },
106107
{ label: this.t('enum.HIGH'), value: 'high' },
107108
{ label: this.t('enum.MEDIUM'), value: 'medium' },
108109
{ label: this.t('enum.LOW'), value: 'low' },

‎pkg/neuvector-ui-ext/components/Vulnerabilities/grids/components/VulnerabilityScoreCellComponent.vue‎

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,21 @@
22
<template>
33
<div v-if="params.node.data">
44
<template v-if="params.type === 'V3'">
5-
<template v-if="params.node.data.severity === 'High'">
5+
<template v-if="params.node.data.severity === 'Critical'">
6+
<div class="progress">
7+
<div
8+
:aria-valuenow="params.node.data.score_v3"
9+
:style="'width: ' + params.node.data.score_v3 * 10 + '%'"
10+
aria-valuemax="10"
11+
aria-valuemin="0"
12+
aria-label="Score(V3)"
13+
class="progress-bar bg-pink"
14+
role="progressbar">
15+
{{ params.node.data.score_v3 }}
16+
</div>
17+
</div>
18+
</template>
19+
<template v-else-if="params.node.data.severity === 'High'">
620
<div class="progress">
721
<div
822
:aria-valuenow="params.node.data.score_v3"
@@ -46,7 +60,21 @@
4660
</template>
4761
</template>
4862
<template v-else-if="params.type === 'V2'">
49-
<template v-if="params.node.data.severity === 'High'">
63+
<template v-if="params.node.data.severity === 'Critical'">
64+
<div class="progress">
65+
<div
66+
:aria-valuenow="params.node.data.score"
67+
:style="'width: ' + params.node.data.score * 10 + '%'"
68+
aria-valuemax="10"
69+
aria-valuemin="0"
70+
aria-label="Score"
71+
class="progress-bar bg-pink"
72+
role="progressbar">
73+
{{ params.node.data.score }}
74+
</div>
75+
</div>
76+
</template>
77+
<template v-else-if="params.node.data.severity === 'High'">
5078
<div class="progress">
5179
<div
5280
:aria-valuenow="params.node.data.score"
@@ -136,6 +164,10 @@ export default {
136164
background-color: #f44336 !important;
137165
}
138166
167+
.bg-pink {
168+
background-color: #E91E63 !important;
169+
}
170+
139171
.bg-warning {
140172
background-color: #ff9800 !important;
141173
}

0 commit comments

Comments
 (0)