@rancher/shell 3.0.7 → 3.0.8-rc.10

package/edit/persistentvolume/plugins/iscsi.vue

@@ -17,27 +17,26 @@ export default {
       required: true,
     },
   },
-  data() {
-    const yesNoOptions = [
-      {
-        label: this.t('generic.yes'),
-        value: true
-      },
-      {
-        label: this.t('generic.no'),
-        value: false
-      }
-    ];
-
+  created() {
     this.value.spec['iscsi'] = this.value.spec.iscsi || {};
     this.value.spec.iscsi['readOnly'] = this.value.spec.iscsi.readOnly || false;
     this.value.spec.iscsi['secretRef'] = this.value.spec.iscsi.secretRef || {};
     this.value.spec.iscsi['chapAuthDiscovery'] = this.value.spec.iscsi.chapAuthDiscovery || false;
     this.value.spec.iscsi['chapAuthSession'] = this.value.spec.iscsi.chapAuthSession || false;
-
-    return { yesNoOptions };
   },
   computed: {
+    yesNoOptions() {
+      return [
+        {
+          label: this.t('generic.yes'),
+          value: true
+        },
+        {
+          label: this.t('generic.no'),
+          value: false
+        }
+      ];
+    },
     lun: {
       get() {
         return this.value.spec.iscsi.lun;

package/edit/persistentvolume/plugins/local.vue

@@ -13,10 +13,8 @@ export default {
       required: true,
     },
   },
-  data() {
+  created() {
     this.value.spec['local'] = this.value.spec.local || {};
-
-    return { };
   },
 };
 </script>

package/edit/persistentvolume/plugins/longhorn.vue

@@ -5,6 +5,13 @@ import { RadioGroup } from '@components/Form/Radio';
 import { _CREATE } from '@shell/config/query-params';
 import { LONGHORN_DRIVER } from '@shell/config/types';
 
+const DEFAULT_VOLUME_ATTRIBUTES = {
+  size:                '2Gi',
+  numberOfReplicas:    '3',
+  staleReplicaTimeout: '20',
+  fromBackup:          ''
+};
+
 export default {
   components: {
     LabeledInput, KeyValue, RadioGroup
@@ -19,33 +26,27 @@ export default {
       required: true,
     },
   },
-  data() {
-    const defaultVolumeAttributes = {
-      size:                '2Gi',
-      numberOfReplicas:    '3',
-      staleReplicaTimeout: '20',
-      fromBackup:          ''
-    };
-
+  created() {
     if (this.mode === _CREATE) {
       this.value.spec['csi'] = this.value.spec.csi || {};
       this.value.spec.csi['driver'] = LONGHORN_DRIVER;
       this.value.spec.csi['readOnly'] = this.value.spec.csi.readOnly || false;
-      this.value.spec.csi['volumeAttributes'] = this.value.spec.csi.volumeAttributes || defaultVolumeAttributes;
+      this.value.spec.csi['volumeAttributes'] = this.value.spec.csi.volumeAttributes || DEFAULT_VOLUME_ATTRIBUTES;
+    }
+  },
+  computed: {
+    readOnlyOptions() {
+      return [
+        {
+          label: this.t('generic.yes'),
+          value: true
+        },
+        {
+          label: this.t('generic.no'),
+          value: false
+        }
+      ];
     }
-
-    const readOnlyOptions = [
-      {
-        label: this.t('generic.yes'),
-        value: true
-      },
-      {
-        label: this.t('generic.no'),
-        value: false
-      }
-    ];
-
-    return { readOnlyOptions };
   },
 };
 </script>

package/edit/persistentvolume/plugins/nfs.vue

@@ -14,23 +14,24 @@ export default {
       required: true,
     },
   },
-  data() {
+  created() {
     this.value.spec['nfs'] = this.value.spec.nfs || {};
     this.value.spec.nfs['readOnly'] = this.value.spec.nfs.readOnly || false;
-
-    const readOnlyOptions = [
-      {
-        label: this.t('generic.yes'),
-        value: true
-      },
-      {
-        label: this.t('generic.no'),
-        value: false
-      }
-    ];
-
-    return { readOnlyOptions };
   },
+  computed: {
+    readOnlyOptions() {
+      return [
+        {
+          label: this.t('generic.yes'),
+          value: true
+        },
+        {
+          label: this.t('generic.no'),
+          value: false
+        }
+      ];
+    }
+  }
 };
 </script>
 

package/edit/persistentvolume/plugins/photonPersistentDisk.vue

@@ -13,23 +13,10 @@ export default {
       required: true,
     },
   },
-  data() {
-    const readOnlyOptions = [
-      {
-        label: this.t('generic.yes'),
-        value: true
-      },
-      {
-        label: this.t('generic.no'),
-        value: false
-      }
-    ];
-
+  created() {
     this.value.spec['photonPersistentDisk'] = this.value.spec.photonPersistentDisk || {};
     this.value.spec.photonPersistentDisk['readOnly'] = this.value.spec.photonPersistentDisk.readOnly || false;
     this.value.spec.photonPersistentDisk['secretRef'] = this.value.spec.photonPersistentDisk.secretRef || {};
-
-    return { readOnlyOptions };
   },
 };
 </script>

package/edit/persistentvolume/plugins/portworxVolume.vue

@@ -14,24 +14,25 @@ export default {
       required: true,
     },
   },
-  data() {
-    const readOnlyOptions = [
-      {
-        label: this.t('generic.yes'),
-        value: true
-      },
-      {
-        label: this.t('generic.no'),
-        value: false
-      }
-    ];
-
+  created() {
     this.value.spec['portworxVolume'] = this.value.spec.portworxVolume || {};
     this.value.spec.portworxVolume['readOnly'] = this.value.spec.portworxVolume.readOnly || false;
     this.value.spec.portworxVolume['secretRef'] = this.value.spec.portworxVolume.secretRef || {};
-
-    return { readOnlyOptions };
   },
+  computed: {
+    readOnlyOptions() {
+      return [
+        {
+          label: this.t('generic.yes'),
+          value: true
+        },
+        {
+          label: this.t('generic.no'),
+          value: false
+        }
+      ];
+    }
+  }
 };
 </script>
 

package/edit/persistentvolume/plugins/quobyte.vue

@@ -14,23 +14,24 @@ export default {
       required: true,
     },
   },
