@rancher/shell 0.5.3 → 2.0.0

package/machine-config/__tests__/vmwarevsphere.test.ts

@@ -1,73 +1,102 @@
 import { mount } from '@vue/test-utils';
 import vmwarevsphere, { DEFAULT_VALUES, SENTINEL } from '@shell/machine-config/vmwarevsphere.vue';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 
 describe('component: vmwarevsphere', () => {
   const defaultGetters = { 'i18n/t': jest.fn().mockImplementation((key: string) => key) };
-  const defaultSetup = {
+  const poolId = 'poolId';
+  const baseSetup = {
     propsData: {
-      poolId:       'poolId',
+      poolId,
       credentialId: 'credentialId',
       disabled:     false,
-      mode:         'create',
-      value:        { initted: false },
       provider:     'vmwarevsphere'
     },
     mocks: {
       $fetchState: { pending: false },
       $store:      { getters: defaultGetters },
     },
-    stubs:      { CodeMirror: true },
-    directives: { cleanHtmlDirective }
+    stubs: { CodeMirror: true },
+  };
+  const defaultCreateSetup = {
+    ...baseSetup,
+    propsData: {
+      ...baseSetup.propsData,
+      mode:           'create',
+      poolCreateMode: true,
+      value:          { initted: false },
+    }
+  };
+  const defaultEditSetup = {
+    ...baseSetup,
+    propsData: {
+      ...baseSetup.propsData,
+      mode:           'edit',
+      poolCreateMode: false,
+      value:          { initted: false },
+    }
+  };
+  const editModeWithPoolInCreateModeSetup = {
+    ...defaultEditSetup,
+    propsData: {
+      ...defaultEditSetup.propsData,
+      poolCreateMode: true
+    }
   };
 
-  it('should mount successfully with correct default values', () => {
-    const wrapper = mount(vmwarevsphere, defaultSetup);
-
-    const dataCenterElement = wrapper.find(`[data-testid="datacenter"]`).element;
-    const resourcePoolElement = wrapper.find(`[data-testid="resourcePool"]`).element;
-    const dataStoreElement = wrapper.find(`[data-testid="dataStore"]`).element;
-    const folderElement = wrapper.find(`[data-testid="folder"]`).element;
-    const hostElement = wrapper.find(`[data-testid="host"]`).element;
-    const gracefulShutdownTimeoutElement = wrapper.find(`[data-testid="gracefulShutdownTimeout"]`).element;
-
-    expect(dataCenterElement).toBeDefined();
-    expect(resourcePoolElement).toBeDefined();
-    expect(dataStoreElement).toBeDefined();
-    expect(folderElement).toBeDefined();
-    expect(hostElement).toBeDefined();
-    expect(gracefulShutdownTimeoutElement).toBeDefined();
-
-    const {
-      cpuCount: defaultCpuCount,
-      diskSize: defaultDiskSize,
-      memorySize: defaultMemorySize,
-      hostsystem: defaultHostsystem,
-      cloudConfig: defaultCloudConfig,
-      gracefulShutdownTimeout: defaultGracefulShutdownTimeout,
-      cfgparam: defaultCfgparam,
-      os: defaultOs
-    } = DEFAULT_VALUES;
-
-    const {
-      cpuCount,
-      diskSize,
-      memorySize,
-      hostsystem,
-      cloudConfig,
-      gracefulShutdownTimeout,
-      cfgparam,
-      os
-    } = wrapper.vm.$options.propsData.value;
-
-    expect(cpuCount).toStrictEqual(defaultCpuCount);
-    expect(diskSize).toStrictEqual(defaultDiskSize);
-    expect(memorySize).toStrictEqual(defaultMemorySize);
-    expect(hostsystem).toStrictEqual(defaultHostsystem);
-    expect(cloudConfig).toStrictEqual(defaultCloudConfig);
-    expect(gracefulShutdownTimeout).toStrictEqual(defaultGracefulShutdownTimeout);
-    expect(cfgparam).toStrictEqual(defaultCfgparam);
-    expect(os).toStrictEqual(defaultOs);
+  describe('default values', () => {
+    const testCases = [
+      defaultCreateSetup,
+      editModeWithPoolInCreateModeSetup
+    ];
+
+    it.each(testCases)('should mount successfully with correct default values', (setup) => {
+      const wrapper = mount(vmwarevsphere, setup);
+
+      const dataCenterElement = wrapper.find(`[data-testid="datacenter"]`).element;
+      const resourcePoolElement = wrapper.find(`[data-testid="resourcePool"]`).element;
+      const dataStoreElement = wrapper.find(`[data-testid="dataStore"]`).element;
+      const folderElement = wrapper.find(`[data-testid="folder"]`).element;
+      const hostElement = wrapper.find(`[data-testid="host"]`).element;
+      const gracefulShutdownTimeoutElement = wrapper.find(`[data-testid="gracefulShutdownTimeout"]`).element;
+
+      expect(dataCenterElement).toBeDefined();
+      expect(resourcePoolElement).toBeDefined();
+      expect(dataStoreElement).toBeDefined();
+      expect(folderElement).toBeDefined();
+      expect(hostElement).toBeDefined();
+      expect(gracefulShutdownTimeoutElement).toBeDefined();
+
+      const {
+        cpuCount: defaultCpuCount,
+        diskSize: defaultDiskSize,
+        memorySize: defaultMemorySize,
+        hostsystem: defaultHostsystem,
+        cloudConfig: defaultCloudConfig,
+        gracefulShutdownTimeout: defaultGracefulShutdownTimeout,
+        cfgparam: defaultCfgparam,
+        os: defaultOs
+      } = DEFAULT_VALUES;
+
+      const {
+        cpuCount,
+        diskSize,
+        memorySize,
+        hostsystem,
+        cloudConfig,
+        gracefulShutdownTimeout,
+        cfgparam,
+        os
+      } = wrapper.vm.$options.propsData.value;
+
+      expect(cpuCount).toStrictEqual(defaultCpuCount);
+      expect(diskSize).toStrictEqual(defaultDiskSize);
+      expect(memorySize).toStrictEqual(defaultMemorySize);
+      expect(hostsystem).toStrictEqual(defaultHostsystem);
+      expect(cloudConfig).toStrictEqual(defaultCloudConfig);
+      expect(gracefulShutdownTimeout).toStrictEqual(defaultGracefulShutdownTimeout);
+      expect(cfgparam).toStrictEqual(defaultCfgparam);
+      expect(os).toStrictEqual(defaultOs);
+    });
   });
 
   describe('mapPathOptionsToContent', () => {
@@ -78,7 +107,7 @@ describe('component: vmwarevsphere', () => {
     ];
 
     it.each(testCases)('should generate label/value object without manipultion', (rawData, expected) => {
-      const wrapper = mount(vmwarevsphere, defaultSetup);
+      const wrapper = mount(vmwarevsphere, defaultCreateSetup);
 
       expect(wrapper.vm.mapPathOptionsToContent(rawData)).toStrictEqual(expected);
     });
@@ -95,7 +124,7 @@ describe('component: vmwarevsphere', () => {
     ];
 
     it.each(testCases)('should generate label/value object for host options properly', (rawData, expected) => {
-      const wrapper = mount(vmwarevsphere, defaultSetup);
+      const wrapper = mount(vmwarevsphere, defaultCreateSetup);
 
       expect(wrapper.vm.mapHostOptionsToContent(rawData)).toStrictEqual(expected);
     });
@@ -114,7 +143,7 @@ describe('component: vmwarevsphere', () => {
     ];
 
     it.each(testCases)('should generate label/value object for folder options properly', (rawData, expected) => {
-      const wrapper = mount(vmwarevsphere, defaultSetup);
+      const wrapper = mount(vmwarevsphere, defaultCreateSetup);
 
       expect(wrapper.vm.mapFolderOptionsToContent(rawData)).toStrictEqual(expected);
     });
@@ -127,7 +156,7 @@ describe('component: vmwarevsphere', () => {
     ];
 
     it.each(testCases)('should generate label/value object for custom attributes options properly', (rawData, expected) => {
-      const wrapper = mount(vmwarevsphere, defaultSetup);
+      const wrapper = mount(vmwarevsphere, defaultCreateSetup);
 
       expect(wrapper.vm.mapCustomAttributesToContent(rawData)).toStrictEqual(expected);
     });
@@ -143,9 +172,83 @@ describe('component: vmwarevsphere', () => {
       const expectedReslut = [{
         ...tag, label: `${ tag.category } / ${ tag.name }`, value: tag.id
       }];
-      const wrapper = mount(vmwarevsphere, defaultSetup);
+      const wrapper = mount(vmwarevsphere, defaultCreateSetup);
 
       expect(wrapper.vm.mapTagsToContent([tag])).toStrictEqual(expectedReslut);
     });
   });
+
+  describe('resetValueIfNecessary', () => {
+    const hostsystemOptions = ['', '/Datacenter/host/Cluster/111.11.11.1'];
+    const folderOptions = ['', '/Datacenter/vm', '/Datacenter/vm/sub-folder'];
+    const contentLibraryOptions = ['', 'some-content-library'];
+    const networkOptions = ['', 'some-network'];
+    const tagOptions = ['', 'some-tag'];
+
+    it('should add errors to validationError collection when values are NOT in the options', () => {
+      const setup = {
+        ...defaultEditSetup,
+        propsData: {
+          ...defaultEditSetup.propsData,
+          value: {
+            ...defaultEditSetup.propsData.value,
+            hostsystem:      'something that is not included in the options',
+            folder:          'same as above',
+            constentLibrary: 'same as above'
+          }
+        }
+      };
+
+      const wrapper = mount(vmwarevsphere, setup);
+
+      const hostsystemContent = wrapper.vm.mapHostOptionsToContent(hostsystemOptions);
+      const folderContent = wrapper.vm.mapHostOptionsToContent(folderOptions);
+      const contentLibraryContent = wrapper.vm.mapPathOptionsToContent(contentLibraryOptions);
+
+      wrapper.vm.resetValueIfNecessary('hostsystem', hostsystemContent, hostsystemOptions);
+      wrapper.vm.resetValueIfNecessary('folder', folderContent, folderOptions);
+      wrapper.vm.resetValueIfNecessary('contentLibrary', contentLibraryContent, contentLibraryOptions);
+
+      expect(wrapper.vm.$data.validationErrors[poolId]).toContain('hostsystem');
+      expect(wrapper.vm.$data.validationErrors[poolId]).toContain('folder');
+      expect(wrapper.vm.$data.validationErrors[poolId]).toContain('contentLibrary');
+    });
+
+    describe('hostsystem, folder, contentLibrary, network and tag', () => {
+      const testCases = [null, ''];
+
+      it.each(testCases)('should NOT be added to validationError collection if they are null or ""', (data) => {
+        const setup = {
+          ...defaultEditSetup,
+          propsData: {
+            ...defaultEditSetup.propsData,
+            value: {
+              ...defaultEditSetup.propsData.value,
+              hostsystem:     data,
+              folder:         data,
+              contentLibrary: data,
+              network:        [data],
+              tag:            [data]
+            }
+          }
+        };
+
+        const wrapper = mount(vmwarevsphere, setup);
+
+        const hostsystemContent = wrapper.vm.mapHostOptionsToContent(hostsystemOptions);
+        const folderContent = wrapper.vm.mapHostOptionsToContent(folderOptions);
+        const contentLibraryContent = wrapper.vm.mapPathOptionsToContent(contentLibraryOptions);
+        const networkContent = wrapper.vm.mapPathOptionsToContent(networkOptions);
+        const tagContent = wrapper.vm.mapPathOptionsToContent(tagOptions);
+
+        wrapper.vm.resetValueIfNecessary('hostsystem', hostsystemContent, hostsystemOptions);
+        wrapper.vm.resetValueIfNecessary('folder', folderContent, folderOptions);
+        wrapper.vm.resetValueIfNecessary('contentLibrary', contentLibraryContent, contentLibraryOptions);
+        wrapper.vm.resetValueIfNecessary('network', networkContent, networkOptions, true);
+        wrapper.vm.resetValueIfNecessary('tag', tagContent, tagOptions, true);
+
+        expect(wrapper.vm.$data.validationErrors[poolId]).toBeUndefined();
+      });
+    });
+  });
 });

package/machine-config/amazonec2.vue

@@ -70,7 +70,7 @@ export default {
       this.kmsClient = await this.$store.dispatch('aws/kms', { region, cloudCredentialId: this.credentialId });
 
       if ( !this.instanceInfo ) {
-        this.instanceInfo = await this.$store.dispatch('aws/instanceInfo', { client: this.ec2Client } );
+        this.instanceInfo = await this.$store.dispatch('aws/describeInstanceTypes', { client: this.ec2Client } );
       }
 
       const hash = {};

package/machine-config/azure.vue

@@ -12,6 +12,8 @@ import { Checkbox } from '@components/Form/Checkbox';
 import ArrayList from '@shell/components/form/ArrayList';
 import { randomStr } from '@shell/utils/string';
 import { addParam, addParams } from '@shell/utils/url';
+import { NORMAN } from '@shell/config/types';
+import { findBy } from '@shell/utils/array';
 import KeyValue from '@shell/components/form/KeyValue';
 import { RadioGroup } from '@components/Form/Radio';
 import { _CREATE, _EDIT } from '@shell/config/query-params';
@@ -92,7 +94,6 @@ const storageTypes = [
     value: 'StandardSSD_LRS'
   }
 ];
-const DEFAULT_REGION = 'westus';
 
 export default {
   components: {
@@ -148,6 +149,12 @@ export default {
       }
       if (!isEmpty(environment)) {
         this.value.environment = environment;
+      } else if (this.loadedCredentialIdFor !== this.credentialId) {
+        this.allCredentials = await this.$store.dispatch('rancher/findAll', { type: NORMAN.CLOUD_CREDENTIAL });
+
+        const currentCredential = this.allCredentials.find((obj) => obj.id === this.credentialId);
+
+        this.value.environment = currentCredential.azurecredentialConfig.environment;
       }
       if (!isEmpty(subscriptionId)) {
         this.value.subscriptionId = subscriptionId;
@@ -156,19 +163,20 @@ export default {
         this.value.tenantId = tenantId;
       }
 
-      this.locationOptions = await this.$store.dispatch('management/request', {
-        url:    addParam('/meta/aksLocations', 'cloudCredentialId', this.credentialId),
-        method: 'GET',
-      });
+      if (this.loadedCredentialIdFor !== this.credentialId) {
+        this.locationOptions = await this.$store.dispatch('management/request', {
+          url:    addParam('/meta/aksLocations', 'cloudCredentialId', this.credentialId),
+          method: 'GET',
+        });
 
-      if (this.mode === _CREATE) {
-        this.value.location = DEFAULT_REGION;
+        this.loadedCredentialIdFor = this.credentialId;
+      }
 
       // when you edit an Azure cluster and add a new machine pool (edit)
       // the location field doesn't come populated which causes the vmSizes request
       // to return 200 but with a null response (also a bunch of other fields are undefined...)
       // so let's prefill them with the defaults
-      } else if (this.mode === _EDIT && !this.value?.location) {
+      if (this.mode === _EDIT && !this.value?.location) {
         for (const key in this.defaultConfig) {
           if (this.value[key] === undefined) {
             this.$set(this.value, key, this.defaultConfig[key]);
@@ -176,6 +184,10 @@ export default {
         }
       }
 
+      if (!this.value.location || !findBy(this.locationOptions, 'name', this.value.location)) {
+        this.locationOptions?.length && this.setLocation(this.locationOptions[this.locationOptions.length - 1]);
+      }
+
       this.vmSizes = await this.$store.dispatch('management/request', {
         url: addParams('/meta/aksVMSizesV2', {
           cloudCredentialId: this.credentialId,
@@ -206,6 +218,8 @@ export default {
       useAvailabilitySet: false,
       vmSizes:            [],
       valueCopy:          this.value,
+
+      loadedCredentialIdFor: null
     };
   },
 
@@ -214,6 +228,10 @@ export default {
       this.$fetch();
     },
 
+    'value.location'() {
+      this.$fetch();
+    },
+
     'value.availabilityZone'(neu) {
       if (neu && (!this.value.managedDisks || !this.value.enablePublicIpStandardSku || !this.value.staticPublicIp)) {
         this.$emit('expandAdvanced');
@@ -499,19 +517,6 @@ export default {
   </div>
   <div v-else>
     <div class="row mt-20">
-      <div class="col span-6">
-        <LabeledSelect
-          v-model="value.environment"
-          :mode="mode"
-          :options="azureEnvironments"
-          option-key="value"
-          option-label="value"
-          :searchable="false"
-          :required="true"
-          :label="t('cluster.machineConfig.azure.environment.label')"
-          :disabled="disabled"
-        />
-      </div>
       <div class="col span-6">
         <LabeledSelect
           :value="value.location"
@@ -523,9 +528,21 @@ export default {
           :required="true"
           :label="t('cluster.machineConfig.azure.location.label')"
           :disabled="disabled"
+          data-testid="machineConfig-azure-location"
           @input="setLocation"
         />
       </div>
+      <div data-testid="machineConfig-azure-environment-value">
+        <label
+          v-clean-tooltip="t('cluster.machineConfig.azure.environment.tooltip')"
+          :style="{'display':'block'}"
+          class="text-label"
+        >
+          {{ t('cluster.machineConfig.azure.environment.label') }}
+          <i class="icon icon-sm icon-info" />
+        </label>
+        <span>{{ value.environment }}</span>
+      </div>
     </div>
     <div class="row mt-20">
       <div class="col span-4">

package/machine-config/generic.vue

@@ -29,11 +29,11 @@ export default {
     },
   },
 
-  fetch() {
+  async fetch() {
     this.errors = [];
 
     try {
-      this.fields = this.$store.getters['plugins/fieldsForDriver'](this.provider);
+      this.fields = await this.$store.getters['plugins/fieldsForDriver'](this.provider);
       const name = `rke-machine-config.cattle.io.${ this.provider }config`;
 
       if ( !this.fields ) {
@@ -42,6 +42,15 @@ export default {
     } catch (e) {
       this.errors = exceptionToErrorsArray(e);
     }
+
+    const normanType = this.$store.getters['plugins/credentialFieldForDriver'](this.provider);
+    const normanSchema = this.$store.getters['rancher/schemaFor'](`${ normanType }credentialconfig`);
+
+    if ( normanSchema ) {
+      this.cloudCredentialKeys = Object.keys(normanSchema.resourceFields || {});
+    } else {
+      this.cloudCredentialKeys = await this.$store.getters['plugins/fieldNamesForDriver'](this.provider);
+    }
   },
 
   data() {
@@ -51,19 +60,6 @@ export default {
     };
   },
 
-  computed: {
-    cloudCredentialKeys() {
-      const normanType = this.$store.getters['plugins/credentialFieldForDriver'](this.provider);
-      const normanSchema = this.$store.getters['rancher/schemaFor'](`${ normanType }credentialconfig`);
-
-      if ( normanSchema ) {
-        return Object.keys(normanSchema.resourceFields || {});
-      } else {
-        return this.$store.getters['plugins/fieldNamesForDriver'](this.provider);
-      }
-    }
-  },
-
   watch: {
     'credentialId'() {
       this.$fetch();

package/machine-config/vmwarevsphere-pool-config-merge.ts

@@ -0,0 +1,25 @@
+import mergeWith from 'lodash/mergeWith';
+
+/**
+ * Helper function to alter Lodash merge function default behaviour on merging arrays while updating machine pool configuration.
+ *
+ * In rke2.vue, the syncMachineConfigWithLatest function updates machine pool configuration by
+ * merging the latest configuration received from the backend with the current configuration updated by the user.
+ * However, Lodash's merge function treats arrays like object so index values are merged and not appended to arrays
+ * resulting in undesired outcomes for us, Example:
+ *
+ * const lastSavedConfigFromBE = { a: ["test"] };
+ * const currentConfigByUser = { a: [] };
+ * merge(lastSavedConfigFromBE, currentConfigByUser); // returns { a: ["test"] }; but we expect { a: [] };
+ *
+ * More info: https://github.com/lodash/lodash/issues/1313
+ *
+ * This helper function addresses the issue by always replacing the old array with the new array during the merge process.
+ */
+export function vspherePoolConfigMerge(obj1 = {}, obj2 = {}): Object {
+  return mergeWith(obj1, obj2, (obj1Value, obj2Value) => {
+    if (Array.isArray(obj1Value) && Array.isArray(obj2Value)) {
+      return obj2Value;
+    }
+  });
+}

package/machine-config/vmwarevsphere.vue

@@ -16,6 +16,7 @@ import { integerString, keyValueStrings } from '@shell/utils/computed';
 import { _CREATE, _EDIT, _VIEW } from '@shell/config/query-params';
 
 export const SENTINEL = '__SENTINEL__';
+const NULLABLE_EMPTY_FIELDS = ['contentLibrary', 'folder', 'hostsystem'];
 const VAPP_MODE = {
   DISABLED: 'disabled',
   AUTO:     'auto',
@@ -168,7 +169,11 @@ export default {
     },
     disabled: {
       type:    Boolean,
-      default: false
+      default: false,
+    },
+    poolCreateMode: {
+      type:     Boolean,
+      required: true,
     },
   },
 
@@ -223,7 +228,7 @@ export default {
       },
     ];
 
-    if (this.mode === _CREATE && !this.value.initted) {
+    if ((this.mode === _CREATE || this.poolCreateMode) && !this.value.initted) {
       Object.defineProperty(this.value, 'initted', { value: true, enumerable: false });
 
       const {
@@ -444,13 +449,13 @@ export default {
       const valueInContent = content.find((c) => c.value === this.value.datacenter );
 
       if (!valueInContent) {
-        if (this.mode === _CREATE) {
+        if (this.mode === _CREATE || this.poolCreateMode) {
           set(this.value, 'datacenter', options[0]);
           set(this.value, 'cloneFrom', undefined);
           set(this.value, 'useDataStoreCluster', false);
         }
 
-        if ([_EDIT, _VIEW].includes(this.mode)) {
+        if ([_EDIT, _VIEW].includes(this.mode) && !this.poolCreateMode) {
           this.manageErrors(errorActions.CREATE, 'datacenter');
         }
       } else {
@@ -650,15 +655,19 @@ export default {
       };
 
       if (!isValueInContent()) {
-        if (this.mode === _CREATE) {
-          const value = isArray ? [] : content[0]?.value;
-
-          if (value !== SENTINEL) {
-            set(this.value, key, value);
-          }
+        const value = isArray ? [] : content[0]?.value;
+        const isNullOrEmpty = NULLABLE_EMPTY_FIELDS.includes(key) && (this.value[key] === null || this.value[key] === '');
+        const shouldHandleError =
+          [_EDIT, _VIEW].includes(this.mode) && // error messages should only be displayed in Edit or View mode
+          !this.poolCreateMode && // almost identical to Create mode
+          !isNullOrEmpty && // null and empty string are valid values for some fields e.g. contentLibrary, folder and hostsystem
+          !isArray; // this flag is used for network and tag fields, and should not display error for them
+
+        if ((this.mode === _CREATE || this.poolCreateMode) && value !== SENTINEL) {
+          set(this.value, key, value);
         }
 
-        if ([_EDIT, _VIEW].includes(this.mode)) {
+        if (shouldHandleError) {
           this.manageErrors(errorActions.CREATE, key);
         }
       } else {