create(edit) registries configuration

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');
+
 }

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>

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