@rancher/shell 0.3.16 → 0.3.17

package/edit/__tests__/fleet.cattle.io.gitrepo.test.ts

@@ -0,0 +1,62 @@
+import { mount, createLocalVue } from '@vue/test-utils';
+import GitRepo from '@shell/edit/fleet.cattle.io.gitrepo.vue';
+import Vuex from 'vuex';
+
+const localVue = createLocalVue();
+
+localVue.use(Vuex);
+
+describe('view: fleet.cattle.io.gitrepo should', () => {
+  const mockStore = {
+    getters: {
+      'i18n/t':                  (text: string) => text,
+      t:                         (text: string) => text,
+      currentStore:              () => 'current_store',
+      'current_store/schemaFor': jest.fn(),
+      'current_store/all':       jest.fn(),
+      workspace:                 jest.fn(),
+    }
+  };
+  const mocks = {
+    $store:      mockStore,
+    $fetchState: { pending: false },
+    $route:      {
+      query: { AS: '' },
+      name:  {
+        endsWith: () => {
+          return false;
+        }
+      }
+    }
+  };
+  const values = {
+    metadata: { namespace: 'test' }, spec: { template: {}, correctDrift: { enabled: false } }, targetInfo: { mode: 'all' },
+  };
+  const wrapper = mount(GitRepo, {
+    localVue,
+    propsData: { value: values },
+    mocks
+  });
+
+  it('should have self-healing checkbox and banner', () => {
+    const correctDriftCheckbox = wrapper.find('[data-testid="GitRepo-correctDrift-checkbox"]');
+    const correctDriftBanner = wrapper.find('[data-testid="GitRepo-correctDrift-banner"]');
+
+    expect(correctDriftCheckbox.exists()).toBeTruthy();
+    expect(correctDriftBanner.exists()).toBeTruthy();
+    expect(correctDriftCheckbox.props().value).toBeFalsy();
+  });
+
+  it('should enable drift if self-healing is checked', async() => {
+    const correctDriftCheckbox = wrapper.find('[data-testid="GitRepo-correctDrift-checkbox"]');
+    const correctDriftContainer = wrapper.find('[data-testid="GitRepo-correctDrift-checkbox"] .checkbox-container');
+
+    expect(correctDriftContainer.exists()).toBeTruthy();
+
+    await correctDriftContainer.trigger('click');
+
+    expect(correctDriftCheckbox.emitted('input')).toHaveLength(1);
+    expect(correctDriftCheckbox.emitted('input')![0][0]).toBe(true);
+    expect(correctDriftCheckbox.props().value).toBeTruthy();
+  });
+});

package/edit/auth/github.vue

