@rancher/shell 0.1.0 → 0.1.1

package/edit/provisioning.cattle.io.cluster/rke2.vue

@@ -6,13 +6,15 @@ import merge from 'lodash/merge';
 import { mapGetters } from 'vuex';
 
 import CreateEditView from '@shell/mixins/create-edit-view';
+import FormValidation from '@shell/mixins/form-validation';
 
 import {
   CAPI,
   MANAGEMENT,
   NORMAN,
   SCHEMA,
-  DEFAULT_WORKSPACE
+  DEFAULT_WORKSPACE,
+  SECRET
 } from '@shell/config/types';
 import { _CREATE, _EDIT, _VIEW } from '@shell/config/query-params';
 
@@ -29,16 +31,16 @@ import { isHarvesterSatisfiesVersion } from '@shell/utils/cluster';
 
 import ArrayList from '@shell/components/form/ArrayList';
 import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
-import BadgeState from '@shell/components/BadgeState';
-import Banner from '@shell/components/Banner';
-import Checkbox from '@shell/components/form/Checkbox';
+import { BadgeState } from '@components/BadgeState';
+import { Banner } from '@components/Banner';
+import { Checkbox } from '@components/Form/Checkbox';
 import CruResource from '@shell/components/CruResource';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import Loading from '@shell/components/Loading';
 import MatchExpressions from '@shell/components/form/MatchExpressions';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
-import RadioGroup from '@shell/components/form/RadioGroup';
+import { RadioGroup } from '@components/Form/Radio';
 import Tab from '@shell/components/Tabbed/Tab';
 import Tabbed from '@shell/components/Tabbed';
 import UnitInput from '@shell/components/form/UnitInput';
@@ -52,6 +54,8 @@ import { LEGACY } from '@shell/store/features';
 import semver from 'semver';
 import { canViewClusterMembershipEditor } from '@shell/components/form/Members/ClusterMembershipEditor.vue';
 import { SETTING } from '@shell/config/settings';
+import { base64Encode } from '@shell/utils/crypto';
+import { CAPI as CAPI_ANNOTATIONS } from '@shell/config/labels-annotations';
 import ACE from './ACE';
 import AgentEnv from './AgentEnv';
 import DrainOptions from './DrainOptions';
@@ -101,7 +105,7 @@ export default {
     YamlEditor,
   },
 
