@rancher/shell 3.0.9-rc.2 → 3.0.9-rc.3

package/assets/translations/en-us.yaml

@@ -3879,6 +3879,8 @@ istio:
 itemCard:
   ariaLabel:
     clickable: Click on card for {cardTitle}
+  actionMenu:
+    label: '{cardTitle} actions'
 jwt:
   title: JWT Authentication
   actions:
@@ -8855,6 +8857,7 @@ notifications:
     showCheckboxLabel: Show custom login error
     messageLabel: Text to display
 resourceQuota:
+  banner: Limit resource consumption in a project for both standard (e.g. CPU Limit) and custom resource types. For custom resource types you have to provide the resource identifier yourself. Want to learn more about resource quotas? Read our <a href="https://ranchermanager.docs.rancher.com/how-to-guides/advanced-user-guides/manage-projects/manage-project-resource-quotas" target="_blank" rel="noopener noreferrer nofollow">documentation <i class="icon icon-external-link"></i></a><span class="sr-only">Opens in a new tab</span>
   label: Resource Quotas
   headers:
     limit: Limit
@@ -8862,9 +8865,14 @@ resourceQuota:
     projectLimit: Project Limit
     projectResourceAvailability: Project Resource Availability
     resourceType: Resource Type
+    resourceIdentifier: Resource Identifier
   helpText: Configure how much of the resources the namespace as a whole can consume.
   helpTextDetail: The amount of resources the namespace as a whole can consume.
   helpTextHarvester: VMs need to reserve additional memory overhead.
+  custom: Custom
+  resourceIdentifier:
+    placeholder: e.g. configmaps
+    tooltip: Select 'Custom' from the 'Resource Type' list and enter the resource identifier (e.g. requests.nvidia.com/gpu) to add custom resources quotas.
   configMaps: Config Maps
   limitsCpu: CPU Limit
   limitsMemory: Memory Limit
@@ -8894,6 +8902,8 @@ resourceQuota:
     unitlessPlaceholder: e.g. 10
   add:
     label: Add Resource
+  errors:
+    customTypeRequired: Resource identifier is required
   tooltip:
     reserved: 'Other Namespaces:'
     namespace: 'This Namespace:'

package/assets/translations/zh-hans.yaml

@@ -651,6 +651,10 @@ asyncButton:
     action: 保存
     success: 已保存
     waiting: 正在保存…
+  editVersion:
+    action: 保存更改
+    success: 已保存
+    waiting: 正在保存更改…
   enable:
     action: 启用
     success: 启用
@@ -874,6 +878,13 @@ catalog:
       windows: Windows
     search: 筛选
   install:
+    warning:
+      managed: |-
+        警告，{manager} 管理 {name} 应用的部署和升级。不支持升级此应用。<br>
+        {version, select,
+          null { }
+          other { 在大多数情况下，无需用户干预即可确保 {version} 版本与你正在运行的 Rancher 版本兼容。}
+        }
     appReadmeMissing: 此 Chart 没有其他 Chart 信息。
     appReadmeTitle: Chart 信息（Helm 自述）
     chart: Chart
@@ -939,6 +950,8 @@ catalog:
             install { 创建 }
             upgrade { 升级 }
             update { 更新 }
