fix(registries): Fix UX/UI bugs for Registries Configuration - Detail page #118

Author: rushk014

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/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:
@@ -165,6 +165,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) {