Feat: Registries configuration - Detail: Add Scan History Error Cell

Author: rushk014

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

@@ -35,8 +35,6 @@
             type: "Pending",
             lastTransitionTime: null,
           };
-          rec.status['scannedImagesCount'] = this.$route.params.id === 'kw-controller' ? 1000 : 500;
-          rec.status['imagesCount'] = 2000;
           return rec;
         });
       }
@@ -55,8 +53,6 @@
               type: "Pending",
               lastTransitionTime: null,
             };
-            rec.status['scannedImagesCount'] = this.$route.params.id === 'kw-controller' ? 1000 : 500;
-            rec.status['imagesCount'] = 2000;
             return rec;
           });
         }

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

@@ -4,7 +4,7 @@
       <div v-if="property.label" class="label">
         {{ property.label }}
       </div>
-      <div v-if="property.value" class="value">
+      <div v-if="property.value !== null" class="value">
         {{ property.value }}
       </div>
     </div>

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

@@ -104,45 +104,46 @@ export const REGISTRY_SCAN_HISTORY_TABLE = [
     name: "errors",
     labelKey: "imageScanner.registries.configuration.scanTable.header.error",
     value: "status.statusResult.message",
+    formatter: "ScanErrorCell",
     sort: "errors",
   },
 ];
 
 export const VEX_MANAGEMENT_TABLE = [
-    {
-        name:          "_status",
-        labelKey:      "imageScanner.vexManagement.table.headers.status",
-        value:         "_status",
-        getValue:      (row: any) => row._status,
-        formatter:     "VexStatusCellBadge",
-        sort:          "_status",
-    },
-    {
-        name:          "name",
-        labelKey:      "imageScanner.vexManagement.table.headers.name",
-        value:         "name",
-        formatter:     "VexNameLink",
-        sort:          "name",
-    },
-    {
-        name:          "uri",
-        labelKey:      "imageScanner.vexManagement.table.headers.uri",
-        value:         "uri",
-        formatter:     "UriExternalLink",
-        sort:          "uri",
-    },
-    {
-        name:          "createdBy",
-        labelKey:      "imageScanner.vexManagement.table.headers.createdBy",
-        value:         "createdBy",
-        sort:          "createdBy",
-    },
-    {
-        name:          "updated",
-        labelKey:      "imageScanner.vexManagement.table.headers.updated",
-        value:         "updated",
-        getValue:      (row: any) => row.updated,
-        formatter:     "VexDateFormatter",
-        sort:          "updated",
-    }
+  {
+    name: "_status",
+    labelKey: "imageScanner.vexManagement.table.headers.status",
+    value: "_status",
+    getValue: (row: any) => row._status,
+    formatter: "VexStatusCellBadge",
+    sort: "_status",
+  },
+  {
+    name: "name",
+    labelKey: "imageScanner.vexManagement.table.headers.name",
+    value: "name",
+    formatter: "VexNameLink",
+    sort: "name",
+  },
+  {
+    name: "uri",
+    labelKey: "imageScanner.vexManagement.table.headers.uri",
+    value: "uri",
+    formatter: "UriExternalLink",
+    sort: "uri",
+  },
+  {
+    name: "createdBy",
+    labelKey: "imageScanner.vexManagement.table.headers.createdBy",
+    value: "createdBy",
+    sort: "createdBy",
+  },
+  {
+    name: "updated",
+    labelKey: "imageScanner.vexManagement.table.headers.updated",
+    value: "updated",
+    getValue: (row: any) => row.updated,
+    formatter: "VexDateFormatter",
+    sort: "updated",
+  },
 ];

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

@@ -0,0 +1,83 @@
+<script>
+import { REGISTRY_STATUS } from '@sbombastic-image-vulnerability-scanner/types';
+
+export default {
+  props: {
+    value: {
+      type:    String,
+      required: true
+    },
+    row: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      failedStatus: REGISTRY_STATUS.FAILED
+    }
+  }
+};
+</script>
+
+<template>
+    <div v-if="row && row.status.statusResult.type.toLowerCase() === failedStatus" class="scan-error-cell">
+        <div class="dot failed"></div>
+        <div class="status">{{ value }}</div>
+    </div>
+    <div v-else class="scan-error-cell">
+      <div class="status text-muted">{{ t('imageScanner.general.none') }}</div>  
+    </div>
+</template>
+
+<style lang="scss" scoped>
+    .scan-error-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/l10n/en-us.yaml

@@ -128,6 +128,7 @@ imageScanner:
   general:
     refresh: Refresh data
     ago: ago
+    none: none
 
 typeLabel:
   sbombastic.rancher.io.registry: Registries configuration