@rancher/shell 0.1.0 → 0.1.1

package/store/index.js

@@ -60,24 +60,120 @@ export const plugins = [
 
 ];
 
+const getActiveNamespaces = (state, getters) => {
+  const out = {};
+  const product = getters['currentProduct'];
+  const workspace = state.workspace;
+
+  if ( !product ) {
+    return out;
+  }
+
+  if ( product.showWorkspaceSwitcher ) {
+    const fleetOut = { [workspace]: true };
+
+    updateActiveNamespaceCache(state, fleetOut);
+
+    return fleetOut;
+  }
+
+  const inStore = product?.inStore;
+  const clusterId = getters['currentCluster']?.id;
+
+  if ( !clusterId || !inStore ) {
+    updateActiveNamespaceCache(state, out);
+
+    return out;
+  }
+
+  const namespaces = getters[`${ inStore }/all`](NAMESPACE);
+
+  const filters = state.namespaceFilters.filter(x => !!x && !`${ x }`.startsWith(NAMESPACED_PREFIX));
+  const includeAll = getters.isAllNamespaces;
+  const includeSystem = filters.includes(ALL_SYSTEM);
+  const includeUser = filters.includes(ALL_USER);
+  const includeOrphans = filters.includes(ALL_ORPHANS);
+
+  // Special cases to pull in all the user, system, or orphaned namespaces
+  if ( includeAll || includeOrphans || includeSystem || includeUser ) {
+    for ( const ns of namespaces ) {
+      if (
+        includeAll ||
+        ( includeOrphans && !ns.projectId ) ||
+        ( includeUser && !ns.isSystem ) ||
+        ( includeSystem && ns.isSystem )
+      ) {
+        out[ns.id] = true;
+      }
+    }
+  }
+
+  // Individual requests for a specific project/namespace
+  if ( !includeAll ) {
+    for ( const filter of filters ) {
+      const [type, id] = filter.split('://', 2);
+
+      if ( !type ) {
+        continue;
+      }
+
+      if ( type === 'ns' ) {
+        out[id] = true;
+      } else if ( type === 'project' ) {
+        const project = getters['management/byId'](MANAGEMENT.PROJECT, `${ clusterId }/${ id }`);
+
+        if ( project ) {
+          for ( const ns of project.namespaces ) {
+            out[ns.id] = true;
+          }
+        }
+      }
+    }
+  }
+  // Create map that can be used to efficiently check if a
+  // resource should be displayed
+  updateActiveNamespaceCache(state, out);
+
+  return out;
+};
+
+const updateActiveNamespaceCache = (state, activeNamespaceCache) => {
+  // This is going to run a lot, so keep it optimised
+  let cacheKey = '';
+
+  for (const key in activeNamespaceCache) {
+    // I though array.join would be faster than string concatenation, but in places like this where the array must first be constructed it's
+    // slower.
+    cacheKey += key + activeNamespaceCache[key];
+  }
+
+  // Only update `activeNamespaceCache` if there have been changes. This reduces a lot of churn
+  if (state.activeNamespaceCacheKey !== cacheKey) {
+    state.activeNamespaceCacheKey = cacheKey;
+    state.activeNamespaceCache = activeNamespaceCache;
+  }
+};
+
 export const state = () => {
   return {
-    managementReady:     false,
-    clusterReady:        false,
-    isMultiCluster:      false,
-    isRancher:           false,
-    namespaceFilters:    [],
-    allNamespaces:       null,
-    allWorkspaces:       null,
-    clusterId:           null,
-    productId:           null,
-    workspace:           null,
-    error:               null,
-    cameFromError:       false,
-    pageActions:         [],
-    serverVersion:       null,
-    systemNamespaces:    [],
-    isSingleProduct:     undefined,
+    managementReady:         false,
+    clusterReady:            false,
+    isMultiCluster:          false,
+    isRancher:               false,
+    namespaceFilters:        [],
+    activeNamespaceCache:    {}, // Used to efficiently check if a resource should be displayed
+    activeNamespaceCacheKey: '', // Fingerprint of activeNamespaceCache
+    allNamespaces:           null,
+    allWorkspaces:           null,
+    clusterId:               null,
+    productId:               null,
+    workspace:               null,
+    error:                   null,
+    cameFromError:           false,
+    pageActions:             [],
+    serverVersion:           null,
+    systemNamespaces:        [],
+    isSingleProduct:         undefined,
   };
 };
 
