@rancher/shell 0.3.15 → 0.3.17

package/detail/provisioning.cattle.io.cluster.vue

@@ -81,6 +81,24 @@ export default {
 
   async fetch() {
     await this.value.waitForProvisioner();
+
+    const extClass = this.$plugin.getDynamic('provisioner', this.value.machineProvider);
+
+    if (extClass) {
+      this.extProvider = new extClass({
+        dispatch: this.$store.dispatch,
+        getters:  this.$store.getters,
+        axios:    this.$store.$axios,
+        $plugin:  this.$store.app.$plugin,
+        $t:       this.t
+      });
+      this.extDetailTabs = {
+        ...this.extDetailTabs,
+        ...this.extProvider.detailTabs
+      };
+      this.extCustomParams = { provider: this.value.machineProvider };
+    }
+
     const fetchOne = {};
 
     if ( this.$store.getters['management/canList'](CAPI.MACHINE_DEPLOYMENT) ) {
@@ -206,6 +224,18 @@ export default {
       logSocket: null,
       logs:      [],
 
+      extProvider:     null,
+      extCustomParams: null,
+      extDetailTabs:   {
+        machines:     true, // in this component
+        logs:         true, // in this component
+        registration: true, // in this component
+        snapshots:    true, // in this component
+        related:      true, // in ResourceTabs
+        events:       true, // in ResourceTabs
+        conditions:   true, // in ResourceTabs
+      },
+
       showWindowsWarning: false
     };
   },
@@ -336,7 +366,9 @@ export default {
     },
 
     showMachines() {
-      return this.haveMachines && (this.value.isRke2 || !!this.machines.length);
+      const showMachines = this.haveMachines && (this.value.isRke2 || !!this.machines.length);
+
+      return showMachines && this.extDetailTabs.machines;
     },
 
     showNodes() {
@@ -345,9 +377,9 @@ export default {
 
     showSnapshots() {
       if (this.value.isRke1) {
-        return this.$store.getters['rancher/canList'](NORMAN.ETCD_BACKUP);
+        return this.$store.getters['rancher/canList'](NORMAN.ETCD_BACKUP) && this.extDetailTabs.snapshots;
       } else if (this.value.isRke2) {
-        return this.$store.getters['management/canList'](SNAPSHOT);
+        return this.$store.getters['management/canList'](SNAPSHOT) && this.extDetailTabs.snapshots;
       }
 
       return false;
@@ -476,15 +508,15 @@ export default {
       }
 
       if ( this.value.isImported ) {
-        return !this.value.mgmt?.isReady;
+        return !this.value.mgmt?.isReady && this.extDetailTabs.registration;
       }
 
       if ( this.value.isCustom ) {
-        return true;
+        return this.extDetailTabs.registration;
       }
 
       if ( this.value.isHostedKubernetesProvider && !this.isClusterReady ) {
-        return true;
+        return this.extDetailTabs.registration;
       }
 
       return false;
@@ -495,7 +527,9 @@ export default {
     },
 
     showLog() {
-      return this.value.mgmt?.hasLink('log');
+      const showLog = this.value.mgmt?.hasLink('log');
+
+      return showLog && this.extDetailTabs.logs;
     },
 
     dateTimeFormatStr() {
@@ -686,6 +720,10 @@ export default {
       v-model="value"
       :default-tab="defaultTab"
       :need-related="hasLocalAccess"
+      :extension-params="extCustomParams"
+      :needRelated="extDetailTabs.related"
+      :needEvents="extDetailTabs.events"
+      :needConditions="extDetailTabs.conditions"
     >
       <Tab
         v-if="showMachines"
@@ -773,6 +811,7 @@ export default {
           </template>
         </ResourceTable>
       </Tab>
+
       <Tab
         v-else-if="showNodes"
         name="node-pools"

package/detail/workload/index.vue

@@ -4,7 +4,7 @@ import { NAMESPACE as NAMESPACE_COL } from '@shell/config/table-headers';
 import {
   POD, WORKLOAD_TYPES, SCALABLE_WORKLOAD_TYPES, SERVICE, INGRESS, NODE
 } from '@shell/config/types';
-import SortableTable from '@shell/components/SortableTable';
+import ResourceTable from '@shell/components/ResourceTable';
 import Tab from '@shell/components/Tabbed/Tab';
 import Loading from '@shell/components/Loading';
 import ResourceTabs from '@shell/components/form/ResourceTabs';
@@ -46,7 +46,7 @@ export default {
     Loading,
     ResourceTabs,
     CountGauge,
-    SortableTable,
+    ResourceTable,
     PlusMinus
   },
 
@@ -380,12 +380,12 @@ export default {
         :label="t('tableHeaders.jobs')"
         :weight="4"
       >
-        <SortableTable
+        <ResourceTable
           :rows="value.jobs"
           :headers="jobHeaders"
           key-field="id"
           :schema="jobSchema"
-          :show-groups="false"
+          :groupable="false"
           :search="false"
         />
       </Tab>
@@ -395,7 +395,7 @@ export default {
         :label="t('tableHeaders.pods')"
         :weight="4"
       >
-        <SortableTable
+        <ResourceTable
           v-if="value.pods"
           :rows="value.pods"
           :headers="podHeaders"
@@ -458,13 +458,13 @@ export default {
         >
           {{ t('workload.detail.serviceListCaption') }}
         </p>
-        <SortableTable
+        <ResourceTable
           v-if="serviceSchema && matchingServices.length > 0"
           :rows="matchingServices"
           :headers="serviceHeaders"
           key-field="id"
           :schema="serviceSchema"
-          :show-groups="false"
+          :groupable="false"
           :search="false"
           :table-actions="false"
         />
@@ -499,13 +499,13 @@ export default {
         >
           {{ t('workload.detail.ingressListCaption') }}
         </p>
-        <SortableTable
+        <ResourceTable
           v-if="ingressSchema && matchingIngresses.length > 0"
           :rows="matchingIngresses"
           :headers="ingressHeaders"
           key-field="id"
           :schema="ingressSchema"
-          :show-groups="false"
+          :groupable="false"
           :search="false"
           :table-actions="false"
         />

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/__tests__/monitoring.coreos.com.prometheusrule.test.ts

@@ -0,0 +1,56 @@
+import { mount } from '@vue/test-utils';
+import FormValidation from '@shell/mixins/form-validation';
+import Monitoring from '@shell/edit/monitoring.coreos.com.prometheusrule/index.vue';
+import { _EDIT } from '@shell/config/query-params';
+import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
+
+describe('edit: management.cattle.io.setting should', () => {
+  const MOCKED_ERRORS = ['error1', 'error2', 'error3', 'error4', 'error5'];
+  const ERROR_BANNER_SELECTOR = '[data-testid="banner-close"]';
+  const requiredSetup = () => ({
+    // Remove all these mocks after migration to Vue 2.7/3 due mixin logic
+    mocks: {
+      $store: {
+        getters: {
+          currentStore:              () => 'current_store',
+          'current_store/schemaFor': jest.fn(),
+          'current_store/all':       jest.fn(),
+          'i18n/t':                  jest.fn(),
+          'i18n/exists':             jest.fn(),
+          namespaces:                () => ({})
+        }
+      },
+      $route:  { query: { AS: '' }, name: '' },
+      $router: { applyQuery: jest.fn() }
+    }
+  });
+
+  it('should close error banners', async() => {
+    jest.spyOn(FormValidation.computed, 'fvUnreportedValidationErrors').mockReturnValue(MOCKED_ERRORS);
+
+    const wrapper = mount(Monitoring, {
+      propsData: {
+        canYaml:  false,
+        mode:     _EDIT,
+        resource: {},
+        value:    { value: 'anything' },
+        name:     ''
+      },
+      directives: { cleanHtmlDirective },
+      ...requiredSetup()
+    });
+
+    const errorBanners = wrapper.findAll(ERROR_BANNER_SELECTOR);
+
+    // Assert that all the error banners are rendered
+    expect(errorBanners).toHaveLength(MOCKED_ERRORS.length);
+
+    for (let i = 0; i < MOCKED_ERRORS.length; i++) {
+      await errorBanners.at(0).trigger('click');
+      const resultErrorBanners = wrapper.findAll(ERROR_BANNER_SELECTOR);
+
+      // Assert that an error banner is closed until the last one
+      expect(resultErrorBanners).toHaveLength(MOCKED_ERRORS.length - 1 - i);
+    }
+  });
+});

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/monitoring.coreos.com.prometheusrule/index.vue

@@ -42,7 +42,10 @@ export default {
   },
 
   data() {
-    return { fvFormRuleSets: [{ path: 'metadata.name', rules: ['dnsLabel'] }] };
+    return {
+      fvFormRuleSets:      [{ path: 'metadata.name', rules: ['dnsLabel'] }],
+      closedErrorMessages: []
+    };
   },
 
   computed: {
@@ -54,7 +57,7 @@ export default {
         return [this.t('validation.prometheusRule.noEdit')];
       }
 
-      return this.fvUnreportedValidationErrors;
+      return this.fvUnreportedValidationErrors.filter((e) => !this.closedErrorMessages.includes(e));
     }
   },
 
@@ -102,6 +105,8 @@ export default {
         }
       });
 
+      this.closedErrorMessages = [];
+
       return true;
     },
 
@@ -125,7 +130,7 @@ export default {
     :mode="mode"
     :resource="value"
     :validation-passed="fvFormIsValid"
-    @error="(e) => (errors = e)"
+    @error="(_, closedError) => closedErrorMessages.push(closedError)"
     @finish="save"
   >
     <div class="row">

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"