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

package/components/form/ResourceQuota/ProjectRow.vue

@@ -1,12 +1,17 @@
 <script>
 import Select from '@shell/components/form/Select';
 import UnitInput from '@shell/components/form/UnitInput';
-import { ROW_COMPUTED } from './shared';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { ROW_COMPUTED, TYPES } from './shared';
 
 export default {
   emits: ['type-change'],
 
-  components: { Select, UnitInput },
+  components: {
+    Select,
+    UnitInput,
+    LabeledInput,
+  },
 
   props: {
     mode: {
@@ -26,35 +31,95 @@ export default {
       default: () => {
         return {};
       }
+    },
+    index: {
+      type:     Number,
+      required: true,
+    }
+  },
+
+  data() {
+    return { customType: '' };
+  },
+
+  created() {
+    if (this.type.startsWith(TYPES.EXTENDED)) {
+      this.customType = this.type.substring(`${ TYPES.EXTENDED }.`.length);
+    } else {
+      this.customType = this.type;
     }
   },
 
   computed: {
     ...ROW_COMPUTED,
 
-    resourceQuotaLimit: {
-      get() {
-        return this.value.spec.resourceQuota?.limit || {};
-      },
+    localType() {
+      return this.type.startsWith(TYPES.EXTENDED) ? this.type.split('.')[0] : this.type;
     },
 
-    namespaceDefaultResourceQuotaLimit: {
-      get() {
-        return this.value.spec.namespaceDefaultResourceQuota?.limit || {};
-      },
+    isCustom() {
+      return this.localType === TYPES.EXTENDED;
+    },
+
+    resourceQuotaLimit() {
+      if (this.isCustom) {
+        return this.value.spec.resourceQuota?.limit.extended || {};
+      }
+
+      return this.value.spec.resourceQuota?.limit || {};
+    },
+
+    namespaceDefaultResourceQuotaLimit() {
+      if (this.isCustom) {
+        return this.value.spec.namespaceDefaultResourceQuota?.limit.extended || {};
+      }
+
+      return this.value.spec.namespaceDefaultResourceQuota?.limit || {};
+    },
+
+    currentResourceType() {
+      return this.isCustom ? this.customType : this.localType;
+    },
+
+    customTypeRules() {
+      // Return a validation rule that makes the field required when isCustom is true
+      if (this.isCustom) {
+        return [
+          (value) => {
+            if (!value) {
+              return this.t('resourceQuota.errors.customTypeRequired');
+            }
+
+            return undefined;
+          }
+        ];
+      }
+
+      return [];
     }
   },
 
   methods: {
     updateType(type) {
-      if (typeof this.value.spec.resourceQuota?.limit[this.type] !== 'undefined') {
-        delete this.value.spec.resourceQuota.limit[this.type];
-      }
-      if (typeof this.value.spec.namespaceDefaultResourceQuota?.limit[this.type] !== 'undefined') {
-        delete this.value.spec.namespaceDefaultResourceQuota.limit[this.type];
+      const oldResourceKey = this.isCustom ? this.customType : this.localType;
+
+      this.deleteResourceLimits(oldResourceKey);
+
+      if (type === TYPES.EXTENDED) {
+        this.customType = '';
+      } else {
+        this.customType = type;
       }
 
-      this.$emit('type-change', type);
+      this.$emit('type-change', { index: this.index, type });
+    },
+
+    updateCustomType(type) {
+      const oldType = this.customType;
+
+      this.deleteResourceLimits(oldType);
+
+      this.customType = type;
     },
 
     updateQuotaLimit(prop, type, val) {
@@ -62,7 +127,26 @@ export default {
         this.value.spec[prop] = { limit: { } };
       }
 
+      if (this.isCustom) {
+        if (!this.value.spec[prop].limit.extended) {
+          this.value.spec[prop].limit.extended = { };
+        }
+
+        this.value.spec[prop].limit.extended[type] = val;
+
+        return;
+      }
+
       this.value.spec[prop].limit[type] = val;
+    },
+
+    deleteResourceLimits(resourceKey) {
+      if (typeof this.value.spec.resourceQuota?.limit[resourceKey] !== 'undefined') {
+        delete this.value.spec.resourceQuota.limit[resourceKey];
+      }
+      if (typeof this.value.spec.namespaceDefaultResourceQuota?.limit[resourceKey] !== 'undefined') {
+        delete this.value.spec.namespaceDefaultResourceQuota.limit[resourceKey];
+      }
     }
   },
 };
@@ -73,15 +157,26 @@ export default {
     class="row"
   >
     <Select
-      :value="type"
+      :value="localType"
       class="mr-10"
       :mode="mode"
       :options="types"
       data-testid="projectrow-type-input"
       @update:value="updateType($event)"
     />
+    <LabeledInput
+      :value="customType"
+      :disabled="!isCustom"
+      :required="isCustom"
+      :mode="mode"
+      :placeholder="t('resourceQuota.resourceIdentifier.placeholder')"
+      :rules="customTypeRules"
+      class="mr-10"
+      data-testid="projectrow-custom-type-input"
+      @update:value="updateCustomType($event)"
+    />
     <UnitInput
-      :value="resourceQuotaLimit[type]"
+      :value="resourceQuotaLimit[currentResourceType]"
       class="mr-10"
       :mode="mode"
       :placeholder="typeOption.placeholder"
@@ -90,10 +185,10 @@ export default {
       :base-unit="typeOption.baseUnit"
       :output-modifier="true"
       data-testid="projectrow-project-quota-input"
-      @update:value="updateQuotaLimit('resourceQuota', type, $event)"
+      @update:value="updateQuotaLimit('resourceQuota', currentResourceType, $event)"
     />
     <UnitInput
-      :value="namespaceDefaultResourceQuotaLimit[type]"
+      :value="namespaceDefaultResourceQuotaLimit[currentResourceType]"
       :mode="mode"
       :placeholder="typeOption.placeholder"
       :increment="typeOption.increment"
@@ -101,7 +196,7 @@ export default {
       :base-unit="typeOption.baseUnit"
       :output-modifier="true"
       data-testid="projectrow-namespace-quota-input"
-      @update:value="updateQuotaLimit('namespaceDefaultResourceQuota', type, $event)"
+      @update:value="updateQuotaLimit('namespaceDefaultResourceQuota', currentResourceType, $event)"
     />
   </div>
 </template>

package/components/form/ResourceQuota/shared.js

@@ -1,62 +1,86 @@
+export const TYPES = {
+  EXTENDED:                'extended',
+  CONFIG_MAPS:             'configMaps',
+  LIMITS_CPU:              'limitsCpu',
+  LIMITS_MEM:              'limitsMemory',
+  PVC:                     'persistentVolumeClaims',
+  PODS:                    'pods',
+  REPLICATION_CONTROLLERS: 'replicationControllers',
+  REQUESTS_CPU:            'requestsCpu',
+  REQUESTS_MEMORY:         'requestsMemory',
+  REQUESTS_STORAGE:        'requestsStorage',
+  SECRETS:                 'secrets',
+  SERVICES:                'services',
+  SERVICES_LOAD_BALANCERS: 'servicesLoadBalancers',
+  SERVICES_NODE_PORTS:     'servicesNodePorts',
+};
+
 export const RANCHER_TYPES = [
   {
-    value:          'configMaps',
+    value:          TYPES.EXTENDED,
+    inputExponent:  0,
+    baseUnit:       '',
+    labelKey:       'resourceQuota.custom',
+    placeholderKey: 'resourceQuota.projectLimit.unitlessPlaceholder'
+  },
+  {
+    value:          TYPES.CONFIG_MAPS,
     inputExponent:  0,
     baseUnit:       '',
     labelKey:       'resourceQuota.configMaps',
     placeholderKey: 'resourceQuota.projectLimit.unitlessPlaceholder'
   },
   {
-    value:          'limitsCpu',
+    value:          TYPES.LIMITS_CPU,
     inputExponent:  -1,
     baseUnitKey:    'suffix.cpus',
     labelKey:       'resourceQuota.limitsCpu',
     placeholderKey: 'resourceQuota.projectLimit.cpuPlaceholder'
   },
   {
-    value:          'limitsMemory',
+    value:          TYPES.LIMITS_MEM,
     inputExponent:  2,
     increment:      1024,
     labelKey:       'resourceQuota.limitsMemory',
     placeholderKey: 'resourceQuota.projectLimit.memoryPlaceholder'
   },
   {
-    value:          'persistentVolumeClaims',
+    value:          TYPES.PVC,
     inputExponent:  0,
     baseUnit:       '',
     labelKey:       'resourceQuota.persistentVolumeClaims',
     placeholderKey: 'resourceQuota.projectLimit.unitlessPlaceholder'
   },
   {
-    value:          'pods',
+    value:          TYPES.PODS,
     inputExponent:  0,
     baseUnit:       '',
     labelKey:       'resourceQuota.pods',
     placeholderKey: 'resourceQuota.projectLimit.unitlessPlaceholder'
   },
   {
-    value:          'replicationControllers',
+    value:          TYPES.REPLICATION_CONTROLLERS,
     inputExponent:  0,
     baseUnit:       '',
     labelKey:       'resourceQuota.replicationControllers',
     placeholderKey: 'resourceQuota.projectLimit.unitlessPlaceholder'
   },
   {
-    value:          'requestsCpu',
+    value:          TYPES.REQUESTS_CPU,
     inputExponent:  -1,
     baseUnitKey:    'suffix.cpus',
     labelKey:       'resourceQuota.requestsCpu',
     placeholderKey: 'resourceQuota.projectLimit.cpuPlaceholder'
   },
   {
-    value:          'requestsMemory',
+    value:          TYPES.REQUESTS_MEMORY,
     inputExponent:  2,
     increment:      1024,
     labelKey:       'resourceQuota.requestsMemory',
     placeholderKey: 'resourceQuota.projectLimit.memoryPlaceholder'
   },
   {
-    value:          'requestsStorage',
+    value:          TYPES.REQUESTS_STORAGE,
     units:          'storage',
     inputExponent:  2,
     increment:      1024,
@@ -64,7 +88,7 @@ export const RANCHER_TYPES = [
     placeholderKey: 'resourceQuota.projectLimit.storagePlaceholder'
   },
   {
-    value:          'secrets',
+    value:          TYPES.SECRETS,
     units:          'unitless',
     inputExponent:  0,
     baseUnit:       '',
@@ -72,7 +96,7 @@ export const RANCHER_TYPES = [
     placeholderKey: 'resourceQuota.projectLimit.unitlessPlaceholder'
   },
   {
-    value:          'services',
+    value:          TYPES.SERVICES,
     units:          'unitless',
     inputExponent:  0,
     baseUnit:       '',
@@ -80,7 +104,7 @@ export const RANCHER_TYPES = [
     placeholderKey: 'resourceQuota.projectLimit.unitlessPlaceholder'
   },
   {
-    value:          'servicesLoadBalancers',
+    value:          TYPES.SERVICES_LOAD_BALANCERS,
     units:          'unitless',
     inputExponent:  0,
     baseUnit:       '',
@@ -88,7 +112,7 @@ export const RANCHER_TYPES = [
     placeholderKey: 'resourceQuota.projectLimit.unitlessPlaceholder'
   },
   {
-    value:          'servicesNodePorts',
+    value:          TYPES.SERVICES_NODE_PORTS,
     units:          'unitless',
     inputExponent:  0,
     baseUnit:       '',
@@ -99,28 +123,28 @@ export const RANCHER_TYPES = [
 
 export const HARVESTER_TYPES = [
   {
-    value:          'limitsCpu',
+    value:          TYPES.LIMITS_CPU,
     inputExponent:  -1,
     baseUnitKey:    'suffix.cpus',
     labelKey:       'resourceQuota.limitsCpu',
     placeholderKey: 'resourceQuota.projectLimit.cpuPlaceholder'
   },
   {
-    value:          'limitsMemory',
+    value:          TYPES.LIMITS_MEM,
     inputExponent:  2,
     increment:      1024,
     labelKey:       'resourceQuota.limitsMemory',
     placeholderKey: 'resourceQuota.projectLimit.memoryPlaceholder'
   },
   {
-    value:          'requestsCpu',
+    value:          TYPES.REQUESTS_CPU,
     inputExponent:  -1,
     baseUnitKey:    'suffix.cpus',
     labelKey:       'resourceQuota.requestsCpu',
     placeholderKey: 'resourceQuota.projectLimit.cpuPlaceholder'
   },
   {
-    value:          'requestsMemory',
+    value:          TYPES.REQUESTS_MEMORY,
     inputExponent:  2,
     increment:      1024,
     labelKey:       'resourceQuota.requestsMemory',
@@ -130,7 +154,7 @@ export const HARVESTER_TYPES = [
 
 export const ROW_COMPUTED = {
   typeOption() {
-    return this.types.find((type) => type.value === this.type);
+    return this.types.find((type) => type.value === this.type.split('.')[0]);
   }
 };
 

package/components/formatter/KubeconfigClusters.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface ClusterReference {
+  label: string;
+  location?: object;
+}
+
+const MAX_DISPLAY = 25;
+
+const props = defineProps<{
+  row: { id: string; sortedReferencedClusters?: ClusterReference[] };
+  value?: unknown[];
+}>();
+
+const allClusters = computed<ClusterReference[]>(() => {
+  return props.row?.sortedReferencedClusters || [];
+});
+
+const clusters = computed<ClusterReference[]>(() => {
+  return allClusters.value.slice(0, MAX_DISPLAY);
+});
+
+const remainingCount = computed<number>(() => {
+  return Math.max(0, allClusters.value.length - MAX_DISPLAY);
+});
+</script>
+
+<template>
+  <span class="kubeconfig-clusters">
+    <template
+      v-for="(cluster, index) in clusters"
+    >
+      <template v-if="index > 0">,&nbsp;</template>
+      <router-link
+        v-if="cluster.location"
+        :key="`${row.id}-${cluster.label}`"
+        :to="cluster.location"
+      >
+        {{ cluster.label }}
+      </router-link>
+      <span
+        v-else
+        :key="`${row.id}-${cluster.label}-deleted`"
+        class="text-muted"
+      >
+        {{ cluster.label }}
+      </span>
+    </template>
+    <span
+      v-if="remainingCount > 0"
+      class="text-muted"
+    >
+      {{ t('ext.cattle.io.kubeconfig.moreClusterCount', { remainingCount: remainingCount }) }}
+    </span>
+    <span
+      v-if="allClusters.length === 0"
+      class="text-muted"
+    >
+      &mdash;
+    </span>
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.kubeconfig-clusters {
+  display: block;
+  width: 0;
+  min-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

package/components/formatter/LinkName.vue

@@ -26,7 +26,7 @@ export default {
 
     product: {
       type:    String,
-      default: EXPLORER,
+      default: '',
     }
   },
 
@@ -35,10 +35,11 @@ export default {
       const name = `c-cluster-product-resource${ this.namespace ? '-namespace' : '' }-id`;
 
       const params = {
+        cluster:   this.$store.getters['clusterId'],
+        product:   this.product || this.$store.getters['productId'] || EXPLORER,
         resource:  this.type,
         namespace: this.namespace,
         id:        this.objectId ? this.objectId : this.value,
-        product:   this.product || EXPLORER,
       };
 
       // Having an undefined param can yield a console warning like [Vue Router warn]: Discarded invalid param(s) "namespace" when navigating

package/components/formatter/__tests__/KubeconfigClusters.test.ts

@@ -0,0 +1,125 @@
+import { mount, RouterLinkStub } from '@vue/test-utils';
+import KubeconfigClusters from '@shell/components/formatter/KubeconfigClusters.vue';
+
+describe('component: KubeconfigClusters', () => {
+  const MAX_DISPLAY = 25;
+
+  const createCluster = (label: string, hasLocation = true) => ({
+    label,
+    location: hasLocation ? { name: 'cluster-detail', params: { cluster: label } } : null
+  });
+
+  const createClusters = (count: number, hasLocation = true) => {
+    return Array.from({ length: count }, (_, i) => createCluster(`cluster-${ i + 1 }`, hasLocation));
+  };
+
+  const defaultMocks = { t: (key: string, args: Record<string, unknown>) => `+ ${ args.remainingCount } more` };
+
+  const mountComponent = (clusters: unknown[] = [], mocks = defaultMocks) => {
+    return mount(KubeconfigClusters, {
+      props:  { row: { id: 'test-row', sortedReferencedClusters: clusters } },
+      global: {
+        mocks,
+        stubs: { 'router-link': RouterLinkStub }
+      }
+    });
+  };
+
+  describe('displaying clusters', () => {
+    it('should display a dash when there are no clusters', () => {
+      const wrapper = mountComponent([]);
+      const emptySpan = wrapper.find('.text-muted');
+
+      expect(emptySpan.text()).toBe('—');
+    });
+
+    it('should display cluster labels with router-links when clusters have locations', () => {
+      const clusters = [createCluster('local'), createCluster('downstream')];
+      const wrapper = mountComponent(clusters);
+      const links = wrapper.findAllComponents(RouterLinkStub);
+
+      expect(links).toHaveLength(2);
+      expect(links[0].text()).toBe('local');
+      expect(links[1].text()).toBe('downstream');
+    });
+
+    it('should display cluster labels as text-muted spans when clusters have no location', () => {
+      const clusters = [createCluster('deleted-cluster', false)];
+      const wrapper = mountComponent(clusters);
+      const mutedSpan = wrapper.find('.text-muted');
+
+      expect(mutedSpan.text()).toBe('deleted-cluster');
+      expect(wrapper.findComponent(RouterLinkStub).exists()).toBe(false);
+    });
+
+    it('should separate clusters with commas', () => {
+      const clusters = [createCluster('cluster-1'), createCluster('cluster-2')];
+      const wrapper = mountComponent(clusters);
+
+      expect(wrapper.text()).toContain(',');
+    });
+  });
+
+  describe('max display limit', () => {
+    it('should display all clusters when count is at or below the limit', () => {
+      const clusters = createClusters(MAX_DISPLAY);
+      const wrapper = mountComponent(clusters);
+      const links = wrapper.findAllComponents(RouterLinkStub);
+
+      expect(links).toHaveLength(MAX_DISPLAY);
+      expect(wrapper.text()).not.toContain('more');
+    });
+
+    it('should limit displayed clusters to MAX_DISPLAY', () => {
+      const clusters = createClusters(MAX_DISPLAY + 10);
+      const wrapper = mountComponent(clusters);
+      const links = wrapper.findAllComponents(RouterLinkStub);
+
+      expect(links).toHaveLength(MAX_DISPLAY);
+    });
+
+    it('should show remaining count when clusters exceed the limit', () => {
+      const totalClusters = MAX_DISPLAY + 5;
+      const clusters = createClusters(totalClusters);
+      const wrapper = mountComponent(clusters);
+
+      expect(wrapper.text()).toContain('+ 5 more');
+    });
+
+    it('should show correct remaining count for large cluster lists', () => {
+      const totalClusters = MAX_DISPLAY + 100;
+      const clusters = createClusters(totalClusters);
+      const wrapper = mountComponent(clusters);
+
+      expect(wrapper.text()).toContain('+ 100 more');
+    });
+  });
+
+  describe('computed properties', () => {
+    it('should return empty array for allClusters when row has no sortedReferencedClusters', () => {
+      const wrapper = mount(KubeconfigClusters, {
+        props:  { row: { id: 'test-row' } },
+        global: {
+          mocks: defaultMocks,
+          stubs: { 'router-link': RouterLinkStub }
+        }
+      });
+
+      expect(wrapper.vm.allClusters).toStrictEqual([]);
+    });
+
+    it('should calculate remainingCount as 0 when clusters are at or below limit', () => {
+      const clusters = createClusters(MAX_DISPLAY);
+      const wrapper = mountComponent(clusters);
+
+      expect(wrapper.vm.remainingCount).toBe(0);
+    });
+
+    it('should calculate correct remainingCount when clusters exceed limit', () => {
+      const clusters = createClusters(MAX_DISPLAY + 15);
+      const wrapper = mountComponent(clusters);
+
+      expect(wrapper.vm.remainingCount).toBe(15);
+    });
+  });
+});

package/config/product/explorer.js

@@ -404,7 +404,7 @@ export function init(store) {
     [STEVE_STATE_COL, STEVE_NAME_COL, STEVE_NAMESPACE_COL, createSteveWorkloadImageCol(6), STEVE_WORKLOAD_ENDPOINTS, 'Completions', {
       ...DURATION,
       value:     'metadata.fields.3',
-      sort:      false,
+      sort:      'metadata.fields.3',
       search:    'metadata.fields.3',
       formatter: undefined, // Now that sort/search is remote we're not doing weird things with start time (see `duration` in model)
     }, STEVE_AGE_COL],

package/config/product/manager.js

@@ -2,6 +2,7 @@ import { AGE, NAME as NAME_COL, STATE } from '@shell/config/table-headers';
 import {
   CAPI,
   CATALOG,
+  EXT,
   NORMAN,
   HCI,
   MANAGEMENT,
@@ -125,14 +126,17 @@ export function init(store) {
   weightType(CAPI.MACHINE_DEPLOYMENT, 4, true);
   weightType(CAPI.MACHINE_SET, 3, true);
   weightType(CAPI.MACHINE, 2, true);
-  weightType(CATALOG.CLUSTER_REPO, 1, true);
+  configureType(EXT.KUBECONFIG, { canYaml: false });
+  weightType(EXT.KUBECONFIG, 1, true);
+  weightType(CATALOG.CLUSTER_REPO, 0, true);
   weightType(MANAGEMENT.PSA, 5, true);
-  weightType(VIRTUAL_TYPES.JWT_AUTHENTICATION, 0, true);
+  weightType(VIRTUAL_TYPES.JWT_AUTHENTICATION, -1, true);
 
   basicType([
     CAPI.MACHINE_DEPLOYMENT,
     CAPI.MACHINE_SET,
     CAPI.MACHINE,
+    EXT.KUBECONFIG,
     CATALOG.CLUSTER_REPO,
     MANAGEMENT.PSA,
     VIRTUAL_TYPES.JWT_AUTHENTICATION
@@ -192,4 +196,27 @@ export function init(store) {
     MACHINE_SUMMARY,
     AGE
   ]);
+
+  headers(EXT.KUBECONFIG, [
+    STATE,
+    {
+      name:      'clusters',
+      labelKey:  'tableHeaders.clusters',
+      value:     'spec.clusters',
+      sort:      ['referencedClustersSortable'],
+      search:    ['referencedClustersSortable'],
+      formatter: 'KubeconfigClusters',
+    },
+    {
+      name:          'ttl',
+      labelKey:      'tableHeaders.ttl',
+      value:         'expiresAt',
+      formatter:     'LiveDate',
+      formatterOpts: { isCountdown: true },
+    },
+    {
+      ...AGE,
+      defaultSort: true,
+    },
+  ]);
 }

package/config/router/routes.js

@@ -514,7 +514,10 @@ export default [
         name:      'c-cluster-product-resource-id',
         meta:      { asyncSetup: true }
       }, {
-        path:      `/c/:cluster/:product/${ VIRTUAL_TYPES.PROJECT_SECRETS }/:namespace/:id`,
+        // Used this regex syntax in order to strict match the 'projectsecret' path segment
+        // while simultaneously capturing it as the 'resource' parameter.
+        // This is required because the Side Navigation relies on route.params.resource to determine which menu item to highlight.
+        path:      `/c/:cluster/:product/:resource(${ VIRTUAL_TYPES.PROJECT_SECRETS })/:namespace/:id`,
         component: () => interopDefault(import(`@shell/pages/c/_cluster/explorer/${ VIRTUAL_TYPES.PROJECT_SECRETS }.vue`)),
         name:      `c-cluster-product-${ VIRTUAL_TYPES.PROJECT_SECRETS }-namespace-id`,
       }, {