Added formatters for the table fields and applied real CRD data to 2 charts

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

@@ -6,8 +6,8 @@
     </div>
     <div class="severity-chart">
       <div v-for="(value, key) in chartData" :key="key" class="severity-item">
-        <div class="severity-item-name">{{ t(`imageScanner.enum.${ colorPrefix }.${ key }`) }}</div>
-        <PercentageBar class="severity-item-bar" :colorStops="{0: `--${colorPrefix}-${ key }`}" :value="percentage(value)" :height="7"/>
+        <div class="severity-item-name">{{ t(`imageScanner.enum.${ colorPrefix }.${ key.toLowerCase() }`) }}</div>
+        <PercentageBar class="severity-item-bar" :colorStops="{0: `--${ colorPrefix }-${ key.toLowerCase() }`}" :value="percentage(value)" :height="7"/>
         <div class="severity-item-value"> {{ value }}</div>
       </div>
     </div>
@@ -38,7 +38,7 @@ export default {
   },
   methods: {
     percentage(value) {
-      return (value / this.total) * 100;
+      return this.total > 0 ? (value / this.total) * 100 : 0;
     }
   },
   computed: {
@@ -128,8 +128,8 @@ export default {
 
     --status-pending: #DCDEE7;
     --status-scheduled: #0FCFF0;
-    --status-in_progress: #3D98D3;
-    --status-completed: #5BB04F;
+    --status-inprogress: #3D98D3;
+    --status-complete: #5BB04F;
     --status-failed: #DE2136;
   }
 </style>

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

@@ -22,10 +22,10 @@
                 return "pending";
             case REGISTRY_STATUS.SCHEDULED:
                 return "scheduled";
-            case REGISTRY_STATUS.IN_PPROGRESS:
+            case REGISTRY_STATUS.IN_PROGRESS:
                 return "in-progress";
-            case REGISTRY_STATUS.COMPLETED:
-                return "completed";
+            case REGISTRY_STATUS.COMPLETE:
+                return "complete";
             case REGISTRY_STATUS.FAILED:
                 return "failed";
             default:
@@ -60,7 +60,7 @@
       color: #1C577D;
     }
 
-    &.completed {
+    &.complete {
       background: #DEEFDC;
       color: #376930;
     }

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

@@ -1,17 +1,24 @@
 <template>
-    <div class="registry-status-record">
-        <div class="scan-name">{{ registryStatus.scan_name }}</div>
+    <div v-if="registryStatus.scan_name" class="registry-status-record">
+        <RouterLink class="scan-name" :to="`/c/${this.$route.params.cluster}/${ this.PRODUCT_NAME }/${ this.PAGE.REGISTRIES }/${ registryStatus.namespace }/${ registryStatus.scan_name }`">{{ registryStatus.scan_name }}</RouterLink>
         <div class="registry-name">{{ registryStatus.registry_name }}</div>
         <div class="prev-status"><RegisterStatusBadge :status="registryStatus.prev_status"/></div>
         <div class="arrow"></div>
         <div  class="curr-status"><RegisterStatusBadge :status="registryStatus.curr_status"/></div>
         <div class="update-time">{{ `${updateTime(registryStatus.last_update_time)} ${t("imageScanner.general.ago")}`}}</div>
     </div>
+    <div v-else class="registry-status-record">
+        <div class="no-data"></div>
+    </div>
 </template>
 
 <script>
   import RegisterStatusBadge from "./RegisterStatusBadge";
   import { elapsedTime } from "@shell/utils/time";
+  import {
+    PRODUCT_NAME,
+    PAGE,
+  } from "@sbombastic-image-vulnerability-scanner/types";
   export default {
     name: 'registryStatusUpdate',
     components: {
@@ -23,15 +30,31 @@
             required: true
         }
     },
+    data() {
+      return {
+        PRODUCT_NAME,
+        PAGE,
+     };
+    },
     methods: {
         updateTime(lastUpdateTime) {
-            return  elapsedTime(Date.now() / 1000 - lastUpdateTime).label;
+            return  elapsedTime(Date.now() / 1000 - new Date(lastUpdateTime).getTime() / 1000).label;
         }
     }
   }
 </script>
 
 <style lang="scss" scoped>