-  data() {
-    const readOnlyOptions = [
-      {
-        label: this.t('generic.yes'),
-        value: true
-      },
-      {
-        label: this.t('generic.no'),
-        value: false
-      }
-    ];
-
+  created() {
     this.value.spec['quobyte'] = this.value.spec.quobyte || {};
     this.value.spec.quobyte['readOnly'] = this.value.spec.quobyte.readOnly || false;
-
-    return { readOnlyOptions };
   },
+  computed: {
+    readOnlyOptions() {
+      return [
+        {
+          label: this.t('generic.yes'),
+          value: true
+        },
+        {
+          label: this.t('generic.no'),
+          value: false
+        }
+      ];
+    }
+  }
 };
 </script>
 

package/edit/persistentvolume/plugins/rbd.vue

@@ -17,24 +17,25 @@ export default {
       required: true,
     },
   },
-  data() {
-    const readOnlyOptions = [
-      {
-        label: this.t('generic.yes'),
-        value: true
-      },
-      {
-        label: this.t('generic.no'),
-        value: false
-      }
-    ];
-
+  created() {
     this.value.spec['rbd'] = this.value.spec.rbd || {};
     this.value.spec.rbd['readOnly'] = this.value.spec.rbd.readOnly || false;
     this.value.spec.rbd['secretRef'] = this.value.spec.rbd.secretRef || {};
-
-    return { readOnlyOptions };
   },
+  computed: {
+    readOnlyOptions() {
+      return [
+        {
+          label: this.t('generic.yes'),
+          value: true
+        },
+        {
+          label: this.t('generic.no'),
+          value: false
+        }
+      ];
+    }
+  }
 };
 </script>
 

package/edit/persistentvolume/plugins/scaleIO.vue

