@rancher/shell 3.0.8 → 3.0.9-rc.2

package/edit/provisioning.cattle.io.cluster/__tests__/Basics.test.ts

@@ -96,12 +96,6 @@ const defaultCiliumSpec = {
   chartValues: {},
 };
 
-// ipv6
-const legacyOnValue = { cilium: { ipv6: { enabled: true } } };
-const legacyOffValue = { cilium: { ipv6: { enabled: false } } };
-const newOnValue = { ipv6: { enabled: true } };
-const newOffValue = { ipv6: { enabled: false } };
-
 // bandwidth manager
 const bmOnValue = { bandwidthManager: { enabled: true } };
 const bmOffValue = { bandwidthManager: { enabled: false } };
@@ -321,244 +315,139 @@ describe('component: Basics', () => {
   });
 
   describe('cilium CNI', () => {
-    it('should toggle ipv6 on/off with the legacy structure', async() => {
-      const wrapper = createBasicsTab('v1.23.0+rke2r1', {});
-      const ipv6Checkbox = wrapper.find('[data-testid="cluster-rke2-cni-ipv6-checkbox"]');
+    it('should toggle bandwidth manager support on/off', async() => {
+      const wrapper = createBasicsTab('v1.25.0+rke2r1', {});
+      const bmCheckbox = wrapper.find('[data-testid="cluster-rke2-cni-cilium-bandwidth-manager-checkbox"]');
 
-      expect(ipv6Checkbox.exists()).toBe(true);
-      expect(ipv6Checkbox.isVisible()).toBe(true);
+      expect(bmCheckbox.exists()).toBe(true);
+      expect(bmCheckbox.isVisible()).toBe(true);
 
-      // Click the checkbox - should enable ipv6
-      await ipv6Checkbox.find('label').trigger('click');
+      // Click the checkbox - should enable bandwidth manager
+      await bmCheckbox.find('label').trigger('click');
       await nextTick();
       await nextTick();
 
       // Check and update user values with the emitted value
       let latest = (wrapper.emitted()['cilium-values-changed'] || [])[0][0];
 
-      expect(JSON.stringify(latest)).toStrictEqual(JSON.stringify(legacyOnValue));
+      expect(JSON.stringify(latest)).toStrictEqual(JSON.stringify(bmOnValue));
 
       await wrapper.setProps({ userChartValues: { 'rke2-cilium': latest } });
 
-      // Click the checkbox to turn ipv6 off again
-      await ipv6Checkbox.find('label').trigger('click');
+      // Click the checkbox to turn bm off again
+      await bmCheckbox.find('label').trigger('click');
       await nextTick();
       await nextTick();
 
       // Update from the emitted value
       latest = (wrapper.emitted()['cilium-values-changed'] || [])[1][0];
 
-      expect(JSON.stringify(latest)).toStrictEqual(JSON.stringify(legacyOffValue));
+      expect(JSON.stringify(latest)).toStrictEqual(JSON.stringify(bmOffValue));
     });
 
-    it('should toggle ipv6 on/off with the new structure', async() => {
+    it('should supportbandwidth manager', async() => {
       const wrapper = createBasicsTab('v1.25.0+rke2r1', {});
-      const ipv6Checkbox = wrapper.find('[data-testid="cluster-rke2-cni-ipv6-checkbox"]');
+      const bmCheckbox = wrapper.find('[data-testid="cluster-rke2-cni-cilium-bandwidth-manager-checkbox"]');
 
-      expect(ipv6Checkbox.exists()).toBe(true);
-      expect(ipv6Checkbox.isVisible()).toBe(true);
-
-      // Click the checkbox - should enable ipv6
-      await ipv6Checkbox.find('label').trigger('click');
+      // Click the checkbox - should enable bandwidth manager
+      await bmCheckbox.find('label').trigger('click');
       await nextTick();
       await nextTick();
 
-      // Check and update user values with the emitted value
       let latest = (wrapper.emitted()['cilium-values-changed'] || [])[0][0];
 
-      expect(JSON.stringify(latest)).toStrictEqual(JSON.stringify(newOnValue));
-
       await wrapper.setProps({ userChartValues: { 'rke2-cilium': latest } });
 
-      // Click the checkbox to turn ipv6 off again
-      await ipv6Checkbox.find('label').trigger('click');
-      await nextTick();
-      await nextTick();
-
-      // Update from the emitted value
-      latest = (wrapper.emitted()['cilium-values-changed'] || [])[1][0];
-
-      expect(JSON.stringify(latest)).toStrictEqual(JSON.stringify(newOffValue));
-    });
-
-    it('should migrate when the k8s version is changed', async() => {
-      const userChartValues = { 'rke2-cilium': { ipv6: { enabled: true } } };
-      const wrapper = createBasicsTab('v1.25.0+rke2r1', userChartValues);
-
-      // Check that the checkbox is checked
-      const ipv6Checkbox = wrapper.find('[data-testid="cluster-rke2-cni-ipv6-checkbox"]').find('input');
-
-      expect(ipv6Checkbox.exists()).toBe(true);
-      expect(ipv6Checkbox.isVisible()).toBe(true);
-      expect(ipv6Checkbox.attributes().value).toBe('true');
-
-      // Change the kubernetes version that needs the legacy format
-      const k8s123 = mockVersionOptions.find((v) => v.id === 'v1.23.0+rke2r1');
+      const exp = { bandwidthManager: { enabled: true } };
 
-      await wrapper.setProps({ selectedVersion: k8s123 });
+      expect(JSON.stringify(latest)).toStrictEqual(JSON.stringify(exp));
 
-      let latest = (wrapper.emitted()['cilium-values-changed'] || [])[0][0];
-
-      expect(JSON.stringify(latest)).toStrictEqual(JSON.stringify(legacyOnValue));
+      // Check that other properties are preserved
+      latest = {
+        ...latest,
+        bandwidthManager: {
+          test:    true,
+          enabled: false
+        },
+      };
 
-      // Change back the version so that the new format should be used
-      const k8s125 = mockVersionOptions.find((v) => v.id === 'v1.25.0+rke2r1');
+      await wrapper.setProps({ userChartValues: { 'rke2-cilium': latest } });
 
-      await wrapper.setProps({ selectedVersion: k8s125 });
+      // Click the checkbox to turn bandwidth manager off again
+      await bmCheckbox.find('label').trigger('click');
+      await nextTick();
+      await nextTick();
 
       latest = (wrapper.emitted()['cilium-values-changed'] || [])[1][0];
-      expect(JSON.stringify(latest)).toStrictEqual(JSON.stringify(newOnValue));
-    });
-  });
-
-  it('should toggle bandwidth manager support on/off', async() => {
-    const wrapper = createBasicsTab('v1.25.0+rke2r1', {});
-    const bmCheckbox = wrapper.find('[data-testid="cluster-rke2-cni-cilium-bandwidth-manager-checkbox"]');
-
-    expect(bmCheckbox.exists()).toBe(true);
-    expect(bmCheckbox.isVisible()).toBe(true);
-
-    // Click the checkbox - should enable bandwidth manager
-    await bmCheckbox.find('label').trigger('click');
-    await nextTick();
-    await nextTick();
-
-    // Check and update user values with the emitted value
-    let latest = (wrapper.emitted()['cilium-values-changed'] || [])[0][0];
-
-    expect(JSON.stringify(latest)).toStrictEqual(JSON.stringify(bmOnValue));
-
-    await wrapper.setProps({ userChartValues: { 'rke2-cilium': latest } });
-
-    // Click the checkbox to turn ipv6 off again
-    await bmCheckbox.find('label').trigger('click');
-    await nextTick();
-    await nextTick();
 
-    // Update from the emitted value
-    latest = (wrapper.emitted()['cilium-values-changed'] || [])[1][0];
+      const expected = '{"bandwidthManager":{"test":true,"enabled":true}}';
 
-    expect(JSON.stringify(latest)).toStrictEqual(JSON.stringify(bmOffValue));
-  });
-
-  it('should support ipv6 and bandwidth manager', async() => {
-    const wrapper = createBasicsTab('v1.25.0+rke2r1', {});
-    const bmCheckbox = wrapper.find('[data-testid="cluster-rke2-cni-cilium-bandwidth-manager-checkbox"]');
-    const ipv6Checkbox = wrapper.find('[data-testid="cluster-rke2-cni-ipv6-checkbox"]');
-
-    // Click the checkbox - should enable bandwidth manager
-    await bmCheckbox.find('label').trigger('click');
-    await nextTick();
-    await nextTick();
-
-    let latest = (wrapper.emitted()['cilium-values-changed'] || [])[0][0];
-
-    await wrapper.setProps({ userChartValues: { 'rke2-cilium': latest } });
-
-    // Click the checkbox - should enable ipv6
-    await ipv6Checkbox.find('label').trigger('click');
-    await nextTick();
-    await nextTick();
-
-    // Check and update user values with the emitted value
-    latest = (wrapper.emitted()['cilium-values-changed'] || [])[1][0];
-
-    const combined = {
-      bandwidthManager: { enabled: true },
-      ipv6:             { enabled: true }
-    };
-
-    expect(JSON.stringify(latest)).toStrictEqual(JSON.stringify(combined));
+      expect(JSON.stringify(latest)).toStrictEqual(expected);
+    });
 
-    // Check that other properties are preserved
-    latest = {
-      ...latest,
-      bandwidthManager: {
-        test:    true,
-        enabled: false
-      },
-      ipv6: {
-        test:    true,
-        enabled: false
+    it.each([
+      ['create', true, true, '%cluster.banner.cloudProviderUnsupportedAzure%'],
+      ['create', false, true, undefined],
+      ['create', true, false, undefined],
+      ['edit', true, true, undefined],
+      ['view', true, true, undefined],
+    ])('should display Unsupported Azure provider warning message', (mode, showCloudProvider, isAzureProviderUnsupported, warningMessage) => {
+      const wrapper = createBasicsTab('v1.31.0+rke2r1', {}, {
+        mode,
+        showCloudProvider,
+        isAzureProviderUnsupported,
+        canAzureMigrateOnEdit: true
+      });
+
+      let cloudProviderUnsupportedAzureWarningMessage;
+      const warningElement = wrapper.find('[data-testid="clusterBasics__showCloudProviderUnsupportedAzureWarning"]');
+
+      if (warningElement.exists()) {
+        cloudProviderUnsupportedAzureWarningMessage = warningElement.element.textContent;
       }
-    };
-
-    await wrapper.setProps({ userChartValues: { 'rke2-cilium': latest } });
-
-    // Click the checkbox to turn bandwidth manager off again
-    await bmCheckbox.find('label').trigger('click');
-    await nextTick();
-    await nextTick();
-
-    latest = (wrapper.emitted()['cilium-values-changed'] || [])[2][0];
-
-    const expected = '{"bandwidthManager":{"test":true,"enabled":true},"ipv6":{"test":true,"enabled":false}}';
 
-    expect(JSON.stringify(latest)).toStrictEqual(expected);
-  });
-
-  it.each([
-    ['create', true, true, '%cluster.banner.cloudProviderUnsupportedAzure%'],
-    ['create', false, true, undefined],
-    ['create', true, false, undefined],
-    ['edit', true, true, undefined],
-    ['view', true, true, undefined],
-  ])('should display Unsupported Azure provider warning message', (mode, showCloudProvider, isAzureProviderUnsupported, warningMessage) => {
-    const wrapper = createBasicsTab('v1.31.0+rke2r1', {}, {
-      mode,
-      showCloudProvider,
-      isAzureProviderUnsupported,
-      canAzureMigrateOnEdit: true
+      expect(cloudProviderUnsupportedAzureWarningMessage).toBe(warningMessage);
     });
 
-    let cloudProviderUnsupportedAzureWarningMessage;
-    const warningElement = wrapper.find('[data-testid="clusterBasics__showCloudProviderUnsupportedAzureWarning"]');
-
-    if (warningElement.exists()) {
-      cloudProviderUnsupportedAzureWarningMessage = warningElement.element.textContent;
-    }
-
-    expect(cloudProviderUnsupportedAzureWarningMessage).toBe(warningMessage);
-  });
+    it.each([
+      ['edit', true, true, '%cluster.banner.cloudProviderMigrateAzure%'],
+      ['edit', false, true, undefined],
+      ['edit', true, false, undefined],
+      ['create', true, true, undefined],
+      ['view', true, true, undefined],
+    ])('should display Azure Migration warning message', (mode, showCloudProvider, canAzureMigrateOnEdit, warningMessage) => {
+      const wrapper = createBasicsTab('v1.31.0+rke2r1', {}, {
+        mode,
+        showCloudProvider,
+        canAzureMigrateOnEdit,
+        isAzureProviderUnsupported: true,
+      });
+
+      let cloudProviderMigrateAzureWarningMessage;
+      const warningElement = wrapper.find('[data-testid="clusterBasics__showCloudProviderMigrateAzureWarning"]');
+
+      if (warningElement.exists()) {
+        cloudProviderMigrateAzureWarningMessage = warningElement.element.textContent;
+      }
 
-  it.each([
-    ['edit', true, true, '%cluster.banner.cloudProviderMigrateAzure%'],
-    ['edit', false, true, undefined],
-    ['edit', true, false, undefined],
-    ['create', true, true, undefined],
-    ['view', true, true, undefined],
-  ])('should display Azure Migration warning message', (mode, showCloudProvider, canAzureMigrateOnEdit, warningMessage) => {
-    const wrapper = createBasicsTab('v1.31.0+rke2r1', {}, {
-      mode,
-      showCloudProvider,
-      canAzureMigrateOnEdit,
-      isAzureProviderUnsupported: true,
+      expect(cloudProviderMigrateAzureWarningMessage).toBe(warningMessage);
     });
 
-    let cloudProviderMigrateAzureWarningMessage;
-    const warningElement = wrapper.find('[data-testid="clusterBasics__showCloudProviderMigrateAzureWarning"]');
-
-    if (warningElement.exists()) {
-      cloudProviderMigrateAzureWarningMessage = warningElement.element.textContent;
-    }
-
-    expect(cloudProviderMigrateAzureWarningMessage).toBe(warningMessage);
-  });
-
-  it.each([
-    ['create', true, false],
-    ['edit', false, true],
-    ['edit', true, false],
-    ['view', true, false],
-  ])('should disable Cloud Provider', (mode, canAzureMigrateOnEdit, disabled) => {
-    const wrapper = createBasicsTab('v1.31.0+rke2r1', {}, {
-      mode,
-      showCloudProvider: true,
-      canAzureMigrateOnEdit,
+    it.each([
+      ['create', true, false],
+      ['edit', false, true],
+      ['edit', true, false],
+      ['view', true, false],
+    ])('should disable Cloud Provider', (mode, canAzureMigrateOnEdit, disabled) => {
+      const wrapper = createBasicsTab('v1.31.0+rke2r1', {}, {
+        mode,
+        showCloudProvider: true,
+        canAzureMigrateOnEdit,
+      });
+
+      const cloudProvider = wrapper.find('[data-testid="clusterBasics__cloudProvider"]');
+
+      expect(cloudProvider.attributes().disabled).toBe(disabled.toString());
     });
-
-    const cloudProvider = wrapper.find('[data-testid="clusterBasics__cloudProvider"]');
-
-    expect(cloudProvider.attributes().disabled).toBe(disabled.toString());
   });
 });

package/edit/provisioning.cattle.io.cluster/__tests__/Networking.test.ts

@@ -75,19 +75,36 @@ describe('component: RKE2Networking', () => {
     expect(wrapper.emitted('validationChanged')).toHaveLength(2);
   });
 
-  it.each([
-    ['cluster-cidr', '2001:db8::/48'],
-    ['service-cidr', '2001:db8:1::/112'],
-  ])('should show an ipv6 warning banner when %p is an ipv6 address', async(field, address) => {
+  it('should show a flannel masq input when provisioning k3s and flannel is enabled', () => {
     const spec = { ...defaultSpec } as any;
 
-    spec.rkeConfig.machineGlobalConfig[field] = address;
+    const wrapper = shallowMount(Networking, {
+      propsData: {
+        mode:            'create',
+        value:           { spec },
+        selectedVersion: { serverArgs: mockServerArgs, label: 'k3s' },
+      },
+      global: {
+        mocks: {
+          ...defaultMocks,
+          $store: { getters: defaultGetters },
+        },
+      },
+    });
+
+    const input = wrapper.findComponent('[data-testid="cluster-rke2-flannel-masq-checkbox"]');
+
+    expect(input.exists()).toBe(true);
+  });
+
+  it('should not show a flannel masq input when provisioning rke2', () => {
+    const spec = { ...defaultSpec } as any;
 
     const wrapper = shallowMount(Networking, {
       propsData: {
         mode:            'create',
         value:           { spec },
-        selectedVersion: { serverArgs: mockServerArgs },
+        selectedVersion: { serverArgs: mockServerArgs, label: 'rke2' },
       },
       global: {
         mocks: {
@@ -97,25 +114,45 @@ describe('component: RKE2Networking', () => {
       },
     });
 
-    const banner = wrapper.findComponent('[data-testid="network-tab-ipv6StackPreferenceWarning"]');
+    const input = wrapper.findComponent('[data-testid="cluster-rke2-flannel-masq-checkbox"]');
 
-    expect(banner.exists()).toBe(true);
+    expect(wrapper.vm.showFlannelMasq).toBe(false);
+    expect(input.exists()).toBe(false);
   });
 
-  it('should not show an ipv6 warning banner when neither cluster-cidr nor service-cidr are ipv6', async() => {
+  it('should automatically check the flannel masq input when stack preference is changed from ipv4 to ipv6 or dual', async() => {
     const spec = { ...defaultSpec } as any;
 
-    spec.rkeConfig.machineGlobalConfig = {
-      cni:            'calico',
-      'cluster-cidr': '10.0.0.0/16',
-      'service-cidr': '10.0.1.0/16'
-    } ;
+    spec.rkeConfig.networking.stackPreference = 'ipv4';
 
     const wrapper = shallowMount(Networking, {
       propsData: {
         mode:            'create',
         value:           { spec },
-        selectedVersion: { serverArgs: mockServerArgs },
+        selectedVersion: { serverArgs: mockServerArgs, label: 'k3s' },
+      },
+      global: { mocks: {} }
+    });
+
+    const newSpec = { ...spec };
+
+    newSpec.rkeConfig.networking.stackPreference = 'dual';
+
+    await wrapper.setProps({ value: { spec: newSpec } });
+
+    expect(wrapper.emitted('enable-flannel-masq-changed')?.[0]?.[0]).toBe(true);
+  });
+
+  it('should automatically un-check the flannel masq input when stack preference is changed from ipv6 or dual to ipv4', async() => {
+    const spec = { ...defaultSpec } as any;
+
+    spec.rkeConfig.networking.stackPreference = 'ipv6';
+
+    const wrapper = shallowMount(Networking, {
+      propsData: {
+        mode:            'create',
+        value:           { spec },
+        selectedVersion: { serverArgs: mockServerArgs, label: 'k3s' },
       },
       global: {
         mocks: {
@@ -125,9 +162,13 @@ describe('component: RKE2Networking', () => {
       },
     });
 
-    const banner = wrapper.findComponent('[data-testid="network-tab-ipv6StackPreferenceWarning"]');
+    const newSpec = { ...spec };
+
+    newSpec.rkeConfig.networking.stackPreference = 'ipv4';
+
+    await wrapper.setProps({ value: { spec: newSpec } });
 
-    expect(banner.exists()).toBe(false);
+    expect(wrapper.emitted('enable-flannel-masq-changed')?.[0]?.[0]).toBe(false);
   });
 
   it('should not automatically update stack preference or validate it when editing an existing cluster even if its set to ipv4 and the user appears to have ipv6 pools', async() => {

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

@@ -2218,6 +2218,15 @@ export default {
     handleRegistrySecretChanged(neu) {
       this.registrySecret = neu;
     },
+
+    handleFlannelMasqChanged(neu) {
+      if (neu || neu === false) {
+        this.serverConfig['enable-flannel-masq'] = neu;
+      } else {
+        delete this.serverConfig['enable-flannel-masq'];
+      }
+    },
+
     validateClusterName() {
       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));
@@ -2530,6 +2539,7 @@ export default {
               :truncate-limit="truncateLimit"
               :machine-pools="machinePools"
               :has-some-ipv6-pools="hasSomeIpv6Pools"
+              :enable-flannel-masq="serverConfig['enable-flannel-masq']"
               @truncate-hostname-changed="truncateHostname"
               @cluster-cidr-changed="(val)=>localValue.spec.rkeConfig.machineGlobalConfig['cluster-cidr'] = val"
               @service-cidr-changed="(val)=>localValue.spec.rkeConfig.machineGlobalConfig['service-cidr'] = val"
@@ -2542,6 +2552,7 @@ export default {
               @fqdn-changed="(val)=>localValue.spec.localClusterAuthEndpoint.fqdn = val"
               @stack-preference-changed="(val)=>localValue.spec.rkeConfig.networking.stackPreference = val"
               @validationChanged="(val)=>stackPreferenceError = !val"
+              @enable-flannel-masq-changed="handleFlannelMasqChanged"
             />
           </Tab>
 

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

@@ -125,13 +125,6 @@ export default {
   },
 
   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;
     }
@@ -148,7 +141,7 @@ export default {
       return this.serverConfig?.cni === 'none';
     },
 
-    showCiliumIpv6Controls() {
+    showBandwidthManagerControl() {
       return this.serverConfig?.cni === 'cilium' || this.serverConfig?.cni === 'multus,cilium';
     },
 
@@ -320,54 +313,6 @@ export default {
       return semver.satisfies(selectedVersion, '>=1.21.0');
     },
 
-    ciliumIpv6: {
-      get() {
-        // eslint-disable-next-line no-unused-vars
-        const cni = this.serverConfig.cni; // force this property to recalculate if cni was changed away from cilium and chartValues['rke-cilium'] deleted
-
-        const chart = this.userChartValues[this.chartVersionKey('rke2-cilium')];
-
-        return chart?.cilium?.ipv6?.enabled || chart?.ipv6?.enabled || false;
-      },
-      set(neu) {
-        const name = this.chartVersionKey('rke2-cilium');
-        const values = this.userChartValues[name];
-
-        // RKE2 older than 1.23.5 uses different Helm chart values structure - need to take that into account
-        const version = this.selectedVersion.value;
-        let ciliumValues = {};
-
-        if (semver.gt(version, '1.23.5')) {
-          // New style
-          ciliumValues = {
-            ...values,
-            ipv6: {
-              ...values?.ipv6,
-              enabled: neu
-            }
-          };
-
-          delete ciliumValues.cilium;
-        } else {
-          // Old style
-          ciliumValues = {
-            ...values,
-            cilium: {
-              ...values?.cilium,
-              ipv6: {
-                ...values?.cilium?.ipv6,
-                enabled: neu
-              }
-            }
-          };
-
-          delete ciliumValues.ipv6;
-        }
-
-        this.$emit('cilium-values-changed', ciliumValues);
-      }
-    },
-
     ciliumBandwidthManager: {
       get() {
         // eslint-disable-next-line no-unused-vars
@@ -515,6 +460,7 @@ export default {
         />
       </div>
     </div>
+
     <div
       v-if="showCni"
       :style="{'align-items':'center'}"
@@ -531,15 +477,9 @@ export default {
         />
       </div>
       <div
-        v-if="showCiliumIpv6Controls"
+        v-if="showBandwidthManagerControl"
         class="col"
       >
-        <Checkbox
-          v-model:value="ciliumIpv6"
-          data-testid="cluster-rke2-cni-ipv6-checkbox"
-          :mode="mode"
-          :label="t('cluster.rke2.address.ipv6.enable')"
-        />
         <Checkbox
           v-model:value="ciliumBandwidthManager"
           data-testid="cluster-rke2-cni-cilium-bandwidth-manager-checkbox"