@rancher/shell 2.0.0 → 2.0.2-rc.1

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

@@ -29,7 +29,7 @@ import { sortBy } from '@shell/utils/sort';
 import { vspherePoolConfigMerge } from '@shell/machine-config/vmwarevsphere-pool-config-merge';
 
 import { compare, sortable } from '@shell/utils/version';
-import { isHarvesterSatisfiesVersion } from '@shell/utils/cluster';
+import { isHarvesterSatisfiesVersion, labelForAddon } from '@shell/utils/cluster';
 
 import { BadgeState } from '@components/BadgeState';
 import { Banner } from '@components/Banner';
@@ -42,6 +42,7 @@ import Tabbed from '@shell/components/Tabbed';
 import { canViewClusterMembershipEditor } from '@shell/components/form/Members/ClusterMembershipEditor';
 import semver from 'semver';
 
+import { CLOUD_CREDENTIAL_OVERRIDE } from '@shell/models/nodedriver';
 import { SETTING } from '@shell/config/settings';
 import { base64Encode } from '@shell/utils/crypto';
 import { CAPI as CAPI_ANNOTATIONS, CLUSTER_BADGE } from '@shell/config/labels-annotations';
@@ -62,6 +63,7 @@ import Registries from '@shell/edit/provisioning.cattle.io.cluster/tabs/registri
 import AddOnConfig from '@shell/edit/provisioning.cattle.io.cluster/tabs/AddOnConfig';
 import Advanced from '@shell/edit/provisioning.cattle.io.cluster/tabs/Advanced';
 import ClusterAppearance from '@shell/components/form/ClusterAppearance';
+import AddOnAdditionalManifest from '@shell/edit/provisioning.cattle.io.cluster/tabs/AddOnAdditionalManifest';
 
 const HARVESTER = 'harvester';
 const HARVESTER_CLOUD_PROVIDER = 'harvester-cloud-provider';
@@ -89,6 +91,8 @@ const NODE_TOTAL = {
 const CLUSTER_AGENT_CUSTOMIZATION = 'clusterAgentDeploymentCustomization';
 const FLEET_AGENT_CUSTOMIZATION = 'fleetAgentDeploymentCustomization';
 
+const isAzureK8sUnsupported = (version) => semver.gte(version, '1.30.0');
+
 export default {
   components: {
     AgentEnv,
@@ -111,7 +115,8 @@ export default {
     Registries,
     AddOnConfig,
     Advanced,
-    ClusterAppearance
+    ClusterAppearance,
+    AddOnAdditionalManifest
   },
 
   mixins: [CreateEditView, FormValidation],
@@ -171,6 +176,7 @@ export default {
       });
     }
 
+    // default for dataDirectories configuration obj
     if (!this.value.spec.rkeConfig.dataDirectories) {
       set(this.value.spec.rkeConfig, 'dataDirectories', {
         systemAgent:  '',
@@ -179,6 +185,19 @@ export default {
       });
     }
 
+    // default for dataDirectories configuration systemAgent config
+    if (!this.value.spec.rkeConfig.dataDirectories.systemAgent) {
+      set(this.value.spec.rkeConfig.dataDirectories, 'systemAgent', '');
+    }
+    // default for dataDirectories configuration provisioning config
+    if (!this.value.spec.rkeConfig.dataDirectories.provisioning) {
+      set(this.value.spec.rkeConfig.dataDirectories, 'provisioning', '');
+    }
+    // default for dataDirectories configuration k8sDistro config
+    if (!this.value.spec.rkeConfig.dataDirectories.k8sDistro) {
+      set(this.value.spec.rkeConfig.dataDirectories, 'k8sDistro', '');
+    }
+
     if (!this.value.spec.rkeConfig.machineGlobalConfig) {
       set(this.value.spec, 'rkeConfig.machineGlobalConfig', {});
     }
@@ -230,6 +249,7 @@ export default {
       machinePoolErrors:     {},
       allNamespaces:         [],
       extensionTabs:         getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, TabLocation.CLUSTER_CREATE_RKE2, this.$route, this),
+      labelForAddon
     };
   },
 
