@rancher/shell 0.3.0 → 0.3.1

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

@@ -0,0 +1,302 @@
+/**
+ * Advanced Worker is enabled by performance setting
+ * relocates cluster resource sockets off the UI thread and into a webworker
+ */
+
+import { SCHEMA, COUNT } from '@shell/config/types';
+import ResourceWatcher, { watchKeyFromMessage } from '@shell/plugins/steve/resourceWatcher';
+import ResourceCache from '@shell/plugins/steve/caches/resourceCache';
+import { EVENT_MESSAGE, EVENT_CONNECT_ERROR, EVENT_DISCONNECT_ERROR } from '@shell/utils/socket';
+import { normalizeType, keyFieldFor } from '@shell/plugins/dashboard-store/normalize';
+import { addSchemaIndexFields } from '@shell/plugins/steve/schema.utils';
+
+const caches = {};
+
+const state = {
+  watcher:      undefined,
+  store:        '', // Store name
+  /**
+   * Store `watch`/`unwatch` events to process when the socket is created
+   */
+  workerQueue:  [],
+  batchChanges: {},
+  debugWorker:  false
+};
+
+const trace = (...args) => {
+  state.debugWorker && console.info('Advanced Worker:', ...args); // eslint-disable-line no-console
+};
+
+trace('created');
+
+const maintenanceInterval = setInterval(() => {
+  if (Object.keys(state.batchChanges).length) {
+    self.postMessage({ batchChanges: state.batchChanges });
+    state.batchChanges = {};
+  }
+}, 5000); // 5 seconds
+
+const makeResourceProps = (msg) => {
+  const { resourceType, data: { type }, data } = msg;
+  const rawType = resourceType || type;
+  const normalizedType = normalizeType(rawType === 'counts' ? COUNT : rawType);
+  const keyField = keyFieldFor(normalizedType);
+
+  if ( normalizedType === SCHEMA ) {
+    addSchemaIndexFields(data);
+  }
+
+  return {
+    type: normalizedType,
+    id:   data[keyField],
+    data
+  };
+};
+
+/**
+ * Pass the EVENT_CONNECT_ERROR / EVENT_DISCONNECT_ERROR back to the UI thread
+ */
+const handleConnectionError = (eventType, event, watcher) => {
+  trace('createWatcher', eventType, event);
+  self.postMessage({
+    [eventType]: {
+      type:       event.type,
+      detail:     event.detail,
+      srcElement: {
+        disconnectedAt: watcher.disconnectedAt,
+        url:            watcher.url,
+      }
+    }
+  });
+};
+
+/**
+ * Remove any pending messages related to this resource from the queue
+ */
+const removeFromWorkerQueue = (watchKey) => {
+  state.workerQueue = state.workerQueue.filter((workerMessage) => {
+    const [, msg] = Object.entries(workerMessage)[0];
+    const workerMessageWatchKey = watchKeyFromMessage(msg);
+
+    return watchKey !== workerMessageWatchKey;
+  });
+};
+
+/**
+ * These are things that we do when we get a message from the UI thread
+ */
+const workerActions = {
+  // ToDo: SM we'll make a generic loader for all resource types when we need it but it'll be pretty similar to this
+  loadSchemas: (collection) => {
+    if (!caches[SCHEMA]) {
+      caches[SCHEMA] = new ResourceCache(SCHEMA);
+    }
+    caches[SCHEMA].load(collection);
+  },
+  createWatcher: (metadata) => {
+    trace('createWatcher', metadata);
+
+    const {
+      connectionMetadata, maxTries, url, csrf
+    } = metadata;
+
+    if (!state.watcher) {
+      state.watcher = new ResourceWatcher(url, true, null, null, maxTries, csrf);
+
+      state.watcher.addEventListener(EVENT_MESSAGE, (e) => {
+        const event = e.detail;
+
+        if (event.data) {
+          const msg = JSON.parse(event.data);
+
+          if (msg.name) {
+            if (resourceWatcherActions[msg.name]) {
+              resourceWatcherActions[msg.name](msg);
+            } else {
+              resourceWatcherActions.dispatch(msg);
+            }
+          }
+        }
+      });
+
+      state.watcher.addEventListener(EVENT_CONNECT_ERROR, (e) => {
+        handleConnectionError(EVENT_CONNECT_ERROR, e, state.watcher);
+      });
+
+      state.watcher.addEventListener(EVENT_DISCONNECT_ERROR, (e) => {
+        handleConnectionError(EVENT_DISCONNECT_ERROR, e, state.watcher);
+      });
+
+      state.watcher.setDebug(state.debugWorker);
+
+      state.watcher.connect(connectionMetadata);
+
+      // Flush the workerQueue
+      while (state.workerQueue.length > 0) {
+        trace('createWatcher', 'flushing workerQueue', state.workerQueue);
+
+        const workerMessage = state.workerQueue.shift();
+        const [action, msg] = Object.entries(workerMessage)[0];
+
+        if (workerActions[action]) {
+          workerActions[action](msg);
+        } else {
+          console.warn('no associated action for:', action); // eslint-disable-line no-console
+        }
+      }
+    }
+  },
+  watch: (msg) => {
+    trace('watch', msg);
+
+    const watchKey = watchKeyFromMessage(msg);
+
+    if (msg.stop) {
+      workerActions.unwatch(watchKey);
+
+      return;
+    }
+
+    // If socket is in error don't try to watch.... unless we `force` it
+    if (!msg.force && !!state.watcher?.watches[watchKey]?.error) {
+      return;
+    }
+
+    if (!state.watcher) {
+      state.workerQueue.push({ watch: msg });
+
+      return;
+    }
+
+    const {
+      resourceType,
+      namespace,
+      id,
+      selector,
+      resourceVersion
+    } = msg;
+
+    const resourceVersionTime = resourceVersion ? Date.now() : undefined;
+    const skipResourceVersion = [SCHEMA, COUNT].includes(resourceType);
+
+    const watchObject = {
+      resourceType,
+      id,
+      namespace,
+      selector
+    };
+
+    state.watcher.watch(watchKey, resourceVersion, resourceVersionTime, watchObject, skipResourceVersion);
+  },
+  unwatch: (watchKey) => {
+    trace('unwatch', watchKey);
+
+    removeFromWorkerQueue(watchKey);
+
+    if (!state.watcher) {
+      return;
+    }
+
+    state.watcher.unwatch(watchKey);
+  },
+  initWorker: ({ storeName }) => {
+    trace('initWorker', storeName);
+
+    state.store = storeName;
+  },
+  destroyWorker: () => {
+    trace('destroyWorker');
+
+    clearInterval(maintenanceInterval);
+
+    function destroyWorkerComplete() {
+      delete self.onmessage;
+      self.postMessage({ destroyWorker: true }); // we're only passing the boolean here because the key needs to be something truthy to ensure it's passed on the object.
+    }
+
+    // disconnect takes a callback which we'll use to close the webworker
+    if (state.watcher) {
+      state.watcher?.disconnect().then(destroyWorkerComplete);
+    } else {
+      destroyWorkerComplete();
+    }
+  },
+
+  toggleDebug: ({ on }) => {
+    state.debugWorker = !!on;
+    state.watcher.setDebug(!!on);
+  },
+  updateBatch(type, id, change) {
+    if (!state.batchChanges[type]) {
+      state.batchChanges[type] = {};
+    }
+    state.batchChanges[type][id] = change;
+  }
+};
+
+/**
+ * These are things that we do when we get a message from the resourceWatcher
+ */
+const resourceWatcherActions = {
+  'resource.change': (msg) => {
+    const { type, id, data } = makeResourceProps(msg);
+
+    if (caches[type]) {
+      caches[type].change(data, () => workerActions.updateBatch(type, id, data));
+    } else {
+      workerActions.updateBatch(type, id, data);
+    }
+  },
+  // ToDo: SM create is functionally identical to change in the cache but the worker isn't supposed to know that hence the near-duplicate code
+  'resource.create': (msg) => {
+    const { type, id, data } = makeResourceProps(msg);
+
+    if (caches[type]) {
+      caches[type].create(data, () => workerActions.updateBatch(type, id, data));
+    } else {
+      workerActions.updateBatch(type, id, data);
+    }
+  },
+  'resource.start': (msg) => {
+    // State is handled in the resourceWatcher, no need to bubble out to UI thread
+  },
+  'resource.remove': (msg) => {
+    const { type, id } = makeResourceProps(msg);
+
+    if (caches[type]) {
+      caches[type].remove(id, () => workerActions.updateBatch(type, id, {}));
+    } else {
+      workerActions.updateBatch(type, id, {});
+    }
+  },
+  'resource.stop': (msg) => {
+    // State is handled in the resourceWatcher, no need to bubble out to UI thread
+    const watchKey = watchKeyFromMessage(msg);
+
+    removeFromWorkerQueue(watchKey);
+  },
+  'resource.error': (msg) => {
+    // State is handled in the resourceWatcher, no need to bubble out to UI thread
+    console.warn(`Resource error [${ state.store }]`, msg.resourceType, ':', msg.data.error); // eslint-disable-line no-console
+  },
+  dispatch: (msg) => {
+    self.postMessage({ dispatch: msg });
+  }
+};
+
+/**
+ * Covers message from UI Thread to Worker
+ */
+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);
+
+  messageActions.forEach((action) => {
+    if (workerActions[action]) {
+      workerActions[action](e?.data[action]);
+    } else {
+      console.warn('no associated action for:', action); // eslint-disable-line no-console
+    }
+  });
+}; // bind everything to the worker's onmessage handler via the workerActions

