@rancher/shell 3.0.5-rc.6 → 3.0.5-rc.8

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

@@ -7,6 +7,7 @@ import CreateEditView from '@shell/mixins/create-edit-view';
 import FormValidation from '@shell/mixins/form-validation';
 import { normalizeName } from '@shell/utils/kube';
 import AccountAccess from '@shell/components/google/AccountAccess.vue';
+import { handleConflict } from '@shell/plugins/dashboard-store/normalize';
 
 import {
   CAPI,
@@ -170,7 +171,7 @@ export default {
     this.setAgentConfiguration();
   },
 
-  data() {
+  beforeCreate() {
     if (!this.value.spec.rkeConfig) {
       this.value.spec.rkeConfig = {};
     }
@@ -217,15 +218,16 @@ export default {
     if (!this.value.spec.rkeConfig.machineSelectorConfig?.length) {
       this.value.spec.rkeConfig.machineSelectorConfig = [{ config: {} }];
     }
+  },
 
-    const truncateLimit = this.value.defaultHostnameLengthLimit || 0;
-
+  data() {
     return {
       loadedOnce:                      false,
       lastIdx:                         0,
       allPSAs:                         [],
       credentialId:                    '',
       credential:                      null,
+      initialMachinePoolsValues:       {},
       machinePools:                    null,
       rke2Versions:                    null,
       k3sVersions:                     null,
@@ -255,7 +257,7 @@ export default {
       }],
       harvesterVersionRange:                    {},
       complianceOverride:                       false,
-      truncateLimit,
+      truncateLimit:                            this.value.defaultHostnameLengthLimit || 0,
       busy:                                     false,
       machinePoolValidation:                    {}, // map of validation states for each machine pool
       machinePoolErrors:                        {},
@@ -271,13 +273,14 @@ export default {
       isAuthenticated:                          this.provider !== GOOGLE || this.mode === _EDIT,
       projectId:                                null,
       REGISTRIES_TAB_NAME,
-      labelForAddon
-
+      labelForAddon,
+      etcdConfigValid:                          true,
     };
   },
 
   computed: {
     ...mapGetters({ features: 'features/get' }),
+
     isActiveTabRegistries() {
       return this.activeTab?.selectedName === REGISTRIES_TAB_NAME;
     },
@@ -856,7 +859,16 @@ export default {
       set(newValue) {
         this.$emit('update:value', newValue);
       }
-    }
+    },
+    hideFooter() {
+      return this.needCredential && !this.credential;
+    },
+
+    overallFormValidationPassed() {
+      return this.validationPassed &&
+            this.fvFormIsValid &&
+            this.etcdConfigValid;
+    },
   },
 
   watch: {
@@ -946,6 +958,7 @@ export default {
     this.registerBeforeHook(this.setRegistryConfig, 'set-registry-config');
     this.registerBeforeHook(this.handleVsphereCpiSecret, 'sync-vsphere-cpi');
     this.registerBeforeHook(this.handleVsphereCsiSecret, 'sync-vsphere-csi');
+    this.registerBeforeHook(this.setHarvesterChartValues, 'set-harvester-chart-values');
     this.registerAfterHook(this.cleanupMachinePools, 'cleanup-machine-pools');
     this.registerAfterHook(this.saveRoleBindings, 'save-role-bindings');
 
@@ -1214,7 +1227,7 @@ export default {
           // @TODO what if the pool is missing?
           const id = `pool${ ++this.lastIdx }`;
 
-          out.push({
+          const poolData = {
             id,
             remove: false,
             create: false,
@@ -1222,7 +1235,15 @@ export default {
             pool:   clone(pool),
             config: config ? await this.$store.dispatch('management/clone', { resource: config }) : null,
             configMissing
-          });
+          };
+
+          // add data to machine pools array
+          out.push(poolData);
+
+          // but we also store the initial data so that we can handle conflicts
+          if (poolData?.config?.id) {
+            this.initialMachinePoolsValues[poolData.config.id] = structuredClone(poolData.config);
+          }
         }
       }
 
@@ -1317,17 +1338,25 @@ export default {
         const _latestConfig = await this.$store.dispatch('management/request', { url: `/v1/${ machinePool.config.type }s/${ machinePool.config.id }` });
         const latestConfig = await this.$store.dispatch('management/create', _latestConfig);
 
-        const clonedCurrentConfig = await this.$store.dispatch('management/clone', { resource: machinePool.config });
-        const clonedLatestConfig = await this.$store.dispatch('management/clone', { resource: latestConfig });
-
-        // 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;
+        const _initialMachinePoolValue = this.initialMachinePoolsValues[machinePool?.config?.id] || {};
+        const initialMachinePoolValue = await this.$store.dispatch('management/create', _initialMachinePoolValue);
+
+        // if there's the initial machine pool config, we are in a good position to apply the handleConflict function
+        // to deal with out-of-sync data between machinePools configs. This also mutates the data inside machinePool.config through object reference
+        const conflict = await handleConflict(
+          initialMachinePoolValue,
+          machinePool.config,
+          latestConfig,
+          {
+            dispatch: this.$store.dispatch,
+            getters:  this.$store.getters
+          },
+          'management'
+        );
 
-        if (this.provider === VMWARE_VSPHERE || this.provider === GOOGLE) {
-          machinePool.config = mergeWithReplace(clonedLatestConfig, clonedCurrentConfig, { mutateOriginal: true });
-        } else {
-          machinePool.config = merge(clonedLatestConfig, clonedCurrentConfig);
+        // if there's conflicts, throw Error stops save process and surfaces error to user
+        if (conflict) {
+          throw Error(conflict);
         }
       }
     },
@@ -1536,41 +1565,7 @@ export default {
       }
 
       try {
-        const clusterId = get(this.credential, 'decodedData.clusterId') || '';
-
         this.applyChartValues(this.value.spec.rkeConfig);
-
-        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', {
-            url:    `/k8s/clusters/${ clusterId }/v1/harvester/kubeconfig`,
-            method: 'POST',
-            data:   {
-              csiClusterRoleName: 'harvesterhci.io:csi-driver',
-              clusterRoleName:    'harvesterhci.io:cloudprovider',
-              namespace,
-              serviceAccountName: this.value.metadata.name,
-            },
-          });
-
-          const kubeconfig = res.data;
-
-          const harvesterKubeconfigSecret = await this.createKubeconfigSecret(kubeconfig);
-
-          this.agentConfig['cloud-provider-config'] = `secret://fleet-default:${ harvesterKubeconfigSecret?.metadata?.name }`;
-
-          if (this.isCreate) {
-            set(this.chartValues, `${ HARVESTER_CLOUD_PROVIDER }.global.cattle.clusterName`, this.value.metadata.name);
-          }
-
-          const distroSubdir = this.value?.spec?.kubernetesVersion?.includes('k3s') ? DEFAULT_SUBDIRS.K8S_DISTRO_K3S : DEFAULT_SUBDIRS.K8S_DISTRO_RKE2;
-          const distroRoot = this.value?.spec?.rkeConfig?.dataDirectories?.k8sDistro?.length ? this.value?.spec?.rkeConfig?.dataDirectories?.k8sDistro : `${ DEFAULT_COMMON_BASE_PATH }/${ distroSubdir }`;
-
-          set(this.chartValues, `${ HARVESTER_CLOUD_PROVIDER }.cloudConfigPath`, `${ distroRoot }/etc/config-files/cloud-provider-config`);
-        }
       } catch (err) {
         this.errors.push(err);
 
@@ -1617,6 +1612,62 @@ export default {
       }
     },
 
+    async setHarvesterChartValues() {
+      const isHarvester = this.agentConfig?.['cloud-provider-name'] === HARVESTER;
+
+      if (!isHarvester) {
+        return;
+      }
+      try {
+        const clusterId = get(this.credential, 'decodedData.clusterId') || '';
+        const isUpgrade = this.isEdit && this.liveValue?.spec?.kubernetesVersion !== this.value?.spec?.kubernetesVersion;
+
+        if (!this.value?.metadata?.name) {
+          const err = this.t('cluster.harvester.kubeconfigSecret.nameRequired');
+
+          throw new Error(err);
+        }
+
+        if (clusterId && (this.isCreate || isUpgrade)) {
+          const namespace = this.machinePools?.[0]?.config?.vmNamespace;
+
+          const res = await this.$store.dispatch('management/request', {
+            url:    `/k8s/clusters/${ clusterId }/v1/harvester/kubeconfig`,
+            method: 'POST',
+            data:   {
+              csiClusterRoleName: 'harvesterhci.io:csi-driver',
+              clusterRoleName:    'harvesterhci.io:cloudprovider',
+              namespace,
+              serviceAccountName: this.value.metadata.name,
+            },
+          });
+
+          const kubeconfig = res.data;
+
+          const harvesterKubeconfigSecret = await this.createKubeconfigSecret(kubeconfig);
+
+          this.agentConfig['cloud-provider-config'] = `secret://fleet-default:${ harvesterKubeconfigSecret?.metadata?.name }`;
+
+          const harvesterCloudProviderKey = this.chartVersionKey(HARVESTER_CLOUD_PROVIDER);
+
+          if (this.isCreate) {
+            set(this.userChartValues, `'${ harvesterCloudProviderKey }'.global.cattle.clusterName`, this.value.metadata.name);
+          }
+
+          const distroSubdir = this.value?.spec?.kubernetesVersion?.includes('k3s') ? DEFAULT_SUBDIRS.K8S_DISTRO_K3S : DEFAULT_SUBDIRS.K8S_DISTRO_RKE2;
+          const distroRoot = this.value?.spec?.rkeConfig?.dataDirectories?.k8sDistro?.length ? this.value?.spec?.rkeConfig?.dataDirectories?.k8sDistro : `${ DEFAULT_COMMON_BASE_PATH }/${ distroSubdir }`;
+
+          set(this.userChartValues, `'${ harvesterCloudProviderKey }'.cloudConfigPath`, `${ distroRoot }/etc/config-files/cloud-provider-config`);
+        }
+      } catch (e) {
+        const cause = e.errors ? e.errors.join('; ') : e?.message;
+        const msg = this.t('cluster.harvester.kubeconfigSecret.error', { err: cause });
+
+        this.errors.push(msg);
+        throw new Error(msg);
+      }
+    },
+
     // create a secret to reference the harvester cluster kubeconfig in rkeConfig
     async createKubeconfigSecret(kubeconfig = '') {
       const clusterName = this.value.metadata.name;
@@ -1806,12 +1857,12 @@ export default {
 
       const hasMirrorsOrAuthConfig = Object.keys(regs.configs).length > 0 || Object.keys(regs.mirrors).length > 0;
 
-      if (this.registryHost || registrySecret || hasMirrorsOrAuthConfig) {
+      if (this.registryHost || registrySecret) {
         this.showCustomRegistryInput = true;
+      }
 
-        if (hasMirrorsOrAuthConfig) {
-          this.showCustomRegistryAdvancedInput = true;
-        }
+      if (hasMirrorsOrAuthConfig) {
+        this.showCustomRegistryAdvancedInput = true;
       }
     },
 
@@ -1893,6 +1944,7 @@ export default {
 
       charts.forEach((name) => {
         const key = this.chartVersionKey(name);
+
         const userValues = this.userChartValues[key];
 
         if (userValues) {
@@ -2126,7 +2178,7 @@ export default {
 
     handleTabChange(data) {
       this.activeTab = data;
-    }
+    },
   }
 };
 </script>
@@ -2142,7 +2194,7 @@ export default {
     v-else
     ref="cruresource"
     :mode="mode"
-    :validation-passed="validationPassed && fvFormIsValid"
+    :validation-passed="overallFormValidationPassed"
     :resource="value"
     :errors="errors"
     :cancel-event="true"
@@ -2174,7 +2226,10 @@ export default {
       @error="e=>errors.push(e)"
       @cancel-credential="cancelCredential"
     />
-    <div v-else>
+    <div
+      v-else
+      class="authenticated"
+    >
       <SelectCredential
         v-if="needCredential"
         v-model:value="credentialId"
@@ -2376,6 +2431,7 @@ export default {
               @update:value="$emit('input', $event)"
               @s3-backup-changed="handleS3BackupChanged"
               @config-etcd-expose-metrics-changed="handleConfigEtcdExposeMetricsChanged"
+              @etcd-validation-changed="(val)=>etcdConfigValid = val"
             />
           </Tab>
 
@@ -2568,7 +2624,7 @@ export default {
       />
     </div>
     <template
-      v-if="needCredential && !credentialId"
+      v-if="hideFooter"
       #form-footer
     >
       <div><!-- Hide the outer footer --></div>
@@ -2577,6 +2633,12 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+.authenticated {
+    display:flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
 .min-height {
   min-height: 40em;
 }

package/edit/provisioning.cattle.io.cluster/tabs/AgentConfiguration.vue

@@ -81,6 +81,14 @@ export default {
   },
 
   data() {
+    return {
+      defaultAffinity: {},
+      affinitySetting: DEFAULT,
+      nodeAffinity:    {}
+    };
+  },
+
+  created() {
     const nodeAffinity = this.value?.overrideAffinity?.nodeAffinity;
     const podAffinity = this.value?.overrideAffinity?.podAffinity;
     const podAntiAffinity = this.value?.overrideAffinity?.podAntiAffinity;
@@ -93,14 +101,8 @@ export default {
       hasAffinityPopulated = true;
     }
 
-    return {
-      defaultAffinity: {},
-      affinitySetting: hasAffinityPopulated ? CUSTOM : DEFAULT,
-      nodeAffinity:    {}
-    };
-  },
+    this.affinitySetting = hasAffinityPopulated ? CUSTOM : DEFAULT;
 
-  created() {
     this.ensureValue();
   },
 

package/edit/provisioning.cattle.io.cluster/tabs/Basics.vue

@@ -3,7 +3,6 @@ import difference from 'lodash/difference';
 import { mapGetters } from 'vuex';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import FormValidation from '@shell/mixins/form-validation';
-
 import { set, get } from '@shell/utils/object';
 import { Banner } from '@components/Banner';
 import { Checkbox } from '@components/Form/Checkbox';
@@ -11,7 +10,6 @@ import LabeledSelect from '@shell/components/form/LabeledSelect';
 import YamlEditor from '@shell/components/YamlEditor';
 import { LEGACY } from '@shell/store/features';
 import semver from 'semver';
-import { _CREATE, _EDIT } from '@shell/config/query-params';
 
 const HARVESTER = 'harvester';
 
@@ -119,12 +117,23 @@ export default {
     }
   },
 
+  data() {
+    return {
+      showEnablingComplianceWarning: false,
+      initialAgentProfile:           this.value.agentConfig?.profile || ''
+    };
+  },
+
   watch: {
     selectedVersion(neu, old) {
       if (neu?.value !== old?.value && this.ciliumIpv6) {
         // Re-assign so that the setter updates the structure for the new k8s version if needed
         this.ciliumIpv6 = !!this.ciliumIpv6;
       }
+    },
+
+    'agentConfig.profile'(newValue) {
+      this.showEnablingComplianceWarning = this.provider === 'custom' && this.isEdit && !!newValue && newValue !== this.initialAgentProfile;
     }
   },
 
@@ -382,10 +391,6 @@ export default {
       }
     },
 
-    isEdit() {
-      return this.mode === _EDIT;
-    },
-
     canNotEditCloudProvider() {
       if (!this.isEdit) {
         return false;
@@ -405,14 +410,14 @@ export default {
      * Display warning about unsupported Azure provider if k8s >= 1.30
      */
     showCloudProviderUnsupportedAzureWarning() {
-      return this.showCloudProvider && this.mode === _CREATE && this.isAzureProviderUnsupported;
+      return this.showCloudProvider && this.isCreate && this.isAzureProviderUnsupported;
     },
 
     /**
      * Display warning about Azure provider migration from k8s versions >= 1.27 to External provider
      */
     showCloudProviderMigrateAzureWarning() {
-      return this.showCloudProvider && this.mode === _EDIT && this.canAzureMigrateOnEdit;
+      return this.showCloudProvider && this.isEdit && this.canAzureMigrateOnEdit;
     }
   },
 
@@ -579,11 +584,8 @@ export default {
       <p v-clean-html="t('cluster.rke2.banner.complianceUnsupported', {profile: serverConfig.profile || agentConfig.profile}, true)" />
     </Banner>
 
-    <div class="row mb-10">
-      <div
-        v-if="showComplianceProfile"
-        class="col span-6"
-      >
+    <div v-if="showComplianceProfile">
+      <div class="col span-6">
         <LabeledSelect
           v-if="serverArgs && serverArgs.profile && serverConfig"
           v-model:value="serverConfig.profile"
@@ -602,6 +604,13 @@ export default {
           @update:value="$emit('compliance-changed')"
         />
       </div>
+      <div class="row mb-10">
+        <Banner
+          v-if="showEnablingComplianceWarning"
+          color="warning"
+          label-key="cluster.rke2.compliance.warning"
+        />
+      </div>
     </div>
 
     <template v-if="hasComplianceOverride">

package/edit/provisioning.cattle.io.cluster/tabs/DirectoryConfig.vue

@@ -44,23 +44,21 @@ export default {
     },
   },
   data() {
-    let dataConfigRadioValue = DATA_DIR_RADIO_OPTIONS.DEFAULT;
-    let k8sDistroSubDir = DEFAULT_SUBDIRS.K8S_DISTRO_RKE2;
-
+    return {
+      DATA_DIR_RADIO_OPTIONS,
+      dataConfigRadioValue: DATA_DIR_RADIO_OPTIONS.DEFAULT,
+      k8sDistroSubDir:      DEFAULT_SUBDIRS.K8S_DISTRO_RKE2,
+      commonConfig:         '',
+    };
+  },
+  created() {
     if (this.k8sVersion && this.k8sVersion.includes('k3s')) {
-      k8sDistroSubDir = DEFAULT_SUBDIRS.K8S_DISTRO_K3S;
+      this.k8sDistroSubDir = DEFAULT_SUBDIRS.K8S_DISTRO_K3S;
     }
 
     if (this.mode !== _CREATE) {
-      dataConfigRadioValue = DATA_DIR_RADIO_OPTIONS.CUSTOM;
+      this.dataConfigRadioValue = DATA_DIR_RADIO_OPTIONS.CUSTOM;
     }
-
-    return {
-      DATA_DIR_RADIO_OPTIONS,
-      dataConfigRadioValue,
-      k8sDistroSubDir,
-      commonConfig: '',
-    };
   },
   watch: {
     commonConfig(neu) {

package/edit/provisioning.cattle.io.cluster/tabs/MachinePool.vue

@@ -89,47 +89,10 @@ export default {
   },
 
   data() {
-    const parseDuration = (duration) => {
-      // The back end stores the timeout in Duration format, for example, "42d31h10m30s".
-      // Here we convert that string to an integer and return the duration as seconds.
-      const splitStr = duration.split(/([a-z])/);
-
-      const durationsAsSeconds = splitStr.reduce((old, neu, idx) => {
-        const parsed = parseInt(neu);
-
-        if ( isNaN(parsed) ) {
-          return old;
-        }
-
-        const interval = splitStr[(idx + 1)];
-
-        switch (interval) {
-        case 'd':
-          old.push(parsed * 24 * 60 * 60);
-          break;
-        case 'h':
-          old.push(parsed * 60 * 60);
-          break;
-        case 'm':
-          old.push(parsed * 60);
-          break;
-        case 's':
-          old.push(parsed);
-          break;
-        default:
-          break;
-        }
-
-        return old;
-      }, []);
-
-      return durationsAsSeconds.reduce((old, neu) => old + neu);
-    };
-
     return {
       uuid: randomStr(),
 
-      unhealthyNodeTimeoutInteger: this.value.pool.unhealthyNodeTimeout ? parseDuration(this.value.pool.unhealthyNodeTimeout) : 0,
+      unhealthyNodeTimeoutInteger: 0,
 
       validationErrors: [],
 
@@ -183,6 +146,8 @@ export default {
    * On creation, ensure that the pool is marked valid - custom machine pools can emit further validation events
    */
   created() {
+    this.unhealthyNodeTimeoutInteger = this.value.pool.unhealthyNodeTimeout ? this.parseDuration(this.value.pool.unhealthyNodeTimeout) : 0;
+
     this.$emit('validationChanged', true);
   },
 
@@ -192,6 +157,42 @@ export default {
   },
 
   methods: {
+    parseDuration(duration) {
+      // The back end stores the timeout in Duration format, for example, "42d31h10m30s".
+      // Here we convert that string to an integer and return the duration as seconds.
+      const splitStr = duration.split(/([a-z])/);
+
+      const durationsAsSeconds = splitStr.reduce((old, neu, idx) => {
+        const parsed = parseInt(neu);
+
+        if ( isNaN(parsed) ) {
+          return old;
+        }
+
+        const interval = splitStr[(idx + 1)];
+
+        switch (interval) {
+        case 'd':
+          old.push(parsed * 24 * 60 * 60);
+          break;
+        case 'h':
+          old.push(parsed * 60 * 60);
+          break;
+        case 'm':
+          old.push(parsed * 60);
+          break;
+        case 's':
+          old.push(parsed);
+          break;
+        default:
+          break;
+        }
+
+        return old;
+      }, []);
+
+      return durationsAsSeconds.reduce((old, neu) => old + neu);
+    },
     emitError(e) {
       this.$emit('error', e);
     },