+            editVersion { 更新 }
+            downgrade { 降级 }
           } 这个 {existing, select,
             true { 应用 }
             false { Chart}

package/components/ActionMenu.vue

@@ -11,7 +11,7 @@ const SHOW = 'show';
 export default {
   name: 'ActionMenu',
 
-  emits: ['close'],
+  emits: ['close', 'action-invoked'],
 
   components: { IconOrSvg },
   props:      {
@@ -217,15 +217,14 @@ export default {
         // If the state of this component is controlled
         // by props instead of Vuex, we assume you wouldn't want
         // the mutation to have a dependency on Vuex either.
-        // So in that case we use events to execute actions instead.
-        // If an action list item is clicked, this
-        // component emits that event, then we assume the parent
-        // component will execute the action.
-        this.$emit(action.action, {
-          action,
+        // The parent component should handle the action based on the action property
+        // in the 'action-invoked' event payload.
+        this.$emit('action-invoked', {
+          action:     action.action,
+          actionData: action,
           event,
           ...args,
-          route: this.$route
+          route:      this.$route
         });
       } else {
         // If the state of this component is controlled

package/components/ActionMenuShell.vue

@@ -30,7 +30,15 @@ const openChanged = (event: boolean) => {
   }
 };
 
-const emit = defineEmits<{(event: string, payload: any): void;(event: 'action-invoked'): void;}>();
+export interface ActionMenuSelection {
+  action: string;
+  actionData: any;
+  event: MouseEvent;
+  route: ReturnType<typeof useRoute>;
+  [key: string]: any;
+}
+
+const emit = defineEmits<{(event: 'action-invoked', payload?: ActionMenuSelection): void;}>();
 const route = useRoute();
 
 const execute = (action: any, event: MouseEvent, args?: any) => {
@@ -38,7 +46,15 @@ const execute = (action: any, event: MouseEvent, args?: any) => {
     return;
   }
 
-  emit('action-invoked');
+  const payload: ActionMenuSelection = {
+    action:     action.action,
+    actionData: action,
+    event,
+    ...args,
+    route,
+  };
+
+  emit('action-invoked', payload);
 
   // this will come from extensions...
   if (action.invoke) {
@@ -56,24 +72,7 @@ const execute = (action: any, event: MouseEvent, args?: any) => {
         fn.apply(this, [opts, resources]);
       }
     }
-  } else if (props.customActions) {
-    // If the state of this component is controlled
-    // by props instead of Vuex, we assume you wouldn't want
-    // the mutation to have a dependency on Vuex either.
-    // So in that case we use events to execute actions instead.
-    // If an action list item is clicked, this
-    // component emits that event, then we assume the parent
-    // component will execute the action.
-    emit(
-      action.action,
-      {
-        action,
-        event,
-        ...args,
-        route,
-      }
-    );
-  } else {
+  } else if (!props.customActions) {
     // If the state of this component is controlled
     // by Vuex, mutate the store when an action is clicked.
     const opts = { alt: isAlternate(event) };

package/components/Resource/Detail/Card/Scaler.vue

@@ -19,22 +19,30 @@ const i18n = useI18n(store);
 </script>
 
 <template>
-  <div class="scaler">
+  <div
+    class="scaler"
+    data-testid="scaler"
+  >
     <button
       class="decrease"
       :aria-label="i18n.t('component.resource.detail.card.scaler.ariaLabel.decrease', {resourceName: props.ariaResourceName})"
       :disabled="!!props.min && (props.value <= props.min)"
+      data-testid="scaler-decrease"
       @click="() => emit('decrease', props.value - 1)"
     >
       <i class="icon icon-sm icon-minus" />
     </button>
-    <div class="value">
+    <div
+      class="value"
+      data-testid="scaler-value"
+    >
       {{ props.value }}
     </div>
     <button
       class="increase"
       :aria-label="i18n.t('component.resource.detail.card.scaler.ariaLabel.increase', {resourceName: props.ariaResourceName})"
       :disabled="!!props.max && (props.value >= props.max)"
+      data-testid="scaler-increase"
       @click="() => emit('increase', props.value + 1)"
     >
       <i class="icon icon-sm icon-plus" />

package/components/Resource/Detail/Card/StatusCard/index.vue

@@ -83,7 +83,10 @@ const rows = computed(() => {
 </script>
 
 <template>
-  <Card :title="title">
+  <Card
+    :title="title"
+    data-testid="resource-detail-status-card"
+  >
     <template
       v-if="props.showScaling"
       #heading-action

package/components/ResourceTable.vue

@@ -427,7 +427,7 @@ export default {
     },
 
     _applicableExtensionTableHooks() {
-      if (this.$store.$plugin?.getUIConfig) {
+      if (this.$store.$extension?.getUIConfig) {
         const extensionTableHooks = getApplicableExtensionEnhancements(this, ExtensionPoint.TABLE, TableLocation.RESOURCE, this.$route);
 
         return extensionTableHooks;

package/components/Tabbed/Tab.vue

@@ -15,6 +15,10 @@ export default {
       default: null,
       type:    String
     },
+    labelIcon: {
+      type:    String,
+      default: null
+    },
     name: {
       required: true,
       type:     String

package/components/Tabbed/index.vue

@@ -207,7 +207,7 @@ export default {
         return TabLocation.OTHER;
       }
     },
-    hasIcon(tab) {
+    hasErrorIcon(tab) {
       return tab.displayAlertIcon || (tab.error && !tab.active);
     },
     hashChange() {
@@ -346,6 +346,10 @@ export default {
           @click.prevent="select(tab.name, $event)"
           @keyup.enter.space="select(tab.name, $event)"
         >
+          <i
+            v-if="tab.labelIcon"
+            :class="`tab-label-icon icon ${tab.labelIcon}`"
+          />
           <span>
             {{ tab.labelDisplay }}
           </span>
@@ -354,7 +358,7 @@ export default {
             class="tab-badge"
           >{{ tab.badge }}</span>
           <i
-            v-if="hasIcon(tab)"
+            v-if="hasErrorIcon(tab)"
             v-clean-tooltip="t('validation.tab')"
             class="conditions-alert-icon icon-error"
           />
@@ -514,11 +518,15 @@ export default {
     }
 
     &.error {
-      & A > i {
+      & A > .icon-error {
         color: var(--error);
       }
     }
 
+    .tab-label-icon {
+      margin-right: 8px;
+    }
+
     .tab-badge {
       margin-left: 5px;
       background-color: var(--link);

package/components/__tests__/ProjectRow.test.ts

@@ -1,31 +1,39 @@
 import ProjectRow from '@shell/components/form/ResourceQuota/ProjectRow.vue';
-import { RANCHER_TYPES } from '@shell/components/form/ResourceQuota/shared';
+import { RANCHER_TYPES, TYPES } from '@shell/components/form/ResourceQuota/shared';
 import { shallowMount } from '@vue/test-utils';
 
-const CONFIGMAP_STRING = RANCHER_TYPES[0].value;
+const CONFIGMAP_STRING = TYPES.CONFIG_MAPS;
 
 describe('component: ProjectRow.vue', () => {
-  const wrapper = shallowMount(ProjectRow,
-    {
-      props: {
-        mode:  'edit',
-        types: RANCHER_TYPES,
-        type:  CONFIGMAP_STRING,
-        value: {
-          spec: {
-            namespaceDefaultResourceQuota: { limit: {} },
-            resourceQuota:                 { limit: {} }
-          }
+  const defaultMountOptions = {
+    props: {
+      mode:  'edit',
+      types: RANCHER_TYPES,
+      type:  CONFIGMAP_STRING,
+      index: 0,
+      value: {
+        spec: {
+          namespaceDefaultResourceQuota: { limit: {} },
+          resourceQuota:                 { limit: {} }
         }
       }
-    });
+    }
+  };
 
   it('should render the correct input fields and set the correct computed values, based on the provided data', () => {
+    const wrapper = shallowMount(
+      ProjectRow,
+      { ...defaultMountOptions }
+    );
+
     const typeInput = wrapper.find(`[data-testid="projectrow-type-input"]`);
+    const customTypeInput = wrapper.find(`[data-testid="projectrow-custom-type-input"]`);
     const projectQuotaInput = wrapper.find(`[data-testid="projectrow-project-quota-input"]`);
     const namespaceQuotaInput = wrapper.find(`[data-testid="projectrow-namespace-quota-input"]`);
 
     expect(typeInput.exists()).toBe(true);
+    expect(customTypeInput.exists()).toBe(true);
+    expect(customTypeInput.attributes().disabled).toBe('true');
     expect(projectQuotaInput.exists()).toBe(true);
     expect(namespaceQuotaInput.exists()).toBe(true);
     expect(wrapper.vm.resourceQuotaLimit).toStrictEqual({});
@@ -33,6 +41,11 @@ describe('component: ProjectRow.vue', () => {
   });
 
   it('triggering "updateQuotaLimit" should trigger Vue.set with the correct data', () => {
+    const wrapper = shallowMount(
+      ProjectRow,
+      { ...defaultMountOptions }
+    );
+
     wrapper.vm.updateQuotaLimit('resourceQuota', CONFIGMAP_STRING, 10);
 
     expect(wrapper.vm.value).toStrictEqual({
@@ -44,6 +57,11 @@ describe('component: ProjectRow.vue', () => {
   });
 
   it('triggering "updateType" with the same type that existed should clear limits and trigger emit', () => {
+    const wrapper = shallowMount(
+      ProjectRow,
+      { ...defaultMountOptions }
+    );
+
     wrapper.vm.updateType(CONFIGMAP_STRING);
 
     expect(wrapper.vm.value).toStrictEqual({
@@ -54,6 +72,75 @@ describe('component: ProjectRow.vue', () => {
     });
 
     expect(wrapper.emitted('type-change')).toBeTruthy();
-    expect(wrapper.emitted('type-change')[0]).toStrictEqual([CONFIGMAP_STRING]);
+    expect(wrapper.emitted('type-change')[0]).toStrictEqual([{ index: 0, type: CONFIGMAP_STRING }]);
+  });
+
+  it('should update standard resource types', async() => {
+    const wrapper = shallowMount(
+      ProjectRow,
+      { ...defaultMountOptions }
+    );
+
+    expect(wrapper.vm.isCustom).toBe(false);
+
+    await wrapper.vm.updateQuotaLimit('resourceQuota', 'limitsCpu', '100m');
+    await wrapper.vm.updateQuotaLimit('namespaceDefaultResourceQuota', 'limitsCpu', '50m');
+
+    expect(wrapper.vm.value.spec.resourceQuota.limit.limitsCpu).toBe('100m');
+    expect(wrapper.vm.value.spec.namespaceDefaultResourceQuota.limit.limitsCpu).toBe('50m');
+    expect(wrapper.vm.value.spec.resourceQuota.limit.extended).toBeUndefined();
+  });
+
+  it('should switch to a custom resource type', async() => {
+    const wrapper = shallowMount(
+      ProjectRow,
+      { ...defaultMountOptions }
+    );
+
+    await wrapper.vm.updateType(TYPES.EXTENDED);
+
+    expect(wrapper.emitted('type-change')).toHaveLength(1);
+    expect(wrapper.emitted('type-change')[0][0]).toStrictEqual({ index: 0, type: TYPES.EXTENDED });
+  });
+
+  it('should update custom resource types', async() => {
+    const wrapper = shallowMount(
+      ProjectRow,
+      {
+        ...defaultMountOptions,
+        props: {
+          ...defaultMountOptions.props,
+          type: TYPES.EXTENDED
+        }
+      }
+    );
+
+    expect(wrapper.vm.isCustom).toBe(true);
+
+    const customTypeInput = wrapper.find(`[data-testid="projectrow-custom-type-input"]`);
+
+    expect(customTypeInput.attributes().disabled).toBe('false');
+    await wrapper.vm.updateCustomType('custom.resource/foo');
+
+    expect(wrapper.vm.customType).toBe('custom.resource/foo');
+
+    await wrapper.vm.updateQuotaLimit('resourceQuota', 'custom.resource/foo', 1);
+    await wrapper.vm.updateQuotaLimit('namespaceDefaultResourceQuota', 'custom.resource/foo', 2);
+
+    expect(wrapper.vm.value.spec.resourceQuota.limit.extended['custom.resource/foo']).toBe(1);
+    expect(wrapper.vm.value.spec.namespaceDefaultResourceQuota.limit.extended['custom.resource/foo']).toBe(2);
+  });
+
+  it('should handle custom resource types with periods', () => {
+    const wrapper = shallowMount(ProjectRow, {
+      ...defaultMountOptions,
+      props: {
+        ...defaultMountOptions.props,
+        type: 'extended.requests.nvidia.com/gpu'
+      }
+    });
+
+    expect(wrapper.vm.isCustom).toBe(true);
+    expect(wrapper.vm.customType).toBe('requests.nvidia.com/gpu');
   });
 });

package/components/form/ResourceQuota/Project.vue

@@ -1,12 +1,17 @@
 <script>
 import ArrayList from '@shell/components/form/ArrayList';
 import Row from './ProjectRow';
-import { QUOTA_COMPUTED } from './shared';
+import { QUOTA_COMPUTED, TYPES } from './shared';
+import Banner from '@components/Banner/Banner.vue';
 
 export default {
   emits: ['remove', 'input'],
 
-  components: { ArrayList, Row },
+  components: {
+    ArrayList,
+    Row,
+    Banner,
+  },
 
   props: {
     mode: {
@@ -36,18 +41,35 @@ export default {
     this.value.spec['namespaceDefaultResourceQuota'] = this.value.spec.namespaceDefaultResourceQuota || { limit: {} };
     this.value.spec['resourceQuota'] = this.value.spec.resourceQuota || { limit: {} };
 
-    this.typeValues = Object.keys(this.value.spec.resourceQuota.limit);
+    const limit = this.value.spec.resourceQuota.limit;
+    const extendedKeys = Object.keys(limit.extended || {});
+
+    this.typeValues = Object.keys(limit).flatMap((k) => {
+      if (k !== TYPES.EXTENDED) {
+        return k;
+      }
+
+      return extendedKeys.map((ek) => `extended.${ ek }`);
+    });
   },
 
   computed: { ...QUOTA_COMPUTED },
 
   methods: {
-    updateType(i, type) {
-      this.typeValues[i] = type;
+    updateType(event) {
+      const { index, type } = event;
+
+      this.typeValues[index] = type;
     },
     remainingTypes(currentType) {
       return this.mappedTypes
-        .filter((mappedType) => !this.typeValues.includes(mappedType.value) || mappedType.value === currentType);
+        .filter((mappedType) => {
+          if (mappedType.value === TYPES.EXTENDED) {
+            return true;
+          }
+
+          return !this.typeValues.includes(mappedType.value) || mappedType.value === currentType;
+        });
     },
     emitRemove(data) {
       this.$emit('remove', data.row?.value);
@@ -57,9 +79,33 @@ export default {
 </script>
 <template>
   <div>
+    <Banner
+      color="info"
+      label-key="resourceQuota.banner"
+      class="mb-20"
+    />
     <div class="headers mb-10">
       <div class="mr-10">
-        <label>{{ t('resourceQuota.headers.resourceType') }}</label>
+        <label>
+          {{ t('resourceQuota.headers.resourceType') }}
+          <span
+            class="required mr-5"
+            aria-hidden="true"
+          >*</span>
+        </label>
+      </div>
+      <div class="mr-20">
+        <label>
+          {{ t('resourceQuota.headers.resourceIdentifier') }}
+          <span
+            class="required mr-5"
+            aria-hidden="true"
+          >*</span>
+          <i
+            v-clean-tooltip="t('resourceQuota.resourceIdentifier.tooltip')"
+            class="icon icon-info"
+          />
+        </label>
       </div>
       <div class="mr-20">
         <label>{{ t('resourceQuota.headers.projectLimit') }}</label>
@@ -83,8 +129,9 @@ export default {
           :mode="mode"
           :types="remainingTypes(typeValues[props.i])"
           :type="typeValues[props.i]"
+          :index="props.i"
           @input="$emit('input', $event)"
-          @type-change="updateType(props.i, $event)"
+          @type-change="updateType($event)"
         />
       </template>
     </ArrayList>
@@ -104,4 +151,8 @@ export default {
         width: 100%;
     }
 }
+
+.required {
+  color: var(--error);
+}
 </style>