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

package/plugins/dashboard-store/actions.js

@@ -9,6 +9,7 @@ import garbageCollect from '@shell/utils/gc/gc';
 import { addSchemaIndexFields } from '@shell/plugins/steve/schema.utils';
 import { addParam, parse } from '@shell/utils/url';
 import { conditionalDepaginate } from '@shell/store/type-map.utils';
+import { STEVE_WATCH_MODE } from '@shell/types/store/subscribe.types';
 import { FilterArgs } from '@shell/types/store/pagination.types';
 import { isLabelSelectorEmpty, labelSelectorToSelector } from '@shell/utils/selector-typed';
 
@@ -183,7 +184,6 @@ export default {
 
     opt = opt || {};
     type = getters.normalizeType(type);
-
     if ( !getters.typeRegistered(type) ) {
       commit('registerType', type);
     }
@@ -408,10 +408,12 @@ export default {
    *
    * @param {*} ctx
    * @param { {type: string, opt: ActionFindPageArgs} } opt
+   * @returns @ActionFindPageResponse
    */
   async findPage(ctx, { type, opt }) {
     const { getters, commit, dispatch } = ctx;
 
+    // of type @ActionFindPageArgs
     opt = opt || {};
 
     if (!opt.pagination) {
@@ -426,12 +428,24 @@ export default {
       commit('registerType', type);
     }
 
+    // of type @STEVE_WATCH_PARAMS
+    const watchArgs = {
+      type,
+      namespace: opt.watchNamespace || opt.namespaced, // it could be either apparently
+      force:     opt.forceWatch === true,
+      mode:      STEVE_WATCH_MODE.RESOURCE_CHANGES,
+    };
+
     // No need to request the resources if we have them already
     if (!opt.transient && !opt.force && getters['havePaginatedPage'](type, opt)) {
+      if (opt.watch !== false ) {
+        dispatch('watch', watchArgs);
+      }
+
       return findAllGetter(getters, type, opt);
     }
 
-    console.log(`Find Page: [${ ctx.state.config.namespace }] ${ type }. Page: ${ opt.pagination.page }. Size: ${ opt.pagination.pageSize }`); // eslint-disable-line no-console
+    console.log(`Find Page: [${ ctx.state.config.namespace }] ${ type }. Page: ${ opt.pagination.page }. Size: ${ opt.pagination.pageSize }. Sort: ${ opt.pagination.sort.map((s) => s.field).join(', ') }`); // eslint-disable-line no-console
     opt = opt || {};
     opt.url = getters.urlFor(type, null, opt);
 
@@ -451,11 +465,7 @@ export default {
       return Promise.reject(e);
     }
 
-    await dispatch('unwatch', {
-      type,
-      all: true,
-    });
-
+    // Of type @StorePagination
     const pagination = opt.pagination ? {
       request: {
         namespace:  opt.namespaced,
@@ -472,11 +482,16 @@ export default {
       commit('loadPage', {
         ctx,
         type,
-        data: out.data,
+        data:     out.data,
         pagination,
+        revision: out.revision,
       });
     }
 
+    if ( !opt.transient && opt.watch !== false ) {
+      dispatch('watch', watchArgs);
+    }
+
     if (opt.hasManualRefresh) {
       dispatch('resource-fetch/updateManualRefreshIsLoading', false, { root: true });
     }
@@ -499,6 +514,9 @@ export default {
    * b) Pagination Disabled - use the old 'native kube api' - findMatching
    *
    * Filter is defined via the kube labelSelector object (see KubeLabelSelector)
+   *
+   * opt: @ActionFindLabelSelectorArgs
+   * @returns @ActionFindMatchingResponse (resources[], or if transient { data: resources[], pagination: StorePagination })
    */
   async findLabelSelector(ctx, {
     type,
@@ -515,6 +533,8 @@ export default {
       context,
     };
 
+    opt = opt || {};
+
     if (getters[`paginationEnabled`]?.(args)) {
       if (isLabelSelectorEmpty(labelSelector)) {
         throw new Error(`labelSelector must not be empty when using findLabelSelector (avoid fetching all resources)`);
@@ -524,21 +544,28 @@ export default {
       return dispatch('findPage', {
         type,
         opt: {
-          ...(opt || {}),
+          ...opt,
           namespaced: namespace,
           pagination: new FilterArgs({ labelSelector }),
+          transient:  opt?.transient !== undefined ? opt.transient : false // Call this out explicitly here, as by default findX methods ar eusually be cached AND watched
         }
       });
     }
 
-    return dispatch('findMatching', {
+    // opt of type ActionFindPageArgs
+    const findMatching = await dispatch('findMatching', {
       type,
       selector: labelSelectorToSelector(labelSelector),
       opt,
       namespace,
     });
+
+    return opt.transient ? { data: findMatching } : findMatching;
   },
 
+  /**
+   * opt: @ActionFindMatchingArgs
+   */
   async findMatching(ctx, {
     type,
     selector,
@@ -671,7 +698,15 @@ export default {
     return out;
   },
 
-  load(ctx, { data, existing }) {
+  /**
+   * Add or update the given resource in the store
+   *
+   * invalidatePageCache
+   * - if something calls `load` then the cache no longer has a page so we invalidate it
+   * - however on resource create or remove this can lead to lists showing nothing... before the new page is fetched
+   * - for those cases avoid invaliding the page cache
+   */
+  load(ctx, { data, existing, invalidatePageCache }) {
     const { getters, commit } = ctx;
 
     let type = normalizeType(data.type);
@@ -704,7 +739,8 @@ export default {
     commit('load', {
       ctx,
       data,
-      existing
+      existing,
+      invalidatePageCache // Avoid havePage invalidation
     });
 
     if ( type === SCHEMA ) {
@@ -774,9 +810,9 @@ export default {
 
   // Forget a type in the store
   // Remove all entries for that type and stop watching it
-  forgetType({ commit, dispatch, state }, type) {
+  forgetType({ commit, dispatch, state }, type, compareWatches) {
     state.started
-      .filter((entry) => entry.type === type)
+      .filter((entry) => compareWatches ? compareWatches(entry) : entry.type === type)
       .forEach((entry) => dispatch('unwatch', entry));
 
     commit('forgetType', type);

package/plugins/dashboard-store/getters.js

@@ -50,6 +50,33 @@ export const urlFor = (state, getters) => (type, id, opt) => {
   return url;
 };
 
+function resourceCount(rootGetters, getters, typeObj) {
+  let _typeObj = typeObj;
+  const { name: type, count } = _typeObj;
+
+  if (!type) {
+    throw new Error(`Resource type required to calc count: ${ JSON.stringify(typeObj) }`);
+  }
+
+  if (!count) {
+    const schema = getters.schemaFor(type);
+    const counts = getters.all(COUNT)?.[0]?.counts || {};
+    const count = counts[type];
+
+    // This object aligns with `Type.vue` `type`
+    _typeObj = {
+      count:       count ? count.summary.count || 0 : null,
+      byNamespace: count ? count.namespaces : {},
+      revision:    count ? count.revision : null,
+      namespaced:  schema?.attributes?.namespaced
+    };
+  }
+
+  const namespaces = _typeObj?.namespaced && !rootGetters.isAllNamespaces ? Object.keys(rootGetters.activeNamespaceCache || {}) : [];
+
+  return matchingCounts(_typeObj, namespaces.length ? namespaces : null);
+}
+
 /**
  * Find the number of resources given
  * - if the type is namespaced
@@ -125,6 +152,10 @@ export default {
       return getters.all(type);
     }
 
+    if (getters['havePage'](type)) {
+      return getters.all(type);
+    }
+
     // Does the store have all and we can pretend like it contains a result of a labelSelector?
     if (getters['haveAll'](type)) {
       return getters.matching( type, selector, namespace );
@@ -374,6 +405,9 @@ export default {
     return state.types[type]?.haveNamespace || null;
   },
 
+  /**
+   * Returns (type: string ) => StorePagination
+   */
   havePage: (state, getters) => (type) => {
     type = getters.normalizeType(type);
 
@@ -455,30 +489,13 @@ export default {
    *
    */
   count: (state, getters, rootState, rootGetters) => (typeObj) => {
-    let _typeObj = typeObj;
-    const { name: type, count } = _typeObj;
+    const subTypes = rootGetters['type-map/optionsFor'](typeObj.name).subTypes || [];
 
-    if (!type) {
-      throw new Error(`Resource type required to calc count: ${ JSON.stringify(typeObj) }`);
+    if (subTypes.length) {
+      return subTypes.reduce((acc, type) => acc + resourceCount(rootGetters, getters, { name: type }), 0);
     }
 
-    if (!count) {
-      const schema = getters.schemaFor(type);
-      const counts = getters.all(COUNT)?.[0]?.counts || {};
-      const count = counts[type];
-
-      // This object aligns with `Type.vue` `type`
-      _typeObj = {
-        count:       count ? count.summary.count || 0 : null,
-        byNamespace: count ? count.namespaces : {},
-        revision:    count ? count.revision : null,
-        namespaced:  schema?.attributes?.namespaced
-      };
-    }
-
-    const namespaces = _typeObj?.namespaced && !rootGetters.isAllNamespaces ? Object.keys(rootGetters.activeNamespaceCache || {}) : [];
-
-    return matchingCounts(_typeObj, namespaces.length ? namespaces : null);
+    return resourceCount(rootGetters, getters, typeObj);
   },
 
   generation: (state, getters) => (type) => {

package/plugins/dashboard-store/mutations.js

@@ -86,8 +86,16 @@ export function createLoadArgs(ctx, dataType) {
   };
 }
 
+/**
+ * Add or update the given resource in the store
+ *
+ * invalidatePageCache
+ * - if something calls `load` then the cache no longer has a page so we invalidate it
+ * - however on resource create or remove this can lead to lists showing nothing... before the new page is fetched
+ * - for those cases avoid invaliding the page cache
+ */
 export function load(state, {
-  data, ctx, existing, cachedArgs
+  data, ctx, existing, cachedArgs, invalidatePageCache = true,
 }) {
   const { getters } = ctx;
   // Optimisation. This can run once per resource loaded.., so pass in from parent
@@ -130,8 +138,12 @@ export function load(state, {
     }
   } else {
     if (inMap) {
+      // In theory cached `entry` should match provided `existing`, so changes merged from `data` into `entry` should be reflected in `existing`.
+      // However.. there's a disconnect happening somewhere so merge data into `existing` before merging into `entry`
+      const latestEntry = existing && entry !== existing ? replaceResource(existing, data, getters) : data;
+
       // There's already an entry in the store, so merge changes into it. The list entry is a reference to the map (and vice versa)
-      entry = replaceResource(entry, data, getters);
+      entry = replaceResource(entry, latestEntry, getters);
     } else {
       // There's no entry, make a new proxy
       entry = reactive(classify(ctx, data));
@@ -164,7 +176,8 @@ export function load(state, {
     }
   }
 
-  cache.havePage = false;
+  // see `invalidatePageCache` description above
+  cache.havePage = invalidatePageCache ? false : cache.havePage;
 
   return entry;
 }
@@ -476,29 +489,60 @@ export default {
     data,
     ctx,
     pagination,
+    revision
   }) {
     if (!data) {
       return;
     }
+    // We loop over data three times in this mutator, which is bad
+    // However we're only dealing with pageSize worth of data and splitting out into three loops improves legibility
 
     const keyField = ctx.getters.keyFieldForType(type);
-    const proxies = reactive(data.map((x) => classify(ctx, x)));
+
+    // Why don't we just replace the map? Because we
+    // 1. nav to list, subscribe to changes
+    // 2. nav to resource in list
+    // 3. update to page comes over
+    // 4. need to update the reference the detail list uses
+    const proxiesMap = {};
+    const proxies = reactive(data.map((x) => {
+      proxiesMap[x[keyField]] = true;
+
+      return classify(ctx, x);
+    }));
     const cache = registerType(state, type);
 
-    clear(cache.list);
-    cache.map.clear();
     cache.generation++;
 
+    // Update list
+    clear(cache.list);
     addObjects(cache.list, proxies);
 
+    // Update Map (remove stale)
+    cache.map.forEach((value, key) => {
+      if (!proxiesMap[value[keyField]]) {
+        cache.map.delete(key);
+      }
+    });
+
+    // Update Map (update existing / add latest)
     for ( let i = 0 ; i < proxies.length ; i++ ) {
-      cache.map.set(proxies[i][keyField], proxies[i]);
+      // This could probably be merged with the first loop above
+      const existing = cache.map.get(proxies[i][keyField]);
+      const latest = proxies[i];
+
+      if (existing) {
+        replaceResource(existing, latest, ctx.getters);
+      } else {
+        cache.map.set(latest[keyField], latest);
+      }
     }
 
     // havePage is of type `StorePagination`
     cache.havePage = pagination;
     cache.haveNamespace = undefined;
     cache.haveAll = undefined;
+    cache.revision = revision;
 
     return proxies;
   },

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

@@ -736,6 +736,17 @@ export default class Resource {
     );
   }
 
+  get stateColorPair() {
+    return {
+      state: this.stateDisplay,
+      color: this.stateSimpleColor
+    };
+  }
+
+  get stateSimpleColor() {
+    return this.stateColor.replace('text-', '');
+  }
+
   get stateBackground() {
     return this.stateColor.replace('text-', 'bg-');
   }
@@ -1180,7 +1191,8 @@ export default class Resource {
     }
 
     // @TODO remove this once the API maps steve _type <-> k8s type in both directions
-    // Completely disconnect the object we're going to save (and mangle in cleanForSave) and `this`
+    // `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.data._type) {
@@ -1248,7 +1260,18 @@ export default class Resource {
 
     const res = await this.$dispatch('request', { opt, type: this.type } );
 
-    if ( res?._status === 204 ) {
+    // In theory...
+    // 200 - resource could have finalizer (could hang around, keep resource to show deleting state)
+    // 204 - resource should be gone gone (so remove immediately)
+    // However...
+    // 200 - this is the only status code returned
+    if ( res?._status === 200 ) {
+      // Show state (probably terminating) immediately, don't wait for resource.change or debounced resource.changes update
+      // It would be neater to only do this in the debounced resource.changes world, but there's no neat / complete way to do this (paginationUtils will cause dep issues if imported)
+      await this.$dispatch('load', {
+        data: res, existing: this, invalidatePageCache: false
+      });
+    } else if ( res?._status === 204 ) {
       // If there's no body, assume the resource was immediately deleted
       // and drop it from the store as if a remove event happened.
       await this.$dispatch('ws.resource.remove', { data: this });
@@ -1856,10 +1879,13 @@ export default class Resource {
           namespace,
           labelSelector: { matchExpressions: parse(selector) }
         },
-        opts: opt
+        opts: {
+          transient: true,
+          ...opt,
+        },
       });
 
-      addObjects(out, matching);
+      addObjects(out, matching.data);
     }
 
     // Find all the resources that match the required id's

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

@@ -1,4 +1,4 @@
-import { actions } from '../subscribe';
+import { actions, getters } from '../subscribe';
 
 describe('steve: subscribe', () => {
   describe('actions', () => {
@@ -106,4 +106,69 @@ describe('steve: subscribe', () => {
       });
     });
   });
+
+  describe('getters', () => {
+    describe('nextResourceVersion', () => {
+      const myType = 'myType';
+      const myId = `myId`;
+
+      type Revision = string | number | null | undefined
+
+      const createState = (revision?: Revision, cachedList?: any[] ) => {
+        const typeState: any = {};
+
+        if (revision !== undefined) {
+          typeState.revision = revision;
+        }
+        if (cachedList !== undefined) {
+          typeState.list = cachedList;
+        } else {
+          typeState.list = [];
+        }
+
+        return { types: { [myType.toLocaleLowerCase()]: typeState } };
+      };
+
+      const createGetters = (revision?: Revision) => {
+        return {
+          byId: (type: any, id: any) => {
+            expect(type).toBe(myType.toLowerCase());
+            expect(id).toBe(myId);
+
+            return { metadata: { resourceVersion: revision } };
+          }
+        };
+      };
+
+      it.each([
+        ['Is String, Return String', createGetters('abc'), myId, 'abc'],
+        // This catches old parseInt errors
+        ['Is String, Return String (integer prefix)', createGetters('123-abc'), myId, '123-abc'],
+        // This catches old parseInt errors
+        ['Is String, Return String (integer postfix)', createGetters('abc-123'), myId, 'abc-123'],
+        ['Is 0, Return Null', createGetters(0), myId, null],
+        ['Is Number, Return Number', createGetters(123), myId, 123],
+        ['Is Missing (null), Return Null', createGetters(null), myId, null],
+        ['Is Missing (undefined), Return Null', createGetters(undefined), myId, null],
+      ])('test revision from a single resource - %s', (_, storeGetters, id, expected) => {
+        expect(getters.nextResourceVersion(createState(), storeGetters)(myType, id)).toBe(expected);
+      });
+
+      const createResource = (revision: Revision) => ({ metadata: { resourceVersion: revision } });
+
+      it.each([
+        ['Is String, Return String', createState('abc'), 'abc'],
+        ['Is String, Return String (integer prefix)', createState('123-abc'), '123-abc'],
+        ['Is String, Return String (integer postfix)', createState('abc-123'), 'abc-123'],
+        ['Is 0, Return Null (nothing in cache)', createState(0), null],
+        ['Is 0, Return Number (numbers in cache)', createState(0, [createResource(1), createResource(2), createResource(3)]), 3],
+        ['Is 0, Return Number (numbers and strings in cache)', createState(0, [createResource(1), createResource('abc-2'), createResource('3-abc')]), 1],
+        ['Is 0, Return Null (only strings in cache)', createState(0, [createResource('abc'), createResource('abc-2'), createResource('3-abc')]), null],
+        ['Is missing (undefined), Return Null ', createState(undefined), null],
+        ['Is missing (null), Return Null', createState(null), null],
+      ])('test revision from a collection - %s', (_, state, expected) => {
+        expect(getters.nextResourceVersion(state, {})(myType)).toBe(expected);
+      });
+    });
+  });
 });

package/plugins/steve/actions.js

@@ -58,6 +58,9 @@ export default {
       waiting = state.deferredRequests[key];
 
       if ( waiting ) {
+        // A matching request has already been made and is currently waiting to complete
+        // Avoid making another request, just wait for the original one to complete
+        // and return the result of the first call (see `waiting` being processed far below)
         const later = deferred();
 
         waiting.push(later);

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

@@ -454,7 +454,6 @@ class StevePaginationUtils extends NamespaceProjectFilters {
 
     // First check in our hardcoded list of supported filters
     if (
-      process.env.NODE_ENV === 'dev' &&
       !!schema &&
       [
         StevePaginationUtils.VALID_FIELDS[''], // Global
@@ -500,16 +499,25 @@ class StevePaginationUtils extends NamespaceProjectFilters {
               // Check if the API supports filtering by this field
               this.validateField(validateFields, schema, field.field);
 
-              const value = encodeURIComponent(field.value);
+              const encodedValue = encodeURIComponent(field.value);
 
               // = exact match (equals + exact)
               // ~ partial match (equals + !exact)
               // != not exact match (!equals + exact)
               // !~ not partial match (!equals + !exact)
               const operator = `${ field.equals ? '' : '!' }${ field.exact ? '=' : '~' }`;
-              const quotedValue = StevePaginationUtils.VALID_FIELD_VALUE_REGEX.test(value) ? value : `"${ value }"`;
-
-              return `${ this.convertArrayPath(field.field) }${ operator }${ quotedValue }`;
+              let safeValue;
+
+              if (StevePaginationUtils.VALID_FIELD_VALUE_REGEX.test(field.value)) {
+                // Does not contain any protected characters, send as is
+                safeValue = encodedValue;
+              } else {
+                // Contains protected characters, wrap in quotes to ensure backend doesn't fail
+                // - replace reserver `"`/`%22` with empty string - see https://github.com/rancher/dashboard/issues/14549 for improvement
+                safeValue = `"${ encodedValue.replaceAll('%22', '') }"`;
+              }
+
+              return `${ this.convertArrayPath(field.field) }${ operator }${ safeValue }`;
             }
 
             return field.value;
@@ -649,7 +657,7 @@ export const PAGINATION_SETTINGS_STORE_DEFAULTS: PaginationSettingsStore = {
         enabled: [
           NODE, EVENT,
           WORKLOAD_TYPES.CRON_JOB, WORKLOAD_TYPES.DAEMON_SET, WORKLOAD_TYPES.DEPLOYMENT, WORKLOAD_TYPES.JOB, WORKLOAD_TYPES.STATEFUL_SET, POD,
-          CATALOG.APP, CATALOG.CLUSTER_REPO, CATALOG.OPERATION,
+          CATALOG.APP, CATALOG.OPERATION,
           HPA, INGRESS, SERVICE,
           PV, CONFIG_MAP, STORAGE_CLASS, PVC, SECRET,
           WORKLOAD_TYPES.REPLICA_SET, WORKLOAD_TYPES.REPLICATION_CONTROLLER
@@ -663,8 +671,9 @@ export const PAGINATION_SETTINGS_STORE_DEFAULTS: PaginationSettingsStore = {
       enableAll:  false,
       enableSome: {
         enabled: [
-          { resource: CAPI.RANCHER_CLUSTER, context: ['home', 'side-bar'] },
-          { resource: MANAGEMENT.CLUSTER, context: ['side-bar'] },
+          // { 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'] },
         ],
         generic: false,
       }