@rancher/shell 2.0.0 → 3.0.0-rc.1

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

@@ -88,13 +88,13 @@ export default {
       :key="addonsRev"
     >
       <div
-        v-for="v in addonVersions"
-        :key="v._key"
+        v-for="(v, i) in addonVersions"
+        :key="i"
       >
         <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]"
+          v-model:value="userChartValuesTemp[v.name]"
           :emit="true"
           in-store="management"
           :mode="mode"
@@ -111,7 +111,7 @@ export default {
           :as-object="true"
           :editor-mode="mode === 'view' ? 'VIEW_CODE' : 'EDIT_CODE'"
           :hide-preview-buttons="true"
-          @input="data => $emit('update-values', v.name, data)"
+          @update:value="data => $emit('update-values', v.name, data)"
         />
         <div class="spacer" />
       </div>
@@ -127,7 +127,7 @@ export default {
       </h3>
       <YamlEditor
         ref="yaml-additional"
-        v-model="additionalManifest"
+        v-model:value="additionalManifest"
         :editor-mode="mode === 'view' ? 'VIEW_CODE' : 'EDIT_CODE'"
         initial-yaml-values="# Additional Manifest YAML"
         class="yaml-editor"

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

@@ -1,5 +1,4 @@
 <script>
-import Vue from 'vue';
 import { _VIEW } from '@shell/config/query-params';
 import { Banner } from '@components/Banner';
 import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
@@ -84,7 +83,7 @@ export default {
       return !this.serverArg?.['kubelet-arg']?.length && !config?.['kubelet-arg']?.length;
     },
     onInputProtectKernelDefaults(value) {
-      Vue.set(this.agentConfig || this.serverConfig, 'protect-kernel-defaults', value);
+      this.agentConfig ? this.agentConfig = value : this.serverConfig['protect-kernel-defaults'] = value;
     }
   }
 };
@@ -100,13 +99,13 @@ export default {
     />
     <template v-if="haveArgInfo">
       <DirectoryConfig
-        v-model="value.spec.rkeConfig.dataDirectories"
+        v-model:value="value.spec.rkeConfig.dataDirectories"
         :mode="mode"
       />
       <h3>{{ t('cluster.advanced.argInfo.title') }}</h3>
       <ArrayListGrouped
         v-if="agentArgs['kubelet-arg']"
-        v-model="rkeConfig.machineSelectorConfig"
+        v-model:value="rkeConfig.machineSelectorConfig"
         class="mb-20"
         :mode="mode"
         :add-label="t('cluster.advanced.argInfo.machineSelector.label')"
@@ -117,7 +116,7 @@ export default {
           <template v-if="row.value.machineLabelSelector">
             <h3>{{ t('cluster.advanced.argInfo.machineSelector.title') }}</h3>
             <MatchExpressions
-              v-model="row.value.machineLabelSelector"
+              v-model:value="row.value.machineLabelSelector"
               class="mb-20"
               :mode="mode"
               :show-remove="false"
@@ -136,7 +135,7 @@ export default {
 
           <ArrayList
             v-if="i === 0 && serverConfig['kubelet-arg']"
-            v-model="serverConfig['kubelet-arg']"
+            v-model:value="serverConfig['kubelet-arg']"
             class="mb-10"
             data-testid="global-kubelet-arg"
             :mode="mode"
@@ -149,7 +148,7 @@ export default {
 
           <ArrayList
             v-if="row.value.config && (row.value.config['kubelet-arg'] || !serverConfig['kubelet-arg'])"
-            v-model="row.value.config['kubelet-arg']"
+            v-model:value="row.value.config['kubelet-arg']"
             data-testid="selector-kubelet-arg"
             :mode="mode"
             :add-label="t('cluster.advanced.argInfo.machineSelector.listLabel')"
@@ -179,21 +178,21 @@ export default {
 
       <ArrayList
         v-if="serverArgs['kube-controller-manager-arg']"
-        v-model="serverConfig['kube-controller-manager-arg']"
+        v-model:value="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']"
+        v-model:value="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']"
+        v-model:value="serverConfig['kube-scheduler-arg']"
         :mode="mode"
         :title="t('cluster.advanced.argInfo.machineSelector.kubeSchedulerTitle')"
       />
@@ -208,7 +207,7 @@ export default {
             :value="protectKernelDefaults"
             :mode="mode"
             :label="t('cluster.advanced.agentArgs.label')"
-            @input="onInputProtectKernelDefaults($event)"
+            @update:value="onInputProtectKernelDefaults($event)"
           />
         </div>
       </div>

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

@@ -125,7 +125,7 @@ export default {
           },
         };
 
-        this.$set(this.value, 'overrideResourceRequirements', cleanUp(out));
+        this.value['overrideResourceRequirements'] = cleanUp(out);
       },
     },
 
@@ -168,18 +168,18 @@ export default {
 
         // Copy the default so that the user can edit it
         // this will cover the pod affinities
-        this.$set(this.value, 'overrideAffinity', parsedDefaultAffinites);
+        this.value['overrideAffinity'] = parsedDefaultAffinites;
 
         // in order not to break the node affinity component, let's go for a slightly different way of handling the logic here
         if (parsedDefaultAffinites.nodeAffinity) {
           this.nodeAffinity = parsedDefaultAffinites.nodeAffinity;
         }
       } else {
-        this.$set(this.value, 'overrideAffinity', {});
+        this.value['overrideAffinity'] = {};
       }
     },
     updateNodeAffinity(val) {
-      this.$set(this.value.overrideAffinity, 'nodeAffinity', val);
+      this.value.overrideAffinity['nodeAffinity'] = val;
     }
   }
 };
