@rancher/shell 0.1.3 → 0.1.21

package/plugins/dashboard-store/mutations.js

@@ -3,18 +3,19 @@ import { addObject, addObjects, clear, removeObject } from '@shell/utils/array';
 import { SCHEMA } from '@shell/config/types';
 import { normalizeType } from '@shell/plugins/dashboard-store/normalize';
 import { classify } from '@shell/plugins/dashboard-store/classify';
+import garbageCollect from '@shell/utils/gc/gc';
 
 function registerType(state, type) {
   let cache = state.types[type];
 
   if ( !cache ) {
     cache = {
-      list:         [],
-      haveAll:      false,
-      haveSelector: {},
-      revision:     0, // The highest known resourceVersion from the server for this type
-      generation:   0, // Updated every time something is loaded for this type
-      loadCounter:  0, // Used to cancel incremental loads if the page changes during load
+      list:             [],
+      haveAll:          false,
+      haveSelector:     {},
+      revision:         0, // The highest known resourceVersion from the server for this type
+      generation:       0, // Updated every time something is loaded for this type
+      loadCounter:      0, // Used to cancel incremental loads if the page changes during load
     };
 
     // Not enumerable so they don't get sent back to the client for SSR
@@ -120,6 +121,8 @@ export function forgetType(state, type) {
     cache.map.clear();
     delete state.types[type];
 
+    garbageCollect.gcResetType(state, type);
+
     return true;
   }
 }
@@ -131,6 +134,8 @@ export function resetStore(state, commit) {
   for ( const type of Object.keys(state.types) ) {
     commit(`${ state.config.namespace }/forgetType`, type);
   }
+
+  garbageCollect.gcResetStore(state);
 }
 
 export function remove(state, obj, getters) {
@@ -308,5 +313,6 @@ export default {
     if (typeData) {
       typeData.loadCounter++;
     }
-  }
+  },
+
 };

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

@@ -9,7 +9,7 @@ import {
   AS,
   MODE
 } from '@shell/config/query-params';
-import { DEV } from '@shell/store/prefs';
+import { VIEW_IN_API } from '@shell/store/prefs';
 import { addObject, addObjects, findBy, removeAt } from '@shell/utils/array';
 import CustomValidators from '@shell/utils/custom-validators';
 import { downloadFile, generateZip } from '@shell/utils/download';
@@ -966,7 +966,7 @@ export default class Resource {
   }
 
   get canViewInApi() {
-    return this.hasLink('self') && this.$rootGetters['prefs/get'](DEV);
+    return this.hasLink('self') && this.$rootGetters['prefs/get'](VIEW_IN_API);
   }
 
   get canYaml() {

package/plugins/formatters.js

@@ -0,0 +1,15 @@
+// This registers all of the built-in formatters into the SortableTable cache
+
+// We do it here to keep it away from plugins
+// It was in SortableTable itself, but this causes plugins to pull in all formatters and their dependencies
+
+import { FORMATTERS } from '@shell/components/SortableTable';
+
+const components = require.context('@shell/components/formatter', false, /[A-Z]\w+\.(vue)$/);
+
+components.keys().forEach((fileName) => {
+  const componentConfig = components(fileName);
+  const componentName = fileName.split('/').pop().split('.')[0];
+
+  FORMATTERS[componentName] = componentConfig.default || componentConfig;
+});

package/plugins/plugin.js

@@ -1,10 +1,11 @@
-// This plugin loads any extensions at app load time
-
-import { allHash } from '@shell/utils/promise';
+// This plugin loads any UI Plugins at app load time
+import { allHashSettled } from '@shell/utils/promise';
+import { shouldNotLoadPlugin, UI_PLUGIN_BASE_URL } from '@shell/config/uiplugins';
 
 const META_NAME_PREFIX = 'app-autoload-';
 
-export default async(context) => {
+export default async function(context) {
+  // UI Plugins declared in the HTML head
   const meta = context.app?.head?.meta || [];
   const hash = {};
 
@@ -18,5 +19,59 @@ export default async(context) => {
     }
   });
 
-  await allHash(hash);
-};
+  // Provide a mechanism to load the UI without the plugins loaded - in case there is a problem
+  let loadPlugins = true;
+
+  if (context.route?.path.endsWith('/safeMode')) {
+    loadPlugins = false;
+    console.warn('Safe Mode - plugins will not be loaded'); // eslint-disable-line no-console
+  }
+
+  if (loadPlugins) {
+    // TODO: Get rancher version using the new API (can't use setting as we have not loading the store)
+    const rancherVersion = undefined;
+
+    // Fetch list of installed plugins from endpoint
+    try {
+      const res = await context.store.dispatch('management/request', {
+        url:                  `${ UI_PLUGIN_BASE_URL }/index.json`,
+        method:               'GET',
+        headers:              { accept: 'application/json' },
+        redirectUnauthorized: false,
+      });
+
+      if (res) {
+        const entries = res.entries || res.Entries || {};
+
+        Object.values(entries).forEach((plugin) => {
+          const shouldNotLoad = shouldNotLoadPlugin(plugin, rancherVersion); // Error key string or false
+
+          if (!shouldNotLoad) {
+            hash[plugin.name] = context.$plugin.loadPluginAsync(plugin);
+          } else {
+            context.store.dispatch('uiplugins/setError', { name: plugin.name, error: shouldNotLoad });
+          }
+        });
+      }
+    } catch (e) {
+      console.error('Could not load UI Plugin list', e); // eslint-disable-line no-console
+    }
+
+    // Load all of the plugins
+    const pluginLoads = await allHashSettled(hash);
+
+    // Some pluigns may have failed to load - store this
+    Object.keys(pluginLoads).forEach((name) => {
+      const res = pluginLoads[name];
+
+      if (res?.status === 'rejected') {
+        console.error(`Failed to load plugin: ${ name }`); // eslint-disable-line no-console
+
+        // Record error in the uiplugins store, so that we can show this to the user
+        context.store.dispatch('uiplugins/setError', { name, error: 'plugins.error.load' });
+      }
+    });
+  }
+
+  return true;
+}

