@rancher/shell 1.2.3 → 2.0.1

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>

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

@@ -0,0 +1,190 @@
+<script>
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Banner } from '@components/Banner';
+import { Checkbox } from '@components/Form/Checkbox';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+import ArrayList from '@shell/components/form/ArrayList';
+import ACE from '@shell/edit/provisioning.cattle.io.cluster/tabs/networking/ACE';
+
+const NETBIOS_TRUNCATION_LENGTH = 15;
+
+export default {
+  components: {
+    LabeledInput,
+    Banner,
+    Checkbox,
+    ArrayList,
+    ACE
+  },
+
+  props: {
+    mode: {
+      type:     String,
+      required: true,
+    },
+
+    value: {
+      type:     Object,
+      required: true,
+    },
+    selectedVersion: {
+      type:     Object,
+      required: true,
+    },
+    truncateLimit: {
+      type:     Number,
+      required: false,
+      default:  0
+    }
+  },
+
+  computed: {
+    truncateHostnames() {
+      return this.truncateLimit === NETBIOS_TRUNCATION_LENGTH;
+    },
+    serverConfig() {
+      return this.value.spec.rkeConfig.machineGlobalConfig;
+    },
+    serverArgs() {
+      return this.selectedVersion?.serverArgs || {};
+    },
+
+    showIpv6Warning() {
+      const clusterCIDR = this.serverConfig['cluster-cidr'] || '';
+      const serviceCIDR = this.serverConfig['service-cidr'] || '';
+
+      return clusterCIDR.includes(':') || serviceCIDR.includes(':');
+    },
+    hostnameTruncationManuallySet() {
+      return !!this.truncateLimit && this.truncateLimit !== NETBIOS_TRUNCATION_LENGTH;
+    },
+    isEdit() {
+      return this.mode === _EDIT;
+    },
+    isView() {
+      return this.mode === _VIEW;
+    }
+  },
+};
+</script>
+
+<template>
+  <div>
+    <h3>
+      {{ t('cluster.rke2.address.header') }}
+      <i
+        v-clean-tooltip="t('cluster.rke2.address.tooltip')"
+        class="icon icon-info"
+      />
+    </h3>
+    <Banner
+      v-if="showIpv6Warning"
+      color="warning"
+    >
+      {{ t('cluster.rke2.address.ipv6.warning') }}
+    </Banner>
+    <div class="row mb-20">
+      <div
+        v-if="serverArgs['cluster-cidr']"
+        class="col span-6"
+      >
+        <LabeledInput
+          v-model="serverConfig['cluster-cidr']"
+          :mode="mode"
+          :disabled="isEdit"
+          :label="t('cluster.rke2.address.clusterCidr.label')"
+        />
+      </div>
+      <div
+        v-if="serverArgs['service-cidr']"
+        class="col span-6"
+      >
+        <LabeledInput
+          v-model="serverConfig['service-cidr']"
+          :mode="mode"
+          :disabled="isEdit"
+          :label="t('cluster.rke2.address.serviceCidr.label')"
+        />
+      </div>
+    </div>
+
+    <div class="row mb-20">
+      <div
+        v-if="serverArgs['cluster-dns']"
+        class="col span-6"
+      >
+        <LabeledInput
+          v-model="serverConfig['cluster-dns']"
+          :mode="mode"
+          :disabled="isEdit"
+          :label="t('cluster.rke2.address.dns.label')"
+        />
+      </div>
+      <div
+        v-if="serverArgs['cluster-domain']"
+        class="col span-6"
+      >
+        <LabeledInput
+          v-model="serverConfig['cluster-domain']"
+          :mode="mode"
+          :disabled="isEdit"
+          :label="t('cluster.rke2.address.domain.label')"
+        />
+      </div>
+    </div>
+
+    <div
+      v-if="serverArgs['service-node-port-range']"
+      class="row mb-20"
+    >
+      <div class="col span-6">
+        <LabeledInput
+          v-model="serverConfig['service-node-port-range']"
+          :mode="mode"
+          :label="t('cluster.rke2.address.nodePortRange.label')"
+        />
+      </div>
+      <div
+        class="col span-6"
+      >
+        <Checkbox
+          v-if="!isView || isView && !hostnameTruncationManuallySet"
+          :value="truncateHostnames"
+          class="mt-20"
+          :disabled="isEdit || isView || hostnameTruncationManuallySet"
+          :mode="mode"
+          :label="t('cluster.rke2.truncateHostnames')"
+          data-testid="network-tab-truncate-hostname"
+          @input="$emit('truncate-hostname', $event)"
+        />
+        <Banner
+          v-if="hostnameTruncationManuallySet"
+          color="info"
+        >
+          <div class="text">
+            {{ t('cluster.machinePool.truncationCluster', { limit: truncateLimit }) }}
+          </div>
+        </Banner>
+      </div>
+    </div>
+
+    <div
+      v-if="serverArgs['tls-san']"
+      class="row mb-20"
+    >
+      <div class="col span-6">
+        <ArrayList
+          v-model="serverConfig['tls-san']"
+          :protip="false"
+          :mode="mode"
+          :title="t('cluster.rke2.address.tlsSan.label')"
+        />
+      </div>
+    </div>
+
+    <ACE
+      v-model="value"
+      :mode="mode"
+    />
+  </div>
+</template>