+    .no-data {
+        color: #6C6C76;
+        font-family: Lato;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 21px;
+        min-height: 21px;
+        width: 100%;
+    }
     .registry-status-record {
         display: flex;
         padding: 4px 0px;
@@ -52,7 +75,10 @@
             line-height: 21px;
         }
         .registry-name {
-            flex: 12;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 1;
+            flex: 10;
             overflow: hidden;
             color: #141419;
             text-overflow: ellipsis;

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

@@ -68,7 +68,6 @@ export function init($plugin: IPlugin, store: any) {
         PAGE.REGISTRIES,
         PAGE.IMAGE_OVERVIEW,
         PAGE.VULNERABILITY_OVERVIEW,
-        "demo"
     ]);
 
 }

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

@@ -4,12 +4,13 @@ export const REGISTRY_SCAN_TABLE =[
         name:          "scan",
         labelKey:      "imageScanner.registries.registrytable.header.scan",
         value:         'metadata.name',
+        formatter:     "ScanNameCell",
         sort:          "scan",
     },
     {
         name:          "registry",
         labelKey:      "imageScanner.registries.registrytable.header.registry",
-        value:         "id",
+        value:         "registry.id",
         sort:          "id",
     },
     {
@@ -21,8 +22,8 @@ export const REGISTRY_SCAN_TABLE =[
     {
         name:          "repositories",
         labelKey:      "imageScanner.registries.registrytable.header.repos",
-        value:         "spec.repositories",
-        sort:          "spec.repositories",
+        value:         "registry.spec.repositories",
+        sort:          "registry.spec.repositories",
     },
     {
         name:          "schedule",
@@ -32,25 +33,25 @@ export const REGISTRY_SCAN_TABLE =[
         sort:          "schedule",
     },
     {
-        name:          "_status",
+        name:          "status",
         labelKey:      "imageScanner.registries.registrytable.header.status",
-        value:         "_status",
-        getValue:      (row: any) => row._status,
-        formatter:     "RegisterStatusCellBadge",
-        sort:          "_status",
+        value:         "registry.status.conditions.0.type",
+        formatter:     "RegistryStatusCellBadge",
+        sort:          "registry.status.conditions.0.type",
     },
     {
         name:          "_progress",
         labelKey:      "imageScanner.registries.registrytable.header.progress",
         value:         "progress",
         getValue:      (row: any) => row.progress.toString(),
-        formatter:     "Percentage",
+        formatter:     "ProgressCell",
         sort:          "progress",
     },
     {
         name:          "previousScan",
         labelKey:      "imageScanner.registries.registrytable.header.prevScan",
-        value:         "",
-        sort:          "previousScan",
+        value:         "status.conditions.1.type",
+        formatter:     "PreviousScanCell",
+        sort:          "status.conditions.1.type",
     },
 ];

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

@@ -0,0 +1,93 @@
+<script>
+import ProgressCell from "@sbombastic-image-vulnerability-scanner/formatters/ProgressCell";
+export default {
+  props: {
+    value: {
+      type:    String,
+      required: true
+    },
+    row: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    getStatusStyle(row) {
+      if (row && row.status && row.status.conditions && row.status.conditions.length > 1) {
+        return { color: 'var(--text-secondary)' };
+      } else {
+        return { color: 'var(--text-muted)' };
+      }
+    },
+    getStatusText(row) {
+      if (row && row.status && row.status.conditions && row.status.conditions.length > 1) {
+        return this.t(`imageScanner.enum.status.${row.status.conditions[1].type.toLowerCase()}`);
+      } else {
+        return this.t('imageScanner.enum.status.none');
+      }
+    }
+  }
+};
+</script>
+
+<template>
+    <div class="previous-scan-cell">
+        <div class="dot" :class="row.status.conditions[1].type.toLowerCase()"></div>
+        <div class="status" :style="getStatusStyle(row)">{{ getStatusText(row) }}</div>  
+        <div v-if="row.status.conditions[1].progress">
+          <ProgressCell :status="row.status.conditions[1]" />
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+    .previous-scan-cell {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        color: var(--text-secondary);
+        font-size: 14px;
+        .status {
+            font-size: 14px;
+        }
+        .dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            border-width: 1px;
+            border-style: solid;
+            display: inline-block; 
+            &.pending {
+                background-color: var(--status-pending);
+                border-color: var(--status-pending);
+            }
+            &.scheduled {
+                background-color: var(--status-scheduled);
+                border-color: var(--status-scheduled);
+            }
+            &.inprogress {
+                background-color: var(--status-inprogress);
+                border-color: var(--status-inprogress);
+            }
+            &.complete {
+                background-color: var(--status-complete);
+                border-color: var(--status-complete);
+            }
+            &.failed {
+                background-color: var(--status-failed);
+                border-color: var(--status-failed);
+            }
+            &.none {
+                background-color: var(--status-none);
+                border-color: #DCDEE4;
+            }
+
+            --status-pending: #DCDEE7;
+            --status-scheduled: #0FCFF0;
+            --status-inprogress: #3D98D3;
+            --status-complete: #5BB04F;
+            --status-failed: #DE2136;
+            --status-none: #FFFFFF;
+        }
+    }
+</style>

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

@@ -0,0 +1,28 @@
+<script>
+export default {
+  props: {
+    value: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
+<template>
+  <div class="progress-cell">
+    <span v-if="value.progress" class="progress-text">{{ value.progress }}% | <span v-if="value.errors">{{ value.errors }}</span></span>
+    <span v-else class="progress-text text-muted">n/a</span>
+  </div>
+</template>
+<style lang="scss" scoped>
+.progress-cell {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  color: var(--text-secondary);
+
+  .progress-text {
+    margin-left: 8px;
+  }
+}
+</style> 

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

@@ -14,5 +14,5 @@ export default {
 </script>
 
 <template>
-  <RegisterStatusBadge :status="value" />
+  <RegisterStatusBadge :status="value.toLowerCase()" />
 </template>

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

@@ -0,0 +1,25 @@
+<template>
+  <RouterLink :to="`/c/${this.$route.params.cluster}/${ this.PRODUCT_NAME }/${ this.PAGE.REGISTRIES }/${ row.metadata.namespace }/${ row.metadata.name }`">
+    {{ row.metadata.name }}
+  </RouterLink>
+</template>
+<script>
+import {
+    PRODUCT_NAME,
+    PAGE,
+} from "@sbombastic-image-vulnerability-scanner/types";
+export default {
+  props: {
+    row: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      PRODUCT_NAME,
+      PAGE,
+    };
+  },
+};
+</script>

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

@@ -11,13 +11,13 @@ imageScanner:
       subTitle: registry scans
     registrytable:
       header:
-        scan: scan
+        scan: Scan
         registry: Registry
-        namespace: namespace
-        repos: repositories
+        namespace: Namespace
+        repos: Repositories
         schedule: Scheduled
         status: Status
-        progress: progress
+        progress: Progress
         prevScan: Previous scan
     configuration:
       scan: Start Scan
@@ -55,11 +55,17 @@ imageScanner:
       low: Low
       none: None
     status:
-      pending: pending
+      pending: Pending
       scheduled: Scheduled
-      in_progress: In progress
-      completed: completed
+      inprogress: In progress
+      complete: Complete
       failed: Failed
+    prevScan:
+      none: n/a
+      scheduled: Scheduled
+      inprogress: In progress
+      complete: Finished at
+      failed: Failed at
   general:
     refresh: Refresh data
     ago: ago