package/plugins/steve/getters.js

@@ -1,6 +1,7 @@
 import { isArray } from '@shell/utils/array';
 import { BY_TYPE } from '@shell/plugins/dashboard-store/classify';
 import { lookup } from '@shell/plugins/dashboard-store/model-loader';
+import { NAMESPACE, SCHEMA, COUNT, UI } from '@shell/config/types';
 
 import SteveModel from './steve-class';
 import HybridModel, { cleanHybridResources } from './hybrid-class';
@@ -12,6 +13,13 @@ export const STEVE_MODEL_TYPES = {
   BY_TYPE: 'byType'
 };
 
+const GC_IGNORE_TYPES = {
+  [COUNT]:       true,
+  [NAMESPACE]:   true,
+  [SCHEMA]:      true,
+  [UI.NAV_LINK]: true,
+};
+
 export default {
   urlOptions: () => (url, opt) => {
     opt = opt || {};
@@ -110,4 +118,8 @@ export default {
     return map?.list || [];
   },
 
+  gcIgnoreTypes: () => {
+    return GC_IGNORE_TYPES;
+  }
+
 };

package/plugins/steve/mutations.js

@@ -64,7 +64,7 @@ export default {
 
       if (worker) {
         // Store raw json objects, not the proxies
-        worker.loadSchema(data);
+        worker.postMessage({ loadSchemas: data });
       }
     }
   },

package/plugins/steve/subscribe.js

@@ -1,7 +1,7 @@
 import { addObject, clear, removeObject } from '@shell/utils/array';
 import { get } from '@shell/utils/object';
-import { COUNT, MANAGEMENT, SCHEMA } from '@shell/config/types';
-import { SETTING } from '@shell/config/settings';
+import { COUNT, SCHEMA } from '@shell/config/types';
+import { getPerformanceSetting } from '@shell/config/settings';
 import Socket, {
   EVENT_CONNECTED,
   EVENT_DISCONNECTED,
@@ -16,8 +16,7 @@ import { DATE_FORMAT, TIME_FORMAT } from '@shell/store/prefs';
 import { escapeHtml } from '@shell/utils/string';
 
 // eslint-disable-next-line
-import Worker from './web-worker.steve-sub-worker.js'
-import * as Comlink from 'comlink';
+import webworker from './web-worker.steve-sub-worker.js';
 
 export const NO_WATCH = 'NO_WATCH';
 export const NO_SCHEMA = 'NO_SCHEMA';
@@ -25,9 +24,6 @@ export const NO_SCHEMA = 'NO_SCHEMA';
 // minimum length of time a disconnect notification is shown
 const MINIMUM_TIME_NOTIFIED = 3000;
 
-// minimum time a socket must be disconnected for before sending a growl
-const MINIMUM_TIME_DISCONNECTED = 10000;
-
 // We only create a worker for the cluster store
 export function createWorker(store, ctx) {
   const { getters } = ctx;
@@ -39,16 +35,33 @@ export function createWorker(store, ctx) {
     return;
   }
 
-  function callback(resource) {
-    queueChange(ctx, resource, true, 'Change');
-  }
+  const workerActions = {
+    load: (resource) => {
+      queueChange(ctx, resource, true, 'Change');
+    },
+    destroyWorker: () => {
+      if (store.$workers) {
+        delete store.$workers[storeName];
+      }
+    }
+  };
 
   if (!store.$workers[storeName]) {
-    const worker = Comlink.wrap(new Worker());
+    const worker = new webworker();
 
     store.$workers[storeName] = worker;
 
-    worker.initWorker(storeName, Comlink.proxy(callback));
+    worker.postMessage({ initWorker: { storeName } });
+
+    store.$workers[storeName].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) => {
+        workerActions[action](e?.data[action]);
+      });
+    };
   }
 }
 
