fix: Fix errors, vex overview layout, and customize action label

NickChungSUSE · xingzhang-suse · commit 65f932e30120 · 2025-09-10T07:07:16.000+08:00
diff --git a/pkg/sbombastic-image-vulnerability-scanner/config/sbombastic-image-vulnerability-scanner.ts b/pkg/sbombastic-image-vulnerability-scanner/config/sbombastic-image-vulnerability-scanner.ts
@@ -68,6 +68,19 @@ export function init($plugin: any, store: any) {
     },
   });
 
+  virtualType({
+    labelKey: "imageScanner.vexManagement.title",
+    name: PAGE.VEX_MANAGEMENT,
+    namespaced: false,
+    route: {
+      name: `c-cluster-${PRODUCT_NAME}-${PAGE.VEX_MANAGEMENT}`,
+      params: {
+        product: PRODUCT_NAME,
+      },
+      meta: { pkg: PRODUCT_NAME, product: PRODUCT_NAME },
+    },
+  });
+
   virtualType({
     label: "Components Demo",
     name: "demo",
@@ -84,13 +97,14 @@ export function init($plugin: any, store: any) {
   weightType(PAGE.DASHBOARD, 98, true);
   weightType(PAGE.IMAGE_OVERVIEW, 97, true);
   weightType(PAGE.VULNERABILITY_OVERVIEW, 96, true);
+  weightType(PAGE.VEX_MANAGEMENT, 95, true);
 
   basicType([
       PAGE.DASHBOARD,
     PAGE.IMAGE_OVERVIEW,
     PAGE.VULNERABILITY_OVERVIEW,
   ]);
   // Prepend spaces on group name, as Rancher 2.12 render group name algin with sidemenu
-  basicType([PAGE.REGISTRIES, PAGE.VEX_MANAGEMENT, RESOURCE.VEX_HUB], '&nbsp;&nbsp;&nbsp;&nbsp;Advanced');
+  basicType([PAGE.REGISTRIES, PAGE.VEX_MANAGEMENT], '&nbsp;&nbsp;&nbsp;&nbsp;Advanced');
 
 }
diff --git a/pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml b/pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml
@@ -205,6 +205,7 @@ imageScanner:
       enable: Enable
       disable: Disable
       delete: Delete
+      editConfiguration: Edit configuration
     actions:
       clone: Clone
       editConfig: Edit configuration
diff --git a/pkg/sbombastic-image-vulnerability-scanner/list/sbombastic.rancher.io.vexhub.vue b/pkg/sbombastic-image-vulnerability-scanner/list/sbombastic.rancher.io.vexhub.vue
@@ -1,10 +1,5 @@
 <template>
   <div>
-
-    <Banner color="info">
-      {{t('imageScanner.vexManagement.description')}}
-    </Banner>
-
     <ResourceTable
         ref="rt"
         :schema="schema"
@@ -23,7 +18,6 @@
 <script>
 import { RESOURCE } from "@pkg/types";
 import ResourceTable from "@shell/components/ResourceTable";
-import Banner from '@components/Banner/Banner.vue';
 import RegisterStatusBadge from "@pkg/components/common/RegisterStatusBadge";
 import { VEX_MANAGEMENT_TABLE } from "@pkg/config/table-headers";
 import {
@@ -33,7 +27,6 @@ import {
 export default {
   name: 'VexManagement',
   components: {
-    Banner,
     ResourceTable,
     RegisterStatusBadge,
   },
@@ -63,123 +56,15 @@ export default {
         await m.save();
       }));
       await this.$fetch();
-    },
-    createVexHub() {
-      this.$router.push({
-        name: `${ PRODUCT_NAME }-c-cluster-resource-create`,
-        params: {
-          resource: RESOURCE.VEX_HUB,
-          cluster: this.$route.params.cluster,
-          product: PRODUCT_NAME
-        }
-      });
     }
   },
   computed: {
     schema() {
       return this.$store.getters['cluster/schemaFor']?.(RESOURCE.VEX_HUB);
-    },
-    showMasthead(){
-      const showMasthead = getters[`type-map/optionsFor`](this.resource).showListMasthead;
-      console.log("=====showMasthead", showMasthead, this.resource);
-      return false;
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
-.header-section {
-  display: flex;
-  align-items: flex-start;
-  gap: 24px;
-  align-self: stretch;
-  margin-bottom: 24px;
-
-  .header-left {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    gap: 8px;
-    flex: 1 0 0;
-  }
-
-  .title-wrap {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    align-self: stretch;
-
-    .title {
-      color: #141419;
-      font-family: Lato;
-      font-size: 24px;
-      font-style: normal;
-      font-weight: 600;
-      line-height: 32px;
-    }
-  }
-
-  .description {
-    max-width: 900px;
-    align-self: stretch;
-    color: #717179;
-    font-family: Lato;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 21px;
-  }
-
-  .header-right {
-    display: flex;
-    align-items: flex-end;
-    justify-content: end;
-    flex: 1 0 0;
-    gap: 24px;
-  }
-
-  .header-btn {
-    height: 40px;
-  }
-}
-
-// Status cell centering
-.status-cell {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  height: 100%;
-  min-height: 48px;
-  padding: 8px 0;
-
-  :deep(.badge) {
-    margin: 0;
-    vertical-align: middle;
-  }
-}
-
-.uri-link .icon-external-link {
-  margin-left: 6px;
-  opacity: 0.7;
-}
-
-/* Bulk header action buttons - align icons and text */
-.bulk-actions {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.bulk-actions .btn {
-  display: inline-flex;
-  align-items: center;
-}
-
-.bulk-actions .btn i {
-  margin-right: 6px;
-  line-height: 1;
-}
 </style>
diff --git a/pkg/sbombastic-image-vulnerability-scanner/models/VexHub.js b/pkg/sbombastic-image-vulnerability-scanner/models/VexHub.js
@@ -0,0 +1 @@
+ 
diff --git a/pkg/sbombastic-image-vulnerability-scanner/models/sbombastic.rancher.io.vexhub.js b/pkg/sbombastic-image-vulnerability-scanner/models/sbombastic.rancher.io.vexhub.js
@@ -19,6 +19,19 @@ export default class SbombasticRancherIoVexhub extends SteveModel {
 		]);
 		out = out.filter((a) => !a?.action || !remove.has(a.action));
 
+		// Customize the edit action label
+		out = out.map((action) => {
+			// Check for various possible edit action names
+			if (action?.action === 'edit' || action?.action === 'goToEdit' || action?.action === 'editConfig') {
+				return {
+					...action,
+					label: this.t('imageScanner.vexManagement.buttons.editConfiguration') || 'Edit configuration'
+				};
+			}
+
+			return action;
+		});
+
 		const isEnabled = !!this.spec?.enabled;
 		const toggle = this.toggle;
 
diff --git a/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/VexManagement.vue b/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/VexManagement.vue
@@ -21,67 +21,32 @@
       </div>
     </div>
     
-    <ResourceTable
-      ref="rt"
-      :schema="schema"
-      :rows="rows"
-      :namespaced="false"
-      :headers="headers"
-      :key-field="'id'"
-      :table-actions="true"
-      :use-query-params-for-simple-filtering="true"
-      :force-update-live-and-delayed="forceUpdateKey"
-    >
-    </ResourceTable>
+    <VexHubList />
   </div>
 </template>
 
 <script>
 import { RESOURCE } from "@pkg/types";
-import ResourceTable from "@shell/components/ResourceTable";
-import RegisterStatusBadge from "@pkg/components/common/RegisterStatusBadge";
-import { VEX_MANAGEMENT_TABLE } from "@pkg/config/table-headers";
+import VexHubList from "@pkg/list/sbombastic.rancher.io.vexhub.vue";
 import {
   PRODUCT_NAME,
 } from "@pkg/types";
 
 export default {
   name: 'VexManagement',
   components: {
-    ResourceTable,
-    RegisterStatusBadge,
-  },
-  data() {
-    return {
-      PRODUCT_NAME: PRODUCT_NAME,
-      headers: VEX_MANAGEMENT_TABLE,
-      disabled: false,
-      selectedRows: [],
-      filterText: '',
-      rows: [],
-      forceUpdateKey: 0
-    }
-  },
-  async fetch() {
-    await this.$store.dispatch('cluster/findAll', { type: RESOURCE.VEX_HUB });
-    const vexhubsCRD = this.$store.getters['cluster/all']?.(RESOURCE.VEX_HUB);
-    this.rows = vexhubsCRD || [];
+    VexHubList,
   },
   methods: {
-    rowWithActions(r) { return r; },
-    async switchStatus(desired, selected) {
-      const resources = selected && selected.length ? selected : (this.selectedRows || []);
-      if (!resources.length) return;
-      await Promise.all(resources.map(async (m) => {
-        m.spec = { ...(m.spec || {}), enabled: desired };
-        await m.save();
-      }));
-      await this.$fetch();
-    }
-  },
-  computed: {
-    schema() {
-      return this.$store.getters['cluster/schemaFor']?.(RESOURCE.VEX_HUB);
+    createVexHub() {
+      this.$router.push({
+        name: `${ PRODUCT_NAME }-c-cluster-resource-create`,
+        params: {
+          resource: RESOURCE.VEX_HUB,
+          cluster: this.$route.params.cluster,
+          product: PRODUCT_NAME
+        }
+      });
     }
   }
 }
@@ -150,41 +115,4 @@ export default {
     height: 40px;
   }
 }
-
-// Status cell centering
-.status-cell {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  height: 100%;
-  min-height: 48px;
-  padding: 8px 0;
-  
-  :deep(.badge) {
-    margin: 0;
-    vertical-align: middle;
-  }
-}
-
-.uri-link .icon-external-link {
-  margin-left: 6px;
-  opacity: 0.7;
-}
-
-/* Bulk header action buttons - align icons and text */
-.bulk-actions {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.bulk-actions .btn {
-  display: inline-flex;
-  align-items: center;
-}
-
-.bulk-actions .btn i {
-  margin-right: 6px;
-  line-height: 1;
-}
 </style>
diff --git a/pkg/sbombastic-image-vulnerability-scanner/routes/sbombastic-image-vulnerability-scanner-routes.ts b/pkg/sbombastic-image-vulnerability-scanner/routes/sbombastic-image-vulnerability-scanner-routes.ts
@@ -6,9 +6,11 @@ import Vulnerabilities from "@pkg/pages/c/_cluster/sbombastic-image-vulnerabilit
 import CreateResource from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/_resource/create.vue";
 import ListResource from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/_resource/index.vue";
 import Entry from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/index.vue";
+import VexManagement from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/VexManagement.vue";
 import {
   PRODUCT_NAME,
   PAGE,
+  RESOURCE,
 } from "@pkg/types";
 
 const routes = [
@@ -42,6 +44,11 @@ const routes = [
     path: `/c/:cluster/${PRODUCT_NAME}/${PAGE.REGISTRIES}/:ns/:id`,
     component: RegistryDetails,
   },
+  {
+    name: `c-cluster-${PRODUCT_NAME}-${PAGE.VEX_MANAGEMENT}`,
+    path: `/c/:cluster/${PRODUCT_NAME}/${PAGE.VEX_MANAGEMENT}`,
+    component: VexManagement,
+  },
   {
     name:      `${ PRODUCT_NAME }-c-cluster-resource-create`,
     path:      `/${ PRODUCT_NAME }/c/:cluster/:resource/create`,
@@ -57,6 +64,20 @@ const routes = [
     meta:      {
       product: PRODUCT_NAME,
     },
+    beforeEnter: (to: any, from: any, next: any) => {
+      // Redirect VexHub resource to custom VexManagement page
+      if (to.params.resource === RESOURCE.VEX_HUB) {
+        next({
+          name: `c-cluster-${PRODUCT_NAME}-${PAGE.VEX_MANAGEMENT}`,
+          params: {
+            cluster: to.params.cluster,
+            product: PRODUCT_NAME
+          }
+        });
+      } else {
+        next();
+      }
+    }
   },
 ];
 
