Fixed UI display bugs

Author: xingzhang-suse

pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue

@@ -23,7 +23,7 @@
             <i class="icon icon-refresh"></i>
             {{ t('imageScanner.general.refresh') }}
           </button>
-          <ScanButton :selectedRegistries="[{name: $route.params.id, namespace: $route.params.ns}]" :reloadFn="loadData" />
+          <ScanButton :selectedRegistries="[{name: $route.params.id, namespace: $route.params.ns, currStatus: registryStatus}]" :reloadFn="loadData" />
           <ActionMenu
             v-if="registry"
             button-role="multiAction"

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

@@ -1,7 +1,7 @@
 <template>
   <button
     class="btn role-primary"
-    :disabled="!(selectedRegistries && selectedRegistries.length)"
+    :disabled="disableBtn"
     @click="startScan()"
 >
     <i class="icon icon-play"></i>
@@ -30,7 +30,9 @@ export default {
         if (!this.selectedRegistries || !this.selectedRegistries.length) {
             return;
         }
-        this.selectedRegistries.forEach(async (registry) => {
+        this.selectedRegistries.filter(registry => {
+          return !registry.currStatus || ["none", "failed", "complete"].includes(registry.currStatus.toLowerCase());
+        }).forEach(async (registry) => {
             const scanjobObj = await this.$store.dispatch('cluster/create', {
                 type: RESOURCE.SCAN_JOB,
                 metadata: {
@@ -60,5 +62,13 @@ export default {
         });
     },
   },
+  computed: {
+    disableBtn() {
+      return !(this.selectedRegistries && this.selectedRegistries.length) ||
+        !this.selectedRegistries.some(registry => {
+          return !registry.currStatus || ["none", "failed", "complete"].includes(registry.currStatus.toLowerCase());
+        });
+    },
+  },
 }
 </script>

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

@@ -1,4 +1,3 @@
-import { elapsedTime } from "@shell/utils/time";
 
 export const REGISTRY_SCAN_TABLE = [
   {
@@ -29,8 +28,7 @@ export const REGISTRY_SCAN_TABLE = [
   {
     name: "scanInterval",
     labelKey: "imageScanner.registries.registrytable.header.schedule",
-    value: "spec.scanInterval",
-    getValue: (row: any) => elapsedTime(row.scanInterval * 3600 * 1000).label,
+    value: (row: any) => `Every ${row.spec.scanInterval}`,
     sort: "scanInterval",
   },
   {

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

@@ -19,26 +19,26 @@ export default {
   },
   methods: {
     getStatusText(row) {
-      return this.t(`imageScanner.enum.status.${row.prevScanStatus?.toLowerCase()}`);
+      return row.prevScanStatus ? this.t(`imageScanner.enum.status.${row.prevScanStatus.toLowerCase()}`) : "";
     },
     getStatusLabelClass(row) {
-      return row.prevScanStatus?.toLowerCase();
+      return row.prevScanStatus? row.prevScanStatus.toLowerCase() : "";
     },
     getStatusDotClass(row) {
-      return `dot ${row.prevScanStatus?.toLowerCase()}`;
+      return row.prevScanStatus? `dot ${row.prevScanStatus.toLowerCase()}` : "";
     }
   }
 };
 </script>
 
 <template>
     <div class="previous-scan-cell">
-        <div class="dot" :class="getStatusDotClass(row)"></div>
+        <div :class="getStatusDotClass(row)"></div>
         <div class="status" :class="getStatusLabelClass(row)">{{ getStatusText(row) }}</div> 
         <div v-if="row.prevProgress">
           <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}" />
         </div>
-        <div v-if="row.prevScanStatus.toLowerCase() === 'failed' && row.PrevError">
+        <div v-if="row.prevScanStatus?.toLowerCase() === 'failed' && row.PrevError">
           <span>|
             <TextWithPopedDetail
               :value="t('imageScanner.general.error')"