From 5a08b502720d95ff52d6b52b735a40a87f98d69a Mon Sep 17 00:00:00 2001
From: lsongsuse <long.song@suse.com>
Date: Tue, 5 Aug 2025 01:18:46 -0700
Subject: [PATCH] create(edit) registries configuration

---
 .../sbombastic-image-vulnerability-scanner.ts |   4 +-
 .../edit/sbombastic.rancher.io.registry.vue   | 227 +++++++++++++++
 .../l10n/en-us.yaml                           |  28 ++
 .../list/sbombastic.rancher.io.registry.vue   | 265 ++++++++++++++++++
 4 files changed, 523 insertions(+), 1 deletion(-)
 create mode 100644 pkg/sbombastic-image-vulnerability-scanner/edit/sbombastic.rancher.io.registry.vue
 create mode 100644 pkg/sbombastic-image-vulnerability-scanner/list/sbombastic.rancher.io.registry.vue

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
index 4a245a1..bfce941 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/config/sbombastic-image-vulnerability-scanner.ts
+++ b/pkg/sbombastic-image-vulnerability-scanner/config/sbombastic-image-vulnerability-scanner.ts
@@ -2,6 +2,7 @@ import { IPlugin } from "@shell/core/types";
 import {
   PRODUCT_NAME,
   PAGE,
+  RESOURCE
 } from "@sbombastic-image-vulnerability-scanner/types";
 
 export function init($plugin: IPlugin, store: any) {
@@ -65,9 +66,10 @@ export function init($plugin: IPlugin, store: any) {
   });
 
     basicType([
-        PAGE.REGISTRIES,
         PAGE.IMAGE_OVERVIEW,
         PAGE.VULNERABILITY_OVERVIEW,
     ]);
 
+    basicType([PAGE.REGISTRIES, RESOURCE.REGISTRY], 'Advanced');
+
 }
