change VEX Management Overview to use real data

Author: NickChungSUSE

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

@@ -1,6 +1,6 @@
 <template>
   <div class="badge" :class="statusClass">
-    <div v-if="status" class="text">{{ t(`imageScanner.enum.status.${status.toLowerCase()}`) }}</div>
+    <div class="text">{{ t(`imageScanner.enum.status.${enabled? 'enabled' : 'disabled'}`) }}</div>
   </div>
 
 </template>
@@ -10,21 +10,13 @@ import { VEX_STATUS } from "@sbombastic-image-vulnerability-scanner/types";
 export default {
   name: 'VexStatusBadge',
   props: {
-    status: {
-      type: String,
-      default: ''
+    enabled: {
+      type: Boolean
     }
   },
   computed: {
     statusClass() {
-      switch ((this.status || '').toLowerCase()) {
-      case VEX_STATUS.ENABLED:
-        return 'enabled';
-      case VEX_STATUS.DISABLED:
-        return 'disabled';
-      default:
-        return '';
-      }
+      return this.enabled ? VEX_STATUS.ENABLED: VEX_STATUS.DISABLED;
     }
   }
 };

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

@@ -110,40 +110,38 @@ export const REGISTRY_SCAN_HISTORY_TABLE = [
 ];
 
 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:         "spec.enabled",
+        formatter:     "VexStatusCellBadge",
+        sort:          "spec.enabled",
+    },
+    {
+        name:          "name",
+        labelKey:      "imageScanner.vexManagement.table.headers.name",
+        value:         "metadata.name",
+        formatter:     "VexNameLink",
+        sort:          "metadata.name",
+    },
+    {
+        name:          "uri",
+        labelKey:      "imageScanner.vexManagement.table.headers.uri",
+        value:         "spec.url",
+        formatter:     "UriExternalLink",
+        sort:          "spec.url",
+    },
+    {
+        name:          "createdBy",
+        labelKey:      "imageScanner.vexManagement.table.headers.createdBy",
+        value:         (row: any) => row?.metadata?.generation === 1 ? 'Rancher' : 'Manual entry',
+        sort:          "metadata.generation",
+    },
+    {
+        name:          "updated",
+        labelKey:      "imageScanner.vexManagement.table.headers.updated",
+        value:      (row: any) => row?.metadata?.creationTimestamp || '',
+        formatter:     "VexDateFormatter",
+        sort:          "metadata.creationTimestamp",
+    }
 ];

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

@@ -6,13 +6,13 @@ export default {
   },
   props: {
     value: {
-      type:    String,
+      type:    Boolean,
       required: true
     },
   },
 };
 </script>
 
 <template>
-  <VexStatusBadge :status="value.toLowerCase()" />
+  <VexStatusBadge :enabled="value" />
 </template>