@rancher/shell 3.0.8 → 3.0.9-rc.2

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

@@ -33,12 +33,14 @@ import forIn from 'lodash/forIn';
 import isEmpty from 'lodash/isEmpty';
 import isFunction from 'lodash/isFunction';
 import isString from 'lodash/isString';
-import { markRaw } from 'vue';
+import { defineAsyncComponent, markRaw } from 'vue';
 
 import { handleConflict } from '@shell/plugins/dashboard-store/normalize';
 import { ExtensionPoint, ActionLocation } from '@shell/core/types';
 import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
 import { parse } from '@shell/utils/selector';
+import { EVENT } from '@shell/config/types';
+import { useResourceCardRow } from '@shell/components/Resource/Detail/Card/StateCard/composables';
 
 export const DNS_LIKE_TYPES = ['dnsLabel', 'dnsLabelRestricted', 'hostname'];
 
@@ -1383,6 +1385,49 @@ export default class Resource {
     return this._detailLocation;
   }
 
+  /**
+   * Override this getter to provide additional action buttons or a custom component
+   * for the detail page title bar.
+   *
+   * @returns {undefined|object|Array} A Vue component definition, an array of RcButton props, or undefined
+   *
+   * @example
+   * // Using an array of button props with the new variant/size props
+   * get detailPageAdditionalActions() {
+   *   return [
+   *     { label: 'Action 1', variant: 'secondary', onClick: () => this.doAction1() },
+   *     { label: 'Action 2', variant: 'primary', size: 'large', onClick: () => this.doAction2() }
+   *   ];
+   * }
+   *
+   * @example
+   * // Using defineComponent with h() render function for custom rendering
+   * import { defineComponent, h } from 'vue';
+   * import RcButton from '@components/RcButton/RcButton.vue';
+   *
+   * get detailPageAdditionalActions() {
+   *   return defineComponent({
+   *     render() {
+   *       return h(RcButton, {
+   *         variant: 'primary',
+   *         onClick: () => console.log('clicked')
+   *       }, () => 'Click Me');
+   *     }
+   *   });
+   * }
+   *
+   * @example
+   * // Using dynamic import for a custom component
+   * import { defineAsyncComponent } from 'vue';
+   *
+   * get detailPageAdditionalActions() {
+   *   return defineAsyncComponent(() => import('@shell/components/MyCustomActions.vue'));
+   * }
+   */
+  get detailPageAdditionalActions() {
+    return undefined;
+  }
+
   goToDetail() {
     this.currentRouter().push(this.detailLocation);
   }
@@ -2091,4 +2136,55 @@ export default class Resource {
   get yamlFolding() {
     return [];
   }
+
+  get resourceConditions() {
+    return (this.status?.conditions || []).map((cond) => {
+      let message = cond.message || '';
+
+      if ( cond.reason ) {
+        message = `[${ cond.reason }] ${ message }`.trim();
+      }
+
+      return {
+        condition:        cond.type || 'Unknown',
+        status:           cond.status || 'Unknown',
+        stateSimpleColor: cond.error ? 'error' : 'disabled',
+        error:            cond.error,
+        time:             cond.lastProbeTime || cond.lastUpdateTime || cond.lastTransitionTime,
+        message,
+      };
+    });
+  }
+
+  get resourceEvents() {
+    return this.$rootGetters['cluster/all'](EVENT)
+      .filter((e) => e.involvedObject?.uid === this.metadata?.uid);
+  }
+
+  get insightCardProps() {
+    const rows = [
+      useResourceCardRow(this.t('component.resource.detail.card.insightsCard.rows.conditions'), this.resourceConditions, undefined, 'condition', '#conditions'),
+      useResourceCardRow(this.t('component.resource.detail.card.insightsCard.rows.events'), this.resourceEvents, undefined, undefined, '#events'),
+    ];
+
+    return {
+      title: this.t('component.resource.detail.card.insightsCard.title'),
+      rows
+    };
+  }
+
+  get insightCard() {
+    return {
+      component: markRaw(defineAsyncComponent(() => import('@shell/components/Resource/Detail/Card/StateCard/index.vue'))),
+      props:     this.insightCardProps
+    };
+  }
+
+  get _cards() {
+    return [this.insightCard];
+  }
+
+  get cards() {
+    return this._cards;
+  }
 }

package/plugins/steve/__tests__/revision.test.ts