@@ -119,6 +132,10 @@ function queueChange({ getters, state }, { data, revision }, load, label) {
   }
 }
 
+function growlsDisabled(rootGetters) {
+  return getPerformanceSetting(rootGetters)?.disableWebsocketNotification;
+}
+
 export const actions = {
   subscribe(ctx, opt) {
     const {
@@ -145,7 +162,9 @@ export const actions = {
       socket.setAutoReconnect(true);
       socket.setUrl(url);
     } else {
-      socket = new Socket(`${ state.config.baseUrl }/subscribe`);
+      const maxTries = growlsDisabled(rootGetters) ? null : 3;
+
+      socket = new Socket(`${ state.config.baseUrl }/subscribe`, true, null, null, maxTries);
 
       commit('setSocket', socket);
       socket.addEventListener(EVENT_CONNECTED, (e) => {
@@ -177,24 +196,17 @@ export const actions = {
       });
     }
 
-    socket.connect(get(opt, 'metadata'));
+    socket.connect(get(opt, 'metadata') );
   },
 
-  unsubscribe({ state, commit, getters }) {
+  unsubscribe({ commit, getters, state }) {
     const socket = state.socket;
     const worker = (this.$workers || {})[getters.storeName];
 
     commit('setWantSocket', false);
 
     if (worker) {
-      try {
-        worker.destroyWorker();
-        worker[Comlink.releaseProxy]();
-      } catch (e) {
-        console.error(e); // eslint-disable-line no-console
-      }
-
-      delete this.$workers[getters.storeName];
+      worker.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.
     }
 
     if ( socket ) {
@@ -396,8 +408,10 @@ export const actions = {
     commit, dispatch, state, getters, rootGetters
   }, event) {
     state.debugSocket && console.info(`WebSocket Opened [${ getters.storeName }]`); // eslint-disable-line no-console
-
     const socket = event.currentTarget;
+    const tries = event?.detail?.tries; // have to pull it off of the event because the socket's tries is already reset to 0
+    const t = rootGetters['i18n/t'];
+    const disableGrowl = growlsDisabled(rootGetters);
 
     this.$socket = socket;
 
@@ -420,19 +434,16 @@ export const actions = {
     if ( socket.hasReconnected ) {
       await dispatch('reconnectWatches');
       // Check for disconnect notifications and clear them
-      const growlErr = rootGetters['growl/find']({ key: 'url', val: this.$socket.url });
+      const growlErr = rootGetters['growl/find']({ key: 'url', val: socket.url });
 
       if (growlErr) {
-        const now = Date.now();
-
-        // even if the socket reconnected, keep the error growl for at least a few seconds to ensure its readable
-        if (now >= growlErr.earliestClose) {
-          dispatch('growl/remove', growlErr.id, { root: true });
-        } else {
-          setTimeout(() => {
-            dispatch('growl/remove', growlErr.id, { root: true });
-          }, growlErr.earliestClose - now);
-        }
+        dispatch('growl/remove', growlErr.id, { root: true });
+      }
+      if (tries > 1 && !disableGrowl) {
+        dispatch('growl/success', {
+          title:   t('growl.reconnected.title'),
+          message: t('growl.reconnected.message', { url: this.$socket.url, tries }),
+        }, { root: true });
       }
     }
 
@@ -456,42 +467,53 @@ export const actions = {
   }, e) {
     clearTimeout(state.queueTimer);
     state.queueTimer = null;
-    if (e.type === EVENT_DISCONNECT_ERROR) {
-      // determine if websocket notifications are disabled
-      const perfSetting = rootGetters['management/byId'](MANAGEMENT.SETTING, SETTING.UI_PERFORMANCE);
-      let disableGrowl = false;
 
-      if ( perfSetting?.value ) {
-        disableGrowl = JSON.parse(perfSetting.value).disableWebsocketNotification || false;
-      }
+    // determine if websocket notifications are disabled
+    const disableGrowl = growlsDisabled(rootGetters);
 
-      if ( !disableGrowl ) {
-        // do not send a growl notification unless the socket stays disconnected for more than MINIMUM_TIME_DISCONNECTED
-        setTimeout(() => {
-          if (state.socket.isConnected()) {
-            return;
-          }
-          const dateFormat = escapeHtml( rootGetters['prefs/get'](DATE_FORMAT));
-          const timeFormat = escapeHtml( rootGetters['prefs/get'](TIME_FORMAT));
-          const time = e?.srcElement?.disconnectedAt || Date.now();
-
-          const timeFormatted = `${ day(time).format(`${ dateFormat } ${ timeFormat }`) }`;
-          const url = e?.srcElement?.url;
-
-          const t = rootGetters['i18n/t'];
-
-          dispatch('growl/error', {
-            title:         t('growl.disconnected.title'),
-            message:       t('growl.disconnected.message', { url, time: timeFormatted }, { raw: true }),
-            icon:          'error',
-            earliestClose: time + MINIMUM_TIME_NOTIFIED + MINIMUM_TIME_DISCONNECTED,
-            url
-          }, { root: true });
-        }, MINIMUM_TIME_DISCONNECTED);
+    if (!disableGrowl) {
+      const dateFormat = escapeHtml( rootGetters['prefs/get'](DATE_FORMAT));
+      const timeFormat = escapeHtml( rootGetters['prefs/get'](TIME_FORMAT));
+      const time = e?.srcElement?.disconnectedAt || Date.now();
+
+      const timeFormatted = `${ day(time).format(`${ dateFormat } ${ timeFormat }`) }`;
+      const url = e?.srcElement?.url;
+      const tries = state?.socket?.tries;
+
+      const t = rootGetters['i18n/t'];
+
+      const growlErr = rootGetters['growl/find']({ key: 'url', val: url });
+
+      if (e.type === EVENT_CONNECT_ERROR) { // if this occurs, then we're at least retrying to connect
+        if (growlErr) {
+          dispatch('growl/remove', growlErr.id, { root: true });
+        }
+        dispatch('growl/error', {
+          title:         t('growl.connectError.title'),
+          message:       t('growl.connectError.message', {
+            url, time: timeFormatted, tries
+          }, { raw: true }),
+          icon:          'error',
+          earliestClose: time + MINIMUM_TIME_NOTIFIED,
+          url
+        }, { root: true });
+      } else if (e.type === EVENT_DISCONNECT_ERROR) { // if this occurs, we've given up on trying to reconnect
+        if (growlErr) {
+          dispatch('growl/remove', growlErr.id, { root: true });
+        }
+        dispatch('growl/error', {
+          title:         t('growl.disconnectError.title'),
+          message:       t('growl.disconnectError.message', {
+            url, time: timeFormatted, tries
+          }, { raw: true }),
+          icon:          'error',
+          earliestClose: time + MINIMUM_TIME_NOTIFIED,
+          url
+        }, { root: true });
+      } else {
+        // if the error is not a connect error or disconnect error, the socket never worked: log whether the current browser is safari
+        console.error(`WebSocket Connection Error [${ getters.storeName }]`, e.detail); // eslint-disable-line no-console
       }
-    } else {
-      // if the error is not a disconnect error, the socket never worked: log whether the current browser is safari
-      console.error(`WebSocket Connection Error [${ getters.storeName }]`, e.detail); // eslint-disable-line no-console
     }
   },
 
@@ -583,7 +605,7 @@ export const actions = {
       const worker = (this.$workers || {})[ctx.getters.storeName];
 
       if (worker) {
-        worker.countsUpdate(msg);
+        worker.postMessage({ countsUpdate: msg });
 
         // No further processing - let the web worker debounce the counts
         return;
@@ -596,7 +618,7 @@ export const actions = {
       const worker = (this.$workers || {})[ctx.getters.storeName];
 
       if (worker) {
-        worker.updateSchema(data);
+        worker.postMessage({ updateSchema: data });
 
         // No further processing - let the web worker check the schema updates
         return;
@@ -631,7 +653,7 @@ export const actions = {
       const worker = (this.$workers || {})[ctx.getters.storeName];
 
       if (worker) {
-        worker.removeSchema(data.id);
+        worker.postMessage({ removeSchema: data.id });
       }
     }
 
@@ -712,7 +734,7 @@ export const mutations = {
     clear(state.started);
     clear(state.pendingFrames);
     clear(state.queue);
-    clearInterval(state.queueTimer);
+    clearTimeout(state.queueTimer);
     state.deferredRequests = {};
     state.queueTimer = null;
   }

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

@@ -1,4 +1,3 @@
-import * as Comlink from 'comlink';
 import { SCHEMA } from '@shell/config/types';
 
 const COUNTS_FLUSH_TIMEOUT = 5000;
@@ -6,7 +5,6 @@ const SCHEMA_FLUSH_TIMEOUT = 2500;
 
 const state = {
   store:      '', // Store name
-  load:       undefined, // Load callback to load a resource into the store
   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
@@ -61,22 +59,33 @@ state.flushTimer = setTimeout(flush, SCHEMA_FLUSH_TIMEOUT);
 
 // Callback to the store's load function (in the main thread) to process a load
 function load(data) {
-  if (state.load) {
-    state.load(data);
-  }
+  self.postMessage({ load: data });
 }
 
-// Web Worker API
-const fns = {
-  initWorker(storeName, loadFn) {
+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
+    // 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
+      }
+    });
+  },
+  initWorker: ({ storeName }) => {
     state.store = storeName;
-    state.load = loadFn;
   },
 
-  destroyWorker() {
+  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();
   },
@@ -98,7 +107,7 @@ const fns = {
   },
 
   // Called to load schema
-  loadSchema(schemas) {
+  loadSchemas: (schemas) => {
     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
@@ -107,16 +116,17 @@ const fns = {
 
       state.schemas[schema.id] = hashObj(schema);
     });
+    // console.log(JSON.parse(JSON.stringify(state.resources.schemas)));
   },
 
   // Called when schema is updated
-  updateSchema(schema) {
+  updateSchema: (schema) => {
     // Add the schema to the queue to be checked to see if the schema really changed
     state.queue.push(schema);
   },
 
   // Remove the cached schema
-  removeSchema(id) {
+  removeSchema: (id) => {
     // Remove anything in the queue related to the schema - we don't want to send any pending updates later for a schema that has been removed
     state.queue = state.queue.filter(schema => schema.id !== id);
 
@@ -125,5 +135,4 @@ const fns = {
   }
 };
 
-// Expose the Web Worker API - see: https://github.com/GoogleChromeLabs/comlink
-Comlink.expose(fns);
+onmessage = workerActions.onmessage; // bind everything to the worker's onmessage handler via the workerAction

package/plugins/version.js

@@ -0,0 +1,21 @@
+/**
+ * Fetch version metadata from backend /rancherversion API and store it
+ *
+ * This metadata does not change for an installation of Rancher
+ */
+
+import { setVersionData } from '@shell/config/version';
+
+export default async function({ store }) {
+  try {
+    const response = await store.dispatch('rancher/request', {
+      url:                  '/rancherversion',
+      method:               'get',
+      redirectUnauthorized: false
+    });
+
+    setVersionData(response);
+  } catch (e) {
+    console.warn('Failed to fetch Rancher version metadata', e); // eslint-disable-line no-console
+  }
+}

package/promptRemove/management.cattle.io.globalrole.vue

@@ -0,0 +1,47 @@
+<script>
+import RoleDeletionCheck from '@shell/promptRemove/mixin/roleDeletionCheck';
+export default {
+  name:   'GlobalRolePromptRemove',
+  mixins: [RoleDeletionCheck],
+  props:  {
+    value: {
+      type:    Array,
+      default: () => {
+        return [];
+      }
+    },
+
+    type: {
+      type:     String,
+      required: true
+    }
+  },
+};
+</script>
+
+<template>
+  <div>
+    <template>
+      {{ t('promptRemove.attemptingToRemove', { type }) }} <span
+        v-html="resourceNames(names, plusMore, t)"
+      ></span>
+    </template>
+    <div v-if="info" class="text info mb-10 mt-20">
+      <span v-html="info" />
+    </div>
+    <div v-if="warning" class="text-warning mb-10 mt-20">
+      {{ warning }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.text.info {
+  display: flex;
+  align-items: center;
+
+  > span {
+    margin-right: 5px;
+  }
+}
+</style>