@rancher/shell 0.4.0 → 0.5.0

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

@@ -0,0 +1,137 @@
+<script>
+import { Banner } from '@components/Banner';
+
+import Questions from '@shell/components/Questions';
+import YamlEditor from '@shell/components/YamlEditor';
+import { camelToTitle } from '@shell/utils/string';
+import { _EDIT } from '@shell/config/query-params';
+
+export default {
+  components: {
+    Banner,
+    Questions,
+    YamlEditor
+  },
+
+  props: {
+    mode: {
+      type:     String,
+      required: true,
+    },
+
+    value: {
+      type:     Object,
+      required: true,
+    },
+
+    versionInfo: {
+      type:     Object,
+      required: true,
+    },
+
+    addonVersions: {
+      type:     Array,
+      required: false,
+      default:  null
+    },
+
+    addonsRev: {
+      type:     Number,
+      required: true,
+    },
+    userChartValuesTemp: {
+      type:     Object,
+      required: true,
+    },
+    initYamlEditor: {
+      type:     Function,
+      required: true,
+    }
+
+  },
+
+  computed: {
+    additionalManifest: {
+      get() {
+        return this.value.spec.rkeConfig.additionalManifest;
+      },
+      set(neu) {
+        this.$emit('additional-manifest-changed', neu);
+      }
+    },
+    isEdit() {
+      return this.mode === _EDIT;
+    },
+  },
+
+  methods: {
+
+    labelForAddon(name) {
+      const fallback = `${ camelToTitle(name.replace(/^(rke|rke2|rancher)-/, '')) } Configuration`;
+
+      return this.$store.getters['i18n/withFallback'](`cluster.addonChart."${ name }"`, null, fallback);
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <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="$emit('update-questions', 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 => $emit('update-values', 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="additionalManifest"
+        :editor-mode="mode === 'view' ? 'VIEW_CODE' : 'EDIT_CODE'"
+        initial-yaml-values="# Additional Manifest YAML"
+        class="yaml-editor"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,157 @@
+<script>
+import Vue from 'vue';
+import { Banner } from '@components/Banner';
+import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
+import MatchExpressions from '@shell/components/form/MatchExpressions';
+import ArrayList from '@shell/components/form/ArrayList';
+import { Checkbox } from '@components/Form/Checkbox';
+
+export default {
+  components: {
+    Banner,
+    ArrayListGrouped,
+    MatchExpressions,
+    ArrayList,
+    Checkbox
+  },
+
+  props: {
+    mode: {
+      type:     String,
+      required: true,
+    },
+
+    value: {
+      type:     Object,
+      required: true,
+    },
+
+    haveArgInfo: {
+      type:     Boolean,
+      required: true
+    },
+
+    selectedVersion: {
+      type:     Object,
+      required: true
+    },
+
+  },
+
+  computed: {
+    rkeConfig() {
+      return this.value.spec.rkeConfig;
+    },
+    agentArgs() {
+      return this.selectedVersion?.agentArgs || {};
+    },
+    canRemoveKubeletRow(row, idx) {
+      return idx !== 0;
+    },
+    serverArgs() {
+      return this.selectedVersion?.serverArgs || {};
+    },
+    serverConfig() {
+      return this.value.spec.rkeConfig.machineGlobalConfig;
+    },
+    agentConfig() {
+      return this.value.agentConfig;
+    },
+    advancedTitleAlt() {
+      const machineSelectorLength = this.rkeConfig.machineSelectorConfig.length;
+
+      return this.t('cluster.advanced.argInfo.machineSelector.titleAlt', { count: machineSelectorLength });
+    },
+    protectKernelDefaults() {
+      return (this.agentConfig || this.serverConfig)['protect-kernel-defaults'];
+    }
+  },
+
+  methods: {
+    onInputProtectKernelDefaults(value) {
+      Vue.set(this.agentConfig || this.serverConfig, 'protect-kernel-defaults', value);
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+    <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 && agentArgs['protect-kernel-defaults']">
+      <div class="spacer" />
+
+      <div class="row">
+        <div class="col span-12">
+          <Checkbox
+            data-testid="protect-kernel-defaults"
+            :value="protectKernelDefaults"
+            :mode="mode"
+            :label="t('cluster.advanced.agentArgs.label')"
+            @input="onInputProtectKernelDefaults($event)"
+          />
+        </div>
+      </div>
+    </template>
+  </div>
+</template>

package/edit/provisioning.cattle.io.cluster/{Basics.vue → tabs/Basics.vue}

@@ -11,6 +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';
 
 const HARVESTER = 'harvester';
 
@@ -86,18 +87,10 @@ export default {
       type:     Boolean,
       required: true
     },
-    clusterIsAlreadyCreated: {
-      type:     Boolean,
-      required: true
-    },
     isElementalCluster: {
       type:     Boolean,
       required: true
     },
-    isK3s: {
-      type:     Boolean,
-      required: true
-    },
     haveArgInfo: {
       type:     Boolean,
       required: true
@@ -117,7 +110,16 @@ export default {
     cloudProviderOptions: {
       type:     Array,
       required: true
-    },
+    }
+  },
+
+  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;
+      }
+    }
   },
 
   computed: {
@@ -166,7 +168,7 @@ export default {
      * Get the default label for the PSA template option
      */
     defaultPsaOptionLabel() {
-      const optionCase = !this.isK3s ? 'default' : 'none';
+      const optionCase = !this.value.isK3s ? 'default' : 'none';
 
       return this.$store.getters['i18n/t'](`cluster.rke2.defaultPodSecurityAdmissionConfigurationTemplateName.option.${ optionCase }`);
     },
@@ -209,7 +211,7 @@ export default {
     disableOptions() {
       return (this.serverArgs.disable.options || []).map((value) => {
         return {
-          label: this.$store.getters['i18n/withFallback'](`cluster.${ this.isK3s ? 'k3s' : 'rke2' }.systemService."${ value }"`, null, value.replace(/^(rke2|rancher)-/, '')),
+          label: this.$store.getters['i18n/withFallback'](`cluster.${ this.value.isK3s ? 'k3s' : 'rke2' }.systemService."${ value }"`, null, value.replace(/^(rke2|rancher)-/, '')),
           value,
         };
       });
@@ -255,7 +257,7 @@ export default {
         return false;
       }
 
-      const name = this.agentConfig['cloud-provider-name'];
+      const name = this.agentConfig?.['cloud-provider-name'];
 
       if ( !name ) {
         return false;
@@ -275,7 +277,7 @@ export default {
         return false;
       }
 
-      const name = this.agentConfig['cloud-provider-name'];
+      const name = this.agentConfig?.['cloud-provider-name'];
 
       return name === 'rancher-vsphere';
     },
@@ -296,15 +298,78 @@ export default {
         // 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
 
-        return this.userChartValues[this.chartVersionKey('rke2-cilium')]?.cilium?.ipv6?.enabled || false;
+        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
+        const cni = this.serverConfig.cni; // force this property to recalculate if cni was changed away from cilium and chartValues['rke-cilium'] deleted
+
+        return this.userChartValues[this.chartVersionKey('rke2-cilium')]?.bandwidthManager?.enabled || false;
       },
-      set(val) {
-        this.$emit('cilium-ipv6-changed', val);
+      set(neu) {
+        const name = this.chartVersionKey('rke2-cilium');
+        const values = this.userChartValues[name];
+
+        const ciliumValues = {
+          ...values,
+          bandwidthManager: {
+            ...values?.bandwidthManager,
+            enabled: neu
+          }
+        };
+
+        this.$emit('cilium-values-changed', ciliumValues);
       }
     },
 
+    isEdit() {
+      return this.mode === _EDIT;
+    },
+
     canNotEditCloudProvider() {
-      const canNotEdit = this.clusterIsAlreadyCreated && !this.unsupportedCloudProvider;
+      const canNotEdit = this.isEdit && !this.unsupportedCloudProvider;
 
       return canNotEdit;
     },
@@ -313,7 +378,7 @@ export default {
      * Display warning about additional configuration needed for cloud provider Amazon if kube >= 1.27
      */
     showCloudProviderAmazonAdditionalConfigWarning() {
-      return !!semver.gte(this.value.spec.kubernetesVersion, 'v1.27.0') && this.agentConfig['cloud-provider-name'] === 'aws';
+      return !!semver.gte(this.value.spec.kubernetesVersion, 'v1.27.0') && this.agentConfig?.['cloud-provider-name'] === 'aws';
     }
   },
 
@@ -378,6 +443,7 @@ export default {
         class="col span-6"
       >
         <LabeledSelect
+          v-if="agentConfig"
           v-model="agentConfig['cloud-provider-name']"
           :mode="mode"
           :disabled="canNotEditCloudProvider"
@@ -394,8 +460,9 @@ export default {
       <div class="col span-6">
         <LabeledSelect
           v-model="serverConfig.cni"
+          data-testid="cluster-rke2-cni-select"
           :mode="mode"
-          :disabled="clusterIsAlreadyCreated"
+          :disabled="isEdit"
           :options="serverArgs.cni.options"
           :label="t('cluster.rke2.cni.label')"
         />
@@ -406,9 +473,16 @@ export default {
       >
         <Checkbox
           v-model="ciliumIpv6"
+          data-testid="cluster-rke2-cni-ipv6-checkbox"
           :mode="mode"
           :label="t('cluster.rke2.address.ipv6.enable')"
         />
+        <Checkbox
+          v-model="ciliumBandwidthManager"
+          data-testid="cluster-rke2-cni-cilium-bandwidth-manager-checkbox"
+          :mode="mode"
+          :label="t('cluster.rke2.cni.cilium.BandwidthManager.enable')"
+        />
       </div>
     </div>
     <template v-if="showVsphereNote">
@@ -431,6 +505,7 @@ export default {
           {{ t('cluster.rke2.cloudProvider.header') }}
         </h3>
         <YamlEditor
+          v-if="agentConfig"
           ref="yaml"
           v-model="agentConfig['cloud-provider-config']"
           :editor-mode="mode === 'view' ? 'VIEW_CODE' : 'EDIT_CODE'"

package/edit/provisioning.cattle.io.cluster/{MachinePool.vue → tabs/MachinePool.vue}

@@ -335,6 +335,7 @@ export default {
         v-model="value.pool.labels"
         :add-label="t('labels.addLabel')"
         :disabled="busy"
+        :mode="mode"
         :title="t('cluster.machinePool.labels.label')"
         :read-allowed="false"
         :value-can-be-empty="true"

package/edit/provisioning.cattle.io.cluster/tabs/etcd/index.vue

@@ -0,0 +1,135 @@
+<script>
+import { LabeledInput } from '@components/Form/LabeledInput';
+
+import { RadioGroup } from '@components/Form/Radio';
+
+import S3Config from '@shell/edit/provisioning.cattle.io.cluster/tabs/etcd/S3Config';
+import UnitInput from '@shell/components/form/UnitInput';
+
+export default {
+  components: {
+    LabeledInput,
+    RadioGroup,
+    S3Config,
+    UnitInput
+  },
+
+  props: {
+    mode: {
+      type:     String,
+      required: true,
+    },
+
+    value: {
+      type:     Object,
+      required: true,
+    },
+    selectedVersion: {
+      type:     Object,
+      required: true,
+    },
+
+    s3Backup: {
+      type:     Boolean,
+      required: false,
+      default:  false
+    },
+    registerBeforeHook: {
+      type:     Function,
+      required: true,
+    },
+
+  },
+
+  computed: {
+    etcd() {
+      return this.value.spec.rkeConfig.etcd;
+    },
+    argsEtcdExposeMetrics() {
+      return !!this.selectedVersion?.serverArgs['etcd-expose-metrics'];
+    },
+    configEtcdExposeMetrics() {
+      return !!this.value.spec.rkeConfig.machineGlobalConfig['etcd-expose-metrics'];
+    },
+
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="row">
+      <div class="col span-6">
+        <RadioGroup
+          v-model="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="etcd.disableSnapshots !== true"
+      class="row"
+    >
+      <div class="col span-6">
+        <LabeledInput
+          v-model="etcd.snapshotScheduleCron"
+          type="cron"
+          placeholder="0 * * * *"
+          :mode="mode"
+          :label="t('cluster.rke2.etcd.snapshotScheduleCron.label')"
+        />
+      </div>
+      <div class="col span-6">
+        <UnitInput
+          v-model="etcd.snapshotRetention"
+          :mode="mode"
+          :label="t('cluster.rke2.etcd.snapshotRetention.label')"
+          :suffix="t('cluster.rke2.snapshots.suffix')"
+        />
+      </div>
+    </div>
+
+    <template v-if="etcd.disableSnapshots !== true">
+      <div class="spacer" />
+
+      <RadioGroup
+        :value="s3Backup"
+        name="etcd-s3"
+        :options="[false, true]"
+        label="Backup Snapshots to S3"
+        :labels="['Disable','Enable']"
+        :mode="mode"
+        @input="$emit('s3-backup-changed', $event)"
+      />
+
+      <S3Config
+        v-if="s3Backup"
+        v-model="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="argsEtcdExposeMetrics"
+          :value="configEtcdExposeMetrics"
+          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"
+          @input="$emit('config-etcd-expose-metrics-changed', $event)"
+        />
+      </div>
+    </div>
+  </div>
+</template>