Skip to content

Commit b5acfb8

Browse files
xingzhang-susexingzhang-suse
committed
Refactored fetch method, Changed the algorithom for previous status
1 parent 6dbd9d7 commit b5acfb8

File tree

3 files changed

+116
-79
lines changed

3 files changed

+116
-79
lines changed

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
<div v-if="registryStatus.registryName" class="registry-status-record">
33
<RouterLink class="registry-name" :to="`/c/${this.$route.params.cluster}/${ this.PRODUCT_NAME }/${ this.PAGE.REGISTRIES }/${ registryStatus.namespace }/${ registryStatus.registryName }`">{{ registryStatus.registryName }}</RouterLink>
44
<div class="uri">{{ registryStatus.uri }}</div>
5-
<div class="prev-status"><RegisterStatusBadge :status="registryStatus.prevStatus"/></div>
5+
<div class="prev-status"><RegisterStatusBadge :status="registryStatus.prevScanStatus"/></div>
66
<div class="arrow"></div>
77
<div class="curr-status"><RegisterStatusBadge :status="registryStatus.currStatus"/></div>
8-
<div class="update-time">{{ `${updateTime(registryStatus.lastUpdateTime)}` }}</div>
8+
<div class="update-time">{{ `${statusUpdateTime(registryStatus.lastTransitionTime)}` }}</div>
99
</div>
1010
<div v-else class="registry-status-record">
1111
<div class="no-data"></div>
@@ -37,8 +37,8 @@
3737
};
3838
},
3939
methods: {
40-
updateTime(lastUpdateTime) {
41-
return elapsedTime(Math.ceil(Date.now() / 1000) - Math.ceil((new Date(lastUpdateTime).getTime() / 1000))).label + ' ' + this.t("imageScanner.general.ago");
40+
statusUpdateTime(lastTransitionTime) {
41+
return elapsedTime(Math.ceil(Date.now() / 1000) - Math.ceil((new Date(lastTransitionTime).getTime() / 1000))).label + ' ' + this.t("imageScanner.general.ago");
4242
}
4343
}
4444
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@ export default {
1313
},
1414
methods: {
1515
getStatusText(row) {
16-
return this.t(`imageScanner.enum.status.${row.prevStatus.toLowerCase()}`);
16+
return this.t(`imageScanner.enum.status.${row.prevScanStatus.toLowerCase()}`);
1717
},
1818
getStatusLabelClass(row) {
19-
return row.prevStatus.toLowerCase();
19+
return row.prevScanStatus.toLowerCase();
2020
},
2121
getStatusDotClass(row) {
22-
return `dot ${row.prevStatus.toLowerCase()}`;
22+
return `dot ${row.prevScanStatus.toLowerCase()}`;
2323
}
2424
}
2525
};

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

Lines changed: 109 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,8 @@
55
<RecentUpdatedRegistries :registryStatusList="registryStatusList"/>
66
<StatusDistribution :chartData="statusSummary"/>
77
</div>
8-
<ResourceTable
8+
<SortableTable
99
ref="table"
10-
:schema="schema"
1110
:has-advanced-filtering="true"
1211
:rows="rows"
1312
:headers="headers"
@@ -33,15 +32,15 @@
3332
</button>
3433
</div>
3534
</template>
36-
</ResourceTable>
35+
</SortableTable>
3736
</div>
3837
</template>
3938