@@ -297,6 +317,7 @@ 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 isAzure = this.agentConfig?.['cloud-provider-name'] === 'azure';
 
       let allValidRke2Versions = this.getAllOptionsAfterCurrentVersion(this.rke2Versions, (existingRke2 ? cur : null), this.defaultRke2);
       let allValidK3sVersions = this.getAllOptionsAfterCurrentVersion(this.k3sVersions, (existingK3s ? cur : null), this.defaultK3s);
@@ -309,6 +330,11 @@ export default {
         allValidK3sVersions = this.filterOutDeprecatedPatchVersions(allValidK3sVersions, cur);
       }
 
+      if (isAzure) {
+        allValidRke2Versions = allValidRke2Versions.filter((v) => !isAzureK8sUnsupported(v.value));
+        allValidK3sVersions = allValidK3sVersions.filter((v) => !isAzureK8sUnsupported(v.value));
+      }
+
       const showRke2 = allValidRke2Versions.length && !existingK3s;
       const showK3s = allValidK3sVersions.length && !existingRke2;
       const out = [];
@@ -356,7 +382,7 @@ export default {
       // https://github.com/rancher/dashboard/issues/10338
       // there's an update loop on refresh that might include 'none'
       // multiple times... Prevent that
-      if (out.serverArgs?.cni?.options && !out.serverArgs?.cni?.options.includes('none')) {
+      if (out?.serverArgs?.cni?.options && !out.serverArgs?.cni?.options.includes('none')) {
         out.serverArgs.cni.options.push('none');
       }
 
@@ -385,11 +411,22 @@ export default {
     },
 
     needCredential() {
-      if (this.provider === 'custom' || this.provider === 'import' || this.isElementalCluster || this.mode === _VIEW || (this.providerConfig?.spec?.builtin === false && this.providerConfig?.spec?.addCloudCredential === false)) {
+      // Check non-provider specific config
+      if (
+        this.provider === 'custom' ||
+        this.provider === 'import' ||
+        this.isElementalCluster || // Elemental cluster can make use of `cloud-credential`: false
+        this.mode === _VIEW
+      ) {
         return false;
       }
 
-      if (this.customCredentialComponentRequired === false) {
+      // Check provider specific config
+      if (this.cloudCredentialsOverride === true || this.cloudCredentialsOverride === false) {
+        return this.cloudCredentialsOverride;
+      }
+
+      if (this.providerConfig?.spec?.builtin === false && this.providerConfig?.spec?.addCloudCredential === false) {
         return false;
       }
 
@@ -397,10 +434,21 @@ export default {
     },
 
     /**
-     * Only for extensions - extension can register a 'false' cloud credential to indicate that a cloud credential is not needed
+     * Override the native way of determining if cloud credentials are required (builtin ++ node driver spec.addCloudCredentials)
+     *
+     * 1) Override via extensions
+     *    - `true` or actual component - return true
+     *    - `false` - return false
+     * 2) Override via hardcoded setting
      */
-    customCredentialComponentRequired() {
-      return this.$plugin.getDynamic('cloud-credential', this.provider);
+    cloudCredentialsOverride() {
+      const cloudCredential = this.$plugin.getDynamic('cloud-credential', this.provider);
+
+      if (cloudCredential === undefined) {
+        return CLOUD_CREDENTIAL_OVERRIDE[this.provider];
+      }
+
+      return !!cloudCredential;
     },
 
     hasMachinePools() {
@@ -580,8 +628,9 @@ export default {
 
     cloudProviderOptions() {
       const out = [{
-        label: this.$store.getters['i18n/t']('cluster.rke2.cloudProvider.defaultValue.label'),
-        value: '',
+        label:    this.$store.getters['i18n/t']('cluster.rke2.cloudProvider.defaultValue.label'),
+        value:    '',
+        disabled: this.canAzureMigrateOnEdit
       }];
 
       if (!!this.agentArgs['cloud-provider-name']?.options) {
@@ -593,12 +642,22 @@ export default {
           // If we have a preferred provider... only show default, preferred and external
           const isPreferred = opt === preferred;
           const isExternal = opt === 'external';
+          const isAzure = opt === 'azure';
+
           let disabled = false;
 
           if ((this.isHarvesterExternalCredential || this.isHarvesterIncompatible) && isPreferred) {
             disabled = true;
           }
 
+          if (isAzure && isAzureK8sUnsupported(this.value.spec.kubernetesVersion)) {
+            disabled = true;
+          }
+
+          if (!isAzure && !isExternal && this.canAzureMigrateOnEdit) {
+            disabled = true;
+          }
+
           if (showAllOptions || isPreferred || isExternal) {
             out.push({
               label: this.$store.getters['i18n/withFallback'](`cluster.cloudProvider."${ opt }".label`, null, opt),
@@ -618,6 +677,25 @@ export default {
       return out;
     },
 
+    isAzureProviderUnsupported() {
+      const isAzureAvailable = !!this.cloudProviderOptions.find((p) => p.value === 'azure');
+      const isAzureSelected = this.agentConfig['cloud-provider-name'] === 'azure';
+
+      return isAzureAvailable && (isAzureK8sUnsupported(this.value.spec.kubernetesVersion) || isAzureSelected);
+    },
+
+    canAzureMigrateOnEdit() {
+      if (!this.isEdit) {
+        return false;
+      }
+
+      const isAzureLiveProvider = this.liveValue.agentConfig['cloud-provider-name'] === 'azure';
+
+      return isAzureLiveProvider &&
+        semver.gte(this.liveValue?.spec?.kubernetesVersion, '1.27.0') &&
+        semver.lt(this.liveValue?.spec?.kubernetesVersion, '1.30.0');
+    },
+
     canManageMembers() {
       return canViewClusterMembershipEditor(this.$store);
     },
@@ -1508,7 +1586,9 @@ export default {
     refreshComponentWithYamls(key) {
       const component = this.$refs[key];
 
-      if (component) {
+      if (Array.isArray(component) && component.length > 0) {
+        this.refreshYamls(component[0].$refs);
+      } else if (component) {
         this.refreshYamls(component.$refs);
       }
     },
@@ -2225,6 +2305,8 @@ export default {
             :show-cni="showCni"
             :show-cloud-provider="showCloudProvider"
             :cloud-provider-options="cloudProviderOptions"
+            :is-azure-provider-unsupported="isAzureProviderUnsupported"
+            :can-azure-migrate-on-edit="canAzureMigrateOnEdit"
             @cilium-values-changed="handleCiliumValuesChanged"
             @enabled-system-services-changed="handleEnabledSystemServicesChanged"
             @kubernetes-changed="handleKubernetesChange"
@@ -2309,23 +2391,39 @@ export default {
           />
         </Tab>
 
-        <!-- Add-on Config -->
+        <!-- Add-on Configs -->
         <Tab
-          name="addons"
-          label-key="cluster.tabs.addons"
-          @active="showAddons('tab-addOnConfig')"
+          v-for="v in addonVersions"
+          :key="v.name"
+          :name="v.name"
+          :label="labelForAddon(v.name, false)"
+          :weight="9"
+          :showHeader="false"
+          @active="showAddons(v.name)"
         >
           <AddOnConfig
-            ref="tab-addOnConfig"
+            :ref="v.name"
             v-model="value"
             :mode="mode"
             :version-info="versionInfo"
-            :addon-versions="addonVersions"
+            :addon-version="v"
             :addons-rev="addonsRev"
             :user-chart-values-temp="userChartValuesTemp"
             :init-yaml-editor="initYamlEditor"
             @update-questions="syncChartValues"
             @update-values="updateValues"
+          />
+        </Tab>
+
+        <!-- Add-on Additional Manifest -->
+        <Tab
+          name="additionalmanifest"
+          label-key="cluster.tabs.addOnAdditionalManifest"
+          :showHeader="false"
+        >
+          <AddOnAdditionalManifest
+            :value="value"
+            :mode="mode"
             @additional-manifest-changed="updateAdditionalManifest"
           />
         </Tab>

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

@@ -0,0 +1,50 @@
+<script>
+import YamlEditor from '@shell/components/YamlEditor';
+
+export default {
+  components: { YamlEditor },
+
+  props: {
+    mode: {
+      type:     String,
+      required: true,
+    },
+
+    value: {
+      type:     Object,
+      required: true,
+    }
+
+  },
+
+  computed: {
+    additionalManifest: {
+      get() {
+        return this.value.spec.rkeConfig.additionalManifest;
+      },
+      set(neu) {
+        this.$emit('additional-manifest-changed', neu);
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+    <h3>
+      {{ t('cluster.addOns.additionalManifest.title') }}
+      <i
+        v-clean-tooltip="t('cluster.addOns.additionalManifest.tooltip')"
+        class="icon icon-info"
+      />
+    </h3>
+    <YamlEditor
+      ref="yaml-additional"
+      v-model="additionalManifest"
+      :editor-mode="mode === 'view' ? 'VIEW_CODE' : 'EDIT_CODE'"
+      initial-yaml-values="# Additional Manifest YAML"
+      class="yaml-editor"
+    />
+  </div>
+</template>

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

@@ -3,7 +3,7 @@ import { Banner } from '@components/Banner';
 
 import Questions from '@shell/components/Questions';
 import YamlEditor from '@shell/components/YamlEditor';
-import { camelToTitle } from '@shell/utils/string';
+import { labelForAddon } from '@shell/utils/cluster';
 import { _EDIT } from '@shell/config/query-params';
 
 export default {
@@ -29,8 +29,8 @@ export default {
       required: true,
     },
 
-    addonVersions: {
-      type:     Array,
+    addonVersion: {
+      type:     Object,
       required: false,
       default:  null
     },
@@ -50,28 +50,15 @@ export default {
 
   },
 
+  data() {
+    return { labelForAddon };
+  },
+
   computed: {
-    additionalManifest: {
-      get() {
-        return this.value.spec.rkeConfig.additionalManifest;
-      },
-      set(neu) {
-        this.$emit('additional-manifest-changed', neu);
-      }
-    },
     isEdit() {
       return this.mode === _EDIT;
     },
-  },
-
-  methods: {
-
-    labelForAddon(name) {
-      const fallback = `${ camelToTitle(name.replace(/^(rke|rke2|rancher)-/, '')) } Configuration`;
-
-      return this.$store.getters['i18n/withFallback'](`cluster.addonChart."${ name }"`, null, fallback);
-    },
-  },
+  }
 };
 </script>
 
@@ -84,54 +71,32 @@ export default {
       {{ t('cluster.addOns.dependencyBanner') }}
     </Banner>
     <div
-      v-if="versionInfo && addonVersions.length"
+      v-if="versionInfo && addonVersion"
       :key="addonsRev"
     >
-      <div
-        v-for="v in addonVersions"
-        :key="v._key"
-      >
-        <h3>{{ labelForAddon(v.name) }}</h3>
-        <Questions
-          v-if="versionInfo[v.name] && versionInfo[v.name].questions && v.name && userChartValuesTemp[v.name]"
-          v-model="userChartValuesTemp[v.name]"
-          :emit="true"
-          in-store="management"
-          :mode="mode"
-          :tabbed="false"
-          :source="versionInfo[v.name]"
-          :target-namespace="value.metadata.namespace"
-          @updated="$emit('update-questions', v.name)"
-        />
-        <YamlEditor
-          v-else
-          ref="yaml-values"
-          :value="initYamlEditor(v.name)"
-          :scrolling="true"
-          :as-object="true"
-          :editor-mode="mode === 'view' ? 'VIEW_CODE' : 'EDIT_CODE'"
-          :hide-preview-buttons="true"
-          @input="data => $emit('update-values', v.name, data)"
-        />
-        <div class="spacer" />
-      </div>
-    </div>
-
-    <div>
-      <h3>
-        {{ t('cluster.addOns.additionalManifest.title') }}
-        <i
-          v-clean-tooltip="t('cluster.addOns.additionalManifest.tooltip')"
-          class="icon icon-info"
-        />
-      </h3>
+      <h3>{{ labelForAddon(addonVersion.name) }}</h3>
+      <Questions
+        v-if="versionInfo[addonVersion.name] && versionInfo[addonVersion.name].questions && addonVersion.name && userChartValuesTemp[addonVersion.name]"
+        v-model="userChartValuesTemp[addonVersion.name]"
+        :emit="true"
+        in-store="management"
+        :mode="mode"
+        :tabbed="false"
+        :source="versionInfo[addonVersion.name]"
+        :target-namespace="value.metadata.namespace"
+        @updated="$emit('update-questions', addonVersion.name)"
+      />
       <YamlEditor
-        ref="yaml-additional"
-        v-model="additionalManifest"
+        v-else
+        ref="yaml-values"
+        :value="initYamlEditor(addonVersion.name)"
+        :scrolling="true"
+        :as-object="true"
         :editor-mode="mode === 'view' ? 'VIEW_CODE' : 'EDIT_CODE'"
-        initial-yaml-values="# Additional Manifest YAML"
-        class="yaml-editor"
+        :hide-preview-buttons="true"
+        @input="data => $emit('update-values', addonVersion.name, data)"
       />
+      <div class="spacer" />
     </div>
   </div>
 </template>

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

@@ -11,7 +11,7 @@ import LabeledSelect from '@shell/components/form/LabeledSelect';
 import YamlEditor from '@shell/components/YamlEditor';
 import { LEGACY } from '@shell/store/features';
 import semver from 'semver';
-import { _EDIT } from '@shell/config/query-params';
+import { _CREATE, _EDIT } from '@shell/config/query-params';
 
 const HARVESTER = 'harvester';
 
@@ -106,6 +106,14 @@ export default {
     cloudProviderOptions: {
       type:     Array,
       required: true
+    },
+    isAzureProviderUnsupported: {
+      type:     Boolean,
+      required: true
+    },
+    canAzureMigrateOnEdit: {
+      type:     Boolean,
+      required: true
     }
   },
 
@@ -377,9 +385,11 @@ export default {
     },
 
     canNotEditCloudProvider() {
-      const canNotEdit = this.isEdit;
+      if (!this.isEdit) {
+        return false;
+      }
 
-      return canNotEdit;
+      return !this.canAzureMigrateOnEdit;
     },
 
     /**
@@ -387,6 +397,20 @@ export default {
      */
     showCloudProviderAmazonAdditionalConfigWarning() {
       return !!semver.gte(this.value.spec.kubernetesVersion, 'v1.27.0') && this.agentConfig?.['cloud-provider-name'] === 'aws';
+    },
+
+    /**
+     * Display warning about unsupported Azure provider if k8s >= 1.30
+     */
+    showCloudProviderUnsupportedAzureWarning() {
+      return this.showCloudProvider && this.mode === _CREATE && 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;
     }
   },
 
@@ -423,6 +447,20 @@ export default {
         v-clean-html="t('cluster.harvester.warning.cloudProvider.incompatible', null, true)"
       />
     </Banner>
+    <Banner
+      v-if="showCloudProviderUnsupportedAzureWarning"
+      color="warning"
+      data-testid="clusterBasics__showCloudProviderUnsupportedAzureWarning"
+    >
+      <span v-clean-html="t('cluster.banner.cloudProviderUnsupportedAzure', {}, true)" />
+    </Banner>
+    <Banner
+      v-if="showCloudProviderMigrateAzureWarning"
+      color="warning"
+      data-testid="clusterBasics__showCloudProviderMigrateAzureWarning"
+    >
+      <span v-clean-html="t('cluster.banner.cloudProviderMigrateAzure', {}, true)" />
+    </Banner>
     <Banner
       v-if="showCloudProviderAmazonAdditionalConfigWarning"
       color="warning"
@@ -461,6 +499,7 @@ export default {
         <LabeledSelect
           v-if="agentConfig"
           v-model="agentConfig['cloud-provider-name']"
+          data-testid="clusterBasics__cloudProvider"
           :mode="mode"
           :disabled="canNotEditCloudProvider"
           :options="cloudProviderOptions"