@@ -14,25 +14,26 @@ export default {
       required: true,
     },
   },
-  data() {
-    const yesNoOptions = [
-      {
-        label: this.t('generic.yes'),
-        value: true
-      },
-      {
-        label: this.t('generic.no'),
-        value: false
-      }
-    ];
-
+  created() {
     this.value.spec['scaleIO'] = this.value.spec.scaleIO || {};
     this.value.spec.scaleIO['readOnly'] = this.value.spec.scaleIO.readOnly || false;
     this.value.spec.scaleIO['secretRef'] = this.value.spec.scaleIO.secretRef || {};
     this.value.spec.scaleIO['sslEnabled'] = this.value.spec.scaleIO.sslEnabled || false;
-
-    return { yesNoOptions };
   },
+  computed: {
+    yesNoOptions() {
+      return [
+        {
+          label: this.t('generic.yes'),
+          value: true
+        },
+        {
+          label: this.t('generic.no'),
+          value: false
+        }
+      ];
+    }
+  }
 };
 </script>
 

package/edit/persistentvolume/plugins/storageos.vue

@@ -14,24 +14,25 @@ export default {
       required: true,
     },
   },
-  data() {
-    const yesNoOptions = [
-      {
-        label: this.t('generic.yes'),
-        value: true
-      },
-      {
-        label: this.t('generic.no'),
-        value: false
-      }
-    ];
-
+  created() {
     this.value.spec['storageos'] = this.value.spec.storageos || {};
     this.value.spec.storageos['readOnly'] = this.value.spec.storageos.readOnly || false;
     this.value.spec.storageos['secretRef'] = this.value.spec.storageos.secretRef || {};
-
-    return { yesNoOptions };
   },
+  computed: {
+    yesNoOptions() {
+      return [
+        {
+          label: this.t('generic.yes'),
+          value: true
+        },
+        {
+          label: this.t('generic.no'),
+          value: false
+        }
+      ];
+    }
+  }
 };
 </script>
 

package/edit/persistentvolume/plugins/vsphereVolume.vue

@@ -13,10 +13,8 @@ export default {
       required: true,
     },
   },
-  data() {
+  created() {
     this.value.spec['vsphereVolume'] = this.value.spec.vsphereVolume || {};
-
-    return { };
   },
 };
 </script>

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

@@ -7,6 +7,7 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import KeyValue from '@shell/components/form/KeyValue';
 import Taints from '@shell/components/form/Taints';
 import { MANAGEMENT } from '@shell/config/types';
+import { STACK_PREFS } from './tabs/networking/index.vue';
 
 import { sanitizeKey, sanitizeIP, sanitizeValue } from '@shell/utils/string';
 
@@ -33,6 +34,12 @@ export default {
     await this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE });
   },
 