@@ -253,73 +349,28 @@ export const getters = {
     return BOTH;
   },
 
-  namespaces(state, getters) {
-    return () => {
-      const out = {};
-      const product = getters['currentProduct'];
-      const workspace = state.workspace;
-
-      if ( !product ) {
-        return out;
-      }
-
-      if ( product.showWorkspaceSwitcher ) {
-        return { [workspace]: true };
-      }
-
-      const inStore = product?.inStore;
-      const clusterId = getters['currentCluster']?.id;
-
-      if ( !clusterId || !inStore ) {
-        return out;
-      }
-
-      const namespaces = getters[`${ inStore }/all`](NAMESPACE);
-      const filters = state.namespaceFilters.filter(x => !!x && !`${ x }`.startsWith(NAMESPACED_PREFIX));
-      const includeAll = getters.isAllNamespaces;
-      const includeSystem = filters.includes(ALL_SYSTEM);
-      const includeUser = filters.includes(ALL_USER);
-      const includeOrphans = filters.includes(ALL_ORPHANS);
-
-      // Special cases to pull in all the user, system, or orphaned namespaces
-      if ( includeAll || includeOrphans || includeSystem || includeUser ) {
-        for ( const ns of namespaces ) {
-          if (
-            includeAll ||
-            ( includeOrphans && !ns.projectId ) ||
-            ( includeUser && !ns.isSystem ) ||
-            ( includeSystem && ns.isSystem )
-          ) {
-            out[ns.id] = true;
-          }
-        }
-      }
-
-      // Individual requests for a specific project/namespace
-      if ( !includeAll ) {
-        for ( const filter of filters ) {
-          const [type, id] = filter.split('://', 2);
-
-          if ( !type ) {
-            continue;
-          }
+  activeNamespaceCache(state) {
+    // The activeNamespaceCache value is updated by the
+    // updateNamespaces mutation. We use this map to filter workloads
+    // as we don't want to recompute the active namespaces
+    // for each workload in a list.
+    return state.activeNamespaceCache;
+  },
 
-          if ( type === 'ns' ) {
-            out[id] = true;
-          } else if ( type === 'project' ) {
-            const project = getters['management/byId'](MANAGEMENT.PROJECT, `${ clusterId }/${ id }`);
+  activeNamespaceCacheKey(state) {
+    return state.activeNamespaceCacheKey;
+  },
 
-            if ( project ) {
-              for ( const ns of project.namespaces ) {
-                out[ns.id] = true;
-              }
-            }
-          }
-        }
-      }
+  activeNamespaceFilters(state) {
+    return state.namespaceFilters;
+  },
 
-      return out;
-    };
+  namespaces(state, getters) {
+    // Call this getter if you want to recompute the active namespaces
+    // by looping over all namespaces in a cluster. Otherwise call activeNamespaceCache,
+    // which returns the same object but is only recomputed when the updateNamespaces
+    // mutation is called.
+    return () => getActiveNamespaces(state, getters);
   },
 
   defaultNamespace(state, getters, rootState, rootGetters) {
@@ -330,7 +381,7 @@ export const getters = {
     }
 
     const inStore = product.inStore;
-    const filteredMap = getters['namespaces']();
+    const filteredMap = getters['activeNamespaceCache'];
     const isAll = getters['isAllNamespaces'];
     const all = getters[`${ inStore }/all`](NAMESPACE).map(x => x.id);
     let out;
@@ -420,6 +471,7 @@ export const getters = {
             resource: HCI.DASHBOARD,
           }
         },
+        enableSessionCheck: true
       };
     }
 
@@ -453,23 +505,29 @@ export const mutations = {
     state.isRancher = isRancher;
   },
 
