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

Author: NickChungSUSE

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

@@ -241,10 +241,10 @@
 import SortableTable from "@shell/components/SortableTable";
 import { BadgeState } from '@components/BadgeState';
 import Checkbox from '@components/Form/Checkbox';
-import ScoreBadge from '@sbombastic-image-vulnerability-scanner/components/common/ScoreBadge';
-import BarChart from '@sbombastic-image-vulnerability-scanner/components/common/BarChart';
-import { VULNERABILITY_DETAILS_TABLE } from "@sbombastic-image-vulnerability-scanner/config/table-headers";
-import { images } from "@sbombastic-image-vulnerability-scanner/data/sbombastic.rancher.io.image";
+import ScoreBadge from '@pkg/components/common/ScoreBadge';
+import BarChart from '@pkg/components/common/BarChart';
+import { VULNERABILITY_DETAILS_TABLE } from "@pkg/config/table-headers";
+import { images } from "@pkg/data/sbombastic.rancher.io.image";
 
 export default {
   name: 'ImageDetails',

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

@@ -98,6 +98,6 @@ export function init($plugin: IPlugin, store: any) {
       //"demo"
   ]);
   // Prepend spaces on group name, as Rancher 2.12 render group name algin with sidemenu
-  basicType([PAGE.REGISTRIES, PAGE.VEX_MANAGEMENT, RESOURCE.VEX_HUB], '    Advanced');
+  basicType([PAGE.REGISTRIES, PAGE.VEX_MANAGEMENT], '    Advanced');
 
 }

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

@@ -196,6 +196,7 @@ imageScanner:
       enable: Enable
       disable: Disable
       delete: Delete
+      editConfiguration: Edit configuration
     actions:
       clone: Clone
       editConfig: Edit configuration

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>

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;
 

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>

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

@@ -2,14 +2,16 @@ import RegistryDetails from "@pkg/components/RegistryDetails.vue";
 import ComponentDemo from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ComponentDemo.vue";
 import Dashboard from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/Dashboard.vue";
 import ImageOverview from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ImageOverview.vue";
-import ImageDetails from "@sbombastic-image-vulnerability-scanner/components/ImageDetails.vue";
+import ImageDetails from "@pkg/components/ImageDetails.vue";
 import RegistriesConfiguration from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/RegistriesConfiguration.vue";
 import Vulnerabilities from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/Vulnerabilities.vue";
 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 VexManagement from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/VexManagement.vue";
 import {
   PRODUCT_NAME,
   PAGE,
+  RESOURCE,
 } from "@pkg/types";
 
 const routes = [
@@ -68,6 +70,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();
+      }
+    }
   },
 ];