@rancher/shell 3.0.9-rc.5 → 3.0.9-rc.6

package/edit/provisioning.cattle.io.cluster/__tests__/rke2.test.ts

@@ -1,10 +1,26 @@
 import { mount, shallowMount } from '@vue/test-utils';
 import { SECRET } from '@shell/config/types';
-import { _CREATE } from '@shell/config/query-params';
+import { _CREATE, _EDIT } from '@shell/config/query-params';
 import rke2 from '@shell/edit/provisioning.cattle.io.cluster/rke2.vue';
 import { get } from '@shell/utils/object';
 import { rke2TestTable } from './utils/rke2-test-data';
-import { NGINX_SUPPORTED, INGRESS_CONTROLLER, INGRESS_NGINX } from '@shell/edit/provisioning.cattle.io.cluster/shared';
+import {
+  RKE2_INGRESS_NGINX, INGRESS_CONTROLLER, INGRESS_NGINX, TRAEFIK, INGRESS_NONE, RKE2_TRAEFIK
+} from '@shell/edit/provisioning.cattle.io.cluster/shared';
+
+jest.mock('@shell/edit/provisioning.cattle.io.cluster/shared', () => ({
+  RETENTION_DEFAULT:         5,
+  RKE2_INGRESS_NGINX:        'rke2-ingress-nginx',
+  RKE2_TRAEFIK:              'rke2-traefik',
+  INGRESS_NGINX:             'ingress-nginx',
+  INGRESS_CONTROLLER:        'ingress-controller',
+  TRAEFIK:                   'traefik',
+  HARVESTER:                 'harvester',
+  INGRESS_DUAL:              'dual',
+  INGRESS_NONE:              'none',
+  INGRESS_OPTIONS:           [],
+  INGRESS_MIGRATION_KB_LINK: 'mock-link'
+}));
 
 /**
  * DISCLAIMER ***************************************************************************************
@@ -453,7 +469,11 @@ describe('component: rke2', () => {
       rke2Versions: [{
         id:         k8s,
         version:    k8s,
-        serverArgs: true
+        serverArgs: true,
+        charts:     {
+          [RKE2_INGRESS_NGINX]: {},
+          [RKE2_TRAEFIK]:       {}
+        }
       }]
     });
 
@@ -593,6 +613,7 @@ describe('component: rke2', () => {
                 repo:    'rancher-rke2-charts',
                 version: '3.12.200'
               },
+              'rke2-traefik': {}
             }
           }
         ]
@@ -616,10 +637,10 @@ describe('component: rke2', () => {
 
   describe('should correctly update NGINX configuration', () => {
     const k8sVersion = 'v1.25.0+rke2r1';
-    const createWrapper = () => {
+    const createWrapper = (mode = _EDIT) => {
       return shallowMount(rke2, {
         props: {
-          mode:  _CREATE,
+          mode,
           value: {
             spec: {
               ...defaultSpec,
@@ -646,33 +667,47 @@ describe('component: rke2', () => {
         },
       });
     };
+    const mockCharts = {
+      [RKE2_INGRESS_NGINX]: {},
+      [RKE2_TRAEFIK]:       {}
+    };
 
-    it('should set ingress-controller to ingress-nginx by default when nginx is supported and not disabled', async() => {
-      const wrapper = createWrapper();
+    it('should set ingress-controller to traefik by default for new clusters', async() => {
+      const wrapper = createWrapper(_CREATE);
 
       await wrapper.setData({
         rke2Versions: [{
           id:         k8sVersion,
           version:    k8sVersion,
-          serverArgs: { disable: { options: [NGINX_SUPPORTED] } }
+          serverArgs: { disable: { options: [RKE2_INGRESS_NGINX] } },
+          charts:     mockCharts
         }]
       });
 
-      expect(wrapper.vm.value.spec.rkeConfig.machineGlobalConfig[INGRESS_CONTROLLER]).toBe(INGRESS_NGINX);
+      expect(wrapper.vm.value.spec.rkeConfig.machineGlobalConfig[INGRESS_CONTROLLER]).toBe(TRAEFIK);
     });
 
-    it('should set ingress-controller to undefined by default when nginx is not supported', async() => {
+    it('should set ingress-controller to None on version change when nginx is not supported', async() => {
       const wrapper = createWrapper();
+      const newVersion = 'v1.26.0+rke2r1';
 
       await wrapper.setData({
         rke2Versions: [{
           id:         k8sVersion,
           version:    k8sVersion,
-          serverArgs: { disable: { options: [] } }
+          serverArgs: { disable: { options: [] } },
+          charts:     mockCharts
+        },
+        {
+          id:         newVersion,
+          version:    newVersion,
+          serverArgs: { disable: { options: [] } },
+          charts:     mockCharts
         }]
       });
-
-      expect(wrapper.vm.value.spec.rkeConfig.machineGlobalConfig[INGRESS_CONTROLLER]).toBeUndefined();
+      wrapper.vm.value.spec.kubernetesVersion = newVersion;
+      (wrapper.vm as any).handleKubernetesChange(newVersion);
+      expect(wrapper.vm.value.spec.rkeConfig.machineGlobalConfig[INGRESS_CONTROLLER]).toBe(INGRESS_NONE);
     });
 
     it('should set ingress-controller to ingress-nginx on change when nginx is supported and not disabled', () => {
@@ -682,7 +717,8 @@ describe('component: rke2', () => {
         rke2Versions: [{
           id:         k8sVersion,
           version:    k8sVersion,
-          serverArgs: { disable: { options: [NGINX_SUPPORTED] } }
+          serverArgs: { disable: { options: [RKE2_INGRESS_NGINX] } },
+          charts:     mockCharts
         }]
       });
 
@@ -691,36 +727,38 @@ describe('component: rke2', () => {
       expect(wrapper.vm.value.spec.rkeConfig.machineGlobalConfig[INGRESS_CONTROLLER]).toBe(INGRESS_NGINX);
     });
 
-    it('should set ingress-controller to undefined when nginx is supported but disabled', () => {
+    it('should set ingress-controller to None when nginx is supported but disabled', () => {
       const wrapper = createWrapper();
 
       wrapper.setData({
         rke2Versions: [{
           id:         k8sVersion,
           version:    k8sVersion,
-          serverArgs: { disable: { options: [NGINX_SUPPORTED] } }
+          serverArgs: { disable: { options: [RKE2_INGRESS_NGINX] } },
+          charts:     mockCharts
         }]
       });
 
-      (wrapper.vm as any).handleEnabledSystemServicesChanged([NGINX_SUPPORTED]);
+      (wrapper.vm as any).handleEnabledSystemServicesChanged([RKE2_INGRESS_NGINX]);
 
-      expect(wrapper.vm.value.spec.rkeConfig.machineGlobalConfig[INGRESS_CONTROLLER]).toBeUndefined();
+      expect(wrapper.vm.value.spec.rkeConfig.machineGlobalConfig[INGRESS_CONTROLLER]).toBe(INGRESS_NONE);
     });
 
-    it('should set ingress-controller to undefined when nginx is not supported', () => {
+    it('should set ingress-controller for existing cluster to None when nginx is not supported', () => {
       const wrapper = createWrapper();
 
       wrapper.setData({
         rke2Versions: [{
           id:         k8sVersion,
           version:    k8sVersion,
-          serverArgs: { disable: { options: [] } }
+          serverArgs: { disable: { options: [] } },
+          charts:     mockCharts
         }]
       });
 
       (wrapper.vm as any).handleEnabledSystemServicesChanged([]);
 
-      expect(wrapper.vm.value.spec.rkeConfig.machineGlobalConfig[INGRESS_CONTROLLER]).toBeUndefined();
+      expect(wrapper.vm.value.spec.rkeConfig.machineGlobalConfig[INGRESS_CONTROLLER]).toBe(INGRESS_NONE);
     });
 
     it('should correctly update disable list in serverConfig', () => {
@@ -730,7 +768,8 @@ describe('component: rke2', () => {
         rke2Versions: [{
           id:         k8sVersion,
           version:    k8sVersion,
-          serverArgs: { disable: { options: [NGINX_SUPPORTED] } }
+          serverArgs: { disable: { options: [RKE2_INGRESS_NGINX] } },
+          charts:     mockCharts
         }]
       });
       const disabledServices = ['other-service'];
@@ -749,12 +788,14 @@ describe('component: rke2', () => {
           {
             id:         k8sVersion,
             version:    k8sVersion,
-            serverArgs: { disable: { options: [NGINX_SUPPORTED] } }
+            serverArgs: { disable: { options: [RKE2_INGRESS_NGINX] } },
+            charts:     mockCharts
           },
           {
             id:         newVersion,
             version:    newVersion,
-            serverArgs: { disable: { options: [NGINX_SUPPORTED] } }
+            serverArgs: { disable: { options: [RKE2_INGRESS_NGINX] } },
+            charts:     mockCharts
           }
         ]
       });
@@ -764,30 +805,5 @@ describe('component: rke2', () => {
 
       expect(wrapper.vm.value.spec.rkeConfig.machineGlobalConfig[INGRESS_CONTROLLER]).toBe(INGRESS_NGINX);
     });
-
-    it('should not set ingress-controller to ingress-nginx on version change when nginx is not supported', async() => {
-      const wrapper = createWrapper();
-      const newVersion = 'v1.26.0+rke2r1';
-
-      await wrapper.setData({
-        k3sVersions: [
-          {
-            id:         k8sVersion,
-            version:    k8sVersion,
-            serverArgs: { disable: { options: [] } }
-          },
-          {
-            id:         newVersion,
-            version:    newVersion,
-            serverArgs: { disable: { options: [] } }
-          }
-        ]
-      });
-
-      wrapper.vm.value.spec.kubernetesVersion = newVersion;
-      (wrapper.vm as any).handleKubernetesChange(newVersion);
-
-      expect(wrapper.vm.value.spec.rkeConfig.machineGlobalConfig[INGRESS_CONTROLLER]).toBeUndefined();
-    });
   });
 });

package/edit/provisioning.cattle.io.cluster/ingress/IngressCards.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { _CREATE, _VIEW } from '@shell/config/query-params';
+import { PropType } from 'vue';
+import { useStore } from 'vuex';
+import { useI18n } from '@shell/composables/useI18n';
+import { RcItemCard, RcItemCardAction } from '@components/RcItemCard';
+
+interface IngressCard {
+  id: string;
+  image?: any;
+  header: { title: { key: string } };
+  subHeader: { label: { key: string } };
+  content: { key: string };
+  doc?: {url: string};
+  selected?: boolean;
+}
+
+defineProps({
+  options: {
+    type:     Array as PropType<IngressCard[]>,
+    required: true
+  },
+  mode: { type: String, default: _CREATE },
+});
+
+const emit = defineEmits(['select']);
+
+const store = useStore();
+const { t } = useI18n(store);
+
+</script>
+
+<template>
+  <div class="ingress-cards">
+    <rc-item-card
+      v-for="card in options"
+      :id="card.id"
+      :key="card.id"
+      :header="card.header"
+      :image="card.image"
+      :content="card.content"
+      :selected="card.selected"
+      variant="small"
+      role="link"
+      :disabled="mode === _VIEW"
+      :class="{ 'single-card': options.length === 1 }"
+      :clickable="mode !== _VIEW"
+      @card-click="emit('select', card.id)"
+    >
+      <template
+        v-once
+        #item-card-sub-header
+      >
+        <p class="ingress-card-sub-header">
+          {{ t(card.subHeader.label.key) }}
+        </p>
+      </template>
+      <template
+        v-if="!!card.doc"
+        v-once
+        #item-card-footer
+      >
+        <rc-item-card-action>
+          <a
+            :href="card.doc.url"
+            rel="nofollow noopener noreferrer"
+            target="_blank"
+            class="ingress-card-footer-button secondary-text-link"
+          >
+            {{ t('cluster.ingress.learnMore.label') }}
+            <i class="icon icon-external-link" />
+            <span class="sr-only">{{ t('generic.opensInNewTab') }}</span>
+          </a>
+        </rc-item-card-action>
+      </template>
+    </rc-item-card>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.ingress-cards{
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-gap: var(--gap-md);
+  width: 100%;
+  height: max-content;
+  overflow: hidden;
+
+  .single-card {
+    max-width: 500px;
+  }
+}
+.ingress-card-sub-header {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap) var(--gap-md);
+  color: var(--link-text-secondary);
+  margin-bottom: 8px;
+}
+
+button.variant-ghost.ingress-card-footer-button {
+  padding: 0;
+  gap: 0;
+  min-height: 20px;
+
+  &:focus-visible {
+    border-color: var(--primary);
+    @include focus-outline;
+    outline-offset: -2px;
+  }
+}
+</style>

package/edit/provisioning.cattle.io.cluster/ingress/IngressConfiguration.vue

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { computed, watch } from 'vue';
+import { _CREATE } from '@shell/config/query-params';
+import { useStore } from 'vuex';
+import { useI18n } from '@shell/composables/useI18n';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+import { INGRESS_DUAL, TRAEFIK, INGRESS_NGINX } from '@shell/edit/provisioning.cattle.io.cluster/shared';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+import formRulesGenerator from '@shell/utils/validators/formRules';
+
+interface Props {
+  mode?: string;
+  ingressSelection: string;
+}
+const {
+  mode = _CREATE,
+  ingressSelection,
+} = defineProps<Props>();
+const store = useStore();
+const { t } = useI18n(store);
+
+const emit = defineEmits(['validation-changed']);
+
+const compatibilityMode = defineModel<boolean>('compatibilityMode');
+const nginxHttp = defineModel<number>('nginxHttp');
+const nginxHttps = defineModel<number>('nginxHttps');
+const traefikHttp = defineModel<number>('traefikHttp');
+const traefikHttps = defineModel<number>('traefikHttps');
+
+const nginxHttpRules = computed(() => {
+  const { portNumber, isInteger } = formRulesGenerator(t, { key: t('cluster.ingress.configurationOptions.nginx.http') });
+  const portRules = [(val: any) => !val ? undefined : isInteger(val), portNumber];
+
+  return [...portRules,
+    (val: any) => {
+      if (ingressSelection === INGRESS_DUAL && String(val) === String(traefikHttp.value)) {
+        return t('cluster.ingress.validation.portsMatch');
+      }
+
+      return undefined;
+    }
+  ];
+});
+
+const nginxHttpsRules = computed(() => {
+  const { portNumber, isInteger } = formRulesGenerator(t, { key: t('cluster.ingress.configurationOptions.nginx.https') });
+  const portRules = [(val: any) => !val ? undefined : isInteger(val), portNumber];
+
+  return [...portRules,
+    (val: any) => {
+      if (ingressSelection === INGRESS_DUAL && String(val) === String(traefikHttps.value)) {
+        return t('cluster.ingress.validation.portsMatch');
+      }
+
+      return undefined;
+    }
+  ];
+});
+
+const traefikHttpRules = computed(() => {
+  const { portNumber, isInteger } = formRulesGenerator(t, { key: t('cluster.ingress.configurationOptions.traefik.http') });
+  const portRules = [(val: any) => !val ? undefined : isInteger(val), portNumber];
+
+  return [...portRules, (val: any) => {
+    if (ingressSelection === INGRESS_DUAL && String(val) === String(nginxHttp.value)) {
+      return t('cluster.ingress.validation.portsMatch');
+    }
+
+    return undefined;
+  }
+  ];
+});
+
+const traefikHttpsRules = computed(() => {
+  const { portNumber, isInteger } = formRulesGenerator(t, { key: t('cluster.ingress.configurationOptions.traefik.https') });
+  const portRules = [(val: any) => !val ? undefined : isInteger(val), portNumber];
+
+  return [...portRules, (val: any) => {
+    if (ingressSelection === INGRESS_DUAL && String(val) === String(nginxHttps.value)) {
+      return t('cluster.ingress.validation.portsMatch');
+    }
+
+    return undefined;
+  }
+  ];
+});
+
+const isValid = computed(() => {
+  const check = (val: any, rules: any[]) => rules.every((rule) => rule(val) === undefined);
+
+  if (ingressSelection === INGRESS_DUAL) {
+    return check(nginxHttp.value, nginxHttpRules.value) && check(nginxHttps.value, nginxHttpsRules.value) &&
+      check(traefikHttp.value, traefikHttpRules.value) && check(traefikHttps.value, traefikHttpsRules.value);
+  }
+  if (ingressSelection === TRAEFIK) {
+    return check(traefikHttp.value, traefikHttpRules.value) && check(traefikHttps.value, traefikHttpsRules.value);
+  }
+  if (ingressSelection === INGRESS_NGINX) {
+    return check(nginxHttp.value, nginxHttpRules.value) && check(nginxHttps.value, nginxHttpsRules.value);
+  }
+
+  return true;
+});
+
+watch(isValid, (val) => emit('validation-changed', val), { immediate: true });
+</script>
+<template>
+  <h4>{{ t('cluster.ingress.configurationOptions.title') }}</h4>
+  <Checkbox
+    v-if="ingressSelection === INGRESS_DUAL"
+    v-model:value="compatibilityMode"
+    label-key="cluster.ingress.configurationOptions.compatibilityMode"
+    class="mb-10"
+  />
+  <div
+    v-if="ingressSelection === TRAEFIK || ingressSelection === INGRESS_DUAL"
+    class="row"
+    :class="ingressSelection === INGRESS_DUAL ? 'mb-10' : ''"
+  >
+    <div class="span-2 mr-20">
+      <LabeledInput
+        v-model:value="traefikHttp"
+        label-key="cluster.ingress.configurationOptions.traefik.http"
+        :mode="mode"
+        :rules="traefikHttpRules"
+      />
+    </div>
+    <div class="span-2">
+      <LabeledInput
+        v-model:value="traefikHttps"
+        label-key="cluster.ingress.configurationOptions.traefik.https"
+        :mode="mode"
+        :rules="traefikHttpsRules"
+      />
+    </div>
+  </div>
+  <div
+    v-if="ingressSelection === INGRESS_NGINX || ingressSelection === INGRESS_DUAL"
+    class="row"
+  >
+    <div class="span-2 mr-20">
+      <LabeledInput
+        v-model:value="nginxHttp"
+        label-key="cluster.ingress.configurationOptions.nginx.http"
+        :mode="mode"
+        :rules="nginxHttpRules"
+      />
+    </div>
+    <div class="span-2">
+      <LabeledInput
+        v-model:value="nginxHttps"
+        label-key="cluster.ingress.configurationOptions.nginx.https"
+        :mode="mode"
+        :rules="nginxHttpsRules"
+      />
+    </div>
+  </div>
+</template>