-  clusterChanged(state, ready) {
+  clusterReady(state, ready) {
     state.clusterReady = ready;
   },
 
-  updateNamespaces(state, { filters, all }) {
+  updateNamespaces(state, getters) {
+    const { filters, all } = getters;
+
     state.namespaceFilters = filters.filter(x => !!x);
 
     if ( all ) {
       state.allNamespaces = all;
     }
+
+    // Create map that can be used to efficiently check if a
+    // resource should be displayed
+    getActiveNamespaces(state, getters);
   },
 
   pageActions(state, pageActions) {
     state.pageActions = pageActions;
   },
 
-  updateWorkspace(state, { value, all }) {
+  updateWorkspace(state, { value, all, getters }) {
     if ( all ) {
       state.allWorkspaces = all;
 
@@ -484,9 +542,11 @@ export const mutations = {
     }
 
     state.workspace = value;
+
+    getActiveNamespaces(state, getters);
   },
 
-  setCluster(state, neu) {
+  clusterId(state, neu) {
     state.clusterId = neu;
   },
 
@@ -619,6 +679,7 @@ export const actions = {
       commit('updateWorkspace', {
         value: getters['prefs/get'](WORKSPACE),
         all:   res.workspaces,
+        getters
       });
     }
 
@@ -628,13 +689,13 @@ export const actions = {
   async loadCluster({
     state, commit, dispatch, getters
   }, {
-    id, oldProduct, oldPkg, newPkg
+    id, product, oldProduct, oldPkg, newPkg
   }) {
     const sameCluster = state.clusterId && state.clusterId === id;
     const samePackage = oldPkg?.name === newPkg?.name;
     const isMultiCluster = getters['isMultiCluster'];
 
-    // Are we in the same package and cluster?
+    // Are we in the same cluster and package?
     if ( sameCluster && samePackage) {
       // Do nothing, we're already connected/connecting to this cluster
       return;
@@ -653,12 +714,18 @@ export const actions = {
       s => getters[`${ s.storeName }/isClusterStore`]
     )?.storeName;
 
-    // Should we leave/forget the current cluster?
-    if ( (state.clusterId && id) || !samePackage) {
+    const productConfig = state['type-map']?.products?.find(p => p.name === product);
+    const forgetCurrentCluster = ((state.clusterId && id) || !samePackage) && !productConfig?.inExplorer;
+
+    // Should we leave/forget the current cluster? Only if we're going from an existing cluster to a new cluster, or the package has changed
+    // (latter catches cases like nav from explorer cluster A to epinio cluster A)
+    // AND if the product not scoped to the explorer - a case for products that only exist within the explorer (i.e. Kubewarden)
+    if ( forgetCurrentCluster ) {
       // Clear the old cluster state out if switching to a new one.
       // If there is not an id then stay connected to the old one behind the scenes,
       // so that the nav and header stay the same when going to things like prefs
-      commit('clusterChanged', false);
+      commit('clusterReady', false);
+      commit('clusterId', undefined);
 
       await dispatch('cluster/unsubscribe');
       commit('cluster/reset');
@@ -682,18 +749,16 @@ export const actions = {
     if ( id ) {
       // Remember the current cluster
       dispatch('prefs/set', { key: CLUSTER_PREF, value: id });
-      commit('setCluster', id);
+      commit('clusterId', id);
 
       // Use a pseudo cluster ID to pretend we have a cluster... to ensure some screens that don't care about a cluster but 'require' one to show
       if (id === BLANK_CLUSTER) {
-        commit('clusterChanged', true);
+        commit('clusterReady', true);
 
         return;
       }
     } else {
-      // Forget the current cluster
-      commit('setCluster', undefined);
-
+      // Switching to a global page with no cluster id, keep it the same.
       return;
     }
 
@@ -705,7 +770,7 @@ export const actions = {
       dispatch(`${ newPkgClusterStore }/loadSchemas`, true);
       await dispatch(`${ newPkgClusterStore }/loadCluster`, { id });
 
-      commit('clusterChanged', true);
+      commit('clusterReady', true);
       console.log('Done loading pkg cluster:', newPkgClusterStore); // eslint-disable-line no-console
 
       // Everything below here is rancher/kube cluster specific
@@ -733,7 +798,7 @@ export const actions = {
         throw new Error('Unready cluster');
       }
     } catch {
-      commit('setCluster', null);
+      commit('clusterId', null);
       commit('cluster/applyConfig', { baseUrl: null });
       throw new ClusterNotFoundError(id);
     }
@@ -785,10 +850,11 @@ export const actions = {
 
     commit('updateNamespaces', {
       filters: filters || [ALL_USER],
-      all:     res.namespaces
+      all:     res.namespaces,
+      ...getters
     });
 
-    commit('clusterChanged', true);
+    commit('clusterReady', true);
 
     console.log('Done loading cluster.'); // eslint-disable-line no-console
   },
@@ -803,7 +869,7 @@ export const actions = {
         [key]: ids
       }
     });
-    commit('updateNamespaces', { filters: ids });
+    commit('updateNamespaces', { filters: ids, ...getters });
   },
 
   async loadVirtual({
@@ -826,7 +892,7 @@ export const actions = {
     }
 
     if ( state.clusterId && id ) {
-      commit('clusterChanged', false);
+      commit('clusterReady', false);
 
       await dispatch('harvester/unsubscribe');
       commit('harvester/reset');
@@ -841,7 +907,7 @@ export const actions = {
     }
 
     if (id) {
-      commit('setCluster', id);
+      commit('clusterId', id);
     }
 
     console.log(`Loading ${ isMultiCluster ? 'ECM ' : '' }cluster...`); // eslint-disable-line no-console
@@ -864,7 +930,7 @@ export const actions = {
     }
 
     if ( !cluster ) {
-      commit('setCluster', null);
+      commit('clusterId', null);
       commit('harvester/applyConfig', { baseUrl: null });
       throw new ClusterNotFoundError(id);
     }
@@ -891,6 +957,22 @@ export const actions = {
       isRancher = true;
     }
 
+    if (id !== 'local' && getters['harvester/schemaFor'](MANAGEMENT.SETTING)) { // multi-cluster
+      const settings = await dispatch('harvester/findAll', {
+        type: MANAGEMENT.SETTING,
+        id:   SETTING.SYSTEM_NAMESPACES,
+        opt:  { url: `${ virtualBase }/${ MANAGEMENT.SETTING }s/`, force: true }
+      });
+
+      const systemNamespaces = settings?.find(x => x.id === SETTING.SYSTEM_NAMESPACES);
+
+      if (systemNamespaces) {
+        const namespace = (systemNamespaces.value || systemNamespaces.default)?.split(',');
+
+        commit('setSystemNamespaces', namespace);
+      }
+    }
+
     const hash = {
       projects:          isRancher && dispatch('management/findAll', projectArgs),
       virtualCount:      dispatch('harvester/findAll', { type: COUNT }),
@@ -910,10 +992,11 @@ export const actions = {
 
     commit('updateNamespaces', {
       filters: filters || [ALL_USER],
-      all:     res.virtualNamespaces
+      all:     res.virtualNamespaces,
+      ...getters
     });
 
-    commit('clusterChanged', true);
+    commit('clusterReady', true);
 
     console.log('Done loading virtual cluster.'); // eslint-disable-line no-console
   },
@@ -967,8 +1050,8 @@ export const actions = {
     commit('prefs/reset');
 
     await dispatch('cluster/unsubscribe');
-    commit('clusterChanged', false);
-    commit('setCluster', null);
+    commit('clusterReady', false);
+    commit('clusterId', null);
     commit('cluster/reset');
 
     await dispatch('rancher/unsubscribe');

package/store/prefs.js

@@ -59,7 +59,7 @@ export const THEME = create('theme', 'auto', {
 export const PREFERS_SCHEME = create('pcs', '', { asCookie, asUserPreference: false });
 export const LOCALE = create('locale', 'en-us', { asCookie });
 export const KEYMAP = create('keymap', 'sublime', { options: ['sublime', 'emacs', 'vim'] });
-export const ROWS_PER_PAGE = create('per-page', 100, { options: [10, 25, 50, 100, 250, 500, 1000], parseJSON });
+export const ROWS_PER_PAGE = create('per-page', 100, { options: [10, 25, 50, 100], parseJSON });
 export const LOGS_WRAP = create('logs-wrap', true, { parseJSON });
 export const LOGS_TIME = create('logs-time', true, { parseJSON });
 export const LOGS_RANGE = create('logs-range', '30 minutes', { parseJSON });
@@ -163,7 +163,13 @@ export const getters = {
     return definition.options.slice();
   },
 
-  theme: (state, getters) => {
+  theme: (state, getters, rootState, rootGetters) => {
+    const setting = rootGetters['management/byId'](MANAGEMENT.SETTING, SETTING.THEME);
+
+    if (setting?.value) {
+      return setting?.value;
+    }
+
     let theme = getters['get'](THEME);
     const pcs = getters['get'](PREFERS_SCHEME);
 

package/store/resource-fetch.js

@@ -0,0 +1,44 @@
+export const state = function() {
+  return {
+    refreshFlag:                null,
+    isTooManyItemsToAutoUpdate: false,
+    manualRefreshIsLoading:     false,
+  };
+};
+
+export const getters = {
+  isTooManyItemsToAutoUpdate: state => state.isTooManyItemsToAutoUpdate,
+  refreshFlag:                state => state.refreshFlag,
+  manualRefreshIsLoading:     state => state.manualRefreshIsLoading
+};
+
+export const mutations = {
+  updateIsTooManyItems(state, data) {
+    state.isTooManyItemsToAutoUpdate = data;
+  },
+  updateRefreshFlag(state, data) {
+    state.refreshFlag = data;
+  },
+  updateManualRefreshIsLoading(state, data) {
+    state.manualRefreshIsLoading = data;
+  },
+};
+
+export const actions = {
+  clearData({ commit, state }) {
+    commit('updateIsTooManyItems', false);
+    commit('updateRefreshFlag', null);
+  },
+  updateIsTooManyItems({ commit }, data) {
+    commit('updateIsTooManyItems', data);
+  },
+  updateManualRefreshIsLoading({ commit }, data) {
+    commit('updateManualRefreshIsLoading', data);
+  },
+  doManualRefresh({ commit, dispatch, state }) {
+    // simple change to trigger request on the resource-fetch mixin....
+    const finalData = new Date().getTime();
+
+    commit('updateRefreshFlag', finalData);
+  },
+};

package/store/type-map.js

@@ -37,6 +37,7 @@
 //   ifHaveType,              -- Show this product only if the given type exists in the store [inStore], This can also be specified as an object { type: TYPE, store: 'management' } if the type isn't in the current [inStore]
 //   ifHaveVerb,              -- In combination with ifHaveTYpe, show it only if the type also has this collectionMethod
 //   inStore,                 -- Which store to look at for if* above and the left-nav, defaults to "cluster"
+//   inExplorer,              -- Determines if the product is to be scoped to the explorer
 //   public,                  -- If true, show to all users.  If false, only show when the Developer Tools pref is on (default true)
 //   category,                -- Group to show the product in for the nav hamburger menu
 //   typeStoreMap,            -- An object mapping types to the store that should be used to retrieve information about the type
@@ -99,6 +100,8 @@
 //                               depaginate: undefined -- Use this to depaginate requests for this type
 //                               resourceEditMasthead: true   -- Show the Masthead in the edit resource component
 //                               customRoute: undefined,
+//                               hasGraph: undefined   -- If true, render ForceDirectedTreeChart graph (ATTENTION: option graphConfig is needed also!!!)
+//                               graphConfig: undefined   -- Use this to pass along the graph configuration
 //                           }
 // )
 // ignoreGroup(group):        Never show group or any types in it
@@ -127,7 +130,7 @@ import {
   ensureRegex, escapeHtml, escapeRegex, ucFirst, pluralize
 } from '@shell/utils/string';
 import {
-  importList, importDetail, importEdit, listProducts, loadProduct, importCustomPromptRemove, resolveList, resolveEdit, resolveDetail, resolveWindowComponent, importWindowComponent
+  importList, importDetail, importEdit, listProducts, loadProduct, importCustomPromptRemove, resolveList, resolveEdit, resolveWindowComponent, importWindowComponent, resolveDetail
 
 } from '@shell/utils/dynamic-importer';
 
@@ -153,6 +156,7 @@ export const SPOOFED_PREFIX = '__[[spoofed]]__';
 export const SPOOFED_API_PREFIX = '__[[spoofedapi]]__';
 
 const instanceMethods = {};
+const graphConfigMap = {};
 
 const FIELD_REGEX = /^\$\.metadata\.fields\[([0-9]*)\]/;
 
@@ -176,6 +180,7 @@ export function DSL(store, product, module = 'type-map') {
         name:                product,
         weight:              1,
         inStore:             'cluster',
+        inExplorer:          false,
         removable:           true,
         showClusterSwitcher: true,
         showNamespaceFilter: false,
@@ -227,6 +232,10 @@ export function DSL(store, product, module = 'type-map') {
     },
 
     configureType(match, options) {
+      if (options.graphConfig) {
+        graphConfigMap[match] = options.graphConfig;
+        delete options.graphConfig;
+      }
       store.commit(`${ module }/configureType`, { ...options, match });
     },
 
@@ -367,12 +376,12 @@ export const getters = {
   // ----------------------------------------------------------------------------
   // Turns a type name into a display label (e.g. management.cattle.io.cluster -> Cluster)
   labelFor(state, getters, rootState, rootGetters) {
-    return (schema, count = 1) => {
+    return (schema, count = 1, language = null) => {
       return _applyMapping(schema, state.typeMappings, 'id', false, () => {
         const key = `typeLabel."${ schema.id.toLowerCase() }"`;
 
-        if ( rootGetters['i18n/exists'](key) ) {
-          return rootGetters['i18n/t'](key, { count }).trim();
+        if ( rootGetters['i18n/exists'](key, language) ) {
+          return rootGetters['i18n/t'](key, { count }, language).trim();
         }
 
         const out = schema?.attributes?.kind || schema.id || '?';
@@ -532,6 +541,10 @@ export const getters = {
       // get added before children
       const keys = Object.keys(allTypes).sort((a, b) => a.length - b.length);
 
+      // Set these for later
+      const currentLocal = rootGetters['i18n/current']();
+      const defaultLocal = rootGetters['i18n/default']();
+
       for ( const type of keys ) {
         const typeObj = allTypes[type];
 
@@ -573,7 +586,7 @@ export const getters = {
           }
         }
 
-        const labelDisplay = highlightLabel(label, icon);
+        const labelDisplay = highlightLabel(label, icon, typeObj.count, typeObj.schema);
 
         if ( !labelDisplay ) {
           // Search happens in highlight and returns null if not found
@@ -680,11 +693,22 @@ export const getters = {
         return group;
       }
 
-      function highlightLabel(original, icon) {
+      function highlightLabel(original, icon, count, schema) {
         let label = escapeHtml(original);
 
         if ( searchRegex ) {
-          const match = label.match(searchRegex);
+          let match = label.match(searchRegex);
+
+          if (!match) {
+            if ( currentLocal !== defaultLocal && schema ) {
+              const defaultLabel = getters.labelFor(schema, count, defaultLocal);
+
+              if (defaultLabel && defaultLabel !== label ) {
+                label += ` (${ defaultLabel })`;
+                match = label.match(searchRegex);
+              }
+            }
+          }
 
           if ( match ) {
             label = `${ escapeHtml(match[1]) }<span class="highlight">${ escapeHtml(match[2]) }</span>${ escapeHtml(match[3]) }`;
@@ -1040,6 +1064,18 @@ export const getters = {
     };
   },
 
+  hasGraph(state, getters) {
+    return (resource) => {
+      const typeOptions = getters['optionsFor'](resource);
+
+      if (typeOptions && typeOptions.hasGraph) {
+        return graphConfigMap[resource];
+      }
+
+      return null;
+    };
+  },
+
   hasCustomEdit(state, getters, rootState) {
     return (rawType, subType) => {
       const key = getters.componentFor(rawType, subType);

package/store/uiplugins.ts

@@ -4,7 +4,7 @@
 // import { addObject, removeObject } from '@shell/utils/array';
 
 import { allHash } from '@shell/utils/promise';
-import { Plugin } from '~/shell/core/plugin';
+import { Plugin } from '@shell/core/plugin';
 
 interface UIPluginState {
   plugins: Plugin[],