@rancher/shell 0.5.2 → 1.2.0

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

@@ -16,6 +16,7 @@ import {
   DEFAULT_WORKSPACE,
   SECRET,
   HCI,
+  PSPS,
 } from '@shell/config/types';
 import { _CREATE, _EDIT, _VIEW } from '@shell/config/query-params';
 
@@ -27,42 +28,56 @@ import {
 import { allHash } from '@shell/utils/promise';
 import { sortBy } from '@shell/utils/sort';
 
+import { camelToTitle } from '@shell/utils/string';
 import { compare, sortable } from '@shell/utils/version';
 import { isHarvesterSatisfiesVersion } from '@shell/utils/cluster';
+import * as VERSION from '@shell/utils/version';
 
+import ArrayList from '@shell/components/form/ArrayList';
+import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
 import { BadgeState } from '@components/BadgeState';
 import { Banner } from '@components/Banner';
+import { Checkbox } from '@components/Form/Checkbox';
 import CruResource, { CONTEXT_HOOK_EDIT_YAML } from '@shell/components/CruResource';
+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 '@components/Form/Radio';
 import Tab from '@shell/components/Tabbed/Tab';
 import Tabbed from '@shell/components/Tabbed';
+import UnitInput from '@shell/components/form/UnitInput';
+import YamlEditor from '@shell/components/YamlEditor';
+import Questions from '@shell/components/Questions';
 
 import { canViewClusterMembershipEditor } from '@shell/components/form/Members/ClusterMembershipEditor';
+import SelectOrCreateAuthSecret from '@shell/components/form/SelectOrCreateAuthSecret';
 import semver from 'semver';
 
 import { SETTING } from '@shell/config/settings';
 import { base64Encode } from '@shell/utils/crypto';
 import { CAPI as CAPI_ANNOTATIONS } from '@shell/config/labels-annotations';
-import AgentEnv from '@shell/edit/provisioning.cattle.io.cluster/AgentEnv';
-import Labels from '@shell/edit/provisioning.cattle.io.cluster/Labels';
-import MachinePool from '@shell/edit/provisioning.cattle.io.cluster/tabs/MachinePool';
+import ACE from './ACE';
+import AgentEnv from './AgentEnv';
+import DrainOptions from './DrainOptions';
+import Labels from './Labels';
+import MachinePool from './MachinePool';
+import RegistryConfigs from './RegistryConfigs';
+import RegistryMirrors from './RegistryMirrors';
+import S3Config from './S3Config';
 import SelectCredential from './SelectCredential';
+import AdvancedSection from '@shell/components/AdvancedSection.vue';
 import { ELEMENTAL_SCHEMA_IDS, KIND, ELEMENTAL_CLUSTER_PROVIDER } from '../../config/elemental-types';
-import AgentConfiguration from '@shell/edit/provisioning.cattle.io.cluster/tabs/AgentConfiguration';
+import AgentConfiguration from './AgentConfiguration';
 import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
 import { ExtensionPoint, TabLocation } from '@shell/core/types';
-import MemberRoles from '@shell/edit/provisioning.cattle.io.cluster/tabs/MemberRoles';
-import Basics from '@shell/edit/provisioning.cattle.io.cluster/tabs/Basics';
-import Etcd from '@shell/edit/provisioning.cattle.io.cluster/tabs/etcd';
-import Networking from '@shell/edit/provisioning.cattle.io.cluster/tabs/networking';
-import Upgrade from '@shell/edit/provisioning.cattle.io.cluster/tabs/upgrade';
-import Registries from '@shell/edit/provisioning.cattle.io.cluster/tabs/registries';
-import AddOnConfig from '@shell/edit/provisioning.cattle.io.cluster/tabs/AddOnConfig';
-import Advanced from '@shell/edit/provisioning.cattle.io.cluster/tabs/Advanced';
+import MemberRoles from '@shell/edit/provisioning.cattle.io.cluster/MemberRoles';
+import Basics from '@shell/edit/provisioning.cattle.io.cluster/Basics';
 
 const HARVESTER = 'harvester';
 const HARVESTER_CLOUD_PROVIDER = 'harvester-cloud-provider';
+
 const NETBIOS_TRUNCATION_LENGTH = 15;
 
 /**
@@ -87,26 +102,37 @@ const FLEET_AGENT_CUSTOMIZATION = 'fleetAgentDeploymentCustomization';
 
 export default {
   components: {
+    ACE,
+    AdvancedSection,
     AgentEnv,
+    ArrayList,
+    ArrayListGrouped,
     BadgeState,
     Banner,
+    Checkbox,
     AgentConfiguration,
     CruResource,
+    DrainOptions,
+    LabeledInput,
+    LabeledSelect,
     Labels,
     Loading,
     MachinePool,
+    MatchExpressions,
     NameNsDescription,
+    Questions,
+    RadioGroup,
+    RegistryConfigs,
+    RegistryMirrors,
+    S3Config,
     SelectCredential,
+    SelectOrCreateAuthSecret,
     Tab,
     Tabbed,
+    UnitInput,
+    YamlEditor,
     MemberRoles,
-    Basics,
-    Etcd,
-    Networking,
-    Upgrade,
-    Registries,
-    AddOnConfig,
-    Advanced
+    Basics
   },
 
   mixins: [CreateEditView, FormValidation],
@@ -129,6 +155,7 @@ export default {
   },
 
   async fetch() {
+    this.psps = await this.getPsps();
     await this.fetchRke2Versions();
     await this.initSpecs();
     await this.initAddons();
@@ -169,11 +196,16 @@ export default {
       set(this.value.spec, 'rkeConfig.machineSelectorConfig', [{ config: {} }]);
     }
 
-    const truncateLimit = this.value.defaultHostnameLengthLimit || 0;
+    // Store the initial PSP template name, so we can set it back if needed
+    const lastDefaultPodSecurityPolicyTemplateName = this.value.spec.defaultPodSecurityPolicyTemplateName;
+    const previousKubernetesVersion = this.value.spec.kubernetesVersion;
+
+    const truncateLimit = this.value.defaultHostnameLengthLimit;
 
     return {
       loadedOnce:                      false,
       lastIdx:                         0,
+      allPSPs:                         null,
       allPSAs:                         [],
       credentialId:                    '',
       credential:                      null,
@@ -201,30 +233,46 @@ export default {
       userChartValues:                 {},
       userChartValuesTemp:             {},
       addonsRev:                       0,
+      clusterIsAlreadyCreated:         !!this.value.id,
       fvFormRuleSets:                  [{
         path: 'metadata.name', rules: ['subDomain'], translationKey: 'nameNsDescription.name.label'
       }],
       harvesterVersionRange: {},
+      lastDefaultPodSecurityPolicyTemplateName, // Used for reset on k8s version changes
+      previousKubernetesVersion,
       cisOverride:           false,
+      cisPsaChangeBanner:    false,
+      psps:                  null, // List of policies if any
+      truncateHostnames:     truncateLimit === NETBIOS_TRUNCATION_LENGTH,
       truncateLimit,
       busy:                  false,
       machinePoolValidation: {}, // map of validation states for each machine pool
       machinePoolErrors:     {},
       allNamespaces:         [],
-      initialCloudProvider:  this.value?.agentConfig?.['cloud-provider-name'] || '',
       extensionTabs:         getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, TabLocation.CLUSTER_CREATE_RKE2, this.$route, this),
     };
   },
 
   computed: {
+
     rkeConfig() {
       return this.value.spec.rkeConfig;
     },
 
+    hostnameTruncationManuallySet() {
+      return this.truncateLimit && this.truncateLimit !== NETBIOS_TRUNCATION_LENGTH;
+    },
+
     isElementalCluster() {
       return this.provider === ELEMENTAL_CLUSTER_PROVIDER || this.value?.machineProvider?.toLowerCase() === KIND.MACHINE_INV_SELECTOR_TEMPLATES.toLowerCase();
     },
 
+    advancedTitleAlt() {
+      const machineSelectorLength = this.rkeConfig.machineSelectorConfig.length;
+
+      return this.t('cluster.advanced.argInfo.machineSelector.titleAlt', { count: machineSelectorLength });
+    },
+
     chartValues() {
       return this.value.spec.rkeConfig.chartValues;
     },
@@ -237,6 +285,20 @@ export default {
       return this.value.agentConfig;
     },
 
+    /**
+     * Define PSP deprecation and restrict use of PSP based on min k8s version
+     */
+    needsPSP() {
+      return this.getNeedsPSP();
+    },
+
+    /**
+     * Define introduction of Rancher defined PSA templates
+     */
+    hasPsaTemplates() {
+      return !this.needsPSP;
+    },
+
     unsupportedSelectorConfig() {
       let global = 0;
       let kubeletOnly = 0;
@@ -314,6 +376,10 @@ export default {
       return out;
     },
 
+    isK3s() {
+      return (this.value?.spec?.kubernetesVersion || '').includes('k3s');
+    },
+
     /**
      * Kube Version
      */
@@ -521,11 +587,11 @@ export default {
       }
 
       if (this.showCloudProvider) { // Shouldn't be removed such that changes to it will re-trigger this watch
-        if ( this.agentConfig?.['cloud-provider-name'] === 'rancher-vsphere' ) {
+        if ( this.agentConfig['cloud-provider-name'] === 'rancher-vsphere' ) {
           names.push('rancher-vsphere-cpi', 'rancher-vsphere-csi');
         }
 
-        if ( this.agentConfig?.['cloud-provider-name'] === HARVESTER ) {
+        if ( this.agentConfig['cloud-provider-name'] === HARVESTER ) {
           names.push(HARVESTER_CLOUD_PROVIDER);
         }
       }
@@ -575,32 +641,10 @@ export default {
         }
       }
 
-      const cur = this.agentConfig?.['cloud-provider-name'];
-
-      if (cur && !out.find((x) => x.value === cur)) {
-        // Localization missing
-        // Look up cur in the localization file
-        const label = this.$store.getters['i18n/withFallback'](`cluster.cloudProvider."${ cur }".label`, null, cur);
+      const cur = this.agentConfig['cloud-provider-name'];
 
-        out.unshift({
-          label:       `${ label } (Current)`,
-          value:       cur,
-          unsupported: true,
-          disabled:    true
-        });
-      }
-
-      const initial = this.initialCloudProvider;
-
-      if (cur !== initial && initial && !out.find((x) => x.value === initial)) {
-        const label = this.$store.getters['i18n/withFallback'](`cluster.cloudProvider."${ initial }".label`, null, initial);
-
-        out.unshift({
-          label:       `${ label } (Current)`,
-          value:       initial,
-          unsupported: true,
-          disabled:    true
-        });
+      if ( cur && !out.find((x) => x.value === cur) ) {
+        out.unshift({ label: `${ cur } (Current)`, value: cur });
       }
 
       return out;
@@ -640,6 +684,13 @@ export default {
       return out;
     },
 
+    showIpv6Warning() {
+      const clusterCIDR = this.serverConfig['cluster-cidr'] || '';
+      const serviceCIDR = this.serverConfig['service-cidr'] || '';
+
+      return clusterCIDR.includes(':') || serviceCIDR.includes(':');
+    },
+
     appsOSWarning() {
       if (this.mode !== _EDIT ) {
         return null;
@@ -708,17 +759,19 @@ export default {
 
       return validRequiredPools && base;
     },
-    unsupportedCloudProvider() {
-      // The current cloud provider
-      const cur = this.initialCloudProvider;
-
-      const provider = cur && this.cloudProviderOptions.find((x) => x.value === cur);
-
-      return !!provider?.unsupported;
-    },
   },
 
   watch: {
+    s3Backup(neu) {
+      if ( neu ) {
+        // We need to make sure that s3 doesn't already have an existing value otherwise when editing a cluster with s3 defined this will clear s3.
+        if (isEmpty(this.rkeConfig.etcd?.s3)) {
+          set(this.rkeConfig.etcd, 's3', {});
+        }
+      } else {
+        set(this.rkeConfig.etcd, 's3', null);
+      }
+    },
 
     credentialId(val) {
       if ( val ) {
@@ -849,6 +902,10 @@ export default {
         }
       }
 
+      if ( this.value.spec.defaultPodSecurityPolicyTemplateName === undefined ) {
+        set(this.value.spec, 'defaultPodSecurityPolicyTemplateName', '');
+      }
+
       if ( this.value.spec.defaultPodSecurityAdmissionConfigurationTemplateName === undefined ) {
         set(this.value.spec, 'defaultPodSecurityAdmissionConfigurationTemplateName', '');
       }
@@ -864,6 +921,10 @@ export default {
           k3sVersions:  this.$store.dispatch('management/request', { url: '/v1-k3s-release/releases' }),
         };
 
+        if ( this.$store.getters['management/canList'](MANAGEMENT.POD_SECURITY_POLICY_TEMPLATE) ) {
+          hash.allPSPs = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.POD_SECURITY_POLICY_TEMPLATE });
+        }
+
         if (this.$store.getters['management/canList'](MANAGEMENT.PSA)) {
           hash.allPSAs = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.PSA });
         }
@@ -888,6 +949,7 @@ export default {
 
         const res = await allHash(hash);
 
+        this.allPSPs = res.allPSPs || [];
         this.allPSAs = res.allPSAs || [];
         this.rke2Versions = res.rke2Versions.data || [];
         this.k3sVersions = res.k3sVersions.data || [];
@@ -969,15 +1031,23 @@ export default {
     /**
      * set instanceNameLimit to 15 to all pool machine if truncateHostnames checkbox is clicked
      */
-    truncateHostname(neu) {
-      if (neu) {
+    truncateName() {
+      if (this.truncateHostnames) {
         this.value.defaultHostnameLengthLimit = NETBIOS_TRUNCATION_LENGTH;
-        this.truncateLimit = NETBIOS_TRUNCATION_LENGTH;
       } else {
-        this.truncateLimit = 0;
         this.value.removeDefaultHostnameLengthLimit();
       }
     },
+    /**
+     * Define PSP deprecation and restrict use of PSP based on min k8s version and current/edited mode
+     */
+    getNeedsPSP(value = this.value) {
+      const release = value?.spec?.kubernetesVersion || '';
+      const version = release.match(/\d+/g);
+      const isRequiredVersion = version?.length ? +version[0] === 1 && +version[1] < 25 : false;
+
+      return isRequiredVersion;
+    },
 
     /**
      * Get machine pools from the cluster configuration
@@ -1264,6 +1334,23 @@ export default {
       });
     },
 
+    /**
+     * Inform user to remove PSP for current cluster due deprecation
+     */
+    showPspConfirmation() {
+      return new Promise((resolve, reject) => {
+        this.$store.dispatch('cluster/promptModal', {
+          component:      'GenericPrompt',
+          componentProps: {
+            title:     this.t('cluster.rke2.modal.pspChange.title'),
+            body:      this.t('cluster.rke2.modal.pspChange.body'),
+            applyMode: 'continue',
+            confirm:   resolve
+          },
+        });
+      });
+    },
+
     // Set busy before save and clear after save
     async saveOverride(btnCb) {
       this.$set(this, 'busy', true);
@@ -1297,6 +1384,13 @@ export default {
       this.agentConfigurationCleanup();
 
       const isEditVersion = this.isEdit && this.liveValue?.spec?.kubernetesVersion !== this.value?.spec?.kubernetesVersion;
+      const hasPspManuallyAdded = !!this.value.spec.rkeConfig?.machineGlobalConfig?.['kube-apiserver-arg'];
+
+      if (isEditVersion && !this.needsPSP && hasPspManuallyAdded) {
+        if (!await this.showPspConfirmation()) {
+          return btnCb('cancelled');
+        }
+      }
 
       if (isEditVersion) {
         const shouldContinue = await this.showAddonConfirmation();
@@ -1323,7 +1417,7 @@ export default {
 
         const isUpgrade = this.isEdit && this.liveValue?.spec?.kubernetesVersion !== this.value?.spec?.kubernetesVersion;
 
-        if (this.agentConfig?.['cloud-provider-name'] === HARVESTER && clusterId && (this.isCreate || isUpgrade)) {
+        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', {
@@ -1455,28 +1549,27 @@ export default {
       }
     },
 
-    showAddons(key) {
+    labelForAddon(name) {
+      const fallback = `${ camelToTitle(name.replace(/^(rke|rke2|rancher)-/, '')) } Configuration`;
+
+      return this.$store.getters['i18n/withFallback'](`cluster.addonChart."${ name }"`, null, fallback);
+    },
+
+    showAddons() {
       this.addonsRev++;
       this.addonNames.forEach((name) => {
         const chartValues = this.versionInfo[name]?.questions ? this.initYamlEditor(name) : {};
 
         set(this.userChartValuesTemp, name, chartValues);
       });
-      this.refreshComponentWithYamls(key);
-    },
-    refreshComponentWithYamls(key) {
-      const component = this.$refs[key];
-
-      if ( component ) {
-        this.refreshYamls(component.$refs);
-      }
+      this.refreshYamls();
     },
 
-    refreshYamls(refs) {
-      const keys = Object.keys(refs).filter((x) => x.startsWith('yaml'));
+    refreshYamls() {
+      const keys = Object.keys(this.$refs).filter((x) => x.startsWith('yaml'));
 
       for ( const k of keys ) {
-        const entry = refs[k];
+        const entry = this.$refs[k];
         const list = isArray(entry) ? entry : [entry];
 
         for ( const component of list ) {
@@ -1498,6 +1591,10 @@ export default {
       this.userChartValues[this.chartVersionKey(name)] = different;
     }, 250, { leading: true }),
 
+    updateQuestions(name) {
+      this.syncChartValues(name);
+    },
+
     initYamlEditor(name) {
       const defaultChartValue = this.versionInfo[name];
       const key = this.chartVersionKey(name);
@@ -1515,7 +1612,7 @@ export default {
       }
 
       for ( const k in this.agentArgs ) {
-        if ( this.agentConfig?.[k] === undefined ) {
+        if ( this.agentConfig[k] === undefined ) {
           const def = this.agentArgs[k].default;
 
           set(this.agentConfig, k, (def !== undefined ? def : undefined));
@@ -1537,6 +1634,10 @@ export default {
       this.$set(this, 'membershipUpdate', update);
     },
 
+    canRemoveKubeletRow(row, idx) {
+      return idx !== 0;
+    },
+
     async initRegistry() {
       // Check for an existing cluster scoped registry
       const clusterRegistry = this.agentConfig?.['system-default-registry'] || '';
@@ -1568,8 +1669,7 @@ export default {
         set(regs, 'mirrors', {});
       }
 
-      const hostname = Object.keys(regs.configs)[0];
-      const config = regs.configs[hostname];
+      const config = regs.configs[this.registryHost];
 
       if ( config ) {
         registrySecret = config.authConfigSecretName;
@@ -1780,7 +1880,6 @@ export default {
     setHarvesterDefaultCloudProvider() {
       if (this.isHarvesterDriver &&
         this.mode === _CREATE &&
-        this.agentConfig &&
         !this.agentConfig['cloud-provider-name'] &&
         !this.isHarvesterExternalCredential &&
         !this.isHarvesterIncompatible
@@ -1809,8 +1908,7 @@ export default {
       }
       this.setHarvesterDefaultCloudProvider();
     },
-    toggleCustomRegistry(neu) {
-      this.showCustomRegistryInput = neu;
+    toggleCustomRegistry(e) {
       if (this.registryHost) {
         this.registryHost = null;
         this.registrySecret = null;
@@ -1819,6 +1917,28 @@ export default {
       }
     },
 
+    /**
+     * Get provisioned RKE2 cluster PSPs in edit mode
+     */
+    async getPsps() {
+      // As server returns 500 we exclude all the possible cases
+      if (
+        this.mode !== _CREATE &&
+        !this.isK3s &&
+        this.value.state !== 'reconciling' &&
+        this.getNeedsPSP(this.liveValue) // We consider editing only possible PSP cases
+      ) {
+        const clusterId = this.value.mgmtClusterId;
+        const url = `/k8s/clusters/${ clusterId }/v1/${ PSPS }`;
+
+        try {
+          return await this.$store.dispatch('cluster/request', { url });
+        } catch (error) {
+          // PSP may not exists for this cluster and an error is returned without need to handle
+        }
+      }
+    },
+
     /**
      * Reset PSA on several input changes for given conditions
      */
@@ -1828,9 +1948,11 @@ export default {
       const cisValue = this.agentConfig?.profile || this.serverConfig?.profile;
 
       if (!this.cisOverride) {
-        if (cisValue) {
+        if (this.hasPsaTemplates && cisValue) {
           set(this.value.spec, 'defaultPodSecurityAdmissionConfigurationTemplateName', hardcodedTemplate);
         }
+
+        this.cisPsaChangeBanner = this.hasPsaTemplates;
       }
     },
 
@@ -1851,36 +1973,45 @@ export default {
         set(this.agentConfig, 'protect-kernel-defaults', false);
       }
     },
-    updateAdditionalManifest(neu) {
-      this.value.spec.rkeConfig.additionalManifest = neu;
-    },
 
     /**
-     * Handle k8s changes side effects, like PSA resets
+     * Handle k8s changes side effects, like PSP and PSA resets
      */
-    handleKubernetesChange(value, old) {
+    handleKubernetesChange(value) {
       if (value) {
         this.togglePsaDefault();
+        const version = VERSION.parse(value);
+        const major = parseInt(version?.[0] || 0);
+        const minor = parseInt(version?.[1] || 0);
+
+        // Reset PSA if not RKE2
+        if (!value.includes('rke2')) {
+          set(this.value.spec, 'defaultPodSecurityPolicyTemplateName', '');
+        } else {
+          // Reset PSP if it's legacy due k8s version 1.25+
+          if (major === 1 && minor >= 25) {
+            set(this.value.spec, 'defaultPodSecurityPolicyTemplateName', '');
+          } else {
+            set(this.value.spec, 'defaultPodSecurityPolicyTemplateName', this.lastDefaultPodSecurityPolicyTemplateName);
+          }
+
+          this.previousKubernetesVersion = value;
+        }
 
         // If Harvester driver, reset cloud provider if not compatible
         if (this.isHarvesterDriver && this.mode === _CREATE && this.isHarvesterIncompatible) {
           this.setHarvesterDefaultCloudProvider();
         }
-
-        // Cloud Provider check
-        // If the cloud provider is unsupported, switch provider to 'external'
-        if (this.unsupportedCloudProvider) {
-          set(this.agentConfig, 'cloud-provider-name', 'external');
-        } else {
-          // Switch the cloud provider back to the initial value
-          // Use changed the Kubernetes version back to a version where the initial cloud provider is valid - so switch back to this one
-          // to undo the change to external that we may have made
-          // Note: Cloud Provider can only be changed on edit when the initial provider is no longer supported
-          set(this.agentConfig, 'cloud-provider-name', this.initialCloudProvider);
-        }
       }
     },
 
+    /**
+     * Keep last PSP value
+     */
+    handlePspChange(value) {
+      this.lastDefaultPodSecurityPolicyTemplateName = value;
+    },
+
     handleShowDeprecatedPatchVersionsChanged(value) {
       this.showDeprecatedPatchVersions = value;
     },
@@ -1897,20 +2028,27 @@ export default {
     handleEnabledSystemServicesChanged(val) {
       set(this.serverConfig, 'disable', val);
     },
-
-    handleCiliumValuesChanged(neu) {
-      if (neu === undefined) {
-        return;
-      }
-
+    handleCiliumIpv6Changed(neu) {
       const name = this.chartVersionKey('rke2-cilium');
+      const values = this.userChartValues[name];
 
       set(this, 'userChartValues', {
         ...this.userChartValues,
-        [name]: { ...neu }
+        [name]: {
+          ...values,
+          cilium: {
+            ...values?.cilium,
+            ipv6: {
+              ...values?.cilium?.ipv6,
+              enabled: neu
+            }
+          }
+        }
       });
     },
-
+    handlePspChanged(neu) {
+      this.handlePspChange(neu);
+    },
     handleCisChanged() {
       this.handleCisChange();
     },
@@ -1952,31 +2090,13 @@ export default {
 
       this.errors = errors;
     },
-    handleS3BackupChanged(neu) {
-      this.s3Backup = neu;
-      if ( neu ) {
-        // We need to make sure that s3 doesn't already have an existing value otherwise when editing a cluster with s3 defined this will clear s3.
-        if (isEmpty(this.rkeConfig.etcd?.s3)) {
-          set(this.rkeConfig.etcd, 's3', {});
-        }
-      } else {
-        set(this.rkeConfig.etcd, 's3', null);
-      }
-    },
-    handleConfigEtcdExposeMetricsChanged(neu) {
-      set(this.serverConfig, 'etcd-expose-metrics', neu);
-    },
-    handleRegistryHostChanged(neu) {
-      this.registryHost = neu;
-    },
-    handleRegistrySecretChanged(neu) {
-      this.registrySecret = neu;
-    },
+
     validateClusterName() {
-      if (!this.value.metadata.name && this.agentConfig?.['cloud-provider-name'] === HARVESTER) {
+      if (!this.value.metadata.name && this.agentConfig['cloud-provider-name'] === HARVESTER) {
         this.errors.push(this.t('validation.required', { key: this.t('cluster.name.label') }, true));
       }
     },
+
     async validateMachinePool() {
       if (this.errors) {
         clear(this.errors);
@@ -2047,7 +2167,6 @@ export default {
       :provider="provider"
       :cancel="cancelCredential"
       :showing-form="showForm"
-      :default-on-cancel="true"
       class="mt-20"
     />
 
@@ -2137,6 +2256,7 @@ export default {
                 :machine-pools="machinePools"
                 :busy="busy"
                 :pool-id="obj.id"
+                :pool-create-mode="obj.create"
                 @error="handleMachinePoolError"
                 @validationChanged="v=>machinePoolValidationChanged(obj.id, v)"
               />
@@ -2159,34 +2279,40 @@ export default {
           name="basic"
           label-key="cluster.tabs.basic"
           :weight="11"
-          @active="refreshComponentWithYamls('tab-Basics')"
+          @active="refreshYamls"
         >
           <!-- Basic -->
           <Basics
-            ref="tab-Basics"
             v-model="value"
             :live-value="liveValue"
             :mode="mode"
             :provider="provider"
+            :psps="psps"
             :user-chart-values="userChartValues"
             :credential="credential"
             :cis-override="cisOverride"
+            :cis-psa-change-banner="cisPsaChangeBanner"
+            :all-psps="allPSPs"
             :all-psas="allPSAs"
             :addon-versions="addonVersions"
             :show-deprecated-patch-versions="showDeprecatedPatchVersions"
+            :needs-psp="needsPSP"
             :selected-version="selectedVersion"
             :is-harvester-driver="isHarvesterDriver"
             :is-harvester-incompatible="isHarvesterIncompatible"
             :version-options="versionOptions"
+            :cluster-is-already-created="clusterIsAlreadyCreated"
             :is-elemental-cluster="isElementalCluster"
+            :has-psa-templates="hasPsaTemplates"
+            :is-k3s="isK3s"
             :have-arg-info="haveArgInfo"
             :show-cni="showCni"
             :show-cloud-provider="showCloudProvider"
-            :unsupported-cloud-provider="unsupportedCloudProvider"
             :cloud-provider-options="cloudProviderOptions"
-            @cilium-values-changed="handleCiliumValuesChanged"
+            @cilium-ipv6-changed="handleCiliumIpv6Changed"
             @enabled-system-services-changed="handleEnabledSystemServicesChanged"
             @kubernetes-changed="handleKubernetesChange"
+            @psp-changed="handlePspChanged"
             @cis-changed="handleCisChanged"
             @psa-default-changed="handlePsaDefaultChanged"
             @show-deprecated-patch-versions-changed="handleShowDeprecatedPatchVersionsChanged"
@@ -2211,15 +2337,77 @@ export default {
           name="etcd"
           label-key="cluster.tabs.etcd"
         >
-          <Etcd
-            v-model="value"
-            :mode="mode"
-            :s3-backup="s3Backup"
-            :register-before-hook="registerBeforeHook"
-            :selected-version="selectedVersion"
-            @s3-backup-changed="handleS3BackupChanged"
-            @config-etcd-expose-metrics-changed="handleConfigEtcdExposeMetricsChanged"
-          />
+          <div class="row">
+            <div class="col span-6">
+              <RadioGroup
+                v-model="rkeConfig.etcd.disableSnapshots"
+                name="etcd-disable-snapshots"
+                :options="[true, false]"
+                :label="t('cluster.rke2.etcd.disableSnapshots.label')"
+                :labels="[t('generic.disable'), t('generic.enable')]"
+                :mode="mode"
+              />
+            </div>
+          </div>
+          <div
+            v-if="rkeConfig.etcd.disableSnapshots !== true"
+            class="row"
+          >
+            <div class="col span-6">
+              <LabeledInput
+                v-model="rkeConfig.etcd.snapshotScheduleCron"
+                type="cron"
+                placeholder="0 * * * *"
+                :mode="mode"
+                :label="t('cluster.rke2.etcd.snapshotScheduleCron.label')"
+              />
+            </div>
+            <div class="col span-6">
+              <UnitInput
+                v-model="rkeConfig.etcd.snapshotRetention"
+                :mode="mode"
+                :label="t('cluster.rke2.etcd.snapshotRetention.label')"
+                :suffix="t('cluster.rke2.snapshots.suffix')"
+              />
+            </div>
+          </div>
+
+          <template v-if="rkeConfig.etcd.disableSnapshots !== true">
+            <div class="spacer" />
+
+            <RadioGroup
+              v-model="s3Backup"
+              name="etcd-s3"
+              :options="[false, true]"
+              label="Backup Snapshots to S3"
+              :labels="['Disable','Enable']"
+              :mode="mode"
+            />
+
+            <S3Config
+              v-if="s3Backup"
+              v-model="rkeConfig.etcd.s3"
+              :namespace="value.metadata.namespace"
+              :register-before-hook="registerBeforeHook"
+              :mode="mode"
+            />
+          </template>
+
+          <div class="spacer" />
+
+          <div class="row">
+            <div class="col span-6">
+              <RadioGroup
+                v-if="serverArgs['etcd-expose-metrics']"
+                v-model="serverConfig['etcd-expose-metrics']"
+                name="etcd-expose-metrics"
+                :options="[false, true]"
+                :label="t('cluster.rke2.etcd.exportMetric.label')"
+                :labels="[t('cluster.rke2.etcd.exportMetric.false'), t('cluster.rke2.etcd.exportMetric.true')]"
+                :mode="mode"
+              />
+            </div>
+          </div>
         </Tab>
 
         <!-- Networking -->
@@ -2228,12 +2416,120 @@ export default {
           name="networking"
           label-key="cluster.tabs.networking"
         >
-          <Networking
+          <h3>
+            {{ t('cluster.rke2.address.header') }}
+            <i
+              v-clean-tooltip="t('cluster.rke2.address.tooltip')"
+              class="icon icon-info"
+            />
+          </h3>
+          <Banner
+            v-if="showIpv6Warning"
+            color="warning"
+          >
+            {{ t('cluster.rke2.address.ipv6.warning') }}
+          </Banner>
+          <div class="row mb-20">
+            <div
+              v-if="serverArgs['cluster-cidr']"
+              class="col span-6"
+            >
+              <LabeledInput
+                v-model="serverConfig['cluster-cidr']"
+                :mode="mode"
+                :disabled="clusterIsAlreadyCreated"
+                :label="t('cluster.rke2.address.clusterCidr.label')"
+              />
+            </div>
+            <div
+              v-if="serverArgs['service-cidr']"
+              class="col span-6"
+            >
+              <LabeledInput
+                v-model="serverConfig['service-cidr']"
+                :mode="mode"
+                :disabled="clusterIsAlreadyCreated"
+                :label="t('cluster.rke2.address.serviceCidr.label')"
+              />
+            </div>
+          </div>
+
+          <div class="row mb-20">
+            <div
+              v-if="serverArgs['cluster-dns']"
+              class="col span-6"
+            >
+              <LabeledInput
+                v-model="serverConfig['cluster-dns']"
+                :mode="mode"
+                :disabled="clusterIsAlreadyCreated"
+                :label="t('cluster.rke2.address.dns.label')"
+              />
+            </div>
+            <div
+              v-if="serverArgs['cluster-domain']"
+              class="col span-6"
+            >
+              <LabeledInput
+                v-model="serverConfig['cluster-domain']"
+                :mode="mode"
+                :disabled="clusterIsAlreadyCreated"
+                :label="t('cluster.rke2.address.domain.label')"
+              />
+            </div>
+          </div>
+
+          <div
+            v-if="serverArgs['service-node-port-range']"
+            class="row mb-20"
+          >
+            <div class="col span-6">
+              <LabeledInput
+                v-model="serverConfig['service-node-port-range']"
+                :mode="mode"
+                :label="t('cluster.rke2.address.nodePortRange.label')"
+              />
+            </div>
+            <div
+              class="col span-6"
+            >
+              <Checkbox
+                v-if="!isView || isView && !hostnameTruncationManuallySet"
+                v-model="truncateHostnames"
+                class="mt-20"
+                :disabled="isEdit || isView || hostnameTruncationManuallySet"
+                :mode="mode"
+                :label="t('cluster.rke2.truncateHostnames')"
+                @input="truncateName"
+              />
+              <Banner
+                v-if="hostnameTruncationManuallySet"
+                color="info"
+              >
+                <div class="text">
+                  {{ t('cluster.machinePool.truncationCluster', { limit: truncateLimit }) }}
+                </div>
+              </Banner>
+            </div>
+          </div>
+
+          <div
+            v-if="serverArgs['tls-san']"
+            class="row mb-20"
+          >
+            <div class="col span-6">
+              <ArrayList
+                v-model="serverConfig['tls-san']"
+                :protip="false"
+                :mode="mode"
+                :title="t('cluster.rke2.address.tlsSan.label')"
+              />
+            </div>
+          </div>
+
+          <ACE
             v-model="value"
             :mode="mode"
-            :selected-version="selectedVersion"
-            :truncate-limit="truncateLimit"
-            @truncate-hostname="truncateHostname"
           />
         </Tab>
 
@@ -2242,10 +2538,44 @@ export default {
           name="upgrade"
           label-key="cluster.tabs.upgrade"
         >
-          <Upgrade
-            v-model="value"
-            :mode="mode"
-          />
+          <Banner
+            v-if="get(rkeConfig, 'upgradeStrategy.controlPlaneDrainOptions.deleteEmptyDirData')"
+            color="warning"
+          >
+            {{ t('cluster.rke2.drain.deleteEmptyDir.warning', {}, true) }}
+          </Banner>
+          <div class="row">
+            <div class="col span-6">
+              <h3>{{ t('cluster.rke2.controlPlaneConcurrency.header') }}</h3>
+              <LabeledInput
+                v-model="rkeConfig.upgradeStrategy.controlPlaneConcurrency"
+                :mode="mode"
+                :label="t('cluster.rke2.controlPlaneConcurrency.label')"
+                :tooltip="t('cluster.rke2.controlPlaneConcurrency.toolTip')"
+              />
+              <div class="spacer" />
+              <DrainOptions
+                v-model="rkeConfig.upgradeStrategy.controlPlaneDrainOptions"
+                :mode="mode"
+              />
+            </div>
+            <div class="col span-6">
+              <h3>
+                {{ t('cluster.rke2.workNode.label') }}
+              </h3>
+              <LabeledInput
+                v-model="rkeConfig.upgradeStrategy.workerConcurrency"
+                :mode="mode"
+                :label="t('cluster.rke2.workerConcurrency.label')"
+                :tooltip="t('cluster.rke2.workerConcurrency.toolTip')"
+              />
+              <div class="spacer" />
+              <DrainOptions
+                v-model="rkeConfig.upgradeStrategy.workerDrainOptions"
+                :mode="mode"
+              />
+            </div>
+          </div>
         </Tab>
 
         <!-- Registries -->
@@ -2253,40 +2583,150 @@ export default {
           name="registry"
           label-key="cluster.tabs.registry"
         >
-          <Registries
-            v-model="value"
-            :mode="mode"
-            :register-before-hook="registerBeforeHook"
-            :show-custom-registry-input="showCustomRegistryInput"
-            :registry-host="registryHost"
-            :registry-secret="registrySecret"
-            :show-custom-registry-advanced-input="showCustomRegistryAdvancedInput"
-            @update-configs-changed="updateConfigs"
-            @custom-registry-changed="toggleCustomRegistry"
-            @registry-host-changed="handleRegistryHostChanged"
-            @registry-secret-changed="handleRegistrySecretChanged"
-          />
+          <div class="row">
+            <h3>{{ t('cluster.privateRegistry.label') }}</h3>
+          </div>
+          <div class="row">
+            <div class="col span-12">
+              <Banner
+                :closable="false"
+                class="cluster-tools-tip"
+                color="info"
+                label-key="cluster.privateRegistry.description"
+              />
+            </div>
+          </div>
+          <div class="row">
+            <Checkbox
+              v-model="showCustomRegistryInput"
+              class="mb-20"
+              :label="t('cluster.privateRegistry.label')"
+              data-testid="registries-enable-checkbox"
+              @input="toggleCustomRegistry"
+            />
+          </div>
+          <div
+            v-if="showCustomRegistryInput"
+            class="row"
+          >
+            <div class="col span-6">
+              <LabeledInput
+                v-model="registryHost"
+                label-key="catalog.chart.registry.custom.inputLabel"
+                placeholder-key="catalog.chart.registry.custom.placeholder"
+                data-testid="registry-host-input"
+                :min-height="30"
+              />
+              <SelectOrCreateAuthSecret
+                v-model="registrySecret"
+                :register-before-hook="registerBeforeHook"
+                :hook-priority="1"
+                :mode="mode"
+                in-store="management"
+                :allow-ssh="false"
+                :allow-rke="true"
+                :vertical="true"
+                :namespace="value.metadata.namespace"
+                generate-name="registryconfig-auth-"
+              />
+            </div>
+          </div>
+          <template>
+            <div
+              v-if="showCustomRegistryInput"
+              class="row"
+            >
+              <AdvancedSection
+                class="col span-12 advanced"
+                :is-open-by-default="showCustomRegistryAdvancedInput"
+                :mode="mode"
+                data-testid="registries-advanced-section"
+              >
+                <Banner
+                  :closable="false"
+                  class="cluster-tools-tip"
+                  color="info"
+                  :label-key="isK3s ? 'cluster.privateRegistry.docsLinkK3s' : 'cluster.privateRegistry.docsLinkRke2'"
+                />
+                <RegistryMirrors
+                  v-model="value"
+                  class="mt-20"
+                  :mode="mode"
+                />
+                <RegistryConfigs
+                  v-model="value"
+                  class="mt-20"
+                  :mode="mode"
+                  :cluster-register-before-hook="registerBeforeHook"
+                  @updateConfigs="updateConfigs"
+                />
+              </AdvancedSection>
+            </div>
+          </template>
         </Tab>
 
         <!-- Add-on Config -->
         <Tab
           name="addons"
           label-key="cluster.tabs.addons"
-          @active="showAddons('tab-addOnConfig')"
+          @active="showAddons"
         >
-          <AddOnConfig
-            ref="tab-addOnConfig"
-            v-model="value"
-            :mode="mode"
-            :version-info="versionInfo"
-            :addon-versions="addonVersions"
-            :addons-rev="addonsRev"
-            :user-chart-values-temp="userChartValuesTemp"
-            :init-yaml-editor="initYamlEditor"
-            @update-questions="syncChartValues"
-            @update-values="updateValues"
-            @additional-manifest-changed="updateAdditionalManifest"
-          />
+          <Banner
+            v-if="isEdit"
+            color="warning"
+          >
+            {{ t('cluster.addOns.dependencyBanner') }}
+          </Banner>
+          <div
+            v-if="versionInfo && addonVersions.length"
+            :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="updateQuestions(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 => updateValues(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>
+            <YamlEditor
+              ref="yaml-additional"
+              v-model="rkeConfig.additionalManifest"
+              :editor-mode="mode === 'view' ? 'VIEW_CODE' : 'EDIT_CODE'"
+              initial-yaml-values="# Additional Manifest YAML"
+              class="yaml-editor"
+            />
+          </div>
         </Tab>
 
         <!-- Cluster Agent Configuration -->
@@ -2323,13 +2763,82 @@ export default {
           name="advanced"
           label-key="cluster.tabs.advanced"
           :weight="-1"
+          @active="refreshYamls"
         >
-          <Advanced
-            v-model="value"
-            :mode="mode"
-            :have-arg-info="haveArgInfo"
-            :selected-version="selectedVersion"
-          />
+          <template v-if="haveArgInfo">
+            <h3>{{ t('cluster.advanced.argInfo.title') }}</h3>
+            <ArrayListGrouped
+              v-if="agentArgs['kubelet-arg']"
+              v-model="rkeConfig.machineSelectorConfig"
+              class="mb-20"
+              :add-label="t('cluster.advanced.argInfo.machineSelector.label')"
+              :can-remove="canRemoveKubeletRow"
+              :default-add-value="{machineLabelSelector: { matchExpressions: [], matchLabels: {} }, config: {'kubelet-arg': []}}"
+            >
+              <template #default="{row}">
+                <template v-if="row.value.machineLabelSelector">
+                  <h3>{{ t('cluster.advanced.argInfo.machineSelector.title') }}</h3>
+                  <MatchExpressions
+                    v-model="row.value.machineLabelSelector"
+                    class="mb-20"
+                    :mode="mode"
+                    :show-remove="false"
+                    :initial-empty-row="true"
+                  />
+                  <h3>{{ t('cluster.advanced.argInfo.machineSelector.subTitle') }}</h3>
+                </template>
+                <h3 v-else>
+                  {{ advancedTitleAlt }}
+                </h3>
+
+                <ArrayList
+                  v-model="row.value.config['kubelet-arg']"
+                  :mode="mode"
+                  :add-label="t('cluster.advanced.argInfo.machineSelector.listLabel')"
+                  :initial-empty-row="!!row.value.machineLabelSelector"
+                />
+              </template>
+            </ArrayListGrouped>
+            <Banner
+              v-if="rkeConfig.machineSelectorConfig.length > 1"
+              color="info"
+              :label="t('cluster.advanced.argInfo.machineSelector.bannerLabel')"
+            />
+
+            <ArrayList
+              v-if="serverArgs['kube-controller-manager-arg']"
+              v-model="serverConfig['kube-controller-manager-arg']"
+              :mode="mode"
+              :title="t('cluster.advanced.argInfo.machineSelector.kubeControllerManagerTitle')"
+              class="mb-20"
+            />
+            <ArrayList
+              v-if="serverArgs['kube-apiserver-arg']"
+              v-model="serverConfig['kube-apiserver-arg']"
+              :mode="mode"
+              :title="t('cluster.advanced.argInfo.machineSelector.kubeApiServerTitle')"
+              class="mb-20"
+            />
+            <ArrayList
+              v-if="serverArgs['kube-scheduler-arg']"
+              v-model="serverConfig['kube-scheduler-arg']"
+              :mode="mode"
+              :title="t('cluster.advanced.argInfo.machineSelector.kubeSchedulerTitle')"
+            />
+          </template>
+          <template v-if="agentArgs['protect-kernel-defaults']">
+            <div class="spacer" />
+
+            <div class="row">
+              <div class="col span-12">
+                <Checkbox
+                  v-model="agentConfig['protect-kernel-defaults']"
+                  :mode="mode"
+                  :label="t('cluster.advanced.agentArgs.label')"
+                />
+              </div>
+            </div>
+          </template>
         </Tab>
 
         <AgentEnv