\ No newline at end of file
diff --git a/pkg/sbombastic-image-vulnerability-scanner/edit/sbombastic.rancher.io.registry.vue b/pkg/sbombastic-image-vulnerability-scanner/edit/sbombastic.rancher.io.registry.vue
new file mode 100644
index 0000000..67f8e95
--- /dev/null
+++ b/pkg/sbombastic-image-vulnerability-scanner/edit/sbombastic.rancher.io.registry.vue
@@ -0,0 +1,227 @@
+<script>
+import CreateEditView from '@shell/mixins/create-edit-view';
+import Footer from '@shell/components/form/Footer';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { RadioGroup } from '@components/Form/Radio';
+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, CLUSTER_REPO_TYPES } from '@shell/config/types';
+import UnitInput from '@shell/components/form/UnitInput.vue';
+import {ref} from "vue";
+
+export default {
+  name: 'CruRegistry',
+
+  components: {
+    Footer,
+    RadioGroup,
+    LabeledInput,
+    NameNsDescription,
+    CruResource,
+    SelectOrCreateAuthSecret,
+    Banner,
+    Checkbox,
+    UnitInput,
+    LabeledSelect
+  },
+
+  mixins: [CreateEditView],
+
+  data() {
+
+    if (!this.value.spec) {
+      this.value.spec = {
+        insecure: true,
+        authSecret: '',
+        caBundle: '',
+        type: {},
+        uri: '',
+        repositories: [],
+      };
+    }
+    if (!this.value.status){
+      this.value.status = {
+        conditions: [],
+      };
+    }
+
+    console.log('this.value after:',this.value);
+
+    return {
+      selectedRegistryType: this.value.type || 'ecr',
+      secretNamespace: this.$store.getters['defaultNamespace'],
+      inStore: this.$store.getters['currentProduct'].inStore,
+      errors: null,
+    };
+  },
+
+  computed: {
+    registryTypeOptions(){
+      return [
+        {
+          label: this.t('imageScanner.registries.configuration.cru.registry.type.ecr'),
+          value: 'ecr',
+        },
+        {
+          label: this.t('imageScanner.registries.configuration.cru.registry.type.azure'),
+          value: 'azure',
+        },
+      ];
+    },
+
+    namespace(){
+      console.log('this.value.spec.type:',this.value.spec.type);
+      return this.value.spec.type === 'ecr'?"kube-system":""
+    },
+
+    inStore() {
+      return this.$store.getters['currentProduct']?.inStore || MANAGEMENT;
+    },
+    secretNamespace() {
+      const tryNames = ['cattle-system', 'default'];
+
+      for ( const name of tryNames ) {
+        if ( this.$store.getters['cluster/byId'](NAMESPACE, name) ) {
+          return name;
+        }
+      }
+
+      return this.$store.getters[`${ this.inStore }/all`](NAMESPACE)[0]?.id;
+    },
+
+    useProxy: {
+      get() {
+        return !this.value.spec.insecure;
+      },
+      set(val) {
+        this.value.spec.insecure = !val;
+      }
+    }
+  },
+}
+
+</script>
+<template>
+  <div class="filled-height">
+    <Banner color="info">
+      {{t('imageScanner.registries.configuration.cru.description')}}
+    </Banner>
+    <CruResource
+      :done-route="doneRoute"
+      :mode="mode"
+      :resource="value"
+      :subtypes="[]"
+      :validation-passed="true"
+      :errors="errors"
+      @error="(e) => (errors = e)"
+      @finish="save"
+      @cancel="done"
+  >
+    <NameNsDescription
+        :value="value"
+        :mode="mode"
+        :namespaced="isNamespaced"
+        @update:value="$emit('input', $event)"
+    />
+
+    <div class="registry-input-label">
+      {{ t('imageScanner.registries.configuration.cru.registry.label') }}
+    </div>
+
+    <div class="row">
+      <div class="col span-6" >
+        <LabeledSelect
+            v-model:value="value.spec.type"
+            data-testid="registry-type-select"
+            :label="t('imageScanner.registries.configuration.cru.registry.type.label')"
+            :options="registryTypeOptions"
+            :placeholder="t('imageScanner.registry.configuration.cru.registry.type.placeholder')"
+            required
+        />
+      </div>
+      <div class="col span-3">
+          <LabeledInput
+              :label="t('imageScanner.registries.configuration.cru.registry.namespace.label')"
+              :value="namespace"
+              :placeholderKey="t('imageScanner.registries.configuration.cru.registry.namespace.placeholder')"
+              disabled=true
+          />
+      </div>
+    </div>
+
+    <Checkbox
+        v-model:value="useProxy"
+        class="mt-20 mb-10"
+        :mode="mode"
+        :label="t('imageScanner.registries.configuration.cru.proxy.enable')"
+        :tooltipKey="t('imageScanner.registries.configuration.cru.proxy.tooltip')"
+        data-testid="registry-use-proxy"
+    />
+
+    <div v-if="useProxy">
+      <div class="registry-input-label mb-0">
+        {{ t('imageScanner.registries.configuration.cru.authLabel') }}
+      </div>
+      <SelectOrCreateAuthSecret
+          :value="value.spec.authSecret"
+          :mode="mode"
+          data-testid="registry-auth-secret"
+          :register-before-hook="registerBeforeHook"
+          :namespace="secretNamespace"
+          :limit-to-namespace="false"
+          :in-store="inStore"
+          :allow-ssh=false
+          generate-name="registry-auth-"
+          :cache-secrets="true"
+          @input="val => value.spec.authSecret = val"
+      />
+
+      <div class="registry-input-label mt-24">
+        {{ t('imageScanner.registries.configuration.cru.scan.label') }}
+      </div>
+
+      <div class="row">
+        <div class="col span-6" >
+          <LabeledSelect
+              v-model:value="value.spec.repositories"
+              :label="t('imageScanner.registries.configuration.cru.scan.type')"
+          >
+          </LabeledSelect>
+        </div>
+        <div class="col span-3">
+          <UnitInput
+              v-model:value="unitInput"
+              :label="t('imageScanner.registries.configuration.cru.scan.schedule.label')"
+              :mode="mode"
+              min="0"
+              :suffix="t('unit.hour', { count: 3 })"
+              :placeholder="t('imageScanner.registries.configuration.cru.scan.schedule.placeholder', { hours: 3 })"
+              @update:value="updateRefreshInterval($event)"
+          />
+        </div>
+      </div>
+
+    </div>
+
+  </CruResource>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.registry-input-label {
+  margin-bottom: 16px;
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 500;
+  font-family: 'Lato', sans-serif;
+  color: #141419;
+  display: block;
+}
+.mt-24 {
+  margin-top: 24px;
+}
+</style>
\ No newline at end of file
diff --git a/pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml b/pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml
index b981937..b17a593 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml
+++ b/pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml
@@ -1,3 +1,5 @@
+product:
+ imageScanner: Image Vulnerability Scanner
 imageScanner:
   registries:
     title: Registries configuration
