@rancher/shell 0.5.3 → 2.0.0

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

@@ -1,10 +1,12 @@
 <script>
 import Vue from 'vue';
+import { _VIEW } from '@shell/config/query-params';
 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';
+import DirectoryConfig from '@shell/edit/provisioning.cattle.io.cluster/tabs/DirectoryConfig.vue';
 
 export default {
   components: {
@@ -12,7 +14,8 @@ export default {
     ArrayListGrouped,
     MatchExpressions,
     ArrayList,
-    Checkbox
+    Checkbox,
+    DirectoryConfig
   },
 
   props: {
@@ -35,19 +38,18 @@ export default {
       type:     Object,
       required: true
     },
-
   },
 
   computed: {
+    isView() {
+      return this.mode === _VIEW;
+    },
     rkeConfig() {
       return this.value.spec.rkeConfig;
     },
     agentArgs() {
       return this.selectedVersion?.agentArgs || {};
     },
-    canRemoveKubeletRow(row, idx) {
-      return idx !== 0;
-    },
     serverArgs() {
       return this.selectedVersion?.serverArgs || {};
     },
@@ -64,10 +66,23 @@ export default {
     },
     protectKernelDefaults() {
       return (this.agentConfig || this.serverConfig)['protect-kernel-defaults'];
+    },
+    kubeletArgTooltip() {
+      if (this.serverConfig?.['kubelet-arg']) {
+        return this.t(`cluster.advanced.argInfo.tooltip.${ this.agentConfig?.['kubelet-arg'] ? 'mixed-args' : 'global-args' }`, null, { raw: true });
+      }
+
+      return null;
     }
   },
 
   methods: {
+    canRemoveKubeletRow(row, i) {
+      return i !== 0 || !this.agentConfig;
+    },
+    showEmptyKubeletArg(config) {
+      return !this.serverArg?.['kubelet-arg']?.length && !config?.['kubelet-arg']?.length;
+    },
     onInputProtectKernelDefaults(value) {
       Vue.set(this.agentConfig || this.serverConfig, 'protect-kernel-defaults', value);
     }
@@ -77,17 +92,28 @@ export default {
 
 <template>
   <div>
+    <Banner
+      class="mt-0"
+      color="info"
+      label-key="cluster.jwtAuthentication.banner"
+      data-testid="jwt-authentication-banner"
+    />
     <template v-if="haveArgInfo">
+      <DirectoryConfig
+        v-model="value.spec.rkeConfig.dataDirectories"
+        :mode="mode"
+      />
       <h3>{{ t('cluster.advanced.argInfo.title') }}</h3>
       <ArrayListGrouped
         v-if="agentArgs['kubelet-arg']"
         v-model="rkeConfig.machineSelectorConfig"
         class="mb-20"
+        :mode="mode"
         :add-label="t('cluster.advanced.argInfo.machineSelector.label')"
         :can-remove="canRemoveKubeletRow"
         :default-add-value="{machineLabelSelector: { matchExpressions: [], matchLabels: {} }, config: {'kubelet-arg': []}}"
       >
-        <template #default="{row}">
+        <template #default="{row, i}">
           <template v-if="row.value.machineLabelSelector">
             <h3>{{ t('cluster.advanced.argInfo.machineSelector.title') }}</h3>
             <MatchExpressions
@@ -101,14 +127,48 @@ export default {
           </template>
           <h3 v-else>
             {{ advancedTitleAlt }}
+            <i
+              v-if="kubeletArgTooltip"
+              v-clean-tooltip="kubeletArgTooltip"
+              class="icon icon-info"
+            />
           </h3>
 
           <ArrayList
+            v-if="i === 0 && serverConfig['kubelet-arg']"
+            v-model="serverConfig['kubelet-arg']"
+            class="mb-10"
+            data-testid="global-kubelet-arg"
+            :mode="mode"
+            :add-label="t('cluster.advanced.argInfo.machineGlobal.listLabel')"
+          >
+            <template #empty>
+              {{ '' }}
+            </template>
+          </ArrayList>
+
+          <ArrayList
+            v-if="row.value.config && (row.value.config['kubelet-arg'] || !serverConfig['kubelet-arg'])"
             v-model="row.value.config['kubelet-arg']"
+            data-testid="selector-kubelet-arg"
             :mode="mode"
             :add-label="t('cluster.advanced.argInfo.machineSelector.listLabel')"
             :initial-empty-row="!!row.value.machineLabelSelector"
-          />
+          >
+            <template
+              v-if="i === 0"
+              #empty
+            >
+              {{ '' }}
+            </template>
+          </ArrayList>
+
+          <div
+            v-if="i === 0 && isView && showEmptyKubeletArg(row.value.config)"
+            class="text-muted"
+          >
+            &mdash;
+          </div>
         </template>
       </ArrayListGrouped>
       <Banner

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

@@ -125,6 +125,18 @@ export default {
       return this.value.spec.rkeConfig.machineGlobalConfig;
     },
 
+    showCniNoneBanner() {
+      return this.serverConfig?.cni === 'none';
+    },
+
+    showCiliumIpv6Controls() {
+      return this.serverConfig?.cni === 'cilium' || this.serverConfig?.cni === 'multus,cilium';
+    },
+
+    showNetworkPolicyWarningBanner() {
+      return this.serverConfig?.cni === 'cilium' && this.value?.spec?.enableNetworkPolicy;
+    },
+
     agentConfig() {
       return this.value.agentConfig;
     },
@@ -199,7 +211,7 @@ export default {
      * Check if current CIS profile is required and listed in the options
      */
     isCisSupported() {
-      const cisProfile = this.serverConfig.profile || this.agentConfig.profile;
+      const cisProfile = this.serverConfig?.profile || this.agentConfig?.profile;
 
       return !cisProfile || this.profileOptions.map((option) => option.value).includes(cisProfile);
     },
@@ -418,7 +430,7 @@ export default {
       <span v-clean-html="t('cluster.banner.cloudProviderAddConfig', {}, true)" />
     </Banner>
     <Banner
-      v-if="serverConfig.cni === 'none'"
+      v-if="showCniNoneBanner"
       color="warning"
       data-testid="clusterBasics__noneOptionSelectedForCni"
     >
@@ -472,7 +484,7 @@ export default {
         />
       </div>
       <div
-        v-if="serverConfig.cni === 'cilium' || serverConfig.cni === 'multus,cilium'"
+        v-if="showCiliumIpv6Controls"
         class="col"
       >
         <Checkbox
@@ -532,7 +544,7 @@ export default {
         class="col span-6"
       >
         <LabeledSelect
-          v-if="serverArgs && serverArgs.profile"
+          v-if="serverArgs && serverArgs.profile && serverConfig"
           v-model="serverConfig.profile"
           :mode="mode"
           :options="profileOptions"
@@ -540,7 +552,7 @@ export default {
           @input="$emit('cis-changed')"
         />
         <LabeledSelect
-          v-else-if="agentArgs && agentArgs.profile"
+          v-else-if="agentArgs && agentArgs.profile && agentConfig"
           v-model="agentConfig.profile"
           data-testid="rke2-custom-edit-cis-agent"
           :mode="mode"
@@ -577,6 +589,7 @@ export default {
       <div class="col span-6">
         <!-- PSA template selector -->
         <LabeledSelect
+          :key="defaultPsaOptionLabel"
           v-model="value.spec.defaultPodSecurityAdmissionConfigurationTemplateName"
           :mode="mode"
           data-testid="rke2-custom-edit-psa"
@@ -604,7 +617,7 @@ export default {
     </div>
 
     <div
-      v-if="serverConfig.cni === 'cilium' && value.spec.enableNetworkPolicy"
+      v-if="showNetworkPolicyWarningBanner"
       class="row"
     >
       <div class="col span-12">

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

@@ -0,0 +1,132 @@
+
+<script>
+import { Checkbox } from '@components/Form/Checkbox';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { _CREATE } from '@shell/config/query-params';
+
+export default {
+  name:       'DirectoryConfig',
+  components: {
+    Checkbox,
+    LabeledInput,
+  },
+  props: {
+    mode: {
+      type:     String,
+      required: true,
+    },
+
+    value: {
+      type:     Object,
+      required: true,
+    },
+  },
+  data() {
+    let atLeastOneDirWithAnIdentifier = false;
+    let allDirsWithSameIdentifier = false;
+
+    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) {
+        allDirsWithSameIdentifier = true;
+      }
+    }
+
+    return {
+      isSettingCommonConfig: !(atLeastOneDirWithAnIdentifier && !allDirsWithSameIdentifier),
+      commonConfig:          allDirsWithSameIdentifier ? this.value.systemAgent : '',
+    };
+  },
+  watch: {
+    commonConfig(neu) {
+      if (neu && neu.length && this.isSettingCommonConfig) {
+        this.value.systemAgent = neu;
+        this.value.provisioning = neu;
+        this.value.k8sDistro = neu;
+      }
+    }
+  },
+  computed: {
+    disableEditInput() {
+      return this.mode !== _CREATE;
+    }
+  },
+  methods: {
+    handleCommonConfig(val) {
+      this.isSettingCommonConfig = val;
+
+      if (val) {
+        this.value.systemAgent = '';
+        this.value.provisioning = '';
+        this.value.k8sDistro = '';
+      } else {
+        this.commonConfig = '';
+      }
+    }
+  },
+};
+</script>
+
+<template>
+  <div class="row">
+    <div class="col span-8">
+      <h3 class="mb-20">
+        {{ t('cluster.directoryConfig.title') }}
+      </h3>
+      <Checkbox
+        class="mb-10"
+        :value="isSettingCommonConfig"
+        :mode="mode"
+        :label="t('cluster.directoryConfig.checkboxText')"
+        :disabled="disableEditInput"
+        data-testid="rke2-directory-config-individual-config-checkbox"
+        @input="handleCommonConfig"
+      />
+      <LabeledInput
+        v-if="isSettingCommonConfig"
+        v-model="commonConfig"
+        class="mb-20"
+        :mode="mode"
+        :label="t('cluster.directoryConfig.common.label')"
+        :tooltip="t('cluster.directoryConfig.common.tooltip')"
+        :disabled="disableEditInput"
+        data-testid="rke2-directory-config-common-data-dir"
+      />
+      <div v-if="!isSettingCommonConfig">
+        <LabeledInput
+          v-model="value.systemAgent"
+          class="mb-20"
+          :mode="mode"
+          :label="t('cluster.directoryConfig.systemAgent.label')"
+          :tooltip="t('cluster.directoryConfig.systemAgent.tooltip')"
+          :disabled="disableEditInput"
+          data-testid="rke2-directory-config-systemAgent-data-dir"
+        />
+        <LabeledInput
+          v-model="value.provisioning"
+          class="mb-20"
+          :mode="mode"
+          :label="t('cluster.directoryConfig.provisioning.label')"
+          :tooltip="t('cluster.directoryConfig.provisioning.tooltip')"
+          :disabled="disableEditInput"
+          data-testid="rke2-directory-config-provisioning-data-dir"
+        />
+        <LabeledInput
+          v-model="value.k8sDistro"
+          class="mb-20"
+          :mode="mode"
+          :label="t('cluster.directoryConfig.k8sDistro.label')"
+          :tooltip="t('cluster.directoryConfig.k8sDistro.tooltip')"
+          :disabled="disableEditInput"
+          data-testid="rke2-directory-config-k8sDistro-data-dir"
+        />
+      </div>
+      <div class="mb-40" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -69,6 +69,12 @@ export default {
     poolId: {
       type:     String,
       required: true,
+    },
+
+    // this is a useful info when in edit mode you add a new pool, example of use in vmwarevsphere.vue
+    poolCreateMode: {
+      type:     Boolean,
+      required: true,
     }
   },
 
@@ -269,6 +275,7 @@ export default {
       :credential-id="credentialId"
       :pool-index="idx"
       :pool-id="poolId"
+      :pool-create-mode="value.create"
       :machine-pools="machinePools"
       :busy="busy"
       @error="emitError"

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

@@ -84,6 +84,7 @@ export default {
       :allow-s3="true"
       :namespace="namespace"
       generate-name="etcd-backup-s3-"
+      :cache-secrets="true"
       @input="update"
     />
 

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

@@ -154,6 +154,7 @@ export default {
           :disabled="isEdit || isView || hostnameTruncationManuallySet"
           :mode="mode"
           :label="t('cluster.rke2.truncateHostnames')"
+          data-testid="network-tab-truncate-hostname"
           @input="$emit('truncate-hostname', $event)"
         />
         <Banner

package/edit/provisioning.cattle.io.cluster/tabs/registries/RegistryConfigs.vue

@@ -136,6 +136,7 @@ export default {
       :default-add-value="defaultAddValue"
       :initial-empty-row="true"
       :mode="mode"
+      data-testid="registry-authentication"
       @input="update"
     >
       <template #default="{row, i}">
@@ -149,6 +150,7 @@ export default {
             />
 
             <SelectOrCreateAuthSecret
+              :key="`${row.value.hostname}-${row.value.authConfigSecretName}`"
               v-model="row.value.authConfigSecretName"
               :register-before-hook="wrapRegisterBeforeHook"
               :append-unique-id-to-hook="true"
@@ -160,6 +162,7 @@ export default {
               :mode="mode"
               generate-name="registryconfig-auth-"
               :data-testid="`registry-auth-select-or-create-${i}`"
+              :cache-secrets="true"
             />
           </div>
           <div class="col span-6">

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

@@ -107,6 +107,7 @@ export default {
           :vertical="true"
           :namespace="value.metadata.namespace"
           generate-name="registryconfig-auth-"
+          :cache-secrets="true"
           @input="$emit('registry-secret-changed', $event)"
         />
       </div>