@@ -163,6 +163,7 @@ export default {
         <RadioGroup
           v-model="targetType"
           name="targetType"
+          data-testid="authConfig-gitHub"
           :options="['public','private']"
           :mode="mode"
           :labels="[ t(`authConfig.${NAME}.target.public`), t(`authConfig.${NAME}.target.private`)]"

package/edit/autoscaling.horizontalpodautoscaler/hpa-scaling-rule.vue

@@ -0,0 +1,130 @@
+<script>
+
+import { _EDIT } from '@shell/config/query-params';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import ArrayListGrouped from '@shell/components/form/ArrayListGrouped.vue';
+
+export default {
+  components: {
+    ArrayListGrouped,
+    LabeledInput,
+    LabeledSelect
+  },
+  props: {
+    value: {
+      type:    Object,
+      default: () => {
+      }
+    },
+    mode: {
+      type:    String,
+      default: _EDIT
+    },
+    type: {
+      type:    String,
+      default: 'scaleUp'
+    },
+  },
+  data() {
+    if (!this.value.spec.behavior[this.type].policies) {
+      this.$set(this.value.spec.behavior[this.type], 'policies', []);
+    }
+    if (!this.value.spec.behavior[this.type].selectPolicy) {
+      this.$set(this.value.spec.behavior[this.type], 'selectPolicy', 'Max');
+    }
+    if (this.value.spec.behavior[this.type].stabilizationWindowSeconds === null || typeof this.value.spec.behavior[this.type].stabilizationWindowSeconds === 'undefined') {
+      if (this.type === 'scaleUp') {
+        this.$set(this.value.spec.behavior[this.type], 'stabilizationWindowSeconds', 0);
+      }
+      if (this.type === 'scaleDown') {
+        this.$set(this.value.spec.behavior[this.type], 'stabilizationWindowSeconds', 300);
+      }
+    }
+
+    return { selectPolicyOptions: ['Max', 'Min', 'Disabled'], policyTypeOptions: ['Pods', 'Percent'] };
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="row mb-20">
+      <div class="col span-12">
+        <ArrayListGrouped
+          v-model="value.spec.behavior[type].policies"
+          :add-label="t('hpa.scalingRule.addPolicy')"
+          :default-add-value="{}"
+          :mode="mode"
+        >
+          <template #default="props">
+            <div class="row">
+              <div class="col span-4">
+                <LabeledSelect
+                  v-model="props.row.value.type"
+                  :mode="mode"
+                  :options="policyTypeOptions"
+                  :multiple="false"
+                  :taggable="true"
+                  :searchable="true"
+                  :required="true"
+                  :tooltip="t('hpa.scalingRule.policy.typeTooltip')"
+                  :label="t('hpa.scalingRule.policy.type')"
+                />
+              </div>
+              <div class="col span-4">
+                <LabeledInput
+                  v-model.number="props.row.value.value"
+                  :mode="mode"
+                  type="number"
+                  min="1"
+                  :required="true"
+                  :tooltip="t('hpa.scalingRule.policy.valueTooltip')"
+                  :label="t('hpa.scalingRule.policy.value')"
+                />
+              </div>
+              <div class="col span-4">
+                <LabeledInput
+                  v-model.number="props.row.value.periodSeconds"
+                  :mode="mode"
+                  type="number"
+                  min="1"
+                  max="1800"
+                  :required="true"
+                  :tooltip="t('hpa.scalingRule.policy.periodSecondsTooltip')"
+                  :label="t('hpa.scalingRule.policy.periodSeconds')"
+                />
+              </div>
+            </div>
+          </template>
+        </ArrayListGrouped>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col span-6">
+        <LabeledSelect
+          v-model="value.spec.behavior[type].selectPolicy"
+          :mode="mode"
+          :options="selectPolicyOptions"
+          :multiple="false"
+          :taggable="true"
+          :searchable="true"
+          :label="t('hpa.scalingRule.selectPolicy')"
+          :tooltip="t('hpa.scalingRule.selectPolicyTooltip')"
+        />
+      </div>
+      <div class="col span-6">
+        <LabeledInput
+          v-model.number="value.spec.behavior[type].stabilizationWindowSeconds"
+          :mode="mode"
+          type="number"
+          min="0"
+          max="3600"
+          :label="t('hpa.scalingRule.stabilizationWindowSeconds')"
+          :tooltip="t('hpa.scalingRule.stabilizationWindowSecondsTooltip')"
+        />
+      </div>
+    </div>
+    <div class="row mb-40" />
+  </div>
+</template>

package/edit/autoscaling.horizontalpodautoscaler/index.vue

@@ -12,12 +12,14 @@ import Tabbed from '@shell/components/Tabbed';
 import MetricsRow from '@shell/edit/autoscaling.horizontalpodautoscaler/metrics-row';
 import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
 import { DEFAULT_RESOURCE_METRIC } from '@shell/edit/autoscaling.horizontalpodautoscaler/resource-metric';
+import { Checkbox } from '@components/Form/Checkbox';
 
 import { API_SERVICE, SCALABLE_WORKLOAD_TYPES } from '@shell/config/types';
 import isEmpty from 'lodash/isEmpty';
 import find from 'lodash/find';
 import endsWith from 'lodash/endsWith';
 import { findBy } from '@shell/utils/array';
+import HpaScalingRule from '@shell/edit/autoscaling.horizontalpodautoscaler/hpa-scaling-rule.vue';
 
 const RESOURCE_METRICS_API_GROUP = 'metrics.k8s.io';
 
@@ -25,7 +27,9 @@ export default {
   name: 'CruHPA',
 
   components: {
+    HpaScalingRule,
     ArrayListGrouped,
+    Checkbox,
     CruResource,
     LabeledInput,
     LabeledSelect,
@@ -107,6 +111,40 @@ export default {
 
       return match ?? null;
     },
+    hasScaleDownRules: {
+      get() {
+        return !!this.value.spec.behavior?.scaleDown;
+      },
+      set(hasScaleDownRules) {
+        if (hasScaleDownRules) {
+          if (!this.value.spec.behavior) {
+            this.$set(this.value.spec, 'behavior', {});
+          }
+          if (!this.value.spec.behavior?.scaleDown) {
+            this.$set(this.value.spec.behavior, 'scaleDown', {});
+          }
+        } else {
+          this.$delete(this.value.spec.behavior, 'scaleDown');
+        }
+      }
+    },
+    hasScaleUpRules: {
+      get() {
+        return !!this.value.spec.behavior?.scaleUp;
+      },
+      set(hasScaleUpRules) {
+        if (hasScaleUpRules) {
+          if (!this.value.spec.behavior) {
+            this.$set(this.value.spec, 'behavior', {});
+          }
+          if (!this.value.spec.behavior?.scaleUp) {
+            this.$set(this.value.spec.behavior, 'scaleUp', {});
+          }
+        } else {
+          this.$delete(this.value.spec.behavior, 'scaleUp');
+        }
+      }
+    },
   },
 
   created() {
@@ -242,6 +280,47 @@ export default {
             </template>
           </ArrayListGrouped>
         </Tab>
+        <Tab
+          name="behavior"
+          :label="t('hpa.tabs.behavior')"
+        >
+          <div class="col span-12 mb-10">
+            <h3>
+              {{ t('hpa.scaleDownRules.label') }}
+            </h3>
+            <div class="row mb-10">
+              <Checkbox
+                v-model="hasScaleDownRules"
+                :mode="mode"
+                :label="t('hpa.scaleDownRules.enable')"
+              />
+            </div>
+            <HpaScalingRule
+              v-if="hasScaleDownRules"
+              v-model="value"
+              type="scaleDown"
+              :mode="mode"
+            />
+          </div>
+          <div class="col span-12">
+            <h3>
+              {{ t('hpa.scaleUpRules.label') }}
+            </h3>
+            <div class="row mb-10">
+              <Checkbox
+                v-model="hasScaleUpRules"
+                :mode="mode"
+                :label="t('hpa.scaleUpRules.enable')"
+              />
+            </div>
+            <HpaScalingRule
+              v-if="hasScaleUpRules"
+              v-model="value"
+              type="scaleUp"
+              :mode="mode"
+            />
+          </div>
+        </Tab>
         <Tab
           name="labels-and-annotations"
           :label="t('hpa.tabs.labels')"

package/edit/fleet.cattle.io.gitrepo.vue

@@ -604,6 +604,23 @@ export default {
       </template>
       <div class="spacer" />
       <h2 v-t="'fleet.gitRepo.resources.label'" />
+      <div>
+        <Checkbox
+          v-model="value.spec.correctDrift.enabled"
+          data-testid="GitRepo-correctDrift-checkbox"
+          class="check"
+          type="checkbox"
+          label-key="fleet.gitRepo.resources.correctDrift"
+          :mode="mode"
+        />
+        <Banner
+          data-testid="GitRepo-correctDrift-banner"
+          color="info"
+        >
+          {{ t('fleet.gitRepo.resources.correctDriftBanner') }}
+        </Banner>
+      </div>
+
       <Checkbox
         v-model="value.spec.keepResources"
         class="check"
@@ -614,7 +631,7 @@ export default {
       <Banner
         color="info"
       >
-        {{ t('fleet.gitRepo.resources.resourceBanner') }}
+        {{ t('fleet.gitRepo.resources.keepResourcesBanner') }}
       </Banner>
       <div class="spacer" />
       <h2 v-t="'fleet.gitRepo.paths.label'" />

package/edit/namespace.vue

@@ -17,6 +17,7 @@ import Loading from '@shell/components/Loading';
 import { HARVESTER_TYPES, RANCHER_TYPES } from '@shell/components/form/ResourceQuota/shared';
 import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 import Labels from '@shell/components/form/Labels';
+import { randomStr } from '@shell/utils/string';
 
 export default {
   components: {
@@ -58,6 +59,7 @@ export default {
       projects:                null,
       viewMode:                _VIEW,
       containerResourceLimits: this.value.annotations?.[CONTAINER_DEFAULT_RESOURCE_LIMIT] || this.getDefaultContainerResourceLimits(projectName),
+      rerenderNums:            randomStr(4),
       projectName,
       HARVESTER_TYPES,
       RANCHER_TYPES,
@@ -152,6 +154,11 @@ export default {
       const project = projects.find((p) => p.id.includes(projectName));
 
       return project?.spec?.containerDefaultResourceLimit || {};
+    },
+
+    PSAChanged($event) {
+      this.value.setLabels($event);
+      this.rerenderNums = randomStr(4);
     }
   },
 };
@@ -242,6 +249,7 @@ export default {
         :weight="-1"
       >
         <Labels
+          :key="rerenderNums"
           default-container-class="labels-and-annotations-container"
           :value="value"
           :mode="mode"
@@ -258,7 +266,7 @@ export default {
           :labels="value.labels"
           :mode="mode"
           labels-prefix="pod-security.kubernetes.io/"
-          @updateLabels="value.setLabels($event)"
+          @updateLabels="PSAChanged"
         />
       </Tab>
     </Tabbed>

package/edit/networking.k8s.io.ingress/RulePath.vue

@@ -140,8 +140,6 @@ export default {
     >
       <Select
         v-model="serviceName"
-        option-label="label"
-        option-key="label"
         :options="serviceTargets"
         :status="serviceTargetStatus"
         :taggable="true"

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

@@ -9,35 +9,6 @@ import { cleanUp } from '@shell/utils/object';
 import { fetchSetting } from '@shell/utils/settings';
 import { RadioGroup } from '@components/Form/Radio';
 
-export function cleanAgentConfiguration(model, key) {
-  if (!model || !model[key]) {
-    return;
-  }
-
-  const v = model[key];
-
-  if (Array.isArray(v) && v.length === 0) {
-    delete model[key];
-  } else if (v && typeof v === 'object') {
-    Object.keys(v).forEach((k) => {
-      // delete these auxiliary props used in podAffinity and nodeAffinity that shouldn't be sent to the server
-      if (k === '_namespaceOption' || k === '_namespaces' || k === '_anti' || k === '_id') {
-        delete v[k];
-      }
-
-      // prevent cleanup of "namespaceSelector" when an empty object because it represents all namespaces in pod/node affinity
-      // https://kubernetes.io/docs/reference/generated/kubernetes-api/v1.25/#podaffinityterm-v1-core
-      if (k !== 'namespaceSelector') {
-        cleanAgentConfiguration(v, k);
-      }
-    });
-
-    if (Object.keys(v).length === 0) {
-      delete model[key];
-    }
-  }
-}
-
 // Affinity radio button choices
 const DEFAULT = 'default';
 const CUSTOM = 'custom';
@@ -215,7 +186,7 @@ export default {
 </script>
 
 <template>
-  <div v-if="value && Object.keys(value).length">
+  <div>
     <Banner
       :closable="false"
       color="info"

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

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 import rke2 from '@shell/edit/provisioning.cattle.io.cluster/rke2.vue';
 
 /**
@@ -14,6 +14,7 @@ const defaultStubs = {
   LabeledSelect:            true,
   ACE:                      true,
   AgentEnv:                 true,
+  AgentConfiguration:       true,
   ArrayList:                true,
   ArrayListGrouped:         true,
   BadgeState:               true,
@@ -267,4 +268,81 @@ describe('component: rke2', () => {
 
     expect((wrapper.vm as any).validationPassed).toBe(true);
   });
+
+  // TODO: Complete test after implementing fetch https://github.com/rancher/dashboard/issues/9322
+  // eslint-disable-next-line jest/no-disabled-tests
+  describe.skip('should initialize agent configuration values', () => {
+    it('adding default values if none', async() => {
+      const wrapper = shallowMount(rke2, {
+        propsData: {
+          mode:     'create',
+          value:    { spec: { ...defaultSpec } },
+          provider: 'custom'
+        },
+        computed: defaultComputed,
+        mocks:    {
+          ...defaultMocks,
+          $store: {
+            getters:  defaultGetters,
+            dispatch: {
+              'management/request': jest.fn(),
+              'management/find':    jest.fn(),
+              'management/findAll': () => ([]),
+            }
+          },
+        },
+        stubs: defaultStubs
+      });
+      const defaultAgentConfig = {
+        clusterAgentDeploymentCustomization: {
+          overrideAffinity:             {},
+          appendTolerations:            [],
+          overrideResourceRequirements: {}
+        },
+        fleetAgentDeploymentCustomization: {
+          overrideAffinity:             {},
+          appendTolerations:            [],
+          overrideResourceRequirements: {}
+        }
+      };
+
+      // Setting RKE to avoid calls
+      wrapper.setData({ rke2Versions: [] });
+
+      // await rke2.fetch.call(wrapper.vm);
+
+      expect(wrapper.props().value.spec).toContain(defaultAgentConfig);
+    });
+
+    it('should display agent configuration tab', async() => {
+      const wrapper = shallowMount(rke2, {
+        propsData: {
+          mode:     'create',
+          value:    { spec: { ...defaultSpec } },
+          provider: 'custom'
+        },
+        computed: defaultComputed,
+        mocks:    {
+          ...defaultMocks,
+          $store: {
+            getters:  defaultGetters,
+            dispatch: {
+              'management/request': jest.fn(),
+              'management/find':    jest.fn(),
+              'management/findAll': () => ([]),
+            }
+          },
+        },
+        stubs: defaultStubs
+      });
+      const agent = wrapper.find('[data-testid="rke2-cluster-agent-config"]');
+
+      // Setting RKE to avoid calls
+      wrapper.setData({ rke2Versions: [] });
+
+      await rke2.fetch.call(wrapper.vm);
+
+      expect(agent.element).toBeDefined();
+    });
+  });
 });

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

@@ -138,6 +138,27 @@ export default {
         this.iconClasses[name] = `machine-driver ${ name }`;
       }
     });
+
+    // Custom Providers from extensions - initialize each with the store and the i18n service
+    // Wrap in try ... catch, to prevent errors in an extension breaking the page
+    try {
+      const extensionClasses = this.$plugin.listDynamic('provisioner').map((name) => this.$plugin.getDynamic('provisioner', name));
+
+      // We can't pass in this.$store as this leads to a circular-reference that causes Vue to freeze,
+      // so pass in specific services that the provisioner extension may need
+      this.extensions = extensionClasses.map((c) => new c({
+        dispatch: this.$store.dispatch,
+        getters:  this.$store.getters,
+        axios:    this.$store.$axios,
+        $plugin:  this.$store.app.$plugin,
+        t:        (...args) => this.t.apply(this, args),
+        isCreate: this.isCreate,
+        isEdit:   this.isEdit,
+        isView:   this.isView,
+      }));
+    } catch (e) {
+      console.error('Error loading provisioner(s) from extensions', e); // eslint-disable-line no-console
+    }
   },
 
   data() {
@@ -148,6 +169,7 @@ export default {
     return {
       nodeDrivers:      [],
       kontainerDrivers: [],
+      extensions:       [],
       subType,
       chart,
       isImport,
@@ -285,6 +307,11 @@ export default {
             addType(id, 'rke2', false);
           });
 
+          // Add from extensions
+          this.extensions.forEach((ext) => {
+            addExtensionType(ext, getters);
+          });
+
           addType('custom', 'custom2', false);
 
           if (isElementalActive) {
@@ -295,6 +322,31 @@ export default {
 
       return out;
 
+      function addExtensionType(ext, getters) {
+        let iconClass = ext.iconClass;
+        let icon = ext.icon;
+
+        if (icon) {
+          iconClass = undefined;
+        } else if (!iconClass) {
+          icon = require('~shell/assets/images/generic-driver.svg');
+        }
+
+        const subtype = {
+          id:          ext.id,
+          label:       ext.label || getters['i18n/t'](`cluster.provider.${ ext.id }`),
+          description: ext.description,
+          icon,
+          iconClass,
+          group:       ext.group || 'rke2',
+          disabled:    ext.disabled || false,
+          link:        ext.link,
+          tag:         ext.tag
+        };
+
+        out.push(subtype);
+      }
+
       function addType(id, group, disabled = false, link = null, iconClass = undefined) {
         const label = getters['i18n/withFallback'](`cluster.provider."${ id }"`, null, id);
         const description = getters['i18n/withFallback'](`cluster.providerDescription."${ id }"`, null, '');