Skip to content

Commit 6948300

Browse files
xingzhang-suserushk014
xingzhang-suse
authored and
rushk014
committed
Added popup for failed scan and progress, Fixed navigation issue from edit page to list page, added customized row action button and overwrite availableActions from model
1 parent a070929 commit 6948300

File tree

10 files changed

+348
-47
lines changed

10 files changed

+348
-47
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export default {
5555
} finally {
5656
setTimeout(() => {
5757
this.reloadFn(true);
58-
}, 1000);
58+
}, 2000);
5959
}
6060
});
6161
},

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

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
<template>
2+
<div class="text-with-pop" ref="trigger" @mouseenter="checkPosition">
3+
<span style="margin-left: 8px;">{{ value }}</span>
4+
<div class="message-hover-overlay" :class="{ 'show-top': showOnTop }">
5+
<div class="title">{{ detail.title }}</div>
6+
<div class="message-wrap">
7+
<div v-if="getStatusDotClass" :class="getStatusDotClass"></div>
8+
<div class="message">{{ detail.message }}</div>
9+
</div>
10+
</div>
11+
</div>
12+
</template>
13+
<script>
14+
15+
export default {
16+
name: 'TextWithPopedDetail',
17+
props: {
18+
value: {
19+
type: String,
20+
default: ''
21+
},
22+
detail: {
23+
type: Object,
24+
default: () => ({})
25+
}
26+
},
27+
data() {
28+
return {
29+
showOnTop: false
30+
}
31+
},
32+
methods: {
33+
checkPosition() {
34+
const trigger = this.$refs.trigger.getBoundingClientRect();
35+
const viewportHeight = window.innerHeight;
36+
this.showOnTop = (viewportHeight - trigger.bottom < 300);
37+
}
38+
},
39+
computed: {
40+
getStatusDotClass() {
41+
if (this.detail.type === 'error') {
42+
return 'dot failed';
43+
} else {
44+
return '';
45+
}
46+
}
47+
},
48+
}
49+
</script>
50+
51+
<style lang="scss" scoped>
52+
.message-hover-overlay {
53+
position: absolute;
54+
top: calc(100% + 10px);
55+
right: 10px;
56+
background: white;
57+
border: 1px solid #eee;
58+
padding: 16px;
59+
z-index: 100;
60+
width: 360px;
61+
word-wrap: break-word;
62+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
63+
.title {
64+
font-weight: bold;
65+
font-size: 16px;
66+
color: var(--text-primary);
67+
margin-bottom: 12px;
68+
}
69+
.message {
70+
color: var(--text-secondary);
71+
font-size: 14px;
72+
73+
white-space: pre-wrap;
74+
word-break: break-word;
75+
}
76+
}
77+
.message-hover-overlay.show-top {
78+
top: auto;
79+
bottom: calc(100% + 10px);
80+
margin-bottom: 8px;
81+
}
82+
.text-with-pop {
83+
color: var(--text-error);
84+
cursor: pointer;
85+
position: relative;
86+
display: inline-block;
87+
&:hover .message-hover-overlay {
88+
display: block;
89+
}
90+
.message-hover-overlay {
91+
display: none;
92+
}
93+
text-decoration: underline;
94+
}
95+
.message-wrap {
96+
display: flex;
97+
align-items: flex-start;
98+
gap: 8px;
99+
.dot {
100+
width: 8px;
101+
height: 8px;
102+
margin-top: 4px;
103+
min-width: 8px;
104+
border-radius: 50%;
105+
border-width: 1px;
106+
border-style: solid;
107+
&.pending {
108+
background-color: var(--status-pending);
109+
border-color: var(--status-pending);
110+
}
111+
&.scheduled {
112+
background-color: var(--status-scheduled);
113+
border-color: var(--status-scheduled);
114+
}
115+
&.inprogress {
116+
background-color: var(--status-inprogress);
117+
border-color: var(--status-inprogress);
118+
}
119+
&.complete {
120+
background-color: var(--status-complete);
121+
border-color: var(--status-complete);
122+
}
123+
&.failed {
124+
background-color: var(--status-failed);
125+
border-color: var(--status-failed);
126+
}
127+
&.none {
128+
background-color: var(--status-none);
129+
border-color: #DCDEE4;
130+
}
131+
132+
--status-pending: #DCDEE7;
133+
--status-scheduled: #0FCFF0;
134+
--status-inprogress: #3D98D3;
135+
--status-complete: #5BB04F;
136+
--status-failed: #DE2136;
137+
--status-none: #FFFFFF;
138+
}
139+
.message {
140+
color: var(--text-secondary);
141+
font-size: 14px;
142+
word-break: break-word;
143+
}
144+
}
145+
146+
</style>

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

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -78,13 +78,12 @@ export function init($plugin: IPlugin, store: any) {
7878
},
7979
});
8080

