Skip to content

Commit 3dc76ed

Browse files
xingzhang-suserushk014
xingzhang-suse
authored and
rushk014
committed
Added formatters for the table fields and applied real CRD data to 2 charts
1 parent 0d6947d commit 3dc76ed

File tree

12 files changed

+271
-125
lines changed

12 files changed

+271
-125
lines changed

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
</div>
77
<div class="severity-chart">
88
<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"/>
9+
<div class="severity-item-name">{{ t(`imageScanner.enum.${ colorPrefix }.${ key.toLowerCase() }`) }}</div>
10+
<PercentageBar class="severity-item-bar" :colorStops="{0: `--${ colorPrefix }-${ key.toLowerCase() }`}" :value="percentage(value)" :height="7"/>
1111
<div class="severity-item-value"> {{ value }}</div>
1212
</div>
1313
</div>
@@ -38,7 +38,7 @@ export default {
3838
},
3939
methods: {
4040
percentage(value) {
41-
return (value / this.total) * 100;
41+
return this.total > 0 ? (value / this.total) * 100 : 0;
4242
}
4343
},
4444
computed: {
@@ -128,8 +128,8 @@ export default {
128128
129129
--status-pending: #DCDEE7;
130130
--status-scheduled: #0FCFF0;
131-
--status-in_progress: #3D98D3;
132-
--status-completed: #5BB04F;
131+
--status-inprogress: #3D98D3;
132+
--status-complete: #5BB04F;
133133
--status-failed: #DE2136;
134134
}
135135
</style>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,10 @@
2222
return "pending";
2323
case REGISTRY_STATUS.SCHEDULED:
2424
return "scheduled";
25-
case REGISTRY_STATUS.IN_PPROGRESS:
25+
case REGISTRY_STATUS.IN_PROGRESS:
2626
return "in-progress";
27-
case REGISTRY_STATUS.COMPLETED:
28-
return "completed";
27+
case REGISTRY_STATUS.COMPLETE:
28+
return "complete";
2929
case REGISTRY_STATUS.FAILED:
3030
return "failed";
3131
default:
@@ -60,7 +60,7 @@
6060
color: #1C577D;
6161
}
6262
63-
&.completed {
63+
&.complete {
6464
background: #DEEFDC;
6565
color: #376930;
6666
}

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

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,24 @@
11
<template>
2-
<div class="registry-status-record">
3-
<div class="scan-name">{{ registryStatus.scan_name }}</div>
2+
<div v-if="registryStatus.scan_name" class="registry-status-record">
3+
<RouterLink class="scan-name" :to="`/c/${this.$route.params.cluster}/${ this.PRODUCT_NAME }/${ this.PAGE.REGISTRIES }/${ registryStatus.namespace }/${ registryStatus.scan_name }`">{{ registryStatus.scan_name }}</RouterLink>
44
<div class="registry-name">{{ registryStatus.registry_name }}</div>
55
<div class="prev-status"><RegisterStatusBadge :status="registryStatus.prev_status"/></div>
66
<div class="arrow"></div>
77
<div class="curr-status"><RegisterStatusBadge :status="registryStatus.curr_status"/></div>
88
<div class="update-time">{{ `${updateTime(registryStatus.last_update_time)} ${t("imageScanner.general.ago")}`}}</div>
99
</div>
10+
<div v-else class="registry-status-record">
11+
<div class="no-data"></div>
12+
</div>
1013
</template>
1114

1215
<script>
1316
import RegisterStatusBadge from "./RegisterStatusBadge";
1417
import { elapsedTime } from "@shell/utils/time";
18+
import {
19+
PRODUCT_NAME,
20+
PAGE,
21+
} from "@sbombastic-image-vulnerability-scanner/types";
1522
export default {
1623
name: 'registryStatusUpdate',
1724
components: {
@@ -23,15 +30,31 @@
2330
required: true
2431
}
2532
},
33+
data() {
34+
return {
35+
PRODUCT_NAME,
36+
PAGE,
37+
};
38+
},
2639
methods: {
2740
updateTime(lastUpdateTime) {
28-
return elapsedTime(Date.now() / 1000 - lastUpdateTime).label;
41+
return elapsedTime(Date.now() / 1000 - new Date(lastUpdateTime).getTime() / 1000).label;
2942
}
3043
}
3144
}
3245
</script>
3346

