Feat: Registries configuration - Detail: Implement action buttons

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

@@ -1,6 +1,5 @@
 <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 {
@@ -9,59 +8,15 @@
       ResourceTable
     },
     props: {
-      registry: {
-        type: Object,
+      scanHistory: {
+        type: Array,
         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;
-          });
-
-          scanJobs.forEach((rec) => {
-            this.scanHistory.push({
-              ...rec,
-              status: {
-                ...rec.status,
-                statusResult: rec.status.conditions.filter(condition => {
-                  return condition.status === "True";
-                })[0] || {
-                  type: "Pending",
-                  lastTransitionTime: null,
-                }
-              }
-            })
-          });
-        }
-      }
     }
   }
 </script>

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

@@ -15,19 +15,20 @@
           </span>
         </div>
         <div class="resource-header-actions">
-          <button class="btn role-secondary">
+          <button 
+            class="btn role-secondary"
+            aria-label="Refresh data"
+            type="button"
+            @click="loadData(true)">
             <i class="icon icon-refresh"></i>
             {{ t('imageScanner.general.refresh') }}
           </button>
-          <button class="btn role-primary">
-            <i class="icon icon-play"></i>
-            {{ t('imageScanner.registries.configuration.scan') }}
-          </button>
+          <ScanButton :selectedRegistries="[{name: $route.params.id, namespace: $route.params.ns}]" :reloadFn="loadData" />
         </div>
       </div>
       <RancherMeta :properties="registryMetadata" />
     </div>
-    <RegistryDetailScanTable :registry="registry" />
+    <RegistryDetailScanTable :scanHistory="scanHistory" />
   </div>
 </template>
 
@@ -37,8 +38,8 @@
   import ResourceTable from "@shell/components/ResourceTable";
   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';
+  import ScanButton from './common/ScanButton.vue';
 
   export default {
     name: 'registryDetails',
@@ -47,66 +48,75 @@
       ResourceTable,
       RancherMeta,
       RegisterStatusBadge,
-      RegistryDetailScanTable
+      RegistryDetailScanTable,
+      ScanButton
     },
     data() {
       return {
         PRODUCT_NAME,
         RESOURCE,
         PAGE,
-        registry: null,
         registryStatus: null,
         registryMetadata: [],
+        scanHistory: [],
       }
     },
     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 = [
-        {
-          type: 'text',
-          label: this.t('imageScanner.registries.configuration.meta.registry'),
-          value: registry.spec.uri
-        },
-        {
-          type: 'text',
-          label: this.t('imageScanner.registries.configuration.meta.repositories'),
-          value: registry.spec.repositories?.length || 0
-        },
-        {
-          type: 'text',
-          label: this.t('imageScanner.registries.configuration.meta.schedule')
-        },
-        {
-          type: 'text',
-          label: this.t('imageScanner.registries.configuration.meta.namespace'),
-          value: registry.metadata.namespace
-        },
-        {
-          type: 'tags',
-          tags: registry.spec.repositories || []
-        },
-        {
-          type: 'text',
-          value: registry.metadata.schedule || '',
-        }
-      ];
-
-      this.registry = registry;
+      await this.loadData();      
     },
     methods: {
+      async loadData(isForceLoading = false) {
+        await this.$store.dispatch('cluster/find', { type: RESOURCE.REGISTRY, id: `${this.$route.params.ns}/${this.$route.params.id}`, opt: {force: isForceLoading} });
+        if (this.$store.getters['cluster/canList'](RESOURCE.SCAN_JOB)) {
+          await this.$store.dispatch('cluster/findAll', { type: RESOURCE.SCAN_JOB, opt: {force: isForceLoading} });
+        }
+
+        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) => {
+          return rec.spec.registry === registry.metadata.name;
+        });
+
+        this.registryStatus = this.getRegistryStatus(registry);
+        this.registryMetadata = [
+          {
+            type: 'text',
+            label: this.t('imageScanner.registries.configuration.meta.registry'),
+            value: registry.spec.uri
+          },
+          {
+            type: 'text',
+            label: this.t('imageScanner.registries.configuration.meta.repositories'),
+            value: registry.spec.repositories?.length || 0
+          },
+          {
+            type: 'text',
+            label: this.t('imageScanner.registries.configuration.meta.schedule')
+          },
+          {
+            type: 'text',
+            label: this.t('imageScanner.registries.configuration.meta.namespace'),
+            value: registry.metadata.namespace
+          },
+          {
+            type: 'tags',
+            tags: registry.spec.repositories || []
+          },
+          {
+            type: 'text',
+            value: registry.metadata.schedule || '',
+          }
+        ];
+
+        this.scanHistory = scanJobs.map((rec) => {
+          rec.status.statusResult = rec.status.conditions.filter(condition => {
+            return condition.status === "True";
+          })[0] || {
+            type: "Pending",
+            lastTransitionTime: null,
+          };
+          return rec;
+        });
+      },
       getRegistryStatus(registry) {
         if (!registry || !registry.status || !registry.status.conditions || !registry.status.conditions.length) {
           return null;