81-
basicType([
82-
PAGE.IMAGE_OVERVIEW,
83-
PAGE.VULNERABILITY_OVERVIEW,
84-
PAGE.VEX_MANAGEMENT,
85-
//"demo"
86-
]);
87-
88-
basicType([PAGE.REGISTRIES, PAGE.VEX_MANAGEMENT], 'Advanced');
81+
basicType([
82+
PAGE.IMAGE_OVERVIEW,
83+
PAGE.VULNERABILITY_OVERVIEW,
84+
//"demo"
85+
]);
86+
// Prepend spaces on group name, as Rancher 2.12 render group name algin with sidemenu
87+
basicType([PAGE.REGISTRIES, PAGE.VEX_MANAGEMENT], '&nbsp;&nbsp;&nbsp;&nbsp;Advanced');
8988

9089
}

‎pkg/sbombastic-image-vulnerability-scanner/edit/sbombastic.rancher.io.registry.vue‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,8 @@ export default {
4949
return {
5050
inStore: this.$store.getters['currentProduct'].inStore,
5151
errors: null,
52+
PAGE,
53+
PRODUCT_NAME,
5254
};
5355
},
5456
@@ -76,6 +78,9 @@ export default {
7678
REGISTRY_TYPE_OPTIONS: function() {
7779
return REGISTRY_TYPE_OPTIONS;
7880
},
81+
doneLocationOverride() {
82+
return `/c/${this.$route.params.cluster}/${ this.PRODUCT_NAME }/${this.PAGE.REGISTRIES}`;
83+
},
7984
},
8085
8186
methods: {
@@ -99,17 +104,6 @@ export default {
99104
});
100105
},
101106
102-
cancel() {
103-
console.log('cancel done');
104-
this.done();
105-
this.$router.push({
106-
name: `c-cluster-${PRODUCT_NAME}-${PAGE.REGISTRIES}`,
107-
params: {
108-
cluster: this.$route.params.cluster,
109-
product: PRODUCT_NAME
110-
}
111-
});
112-
},
113107
doneRoute() {
114108
console.log('doneRoute');
115109
return `c-cluster-${PRODUCT_NAME}-${PAGE.REGISTRIES}`;
@@ -142,7 +136,7 @@ export default {
142136
:cancel-event="true"
143137
@error="(e) => (errors = e)"
144138
@finish="apply"
145-
@cancel="cancel"
139+
@cancel="done"
146140
>
147141
<NameNsDescription
148142
:value="value"

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
<script>
22
import ProgressCell from "@sbombastic-image-vulnerability-scanner/formatters/ProgressCell";
3+
import TextWithPopedDetail from "@sbombastic-image-vulnerability-scanner/components/common/TextWithPopedDetail";
34
export default {
45
components: {
5-
ProgressCell
6+
ProgressCell,
7+
TextWithPopedDetail
68
},
79
name: "PreviousScanCell",
810
props: {
@@ -34,10 +36,15 @@ export default {
3436
<div class="dot" :class="getStatusDotClass(row)"></div>
3537
<div class="status" :class="getStatusLabelClass(row)">{{ getStatusText(row) }}</div>
3638
<div v-if="row.prevProgress">
37-
<span>{{ t("imageScanner.general.at") }}</span><ProgressCell style="display: inline-block;" :row="{ progress: row.prevProgress, error: null}" />
39+
<span>{{ t("imageScanner.general.at") }}</span><ProgressCell style="display: inline-block;" :row="{ metadata: { name: row.metadata.name }, progress: row.prevProgress, progressDetail: row.prevProgressDetail, error: null}" />
3840
</div>
3941
<div v-if="row.prevScanStatus.toLowerCase() === 'failed' && row.PrevError">
40-
<span class="error-message">|<span style="margin-left: 8px;">{{ t("imageScanner.general.error") }}</span></span>
42+
<span>|
43+
<TextWithPopedDetail
44+
:value="t('imageScanner.general.error')"
45+
:detail="{ title: `${row.metadata.name} - ${t('imageScanner.registries.configuration.scanTable.header.error')}`, message: row.PrevError, type: 'error' }"
46+
/>
47+
</span>
4148
</div>
4249
</div>
4350
</template>

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<script>
2+
export default {
3+
props: {
4+
row: {
5+
type: Object,
6+
required: true
7+
},
8+
},
9+
name: 'ProgressCell',
10+
computed: {
11+
progress() {
12+
return this.row.status.scannedImagesCount && this.row.status.imagesCount ? Math.round((this.row.status.scannedImagesCount / this.row.status.imagesCount) * 100) : null;
13+
},
14+
}
15+
};
16+
</script>
17+
<template>
18+
<div class="progress-cell">
19+
<span v-if="progress" class="progress-text">{{ progress }}%</span>
20+
<span v-else class="progress-text text-muted">n/a</span>
21+
</div>
22+
</template>
23+
<style lang="scss" scoped>
24+
.progress-cell {
25+
display: flex;
26+
align-items: center;
27+
font-size: 14px;
28+
color: var(--text-secondary);
29+
30+
.progress-text {
31+
margin-left: 8px;
32+
}
33+
}
34+
</style>

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

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,33 @@
11
<script>
2+
import TextWithPopedDetail from '@sbombastic-image-vulnerability-scanner/components/common/TextWithPopedDetail';
23
export default {
34
props: {
45
row: {
56
type: Object,
67
required: true
78
}
8-
}
9+
},
10+
components: {
11+
TextWithPopedDetail
12+
},
13+
name: 'ProgressCell',
914
};
1015
</script>
1116
<template>
1217
<div class="progress-cell">
13-
<span v-if="row.progress" class="progress-text">{{ row.progress }}%
18+
<span v-if="row.progress">
19+
<TextWithPopedDetail
20+
:value="`${row.progress}%`"
21+
:detail="{ title: `${row.metadata.name} - ${row.progress}%`, message: row.progressDetail, type: 'info' }"
22+
/>
1423
<span v-if="row.error">|
15-
<span style="margin-left: 4px;">{{ t("imageScanner.general.error") }}</span>
24+
<TextWithPopedDetail
25+
:value="t('imageScanner.general.error')"
26+
:detail="{title: `${row.metadata.name} - ${t('imageScanner.registries.configuration.scanTable.header.error')}`, message: row.error, type: 'error' }"
27+
/>
1628
</span>
1729
</span>
1830
<span v-else class="progress-text text-muted">n/a</span>
19-
2031
</div>
2132
</template>
2233
<style lang="scss" scoped>
@@ -25,9 +36,5 @@ export default {
2536
align-items: center;
2637
font-size: 14px;
2738
color: var(--text-secondary);
28-
29-
.progress-text {
30-
margin-left: 8px;
31-
}
3239
}
3340
</style>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ imageScanner:
44
registries:
55
title: Registries configuration
66
button:
7-
addNew: Add new
7+
addNew: Create
88
refresh: Refresh data
99
startScan: Start scan
1010
delete: Delete

0 commit comments

Comments
 (0)