@@ -0,0 +1,84 @@
+import { SteveRevision } from '../revision';
+
+describe('class: SteveRevision', () => {
+  describe('constructor', () => {
+    it('should correctly parse a numeric string', () => {
+      const rev = new SteveRevision('123');
+
+      expect(rev.asNumber).toBe(123);
+      expect(rev.isNumber).toBe(true);
+    });
+
+    it('should correctly parse a number', () => {
+      const rev = new SteveRevision(456);
+
+      expect(rev.asNumber).toBe(456);
+      expect(rev.isNumber).toBe(true);
+    });
+
+    it('should handle non-numeric strings', () => {
+      const rev = new SteveRevision('abc');
+
+      expect(rev.asNumber).toBeNaN();
+      expect(rev.isNumber).toBe(false);
+    });
+
+    it('should handle undefined', () => {
+      const rev = new SteveRevision(undefined);
+
+      expect(rev.asNumber).toBeNaN();
+      expect(rev.isNumber).toBe(false);
+    });
+  });
+
+  describe('method: isNewerThan', () => {
+    it('should return true if current revision is greater than provided revision', () => {
+      const r1 = new SteveRevision('10');
+      const r2 = new SteveRevision('5');
+
+      expect(r1.isNewerThan(r2)).toBe(true);
+    });
+
+    it('should return false if current revision is less than provided revision', () => {
+      const r1 = new SteveRevision('5');
+      const r2 = new SteveRevision('10');
+
+      expect(r1.isNewerThan(r2)).toBe(false);
+    });
+
+    it('should return false if revisions are equal', () => {
+      const r1 = new SteveRevision('10');
+      const r2 = new SteveRevision('10');
+
+      expect(r1.isNewerThan(r2)).toBe(false);
+    });
+
+    it('should return false if current revision is not a number', () => {
+      const r1 = new SteveRevision('abc');
+      const r2 = new SteveRevision('10');
+
+      expect(r1.isNewerThan(r2)).toBe(false);
+    });
+
+    it('should return false if provided revision is not a number', () => {
+      const r1 = new SteveRevision('10');
+      const r2 = new SteveRevision('abc');
+
+      expect(r1.isNewerThan(r2)).toBe(false);
+    });
+
+    it('should return false if current revision is undefined', () => {
+      const r1 = new SteveRevision(undefined);
+      const r2 = new SteveRevision('10');
+
+      expect(r1.isNewerThan(r2)).toBe(false);
+    });
+
+    it('should return false if provided revision is undefined', () => {
+      const r1 = new SteveRevision('10');
+      const r2 = new SteveRevision(undefined);
+
+      expect(r1.isNewerThan(r2)).toBe(false);
+    });
+  });
+});

package/plugins/steve/__tests__/steve-pagination-utils.test.ts

@@ -477,6 +477,20 @@ describe('class StevePaginationUtils', () => {
       expect(result).toBe('filter=spec.containers.image~nginx&filter=metadata.name!=test');
     });
 