package/plugins/steve/{web-worker.steve-sub-worker.js → worker/web-worker.basic.js}

@@ -1,36 +1,16 @@
 import { SCHEMA } from '@shell/config/types';
+import { hashObj } from '@shell/utils/crypto/browserHashUtils';
+import { removeSchemaIndexFields } from '@shell/plugins/steve/schema.utils';
 
-const COUNTS_FLUSH_TIMEOUT = 5000;
 const SCHEMA_FLUSH_TIMEOUT = 2500;
 
 const state = {
   store:      '', // Store name
-  counts:     [], // Buffer of count resources recieved in a given window
-  countTimer: undefined, // Tiemr to flush the count buffer
   flushTimer: undefined, // Timer to flush the schema chaneg queue
   queue:      [], // Schema change queue
   schemas:    {} // Map of schema id to hash to track when a schema actually changes
 };
 
-// Quick, simple hash function
-function hash(str) {
-  let hash = 0;
-
-  for (let i = 0; i < str.length; i++) {
-    const char = str.charCodeAt(i);
-
-    hash = (hash << 5) - hash + char;
-    hash &= hash;
-  }
-
-  return new Uint32Array([hash])[0].toString(36);
-}
-
-// Quick, simple hash function to generate hash for an object
-function hashObj(obj) {
-  return hash(JSON.stringify(obj, null, 2));
-}
-
 function flush() {
   state.queue.forEach((schema) => {
     const hash = hashObj(schema);
@@ -81,29 +61,9 @@ const workerActions = {
   },
 
   destroyWorker: () => {
-    clearTimeout(state.countTimer);
     clearTimeout(state.flushTimer);
 
     self.postMessage({ destroyWorker: true }); // we're only passing the boolean here because the key needs to be something truthy to ensure it's passed on the object.
-
-    // Web worker global function to terminate the web worker
-    close();
-  },
-
-  // Debounce counts messages so we only process at most 1 every 5 seconds
-  countsUpdate(resource) {
-    state.counts.push(resource);
-
-    if (!state.countTimer) {
-      state.countTimer = setTimeout(() => {
-        const last = state.counts.pop();
-
-        state.counts = [];
-        state.countTimer = null;
-
-        load(last);
-      }, COUNTS_FLUSH_TIMEOUT);
-    }
   },
 
   // Called to load schema
@@ -111,8 +71,7 @@ const workerActions = {
     schemas.forEach((schema) => {
       // These properties are added to the object, but aren't on the raw object, so remove them
       // otherwise our comparison will show changes when there aren't any
-      delete schema._id;
-      delete schema._group;
+      removeSchemaIndexFields(schema);
 
       state.schemas[schema.id] = hashObj(schema);
     });

package/rancher-components/Card/Card.vue

@@ -57,18 +57,18 @@ export default Vue.extend({
 <template>
   <div class="card-container" :class="{'highlight-border': showHighlightBorder, 'card-sticky': sticky}">
     <div class="card-wrap">
-      <div class="card-title" data-testid="card-title-slot">
+      <div class="card-title">
         <slot name="title">
           {{ title }}
         </slot>
       </div>
       <hr />
-      <div class="card-body" data-testid="card-body-slot">
+      <div class="card-body">
         <slot name="body">
           {{ content }}
         </slot>
       </div>
-      <div v-if="showActions" class="card-actions" data-testid="card-actions-slot">
+      <div v-if="showActions" class="card-actions">
         <slot name="actions">
           <button class="btn role-primary" @click="buttonAction">
             {{ buttonText }}

package/rancher-components/Form/TextArea/TextAreaAutoGrow.vue

@@ -9,6 +9,7 @@ declare module 'vue/types/vue' {
     queueResize(): void;
   }
 }
+
 export default Vue.extend({
   inheritAttrs: false,