Skip to content

Commit 612bbd2

Browse files
rushk014rushk014
authored
Merge pull request #58 from xingzhang-suse/main
Added components for Registries configuration page
2 parents fb8978e + 248bf91 commit 612bbd2

File tree

21 files changed

+1617
-619
lines changed

21 files changed

+1617
-619
lines changed

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
"eslint": "^9.30.1",
2828
"eslint-plugin-jest": "^29.0.1",
2929
"eslint-plugin-vue": "^9.33.0",
30-
"jest": "^29.7.0",
30+
"jest": "30.0.5",
3131
"jest-environment-jsdom": "^30.0.4",
3232
"ts-jest": "^29.4.0",
3333
"ts-node": "^10.9.2",
@@ -36,7 +36,8 @@
3636
},
3737
"resolutions": {
3838
"@types/node": "~20.10.0",
39-
"@types/lodash": "4.17.5"
39+
"@types/lodash": "4.17.5",
40+
"form-data": "4.0.4"
4041
},
4142
"scripts": {
4243
"dev": "NODE_ENV=dev ./node_modules/.bin/vue-cli-service serve",

‎pkg/sbombastic-image-vulnerability-scanner/assets/img/add.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎pkg/sbombastic-image-vulnerability-scanner/assets/img/refresh.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎pkg/sbombastic-image-vulnerability-scanner/assets/img/right.svg‎

Lines changed: 3 additions & 0 deletions
Loading

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
<template>
2-
<div class="chart-area">
2+
<div class="chart-section">
33
<div class="title">
44
{{ t('imageScanner.images.imageBySeverityChart.title') }}
55
</div>
66
<div class="severity-bar-chart">
7-
<SeverityBarChart :severityData="severityData" :description="t('imageScanner.images.imageBySeverityChart.subTitle')" />
7+
<BarChart :chartData="chartData" colorPrefix="cve" :description="t('imageScanner.images.imageBySeverityChart.subTitle')" />
88
</div>
99
</div>
1010
</template>
1111

1212
<script>
13-
import SeverityBarChart from '@sbombastic-image-vulnerability-scanner/components/common/SeverityBarChart';
13+
import BarChart from '@sbombastic-image-vulnerability-scanner/components/common/BarChart';
1414
1515
export default {
1616
name: 'imageRiskAssessment',
1717
components: {
18-
SeverityBarChart
18+
BarChart
1919
},
2020
props: {
21-
severityData: {
21+
chartData: {
2222
type: Object,
2323
required: true
2424
}
@@ -28,7 +28,7 @@
2828
</script>
2929

3030
<style lang="scss" scoped>
31-
.chart-area {
31+
.chart-section {
3232
display: flex;
3333
padding: 16px;
3434
flex-direction: column;

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<template>
2+
<div class="chart-section">
3+
<div class="title">
4+
{{ t('imageScanner.registries.recentUpdatedRegistries.title') }}
5+
</div>
6+
<div class="status-list">
7+
<RegistryStatusUpdate v-for="registryStatus in registryStatusList" :registryStatus="registryStatus" />
8+
</div>
9+
</div>
10+
</template>
11+
12+
<script>
13+
import RegistryStatusUpdate from '@sbombastic-image-vulnerability-scanner/components/common/RegistryStatusUpdate';
14+
15+
export default {
16+
name: 'recentUpdatedRegistries',
17+
components: {
18+
RegistryStatusUpdate
19+
},
20+
props: {
21+
registryStatusList: {
22+
type: Array,
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+
border-right: 1px solid #DCDEE7;
39+
.title {
40+
color: #141419;
41+
font-family: Lato;
42+
font-size: 18px;
43+
font-style: normal;
44+
font-weight: 600;
45+
line-height: 21px; /* 116.667% */
46+
}
47+
.status-list {
48+
padding: 4px 8px;
49+
align-items: center;
50+
align-self: stretch;
51+
}
52+
}
53+
</style>

‎pkg/sbombastic-image-vulnerability-scanner/components/StatusDistribution.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.registries.StatusDistribution.title') }}
5+
</div>
6+
<div class="severity-bar-chart">
7+
<BarChart :chartData="chartData" colorPrefix="status" :description="t('imageScanner.registries.StatusDistribution.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: 'statusDistribution',
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/common/SeverityBarChart.vue‎ renamed to ‎pkg/sbombastic-image-vulnerability-scanner/components/common/BarChart.vue‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
<span class="vul-desc">{{ description }}</span>
66
</div>
77
<div class="severity-chart">
8-
<div v-for="(value, key) in severityData" :key="key" class="severity-item">
9-
<div class="severity-item-name">{{ t(`imageScanner.enum.severity.${ key }`) }}</div>
10-
<PercentageBar class="severity-item-bar" :colorStops="{0: `--cve-${ key }`}" :value="percentage(value)" :height="7"/>
8+
<div v-for="(value, key) in chartData" :key="key" class="severity-item">
9+
<div class="severity-item-name">{{ t(`imageScanner.enum.${ colorPrefix }.${ key }`) }}</div>
10+
<PercentageBar class="severity-item-bar" :colorStops="{0: `--${colorPrefix}-${ key }`}" :value="percentage(value)" :height="7"/>
1111
<div class="severity-item-value"> {{ value }}</div>
1212
</div>
1313
</div>
@@ -18,19 +18,23 @@
1818
import PercentageBar from '@sbombastic-image-vulnerability-scanner/components/rancher-rewritten/shell/components/PercentageBar';
1919
2020
export default {
21-
name: 'SeverityBarChart',
21+
name: 'BarChart',
2222
components: {
2323
PercentageBar,
2424
},
2525
props: {
26-
severityData: {
26+
chartData: {
2727
type: Object,
2828
required: true
2929
},
3030
description: {
3131
type: String,
3232
required: true
3333
},
34+
colorPrefix: {
35+
type: String,
36+
required: true
37+
}
3438
},
3539
methods: {
3640
percentage(value) {
@@ -39,7 +43,7 @@ export default {
3943
},
4044
computed: {
4145
total() {
42-
return Object.values(this.severityData).reduce((sum, value) => sum + value, 0);
46+
return Object.values(this.chartData).reduce((sum, value) => sum + value, 0);
4347
},
4448
}
4549
}
@@ -121,5 +125,11 @@ export default {
121125
--cve-low: #EEC707;
122126
--cve-none: #DCDEE7;
123127
--border: #F4F5FA;
128+
129+
--status-pending: #DCDEE7;
130+
--status-scheduled: #0FCFF0;
131+
--status-in_progress: #3D98D3;
132+
--status-completed: #5BB04F;
133+
--status-failed: #DE2136;
124134
}
125135
</style>

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

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<template>
2+
<div class="badge" :class="statusClass">
3+
<div v-if="status" class="text">{{ t(`imageScanner.enum.status.${status.toLowerCase()}`) }}</div>
4+
</div>
5+
</template>
6+
7+
<script>
8+
import { REGISTRY_STATUS } from "@sbombastic-image-vulnerability-scanner/types";
9+
export default {
10+
name: 'registerStatusBadge',
11+
props: {
12+
status:{
13+
type: String,
14+
default: 0
15+
},
16+
},
17+
computed: {
18+
statusClass() {
19+
20+
switch(this.status) {
21+
case REGISTRY_STATUS.PENDING:
22+
return "pending";
23+
case REGISTRY_STATUS.SCHEDULED:
24+
return "scheduled";
25+
case REGISTRY_STATUS.IN_PPROGRESS:
26+
return "in-progress";
27+
case REGISTRY_STATUS.COMPLETED:
28+
return "completed";
29+
case REGISTRY_STATUS.FAILED:
30+
return "failed";
31+
default:
32+
return "";
33+
}
34+
}
35+
}
36+
}
37+
</script>
38+
39+
<style lang="scss" scoped>
40+
.badge {
41+
/* layout */
42+
display: inline-block;
43+
padding: 1px 8px;
44+
align-items: center;
45+
/* style */
46+
border-radius: 30px;
47+
48+
&.pending {
49+
background: #EDEFF3;
50+
color: #6C6C76;
51+
}
52+
53+
&.scheduled {
54+
background: #CDF5FC;
55+
color: #097C90;
56+
}
57+
58+
&.in-progress {
59+
background: #D8EAF6;
60+
color: #1C577D;
61+
}
62+
63+
&.completed {
64+
background: #DEEFDC;
65+
color: #376930;
66+
}
67+
68+
&.failed{
69+
background: #DE2136;
70+
color: #FFFFFF;
71+
}
72+
73+
.text {
74+
display: -webkit-box;
75+
-webkit-box-orient: vertical;
76+
-webkit-line-clamp: 1;
77+
overflow: hidden;
78+
text-overflow: ellipsis;
79+
font-family: Lato;
80+
font-size: 12px;
81+
font-style: normal;
82+
font-weight: 400;
83+
line-height: 19px;
84+
}
85+
}
86+
</style>

0 commit comments

Comments
 (0)