dashboard-shell-shell 1.0.121 → 1.0.1000000081

package/core/types.ts

@@ -373,6 +373,11 @@ export interface ConfigureTypeOptions {
    */
   customRoute?: Object;
 
+  /**
+   * Custom options vary pre resource type
+   */
+  custom?: any;
+
   /**
    * Leaving these here for completeness but I don't think these should be advertised as useable to plugin creators.
    */
@@ -471,6 +476,24 @@ export interface DSLReturnType {
    */
   virtualType: (options: ConfigureVirtualTypeOptions) => void;
 
+  /**
+   * Side menu ordering for grouping of pages
+   * @param input Name of the group
+   * @param weight Ordering to be applied for the specified group
+   * @param forBasic Apply to basic type instead of regular type tree
+   * @returns {@link void}
+   */
+  weightGroup: (input: string, weight: number, forBasic: boolean) => void;
+
+  /**
+   * Side menu ordering for simple pages
+   * @param input Name of the page/resource
+   * @param weight Ordering to be applied for the specified page/resource
+   * @param forBasic Apply to basic type instead of regular type tree
+   * @returns {@link void}
+   */
+  weightType: (input: string, weight: number, forBasic: boolean) => void;
+
   /**
    * Leaving these here for completeness but I don't think these should be advertised as useable to plugin creators.
    */
@@ -484,8 +507,6 @@ export interface DSLReturnType {
   // moveType: (match, group)
   // setGroupDefaultType: (input, defaultType)
   // spoofedType: (obj)
-  // weightGroup: (input, weight, forBasic)
-  // weightType: (input, weight, forBasic)
 }
 
 /**

package/detail/__tests__/autoscaling.horizontalpodautoscaler.test.ts

@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import camelCase from 'lodash/camelCase';
 import HorizontalPodAutoScaler from '@shell/detail/autoscaling.horizontalpodautoscaler/index.vue';
 
 describe('view: autoscaling.horizontalpodautoscaler', () => {
@@ -43,7 +44,7 @@ describe('view: autoscaling.horizontalpodautoscaler', () => {
 
   };
 
-  const value = {
+  const valueWithResourceMetrics = {
     status: {
       currentMetrics: [
         {
@@ -100,36 +101,96 @@ describe('view: autoscaling.horizontalpodautoscaler', () => {
       }
     }
   };
+  const valueWithOtherMetrics = {
+    status: {
+      currentMetrics: [
 
-  const metricsValue = Object.values(value.spec.metrics);
-  const currentMetrics = Object.values(value.status.currentMetrics);
+        {
+          external: {
+            metric:  { name: 's1-prometheus' },
+            current: { averageValue: 50 }
+          },
+          type: 'External'
 
-  const wrapper = mount(HorizontalPodAutoScaler, {
-    props:  { value },
-    global: { mocks, stubs },
-  });
+        }
+      ],
+    },
+    spec: {
+      metrics: [
+        {
+          external: {
+            metric: { name: 's1-prometheus' },
+            target: { averageValue: 50, type: 'AverageValue' }
+          },
+          type: 'External'
+        }
+      ]
+    }
+  }
+;
 
-  describe.each(value.spec.metrics)('should display metrics for each resource:', (metric) => {
-    const name = metric.resource.name;
+  describe('with resource metrics:', () => {
+    const metricsValue = Object.values(valueWithResourceMetrics.spec.metrics);
+    const currentMetrics = Object.values(valueWithResourceMetrics.status.currentMetrics);
 
-    it(`${ name }:`, () => {
-      // Resource metrics
-      const resourceValue = wrapper.get(`[data-testid="resource-metrics-value-${ name }"]`);
-      const resourceName = wrapper.get(`[data-testid="resource-metrics-name-${ name }"]`);
-      const metricValue = metricsValue.find((f) => f.resource.name === name)?.resource;
+    const wrapper = mount(HorizontalPodAutoScaler, {
+      props:  { value: valueWithResourceMetrics },
+      global: { mocks, stubs },
+    });
 
-      // Current Metrics
-      const averageUtilization = wrapper.get(`[data-testid="current-metrics-Average Utilization-${ name }"]`);
-      const averageValue = wrapper.get(`[data-testid="current-metrics-Average Value-${ name }"]`);
-      const currentResource = currentMetrics.find((f) => f.resource.name === name)?.resource.current;
+    describe.each(valueWithResourceMetrics.spec.metrics)('should display metrics for each resource:', (metric) => {
+      const name = metric.resource.name;
 
+      it(`${ name }:`, () => {
       // Resource metrics
-      expect(resourceValue.element.textContent).toBe(`${ metricValue?.target?.averageUtilization }`);
-      expect(resourceName.element.textContent).toBe(`${ metricValue?.name }`);
+        const resourceValue = wrapper.get(`[data-testid="resource-metrics-value-${ name }"]`);
+        const resourceName = wrapper.get(`[data-testid="resource-metrics-name-${ name }"]`);
+        const metricValue = metricsValue.find((f) => f.resource.name === name)?.resource;
+
+        // Current Metrics
+        const averageUtilization = wrapper.get(`[data-testid="current-metrics-Average Utilization-${ name }"]`);
+        const averageValue = wrapper.get(`[data-testid="current-metrics-Average Value-${ name }"]`);
+        const currentResource = currentMetrics.find((f) => f.resource.name === name)?.resource.current;
+
+        // Resource metrics
+        expect(resourceValue.element.textContent).toBe(`${ metricValue?.target?.averageUtilization }`);
+        expect(resourceName.element.textContent).toBe(`${ metricValue?.name }`);
+
+        // Current Metrics
+        expect(averageUtilization.element.textContent).toBe(`${ currentResource?.averageUtilization }`);
+        expect(averageValue.element.textContent).toBe(`${ currentResource?.averageValue }`);
+      });
+    });
+  });
+
+  describe('with other metrics:', () => {
+    const currentMetrics = Object.values(valueWithOtherMetrics.status.currentMetrics);
+
+    const wrapper = mount(HorizontalPodAutoScaler, {
+      props:  { value: valueWithOtherMetrics },
+      global: { mocks, stubs },
+    });
+
+    describe.each(valueWithOtherMetrics.spec.metrics)('should display metrics for each resource:', (metric) => {
+      const metricType = camelCase(metric.type);
+      const name = metric[metricType as keyof typeof metric].metric.name;
+
+      it(`${ name }:`, () => {
+        // Resource metrics
+        const resourceValue = wrapper.get(`[data-testid="resource-metrics-value-${ name }"]`);
+        const metricValue = metric[metricType as keyof typeof metric];
+
+        // Current Metrics
+        const averageValue = wrapper.get(`[data-testid="current-metrics-Average Value-${ name }"]`);
+        const currentMatch = currentMetrics.find((f) => f[metricType as keyof typeof metric]?.metric.name === name);
+        const currentValue = currentMatch[metricType as keyof typeof metric]?.current;
+
+        // Resource metrics
+        expect(resourceValue.element.textContent).toBe(`${ metricValue?.target?.averageValue }`);
 
-      // Current Metrics
-      expect(averageUtilization.element.textContent).toBe(`${ currentResource?.averageUtilization }`);
-      expect(averageValue.element.textContent).toBe(`${ currentResource?.averageValue }`);
+        // Current Metrics
+        expect(averageValue.element.textContent).toBe(`${ currentValue?.averageValue }`);
+      });
     });
   });
 });

package/detail/autoscaling.horizontalpodautoscaler/index.vue

@@ -43,11 +43,21 @@ export default {
       } = this.value;
 
       return metrics.map((metric) => {
+        const currentMetricsKVs = [];
+        let currentMatch;
+        const metricType = camelCase(metric.type);
         const metricValue = get(metric, camelCase(metric.type));
         const targetType = metricValue?.target?.type;
-        const currentMatch = findBy(currentMetrics, 'resource.name', metric.resource.name);
+
+        // The format is different between 'Resource' metrics and others.
+        // See for examples: https://kubernetes.io/docs/tasks/run-application/horizontal-pod-autoscale-walkthrough/#appendix-horizontal-pod-autoscaler-status-conditions
+        if (metricType !== 'resource') {
+          currentMatch = findBy(currentMetrics, `${ metricType }.metric.name`, metricValue.metric.name);
+        } else {
+          currentMatch = findBy(currentMetrics, 'resource.name', metric.resource.name);
+        }
+
         const current = currentMatch ? get(currentMatch, `${ camelCase(metric.type) }.current`) : null;
-        const currentMetricsKVs = [];
 
         if (current) {
           keys(current).forEach((k) => {
@@ -67,7 +77,7 @@ export default {
             objectApiVersion: metricValue?.describedObject?.apiVersion ?? null,
             objectKind:       metricValue?.describedObject?.kind ?? null,
             objectName:       metricValue?.describedObject?.name ?? null,
-            resourceName:     metricValue?.name ?? null,
+            resourceName:     metricValue?.name || metricValue?.metric?.name || null,
             currentMetrics:   currentMetricsKVs,
           },
         };

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

@@ -215,6 +215,41 @@ export default {
   },
 
   data() {
+    const noneGroupOption = {
+      tooltipKey: 'resourceTable.groupBy.none',
+      icon:       'icon-list-flat',
+      value:      'none',
+    };
+    const poolColumn = {
+      name:     'pool',
+      labelKey: 'cluster.machinePool.name.label',
+      value:    'spec.nodePoolName',
+      getValue: (row) => row.spec.nodePoolName,
+      sort:     ['spec.nodePoolName'],
+    };
+    const poolGroupOption = {
+      tooltipKey: 'resourceTable.groupBy.pool',
+      icon:       'icon-cluster',
+      hideColumn: poolColumn.name,
+      value:      'spec.nodePoolName',
+      field:      'spec.nodePoolName'
+    };
+
+    const machineColumn = {
+      name:     'pool',
+      labelKey: 'cluster.machinePool.name.label',
+      value:    'pool.nameDisplay',
+      getValue: (row) => row.pool.nameDisplay,
+      sort:     ['pool.nameDisplay'],
+    };
+    const machineGroupOption = {
+      tooltipKey: 'resourceTable.groupBy.pool',
+      icon:       'icon-cluster',
+      hideColumn: machineColumn.name,
+      value:      'poolId',
+      field:      'poolId'
+    };
+
     return {
 
       allMachines:           [],
@@ -250,7 +285,25 @@ export default {
         conditions:   true, // in ResourceTabs
       },
 
-      showWindowsWarning: false
+      showWindowsWarning: false,
+
+      machineColumn,
+      poolColumn,
+
+      noneGroupOption,
+
+      machineGroupOption,
+      machineGroupOptions: [
+        noneGroupOption,
+        machineGroupOption
+      ],
+
+      poolGroupOption,
+      poolGroupOptions: [
+        noneGroupOption,
+        poolGroupOption,
+      ]
+
     };
   },
 
@@ -416,7 +469,7 @@ export default {
     },
 
     machineHeaders() {
-      return [
+      const headers = [
         STATE,
         NAME_COL,
         {
@@ -433,10 +486,16 @@ export default {
         ROLES,
         AGE,
       ];
+
+      if (!this.value.isCustom) {
+        headers.splice(3, 0, this.machineColumn);
+      }
+
+      return headers;
     },
 
     mgmtNodeSchemaHeaders() {
-      return [
+      const headers = [
         STATE, NAME_COL,
         {
           name:          'node-name',
@@ -452,6 +511,12 @@ export default {
         ROLES,
         AGE
       ];
+
+      if (!this.value.isCustom) {
+        headers.splice(3, 0, this.poolColumn);
+      }
+
+      return headers;
     },
 
     rke1Snapshots() {
@@ -772,11 +837,11 @@ export default {
           :schema="machineSchema"
           :headers="machineHeaders"
           default-sort-by="name"
-          :group-by="value.isCustom ? null : 'poolId'"
           group-ref="pool"
+          :group-default="machineGroupOption.value"
           :group-sort="['pool.nameDisplay']"
+          :group-options="value.isCustom ? [noneGroupOption] : machineGroupOptions"
           :sort-generation-fn="machineSortGenerationFn"
-          :hide-grouping-controls="true"
         >
           <template #main-row:isFake="{fullColspan}">
             <tr class="main-row">
@@ -859,9 +924,10 @@ export default {
           :schema="mgmtNodeSchema"
           :headers="mgmtNodeSchemaHeaders"
           :rows="nodes"
-          :group-by="value.isCustom ? null : 'spec.nodePoolName'"
           group-ref="pool"
+          :group-default="poolGroupOption.value"
           :group-sort="['pool.nameDisplay']"
+          :group-options="value.isCustom ? [noneGroupOption] : poolGroupOptions"
           :sort-generation-fn="nodeSortGenerationFn"
           :hide-grouping-controls="true"
         >

package/dialog/AddCustomBadgeDialog.vue

@@ -296,6 +296,7 @@ export default {
               v-model:value="badgeBgColor"
               :disabled="!badgeColorPicker"
               :default-value="badgeBgColor"
+              :aria-label="t('clusterBadge.modal.badgeBgColorInput')"
             />
           </div>
         </div>

package/dialog/DeactivateDriverDialog.vue

@@ -31,12 +31,12 @@ export default {
   },
   computed: {
     formattedText() {
-      const namesSliced = this.drivers.map((obj) => obj.nameDisplay);
-      const count = namesSliced.length;
-      const remaining = namesSliced.length > 5 ? namesSliced.length - 5 : 0;
+      const driverNames = this.drivers.map((obj) => obj.nameDisplay);
+      const count = driverNames.length;
+      const remaining = driverNames.length > 5 ? driverNames.length - 5 : 0;
 
       const plusMore = this.t('drivers.deactivate.andOthers', { count: remaining });
-      const names = resourceNames(namesSliced, this.t, { plusMore, endString: false });
+      const names = resourceNames(driverNames, plusMore, this.t, false);
       const warningDrivers = this.t('drivers.deactivate.warningDrivers', { names, count });
 
       return this.t('drivers.deactivate.warning', { warningDrivers, count });
@@ -91,6 +91,7 @@ export default {
           :key="i"
           color="error"
           :label="err"
+          data-testid="deactivate-driver-error-banner"
         />
       </div>
     </template>

package/dialog/ForceMachineRemoveDialog.vue

@@ -88,16 +88,19 @@ export default {
           {{ t('promptForceRemove.confirmName') }}
         </div>
         <div class="mb-10">
-          <CopyToClipboardText :text="nameToMatch" />
+          <CopyToClipboardText
+            :aria-label="t('promptForceRemove.ariaLabel')"
+            :text="nameToMatch"
+          />
         </div>
         <input
           id="confirm"
           v-model="confirmName"
           type="text"
         >
-        <div class="text-info mt-20">
+        <!-- <div class="text-info mt-20">
           {{ protip }}
-        </div>
+        </div> -->
         <Banner
           v-for="(error, i) in errors"
           :key="i"

package/dialog/GitRepoForceUpdateDialog.vue

@@ -84,7 +84,7 @@ export default {
     <template #body>
       <div class="mb-20">
         {{ t('fleet.gitRepo.actions.forceUpdate.promptNames') }} <span
-          v-clean-html="resourceNames(names, t)"
+          v-clean-html="resourceNames(names, null, t)"
           class="body"
         />
       </div>

package/dialog/ScalePoolDownDialog.vue

@@ -91,9 +91,9 @@ export default {
             @update:value="update()"
           />
         </div>
-        <div class="text-info mt-20">
+        <!-- <div class="text-info mt-20">
           {{ protip }}
-        </div>
+        </div> -->
       </div>
     </template>
     <template #actions>

package/edit/__tests__/monitoring.coreos.com.prometheusrule.test.ts

@@ -2,14 +2,23 @@ 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 { createStore } from 'vuex';
 
 describe('edit: management.cattle.io.setting should', () => {
   const MOCKED_ERRORS = ['error1', 'error2', 'error3', 'error4', 'error5'];
   const ERROR_BANNER_SELECTOR = '[data-testid="banner-close"]';
+  const store = createStore({
+    getters: {
+      namespaces:                () => () => ({}),
+      currentStore:              () => () => 'current_store',
+      'current_store/schemaFor': () => jest.fn()
+    }
+  });
   const requiredSetup = () => ({
     // Remove all these mocks after migration to Vue 2.7/3 due mixin logic
     global: {
-      mocks: {
+      provide: { store },
+      mocks:   {
         $store: {
           dispatch: jest.fn(),
           getters:  {
@@ -35,8 +44,12 @@ describe('edit: management.cattle.io.setting should', () => {
         canYaml:  false,
         mode:     _EDIT,
         resource: {},
-        value:    { value: 'anything' },
-        name:     ''
+        value:    {
+          setAnnotation: jest.fn(),
+          value:         'anything',
+          metadata:      {},
+        },
+        name: ''
       },
       ...requiredSetup()
     });