@@ -20,6 +22,29 @@ imageScanner:
         progress: Progress
         prevScan: Previous scan
     configuration:
+      cru:
+        description: Start from scratch by using the steps below or go back and clone an existing configuration
+        registry:
+          label: Registry
+          type:
+            label: Type
+            ecr: Amazon ECR Registry
+            azure: Azure Container Registry
+            custom: Custom Registry
+            placeholder: Choose a registry type
+          namespace:
+            label: Namespace
+            placeholder: "Choose the registry first"
+        proxy:
+          enable: Use the embedded proxy
+          tooltip: "When enabled, Rancher routes all registry traffic through its secure proxy instead of direct connections."
+        authLabel: Authentication
+        scan:
+          label: Scanning
+          type: Repositories to scan
+          schedule:
+            label: Refresh Interval
+            placeholder: 'default: {hours}'
       scan: Start Scan
       meta:
         registry: Registry
@@ -77,3 +102,6 @@ imageScanner:
   general:
     refresh: Refresh data
     ago: ago
+
+typeLabel:
+  sbombastic.rancher.io.registry: Registries configuration
\ No newline at end of file
diff --git a/pkg/sbombastic-image-vulnerability-scanner/list/sbombastic.rancher.io.registry.vue b/pkg/sbombastic-image-vulnerability-scanner/list/sbombastic.rancher.io.registry.vue
new file mode 100644
index 0000000..d2ee604
--- /dev/null
+++ b/pkg/sbombastic-image-vulnerability-scanner/list/sbombastic.rancher.io.registry.vue
@@ -0,0 +1,265 @@
+<template>
+  <div class="page">
+    <div class="header-section">
+      <div class="header-left">
+        <div class="state">&lt;State as of <span class="state-date-time">Jan 27, 2025  11:07 PM</span>&gt;</div>
+      </div>
+    </div>
+    <div class="summary-section">
+      <RecentUpdatedRegistries :registryStatusList="registryStatusList"/>
+      <StatusDistribution :chartData="statusSummary"/>
+    </div>
+    <ResourceTable
+        :schema="schema"
+        :rows="rows"
+        :namespaced="false"
+        :groupable="false"
+        :hasAdvancedFiltering="true"
+        :headers="headers"
+        :use-query-params-for-simple-filtering="true"
+    />
+  </div>
+</template>
+
+<script>
+
+import { ref } from "vue";
+import { RESOURCE } from "@sbombastic-image-vulnerability-scanner/types";
+import ResourceTable from "@shell/components/ResourceTable";
+import RecentUpdatedRegistries from "@sbombastic-image-vulnerability-scanner/components/RecentUpdatedRegistries";
+import StatusDistribution from "@sbombastic-image-vulnerability-scanner/components/StatusDistribution";
+import { REGISTRY_SCAN_TABLE } from "@sbombastic-image-vulnerability-scanner/config/table-headers";
+import {
+  PRODUCT_NAME,
+} from "@sbombastic-image-vulnerability-scanner/types";
+
+export default {
+  name: 'registries',
+  components: {
+    ResourceTable,
+    RecentUpdatedRegistries,
+    StatusDistribution
+  },
+  data() {
+    return {
+      content: ref("Registries"),
+      PRODUCT_NAME: PRODUCT_NAME,
+      rows: [],
+      registryStatusList: [],
+      statusSummary: {
+        scheduled: 0,
+        pending: 0,
+        inprogress: 0,
+        complete: 0,
+        failed: 0
+      },
+      headers: REGISTRY_SCAN_TABLE,
+    }
+  },
+
+  async fetch() {
+    await this.$store.dispatch('cluster/findAll', { type: RESOURCE.REGISTRY });
+    // let registriesCRD = this.$store.getters['cluster/all'](RESOURCE.REGISTRY);
+    // let registryMap = {};
+    // registriesCRD.forEach((rec) => {
+    //   if(rec.status) {
+    //     rec.status.conditions[0].type = rec.status.conditions[0].type.toLowerCase() === "discovering" ? "InProgress" : rec.status.conditions[0].type;
+    //     registryMap[rec.id] = rec;
+    //   }else{
+    //     registryMap[rec.id] = rec;
+    //   }
+    // });
+
+    if (this.$store.getters['cluster/canList'](RESOURCE.SCAN_JOB)) {
+      await this.$store.dispatch('cluster/findAll', { type: RESOURCE.SCAN_JOB });
+    }
+
+    let scanJobCRD = this.$store.getters['cluster/all'](RESOURCE.SCAN_JOB);
+
+    // this.rows = scanJobCRD.map((rec) => {
+    //   const key = `${rec.metadata.namespace}/${rec.spec.registry}`;
+    //   const reg = registryMap[key];
+    //
+    //   if (rec.spec && rec.spec.registry && reg) {
+    //     rec.registry = reg;
+    //     const status = rec.status.conditions?.[0]?.type?.toLowerCase();
+    //     const prevStatus = rec.status.conditions?.[1]?.type?.toLowerCase();
+    //     this.registryStatusList.push({
+    //       scan_name: rec.metadata.name,
+    //       registry_name: reg.id,
+    //       namespace: rec.metadata.namespace,
+    //       prev_status: prevStatus,
+    //       curr_status: status,
+    //       last_update_time: rec.status.conditions?.[0]?.lastUpdateTime
+    //     });
+    //
+    //     if (status && this.statusSummary.hasOwnProperty(status)) {
+    //       this.statusSummary[status]++;
+    //     }
+    //   }
+    //   return rec;
+    // });
+
+    // this.registryStatusList.sort((a, b) => new Date(b.last_update_time) - new Date(a.last_update_time)).slice(0, 5)
+    // while (this.registryStatusList.length < 5) {
+    //   this.registryStatusList.push({
+    //     scan_name: "",
+    //     registry_name: "",
+    //     prev_status: "",
+    //     curr_status: "",
+    //     last_update_time: new Date().toISOString()
+    //   });
+    // }
+  },
+  methods: {
+    refresh() {},
+    openAddEditRegistry() {},
+  },
+  computed: {
+    rows() {
+        let registriesCRD = this.$store.getters['cluster/all'](RESOURCE.REGISTRY);
+        //Make mock data for UI test
+        registriesCRD = registriesCRD.map((rec, index) => {
+          if (index === 0) {
+            rec.schedule = 3;
+            rec._status = "failed";
+            rec.errors = [
+              {
+                message: "Not enough resources to complete the scan. Could not connect to proxyu",
+              },
+            ];
+            rec.progress = 35;
+            rec.previous = {
+              _status: "scheduled",
+              errors: [],
+              progress: 0
+            };
+          } else {
+            rec.schedule = 29;
+            rec._status = "completed";
+            rec.errors = [];
+            rec.progress = 100;
+            rec.previous = {
+              _status: "Failed",
+              errors: [
+                {
+                  message: "Not enough resources to complete the scan. Could not connect to proxyu",
+                },
+              ],
+              progress: 49
+            };
+          }
+          return rec;
+        });
+        return registriesCRD;
+      },
+    schema() {
+      return this.$store.getters['cluster/schemaFor'](RESOURCE.SCAN_JOB);
+    },
+  }
+}
+
+</script>
+
+
+<style lang="scss" scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  min-height: 100%;
+}
+.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: 4px;
+    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; /* 133.333% */
+    }
+    .state {
+      display: -webkit-box;
+      max-width: 900px;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+      align-self: stretch;
+      overflow: hidden;
+      color: #717179;
+
+      text-overflow: ellipsis;
+      font-family: Lato;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 21px; /* 150% */
+
+      .state-date-time {
+        overflow: hidden;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        color: #717179;
+        text-overflow: ellipsis;
+        font-family: Lato;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 21px;
+      }
+    }
+  }
+  .header-right {
+    display: flex;
+    align-items: flex-end;
+    justify-content: end;
+    flex: 1 0 0;
+    gap: 24px;
+  }
+  .header-btn {
+    height: 40px;
+  }
+  .icon-add {
+    width: 16px;
+    height: 16px;
+    margin-right: 12px;
+    background: url('../assets/img/add.svg') no-repeat center center;
+    background-size: contain;
+  }
+  .icon-refresh-ss {
+    width: 16px;
+    height: 16px;
+    margin-right: 12px;
+    background: url('../assets/img/refresh.svg') no-repeat center center;
+    background-size: contain;
+  }
+}
+.summary-section {
+  display: flex;
+  min-width: 912px;
+  align-items: flex-start;
+  align-self: stretch;
+  border-radius: 6px;
+  border: 1px solid #DCDEE7;
+  background: #FFF;
+  margin: 24px 0;
+}
+
+</style>
\ No newline at end of file