3447
<style lang="scss" scoped>
48+
.no-data {
49+
color: #6C6C76;
50+
font-family: Lato;
51+
font-size: 14px;
52+
font-style: normal;
53+
font-weight: 400;
54+
line-height: 21px;
55+
min-height: 21px;
56+
width: 100%;
57+
}
3558
.registry-status-record {
3659
display: flex;
3760
padding: 4px 0px;
@@ -52,7 +75,10 @@
5275
line-height: 21px;
5376
}
5477
.registry-name {
55-
flex: 12;
78+
display: -webkit-box;
79+
-webkit-box-orient: vertical;
80+
-webkit-line-clamp: 1;
81+
flex: 10;
5682
overflow: hidden;
5783
color: #141419;
5884
text-overflow: ellipsis;

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,6 @@ export function init($plugin: IPlugin, store: any) {
6868
PAGE.REGISTRIES,
6969
PAGE.IMAGE_OVERVIEW,
7070
PAGE.VULNERABILITY_OVERVIEW,
71-
"demo"
7271
]);
7372

7473
}

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

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,13 @@ export const REGISTRY_SCAN_TABLE =[
44
name: "scan",
55
labelKey: "imageScanner.registries.registrytable.header.scan",
66
value: 'metadata.name',
7+
formatter: "ScanNameCell",
78
sort: "scan",
89
},
910
{
1011
name: "registry",
1112
labelKey: "imageScanner.registries.registrytable.header.registry",
12-
value: "id",
13+
value: "registry.id",
1314
sort: "id",
1415
},
1516
{
@@ -21,8 +22,8 @@ export const REGISTRY_SCAN_TABLE =[
2122
{
2223
name: "repositories",
2324
labelKey: "imageScanner.registries.registrytable.header.repos",
24-
value: "spec.repositories",
25-
sort: "spec.repositories",
25+
value: "registry.spec.repositories",
26+
sort: "registry.spec.repositories",
2627
},
2728
{
2829
name: "schedule",
@@ -32,25 +33,25 @@ export const REGISTRY_SCAN_TABLE =[
3233
sort: "schedule",
3334
},
3435
{
35-
name: "_status",
36+
name: "status",
3637
labelKey: "imageScanner.registries.registrytable.header.status",
37-
value: "_status",
38-
getValue: (row: any) => row._status,
39-
formatter: "RegisterStatusCellBadge",
40-
sort: "_status",
38+
value: "registry.status.conditions.0.type",
39+
formatter: "RegistryStatusCellBadge",
40+
sort: "registry.status.conditions.0.type",
4141
},
4242
{
4343
name: "_progress",
4444
labelKey: "imageScanner.registries.registrytable.header.progress",
4545
value: "progress",
4646
getValue: (row: any) => row.progress.toString(),
47-
formatter: "Percentage",
47+
formatter: "ProgressCell",
4848
sort: "progress",
4949
},
5050
{
5151
name: "previousScan",
5252
labelKey: "imageScanner.registries.registrytable.header.prevScan",
53-
value: "",
54-
sort: "previousScan",
53+
value: "status.conditions.1.type",
54+
formatter: "PreviousScanCell",
55+
sort: "status.conditions.1.type",
5556
},
5657
];

‎pkg/sbombastic-image-vulnerability-scanner/formatters/PreviousScanCell.vue‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<script>
2+
import ProgressCell from "@sbombastic-image-vulnerability-scanner/formatters/ProgressCell";
3+
export default {
4+
props: {
5+
value: {
6+
type: String,
7+
required: true
8+
},
9+
row: {
10+
type: Object,
11+
required: true
12+
}
13+
},
14+
methods: {
15+
getStatusStyle(row) {
16+
if (row && row.status && row.status.conditions && row.status.conditions.length > 1) {
17+
return { color: 'var(--text-secondary)' };
18+
} else {
19+
return { color: 'var(--text-muted)' };
20+
}
21+
},
22+
getStatusText(row) {
23+
if (row && row.status && row.status.conditions && row.status.conditions.length > 1) {
24+
return this.t(`imageScanner.enum.status.${row.status.conditions[1].type.toLowerCase()}`);
25+
} else {
26+
return this.t('imageScanner.enum.status.none');
27+
}
28+
}
29+
}
30+
};
31+
</script>
32+
33+
<template>
34+
<div class="previous-scan-cell">
35+
<div class="dot" :class="row.status.conditions[1].type.toLowerCase()"></div>
36+
<div class="status" :style="getStatusStyle(row)">{{ getStatusText(row) }}</div>
37+
<div v-if="row.status.conditions[1].progress">
38+
<ProgressCell :status="row.status.conditions[1]" />
39+
</div>
40+
</div>
41+
</template>
42+
43+
<style lang="scss" scoped>
44+
.previous-scan-cell {
45+
display: flex;
46+
align-items: center;
47+
gap: 8px;
48+
color: var(--text-secondary);
49+
font-size: 14px;
50+
.status {
51+
font-size: 14px;
52+
}
53+
.dot {
54+
width: 8px;
55+
height: 8px;
56+
border-radius: 50%;
57+
border-width: 1px;
58+
border-style: solid;
59+
display: inline-block;
60+
&.pending {
61+
background-color: var(--status-pending);
62+
border-color: var(--status-pending);
63+
}
64+
&.scheduled {
65+
background-color: var(--status-scheduled);
66+
border-color: var(--status-scheduled);
67+
}
68+
&.inprogress {
69+
background-color: var(--status-inprogress);
70+
border-color: var(--status-inprogress);
71+
}
72+
&.complete {
73+
background-color: var(--status-complete);
74+
border-color: var(--status-complete);
75+
}
76+
&.failed {
77+
background-color: var(--status-failed);
78+
border-color: var(--status-failed);
79+
}
80+
&.none {
81+
background-color: var(--status-none);
82+
border-color: #DCDEE4;
83+
}
84+
85+
--status-pending: #DCDEE7;
86+
--status-scheduled: #0FCFF0;
87+
--status-inprogress: #3D98D3;
88+
--status-complete: #5BB04F;
89+
--status-failed: #DE2136;
90+
--status-none: #FFFFFF;
91+
}
92+
}
93+
</style>

‎pkg/sbombastic-image-vulnerability-scanner/formatters/ProgressCell.vue‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<script>
2+
export default {
3+
props: {
4+
value: {
5+
type: Object,
6+
required: true
7+
}
8+
}
9+
};
10+
</script>
11+
<template>
12+
<div class="progress-cell">
13+
<span v-if="value.progress" class="progress-text">{{ value.progress }}% | <span v-if="value.errors">{{ value.errors }}</span></span>
14+
<span v-else class="progress-text text-muted">n/a</span>
15+
</div>
16+
</template>
17+
<style lang="scss" scoped>
18+
.progress-cell {
19+
display: flex;
20+
align-items: center;
21+
font-size: 14px;
22+
color: var(--text-secondary);
23+
24+
.progress-text {
25+
margin-left: 8px;
26+
}
27+
}
28+
</style>

‎pkg/sbombastic-image-vulnerability-scanner/formatters/RegistryStatusCellBadge.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,5 @@ export default {
1414
</script>
1515

1616
<template>
17-
<RegisterStatusBadge :status="value" />
17+
<RegisterStatusBadge :status="value.toLowerCase()" />
1818
</template>

‎pkg/sbombastic-image-vulnerability-scanner/formatters/ScanNameCell.vue‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<RouterLink :to="`/c/${this.$route.params.cluster}/${ this.PRODUCT_NAME }/${ this.PAGE.REGISTRIES }/${ row.metadata.namespace }/${ row.metadata.name }`">
3+
{{ row.metadata.name }}
4+
</RouterLink>
5+
</template>
6+
<script>
7+
import {
8+
PRODUCT_NAME,
9+
PAGE,
10+
} from "@sbombastic-image-vulnerability-scanner/types";
11+
export default {
12+
props: {
13+
row: {
14+
type: Object,
15+
required: true
16+
}
17+
},
18+
data() {
19+
return {
20+
PRODUCT_NAME,
21+
PAGE,
22+
};
23+
},
24+
};
25+
</script>

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

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@ imageScanner:
1111
subTitle: registry scans
1212
registrytable:
1313
header:
14-
scan: scan
14+
scan: Scan
1515
registry: Registry
16-
namespace: namespace
17-
repos: repositories
16+
namespace: Namespace
17+
repos: Repositories
1818
schedule: Scheduled
1919
status: Status
20-
progress: progress
20+
progress: Progress
2121
prevScan: Previous scan
2222
configuration:
2323
scan: Start Scan
@@ -55,11 +55,17 @@ imageScanner:
5555
low: Low
5656
none: None
5757
status:
58-
pending: pending
58+
pending: Pending
5959
scheduled: Scheduled
60-
in_progress: In progress
61-
completed: completed
60+
inprogress: In progress
61+
complete: Complete
6262
failed: Failed
63+
prevScan:
64+
none: n/a
65+
scheduled: Scheduled
66+
inprogress: In progress
67+
complete: Finished at
68+
failed: Failed at
6369
general:
6470
refresh: Refresh data
6571
ago: ago

0 commit comments

Comments
 (0)