-  mixins: [CreateEditView],
+  mixins: [CreateEditView, FormValidation],
 
   props: {
     mode: {
@@ -286,28 +290,32 @@ export default {
     }
 
     return {
-      loadedOnce:              false,
-      lastIdx:                 0,
-      allPSPs:                 null,
-      nodeComponent:           null,
-      credentialId:            null,
-      credential:              null,
-      machinePools:            null,
-      rke2Versions:            null,
-      k3sVersions:             null,
-      defaultRke2:             '',
-      defaultK3s:              '',
-      s3Backup:                false,
-      versionInfo:             {},
-      membershipUpdate:        {},
-      systemRegistry:          null,
-      registryHost:            null,
-      registryMode:            null,
-      registrySecret:          null,
-      userChartValues:         {},
-      userChartValuesTemp:     {},
-      addonsRev:               0,
-      clusterIsAlreadyCreated: !!this.value.id
+      loadedOnce:                  false,
+      lastIdx:                     0,
+      allPSPs:                     null,
+      nodeComponent:               null,
+      credentialId:                null,
+      credential:                  null,
+      machinePools:                null,
+      rke2Versions:                null,
+      k3sVersions:                 null,
+      defaultRke2:                 '',
+      defaultK3s:                  '',
+      s3Backup:                    false,
+      versionInfo:                 {},
+      membershipUpdate:            {},
+      showDeprecatedPatchVersions: false,
+      systemRegistry:              null,
+      registryHost:                null,
+      registryMode:                null,
+      registrySecret:              null,
+      userChartValues:             {},
+      userChartValuesTemp:         {},
+      addonsRev:                   0,
+      clusterIsAlreadyCreated:     !!this.value.id,
+      fvFormRuleSets:              [{
+        path: 'metadata.name', rules: ['subDomain'], translationKey: 'nameNsDescription.name.label'
+      }]
     };
   },
 
@@ -385,10 +393,20 @@ export default {
       const cur = this.liveValue?.spec?.kubernetesVersion || '';
       const existingRke2 = this.mode === _EDIT && cur.includes('rke2');
       const existingK3s = this.mode === _EDIT && cur.includes('k3s');
-      const rke2 = this.filterAndMap(this.rke2Versions, (existingRke2 ? cur : null), cur, this.defaultRke2);
-      const k3s = this.filterAndMap(this.k3sVersions, (existingK3s ? cur : null), cur, this.defaultK3s);
-      const showRke2 = rke2.length && !existingK3s;
-      const showK3s = k3s.length && !existingRke2;
+
+      let allValidRke2Versions = this.getAllOptionsAfterMinVersion(this.rke2Versions, (existingRke2 ? cur : null), this.defaultRke2);
+      let allValidK3sVersions = this.getAllOptionsAfterMinVersion(this.k3sVersions, (existingK3s ? cur : null), this.defaultK3s);
+
+      if (!this.showDeprecatedPatchVersions) {
+        // Normally, we only want to show the most recent patch version
+        // for each Kubernetes minor version. However, if the user
+        // opts in to showing deprecated versions, we don't filter them.
+        allValidRke2Versions = this.filterOutDeprecatedPatchVersions(allValidRke2Versions, cur);
+        allValidK3sVersions = this.filterOutDeprecatedPatchVersions(allValidK3sVersions, cur);
+      }
+
+      const showRke2 = allValidRke2Versions.length && !existingK3s;
+      const showK3s = allValidK3sVersions.length && !existingRke2;
       const out = [];
 
       if ( showRke2 ) {
@@ -396,7 +414,7 @@ export default {
           out.push({ kind: 'group', label: this.t('cluster.provider.rke2') });
         }
 
-        out.push(...rke2);
+        out.push(...allValidRke2Versions);
       }
 
       if ( showK3s ) {
@@ -408,7 +426,7 @@ export default {
           });
         }
 
-        out.push(...k3s);
+        out.push(...allValidK3sVersions);
       }
 
       if ( cur ) {
@@ -745,7 +763,7 @@ export default {
       const first = all[0]?.value;
       const preferred = all.find(x => x.value === this.defaultRke2)?.value;
 
-      const rke2 = this.filterAndMap(this.rke2Versions, null);
+      const rke2 = this.getAllOptionsAfterMinVersion(this.rke2Versions, null);
       const showRke2 = rke2.length;
       let out;
 
@@ -1022,7 +1040,7 @@ export default {
         // We don't allow the user to edit any of the fields in metadata from the UI so it's safe to override it with the
         // metadata defined by the latest backend value. This is primarily used to ensure the resourceVersion is up to date.
         delete clonedCurrentConfig.metadata;
-        machinePool.config = merge(machinePool.config, clonedLatestConfig);
+        machinePool.config = merge(clonedLatestConfig, clonedCurrentConfig);
       }
     },
 
@@ -1169,7 +1187,9 @@ export default {
 
       this.applyChartValues(this.value.spec.rkeConfig);
 
-      if (this.agentConfig['cloud-provider-name'] === HARVESTER && clusterId && this.isCreate) {
+      const isUpgrade = this.isEdit && this.liveValue?.spec?.kubernetesVersion !== this.value?.spec?.kubernetesVersion;
+
+      if (this.agentConfig['cloud-provider-name'] === HARVESTER && clusterId && (this.isCreate || isUpgrade)) {
         const namespace = this.machinePools?.[0]?.config?.vmNamespace;
 
         const res = await this.$store.dispatch('management/request', {
@@ -1182,13 +1202,30 @@ export default {
           },
         });
 
-        set(this.agentConfig, 'cloud-provider-config', res.data);
+        const kubeconfig = res.data;
+
+        const harvesterKubeconfigSecret = await this.createKubeconfigSecret(kubeconfig);
+
+        set(this.agentConfig, 'cloud-provider-config', `secret://fleet-default:${ harvesterKubeconfigSecret?.metadata?.name }`);
         set(this.chartValues, `${ HARVESTER_CLOUD_PROVIDER }.clusterName`, this.value.metadata.name);
         set(this.chartValues, `${ HARVESTER_CLOUD_PROVIDER }.cloudConfigPath`, '/var/lib/rancher/rke2/etc/config-files/cloud-provider-config');
       }
 
       await this.save(btnCb);
     },
+    // create a secret to reference the harvester cluster kubeconfig in rkeConfig
+    async createKubeconfigSecret(kubeconfig = '') {
+      const clusterName = this.value.metadata.name;
+      const secret = await this.$store.dispatch('management/create', {
+        type:     SECRET,
+        metadata: {
+          namespace: 'fleet-default', generateName: 'harvesterconfig', annotations: { [CAPI_ANNOTATIONS.SECRET_AUTH]: clusterName, [CAPI_ANNOTATIONS.SECRET_WILL_DELETE]: 'true' }
+        },
+        data: { credential: base64Encode(kubeconfig) }
+      });
+
+      return secret.save({ url: '/v1/secrets', method: 'POST' });
+    },
 
     cancel() {
       this.$router.push({
@@ -1407,7 +1444,7 @@ export default {
       }
     },
 
-    filterAndMap(versions, minVersion, currentVersion, defaultVersion) {
+    getAllOptionsAfterMinVersion(versions, minVersion, defaultVersion) {
       const out = (versions || []).filter(obj => !!obj.serverArgs).map((obj) => {
         let disabled = false;
         let experimental = false;
@@ -1430,11 +1467,49 @@ export default {
           disabled,
         };
       });
-
       const sorted = sortBy(out, 'sort:desc');
+
+      const mostRecentPatchVersions = this.getMostRecentPatchVersions(sorted);
+
+      const sortedWithDeprecatedLabel = sorted.map((optionData) => {
+        const majorMinor = `${ semver.major(optionData.value) }.${ semver.minor(optionData.value) }`;
+
+        if (mostRecentPatchVersions[majorMinor] === optionData.value) {
+          return optionData;
+        }
+
+        return {
+          ...optionData,
+          label: `${ optionData.label } (${ this.t('cluster.kubernetesVersion.deprecated') })`
+        };
+      });
+
+      return sortedWithDeprecatedLabel;
+    },
+
+    getMostRecentPatchVersions(sortedVersions) {
+      // Get the most recent patch version for each Kubernetes minor version.
       const versionMap = {};
 
-      return sorted.filter((version) => {
+      sortedVersions.forEach((version) => {
+        const majorMinor = `${ semver.major(version.value) }.${ semver.minor(version.value) }`;
+
+        if (!versionMap[majorMinor]) {
+          // Because we start with a sorted list of versions, we know the
+          // highest patch version is first in the list, so we only keep the
+          // first of each minor version in the list.
+          versionMap[majorMinor] = version.value;
+        }
+      });
+
+      return versionMap;
+    },
+
+    filterOutDeprecatedPatchVersions(allVersions, currentVersion) {
+      // Get the most recent patch version for each Kubernetes minor version.
+      const mostRecentPatchVersions = this.getMostRecentPatchVersions(allVersions);
+
+      const filteredVersions = allVersions.filter((version) => {
         // Always show pre-releases
         if (semver.prerelease(version.value)) {
           return true;
@@ -1443,14 +1518,14 @@ export default {
         const majorMinor = `${ semver.major(version.value) }.${ semver.minor(version.value) }`;
 
         // Always show current version, else show if we haven't shown anything for this major.minor version yet
-        if (version === currentVersion || !versionMap[majorMinor]) {
-          versionMap[majorMinor] = true;
-
+        if (version === currentVersion || mostRecentPatchVersions[majorMinor] === version.value) {
           return true;
         }
 
         return false;
       });
+
+      return filteredVersions;
     },
 
     generateYaml() {
@@ -1489,7 +1564,7 @@ export default {
     v-else
     ref="cruresource"
     :mode="mode"
-    :validation-passed="validationPassed()"
+    :validation-passed="validationPassed() && fvFormIsValid"
     :resource="value"
     :errors="errors"
     :cancel-event="true"
@@ -1497,10 +1572,11 @@ export default {
     :apply-hooks="applyHooks"
     :generate-yaml="generateYaml"
     class="rke2"
+    component-testid="rke2-custom-create"
     @done="done"
     @finish="saveOverride"
     @cancel="cancel"
-    @error="e=>errors = e"
+    @error="fvUnreportedValidationErrors"
   >
     <Banner
       v-if="isEdit"
@@ -1527,6 +1603,7 @@ export default {
         name-placeholder="cluster.name.placeholder"
         description-label="cluster.description.label"
         description-placeholder="cluster.description.placeholder"
+        :rules="{name:fvGetAndReportPathRules('metadata.name')}"
       />
 
       <Banner v-if="appsOSWarning" color="error">
@@ -1567,7 +1644,7 @@ export default {
           @addTab="addMachinePool($event)"
           @removeTab="removeMachinePool($event)"
         >
-          <template v-for="obj in machinePools">
+          <template v-for="(obj, idx) in machinePools">
             <Tab v-if="!obj.remove" :key="obj.id" :name="obj.id" :label="obj.pool.name || '(Not Named)'" :show-header="false">
               <MachinePool
                 ref="pool"
@@ -1576,6 +1653,8 @@ export default {
                 :mode="mode"
                 :provider="provider"
                 :credential-id="credentialId"
+                :idx="idx"
+                :machine-pools="machinePools"
                 @error="e=>errors = e"
               />
             </Tab>
@@ -1600,6 +1679,12 @@ export default {
                 :options="versionOptions"
                 label-key="cluster.kubernetesVersion.label"
               />
+              <Checkbox
+                v-model="showDeprecatedPatchVersions"
+                :label="t('cluster.kubernetesVersion.deprecatedPatches')"
+                :tooltip="t('cluster.kubernetesVersion.deprecatedPatchWarning')"
+                class="patch-version"
+              />
               <div v-if="showK3sTechPreviewWarning" class="k3s-tech-preview-info">
                 {{ t('cluster.k3s.techPreview') }}
               </div>
@@ -2092,4 +2177,7 @@ export default {
     color: var(--error);
     padding-top: 10px;
   }
+  .patch-version {
+    margin-top: 5px;
+  }
 </style>

package/edit/resources.cattle.io.backup.vue

@@ -1,11 +1,12 @@
 <script>
 import CruResource from '@shell/components/CruResource';
 import createEditView from '@shell/mixins/create-edit-view';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import formValidation from '@shell/mixins/form-validation';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import UnitInput from '@shell/components/form/UnitInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import Banner from '@shell/components/Banner';
-import RadioGroup from '@shell/components/form/RadioGroup';
+import { Banner } from '@components/Banner';
+import { RadioGroup } from '@components/Form/Radio';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
 import Loading from '@shell/components/Loading';
 import S3 from '@shell/chart/rancher-backup/S3';
@@ -28,7 +29,7 @@ export default {
     Loading,
     S3,
   },
-  mixins: [createEditView],
+  mixins: [createEditView, formValidation],
 
   props: {
     value: {
@@ -81,7 +82,17 @@ export default {
     }
 
     return {
-      allSecrets: [], resourceSet: null, s3, storageSource, useEncryption, apps: [], setSchedule, name: this.value?.metadata?.name,
+      allSecrets:     [],
+      resourceSet:    null,
+      s3,
+      storageSource,
+      useEncryption,
+      apps:           [],
+      setSchedule,
+      name:           this.value?.metadata?.name,
+      fvFormRuleSets: [{
+        path: 'metadata.name', rules: ['dnsLabel', 'noUpperCase'], translationKey: 'nameNsDescription.name.label'
+      }]
     };
   },
 
@@ -127,7 +138,7 @@ export default {
     },
 
     validated() {
-      return !!this.name && (!this.useEncryption || !!this.value?.spec?.encryptionConfigSecretName);
+      return !!this.name && (!this.useEncryption || !!this.value?.spec?.encryptionConfigSecretName) && this.fvFormIsValid;
     },
 
     ...mapGetters({ t: 'i18n/t' })
@@ -167,9 +178,16 @@ export default {
 <template>
   <Loading v-if="$fetchState.pending" />
   <div v-else>
-    <CruResource :validation-passed="validated" :done-route="doneRoute" :resource="value" :mode="mode" @finish="save">
+    <CruResource
+      :validation-passed="validated"
+      :done-route="doneRoute"
+      :resource="value"
+      :mode="mode"
+      :errors="fvUnreportedValidationErrors"
+      @finish="save"
+    >
       <template>
-        <NameNsDescription :mode="mode" :value="value" :namespaced="false" @change="name=value.metadata.name" />
+        <NameNsDescription :mode="mode" :value="value" :namespaced="false" :rules="{name: fvGetAndReportPathRules('metadata.name')}" @change="name=value.metadata.name" />
         <template v-if="!!resourceSet">
           <div class="bordered-section">
             <RadioGroup

package/edit/resources.cattle.io.restore.vue

@@ -1,12 +1,12 @@
 <script>
 import CruResource from '@shell/components/CruResource';
 import createEditView from '@shell/mixins/create-edit-view';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import UnitInput from '@shell/components/form/UnitInput';
-import Checkbox from '@shell/components/form/Checkbox';
+import { Checkbox } from '@components/Form/Checkbox';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import Loading from '@shell/components/Loading';
-import RadioGroup from '@shell/components/form/RadioGroup';
+import { RadioGroup } from '@components/Form/Radio';
 import S3 from '@shell/chart/rancher-backup/S3';
 import { mapGetters } from 'vuex';
 import { SECRET, BACKUP_RESTORE, CATALOG } from '@shell/config/types';

package/edit/secret/basic.vue

@@ -1,5 +1,5 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 
 export default {
   components: { LabeledInput },

package/edit/secret/index.vue

@@ -3,6 +3,8 @@ import { SECRET_TYPES as TYPES } from '@shell/config/secret';
 import { MANAGEMENT, NAMESPACE, DEFAULT_WORKSPACE } from '@shell/config/types';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
 import CruResource from '@shell/components/CruResource';
 import {
   CLOUD_CREDENTIAL, _CLONE, _CREATE, _EDIT, _FLAGGED
@@ -32,6 +34,8 @@ export default {
   name: 'CruSecret',
 
   components: {
+    LabeledInput,
+    LabeledSelect,
     Loading,
     NameNsDescription,
     CruResource,
@@ -63,14 +67,41 @@ export default {
       this.$set(this.value, 'data', {});
     }
 
+    const secretTypes = [
+      {
+        label: 'Custom',
+        value: 'custom'
+      },
+      {
+        label:    'divider',
+        disabled: true,
+        kind:     'divider'
+      }
+    ];
+
+    Object.values(TYPES).forEach((t) => {
+      secretTypes.push({
+        label: t,
+        value: t
+      });
+    });
+
     return {
       isCloud,
-      nodeDrivers: null,
-
+      nodeDrivers:       null,
+      secretTypes,
+      secretType:        this.value._type,
+      initialSecretType: this.value._type
     };
   },
 
   computed: {
+    isCustomSecretCreate() {
+      return this.mode === _CREATE && this.$route.query.type === 'custom';
+    },
+    showCustomSecretType() {
+      return this.secretType === 'custom';
+    },
     typeKey() {
       if ( this.isCloud ) {
         return 'cloud';
@@ -147,6 +178,13 @@ export default {
             docLink:     this.t(`secret.typeDescriptions.'${ id }'.docLink`)
           });
         }
+
+        out.push({
+          id:          'custom',
+          label:       this.t('secret.customType'),
+          bannerAbbrv: this.initialDisplayFor('custom'),
+          description: this.t('secret.typeDescriptions.custom.description')
+        });
       }
 
       return sortBy(out, 'label');
@@ -237,6 +275,12 @@ export default {
 
       this.$set(this.value, '_type', type);
       this.$emit('set-subtype', this.typeDisplay(type, driver));
+
+      this.secretType = type;
+
+      if (this.mode === _CREATE && type === 'custom') {
+        this.$set(this.value, '_type', '');
+      }
     },
 
     typeDisplay(type, driver) {
@@ -254,6 +298,12 @@ export default {
 
       return this.$store.getters['i18n/withFallback'](`secret.initials."${ type }"`, null, fallback);
     },
+
+    selectCustomType(type) {
+      if (type !== 'custom') {
+        this.$set(this.value, '_type', type);
+      }
+    }
   },
 };
 </script>
@@ -276,6 +326,34 @@ export default {
     >
       <NameNsDescription v-model="value" :mode="mode" :namespaced="!isCloud" />
 
+      <div v-if="isCustomSecretCreate" class="row">
+        <div class="col span-3">
+          <LabeledSelect
+            v-model="secretType"
+            :options="secretTypes"
+            :searchable="false"
+            :mode="mode"
+            :multiple="false"
+            :reduce="(e) => e.value"
+            label-key="secret.type"
+            required
+            @input="selectCustomType"
+          />
+        </div>
+
+        <div class="col span-3">
+          <LabeledInput
+            v-if="showCustomSecretType"
+            ref="customType"
+            v-model="value._type"
+            v-focus
+            label-key="secret.customType"
+            :mode="mode"
+            required
+          />
+        </div>
+      </div>
+
       <div class="spacer"></div>
       <component
         :is="cloudComponent"

package/edit/secret/registry.vue

@@ -1,6 +1,6 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
-import RadioGroup from '@shell/components/form/RadioGroup';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { RadioGroup } from '@components/Form/Radio';
 
 export default {
   components: { LabeledInput, RadioGroup },

package/edit/secret/ssh.vue

@@ -1,5 +1,5 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import FileSelector, { createOnSelected } from '@shell/components/form/FileSelector';
 
 export default {

package/edit/secret/tls.vue

@@ -1,6 +1,6 @@
 <script>
 import { _EDIT } from '@shell/config/query-params';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import FileSelector, { createOnSelected } from '@shell/components/form/FileSelector';
 
 export default {