Update Registry details UI

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

@@ -1,11 +1,11 @@
 <script>
   import { REGISTRY_SCAN_HISTORY_TABLE } from "@sbombastic-image-vulnerability-scanner/config/table-headers";
-  import ResourceTable from "@shell/components/ResourceTable";
+  import SortableTable from "@shell/components/SortableTable";
 
   export default {
     name: 'RegistryDetailScanTable',
     components: {
-      ResourceTable
+      SortableTable
     },
     props: {
       scanHistory: {
@@ -24,12 +24,15 @@
 <template>
   <div class="registry-detail-scan-table">
     Recent scans
-    <ResourceTable
-      :headers="headers"
-      :rows="scanHistory"
+    <SortableTable
+      :has-advanced-filtering="false"
       :namespaced="false"
-      :rowActions="false"
+      :row-actions="false"
+      :table-actions="false"
       :search="false"
+      :headers="headers"
+      :rows="scanHistory"
+      :default-sort-by="'since'"
     />
   </div>
 </template>

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

@@ -80,6 +80,7 @@
         if (this.$store.getters['cluster/canList'](RESOURCE.SCAN_JOB)) {
           await this.$store.dispatch('cluster/findAll', { type: RESOURCE.SCAN_JOB, opt: {force: isForceLoading} });
         }
+        this.scanHistory = [];
 
         let registry = this.$store.getters['cluster/byId'](RESOURCE.REGISTRY, `${this.$route.params.ns}/${this.$route.params.id}`);
         let scanJobs = this.$store.getters['cluster/all'](RESOURCE.SCAN_JOB).filter((rec) => {
@@ -90,8 +91,8 @@
         this.registryMetadata = [
           {
             type: 'text',
-            label: this.t('imageScanner.registries.configuration.meta.registry'),
-            value: registry.spec.uri
+            label: this.t('imageScanner.registries.configuration.meta.namespace'),
+            value: registry.metadata.namespace
           },
           {
             type: 'text',
@@ -104,16 +105,17 @@
           },
           {
             type: 'text',
-            label: this.t('imageScanner.registries.configuration.meta.namespace'),
-            value: registry.metadata.namespace
+            label: this.t('imageScanner.registries.configuration.meta.uri'),
+            value: registry.spec.uri
           },
           {
             type: 'tags',
             tags: registry.spec.repositories || []
           },
           {
             type: 'text',
-            value: registry.spec.scanInterval || '',
+            value: registry.spec.scanInterval ? 
+              this.t('imageScanner.general.schedule', { i: registry.spec.scanInterval }) : '',
           }
         ];
 
@@ -133,6 +135,8 @@
           })
         });
         this.registry = registry;
+        this.scanHistory = this.scanHistory.sort((a, b) => new Date(b.status?.statusResult?.lastTransitionTime) - new Date(a.status?.statusResult?.lastTransitionTime));
+        this.registryStatus = this.scanHistory[0]?.status?.statusResult?.type.toLowerCase();
       },
       getRegistryStatus(registry) {
         if (!registry || !registry.status || !registry.status.conditions || !registry.status.conditions.length) {

pkg/sbombastic-image-vulnerability-scanner/detail/sbombastic.rancher.io.vexhub.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import DetailPage from '@shell/components/Resource/Detail/Page.vue';
 import Masthead from '@shell/components/Resource/Detail/Masthead/index.vue';
+import Date from '@shell/components/formatter/Date.vue';
 import { useStore } from 'vuex';
 import { useI18n } from '@shell/composables/useI18n';
 import UriExternalLink from '@sbombastic-image-vulnerability-scanner/formatters/UriExternalLink.vue';
@@ -21,6 +22,7 @@ const defaultMastheadProps = computed(() => {
       resourceName: vexhub.metadata.name,
       resourceTypeLabel: t('imageScanner.vexManagement.title'),
       resourceTo: vexhub.listLocation,
+      description: t('imageScanner.vexManagement.detail.description'),
       badge: {
         color: vexhub.spec.enabled ? ('bg-success' as 'bg-success') : ('bg-error' as 'bg-error'),
         label: t(`imageScanner.enum.status.${vexhub.spec.enabled ? 'enabled' : 'disabled'}`)
@@ -47,11 +49,17 @@ const defaultMastheadProps = computed(() => {
         },
         {
           label: 'Last sync',
-          value: null
+          value: undefined, // TODO: Add last sync time when backend supports it
         },
         {
           label: 'Updated',
-          value: vexhub.metadata.creationTimestamp
+          value: vexhub.metadata.creationTimestamp,
+          valueOverride: {
+            component: Date,
+            props: {
+              value: vexhub.metadata.creationTimestamp,
+            }
+          }
         }
       ],
       annotations: [],

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

@@ -50,8 +50,8 @@ imageScanner:
             label: Scan Interval
       scan: Start Scan
       meta:
-        registry: Registry
         namespace: Namespace
+        uri: URI
         repositories: Repositories
         schedule: Schedule
       scanTable:
@@ -136,6 +136,8 @@ imageScanner:
       enable:
         label: Enabled
         tooltip: Controls whether this VEX entry is active in vulnerability assessments.
+    detail:
+      description: VEX management hub description, if any
   enum:
     cve:
       critical: Critical
@@ -165,6 +167,7 @@ imageScanner:
     none: none
     error: Error
     at: at
+    schedule: Every {i}
 
 typeLabel:
   sbombastic.rancher.io.registry: Registries configuration

pkg/sbombastic-image-vulnerability-scanner/models/sbombastic.rancher.io.registry.js

@@ -5,7 +5,7 @@ import { _CREATE } from '@shell/config/query-params';
 export default class Registry extends SteveModel {
   get _availableActions() {
     console.log("Registry _availableActions");
-    const out = super._availableActions.filter(action => !['download','downloadYaml'].includes(action.action));
+    const out = super._availableActions.filter(action => !['showConfiguration','download','downloadYaml'].includes(action.action));
 
     // In details page, we don't want to show the scan action
     if (this.$rootState.targetRoute && 'id' in this.$rootState.targetRoute.params) {

pkg/sbombastic-image-vulnerability-scanner/models/sbombastic.rancher.io.vexhub.js

@@ -14,7 +14,8 @@ export default class SbombasticRancherIoVexhub extends SteveModel {
 			'downloadyaml',
 			'viewYaml',
 			'goToViewYaml',
-			'viewInApi'
+			'viewInApi',
+			'showConfiguration',
 		]);
 		out = out.filter((a) => !a?.action || !remove.has(a.action));