Feat: Implement VexHub Add/Edit Page

Author: lsongsuse

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

@@ -52,19 +52,6 @@ export function init($plugin: IPlugin, 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,6 +71,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], '    Advanced');
+  basicType([PAGE.REGISTRIES, RESOURCE.VEX_HUB], '    Advanced');
 
 }

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

@@ -6,7 +6,6 @@ import NameNsDescription from '@shell/components/form/NameNsDescription';
 import CruResource from '@shell/components/CruResource';
 import SelectOrCreateAuthSecret from '@shell/components/form/SelectOrCreateAuthSecret';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import Banner from '@components/Banner/Banner.vue';
 import { Checkbox } from '@components/Form/Checkbox';
 import { MANAGEMENT, NAMESPACE } from '@shell/config/types';
 import {
@@ -25,7 +24,6 @@ export default {
     NameNsDescription,
     CruResource,
     SelectOrCreateAuthSecret,
-    Banner,
     Checkbox,
     LabeledSelect
   },
@@ -123,13 +121,11 @@ export default {
 
 <template>
   <div class="filled-height">
-    <Banner color="info">
-      {{t('imageScanner.registries.configuration.cru.description')}}
-    </Banner>
     <CruResource
         :done-route="doneRoute"
         :mode="mode"
         :resource="value"
+        :description="t('imageScanner.registries.configuration.cru.description')"
         :subtypes="[]"
         :validation-passed="true"
         :errors="errors"

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

@@ -0,0 +1,88 @@
+<script>
+import NameNsDescription from "@shell/components/form/NameNsDescription.vue";
+import CruResource from "@shell/components/CruResource.vue";
+import Banner from "@components/Banner/Banner.vue";
+import { Checkbox } from '@components/Form/Checkbox';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import CreateEditView from "@shell/mixins/create-edit-view";
+import {PAGE, PRODUCT_NAME} from "@sbombastic-image-vulnerability-scanner/types/sbombastic-image-vulnerability-scanner";
+
+export default {
+  name: 'CruVexHub',
+
+  components: {
+    LabeledInput,
+    NameNsDescription,
+    CruResource,
+    Banner,
+    Checkbox,
+  },
+
+  mixins: [CreateEditView],
+
+  data() {
+    if (!this.value.spec) {
+      this.value.spec = {
+        url: '',
+        enabled: true,
+      };
+    }
+
+    return {
+      errors: null,
+      PAGE,
+      PRODUCT_NAME,
+    };
+  },
+}
+</script>
+<template>
+  <div class="filled-height">
+    <CruResource
+        :done-route="doneRoute"
+        :mode="mode"
+        :resource="value"
+        :description="t('imageScanner.vexManagement.cru.description')"
+        :subtypes="[]"
+        :validation-passed="true"
+        :errors="errors"
+        :cancel-event="true"
+        @error="(e) => (errors = e)"
+        @finish="apply"
+        @cancel="done"
+    >
+      <NameNsDescription
+          :value="value"
+          :mode="mode"
+          :namespaced=false
+          @update:value="$emit('input', $event)"
+      />
+      <div class="row">
+        <div class="col span-9" >
+          <LabeledInput
+              v-model:value="value.spec.url"
+              :mode="mode"
+              :label="t('imageScanner.vexManagement.cru.uri.label')"
+              :required="true"
+          />
+        </div>
+      </div>
+      <div class="row mt-16">
+        <Checkbox
+            v-model:value="value.spec.enabled"
+            :tooltip="t('imageScanner.vexManagement.cru.enable.tooltip')"
+            data-testid="imageScanner-vexManagement-cru-enable-checkbox"
+            class="check"
+            type="checkbox"
+            label-key="imageScanner.vexManagement.cru.enable.label"
+            :mode="mode"
+        />
+      </div>
+    </CruResource>
+  </div>
+</template>
+<style lang="scss" scoped>
+.mt-16 {
+  margin-top: 16px;
+}
+</style>

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

@@ -107,6 +107,14 @@ imageScanner:
         createdBy: Created by
         updated: Updated
         actions: Actions
+    cru:
+      description: Start from scratch by using the steps below or go back and clone an existing entry
+      name: Name
+      uri:
+        label: VEX hub URI
+      enable:
+        label: Enabled
+        tooltip: Controls whether this VEX entry is active in vulnerability assessments.
   enum:
     cve:
       critical: Critical
@@ -139,3 +147,4 @@ imageScanner:
 
 typeLabel:
   sbombastic.rancher.io.registry: Registries configuration
+  sbombastic.rancher.io.vexhub: Vex Management

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

@@ -0,0 +1,185 @@
+<template>
+  <div>
+
+    <Banner color="info">
+      {{t('imageScanner.vexManagement.description')}}
+    </Banner>
+
+    <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>
+  </div>
+</template>
+
+<script>
+import { RESOURCE } from "@sbombastic-image-vulnerability-scanner/types";
+import ResourceTable from "@shell/components/ResourceTable";
+import Banner from '@components/Banner/Banner.vue';
+import RegisterStatusBadge from "@sbombastic-image-vulnerability-scanner/components/common/RegisterStatusBadge";
+import { VEX_MANAGEMENT_TABLE } from "@sbombastic-image-vulnerability-scanner/config/table-headers";
+import {
+  PRODUCT_NAME,
+} from "@sbombastic-image-vulnerability-scanner/types";
+
+export default {
+  name: 'VexManagement',
+  components: {
+    Banner,
+    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 || [];
+  },
+  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();
+    },
+    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/routes/sbombastic-image-vulnerability-scanner-routes.ts

@@ -22,11 +22,6 @@ const routes = [
     path: `/c/:cluster/${PRODUCT_NAME}/${PAGE.VULNERABILITY_OVERVIEW}`,
     component: Vulnerabilities,
   },
-  {
-    name: `c-cluster-${PRODUCT_NAME}-${PAGE.VEX_MANAGEMENT}`,
-    path: `/c/:cluster/${PRODUCT_NAME}/${PAGE.VEX_MANAGEMENT}`,
-    component: VexManagement,
-  },
   {
     name: `c-cluster-${PRODUCT_NAME}-demo`,
     path: `/c/:cluster/${PRODUCT_NAME}/demo`,