@rancher/shell 0.3.16 → 0.3.18

package/detail/workload/index.vue

@@ -2,9 +2,9 @@
 import CreateEditView from '@shell/mixins/create-edit-view';
 import { NAMESPACE as NAMESPACE_COL } from '@shell/config/table-headers';
 import {
-  POD, WORKLOAD_TYPES, SCALABLE_WORKLOAD_TYPES, SERVICE, INGRESS, NODE
+  POD, WORKLOAD_TYPES, SCALABLE_WORKLOAD_TYPES, SERVICE, INGRESS, NODE, NAMESPACE,
 } 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';
@@ -16,6 +16,7 @@ import { mapGetters } from 'vuex';
 import { allDashboardsExist } from '@shell/utils/grafana';
 import PlusMinus from '@shell/components/form/PlusMinus';
 import { matches } from '@shell/utils/selector';
+import { PROJECT } from '@shell/config/labels-annotations';
 
 const SCALABLE_TYPES = Object.values(SCALABLE_WORKLOAD_TYPES);
 const WORKLOAD_METRICS_DETAIL_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-workload-pods-1/rancher-workload-pods?orgId=1';
@@ -46,7 +47,7 @@ export default {
     Loading,
     ResourceTabs,
     CountGauge,
-    SortableTable,
+    ResourceTable,
     PlusMinus
   },
 
@@ -85,23 +86,37 @@ export default {
     const isMetricsSupportedKind = METRICS_SUPPORTED_KINDS.includes(this.value.type);
 
     this.showMetrics = isMetricsSupportedKind && await allDashboardsExist(this.$store, this.currentCluster.id, [WORKLOAD_METRICS_DETAIL_URL, WORKLOAD_METRICS_SUMMARY_URL]);
+    if (!this.showMetrics) {
+      const namespace = await this.$store.dispatch('cluster/find', { type: NAMESPACE, id: this.value.metadata.namespace });
 
+      const projectId = namespace?.metadata?.labels[PROJECT];
+
+      if (projectId) {
+        this.WORKLOAD_PROJECT_METRICS_DETAIL_URL = `/api/v1/namespaces/cattle-project-${ projectId }-monitoring/services/http:cattle-project-${ projectId }-monitoring-grafana:80/proxy/d/rancher-pod-containers-1/rancher-workload-pods?orgId=1'`;
+        this.WORKLOAD_PROJECT_METRICS_SUMMARY_URL = `/api/v1/namespaces/cattle-project-${ projectId }-monitoring/services/http:cattle-project-${ projectId }-monitoring-grafana:80/proxy/d/rancher-pod-1/rancher-workload?orgId=1`;
+
+        this.showProjectMetrics = await allDashboardsExist(this.$store, this.currentCluster.id, [this.WORKLOAD_PROJECT_METRICS_DETAIL_URL, this.WORKLOAD_PROJECT_METRICS_SUMMARY_URL], 'cluster', projectId);
+      }
+    }
     this.findMatchingServices();
     this.findMatchingIngresses();
   },
 
   data() {
     return {
-      allPods:           [],
-      allServices:       [],
-      allIngresses:      [],
-      matchingServices:  [],
-      matchingIngresses: [],
-      allJobs:           [],
-      allNodes:          [],
+      allPods:                         [],
+      allServices:                     [],
+      allIngresses:                    [],
+      matchingServices:                [],
+      matchingIngresses:               [],
+      allJobs:                         [],
+      allNodes:                        [],
       WORKLOAD_METRICS_DETAIL_URL,
       WORKLOAD_METRICS_SUMMARY_URL,
-      showMetrics:       false,
+      POD_PROJECT_METRICS_DETAIL_URL:  '',
+      POD_PROJECT_METRICS_SUMMARY_URL: '',
+      showMetrics:                     false,
+      showProjectMetrics:              false,
     };
   },
 
