@rancher/shell 3.0.5-rc.6 → 3.0.5-rc.8

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/normalize.js

@@ -17,28 +17,40 @@ export function normalizeType(type) {
   return type;
 }
 
-// Detect and resolve conflicts from a 409 response.
-// If they are resolved, return a false-y value
-// Else they can't be resolved, return an array of errors to show to the user.
-export async function handleConflict(initialValueJSON, value, liveValue, rootGetters, store, storeNamespace) {
-  const orig = await store.dispatch(`${ storeNamespace }/cleanForDiff`, initialValueJSON, { root: true });
-  const user = await store.dispatch(`${ storeNamespace }/cleanForDiff`, value.toJSON(), { root: true });
-  const cur = await store.dispatch(`${ storeNamespace }/cleanForDiff`, liveValue.toJSON(), { root: true });
-
-  const bgChange = changeset(orig, cur);
-  const userChange = changeset(orig, user);
-  const actualConflicts = changesetConflicts(bgChange, userChange);
-
-  console.log('Background Change', bgChange); // eslint-disable-line no-console
-  console.log('User Change', userChange); // eslint-disable-line no-console
+/**
+ * Detect and resolve conflicts from a 409 response.
+ *
+ * @param {*} initialValue the initial value before changes
+ * @param {*} userValue the value containing the local changes. this function will intentionally mutate this to contain changes made from the server
+ * @param {*} serverValue the very latest value from the server
+ * @returns If `value` has been successfully updated return a false-y value. Else they can't be resolved, return an array of errors to show the user.
+ */
+export async function handleConflict(initialValue, userValue, serverValue, store, storeNamespace, toJSON = (x) => x.toJSON()) {
+  // initial value
+  const initial = await store.dispatch(`${ storeNamespace }/cleanForDiff`, toJSON(initialValue), { root: true });
+  // changed value (user edits)
+  const user = await store.dispatch(`${ storeNamespace }/cleanForDiff`, toJSON(userValue), { root: true });
+  // server value
+  const server = await store.dispatch(`${ storeNamespace }/cleanForDiff`, toJSON(serverValue), { root: true });
+
+  // changes made to the server value
+  const serverChanges = changeset(initial, server);
+  // changes made locally
+  const userChanges = changeset(initial, user);
+  // Any incompatibilities between changes made locally and the server?
+  const actualConflicts = changesetConflicts(serverChanges, userChanges);
+
+  console.log('Background Change', serverChanges); // eslint-disable-line no-console
+  console.log('User Change', userChanges); // eslint-disable-line no-console
   console.log('Conflicts', actualConflicts); // eslint-disable-line no-console
 
-  value.metadata.resourceVersion = liveValue.metadata.resourceVersion;
-  applyChangeset(value, bgChange);
+  userValue.metadata.resourceVersion = serverValue.metadata.resourceVersion;
+  // Apply changes made on the server to the changed (user) value
+  applyChangeset(userValue, serverChanges);
 
   if ( actualConflicts.length ) {
     // Stop the save and let the user inspect and continue editing
-    const out = [rootGetters['i18n/t']('validation.conflict', { fields: actualConflicts.join(', '), fieldCount: actualConflicts.length })];
+    const out = [store.getters['i18n/t']('validation.conflict', { fields: actualConflicts.join(', '), fieldCount: actualConflicts.length })];
 
     return out;
   } else {

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

@@ -32,9 +32,11 @@ import isFunction from 'lodash/isFunction';
 import isString from 'lodash/isString';
 import { 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 { importDrawer } from '@shell/utils/dynamic-importer';
 
 export const DNS_LIKE_TYPES = ['dnsLabel', 'dnsLabelRestricted', 'hostname'];
 
@@ -858,6 +860,10 @@ export default class Resource {
 
   // ------------------------------------------------------------------
 
+  get canEdit() {
+    return this.canUpdate && this.canCustomEdit;
+  }
+
   get availableActions() {
     const all = this._availableActions;
 
@@ -897,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
@@ -904,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',
@@ -1343,9 +1375,7 @@ export default class Resource {
     this.currentRouter().push(location);
   }
 
-  goToEdit(moreQuery = {}) {
-    const location = this.detailLocation;
-
+  goToEdit(moreQuery = {}, location = this.detailLocation) {
     location.query = {
       ...location.query,
       [MODE]: _EDIT,
@@ -1528,11 +1558,11 @@ export default class Resource {
     }
   }
 
-  async saveYaml(yaml) {
-    await this._saveYaml(yaml);
+  async saveYaml(yaml, initialYaml) {
+    await this._saveYaml(yaml, initialYaml);
   }
 
-  async _saveYaml(yaml) {
+  async _saveYaml(yaml, initialYaml, depth = 0) {
     /* Multipart support, but need to know the right cluster and work for management store
       and "apply" seems to only work for create, not update.
 
@@ -1570,20 +1600,56 @@ export default class Resource {
         data:   yaml
       });
     } else {
-      res = await this.followLink('update', {
-        method: 'PUT',
-        headers,
-        data:   yaml
-      });
+      try {
+        res = await this.followLink('update', {
+          method: 'PUT',
+          headers,
+          data:   yaml
+        });
+      } catch (err) {
+        const IS_ERR_409 = err.status === 409 || err._status === 409;
+
+        // Conflict, the resource being edited has changed since starting editing
+        if (IS_ERR_409 && depth === 0 && initialYaml) {
+          const inStore = this.$rootGetters['currentStore'](this.type);
+
+          const initialValue = jsyaml.load(initialYaml);
+          const value = jsyaml.load(yaml);
+          const liveValue = this.$rootGetters[`${ inStore }/byId`](this.type, this.id);
+
+          const handledConflictErr = await handleConflict(
+            initialValue,
+            value,
+            liveValue,
+            {
+              dispatch: this.$dispatch,
+              getters:  this.$rootGetters
+            },
+            this.$rootGetters['currentStore'](this.type),
+            (v) => v.toJSON ? v.toJSON() : v
+          );
+
+          if (handledConflictErr === false) {
+            // It was automatically figured out, save again
+            await this._saveYaml(jsyaml.dump(value), null, depth + 1);
+          } else {
+            throw handledConflictErr;
+          }
+        } else {
+          throw err;
+        }
+      }
     }
 
-    await this.$dispatch(`load`, {
-      data:     res,
-      existing: (isCreate ? this : undefined)
-    });
+    if (res) {
+      await this.$dispatch(`load`, {
+        data:     res,
+        existing: (isCreate ? this : undefined)
+      });
 
-    if (this.isSpoofed) {
-      await this.$dispatch('cluster/findAll', { type: this.type, opt: { force: true } }, { root: true });
+      if (this.isSpoofed) {
+        await this.$dispatch('cluster/findAll', { type: this.type, opt: { force: true } }, { root: true });
+      }
     }
   }
 

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) => {

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

@@ -15,7 +15,9 @@ import {
   HPA,
   SECRET
 } from '@shell/config/types';
-import { CAPI as CAPI_LAB_AND_ANO, CATTLE_PUBLIC_ENDPOINTS, STORAGE } from '@shell/config/labels-annotations';
+import {
+  CAPI as CAPI_LAB_AND_ANO, CATTLE_PUBLIC_ENDPOINTS, STORAGE, UI_PROJECT_SECRET, UI_PROJECT_SECRET_COPY
+} from '@shell/config/labels-annotations';
 import { Schema } from '@shell/plugins/steve/schema';
 import { PaginationSettingsStore } from '@shell/types/resources/settings';
 import paginationUtils from '@shell/utils/pagination-utils';
@@ -184,6 +186,10 @@ class StevePaginationUtils extends NamespaceProjectFilters {
     [CONFIG_MAP]: [
       { field: 'metadata.labels[harvesterhci.io/cloud-init-template]' }
     ],
+    [SECRET]: [
+      { field: `metadata.labels[${ UI_PROJECT_SECRET }]` },
+      { field: `metadata.annotations[${ UI_PROJECT_SECRET_COPY }]` },
+    ],
     [NAMESPACE]: [
       { field: 'metadata.labels[field.cattle.io/projectId]' }
     ],
@@ -499,7 +505,11 @@ class StevePaginationUtils extends NamespaceProjectFilters {
               // Check if the API supports filtering by this field
               this.validateField(validateFields, schema, field.field);
 
-              const encodedValue = encodeURIComponent(field.value);
+              // we're just checking that the field exists, so there's no value
+              if (field.exists) {
+                return field.field;
+              }
+              const encodedValue = encodeURIComponent(field.value || '');
 
               // = exact match (equals + exact)
               // ~ partial match (equals + !exact)
@@ -508,7 +518,7 @@ class StevePaginationUtils extends NamespaceProjectFilters {
               const operator = `${ field.equals ? '' : '!' }${ field.exact ? '=' : '~' }`;
               let safeValue;
 
-              if (StevePaginationUtils.VALID_FIELD_VALUE_REGEX.test(field.value)) {
+              if (StevePaginationUtils.VALID_FIELD_VALUE_REGEX.test(field.value || '')) {
                 // Does not contain any protected characters, send as is
                 safeValue = encodedValue;
               } else {
@@ -674,6 +684,7 @@ export const PAGINATION_SETTINGS_STORE_DEFAULTS: PaginationSettingsStore = {
           // { resource: CAPI.RANCHER_CLUSTER, context: ['home', 'side-bar'] }, // Disabled due to https://github.com/rancher/dashboard/issues/14493
           // { resource: MANAGEMENT.CLUSTER, context: ['side-bar'] }, // Disabled due to https://github.com/rancher/dashboard/issues/14493
           { resource: CATALOG.APP, context: ['branding'] },
+          SECRET
         ],
         generic: false,
       }