@@ -203,7 +203,7 @@ export default {
         label-key="cluster.agentConfig.banners.limits"
       />
       <ContainerResourceLimit
-        v-model="flatResources"
+        v-model:value="flatResources"
         :mode="mode"
         :show-tip="false"
         :handle-gpu-limit="false"
@@ -221,7 +221,7 @@ export default {
         label-key="cluster.agentConfig.banners.tolerations"
       />
       <Tolerations
-        v-model="value.appendTolerations"
+        v-model:value="value.appendTolerations"
         :mode="mode"
         class="mt-10"
       />
@@ -232,13 +232,13 @@ export default {
       class="mt-20"
     >
       <RadioGroup
-        v-model="affinitySetting"
+        v-model:value="affinitySetting"
         name="affinity-override"
         :mode="mode"
         :options="affinityOptions"
         class="mt-10"
         data-testid="affinity-options"
-        @input="affinitySettingChange"
+        @update:value="affinitySettingChange"
       />
 
       <Banner
@@ -255,7 +255,7 @@ export default {
 
       <PodAffinity
         v-if="canEditAffinity"
-        v-model="value"
+        :value="value"
         field="overrideAffinity"
         :mode="mode"
         class="mt-0 mb-20"
@@ -263,6 +263,7 @@ export default {
         :force-input-namespace-selection="true"
         :remove-labeled-input-namespace-label="true"
         data-testid="pod-affinity"
+        @update:value="$emit('input', $event)"
       />
 
       <div
@@ -278,12 +279,12 @@ export default {
 
       <NodeAffinity
         v-if="canEditAffinity"
-        v-model="nodeAffinity"
+        v-model:value="nodeAffinity"
         :matching-selector-display="true"
         :mode="mode"
         class="mt-0"
         data-testid="node-affinity"
-        @input="updateNodeAffinity"
+        @update:value="updateNodeAffinity"
       />
     </GroupPanel>
   </div>

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

@@ -11,7 +11,7 @@ import LabeledSelect from '@shell/components/form/LabeledSelect';
 import YamlEditor from '@shell/components/YamlEditor';
 import { LEGACY } from '@shell/store/features';
 import semver from 'semver';
-import { _EDIT } from '@shell/config/query-params';
+import { _CREATE, _EDIT } from '@shell/config/query-params';
 
 const HARVESTER = 'harvester';
 
@@ -106,6 +106,14 @@ export default {
     cloudProviderOptions: {
       type:     Array,
       required: true
+    },
+    isAzureProviderUnsupported: {
+      type:     Boolean,
+      required: true
+    },
+    canAzureMigrateOnEdit: {
+      type:     Boolean,
+      required: true
     }
   },
 
@@ -377,9 +385,11 @@ export default {
     },
 
     canNotEditCloudProvider() {
-      const canNotEdit = this.isEdit;
+      if (!this.isEdit) {
+        return false;
+      }
 
-      return canNotEdit;
+      return !this.canAzureMigrateOnEdit;
     },
 
     /**
@@ -387,6 +397,20 @@ export default {
      */
     showCloudProviderAmazonAdditionalConfigWarning() {
       return !!semver.gte(this.value.spec.kubernetesVersion, 'v1.27.0') && this.agentConfig?.['cloud-provider-name'] === 'aws';
+    },
+
+    /**
+     * Display warning about unsupported Azure provider if k8s >= 1.30
+     */
+    showCloudProviderUnsupportedAzureWarning() {
+      return this.showCloudProvider && this.mode === _CREATE && this.isAzureProviderUnsupported;
+    },
+
+    /**
+     * Display warning about Azure provider migration from k8s versions >= 1.27 to External provider
+     */
+    showCloudProviderMigrateAzureWarning() {
+      return this.showCloudProvider && this.mode === _EDIT && this.canAzureMigrateOnEdit;
     }
   },
 
@@ -423,6 +447,20 @@ export default {
         v-clean-html="t('cluster.harvester.warning.cloudProvider.incompatible', null, true)"
       />
     </Banner>
+    <Banner
+      v-if="showCloudProviderUnsupportedAzureWarning"
+      color="warning"
+      data-testid="clusterBasics__showCloudProviderUnsupportedAzureWarning"
+    >
+      <span v-clean-html="t('cluster.banner.cloudProviderUnsupportedAzure', {}, true)" />
+    </Banner>
+    <Banner
+      v-if="showCloudProviderMigrateAzureWarning"
+      color="warning"
+      data-testid="clusterBasics__showCloudProviderMigrateAzureWarning"
+    >
+      <span v-clean-html="t('cluster.banner.cloudProviderMigrateAzure', {}, true)" />
+    </Banner>
     <Banner
       v-if="showCloudProviderAmazonAdditionalConfigWarning"
       color="warning"
@@ -439,19 +477,19 @@ export default {
     <div class="row mb-10">
       <div class="col span-6">
         <LabeledSelect
-          v-model="value.spec.kubernetesVersion"
+          v-model:value="value.spec.kubernetesVersion"
           :mode="mode"
           :options="versionOptions"
           data-testid="clusterBasics__kubernetesVersions"
           label-key="cluster.kubernetesVersion.label"
-          @input="$emit('kubernetes-changed', $event)"
+          @update:value="$emit('kubernetes-changed', $event)"
         />
         <Checkbox
           :value="showDeprecatedPatchVersions"
           :label="t('cluster.kubernetesVersion.deprecatedPatches')"
           :tooltip="t('cluster.kubernetesVersion.deprecatedPatchWarning')"
           class="patch-version"
-          @input="$emit('show-deprecated-patch-versions-changed', $event)"
+          @update:value="$emit('show-deprecated-patch-versions-changed', $event)"
         />
       </div>
       <div
@@ -460,7 +498,8 @@ export default {
       >
         <LabeledSelect
           v-if="agentConfig"
-          v-model="agentConfig['cloud-provider-name']"
+          v-model:value="agentConfig['cloud-provider-name']"
+          data-testid="clusterBasics__cloudProvider"
           :mode="mode"
           :disabled="canNotEditCloudProvider"
           :options="cloudProviderOptions"
@@ -475,7 +514,7 @@ export default {
     >
       <div class="col span-6">
         <LabeledSelect
-          v-model="serverConfig.cni"
+          v-model:value="serverConfig.cni"
           data-testid="cluster-rke2-cni-select"
           :mode="mode"
           :disabled="isEdit"
@@ -488,13 +527,13 @@ export default {
         class="col"
       >
         <Checkbox
-          v-model="ciliumIpv6"
+          v-model:value="ciliumIpv6"
           data-testid="cluster-rke2-cni-ipv6-checkbox"
           :mode="mode"
           :label="t('cluster.rke2.address.ipv6.enable')"
         />
         <Checkbox
-          v-model="ciliumBandwidthManager"
+          v-model:value="ciliumBandwidthManager"
           data-testid="cluster-rke2-cni-cilium-bandwidth-manager-checkbox"
           :mode="mode"
           :label="t('cluster.rke2.cni.cilium.BandwidthManager.enable')"
@@ -517,7 +556,7 @@ export default {
         <YamlEditor
           v-if="agentConfig"
           ref="yaml"
-          v-model="agentConfig['cloud-provider-config']"
+          v-model:value="agentConfig['cloud-provider-config']"
           :editor-mode="mode === 'view' ? 'VIEW_CODE' : 'EDIT_CODE'"
           initial-yaml-values="# Cloud Provider Config"
           class="yaml-editor"
@@ -545,30 +584,30 @@ export default {
       >
         <LabeledSelect
           v-if="serverArgs && serverArgs.profile && serverConfig"
-          v-model="serverConfig.profile"
+          v-model:value="serverConfig.profile"
           :mode="mode"
           :options="profileOptions"
           :label="t('cluster.rke2.cis.sever')"
-          @input="$emit('cis-changed')"
+          @update:value="$emit('cis-changed')"
         />
         <LabeledSelect
           v-else-if="agentArgs && agentArgs.profile && agentConfig"
-          v-model="agentConfig.profile"
+          v-model:value="agentConfig.profile"
           data-testid="rke2-custom-edit-cis-agent"
           :mode="mode"
           :options="profileOptions"
           :label="t('cluster.rke2.cis.agent')"
-          @input="$emit('cis-changed')"
+          @update:value="$emit('cis-changed')"
         />
       </div>
     </div>
 
     <template v-if="hasCisOverride">
       <Checkbox
-        v-model="cisOverride"
+        :value="cisOverride"
         :mode="mode"
         :label="t('cluster.rke2.cis.override')"
-        @input="$emit('psa-default-changed')"
+        @update:value="$emit('psa-default-changed')"
       />
 
       <Banner
@@ -589,8 +628,7 @@ export default {
       <div class="col span-6">
         <!-- PSA template selector -->
         <LabeledSelect
-          :key="defaultPsaOptionLabel"
-          v-model="value.spec.defaultPodSecurityAdmissionConfigurationTemplateName"
+          v-model:value="value.spec.defaultPodSecurityAdmissionConfigurationTemplateName"
           :mode="mode"
           data-testid="rke2-custom-edit-psa"
           :options="psaOptions"
@@ -604,12 +642,12 @@ export default {
       <div class="col span-12 mt-20">
         <Checkbox
           v-if="serverArgs['secrets-encryption']"
-          v-model="serverConfig['secrets-encryption']"
+          v-model:value="serverConfig['secrets-encryption']"
           :mode="mode"
           :label="t('cluster.rke2.secretEncryption.label')"
         />
         <Checkbox
-          v-model="value.spec.enableNetworkPolicy"
+          v-model:value="value.spec.enableNetworkPolicy"
           :mode="mode"
           :label="t('cluster.rke2.enableNetworkPolicy.label')"
         />
@@ -641,9 +679,9 @@ export default {
           </h3>
         </div>
         <Checkbox
-          v-for="opt in disableOptions"
-          :key="opt.value"
-          v-model="enabledSystemServices"
+          v-for="(opt, i) in disableOptions"
+          :key="i"
+          v-model:value="enabledSystemServices"
           :mode="mode"
           :label="opt.label"
           :value-when-true="opt.value"

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

@@ -25,17 +25,17 @@ export default {
     let atLeastOneDirWithAnIdentifier = false;
     let allDirsWithSameIdentifier = false;
 
-    if (this.value.systemAgent.length || this.value.provisioning.length || this.value.k8sDistro.length) {
+    if (this.value?.systemAgent?.length || this.value?.provisioning?.length || this.value?.k8sDistro?.length) {
       atLeastOneDirWithAnIdentifier = true;
-      if (this.value.systemAgent === this.value.provisioning && this.value.provisioning === this.value.k8sDistro &&
-      this.value.systemAgent === this.value.k8sDistro) {
+      if (this.value?.systemAgent === this.value?.provisioning && this.value?.provisioning === this.value?.k8sDistro &&
+      this.value?.systemAgent === this.value?.k8sDistro) {
         allDirsWithSameIdentifier = true;
       }
     }
 
     return {
       isSettingCommonConfig: !(atLeastOneDirWithAnIdentifier && !allDirsWithSameIdentifier),
-      commonConfig:          allDirsWithSameIdentifier ? this.value.systemAgent : '',
+      commonConfig:          allDirsWithSameIdentifier ? this.value?.systemAgent : '',
     };
   },
   watch: {
@@ -81,11 +81,11 @@ export default {
         :label="t('cluster.directoryConfig.checkboxText')"
         :disabled="disableEditInput"
         data-testid="rke2-directory-config-individual-config-checkbox"
-        @input="handleCommonConfig"
+        @update:value="handleCommonConfig"
       />
       <LabeledInput
         v-if="isSettingCommonConfig"
-        v-model="commonConfig"
+        v-model:value="commonConfig"
         class="mb-20"
         :mode="mode"
         :label="t('cluster.directoryConfig.common.label')"
@@ -95,7 +95,7 @@ export default {
       />
       <div v-if="!isSettingCommonConfig">
         <LabeledInput
-          v-model="value.systemAgent"
+          v-model:value="value.systemAgent"
           class="mb-20"
           :mode="mode"
           :label="t('cluster.directoryConfig.systemAgent.label')"
@@ -104,7 +104,7 @@ export default {
           data-testid="rke2-directory-config-systemAgent-data-dir"
         />
         <LabeledInput
-          v-model="value.provisioning"
+          v-model:value="value.provisioning"
           class="mb-20"
           :mode="mode"
           :label="t('cluster.directoryConfig.provisioning.label')"
@@ -113,7 +113,7 @@ export default {
           data-testid="rke2-directory-config-provisioning-data-dir"
         />
         <LabeledInput
-          v-model="value.k8sDistro"
+          v-model:value="value.k8sDistro"
           class="mb-20"
           :mode="mode"
           :label="t('cluster.directoryConfig.k8sDistro.label')"

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

@@ -156,7 +156,7 @@ export default {
     this.$emit('validationChanged', true);
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     // Ensure we emit validation event so parent can forget any validation for this Machine Pool when it is removed
     this.$emit('validationChanged', undefined);
   },
@@ -220,7 +220,7 @@ export default {
     <div class="row">
       <div class="col span-4">
         <LabeledInput
-          v-model="value.pool.name"
+          v-model:value="value.pool.name"
           :mode="mode"
           :label="t('cluster.machinePool.name.label')"
           :required="true"
@@ -229,7 +229,7 @@ export default {
       </div>
       <div class="col span-4">
         <LabeledInput
-          v-model.number="value.pool.quantity"
+          v-model:value.number="value.pool.quantity"
           :mode="mode"
           :label="t('cluster.machinePool.quantity.label')"
           :disabled="busy"
@@ -243,19 +243,19 @@ export default {
           {{ t('cluster.machinePool.role.label') }}
         </h3>
         <Checkbox
-          v-model="value.pool.etcdRole"
+          v-model:value="value.pool.etcdRole"
           :mode="mode"
           :label="t('cluster.machinePool.role.etcd')"
           :disabled="isWindows || busy"
         />
         <Checkbox
-          v-model="value.pool.controlPlaneRole"
+          v-model:value="value.pool.controlPlaneRole"
           :mode="mode"
           :label="t('cluster.machinePool.role.controlPlane')"
           :disabled="isWindows || busy"
         />
         <Checkbox
-          v-model="value.pool.workerRole"
+          v-model:value="value.pool.workerRole"
           :mode="mode"
           :label="t('cluster.machinePool.role.worker')"
           :disabled="busy"
@@ -322,7 +322,7 @@ export default {
             :output-modifier="true"
             :base-unit="t('cluster.machinePool.autoReplace.unit')"
             :disabled="busy"
-            @input="value.pool.unhealthyNodeTimeout = `${unhealthyNodeTimeoutInteger}s`"
+            @update:value="value.pool.unhealthyNodeTimeout = `${unhealthyNodeTimeoutInteger}s`"
           />
         </div>
         <div class="col span-4">
@@ -330,7 +330,7 @@ export default {
             {{ t('cluster.machinePool.drain.header') }}
           </h3>
           <Checkbox
-            v-model="value.pool.drainBeforeDelete"
+            v-model:value="value.pool.drainBeforeDelete"
             :mode="mode"
             :label="t('cluster.machinePool.drain.label')"
             :disabled="busy"
@@ -339,7 +339,7 @@ export default {
       </div>
       <div class="spacer" />
       <KeyValue
-        v-model="value.pool.labels"
+        v-model:value="value.pool.labels"
         :add-label="t('labels.addLabel')"
         :disabled="busy"
         :mode="mode"
@@ -351,7 +351,7 @@ export default {
       <div class="spacer" />
 
       <Taints
-        v-model="value.pool.taints"
+        v-model:value="value.pool.taints"
         :mode="mode"
         :disabled="busy"
       />
@@ -365,8 +365,8 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-  .advanced ::v-deep >.vue-portal-target:empty,
-  .advanced ::v-deep >.vue-portal-target:empty + .spacer {
+  .advanced :deep() >.vue-portal-target:empty,
+  .advanced :deep() >.vue-portal-target:empty + .spacer {
     display: none;
   }
 </style>