Fixed bug on percentage presentation

Author: xingzhang-suse

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

@@ -44,22 +44,18 @@ export const REGISTRY_SCAN_TABLE = [
   {
     name: "progress",
     labelKey: "imageScanner.registries.registrytable.header.progress",
-    getValue: (row: any) => {
-      return {
-        progress: row.progress,
-        error: row.error,
-      };
-    },
+     getValue: (row: any) => row,
     formatter: "ProgressCell",
     sort: "progress",
+    width: 120,
   },
   {
     name: "previousScan",
     labelKey: "imageScanner.registries.registrytable.header.prevScan",
     getValue: (row: any) => row,
     formatter: "PreviousScanCell",
     sort: "previousScan",
-    width: 150,
+    width: 200,
   },
 ];
 

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

@@ -1,6 +1,10 @@
 <script>
 import ProgressCell from "@sbombastic-image-vulnerability-scanner/formatters/ProgressCell";
 export default {
+  components: {
+    ProgressCell
+  },
+  name: "PreviousScanCell",
   props: {
     value: {
       type:    String,
@@ -28,12 +32,12 @@ export default {
 <template>
     <div class="previous-scan-cell">
         <div class="dot" :class="getStatusDotClass(row)"></div>
-        <div class="status" :class="getStatusLabelClass(row)">{{ getStatusText(row) }}</div>
+        <div class="status" :class="getStatusLabelClass(row)">{{ getStatusText(row) }}</div> 
         <div v-if="row.prevProgress">
-          <ProgressCell :status="{ progress: row.prevProgress, error: row.error }" />
+          <span>{{ t("imageScanner.general.at") }}</span><ProgressCell style="display: inline-block;" :row="{ progress: row.prevProgress, error: null}" />
         </div>
-        <div v-if="row.prevScanStatus.toLowerCase() === 'failed' && row.error">
-          <span class="error-message">|<span style="margin-left: 10px;">{{ t("imageScanner.general.error") }}</span></span>
+        <div v-if="row.prevScanStatus.toLowerCase() === 'failed' && row.PrevError">
+          <span class="error-message">|<span style="margin-left: 8px;">{{ t("imageScanner.general.error") }}</span></span>
         </div>
     </div>
 </template>

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

@@ -1,7 +1,7 @@
 <script>
 export default {
   props: {
-    value: {
+    row: {
       type: Object,
       required: true
     }
@@ -10,8 +10,13 @@ export default {
 </script>
 <template>
   <div class="progress-cell">
-    <span v-if="value.progress" class="progress-text">{{ value.progress }}% | <span v-if="value.error">{{ value.error }}</span></span>
+    <span v-if="row.progress" class="progress-text">{{ row.progress }}%
+      <span v-if="row.error">|
+        <span style="margin-left: 4px;">{{ t("imageScanner.general.error") }}</span>
+      </span>
+    </span>
     <span v-else class="progress-text text-muted">n/a</span>
+    
   </div>
 </template>
 <style lang="scss" scoped>

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

@@ -135,6 +135,7 @@ imageScanner:
     justNow: Just now
     none: none
     error: Error
+    at: at
 
 typeLabel:
   sbombastic.rancher.io.registry: Registries configuration

pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/RegistriesConfiguration.vue

@@ -212,11 +212,12 @@ import { template } from "lodash";
           rec.id = `${rec.metadata.namespace}/${rec.metadata.name}`;
           rec.currStatus = status;
           rec.prevScanStatus = prevScanStatus;
-          rec.progress = scanjobs[0] && scanjobs[0].status.imageCount && scanjobs[0].status.scannedImageCount?
-            Math.ceil(scanjobs[0].status.scannedImageCount / scanjobs[0].status.imageCount * 100) : 0;
-          rec.prevProgress = scanjobs[1] && scanjobs[1].status.imageCount && scanjobs[1].status.scannedImageCount?
-            Math.ceil(scanjobs[1].status.scannedImageCount / scanjobs[1].status.imageCount * 100) : 0;
-          rec.error = scanjobs[0] && scanjobs[0].status.statusResult.type === "Failed" ? scanjobs[0].status.statusResult.message : "";
+          rec.progress = scanjobs[0] && scanjobs[0].status.imagesCount && scanjobs[0].status.scannedImagesCount?
+            Math.ceil(scanjobs[0].status.scannedImagesCount / scanjobs[0].status.imagesCount * 100) : 0;
+          rec.prevProgress = scanjobs[1] && scanjobs[1].status.imagesCount && scanjobs[1].status.scannedImagesCount?
+            Math.ceil(scanjobs[1].status.scannedImagesCount / scanjobs[1].status.imagesCount * 100) : 0;
+          rec.error = scanjobs[0] && scanjobs[0].status.statusResult.type.toLowerCase() === "failed" ? scanjobs[0].status.statusResult.message : "";
+          rec.PrevError = scanjobs[1] && scanjobs[1].status.statusResult.type.toLowerCase() === "failed" ? scanjobs[1].status.statusResult.message : "";
 
           // Summarize the data for Latest status updates panel
           registryStatusList.push({