Use regular page instead of resource page for registries configuration, Modified back routing on edit and detail page.

Author: xingzhang-suse

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

@@ -5,7 +5,7 @@
         <div class="resource-header">
           <div class="resource-header-name-state">
             <span class="resource-header-name">
-              <RouterLink :to="`/c/${this.$route.params.cluster}/${ this.PRODUCT_NAME }/${ this.RESOURCE.REGISTRY }/`">{{ t('imageScanner.registries.title') }}:</RouterLink>
+              <RouterLink :to="`/c/${this.$route.params.cluster}/${ this.PRODUCT_NAME }/${this.PAGE.REGISTRIES}`">{{ t('imageScanner.registries.title') }}:</RouterLink>
               {{ $route.params.id }}
             </span>
             <RegisterStatusBadge :status="registryStatus" />
@@ -33,7 +33,7 @@
 
 <script>
   import { BadgeState } from '@rancher/components';
-  import { PRODUCT_NAME, RESOURCE } from '@sbombastic-image-vulnerability-scanner/types';
+  import { PRODUCT_NAME, RESOURCE, PAGE } from '@sbombastic-image-vulnerability-scanner/types';
   import ResourceTable from "@shell/components/ResourceTable";
   import RancherMeta from './common/RancherMeta.vue';
   import RegisterStatusBadge from './common/RegisterStatusBadge.vue';
@@ -53,6 +53,7 @@
       return {
         PRODUCT_NAME,
         RESOURCE,
+        PAGE,
         registry: null,
         registryStatus: null,
         registryMetadata: [],

pkg/sbombastic-image-vulnerability-scanner/config/sbombastic-image-vulnerability-scanner.ts

@@ -12,6 +12,19 @@ export function init($plugin: IPlugin, store: any) {
       icon: "pod_security",
       inStore: "cluster",
   });
+  
+  virtualType({
+    labelKey: 'imageScanner.registries.title',
+    name: PAGE.REGISTRIES,
+    namespaced: false,
+    route:    {
+        name:   `c-cluster-${PRODUCT_NAME}-${PAGE.REGISTRIES}`,
+        params: {
+            product: PRODUCT_NAME
+        },
+        meta: { pkg: PRODUCT_NAME, product: PRODUCT_NAME }
+    }
+  });
 
   virtualType({
     labelKey: 'imageScanner.images.title',
@@ -72,6 +85,6 @@ export function init($plugin: IPlugin, store: any) {
         //"demo"
     ]);
 
-  basicType([RESOURCE.REGISTRY, PAGE.VEX_MANAGEMENT], 'Advanced');
+  basicType([PAGE.REGISTRIES, PAGE.VEX_MANAGEMENT], 'Advanced');
 
 }

pkg/sbombastic-image-vulnerability-scanner/edit/sbombastic.rancher.io.registry.vue

@@ -14,6 +14,7 @@ import {
   REGISTRY_TYPE_OPTIONS,
   SCAN_INTERVAL_OPTIONS, SCAN_INTERVALS
 } from "@sbombastic-image-vulnerability-scanner/constants/scan-interval-options";
+import { PRODUCT_NAME, PAGE } from "@sbombastic-image-vulnerability-scanner/types";
 
 export default {
   name: 'CruRegistry',
@@ -77,6 +78,44 @@ export default {
     },
   },
 
+  methods: {
+    apply(event) {
+      console.log('finish apply');
+      this.save(event)
+        .then(() => {
+          this.$emit('done');
+        })
+        .catch((e) => {
+          this.errors = e;
+        })
+        .finally(() => {
+          this.$router.push({
+            name: `c-cluster-${PRODUCT_NAME}-${PAGE.REGISTRIES}`,
+            params: {
+              cluster: this.$route.params.cluster,
+              product: PRODUCT_NAME
+            }
+          });
+        });
+    },
+
+    cancel() {
+      console.log('cancel done');
+      this.done();
+      this.$router.push({
+        name: `c-cluster-${PRODUCT_NAME}-${PAGE.REGISTRIES}`,
+        params: {
+          cluster: this.$route.params.cluster,
+          product: PRODUCT_NAME
+        }
+      });
+    },
+    doneRoute() {
+      console.log('doneRoute');
+      return `c-cluster-${PRODUCT_NAME}-${PAGE.REGISTRIES}`;
+    },
+  },
+
   // Set default values for creating a new registry configuration
   created() {
     const spec = this.value.spec;
@@ -100,9 +139,10 @@ export default {
         :subtypes="[]"
         :validation-passed="true"
         :errors="errors"
+        :cancel-event="true"
         @error="(e) => (errors = e)"
-        @finish="save"
-        @cancel="done"
+        @finish="apply"
+        @cancel="cancel"
     >
       <NameNsDescription
           :value="value"

pkg/sbombastic-image-vulnerability-scanner/formatters/PreviousScanCell.vue

@@ -13,13 +13,13 @@ export default {
   },
   methods: {
     getStatusText(row) {
-      return this.t(`imageScanner.enum.status.${row.prevScanStatus.toLowerCase()}`);
+      return this.t(`imageScanner.enum.status.${row.prevScanStatus?.toLowerCase()}`);
     },
     getStatusLabelClass(row) {
-      return row.prevScanStatus.toLowerCase();
+      return row.prevScanStatus?.toLowerCase();
     },
     getStatusDotClass(row) {
-      return `dot ${row.prevScanStatus.toLowerCase()}`;
+      return `dot ${row.prevScanStatus?.toLowerCase()}`;
     }
   }
 };
@@ -32,6 +32,9 @@ export default {
         <div v-if="row.prevProgress">
           <ProgressCell :status="{ progress: row.prevProgress, error: row.error }" />
         </div>
+        <div v-if="row.prevScanStatus.toLowerCase() === 'failed' && row.error">
+          <span class="error-message">|<span style="margin-left: 10px;">{{ t("imageScanner.general.error") }}</span></span>
+        </div>
     </div>
 </template>
 

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

@@ -134,6 +134,7 @@ imageScanner:
     ago: ago
     justNow: Just now
     none: none
+    error: Error
 
 typeLabel:
   sbombastic.rancher.io.registry: Registries configuration

pkg/sbombastic-image-vulnerability-scanner/list/sbombastic.rancher.io.registry.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
     <div>
-      <button
-          class="btn role-secondary"
-          style="position: absolute; top: 80px; right: 120px;"
-          @click="refresh()"
-        >
-          <i class="icon icon-refresh"></i>
-          {{ t('imageScanner.registries.button.refresh') || 'Refresh data' }}
-        </button>
+      <!-- <button
+        class="btn role-secondary"
+        style="position: absolute; top: 80px; right: 120px;"
+        @click="refresh()"
+      >
+        <i class="icon icon-refresh"></i>
+        {{ t('imageScanner.registries.button.refresh') || 'Refresh data' }}
+      </button> -->
     </div>
     <div class="state">State as of <span class="state-date-time">{{ latestUpdateTimeText }}</span></div>
     <div class="summary-section">