Feat: Registries configuration - Detail: Complete Scan History table

package.json

@@ -8,7 +8,7 @@
   "dependencies": {
     "@kubernetes/client-node": "^1.3.0",
     "@rancher/components": "^0.3.0-alpha.1",
-    "@rancher/shell": "^3.0.4",
+    "@rancher/shell": "3.0.5-rc.7",
     "vue": "^3.5.17",
     "vue-router": "^4.5.0",
     "vuex": "^4.1.0"

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

@@ -0,0 +1,84 @@
+<script>
+  import { REGISTRY_SCAN_HISTORY_TABLE } from "@sbombastic-image-vulnerability-scanner/config/table-headers";
+  import { RESOURCE } from "@sbombastic-image-vulnerability-scanner/types";
+  import ResourceTable from "@shell/components/ResourceTable";
+
+  export default {
+    name: 'RegistryDetailScanTable',
+    components: {
+      ResourceTable
+    },
+    props: {
+      registry: {
+        type: Object,
+        required: true
+      }
+    },
+    data() {
+      return {
+        scanHistory: [],
+        headers: REGISTRY_SCAN_HISTORY_TABLE
+      }
+    },
+    async mounted() {
+      await this.$store.dispatch('cluster/findAll', { type: RESOURCE.SCAN_JOB });
+
+      if (this.registry) {
+        let scanJobs = this.$store.getters['cluster/all'](RESOURCE.SCAN_JOB).filter((rec) => {
+          return rec.spec.registry === this.registry.metadata.name;
+        });
+
+        this.scanHistory = scanJobs.map((rec) => {
+          rec.status.statusResult = rec.status.conditions.filter(condition => {
+            return condition.status === "True";
+          })[0] || {
+            type: "Pending",
+            lastTransitionTime: null,
+          };
+          return rec;
+        });
+      }
+    },
+    watch: {
+      async registry(newRegistry) {
+        if (newRegistry) {
+          let scanJobs = this.$store.getters['cluster/all'](RESOURCE.SCAN_JOB).filter((rec) => {
+            return rec.spec.registry === newRegistry.metadata.name;
+          });
+
+          this.scanHistory = scanJobs.map((rec) => {
+            rec.status.statusResult = rec.status.conditions.filter(condition => {
+              return condition.status === "True";
+            })[0] || {
+              type: "Pending",
+              lastTransitionTime: null,
+            };
+            return rec;
+          });
+        }
+      }
+    }
+  }
+</script>
+
+<template>
+  <div class="registry-detail-scan-table">
+    Recent scans
+    <ResourceTable
+      :headers="headers"
+      :rows="scanHistory"
+      :namespaced="false"
+      :rowActions="false"
+      :search="false"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .registry-detail-scan-table {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    width: 100%;
+  }
+</style>

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

@@ -27,15 +27,7 @@
       </div>
       <RancherMeta :properties="registryMetadata" />
     </div>
-    Recent scans
-    <ResourceTable
-      :headers="headers"
-      :rows="scanHistory"
-      :namespaced="false"
-      :rowActions="false"
-      :search="false"
-      class="table"
-    />
+    <RegistryDetailScanTable :registry="registry" />
   </div>
 </template>
 
@@ -46,6 +38,7 @@
   import RancherMeta from './common/RancherMeta.vue';
   import RegisterStatusBadge from './common/RegisterStatusBadge.vue';
   import { REGISTRY_SCAN_HISTORY_TABLE } from '@sbombastic-image-vulnerability-scanner/config/table-headers';
+  import RegistryDetailScanTable from './RegistryDetailScanTable.vue';
 
   export default {
     name: 'registryDetails',
@@ -54,31 +47,22 @@
       ResourceTable,
       RancherMeta,
       RegisterStatusBadge,
+      RegistryDetailScanTable
     },
     data() {
       return {
         PRODUCT_NAME,
         RESOURCE,
+        registry: null,
         registryStatus: null,
         registryMetadata: [],
-        scanHistory: [],
-        headers: REGISTRY_SCAN_HISTORY_TABLE
       }
     },
     async fetch() {
 
       await this.$store.dispatch('cluster/find', { type: RESOURCE.REGISTRY, id: `${this.$route.params.ns}/${this.$route.params.id}` });
       let registry = this.$store.getters['cluster/byId'](RESOURCE.REGISTRY, `${this.$route.params.ns}/${this.$route.params.id}`);
 
-
-      await this.$store.dispatch('cluster/findAll', { type: RESOURCE.SCAN_JOB });
-      let scanJobs = this.$store.getters['cluster/all'](RESOURCE.SCAN_JOB);
-
-      // filter scan jobs for the current registry
-      scanJobs = scanJobs.filter((job) => {
-        return job.spec.registry === registry.metadata.name;
-      });
-
       this.registryStatus = this.getRegistryStatus(registry);
       this.registryMetadata = [
         {
@@ -89,7 +73,7 @@
         {
           type: 'text',
           label: this.t('imageScanner.registries.configuration.meta.repositories'),
-          value: registry.spec.repositories.length
+          value: registry.spec.repositories?.length || 0
         },
         {
           type: 'text',
@@ -110,19 +94,7 @@
         }
       ];
 
-      this.scanHistory = scanJobs.map((rec) => {
-        rec.status.statusResult = rec.status.conditions.filter(condition => {
-          return condition.status === "True";
-        })[0] || {
-          type: "Pending",
-          lastTransitionTime: null,
-        };
-        rec.status['scannedImagesCount'] = this.$route.params.id === 'kw-controller' ? 1000 : 500;
-        rec.status['imagesCount'] = 2000;
-        return rec;
-      });
-
-      console.log("Scan history:", this.scanHistory);
+      this.registry = registry;
     },
     methods: {
       getRegistryStatus(registry) {
@@ -150,10 +122,6 @@
     gap: 24px;
     flex: 1 0 0;
     align-self: stretch;
-
-    .table {
-      width: 100%;
-    }
   }
 
   .about {
@@ -202,7 +170,7 @@
         .resource-header-description {
           /* layout */
           display: flex;
-          width: 900px;
+          max-width: 900px;
           height: 21px;
           flex-direction: column;
           justify-content: center;

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/detail/sbombastic.rancher.io.registry.vue

@@ -1,37 +1,29 @@
 <script>
-  import CreateEditView from '@shell/mixins/create-edit-view';
-  import RegistryDetails from '@sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue';
-  import { RESOURCE } from '@sbombastic-image-vulnerability-scanner/types';
-  import { _CREATE } from '@shell/config/query-params';
-  import Loading from '@shell/components/Loading';
+  import DetailPage from '@rancher/shell/components/Resource/Detail/Page.vue';
+  import Metadata from '@rancher/shell/components/Resource/Detail/Metadata/index.vue';
+  import RegistryDetailScanTable from '@sbombastic-image-vulnerability-scanner/components/RegistryDetailScanTable.vue';
+
 
   export default {
     name: 'CruRegistry',
-
     props: {
-      mode: {
-        type:    String,
-        default: _CREATE,
-      },
       value: {
-        type:     Object,
-        required: true,
-      },
+        type: Object,
+        required: true
+      }
     },
-
-    components: { RegistryDetails, Loading },
-
-    mixins: [CreateEditView],
-
     data() {
-      return { resource: RESOURCE.REGISTRY };
-    }
+      return {
+      }
+    },
+    components: { DetailPage, Metadata, RegistryDetailScanTable },
   };
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
-  <div v-else>
-    {{ value | escapeHtml }}
-  </div>
+  <DetailPage>
+    <template #bottom-area>
+      <RegistryDetailScanTable :registry="value" />
+    </template>
+  </DetailPage>
 </template>