@rancher/shell 3.0.12-rc.5 → 3.0.12-rc.7

package/pages/c/_cluster/explorer/workload-dashboard/composable.ts

@@ -3,7 +3,7 @@ import {
 } from 'vue';
 import { useStore } from 'vuex';
 import { useRouter, type RouteLocationRaw } from 'vue-router';
-import { NAMESPACE } from '@shell/config/types';
+import { NAMESPACE, WORKLOAD_TYPES } from '@shell/config/types';
 import type { StateColor } from '@shell/utils/style';
 import { useI18n } from '@shell/composables/useI18n';
 import { useStateColor } from '@shell/composables/useStateColor';
@@ -26,6 +26,15 @@ import {
   type WorkloadDashboardByNamespaceCard,
 } from './types';
 
+const WORKLOAD_DASHBOARD_ROUTE = 'c-cluster-explorer-workload-dashboard';
+
+/**
+ * Singleton (module-level) cache of cluster ids whose workload summary responses
+ * have been found to be malformed. Once a cluster is flagged we skip re-fetching
+ * and redirect straight away. Held in memory only, so it is cleared on reload.
+ */
+const invalidDataClusters = new Set<string>();
+
 export function useWorkloadDashboard() {
   const store = useStore();
   const router = useRouter();
@@ -344,12 +353,57 @@ export function useWorkloadDashboard() {
 
   // ── Fetching & polling ──
 
+  /**
+   * Validates the shape of a successfully fetched response.
+   * - An empty/absent summary is only valid when there is also no `data`
+   *   (a populated `data` with no summary means we got the wrong response).
+   * - When a summary is present, every state entry under `counts` must
+   *   include a `total`; a count key without `total` is invalid.
+   */
+  function isValidResponse(res: { summary?: WorkloadDashboardSummaryEntry['summary']; data?: unknown }): boolean {
+    const summary = res?.summary;
+
+    if (!Array.isArray(summary) || summary.length === 0) {
+      // With no summary, the response is only valid when there is also no data.
+      return Array.isArray(res?.data) ? res.data.length === 0 : !res?.data;
+    }
+
+    return summary.every((item) => Object.values(item.counts || {})
+      .every((detail) => typeof detail?.total === 'number'));
+  }
+
+  function redirectToDeployment(): void {
+    // The redirect can fire from an async fetch or poll that resolves after the
+    // user has already navigated away — only redirect if still on the dashboard.
+    if (router.currentRoute.value.name !== WORKLOAD_DASHBOARD_ROUTE) {
+      return;
+    }
+
+    // Logged to help triage "where's my workload summary page?" style questions:
+    // the summary response was malformed, so we fall back to the deployments list.
+    console.info(`Workload dashboard: unexpected summary response for cluster "${ clusterId.value }", redirecting to the deployments list.`); // eslint-disable-line no-console
+
+    stopPollTimer();
+    router.push(resourceRoute(WORKLOAD_TYPES.DEPLOYMENT));
+  }
+
   async function fetchSummaries(): Promise<void> {
+    // If this cluster's data was already found to be malformed, skip the requests
+    // and redirect straight away (cleared on reload via the in-memory singleton).
+    if (invalidDataClusters.has(clusterId.value)) {
+      redirectToDeployment();
+
+      return;
+    }
+
     try {
       const accessibleTypes = WORKLOAD_RESOURCE_TYPES.filter(
         (type) => store.getters['cluster/canList'](type)
       );
 
+      // Set when a successfully fetched response has an unexpected shape.
+      let hasInvalidResponse = false;
+
       const workloadPromises = accessibleTypes.map(async(type): Promise<WorkloadDashboardSummaryEntry> => {
         try {
           let url = `${ store.getters['cluster/urlFor'](type) }`;
@@ -361,6 +415,10 @@ export function useWorkloadDashboard() {
 
           const res = await store.dispatch('cluster/request', { url });
 
+          if (!hasInvalidResponse && !isValidResponse(res)) {
+            hasInvalidResponse = true;
+          }
+
           return {
             type, summary: res.summary || [], error: null
           };
@@ -375,6 +433,16 @@ export function useWorkloadDashboard() {
 
       const results = await Promise.all(workloadPromises);
 
+      // Only successful responses are validated (errors are caught above). If any
+      // had an unexpected shape, remember it so we skip future requests, then
+      // stop polling and redirect to the deployment list page.
+      if (hasInvalidResponse) {
+        invalidDataClusters.add(clusterId.value);
+        redirectToDeployment();
+
+        return;
+      }
+
       await resolveStateColors(results);
       summaries.value = results;
       fetchError.value = null;

package/pages/c/_cluster/fleet/index.vue

@@ -322,19 +322,15 @@ export default {
       this.selectedCard = selected;
 
       this.$shell.slideIn.open(ResourceDetails, {
-        showHeader: false,
-        props:      {
+        props: {
           value,
           statePanel,
           workspace
         },
-        width:              '73%',
-        // We want this to be full viewport height top to bottom
-        height:             '100vh',
-        top:                '0',
-        'z-index':          101, // We want this to be above the main side menu
-        closeOnRouteChange: ['name', 'params', 'query'], // We want to ignore hash changes, tables in extensions can trigger the drawer to close while opening
-        triggerFocusTrap:   false,
+        width:              'wide',
+        height:             'full',
+        closeOnRouteChange: ['name', 'params', 'query'],
+        disableFocusTrap:   true,
       });
     },
 

package/pages/c/_cluster/monitoring/index.vue

@@ -106,7 +106,12 @@ export default {
         const grafanaMatch = findBy(externalLinks, 'group', 'grafana');
         // Generate Grafana link
         const currentCluster = this.$store.getters['currentCluster'];
-        const rancherMonitoring = !isEmpty(res.apps) ? findBy(res.apps, 'id', 'cattle-monitoring-system/rancher-monitoring') : '';
+        let rancherMonitoring = !isEmpty(res.apps) ? findBy(res.apps, 'id', 'cattle-monitoring-system/rancher-monitoring-dashboards') : '';
+
+        if (!rancherMonitoring) {
+          rancherMonitoring = !isEmpty(res.apps) ? findBy(res.apps, 'id', 'cattle-monitoring-system/rancher-monitoring') : '';
+        }
+
         const clusterPrefix = getClusterPrefix(rancherMonitoring?.currentVersion || '', currentCluster.id);
 
         grafanaMatch.link = `${ clusterPrefix }/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/`;

package/pkg/vue.config.js

@@ -91,9 +91,10 @@ module.exports = function(dir) {
       // These modules will be externalised and not included with the build of a package library
       // This helps reduce the package size, but these dependencies must be provided by the hosting application
       config.externals = {
-        jquery:    '$',
-        jszip:     '__jszip',
-        'js-yaml': '__jsyaml'
+        jquery:       '$',
+        jszip:        '__jszip',
+        'js-yaml':    '__jsyaml',
+        'vue-router': '__vueRouter'
       };
 
       // Prevent warning in log with the md files in the content folder

package/plugins/codemirror.js

@@ -27,6 +27,8 @@ import 'codemirror/addon/hint/show-hint.css';
 import 'codemirror/addon/hint/show-hint.js';
 import 'codemirror/addon/hint/anyword-hint.js';
 
+import 'codemirror/addon/comment/comment.js';
+
 import { strPad } from '@shell/utils/string';
 
 function isLineComment(cm, lineNo) {

package/plugins/dashboard-store/resource-class.js

@@ -932,12 +932,9 @@ export default class Resource {
       componentProps: {
         resource:           this,
         onClose,
-        width:              '73%',
-        // We want this to be full viewport height top to bottom
-        height:             '100vh',
-        top:                '0',
-        'z-index':          101, // We want this to be above the main side menu
-        closeOnRouteChange: ['name', 'params', 'query'], // We want to ignore hash changes, tables in extensions can trigger the drawer to close while opening
+        width:              'wide',
+        height:             'full',
+        closeOnRouteChange: ['name', 'params', 'query'],
         triggerFocusTrap:   true,
         returnFocusSelector,
         defaultTab
@@ -1253,8 +1250,11 @@ export default class Resource {
 
   async _save(opt = { }) {
     const forNew = !this.id;
+    let errors;
 
-    const errors = this.validationErrors(this, opt);
+    if (!opt.skipUIValidation) {
+      errors = this.validationErrors(this, opt);
+    }
 
     if (!isEmpty(errors)) {
       return Promise.reject(errors);
@@ -1294,7 +1294,9 @@ export default class Resource {
     // @TODO remove this once the API maps steve _type <-> k8s type in both directions
     // `JSON.parse(JSON.stringify` - Completely disconnect the object we're going to send and `this`. This ensures that properties
     // removed from opt.data before sending (as part of cleanForSave) are not stripped from where they're still needed (`this`)
-    opt.data = this.toSave() || JSON.parse(JSON.stringify(this));
+    if (!(opt.method === 'patch')) {
+      opt.data = this.toSave() || JSON.parse(JSON.stringify(this));
+    }
 
     if (opt.data._type) {
       opt.data.type = opt.data._type;
@@ -1312,7 +1314,9 @@ export default class Resource {
       opt.data.annotations = opt.data._annotations;
     }
 
-    opt.data = this.cleanForSave(opt.data, forNew);
+    if (!(opt.method === 'patch')) {
+      opt.data = this.cleanForSave(opt.data, forNew);
+    }
 
     // handle "replace" opt as a query param _replace=true for norman PUT requests
     if (opt?.replace && opt.method === 'put') {

package/plugins/steve/__tests__/steve-class-resource-api.test.ts

@@ -0,0 +1,147 @@
+import {
+  describe, it, expect, jest, beforeEach, afterEach
+} from '@jest/globals';
+import Steve from '@shell/plugins/steve/steve-class.js';
+
+describe('class: Steve — ResourceInstanceApi methods', () => {
+  let consoleErrorSpy: any;
+
+  beforeEach(() => {
+    consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    consoleErrorSpy.mockRestore();
+  });
+
+  function createSteveModel(overrides: Record<string, any> = {}) {
+    const dispatch = jest.fn<any, any[]>();
+
+    dispatch.mockResolvedValue(undefined);
+
+    // @ts-expect-error - JS class without TS declarations
+    const model = new Steve({
+      type:     'configmap',
+      id:       'default/my-config',
+      metadata: { name: 'my-config', namespace: 'default' },
+      links:    { update: 'https://rancher/v1/configmaps/default/my-config', self: 'https://rancher/v1/configmaps/default/my-config' },
+      ...overrides,
+    }, {
+      getters: {
+        schemaFor:       () => ({ linkFor: jest.fn() }),
+        keyFieldForType: () => 'id',
+      },
+      dispatch,
+      rootGetters: {
+        'i18n/t':              jest.fn(),
+        'type-map/optionsFor': () => ({
+          isEditable: true, isRemovable: true, isCreatable: true
+        }),
+        'type-map/hasCustomEdit': () => true,
+      },
+    });
+
+    return { model: model as any, dispatch };
+  }
+
+  describe('update', () => {
+    it('should send a merge-patch request and load the response into the store', async() => {
+      const patchResponse = {
+        type: 'configmap', id: 'default/my-config', kind: 'ConfigMap', data: { key: 'patched' }
+      };
+      const { model, dispatch } = createSteveModel();
+
+      dispatch
+        .mockResolvedValueOnce(patchResponse)
+        .mockResolvedValueOnce(undefined);
+
+      const result = await model.update({ data: { key: 'patched' } });
+
+      expect(result).toStrictEqual(model);
+      expect(dispatch).toHaveBeenCalledWith('request', {
+        opt: expect.objectContaining({
+          url:     'https://rancher/v1/configmaps/default/my-config',
+          method:  'patch',
+          headers: expect.objectContaining({ 'content-type': 'application/strategic-merge-patch+json' }),
+          data:    { data: { key: 'patched' } },
+        }),
+        type: 'configmap'
+      });
+      expect(dispatch).toHaveBeenCalledWith('load', expect.objectContaining({
+        data:                patchResponse,
+        invalidatePageCache: false,
+      }));
+    });
+
+    it('should not call load when response is a Table', async() => {
+      const tableResponse = { kind: 'Table', rows: [] };
+      const { model, dispatch } = createSteveModel();
+
+      dispatch.mockResolvedValueOnce(tableResponse);
+
+      await model.update({ data: { key: 'value' } });
+
+      expect(dispatch).toHaveBeenCalledTimes(1);
+      expect(dispatch).not.toHaveBeenCalledWith('load', expect.anything());
+    });
+
+    it('should throw when canEdit is false', async() => {
+      const { model, dispatch } = createSteveModel({ links: {} });
+
+      await expect(model.update({ data: {} })).rejects.toThrow(
+        'ResourceInstance API error - configmap/default/my-config - Cannot patch: permission denied'
+      );
+      expect(dispatch).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('replace', () => {
+    it('should call save() and return the instance', async() => {
+      const { model, dispatch } = createSteveModel();
+
+      dispatch.mockResolvedValueOnce(undefined);
+
+      const result = await model.replace();
+
+      expect(result).toStrictEqual(model);
+      expect(dispatch).toHaveBeenCalledWith('request', expect.objectContaining({ opt: expect.objectContaining({ method: 'put' }) }));
+    });
+
+    it('should throw when canEdit is false', async() => {
+      const { model, dispatch } = createSteveModel({ links: {} });
+
+      await expect(model.replace()).rejects.toThrow(
+        'ResourceInstance API error - configmap/default/my-config - Cannot update: permission denied'
+      );
+      expect(dispatch).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('delete', () => {
+    it('should call remove()', async() => {
+      const { model, dispatch } = createSteveModel({
+        links: {
+          update: 'https://rancher/v1/configmaps/default/my-config',
+          self:   'https://rancher/v1/configmaps/default/my-config',
+          remove: 'https://rancher/v1/configmaps/default/my-config',
+        }
+      });
+
+      dispatch.mockResolvedValueOnce({ _status: 204 });
+      dispatch.mockResolvedValueOnce(undefined);
+
+      await model.delete();
+
+      expect(dispatch).toHaveBeenCalledWith('request', expect.objectContaining({ opt: expect.objectContaining({ method: 'delete' }) }));
+    });
+
+    it('should throw when canDelete is false', async() => {
+      const { model, dispatch } = createSteveModel({ links: {} });
+
+      await expect(model.delete()).rejects.toThrow(
+        'ResourceInstance API error - configmap/default/my-config - Cannot delete: permission denied'
+      );
+      expect(dispatch).not.toHaveBeenCalled();
+    });
+  });
+});

package/plugins/steve/steve-class.js

@@ -91,4 +91,47 @@ export default class SteveModel extends HybridModel {
       }
     }
   }
+
+  /**
+   * RESOURCES API - ResourceInstance update method to send a PATCH request
+   */
+  async update(data) {
+    if (!this.canEdit) {
+      throw new Error(`ResourceInstance API error - ${ this.type }/${ this.id } - Cannot patch: permission denied`);
+    }
+
+    console.error('Updating instance with data:', data); // eslint-disable-line no-console
+
+    await this.save({
+      data,
+      method:  'patch',
+      headers: { 'content-type': 'application/strategic-merge-patch+json' }
+    });
+
+    return this;
+  }
+
+  /**
+   * RESOURCES API - ResourceInstance update method to send a PUT request
+   */
+  async replace() {
+    if (!this.canEdit) {
+      throw new Error(`ResourceInstance API error - ${ this.type }/${ this.id } - Cannot update: permission denied`);
+    }
+
+    await this.save();
+
+    return this;
+  }
+
+  /**
+   * RESOURCES API - ResourceInstance delete method to send a DELETE request
+   */
+  async delete() {
+    if (!this.canDelete) {
+      throw new Error(`ResourceInstance API error - ${ this.type }/${ this.id } - Cannot delete: permission denied`);
+    }
+
+    await this.remove();
+  }
 }

package/plugins/steve/subscribe.js

@@ -834,6 +834,17 @@ const defaultActions = {
     state.debugSocket && console.debug(`Subscribe Flush [${ getters.storeName }]`, queue.length, 'items'); // eslint-disable-line no-console
 
     for ( const { action, event, body } of queue ) {
+      const havePage = getters['havePage'](body?.type);
+
+      if (havePage) {
+        // eslint-disable-next-line no-console
+        console.warn(`Prevented watch \`flush\` data from polluting the cache for type "${ body?.type }" (currently represents a page)`, {
+          action, event, body
+        });
+
+        continue;
+      }
+
       if ( action === 'dispatch' && event === 'load' ) {
         // Group loads into one loadMulti when possible
         toLoad.push(body);

package/rancher-components/Form/LabeledInput/LabeledInput.test.ts

@@ -57,6 +57,121 @@ describe('component: LabeledInput', () => {
     });
   });
 
+  describe('type "integer"', () => {
+    const i18nMock = { $store: { getters: { 'i18n/t': jest.fn() } } };
+
+    it('should render a text input with numeric inputmode', () => {
+      const wrapper = mount(LabeledInput, {
+        propsData: { type: 'integer', value: '' },
+        mocks:     i18nMock
+      });
+      const input = wrapper.find('input');
+
+      expect(input.attributes('type')).toBe('text');
+      expect(input.attributes('inputmode')).toBe('numeric');
+    });
+
+    it.each([
+      'e', 'E', '.', '+',
+    ])('should prevent non-integer key "%s"', (key) => {
+      const wrapper = mount(LabeledInput, {
+        propsData: { type: 'integer', value: '' },
+        mocks:     i18nMock
+      });
+      const input = wrapper.find('input');
+      const event = new KeyboardEvent('keydown', { key, cancelable: true });
+
+      input.element.dispatchEvent(event);
+
+      expect(event.defaultPrevented).toBe(true);
+    });
+
+    it.each([
+      '0', '1', '9', '-', 'Backspace', 'Tab', 'ArrowLeft',
+    ])('should allow key "%s"', (key) => {
+      const wrapper = mount(LabeledInput, {
+        propsData: { type: 'integer', value: '' },
+        mocks:     i18nMock
+      });
+      const input = wrapper.find('input');
+      const event = new KeyboardEvent('keydown', { key, cancelable: true });
+
+      input.element.dispatchEvent(event);
+
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    it('should also block "-" when min="0"', () => {
+      const wrapper = mount(LabeledInput, {
+        propsData: { type: 'integer', value: '' },
+        attrs:     { min: '0' },
+        mocks:     i18nMock
+      });
+      const input = wrapper.find('input');
+      const event = new KeyboardEvent('keydown', { key: '-', cancelable: true });
+
+      input.element.dispatchEvent(event);
+
+      expect(event.defaultPrevented).toBe(true);
+    });
+
+    function createPasteEvent(text: string): Event {
+      const event = new Event('paste', { cancelable: true });
+
+      (event as Event & { clipboardData: Pick<DataTransfer, 'getData'> }).clipboardData = { getData: () => text };
+
+      return event;
+    }
+
+    it.each([
+      '123',
+      '-5',
+    ])('should allow pasting valid integer "%s"', (text) => {
+      const wrapper = mount(LabeledInput, {
+        propsData: { type: 'integer', value: '' },
+        mocks:     i18nMock
+      });
+      const input = wrapper.find('input');
+      const event = createPasteEvent(text);
+
+      input.element.dispatchEvent(event);
+
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    it.each([
+      '-e10',
+      '1.5',
+      '12abc',
+      '1e5',
+    ])('should block pasting invalid integer "%s"', (text) => {
+      const wrapper = mount(LabeledInput, {
+        propsData: { type: 'integer', value: '' },
+        mocks:     i18nMock
+      });
+      const input = wrapper.find('input');
+      const event = createPasteEvent(text);
+
+      input.element.dispatchEvent(event);
+
+      expect(event.defaultPrevented).toBe(true);
+    });
+
+    it('should block pasting negative integer when min="0"', () => {
+      const wrapper = mount(LabeledInput, {
+        propsData: { type: 'integer', value: '' },
+        attrs:     { min: '0' },
+        mocks:     i18nMock
+      });
+      const input = wrapper.find('input');
+      const event = createPasteEvent('-5');
+
+      input.element.dispatchEvent(event);
+
+      expect(event.defaultPrevented).toBe(true);
+    });
+  });
+
   describe('a11y: adding ARIA props', () => {
     const ariaLabelVal = 'some-aria-label';
     const subLabelVal = 'some-sublabel';