+  created() {
+    if (this.isIpv6OrDualStack) {
+      this.showAdvanced = true;
+    }
+  },
+
   data() {
     return {
       showAdvanced:    false,
@@ -52,12 +59,14 @@ export default {
   computed: {
     linuxCommand() {
       const out = this.insecure ? [this.clusterToken.insecureNodeCommand] : [this.clusterToken.nodeCommand];
+      const sanitizedAddresses = this.address.split(',').map((a) => sanitizeIP(a)).join(',');
+      const sanitizedInternalAddresses = this.internalAddress.split(',').map((a) => sanitizeIP(a)).join(',');
 
       this.etcd && out.push('--etcd');
       this.controlPlane && out.push('--controlplane');
       this.worker && out.push('--worker');
-      this.address && out.push(`--address ${ sanitizeIP(this.address) }`);
-      this.internalAddress && out.push(`--internal-address ${ sanitizeIP(this.internalAddress) }`);
+      this.address && out.push(`--address ${ sanitizedAddresses }`);
+      this.internalAddress && out.push(`--internal-address ${ sanitizedInternalAddresses }`);
       this.nodeName && out.push(`--node-name ${ sanitizeValue(this.nodeName) }`);
 
       for ( const key in this.labels ) {
@@ -84,9 +93,11 @@ export default {
 
     windowsCommand() {
       const out = this.insecureWindows ? [this.clusterToken.insecureWindowsNodeCommand] : [this.clusterToken.windowsNodeCommand];
+      const sanitizedAddresses = this.address.split(',').map((a) => sanitizeIP(a)).join(',');
+      const sanitizedInternalAddresses = this.internalAddress.split(',').map((a) => sanitizeIP(a)).join(',');
 
-      this.address && out.push(`-Address "${ sanitizeValue(this.address) }"`);
-      this.internalAddress && out.push(`-InternalAddress "${ sanitizeValue(this.internalAddress) }"`);
+      this.address && out.push(`-Address "${ sanitizedAddresses }"`);
+      this.internalAddress && out.push(`-InternalAddress "${ sanitizedInternalAddresses }"`);
       this.nodeName && out.push(`-NodeName "${ sanitizeValue(this.nodeName) }"`);
 
       for ( const key in this.labels ) {
@@ -135,6 +146,12 @@ export default {
       }, []);
 
       return allRoles.length === 3;
+    },
+
+    isIpv6OrDualStack() {
+      const stackPreference = this.cluster?.spec?.rkeConfig?.networking?.stackPreference;
+
+      return stackPreference === STACK_PREFS.IPV6 || stackPreference === STACK_PREFS.DUAL;
     }
 
   },
@@ -187,12 +204,22 @@ export default {
     >
       <h3 v-t="'cluster.custom.advanced.label'" />
       <h4 v-t="'cluster.custom.advanced.detail'" />
-
+      <Banner
+        v-if="isIpv6OrDualStack"
+        color="warning"
+        data-testid="rke2-custom-command-ipv6-banner"
+      >
+        <t
+          k="cluster.custom.advanced.ipv6"
+          raw
+        />
+      </Banner>
       <div class="row mb-10">
         <div class="col span-4">
           <LabeledInput
             v-model:value="nodeName"
             label-key="cluster.custom.advanced.nodeName"
+            data-testid="rke2-custom-command-node-name"
           />
         </div>
         <div class="col span-4">

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

@@ -126,4 +126,39 @@ describe('component: CustomCommand', () => {
       expect(element.exists()).toBe(true);
     });
   });
+
+  describe('advanced options', () => {
+    it('should show advanced options if the cluster uses ipv6', () => {
+      const config = clone(customCommandConfig);
+
+      config.props.cluster = { spec: { rkeConfig: { networking: { stackPreference: 'dual' } } } };
+      const wrapper = mount(CustomCommand, config);
+
+      const element = wrapper.find('[data-testid="rke2-custom-command-node-name"]');
+
+      expect(element.exists()).toBe(true);
+    });
+  });
+
+  it('should not show advanced options if the does not use ipv6', () => {
+    const config = clone(customCommandConfig);
+
+    config.props.cluster = { spec: { rkeConfig: { networking: { stackPreference: 'ipv4' } } } };
+    const wrapper = mount(CustomCommand, config);
+
+    const element = wrapper.find('[data-testid="rke2-custom-command-node-name"]');
+
+    expect(element.exists()).toBe(false);
+  });
+
+  it('should show a banner in advanced options if the cluster uses ipv6', () => {
+    const config = clone(customCommandConfig);
+
+    config.props.cluster = { spec: { rkeConfig: { networking: { stackPreference: 'dual' } } } };
+    const wrapper = mount(CustomCommand, config);
+
+    const element = wrapper.find('[data-testid="rke2-custom-command-ipv6-banner"]');
+
+    expect(element.exists()).toBe(true);
+  });
 });

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

@@ -0,0 +1,155 @@
+import { mount, shallowMount } from '@vue/test-utils';
+import Networking from '@shell/edit/provisioning.cattle.io.cluster/tabs/networking/index.vue';
+
+const mockServerArgs = { disable: {}, cni: { options: [] } };
+
+const defaultGetters = {
+  currentStore:           () => 'current_store',
+  'management/schemaFor': jest.fn(),
+  'current_store/all':    jest.fn(),
+  'i18n/t':               jest.fn(),
+  'i18n/withFallback':    jest.fn(),
+};
+
+const defaultMocks = {
+  $route: {
+    name:  'anything',
+    query: { AS: 'yaml' },
+  },
+};
+
+const defaultSpec = {
+  rkeConfig: {
+    etcd: { disableSnapshots: false }, machineGlobalConfig: { cni: 'calico' }, networking: {}
+  },
+  chartValues:              {},
+  localClusterAuthEndpoint: {}
+};
+
+describe('component: RKE2Networking', () => {
+  it('should show a stack preference dropdown', () => {
+    const wrapper = shallowMount(Networking, {
+      propsData: {
+        mode:            'create',
+        value:           { spec: defaultSpec },
+        selectedVersion: { serverArgs: mockServerArgs },
+      },
+      global: {
+        mocks: {
+          ...defaultMocks,
+          $store: { getters: defaultGetters },
+        },
+      },
+    });
+
+    const dropdown = wrapper.findComponent('[data-testid="network-tab-stackpreferences"]');
+
+    expect(dropdown.props('options')).toHaveLength(3);
+  });
+
+  it('should show an error when an ipv6 pool is present and the user selects the ipv4-only stack preference when creating a new cluster', async() => {
+    const spec = { ...defaultSpec, rkeConfig: { ...defaultSpec.rkeConfig, networking: { stackPreference: 'ipv4' } } };
+    const wrapper = mount(Networking, {
+      propsData: {
+        mode:             'create',
+        value:            { spec },
+        selectedVersion:  { serverArgs: mockServerArgs },
+        hasSomeIpv6Pools: true,
+      },
+      global: {
+        mocks: {
+          ...defaultMocks,
+          $store: { getters: defaultGetters },
+        },
+      },
+    });
+
+    expect(wrapper.emitted('validationChanged')?.[0]?.[0]).toBe(false);
+    expect(wrapper.emitted('validationChanged')).toHaveLength(1);
+
+    spec.rkeConfig.networking.stackPreference = 'ipv6';
+    wrapper.setProps({ value: { spec } });
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted('validationChanged')?.[1]?.[0]).toBe(true);
+    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) => {
+    const spec = { ...defaultSpec } as any;
+
+    spec.rkeConfig.machineGlobalConfig[field] = address;
+
+    const wrapper = shallowMount(Networking, {
+      propsData: {
+        mode:            'create',
+        value:           { spec },
+        selectedVersion: { serverArgs: mockServerArgs },
+      },
+      global: {
+        mocks: {
+          ...defaultMocks,
+          $store: { getters: defaultGetters },
+        },
+      },
+    });
+
+    const banner = wrapper.findComponent('[data-testid="network-tab-ipv6StackPreferenceWarning"]');
+
+    expect(banner.exists()).toBe(true);
+  });
+
+  it('should not show an ipv6 warning banner when neither cluster-cidr nor service-cidr are ipv6', 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'
+    } ;
+
+    const wrapper = shallowMount(Networking, {
+      propsData: {
+        mode:            'create',
+        value:           { spec },
+        selectedVersion: { serverArgs: mockServerArgs },
+      },
+      global: {
+        mocks: {
+          ...defaultMocks,
+          $store: { getters: defaultGetters },
+        },
+      },
+    });
+
+    const banner = wrapper.findComponent('[data-testid="network-tab-ipv6StackPreferenceWarning"]');
+
+    expect(banner.exists()).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() => {
+    const spec = { ...defaultSpec, rkeConfig: { ...defaultSpec.rkeConfig, networking: { stackPreference: 'ipv4' } } };
+    const wrapper = mount(Networking, {
+      propsData: {
+        mode:             'edit',
+        value:            { spec },
+        selectedVersion:  { serverArgs: mockServerArgs },
+        hasSomeIpv6Pools: true,
+      },
+      global: {
+        mocks: {
+          ...defaultMocks,
+          $store: { getters: defaultGetters },
+        },
+      },
+    });
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted('validationChanged')?.[0]?.[0]).toBe(true);
+    expect(wrapper.emitted('stack-preference-changed')).toBeUndefined();
+  });
+});