package/edit/provisioning.cattle.io.cluster/{RegistryConfigs.vue → 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

@@ -0,0 +1,148 @@
+<script>
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Banner } from '@components/Banner';
+import { Checkbox } from '@components/Form/Checkbox';
+import SelectOrCreateAuthSecret from '@shell/components/form/SelectOrCreateAuthSecret';
+import AdvancedSection from '@shell/components/AdvancedSection.vue';
+import RegistryConfigs from '@shell/edit/provisioning.cattle.io.cluster/tabs/registries/RegistryConfigs';
+import RegistryMirrors from '@shell/edit/provisioning.cattle.io.cluster/tabs/registries/RegistryMirrors';
+
+export default {
+  components: {
+    LabeledInput,
+    Banner,
+    Checkbox,
+    SelectOrCreateAuthSecret,
+    AdvancedSection,
+    RegistryConfigs,
+    RegistryMirrors
+  },
+
+  props: {
+    registerBeforeHook: {
+      type:     Function,
+      required: true,
+    },
+
+    mode: {
+      type:     String,
+      required: true,
+    },
+
+    value: {
+      type:     Object,
+      required: true,
+    },
+
+    showCustomRegistryInput: {
+      type:     Boolean,
+      required: true,
+    },
+
+    registryHost: {
+      type:     String,
+      required: false,
+      default:  null
+    },
+
+    registrySecret: {
+      type:     String,
+      required: false,
+      default:  null
+    },
+
+    showCustomRegistryAdvancedInput: {
+      type:     Boolean,
+      required: true,
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+    <div class="row">
+      <h3>{{ t('cluster.privateRegistry.label') }}</h3>
+    </div>
+    <div class="row">
+      <div class="col span-12">
+        <Banner
+          :closable="false"
+          class="cluster-tools-tip"
+          color="info"
+          label-key="cluster.privateRegistry.description"
+        />
+      </div>
+    </div>
+    <div class="row">
+      <Checkbox
+        :value="showCustomRegistryInput"
+        class="mb-20"
+        :label="t('cluster.privateRegistry.label')"
+        data-testid="registries-enable-checkbox"
+        @input="$emit('custom-registry-changed', $event)"
+      />
+    </div>
+    <div
+      v-if="showCustomRegistryInput"
+      class="row"
+    >
+      <div class="col span-6">
+        <LabeledInput
+          :value="registryHost"
+          label-key="catalog.chart.registry.custom.inputLabel"
+          placeholder-key="catalog.chart.registry.custom.placeholder"
+          :min-height="30"
+          data-testid="registry-host-input"
+          @input="$emit('registry-host-changed', $event)"
+        />
+        <SelectOrCreateAuthSecret
+          v-model="registrySecret"
+          :register-before-hook="registerBeforeHook"
+          :hook-priority="1"
+          :mode="mode"
+          in-store="management"
+          :allow-ssh="false"
+          :allow-rke="true"
+          :vertical="true"
+          :namespace="value.metadata.namespace"
+          generate-name="registryconfig-auth-"
+          :cache-secrets="true"
+          @input="$emit('registry-secret-changed', $event)"
+        />
+      </div>
+    </div>
+    <template>
+      <div
+        v-if="showCustomRegistryInput"
+        class="row"
+      >
+        <AdvancedSection
+          class="col span-12 advanced"
+          :is-open-by-default="showCustomRegistryAdvancedInput"
+          :mode="mode"
+          data-testid="registries-advanced-section"
+        >
+          <Banner
+            :closable="false"
+            class="cluster-tools-tip"
+            color="info"
+            :label-key="value.isK3s ? 'cluster.privateRegistry.docsLinkK3s' : 'cluster.privateRegistry.docsLinkRke2'"
+          />
+          <RegistryMirrors
+            v-model="value"
+            class="mt-20"
+            :mode="mode"
+          />
+          <RegistryConfigs
+            v-model="value"
+            class="mt-20"
+            :mode="mode"
+            :cluster-register-before-hook="registerBeforeHook"
+            @updateConfigs="$emit('update-configs-changed', $event)"
+          />
+        </AdvancedSection>
+      </div>
+    </template>
+  </div>
+</template>

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

@@ -0,0 +1,76 @@
+<script>
+import { get } from '@shell/utils/object';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Banner } from '@components/Banner';
+import DrainOptions from '@shell/edit/provisioning.cattle.io.cluster/tabs/upgrade/DrainOptions';
+
+export default {
+  components: {
+    LabeledInput,
+    Banner,
+    DrainOptions
+  },
+
+  props: {
+    mode: {
+      type:     String,
+      required: true,
+    },
+
+    value: {
+      type:     Object,
+      required: true,
+    },
+  },
+
+  computed: {
+    rkeConfig() {
+      return this.value.spec.rkeConfig;
+    },
+  },
+  methods: { get }
+};
+</script>
+
+<template>
+  <div>
+    <Banner
+      v-if="get(rkeConfig, 'upgradeStrategy.controlPlaneDrainOptions.deleteEmptyDirData')"
+      color="warning"
+    >
+      {{ t('cluster.rke2.drain.deleteEmptyDir.warning', {}, true) }}
+    </Banner>
+    <div class="row">
+      <div class="col span-6">
+        <h3>{{ t('cluster.rke2.controlPlaneConcurrency.header') }}</h3>
+        <LabeledInput
+          v-model="rkeConfig.upgradeStrategy.controlPlaneConcurrency"
+          :mode="mode"
+          :label="t('cluster.rke2.controlPlaneConcurrency.label')"
+          :tooltip="t('cluster.rke2.controlPlaneConcurrency.toolTip')"
+        />
+        <div class="spacer" />
+        <DrainOptions
+          v-model="rkeConfig.upgradeStrategy.controlPlaneDrainOptions"
+          :mode="mode"
+        />
+      </div>
+      <div class="col span-6">
+        <h3>
+          {{ t('cluster.rke2.workNode.label') }}
+        </h3>
+        <LabeledInput
+          v-model="rkeConfig.upgradeStrategy.workerConcurrency"
+          :mode="mode"
+          :label="t('cluster.rke2.workerConcurrency.label')"
+          :tooltip="t('cluster.rke2.workerConcurrency.toolTip')"
+        />
+        <div class="spacer" />
+        <DrainOptions
+          v-model="rkeConfig.upgradeStrategy.workerDrainOptions"
+          :mode="mode"
+        />
+      </div>
+    </div>
+  </div>
+</template>