@rancher/shell 3.0.5-rc.7 → 3.0.5-rc.9

package/pages/home.vue

@@ -22,7 +22,7 @@ import { filterHiddenLocalCluster, filterOnlyKubernetesClusters, paginationFilte
 import TabTitle from '@shell/components/TabTitle.vue';
 import { ActionFindPageArgs } from '@shell/types/store/dashboard-store.types';
 
-import { RESET_CARDS_ACTION, SET_LOGIN_ACTION, SHOW_HIDE_BANNER_ACTION } from '@shell/config/page-actions';
+import { SET_LOGIN_ACTION, SHOW_HIDE_BANNER_ACTION } from '@shell/config/page-actions';
 import { STEVE_NAME_COL, STEVE_STATE_COL } from '@shell/config/pagination-table-headers';
 import { PaginationParamFilter, FilterArgs, PaginationFilterField, PaginationArgs } from '@shell/types/store/pagination.types';
 import ProvCluster from '@shell/models/provisioning.cattle.io.cluster';
@@ -75,10 +75,6 @@ export default defineComponent({
           label:  this.t('nav.header.showHideBanner'),
           action: SHOW_HIDE_BANNER_ACTION
         },
-        {
-          label:  this.t('nav.header.restoreCards'),
-          action: RESET_CARDS_ACTION
-        },
       ],
       vendor: getVendor(),
 
@@ -368,10 +364,6 @@ export default defineComponent({
      */
     handlePageAction(action: any) {
       switch (action.action) {
-      case RESET_CARDS_ACTION:
-        this.resetCards();
-        break;
-
       case SHOW_HIDE_BANNER_ACTION:
         this.toggleBanner();
         break;

package/plugins/dashboard-store/actions.js

@@ -79,6 +79,29 @@ const findAllGetter = (getters, type, opt) => {
   return opt.namespaced ? getters.matching(type, null, opt.namespaced, { skipSelector: true }) : getters.all(type);
 };
 
+const createFindWatchArg = ({
+  type, id, opt, res
+}) => {
+  const revision = typeof opt.revision !== 'undefined' ? opt.revision : res?.metadata?.resourceVersion;
+  const watchMsg = {
+    type,
+    id,
+    // Although not used by sockets, we need this for when resyncWatch calls find... which needs namespace to construct the url
+    namespace: opt.namespaced,
+    revision:  revision || '',
+    force:     opt.forceWatch === true,
+  };
+
+  const idx = id.indexOf('/');
+
+  if ( idx > 0 ) {
+    watchMsg.namespace = id.substr(0, idx);
+    watchMsg.id = id.substr(idx + 1);
+  }
+
+  return watchMsg;
+};
+
 export default {
   request() {
     throw new Error('Not Implemented');
@@ -657,6 +680,12 @@ export default {
       out = getters.byId(type, id);
 
       if ( out ) {
+        if ( opt.watch !== false ) {
+          dispatch('watch', createFindWatchArg({
+            type, id, opt, res: undefined
+          }));
+        }
+
         return out;
       }
     }
@@ -669,26 +698,9 @@ export default {
     await dispatch('load', { data: res });
 
     if ( opt.watch !== false ) {
-      const watchMsg = {
-        type,
-        id,
-        // Although not used by sockets, we need this for when resyncWatch calls find... which needs namespace to construct the url
-        namespace: opt.namespaced,
-        // Override the revision. Used in cases where we need to avoid using the resource's own revision which would be `too old`.
-        // For the above case opt.revision will be `null`. If left as `undefined` the subscribe mechanism will try to determine a revision
-        // from resources in store (which would be this one, with the too old revision)
-        revision:  typeof opt.revision !== 'undefined' ? opt.revision : res?.metadata?.resourceVersion,
-        force:     opt.forceWatch === true,
-      };
-
-      const idx = id.indexOf('/');
-
-      if ( idx > 0 ) {
-        watchMsg.namespace = id.substr(0, idx);
-        watchMsg.id = id.substr(idx + 1);
-      }
-
-      dispatch('watch', watchMsg);
+      dispatch('watch', createFindWatchArg({
+        type, id, opt, res
+      }));
     }
 
     out = getters.byId(type, id);
@@ -808,13 +820,21 @@ export default {
     return classify(ctx, resource.toJSON(), true);
   },
 
-  // Forget a type in the store
-  // Remove all entries for that type and stop watching it
+  /**
+   * Remove all cached entries for a resource and stop watches
+   */
   forgetType({ commit, dispatch, state }, type, compareWatches) {
+    // Stop all known watches
     state.started
       .filter((entry) => compareWatches ? compareWatches(entry) : entry.type === type)
       .forEach((entry) => dispatch('unwatch', entry));
 
+    // Stop all known back-off watch processes for this type
+    dispatch('resetWatchBackOff', {
+      type, compareWatches, resetStarted: false
+    });
+
+    // Remove entries from store
     commit('forgetType', type);
   },
 

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

@@ -36,6 +36,7 @@ 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 { importDrawer } from '@shell/utils/dynamic-importer';
 
 export const DNS_LIKE_TYPES = ['dnsLabel', 'dnsLabelRestricted', 'hostname'];
 
@@ -859,6 +860,10 @@ export default class Resource {
 
   // ------------------------------------------------------------------
 
+  get canEdit() {
+    return this.canUpdate && this.canCustomEdit;
+  }
+
   get availableActions() {
     const all = this._availableActions;
 
@@ -898,6 +903,26 @@ export default class Resource {
     return out;
   }
 
+  showConfiguration(returnFocusSelector) {
+    const onClose = () => this.$ctx.commit('slideInPanel/close', undefined, { root: true });
+
+    this.$ctx.commit('slideInPanel/open', {
+      component:      importDrawer('ResourceDetailDrawer'),
+      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
+        triggerFocusTrap:   true,
+        returnFocusSelector
+      }
+    }, { root: true });
+  }
+
   // You can add custom actions by overriding your own availableActions (and probably reading super._availableActions)
   get _availableActions() {
     // get menu actions available by plugins configuration
@@ -905,6 +930,12 @@ export default class Resource {
     const extensionMenuActions = getApplicableExtensionEnhancements(this.$rootState, ExtensionPoint.ACTION, ActionLocation.TABLE, currentRoute, this);
 
     const all = [
+      {
+        action:  'showConfiguration',
+        label:   this.t('action.showConfiguration'),
+        icon:    'icon icon-document',
+        enabled: this.disableResourceDetailDrawer !== true && (this.canCustomEdit || this.canYaml), // If the resource can't show an edit or a yaml we don't want to show the configuration drawer
+      },
       { divider: true },
       {
         action:  this.canUpdate ? 'goToEdit' : 'goToViewConfig',
@@ -1816,6 +1847,55 @@ export default class Resource {
     return details;
   }
 
+  get glance() {
+    return this._glance;
+  }
+
+  get _glance() {
+    const type = this.parentNameOverride || this.$rootGetters['type-map/labelFor'](this.schema);
+
+    return [
+      {
+        name:          'state',
+        label:         this.t('component.resource.detail.glance.state'),
+        formatter:     'BadgeStateFormatter',
+        formatterOpts: { row: this },
+        content:       this.stateDisplay
+      },
+      {
+        name:          'type',
+        label:         this.t('component.resource.detail.glance.type'),
+        formatter:     'Link',
+        formatterOpts: {
+          to: this.listLocation, row: {}, options: { internal: true }
+        },
+        content: type
+      },
+      {
+        name:          'namespace',
+        label:         this.t('component.resource.detail.glance.namespace'),
+        formatter:     'Link',
+        formatterOpts: {
+          to: {
+            name:     `c-cluster-product-resource-id`,
+            product:  this.$rootGetters['currentProduct'].id,
+            cluster:  this.$rootGetters['currentCluster'].id,
+            resource: this.type
+          },
+          row:     {},
+          options: { internal: true }
+        },
+        content: this.namespacedName
+      },
+      {
+        name:      'age',
+        label:     this.t('component.resource.detail.glance.age'),
+        formatter: 'LiveDate',
+        content:   this.creationTimestamp
+      }
+    ];
+  }
+
   get t() {
     return this.$rootGetters['i18n/t'];
   }

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

@@ -120,7 +120,7 @@ describe('steve: getters:', () => {
       expect(urlOptionsGetter('/v1/foo', { excludeFields: ['bar'] })).toBe('/v1/foo?exclude=bar');
     });
     it('returns a string without an exclude statement for "managedFields" if omitExcludeFields includes it and the url starts with "/v1/"', () => {
-      expect(urlOptionsGetter('/v1/foo', { omitExcludeFields: ['metadata.managedFields'] })).toBe('/v1/foo?');
+      expect(urlOptionsGetter('/v1/foo', { omitExcludeFields: ['metadata.managedFields'] })).toBe('/v1/foo');
     });
     it('returns a string without an exclude statement if excludeFields is set but the url does not start with "/v1/"', () => {
       expect(urlOptionsGetter('foo', { excludeFields: ['bar'] })).toBe('foo');

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

@@ -1,4 +1,7 @@
-import { actions, getters } from '../subscribe';
+import { actions, getters, mutations } from '../subscribe';
+import { REVISION_TOO_OLD } from '../../../utils/socket';
+import { STEVE_WATCH_EVENT } from '../../../types/store/subscribe.types';
+import backOff from '../../../utils/back-off';
 
 describe('steve: subscribe', () => {
   describe('actions', () => {
@@ -171,4 +174,259 @@ describe('steve: subscribe', () => {
       });
     });
   });
+
+  describe('backoff', () => {
+    const waitForBackOff = async(advanceTimersByTime = 20000) => {
+      jest.advanceTimersByTime(advanceTimersByTime);
+      // jest.advanceTimersByTime(advanceTimersByTime);
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+    };
+
+    describe('stale cache in replicate that handles watch', () => {
+      /**
+        1. ui makes http request.
+          - it's handled by up-to-date replica A
+          - response contains an up-to-date revision X
+        2. ui makes watch request referencing up-to-date revision X from A
+          - it's received by replica B with a stale cache which does not contain revision X.
+          - replicate B rejects watch with unknown revision message (i.e. 'too old')
+        3. ui receives unknown revision and makes a new request
+          - this should backoff until eventually succeeding
+       */
+
+      const startWatch = ({
+        ctx,
+        obj, msg,
+        revision
+      }) => {
+        const {
+          state, dispatch, getters, rootGetters, commit
+        } = ctx;
+
+        // call watch
+        actions.watch({
+          state, dispatch, getters, rootGetters
+        }, {
+          ...obj,
+          revision,
+          mode:  STEVE_WATCH_EVENT.CHANGES,
+          force: true,
+        });
+
+        expect(dispatch).toHaveBeenNthCalledWith(1, 'unwatchIncompatible', {
+          id: undefined, mode: STEVE_WATCH_EVENT.CHANGES, namespace: undefined, selector: undefined, type: obj.type
+        });
+
+        expect(dispatch).toHaveBeenNthCalledWith(2, 'send', {
+          debounceMs:      4000,
+          mode:            'resource.changes',
+          resourceType:    obj.type,
+          resourceVersion: revision.toString(),
+        });
+
+        // Receive start from BE
+        actions['ws.resource.start']({
+          state, dispatch, getters, commit
+        }, { ...msg });
+
+        expect(dispatch).toHaveBeenCalledTimes(2);
+        dispatch.mockClear();
+      };
+
+      const errorWatch = ({
+        ctx,
+        obj, msg,
+      }) => {
+        const {
+          state, dispatch, getters, commit
+        } = ctx;
+
+        // Receive error from BE
+        actions['ws.resource.error']({
+          dispatch, getters, commit
+        }, {
+          ...msg,
+          data: { error: 'too old' }
+        });
+        expect(state.inError).toStrictEqual(
+          {
+            'type=abc,namespace=,id=,selector=': {
+              obj: {
+                type: msg.resourceType,
+                mode: msg.mode,
+              },
+              reason: REVISION_TOO_OLD
+            }
+          }
+        );
+
+        // Receive stop from BE
+        actions['ws.resource.stop']({
+          state, dispatch, getters, commit
+        }, { ...msg });
+        // stop tries to watch again, however we're in error so will be ignored
+        expect(dispatch).toHaveBeenNthCalledWith(1, 'watch', {
+          id: undefined, mode: STEVE_WATCH_EVENT.CHANGES, namespace: undefined, selector: undefined, type: obj.type
+        });
+
+        dispatch.mockClear();
+      };
+
+      const cycleFail = async({
+        ctx,
+        obj, msg,
+        revision,
+        tooManyTries = false,
+      }) => {
+        const { dispatch } = ctx;
+
+        startWatch({
+          ctx, obj, msg, revision
+        });
+        errorWatch({
+          ctx, obj, msg
+        });
+
+        await waitForBackOff(50000);
+        await waitForBackOff(50000);
+
+        if (tooManyTries) {
+          expect(dispatch).toHaveBeenCalledTimes(0);
+        } else {
+          expect(dispatch).toHaveBeenCalledTimes(1);
+          expect(dispatch).toHaveBeenCalledWith('resyncWatch', {
+            ...msg,
+            data: { error: 'too old' }
+          });
+        }
+
+        await waitForBackOff();
+
+        if (tooManyTries) {
+          expect(dispatch).toHaveBeenCalledTimes(0);
+        } else {
+          expect(dispatch).toHaveBeenCalledTimes(1);
+        }
+
+        dispatch.mockClear();
+      };
+
+      const cycleSucceed = async({
+        ctx,
+        obj, msg,
+        revision
+      }) => {
+        const { dispatch } = ctx;
+
+        dispatch.mockImplementation(async(type: string) => {
+          if (type === 'resyncWatch') {
+            return Promise.resolve();
+          }
+        });
+
+        startWatch({
+          ctx, obj, msg, revision
+        });
+
+        await waitForBackOff();
+
+        expect(dispatch).toHaveBeenCalledTimes(0);
+
+        await waitForBackOff();
+
+        expect(dispatch).toHaveBeenCalledTimes(0);
+
+        dispatch.mockClear();
+      };
+
+      const dispatch = jest.fn();
+      const rootGetters = {
+        'type-map/isSpoofed': () => false,
+        'management/byId':    () => ({ value: true })
+      };
+      const obj = { type: 'abc' };
+      const msg = {
+        resourceType: obj.type,
+        mode:         STEVE_WATCH_EVENT.CHANGES,
+      };
+
+      const initStore = () => {
+        const state = { started: [], inError: {} };
+        const _getters = {
+          normalizeType: (type: string) => type,
+          schemaFor:     () => ({}),
+          storeName:     'test',
+          inError:       (...args) => getters.inError(state)(...args),
+          watchStarted:  (...args) => getters.watchStarted(state)(...args),
+          backOffId:     (...args) => getters.backOffId()(...args),
+          canBackoff:    () => true,
+        };
+        const commit = (type, ...args) => mutations[type](state, ...args);
+
+        return {
+          state, dispatch, getters: _getters, rootGetters, commit
+        };
+      };
+
+      beforeAll(() => {
+        jest.useFakeTimers();
+      });
+
+      afterEach(() => {
+        backOff.resetAll();
+        dispatch.mockClear();
+      });
+
+      // eslint-disable-next-line jest/expect-expect
+      it('succeeds', async() => {
+        jest.useFakeTimers();
+
+        const ctx = initStore();
+
+        await cycleSucceed({
+          ctx, msg, obj, revision: 1
+        });
+      });
+
+      // eslint-disable-next-line jest/expect-expect
+      it('succeeds after a few failures', async() => {
+        jest.useFakeTimers();
+
+        const ctx = initStore();
+
+        await cycleFail({
+          ctx, msg, obj, revision: 1
+        });
+        await cycleFail({
+          ctx, msg, obj, revision: 1
+        });
+        await cycleFail({
+          ctx, msg, obj, revision: 1
+        });
+        await cycleFail({
+          ctx, msg, obj, revision: 1
+        });
+        await cycleSucceed({
+          ctx, msg, obj, revision: 1
+        });
+      });
+
+      // eslint-disable-next-line jest/expect-expect
+      it('never succeeds', async() => {
+        const ctx = initStore();
+
+        for (let i = 0; i < 10; i++) {
+          await cycleFail({
+            ctx, msg, obj, revision: 1
+          });
+        }
+
+        await cycleFail({
+          ctx, msg, obj, revision: 1, tooManyTries: true
+        });
+      });
+    });
+  });
 });

package/plugins/steve/getters.js

@@ -154,9 +154,15 @@ export default {
         opt.excludeFields = Array.isArray(opt?.omitExcludeFields) ? excludeFields.filter((f) => !f.includes(opt.omitExcludeFields)) : excludeFields;
       }
 
-      const excludeParamsString = opt.excludeFields.map((field) => `exclude=${ field }`).join('&');
+      if (opt.excludeFields.length) {
+        const excludeParamsString = opt.excludeFields.map((field) => `exclude=${ field }`).join('&');
 
-      url += `${ url.includes('?') ? '&' : '?' }${ excludeParamsString }`;
+        url += `${ url.includes('?') ? '&' : '?' }${ excludeParamsString }`;
+      }
+
+      if (opt.revision) {
+        url += `${ url.includes('?') ? '&' : '?' }${ `revision=${ opt.revision }` }`;
+      }
     }
     // End: Exclude
 

package/plugins/steve/resourceWatcher.js

@@ -36,12 +36,19 @@ export const WATCH_STATUSES = {
   REMOVE_REQUESTED: 'removed_requested'
 };
 
+/**
+ * Create a unique key for a specific resource watch's params
+ */
 export const keyForSubscribe = ({
   resourceType, type, namespace, id, selector
 } = {}) => {
-  return [(resourceType || type), namespace, id, selector] // each watch param in an array
-    .filter((param) => !!param) // filter out all the empty ones // the filter makes these keys neater
-    .join('/'); // join into a string so we can use it as an object key
+  const keyMap = {
+    type: resourceType || type, namespace, id, selector
+  };
+
+  return Object.entries(keyMap)
+    .map(([prop, value]) => `${ prop }=${ value || '' }`)
+    .join(',');
 };
 
 export const watchKeyFromMessage = (msg) => {