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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="page">
     <div class="header-section">
       <div class="header-left">
         <div class="title-wrap">
@@ -39,15 +39,16 @@
     <SortableTable
       ref="table"
       :has-advanced-filtering="false"
+      :row-actions="true"
       :rows="rows"
       :headers="headers"
       @selection="onSelectionChange"
     >
       <template #header-left>
-          <div class="bulk-actions">
-            <ScanButton :selectedRegistries="selectedRows?.map(row => {return {name: row.metadata.name, namespace: row.metadata.namespace}})" :reloadFn="loadData" />
+          <div class="table-top-left">
+            <ScanButton class="table-btn" :selectedRegistries="selectedRows?.map(row => {return {name: row.metadata.name, namespace: row.metadata.namespace}})" :reloadFn="loadData" />
             <button
-              class="btn role-primary"
+              class="btn role-primary table-btn"
               :disabled="!(selectedRows && selectedRows.length)"
               @click="promptRemoveRegistry()"
             >
@@ -128,6 +129,7 @@ import { template } from "lodash";
           }
           return new Date(b.status.startTime) - new Date(a.status.startTime);
         });
+        console.group("scanJobCRD", scanJobCRD)
 
         const scanJobMap = this.getScanJobMap(scanJobCRD);
         const registryDataset  = this.getRegistryDataset(registriesCRD, scanJobMap);
@@ -186,9 +188,10 @@ import { template } from "lodash";
             scanJobMap[`${rec.metadata.namespace}/${rec.spec.registry}`].length > 0 &&
             scanJobMap[`${rec.metadata.namespace}/${rec.spec.registry}`].length < 2) {
             scanJobMap[`${rec.metadata.namespace}/${rec.spec.registry}`].push(rec);
-          } else {
+          } else if (!scanJobMap[`${rec.metadata.namespace}/${rec.spec.registry}`]) {
             scanJobMap[`${rec.metadata.namespace}/${rec.spec.registry}`] = [rec];
           }
+          console.log("scanJobMap", scanJobMap['default/test-xz-2']);
         });
         return scanJobMap;
       },
@@ -212,11 +215,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({
@@ -295,7 +299,7 @@ import { template } from "lodash";
   .page {
     display: flex;
     flex-direction: column;
-    padding: 0 20px 20px 20px;
+    padding: 24px;
     min-height: 100%;
   }
   .header-section {
@@ -304,7 +308,19 @@ import { template } from "lodash";
     gap: 24px;
     align-self: stretch;
     margin-bottom: 24px;
-    .header-left {
+    
+  }
+  .table-top-left {
+      display: flex;
+      align-items: start-end;
+      justify-content: start;
+      flex: 1 0 0;
+      gap: 16px;
+    .table-btn {
+      height: 40px;
+    }
+  }
+  .header-left {
       display: flex;
       flex-direction: column;
       justify-content: center;
@@ -360,7 +376,7 @@ import { template } from "lodash";
       align-items: flex-end;
       justify-content: end;
       flex: 1 0 0;
-      gap: 24px;
+      gap: 16px;
     }
     .header-btn {
       height: 40px;
@@ -379,7 +395,6 @@ import { template } from "lodash";
       background: url('../../../../assets/img/refresh.svg') no-repeat center center;
       background-size: contain;
     }
-  }
   .summary-section {
     display: flex;
     min-width: 912px;