4039
<script>
4140
4241
import { ref } from "vue";
4342
import { RESOURCE } from "@sbombastic-image-vulnerability-scanner/types";
44-
import ResourceTable from "@shell/components/ResourceTable";
43+
import SortableTable from "@shell/components/SortableTable";
4544
import RecentUpdatedRegistries from "@sbombastic-image-vulnerability-scanner/components/RecentUpdatedRegistries";
4645
import StatusDistribution from "@sbombastic-image-vulnerability-scanner/components/StatusDistribution";
4746
import { REGISTRY_SCAN_TABLE } from "@sbombastic-image-vulnerability-scanner/config/table-headers";
@@ -56,7 +55,7 @@
5655
export default {
5756
name: 'registries',
5857
components: {
59-
ResourceTable,
58+
SortableTable,
6059
RecentUpdatedRegistries,
6160
StatusDistribution
6261
},
@@ -88,13 +87,7 @@
8887
methods: {
8988
loadData() {
9089
this.registryStatusList = [];
91-
this.statusSummary = {
92-
scheduled: 0,
93-
pending: 0,
94-
inprogress: 0,
95-
complete: 0,
96-
failed: 0
97-
};
90+
this.statusSummary = {};
9891
9992
let registriesCRD = this.$store.getters['cluster/all'](RESOURCE.REGISTRY);
10093
@@ -109,13 +102,69 @@
109102
return new Date(b.status.startTime) - new Date(a.status.startTime);
110103
});
111104
105+
const scanJobMap = this.getScanJobMap(scanJobCRD);
106+
const registryDataset = this.getRegistryDataset(registriesCRD, scanJobMap);
107+
this.rows = registryDataset.rows;
108+
this.registryStatusList = registryDataset.registryStatusList;
109+
this.statusSummary = registryDataset.statusSummary;
110+
console.log("this.rows",this.rows)
111+
},
112+
refresh() {
113+
window.location.reload();
114+
},
115+
async startScan(selected) {
116+
const scanjobObj = await this.$store.dispatch('cluster/create', {
117+
type: RESOURCE.SCAN_JOB,
118+
metadata: {
119+
generateName: selected?.[0]?.metadata.name || this.selectedRows[0].metadata.name,
120+
namespace: selected?.[0]?.metadata.namespace || this.selectedRows[0].metadata.namespace,
121+
},
122+
spec: {
123+
registry: this.selectedRows[0].metadata.name,
124+
}
125+
});
126+
try {
127+
await scanjobObj.save();
128+
// this.refresh();
129+
this.$store.dispatch('growl/success', {
130+
title: this.t('imageScanner.registries.messages.registryScanComplete'),
131+
message: this.t('imageScanner.registries.messages.registryScanComplete', { name: this.selectedRows[0].metadata.name }),
132+
});
133+
} catch (e) {
134+
this.$store.dispatch('growl/error', {
135+
title: this.t('imageScanner.registries.messages.registryScanFailed'),
136+
message: e.message,
137+
});
138+
}
139+
},
140+
openAddEditRegistry() {},
141+
onSelectionChange(selected) {
142+
this.selectedRows = selected || [];
143+
},
144+
async promptRemoveRegistry() {
145+
const table = this.$refs.table;
146+
const act = findBy(table.availableActions, 'action', 'promptRemove');
147+
if ( act ) {
148+
table.setBulkActionOfInterest(act);
149+
table.applyTableAction(act);
150+
}
151+
return;
152+
},
153+
getScanJobMap(scanJobCRD) {
112154
let scanJobMap = {};
113155
scanJobCRD.forEach((rec) => {
114-
rec.status.statusResult = rec.status?.conditions?.filter(condition => {
156+
let statusIndex = rec.status?.conditions?.findIndex((condition) => {
115157
return condition.status === "True";
116-
})[0] || {
158+
});
159+
console.log("statusIndex", statusIndex, rec.status?.conditions);
160+
rec.status.statusResult = statusIndex > -1 ? {
161+
type: rec.status.conditions[statusIndex].type,
162+
lastTransitionTime: rec.status.conditions[statusIndex].lastTransitionTime,
163+
statusIndex: statusIndex
164+
} : {
117165
type: "Pending",
118-
lastUpdateTime: null,
166+
lastTransitionTime: null,
167+
statusIndex: -1
119168
};
120169
121170
// Set ScanJobe map with namespace/registry as key and up to 2 scan jobs as value
@@ -129,36 +178,47 @@
129178
scanJobMap[`${rec.metadata.namespace}/${rec.spec.registry}`] = [rec];
130179
}
131180
});
132-
133-
this.rows = registriesCRD.map((rec) => {
181+
return scanJobMap;
182+
},
183+
getRegistryDataset(registriesCRD, scanJobMap) {
184+
let registryStatusList = [];
185+
const statusSummary = {
186+
scheduled: 0,
187+
pending: 0,
188+
inprogress: 0,
189+
complete: 0,
190+
failed: 0
191+
};
192+
const rows = registriesCRD.map((rec) => {
134193
this.latestUpdateTime = new Date();
135194
let scanjobs = scanJobMap[`${rec.metadata.namespace}/${rec.metadata.name}`] || [];
136195
const status = scanjobs[0] ? scanjobs[0].status.statusResult.type.toLowerCase() || "pending" : "none";
137-
const prevStatus = scanjobs[1] ? scanjobs[1].status.statusResult.type.toLowerCase() || "pending" : "none";
196+
const prevStatus = this.getPreviousStatus(scanjobs);
197+
const prevScanStatus = scanjobs[1] ? scanjobs[1].status.statusResult.type.toLowerCase() || "pending" : "none";
138198
139199
// Reform the record for the table
140200
rec.id = `${rec.metadata.namespace}/${rec.metadata.name}`;
141201
rec.currStatus = status;
142-
rec.prevStatus = prevStatus;
202+
rec.prevScanStatus = prevScanStatus;
143203
rec.progress = scanjobs[0] && scanjobs[0].status.imageCount && scanjobs[0].status.scannedImageCount?
144204
Math.ceil(scanjobs[0].status.scannedImageCount / scanjobs[0].status.imageCount * 100) : 0;
145205
rec.prevProgress = scanjobs[1] && scanjobs[1].status.imageCount && scanjobs[1].status.scannedImageCount?
146206
Math.ceil(scanjobs[1].status.scannedImageCount / scanjobs[1].status.imageCount * 100) : 0;
147207
rec.error = scanjobs[0] && scanjobs[0].status.statusResult.type === "Failed" ? scanjobs[0].status.statusResult.message : "";
148208
149209
// Summarize the data for Latest status updates panel
150-
this.registryStatusList.push({
210+
registryStatusList.push({
151211
registryName: rec.metadata.name,
152212
uri: rec.spec.uri,
153213
namespace: rec.metadata.namespace,
154-
prevStatus: prevStatus,
214+
prevScanStatus: prevStatus,
155215
currStatus: status,
156-
lastUpdateTime: scanjobs[0]?.status?.statusResult?.lastUpdateTime || rec.metadata.creationTimestamp,
216+
lastTransitionTime: scanjobs[0]?.status?.statusResult?.lastTransitionTime || rec.metadata.creationTimestamp,
157217
});
158218
159219
//Summarize the data for Status distribution panel
160-
if (status && this.statusSummary.hasOwnProperty(status)) {
161-
this.statusSummary[status]++;
220+
if (status && statusSummary.hasOwnProperty(status)) {
221+
statusSummary[status]++;
162222
}
163223
164224
rec.availableActions.push({
@@ -171,72 +231,49 @@
171231
172232
console.log("rec.availableActions", rec.availableActions)
173233
return rec;
174-
});
175-
234+
});
176235
// Sort and limit the registryStatusList to 5 most recent updates
177-
this.registryStatusList = this.registryStatusList.sort((a, b) => new Date(b.lastUpdateTime) - new Date(a.lastUpdateTime)).slice(0, 5);
178-
while (this.registryStatusList.length < 5) {
179-
this.registryStatusList.push({
236+
registryStatusList = registryStatusList.sort((a, b) => new Date(b.lastTransitionTime) - new Date(a.lastTransitionTime)).slice(0, 5);
237+
while (registryStatusList.length < 5) {
238+
registryStatusList.push({
180239
registryName: "",
181240
uri: "",
182-
prevStatus: "",
241+
prevScanStatus: "",
183242
currStatus: "",
184-
lastUpdateTime: new Date().toISOString()
243+
lastTransitionTime: new Date().toISOString()
185244
});
186245
}
187-
},
188-
refresh() {
189-
window.location.reload();
190-
},
191-
async startScan(selected) {
192-
const scanjobObj = await this.$store.dispatch('cluster/create', {
193-
type: RESOURCE.SCAN_JOB,
194-
metadata: {
195-
generateName: selected?.[0]?.metadata.name || this.selectedRows[0].metadata.name,
196-
namespace: selected?.[0]?.metadata.namespace || this.selectedRows[0].metadata.namespace,
197-
},
198-
spec: {
199-
registry: this.selectedRows[0].metadata.name,
200-
}
201-
});
202-
try {
203-
await scanjobObj.save();
204-
// this.refresh();
205-
this.$store.dispatch('growl/success', {
206-
title: this.t('imageScanner.registries.messages.registryScanComplete'),
207-
message: this.t('imageScanner.registries.messages.registryScanComplete', { name: this.selectedRows[0].metadata.name }),
208-
});
209-
} catch (e) {
210-
this.$store.dispatch('growl/error', {
211-
title: this.t('imageScanner.registries.messages.registryScanFailed'),
212-
message: e.message,
213-
});
246+
return {
247+
rows,
248+
registryStatusList,
249+
statusSummary
214250
}
215251
},
216-
openAddEditRegistry() {},
217-
onSelectionChange(selected) {
218-
this.selectedRows = selected || [];
219-
},
220-
async promptRemoveRegistry() {
221-
const table = this.$refs.table.$refs.table;
222-
const act = findBy(table.availableActions, 'action', 'promptRemove');
223-
if ( act ) {
224-
table.setBulkActionOfInterest(act);
225-
table.applyTableAction(act);
252+
getPreviousStatus(scanjobs) {
253+
if (scanjobs && scanjobs[0] && scanjobs[0].status && scanjobs[0].status.statusResult && scanjobs[0].status.statusResult.statusIndex > 0) {
254+
let index = scanjobs[0].status.statusResult.statusIndex;
255+
if (index < 3) {
256+
return scanjobs[0].status.conditions[index - 1].type.toLowerCase();
257+
} else {
258+
return scanjobs[0].status.conditions[index - 2].type.toLowerCase();
259+
}
260+
} else if (scanjobs && scanjobs[1]) {
261+
return scanjobs[1].status.statusResult.type.toLowerCase();
262+
} else {
263+
return "none";
226264
}
227-
return;
228-
},
265+
}
229266
},
230267
computed: {
231268
schema() {
232-
return this.$store.getters['cluster/schemaFor'](RESOURCE.SCAN_JOB);
269+
return this.$store.getters['cluster/schemaFor'](RESOURCE.REGISTRY);
233270
},
234271
latestUpdateTimeText() {
235272
const dateFormat = escapeHtml( this.$store.getters['prefs/get'](DATE_FORMAT));
236273
const timeFormat = escapeHtml( this.$store.getters['prefs/get'](TIME_FORMAT));
237274
return `${day(new Date(this.latestUpdateTime).getTime()).format(dateFormat)} ${day(new Date(this.latestUpdateTime).getTime()).format(timeFormat)}`;
238275
},
239-
}
276+
},
240277
}
241278
242279
</script>

0 commit comments

Comments
 (0)