@rancher/shell 0.3.8 → 0.3.10

package/plugins/steve/subscribe.js

@@ -9,7 +9,8 @@
 
 import { addObject, clear, removeObject } from '@shell/utils/array';
 import { get } from '@shell/utils/object';
-import { SCHEMA } from '@shell/config/types';
+import { SCHEMA, MANAGEMENT } from '@shell/config/types';
+import { SETTING } from '@shell/config/settings';
 import { CSRF } from '@shell/config/cookies';
 import { getPerformanceSetting } from '@shell/utils/settings';
 import Socket, {
@@ -29,16 +30,25 @@ import { DATE_FORMAT, TIME_FORMAT } from '@shell/store/prefs';
 import { escapeHtml } from '@shell/utils/string';
 import { keyForSubscribe } from '@shell/plugins/steve/resourceWatcher';
 import { waitFor } from '@shell/utils/async';
+import { WORKER_MODES } from './worker';
+import pAndNFiltering from '@shell/utils/projectAndNamespaceFiltering.utils';
 
 import { BLANK_CLUSTER } from '@shell/store/index.js';
+import { STORE } from '@shell/store/store-types';
 
 // minimum length of time a disconnect notification is shown
 const MINIMUM_TIME_NOTIFIED = 3000;
 
-const waitForManagement = (store) => {
-  const managementReady = () => store.state?.managementReady;
+const workerQueues = {};
 
-  return waitFor(managementReady, 'Management');
+const supportedStores = [STORE.CLUSTER, STORE.RANCHER, STORE.MANAGEMENT];
+
+const waitForSettingsSchema = (store) => {
+  return waitFor(() => !!store.getters['management/byId'](SCHEMA, MANAGEMENT.SETTING));
+};
+
+const waitForSettings = (store) => {
+  return waitFor(() => !!store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.UI_PERFORMANCE));
 };
 
 const isAdvancedWorker = (ctx) => {
@@ -46,7 +56,7 @@ const isAdvancedWorker = (ctx) => {
   const storeName = getters.storeName;
   const clusterId = rootGetters.clusterId;
 
-  if (storeName !== 'cluster' || clusterId === BLANK_CLUSTER) {
+  if (!supportedStores.includes(storeName) || (clusterId === BLANK_CLUSTER && storeName === STORE.CLUSTER)) {
     return false;
   }
 
@@ -55,19 +65,33 @@ const isAdvancedWorker = (ctx) => {
   return perfSetting?.advancedWorker.enabled;
 };
 
-// We only create a worker for the cluster store
 export async function createWorker(store, ctx) {
   const { getters, dispatch } = ctx;
   const storeName = getters.storeName;
 
   store.$workers = store.$workers || {};
 
-  if (storeName !== 'cluster') {
+  if (!supportedStores.includes(storeName)) {
     return;
   }
 
-  await waitForManagement(store);
-  // getting perf setting in a separate constant here because it'll provide other values we'll want later.
+  if (!store.$workers[storeName]) {
+    // we know we need a worker at this point but we don't know which one so we're creating a mock interface
+    // it will simply queue up any messages for the real worker to process when it loads up
+    store.$workers[storeName] = {
+      postMessage: (msg) => {
+        if (workerQueues[storeName]) {
+          workerQueues[storeName].push(msg);
+        } else {
+          workerQueues[storeName] = [msg];
+        }
+      },
+      mode: WORKER_MODES.WAITING
+    };
+  }
+
+  await waitForSettingsSchema(store);
+  await waitForSettings(store);
   const advancedWorker = isAdvancedWorker(ctx);
 
   const workerActions = {
@@ -81,21 +105,30 @@ export async function createWorker(store, ctx) {
       }
     },
     batchChanges: (batch) => {
-      dispatch('batchChanges', batch);
+      dispatch('batchChanges', namespaceHandler.validateBatchChange(ctx, batch));
     },
     dispatch: (msg) => {
       dispatch(`ws.${ msg.name }`, msg);
     },
+    redispatch: (msg) => {
+      /**
+       * because we had to queue up some messages prior to loading the worker:
+       * the basic worker will need to redispatch some of the queued messages back to the UI thread
+       */
+      Object.entries(msg).forEach(([action, params]) => {
+        dispatch(action, params);
+      });
+    },
     [EVENT_CONNECT_ERROR]: (e) => {
       dispatch('error', e );
     },
     [EVENT_DISCONNECT_ERROR]: (e) => {
       dispatch('error', e );
-    }
+    },
   };
 
-  if (!store.$workers[storeName]) {
-    const workerMode = advancedWorker ? 'advanced' : 'basic';
+  if (!store.$workers[storeName] || store.$workers[storeName].mode === WORKER_MODES.WAITING) {
+    const workerMode = advancedWorker ? WORKER_MODES.ADVANCED : WORKER_MODES.BASIC;
     const worker = store.steveCreateWorker(workerMode);
 
     store.$workers[storeName] = worker;
@@ -115,6 +148,12 @@ export async function createWorker(store, ctx) {
       });
     };
   }
+
+  while (workerQueues[storeName]?.length) {
+    const message = workerQueues[storeName].shift();
+
+    store.$workers[storeName].postMessage(message);
+  }
 }
 
 export function equivalentWatch(a, b) {
@@ -140,7 +179,67 @@ export function equivalentWatch(a, b) {
   return true;
 }
 
-function queueChange({ getters, state }, { data, revision }, load, label) {
+/**
+ * Sockets will not be able to subscribe to more than one namespace. If this is requested we pretend to handle it
+ * - Changes to all resources are monitored (no namespace provided in sub)
+ * - We ignore any events not from a required namespace (we have the conversion of project --> namespaces already)
+ */
+const namespaceHandler = {
+  /**
+   * Note - namespace can be a list of projects or namespaces
+   */
+  subscribeNamespace: (namespace) => {
+    if (pAndNFiltering.isApplicable({ namespaced: namespace }) && namespace.length) {
+      return undefined; // AKA sub to everything
+    }
+
+    return namespace;
+  },
+
+  validChange: ({ getters, rootGetters }, type, data) => {
+    const haveNamespace = getters.haveNamespace(type);
+
+    if (haveNamespace?.length) {
+      const namespaces = rootGetters.activeNamespaceCache;
+
+      if (!namespaces[data.metadata.namespace]) {
+        return false;
+      }
+    }
+
+    return true;
+  },
+
+  validateBatchChange: ({ getters, rootGetters }, batch) => {
+    const namespaces = rootGetters.activeNamespaceCache;
+
+    Object.entries(batch).forEach(([type, entries]) => {
+      const haveNamespace = getters.haveNamespace(type);
+
+      if (!haveNamespace?.length) {
+        return;
+      }
+
+      const schema = getters.schemaFor(type);
+
+      if (!schema?.attributes?.namespaced) {
+        return;
+      }
+
+      Object.keys(entries).forEach((id) => {
+        const namespace = id.split('/')[0];
+
+        if (!namespace || !namespaces[namespace]) {
+          delete entries[id];
+        }
+      });
+    });
+
+    return batch;
+  }
+};
+
+function queueChange({ getters, state, rootGetters }, { data, revision }, load, label) {
   const type = getters.normalizeType(data.type);
 
   const entry = getters.typeEntry(type);
@@ -153,6 +252,10 @@ function queueChange({ getters, state }, { data, revision }, load, label) {
 
   // console.log(`${ label } Event [${ state.config.namespace }]`, data.type, data.id); // eslint-disable-line no-console
 
+  if (!namespaceHandler.validChange({ getters, rootGetters }, type, data)) {
+    return;
+  }
+
   if ( load ) {
     state.queue.push({
       action: 'dispatch',
@@ -212,7 +315,7 @@ const sharedActions = {
 
     const url = `${ state.config.baseUrl }/subscribe`;
     const maxTries = growlsDisabled(rootGetters) ? null : 3;
-    const connectionMetadata = get(opt, 'metadata');
+    const metadata = get(opt, 'metadata');
 
     if (isAdvancedWorker(ctx)) {
       if (!this.$workers[getters.storeName]) {
@@ -222,7 +325,7 @@ const sharedActions = {
       // if the worker is in advanced mode then it'll contain it's own socket which it calls a 'watcher'
       this.$workers[getters.storeName].postMessage({
         createWatcher: {
-          connectionMetadata,
+          metadata,
           url:  `${ state.config.baseUrl }/subscribe`,
           csrf: this.$cookies.get(CSRF, { parseJSON: false }),
           maxTries
@@ -231,7 +334,7 @@ const sharedActions = {
     } else if ( socket ) {
       socket.setAutoReconnect(true);
       socket.setUrl(url);
-      socket.connect(connectionMetadata);
+      socket.connect(metadata);
     } else {
       socket = new Socket(`${ state.config.baseUrl }/subscribe`, true, null, null, maxTries);
 
@@ -263,7 +366,7 @@ const sharedActions = {
           }
         }
       });
-      socket.connect(connectionMetadata);
+      socket.connect(metadata);
     }
   },
 
@@ -297,6 +400,7 @@ const sharedActions = {
       type, selector, id, revision, namespace, stop, force
     } = params;
 
+    namespace = namespaceHandler.subscribeNamespace(namespace);
     type = getters.normalizeType(type);
 
     if (rootGetters['type-map/isSpoofed'](type)) {
@@ -356,7 +460,7 @@ const sharedActions = {
 
     const worker = this.$workers?.[getters.storeName] || {};
 
-    if (worker.mode === 'advanced') {
+    if (worker.mode === WORKER_MODES.ADVANCED || worker.mode === WORKER_MODES.WAITING) {
       if ( force ) {
         msg.force = true;
       }
@@ -375,6 +479,8 @@ const sharedActions = {
     const { commit, getters, dispatch } = ctx;
 
     if (getters['schemaFor'](type)) {
+      namespace = namespaceHandler.subscribeNamespace(namespace);
+
       const obj = {
         type,
         id,
@@ -760,8 +866,18 @@ const defaultActions = {
     }
 
     // If we're trying to watch this event, attempt to re-watch
-    if ( getters['schemaFor'](type) && getters['watchStarted'](obj) ) {
-      commit('setWatchStopped', obj);
+    //
+    // To make life easier in the advanced worker `resource.stop` --> `watch` is handled here (basically for access to getters.nextResourceVersion)
+    // This means the concept of resource sub watch state needs massaging
+    const advancedWorker = msg.advancedWorker;
+    const localState = !advancedWorker;
+    const watchStarted = localState ? getters['watchStarted'](obj) : advancedWorker;
+
+    if ( getters['schemaFor'](type) && watchStarted) {
+      if (localState) {
+        commit('setWatchStopped', obj);
+      }
+
       dispatch('watch', obj);
     }
   },

package/plugins/steve/worker/index.js

@@ -3,10 +3,16 @@ import basicWorkerConstructor from '@shell/plugins/steve/worker/web-worker.basic
 // eslint-disable-next-line no-unused-vars
 import advancedWorkerConstructor from '@shell/plugins/steve/worker/web-worker.advanced.js';
 
+export const WORKER_MODES = {
+  WAITING:  'waiting',
+  BASIC:    'basic',
+  ADVANCED: 'advanced'
+};
+
 export default function storeWorker(mode, options = {}, closures = {}) {
   let worker;
 
-  if (mode === 'advanced') {
+  if (mode === WORKER_MODES.ADVANCED) {
     worker = new advancedWorkerConstructor();
   } else {
     worker = new basicWorkerConstructor();

package/plugins/steve/worker/web-worker.advanced.js

@@ -93,12 +93,12 @@ const workerActions = {
     }
     caches[SCHEMA].load(collection);
   },
-  createWatcher: (metadata) => {
-    trace('createWatcher', metadata);
+  createWatcher: (opt) => {
+    trace('createWatcher', opt);
 
     const {
-      connectionMetadata, maxTries, url, csrf
-    } = metadata;
+      metadata, maxTries, url, csrf
+    } = opt;
 
     if (!state.watcher) {
       state.watcher = new ResourceWatcher(url, true, null, null, maxTries, csrf);
@@ -119,6 +119,10 @@ const workerActions = {
         }
       });
 
+      state.watcher.addEventListener('resync', (e) => {
+        self.postMessage({ redispatch: { resyncWatch: e.detail.data } });
+      });
+
       state.watcher.addEventListener(EVENT_CONNECT_ERROR, (e) => {
         handleConnectionError(EVENT_CONNECT_ERROR, e, state.watcher);
       });
@@ -129,7 +133,7 @@ const workerActions = {
 
       state.watcher.setDebug(state.debugWorker);
 
-      state.watcher.connect(connectionMetadata);
+      state.watcher.connect(metadata);
 
       // Flush the workerQueue
       while (state.workerQueue.length > 0) {
@@ -183,7 +187,8 @@ const workerActions = {
       resourceType,
       id,
       namespace,
-      selector
+      selector,
+      force: msg.force,
     };
 
     state.watcher.watch(watchKey, resourceVersion, resourceVersionTime, watchObject, skipResourceVersion);
@@ -270,10 +275,23 @@ const resourceWatcherActions = {
     }
   },
   'resource.stop': (msg) => {
-    // State is handled in the resourceWatcher, no need to bubble out to UI thread
+    trace('resource.stop', msg);
+
+    // State is handled in the resourceWatcher....
     const watchKey = watchKeyFromMessage(msg);
 
     removeFromWorkerQueue(watchKey);
+
+    // ... however we still want to bubble out to UI thread
+    // We'll save some hassle and ignore any resource.stop bubble if we're in error. the only thing that will clear that is a resync
+    if (!state.watcher?.watches[watchKey]?.error) {
+      // See comment in resourceWatcher 'resource.stop' handler, until we can resolve the resourceVersion within the resourceWatcher
+      // internally, we'll want to bubble this out to the UI thread. When that's resolved this won't be needed
+      resourceWatcherActions.dispatch({
+        ...msg,
+        advancedWorker: true,
+      });
+    }
   },
   'resource.error': (msg) => {
     // State is handled in the resourceWatcher, no need to bubble out to UI thread
@@ -287,7 +305,7 @@ const resourceWatcherActions = {
 /**
  * Covers message from UI Thread to Worker
  */
-onmessage = (e) => {
+self.onmessage = (e) => {
   /* on the off chance there's more than key in the message, we handle them in the order that they "keys" method provides which is
   // good enough for now considering that we never send more than one message action at a time right now */
   const messageActions = Object.keys(e?.data);

package/plugins/steve/worker/web-worker.basic.js

@@ -6,7 +6,7 @@ const SCHEMA_FLUSH_TIMEOUT = 2500;
 
 const state = {
   store:      '', // Store name
-  flushTimer: undefined, // Timer to flush the schema chaneg queue
+  flushTimer: undefined, // Timer to flush the schema change queue
   queue:      [], // Schema change queue
   schemas:    {} // Map of schema id to hash to track when a schema actually changes
 };
@@ -42,6 +42,25 @@ function load(data) {
   self.postMessage({ load: data });
 }
 
+// used for dispatching a function in the worker, primarily for redirecting messages intended for the advanced worker back to the UI thread
+function redispatch(msg) {
+  self.postMessage({ redispatch: msg });
+}
+
+/**
+ * These actions aren't applicable to the basic worker, so bounce back to ui thread
+ *
+ * These are called when a queue of actions is flushed. Queue is populated from requests made before we know if worker is basic or advanced.
+ */
+const advancedWorkerActions = {
+  watch: (msg) => {
+    redispatch({ send: msg });
+  },
+  createWatcher: (msg) => {
+    redispatch({ subscribe: msg });
+  }
+};
+
 const workerActions = {
   onmessage: (e) => {
     /* on the off chance there's more than key in the message, we handle them in the order that they "keys" method provides which is
@@ -75,7 +94,6 @@ const workerActions = {
 
       state.schemas[schema.id] = hashObj(schema);
     });
-    // console.log(JSON.parse(JSON.stringify(state.resources.schemas)));
   },
 
   // Called when schema is updated
@@ -91,7 +109,8 @@ const workerActions = {
 
     // Delete the schema from the map, so if it comes back we don't ignore it if the hash is the same
     delete state.schemas[id];
-  }
+  },
+  ...advancedWorkerActions
 };
 
-onmessage = workerActions.onmessage; // bind everything to the worker's onmessage handler via the workerAction
+self.onmessage = workerActions.onmessage; // bind everything to the worker's onmessage handler via the workerAction

package/public/index.html

@@ -5,7 +5,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="shortcut icon" type="image/x-icon" href="/public/favicon.png">
+    <link rel="shortcut icon" type="image/x-icon" href="/favicon.png">
     <title>Rancher</title>
 </head>
 

package/rancher-components/components/Form/Checkbox/Checkbox.vue

@@ -251,12 +251,12 @@ export default Vue.extend({
           <template v-else-if="label">{{ label }}</template>
           <i
             v-if="tooltipKey"
-            v-tooltip="t(tooltipKey)"
+            v-clean-tooltip="t(tooltipKey)"
             class="checkbox-info icon icon-info icon-lg"
           />
           <i
             v-else-if="tooltip"
-            v-tooltip="tooltip"
+            v-clean-tooltip="tooltip"
             class="checkbox-info icon icon-info icon-lg"
           />
         </slot>

package/rancher-components/components/Form/Radio/RadioGroup.vue

@@ -184,12 +184,12 @@ export default Vue.extend({
           </template>
           <i
             v-if="tooltipKey"
-            v-tooltip="t(tooltipKey)"
+            v-clean-tooltip="t(tooltipKey)"
             class="icon icon-info icon-lg"
           />
           <i
             v-else-if="tooltip"
-            v-tooltip="tooltip"
+            v-clean-tooltip="tooltip"
             class="icon icon-info icon-lg"
           />
         </h3>

package/rancher-components/components/LabeledTooltip/LabeledTooltip.vue

@@ -44,7 +44,7 @@ export default Vue.extend({
   >
     <template v-if="hover">
       <i
-        v-tooltip="value.content ? { ...{content: value.content, classes: [`tooltip-${status}`]}, ...value } : value"
+        v-clean-tooltip="value.content ? { ...{content: value.content, classes: [`tooltip-${status}`]}, ...value } : value"
         :class="{'hover':!value, [iconClass]: true}"
         class="icon status-icon"
       />

package/store/index.js

@@ -27,11 +27,13 @@ import {
   NAMESPACE_FILTER_NAMESPACED_PREFIX as NAMESPACED_PREFIX,
   NAMESPACE_FILTER_NAMESPACED_YES as NAMESPACED_YES,
   splitNamespaceFilterKey,
+  NAMESPACE_FILTER_NS_FULL_PREFIX,
 } from '@shell/utils/namespace-filter';
 import { allHash, allHashSettled } from '@shell/utils/promise';
 import { sortBy } from '@shell/utils/sort';
 import { addParam } from '@shell/utils/url';
 import semver from 'semver';
+import { STORE } from '@shell/store/store-types';
 
 // Disables strict mode for all store instances to prevent warning about changing state outside of mutations
 // because it's more efficient to do that sometimes.
@@ -41,19 +43,19 @@ export const BLANK_CLUSTER = '_';
 
 export const plugins = [
   Steve({
-    namespace:      'management',
+    namespace:      STORE.MANAGEMENT,
     baseUrl:        '/v1',
     modelBaseClass: BY_TYPE,
     supportsStream: false, // true, -- Disabled due to report that it's sometimes much slower in Chrome
   }),
   Steve({
-    namespace:      'cluster',
+    namespace:      STORE.CLUSTER,
     baseUrl:        '', // URL is dynamically set for the selected cluster
     supportsStream: false, // true, -- Disabled due to report that it's sometimes much slower in Chrome
     supportsGc:     true, // Enable garbage collection for this store only
   }),
   Steve({
-    namespace:      'rancher',
+    namespace:      STORE.RANCHER,
     baseUrl:        '/v3',
     supportsStream: false, // The norman API doesn't support streaming
     modelBaseClass: STEVE_MODEL_TYPES.NORMAN,
@@ -225,7 +227,6 @@ export const state = () => {
   return {
     managementReady:         false,
     clusterReady:            false,
-    isMultiCluster:          false,
     isRancher:               false,
     namespaceFilters:        [],
     activeNamespaceCache:    {}, // Used to efficiently check if a resource should be displayed
@@ -241,7 +242,6 @@ export const state = () => {
     serverVersion:           null,
     systemNamespaces:        [],
     isSingleProduct:         undefined,
-    namespaceFilterMode:     null,
   };
 };
 
@@ -250,8 +250,14 @@ export const getters = {
     return state.clusterReady === true;
   },
 
-  isMultiCluster(state) {
-    return state.isMultiCluster === true;
+  isMultiCluster(state, getters) {
+    const clusters = getters['management/all'](MANAGEMENT.CLUSTER);
+
+    if (clusters.length === 1 && clusters[0].metadata?.name === 'local') {
+      return false;
+    } else {
+      return true;
+    }
   },
 
   isRancher(state) {
@@ -278,15 +284,6 @@ export const getters = {
     return state.systemNamespaces;
   },
 
-  /**
-   * Namespace Filter Mode supplies a resource type to the NamespaceFilter.
-   *
-   * Only one of the resource type is allowed to be selected
-   */
-  namespaceFilterMode(state) {
-    return state.namespaceFilterMode;
-  },
-
   currentCluster(state, getters) {
     return getters['management/byId'](MANAGEMENT.CLUSTER, state.clusterId);
   },
@@ -372,34 +369,6 @@ export const getters = {
     return state.namespaceFilters.filter(x => !`${ x }`.startsWith(NAMESPACED_PREFIX)).length === 0;
   },
 
-  isSingleNamespace(state, getters) {
-    const product = getters['currentProduct'];
-
-    if ( !product ) {
-      return false;
-    }
-
-    if ( product.showWorkspaceSwitcher ) {
-      return false;
-    }
-
-    if ( getters.isAllNamespaces ) {
-      return false;
-    }
-
-    const filters = state.namespaceFilters;
-
-    if ( filters.length !== 1 ) {
-      return false;
-    }
-
-    if (filters[0].startsWith('ns://')) {
-      return filters[0];
-    }
-
-    return false;
-  },
-
   isMultipleNamespaces(state, getters) {
     const product = getters['currentProduct'];
 
@@ -421,7 +390,7 @@ export const getters = {
       return true;
     }
 
-    return !filters[0].startsWith('ns://');
+    return !filters[0].startsWith(NAMESPACE_FILTER_NS_FULL_PREFIX);
   },
 
   namespaceFilters(state) {
@@ -591,9 +560,8 @@ export const getters = {
 };
 
 export const mutations = {
-  managementChanged(state, { ready, isMultiCluster, isRancher }) {
+  managementChanged(state, { ready, isRancher }) {
     state.managementReady = ready;
-    state.isMultiCluster = isMultiCluster;
     state.isRancher = isRancher;
   },
   clusterReady(state, ready) {
@@ -621,10 +589,6 @@ export const mutations = {
     state.allNamespaces = namespace;
   },
 
-  setNamespaceFilterMode(state, mode) {
-    state.namespaceFilterMode = mode;
-  },
-
   pageActions(state, pageActions) {
     state.pageActions = pageActions;
   },
@@ -747,11 +711,7 @@ export const actions = {
 
     res = await allHash(promises);
     dispatch('i18n/init');
-    let isMultiCluster = true;
-
-    if ( res.clusters.length === 1 && res.clusters[0].metadata?.name === 'local' ) {
-      isMultiCluster = false;
-    }
+    const isMultiCluster = getters['isMultiCluster'];
 
     const pl = res.settings?.find(x => x.id === 'ui-pl')?.value;
     const brand = res.settings?.find(x => x.id === SETTING.BRAND)?.value;
@@ -773,7 +733,6 @@ export const actions = {
 
     commit('managementChanged', {
       ready: true,
-      isMultiCluster,
       isRancher,
     });
 
@@ -967,10 +926,6 @@ export const actions = {
     commit('updateNamespaces', { filters: ids });
   },
 
-  setNamespaceFilterMode({ commit }, mode) {
-    commit('setNamespaceFilterMode', mode);
-  },
-
   async cleanNamespaces({ getters, dispatch }) {
     // Initialise / Remove any filters that the user no-longer has access to
     await dispatch('management/findAll', { type: MANAGEMENT.CLUSTER }); // So they can be got byId below

package/store/store-types.js

@@ -0,0 +1,5 @@
+export const STORE = {
+  CLUSTER:    'cluster',
+  RANCHER:    'rancher',
+  MANAGEMENT: 'management',
+};