Feat: Registries configuration - Detail: Refactor Scan History table

Author: rushk014

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,88 @@
+<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,
+          };
+          rec.status['scannedImagesCount'] = this.$route.params.id === 'kw-controller' ? 1000 : 500;
+          rec.status['imagesCount'] = 2000;
+          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,
+            };
+            rec.status['scannedImagesCount'] = this.$route.params.id === 'kw-controller' ? 1000 : 500;
+            rec.status['imagesCount'] = 2000;
+            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/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>