@@ -380,12 +395,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 +410,7 @@ export default {
         :label="t('tableHeaders.pods')"
         :weight="4"
       >
-        <SortableTable
+        <ResourceTable
           v-if="value.pods"
           :rows="value.pods"
           :headers="podHeaders"
@@ -421,6 +436,22 @@ export default {
           />
         </template>
       </Tab>
+      <Tab
+        v-if="showProjectMetrics"
+        :label="t('workload.container.titles.metrics')"
+        name="workload-metrics"
+        :weight="3"
+      >
+        <template #default="props">
+          <DashboardMetrics
+            v-if="props.active"
+            :detail-url="WORKLOAD_PROJECT_METRICS_DETAIL_URL"
+            :summary-url="WORKLOAD_PROJECT_METRICS_SUMMARY_URL"
+            :vars="graphVars"
+            graph-height="550px"
+          />
+        </template>
+      </Tab>
       <Tab
         v-if="v1MonitoringUrl"
         name="v1Metrics"
@@ -458,13 +489,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 +530,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__/ui.cattle.io.navlink.test.ts

@@ -0,0 +1,110 @@
+/* eslint-disable jest/no-hooks */
+import { mount } from '@vue/test-utils';
+import Navlink from '@shell/edit/ui.cattle.io.navlink.vue';
+import { _CREATE } from '@shell/config/query-params';
+import CruResource from '@shell/components/CruResource';
+
+describe('view: ui.cattle.io.navlink should', () => {
+  const name = 'test';
+  const url = 'http://test.com';
+  let wrapper: any;
+
+  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':                  (val) => val,
+          'i18n/exists':             jest.fn(),
+        }
+      },
+      $route:  { query: { AS: '' } },
+      $router: { applyQuery: jest.fn() },
+    },
+    propsData: {
+      metadata:   { namespace: 'test' },
+      spec:       { template: {} },
+      targetInfo: { mode: 'all' },
+      value:      {},
+      mode:       _CREATE,
+    },
+
+  });
+
+  beforeEach(() => {
+    wrapper = mount(Navlink, { ...requiredSetup() });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('have "Create" button disabled before fields are filled in', () => {
+    const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+    expect(saveButton.disabled).toBe(true);
+  });
+  it('have "Create" button disabled when Link type is URL and only name is filled in', async() => {
+    const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+    const nameField = wrapper.find('[data-testid="Navlink-name-field"]').find('input');
+
+    nameField.setValue(name);
+
+    await wrapper.vm.$nextTick();
+
+    expect(saveButton.disabled).toBe(true);
+  });
+  it('have "Create" button enabled when Link type is URL and all required fields are filled in', async() => {
+    const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+    const nameField = wrapper.find('[data-testid="Navlink-name-field"]').find('input');
+    const urlField = wrapper.find('[data-testid="Navlink-url-field"]');
+
+    nameField.setValue(name);
+    urlField.setValue(url);
+
+    await wrapper.vm.$nextTick();
+
+    expect(saveButton.disabled).toBe(false);
+  });
+
+  it('have "Create" button disabled when Link type is Service and and only name is filled in', async() => {
+    const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+    const nameField = wrapper.find('[data-testid="Navlink-name-field"]').find('input');
+    const rg = wrapper.find('[data-testid="Navlink-link-radiogroup"]');
+
+    const serviceBttn = rg.findAll('.radio-label').at(1);
+
+    nameField.setValue(name);
+    serviceBttn.trigger('click');
+    await wrapper.vm.$nextTick();
+
+    expect(saveButton.disabled).toBe(true);
+  });
+
+  it('have "Create" button enabled when Link type is Service and and all required fields are filled in', async() => {
+    const nameField = wrapper.find('[data-testid="Navlink-name-field"]').find('input');
+    const rg = wrapper.find('[data-testid="Navlink-link-radiogroup"]');
+
+    const serviceBttn = rg.findAll('.radio-label').at(1);
+
+    nameField.setValue(name);
+    serviceBttn.trigger('click');
+    await wrapper.vm.$nextTick();
+
+    const schemeField = wrapper.find('[data-testid="Navlink-scheme-field"]');
+    const serviceField = wrapper.find('[data-testid="Navlink-currentService-field"]');
+
+    schemeField.find('button').trigger('click');
+    await wrapper.trigger('keydown.down');
+    await wrapper.trigger('keydown.enter');
+
+    serviceField.find('button').trigger('click');
+    await wrapper.trigger('keydown.down');
+    await wrapper.trigger('keydown.enter');
+
+    expect(CruResource.computed.canSave()).toBe(true);
+  });
+});

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.clustergroup.vue

@@ -11,6 +11,7 @@ import { set } from '@shell/utils/object';
 import { FLEET } from '@shell/config/types';
 import { convert, matching, simplify } from '@shell/utils/selector';
 import throttle from 'lodash/throttle';
+import { allHash } from '@shell/utils/promise';
 
 export default {
   name: 'CruClusterGroup',
@@ -27,10 +28,20 @@ export default {
   mixins: [CreateEditView],
 
   async fetch() {
-    if (this.$store.getters['management/schemaFor']( FLEET.CLUSTER )) {
-      this.allClusters = await this.$store.getters['management/all'](FLEET.CLUSTER);
+    const _hash = {};
+
+    if (this.$store.getters['management/schemaFor'](FLEET.CLUSTER)) {
+      _hash.allClusters = await this.$store.dispatch('management/findAll', { type: FLEET.CLUSTER });
+    }
+
+    if (this.$store.getters['management/schemaFor'](FLEET.WORKSPACE)) {
+      _hash.allWorkspaces = this.$store.dispatch('management/findAll', { type: FLEET.WORKSPACE });
     }
-    this.allWorkspaces = await this.$store.dispatch('management/findAll', { type: FLEET.WORKSPACE });
+
+    const hash = await allHash(_hash);
+
+    this.allClusters = hash.allClusters || [];
+    this.allWorkspaces = hash.allWorkspaces || [];
 
     if ( !this.value.spec?.selector ) {
       this.value.spec = this.value.spec || {};

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>