+    it.each([
+      ['test', 'test'],
+      ['-test', '"-test"'],
+      ['te-st', '"te-st"'],
+      ['test-', '"test-"'],
+    ])('should handle filter value %s with hyphens', (x, y) => {
+      const filters = [
+        new PaginationParamFilter({ fields: [new PaginationFilterField({ field: 'metadata.name', value: x })] }),
+      ];
+      const result = testStevePaginationUtils.convertPaginationParams({ schema, filters });
+
+      expect(result).toBe(`filter=metadata.name=${ y }`);
+    });
+
     it('should handle IN and NOT_IN operators', () => {
       const filters = [
         new PaginationParamFilter({
@@ -502,5 +516,21 @@ describe('class StevePaginationUtils', () => {
 
       expect(result).toBe('filter=metadata.name IN (test1,test2)&filter=metadata.namespace NOTIN (ns1,ns2)');
     });
+
+    it.each([
+      [null, '""'],
+      [undefined, '""'],
+      [false, 'false'],
+      [true, 'true'],
+      [0, '0'],
+      [1, '1'],
+    ])('should handle falsy filter value %s', (x: any, y) => {
+      const filters = [
+        new PaginationParamFilter({ fields: [new PaginationFilterField({ field: 'metadata.name', value: x })] }),
+      ];
+      const result = testStevePaginationUtils.convertPaginationParams({ schema, filters });
+
+      expect(result).toBe(`filter=metadata.name=${ y }`);
+    });
   });
 });

package/plugins/steve/__tests__/subscribe.spec.ts

@@ -3,6 +3,7 @@ import { REVISION_TOO_OLD } from '../../../utils/socket';
 import { STEVE_WATCH_MODE } from '../../../types/store/subscribe.types';
 import backOff from '../../../utils/back-off';
 import { SteveWatchEventListenerManager } from '../../subscribe-events';
+import { STEVE_RESPONSE_CODE } from '../../../types/rancher/steve.api';
 
 describe('steve: subscribe', () => {
   describe('actions', () => {
@@ -110,6 +111,139 @@ describe('steve: subscribe', () => {
         expect(commit).toHaveBeenCalledWith('setInError', { msg, reason: 'NO_PERMS' });
       });
     });
+
+    describe('fetchPageResources', () => {
+      const dispatch = jest.fn();
+      const getters = {
+        backOffId:    jest.fn(),
+        typeEntry:    jest.fn(),
+        canBackoff:   jest.fn(),
+        watchStarted: jest.fn(),
+        inError:      jest.fn(),
+      };
+      let backOffSpy: any;
+      const context = { $socket: {} };
+
+      beforeEach(() => {
+        jest.clearAllMocks();
+        backOffSpy = {
+          getBackOff: jest.spyOn(backOff, 'getBackOff'),
+          reset:      jest.spyOn(backOff, 'reset'),
+          recurse:    jest.spyOn(backOff, 'recurse'),
+        };
+        getters.backOffId.mockReturnValue('backoff-id');
+        getters.typeEntry.mockReturnValue({ revision: '10' });
+        backOffSpy.getBackOff.mockReturnValue({ metadata: { revision: '10' } } as any);
+        backOffSpy.recurse.mockResolvedValue(undefined);
+      });
+
+      afterEach(() => {
+        jest.restoreAllMocks();
+      });
+
+      it('should abort if current revision is newer than target revision', async() => {
+        // Current (10) > Target (5)
+        const params = {
+          resourceType: 'type', namespace: 'ns', revision: '5'
+        };
+
+        await actions.fetchPageResources.call(context, { getters, dispatch }, {
+          opt: {}, storePagination: {}, params
+        });
+
+        expect(backOffSpy.recurse).not.toHaveBeenCalled();
+      });
+
+      it('should reset backoff if target revision is newer than active revision', async() => {
+        // Active (10) < Target (15)
+        const params = {
+          resourceType: 'type', namespace: 'ns', revision: '15'
+        };
+
+        await actions.fetchPageResources.call(context, { getters, dispatch }, {
+          opt: {}, storePagination: {}, params
+        });
+
+        expect(backOffSpy.reset).toHaveBeenCalledWith('backoff-id');
+        expect(backOffSpy.recurse).toHaveBeenCalledWith(expect.objectContaining({
+          id:       'backoff-id',
+          metadata: { revision: '15' }
+        }));
+      });
+
+      it('should recurse if revisions are valid', async() => {
+        const params = {
+          resourceType: 'type', namespace: 'ns', revision: '10'
+        };
+
+        await actions.fetchPageResources.call(context, { getters, dispatch }, {
+          opt: {}, storePagination: {}, params
+        });
+
+        expect(backOffSpy.recurse).toHaveBeenCalledWith(expect.objectContaining({
+          id:       'backoff-id',
+          metadata: { revision: '10' }
+        }));
+      });
+
+      describe('recurse options', () => {
+        const params = {
+          resourceType: 'type', namespace: 'ns', revision: '10'
+        };
+        let recurseArgs: any;
+
+        beforeEach(async() => {
+          await actions.fetchPageResources.call(context, { getters, dispatch }, {
+            opt: {}, storePagination: { request: { filter: 'foo' } }, params
+          });
+          recurseArgs = backOffSpy.recurse.mock.calls[0][0];
+        });
+
+        it('canFn should return false if socket closed', () => {
+          getters.canBackoff.mockReturnValue(false);
+          expect(recurseArgs.canFn()).toBe(false);
+          expect(getters.canBackoff).toHaveBeenCalledWith(context.$socket);
+        });
+
+        it('canFn should return false if watch not started and not in REVISION_TOO_OLD error', () => {
+          getters.canBackoff.mockReturnValue(true);
+          getters.watchStarted.mockReturnValue(false);
+          getters.inError.mockReturnValue('some-other-error');
+          expect(recurseArgs.canFn()).toBe(false);
+        });
+
+        it('canFn should return true if watch started', () => {
+          getters.canBackoff.mockReturnValue(true);
+          getters.watchStarted.mockReturnValue(true);
+          expect(recurseArgs.canFn()).toBe(true);
+        });
+
+        it('canFn should return true if watch not started but in REVISION_TOO_OLD error', () => {
+          getters.canBackoff.mockReturnValue(true);
+          getters.watchStarted.mockReturnValue(false);
+          getters.inError.mockReturnValue(REVISION_TOO_OLD);
+          expect(recurseArgs.canFn()).toBe(true);
+        });
+
+        it('continueOnError should return true for UNKNOWN_REVISION error', async() => {
+          const err = { status: 400, code: STEVE_RESPONSE_CODE.UNKNOWN_REVISION };
+
+          expect(await recurseArgs.continueOnError(err)).toBe(true);
+        });
+
+        it('delayedFn should dispatch findPage', async() => {
+          await recurseArgs.delayedFn();
+          expect(dispatch).toHaveBeenCalledWith('findPage', {
+            type: 'type',
+            opt:  {
+              namespaced: 'ns',
+              revision:   '10',
+              filter:     'foo'
+            }
+          });
+        });
+      });
+    });
   });
 
   describe('getters', () => {

package/plugins/steve/mutations.js

@@ -180,6 +180,15 @@ export default {
   * Load multiple different types of resources
   */
   loadMulti(state, { data, ctx }) {
+    const type = data[0]?.type;
+    const cache = state.types[type];
+
+    if (cache?.havePage) {
+      console.warn(`Prevented \`loadMulti\` mutation from polluting the cache for type "${ type }" (currently represents a page).`); // eslint-disable-line no-console
+
+      return;
+    }
+
     for (const entry of data) {
       const resource = load(state, { data: entry, ctx });
 

package/plugins/steve/revision.ts

@@ -0,0 +1,26 @@
+/**
+ * Helper class to handle Steve API revisions comparisons
+ */
+export class SteveRevision {
+  public asNumber: number;
+  public isNumber: boolean;
+
+  constructor(public revision: any) {
+    this.asNumber = Number(revision);
+    this.isNumber = !Number.isNaN(this.asNumber);
+  }
+
+  /**
+   * Is this provided revision newer than this revision?
+   *
+   * @param revision
+   * @returns
+   */
+  isNewerThan(revision: SteveRevision): boolean {
+    return SteveRevision.areAllNumbers([this, revision]) && this.asNumber > revision.asNumber;
+  }
+
+  private static areAllNumbers(revisions: SteveRevision[]): boolean {
+    return revisions.every((r) => r.isNumber);
+  }
+}

package/plugins/steve/steve-pagination-utils.ts

@@ -213,9 +213,9 @@ class StevePaginationUtils extends NamespaceProjectFilters {
    * Match
    * - a-z (case insensitive)
    * - 0-9
-   * - `-`, `_`, `.`
+   * - `_`, `.`
    */
-  static VALID_FIELD_VALUE_REGEX = /^[\w\-.]+$/;
+  static VALID_FIELD_VALUE_REGEX = /^[\w.]+$/;
 
   /**
    * Filtering with the vai cache supports specific fields
@@ -596,10 +596,11 @@ class StevePaginationUtils extends NamespaceProjectFilters {
               if ([PaginationFilterEquality.IN, PaginationFilterEquality.NOT_IN].includes(equality)) {
                 safeValue = `(${ field.value })`;
               } else {
-                const encodedValue = encodeURIComponent(field.value || '');
+                const booleanSafeValue = typeof field.value === 'undefined' || field.value === null ? '' : field.value;
+                const encodedValue = encodeURIComponent(booleanSafeValue);
 
-                if (StevePaginationUtils.VALID_FIELD_VALUE_REGEX.test(field.value || '')) {
-                  // Does not contain any protected characters, send as is
+                if (StevePaginationUtils.VALID_FIELD_VALUE_REGEX.test(booleanSafeValue)) {
+                  // All characters safe, send as is
                   safeValue = encodedValue;
                 } else {
                   // Contains protected characters, wrap in quotes to ensure backend doesn't fail