@rancher/shell 0.1.2 → 0.1.4

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 { shouldLoadPlugin, UI_PLUGIN_BASE_URL } from '@shell/config/uiplugins';
 
 const META_NAME_PREFIX = 'app-autoload-';
 
 export default async(context) => {
+  // UI Plugins declared in the HTML head
   const meta = context.app?.head?.meta || [];
   const hash = {};
 
@@ -18,5 +19,56 @@ 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) {
+    const { store, $plugin } = context;
+
+    // Fetch list of installed plugins from endpoint
+    try {
+      const res = await store.dispatch('management/request', {
+        url:     `${ UI_PLUGIN_BASE_URL }/index.json`,
+        headers: { accept: 'application/json' }
+      });
+
+      if (res) {
+        const entries = res.entries || res.Entries || {};
+
+        Object.values(entries).forEach((plugin) => {
+          if (shouldLoadPlugin(plugin)) {
+            let url;
+
+            if (plugin?.metadata?.['direct'] === 'true') {
+              url = plugin.endpoint;
+            }
+
+            hash[plugin.name] = $plugin.loadAsyncByNameAndVersion(plugin.name, plugin.version, url);
+          }
+        });
+      }
+    } 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: true });
+      }
+    });
+  }
 };

package/plugins/steve/actions.js

@@ -178,7 +178,7 @@ export default {
         const res = err.response;
 
         // Go to the logout page for 401s, unless redirectUnauthorized specifically disables (for the login page)
-        if ( opt.redirectUnauthorized !== false && process.client && res.status === 401 ) {
+        if ( opt.redirectUnauthorized !== false && res.status === 401 ) {
           dispatch('auth/logout', opt.logoutOnError, { root: true });
         }
 

package/plugins/steve/index.js

@@ -10,7 +10,7 @@ import getters, { STEVE_MODEL_TYPES } from './getters';
 import mutations from './mutations';
 import actions from './actions';
 
-function SteveFactory(namespace, baseUrl) {
+export function SteveFactory(namespace, baseUrl) {
   return {
     ...coreStoreModule,
 
@@ -50,6 +50,10 @@ function SteveFactory(namespace, baseUrl) {
   };
 }
 
+export const steveStoreInit = (store, ctx) => {
+  createWorker(store, ctx);
+};
+
 export default (config) => {
   config.namespace = config.namespace || '';
 
@@ -67,8 +71,6 @@ export default (config) => {
   return coreStore(
     SteveFactory(config.namespace, config.baseUrl),
     config,
-    (store, ctx) => {
-      createWorker(store, ctx);
-    }
+    steveStoreInit
   );
 };

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,6 +1,7 @@
 import { addObject, clear, removeObject } from '@shell/utils/array';
 import { get } from '@shell/utils/object';
 import { COUNT, SCHEMA } from '@shell/config/types';
+import { getPerformanceSetting } from '@shell/config/settings';
 import Socket, {
   EVENT_CONNECTED,
   EVENT_DISCONNECTED,
@@ -15,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';
@@ -24,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;
@@ -38,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]);
+      });
+    };
   }
 }
 
@@ -118,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 {
@@ -144,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) => {
@@ -176,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 ) {
@@ -395,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;
 
@@ -419,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 });
       }
     }
 
@@ -455,32 +467,53 @@ export const actions = {
   }, e) {
     clearTimeout(state.queueTimer);
     state.queueTimer = null;
-    if (e.type === EVENT_DISCONNECT_ERROR) {
-      // 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;
+    // determine if websocket notifications are disabled
+    const disableGrowl = growlsDisabled(rootGetters);
+
+    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 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.disconnected.title'),
-          message:       t('growl.disconnected.message', { url, time: timeFormatted }, { raw: true }),
+          title:         t('growl.connectError.title'),
+          message:       t('growl.connectError.message', {
+            url, time: timeFormatted, tries
+          }, { raw: true }),
           icon:          'error',
-          earliestClose: time + MINIMUM_TIME_NOTIFIED + MINIMUM_TIME_DISCONNECTED,
+          earliestClose: time + MINIMUM_TIME_NOTIFIED,
           url
         }, { root: true });
-      }, MINIMUM_TIME_DISCONNECTED);
-    } 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
+      } 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
+      }
     }
   },
 
@@ -572,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;
@@ -585,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;
@@ -620,7 +653,7 @@ export const actions = {
       const worker = (this.$workers || {})[ctx.getters.storeName];
 
       if (worker) {
-        worker.removeSchema(data.id);
+        worker.postMessage({ removeSchema: data.id });
       }
     }
 
@@ -701,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/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>

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

@@ -0,0 +1,47 @@
+<script>
+import RoleDeletionCheck from '@shell/promptRemove/mixin/roleDeletionCheck';
+export default {
+  name:   'RoleTemplatePromptRemove',
+  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>

package/promptRemove/mixin/roleDeletionCheck.js

@@ -0,0 +1,97 @@
+import { mapState, mapGetters } from 'vuex';
+import { resourceNames } from '@shell/utils/string';
+import { MANAGEMENT } from '@shell/config/types';
+import { SUBTYPE_MAPPING } from '@shell/models/management.cattle.io.roletemplate';
+const CLUSTER = SUBTYPE_MAPPING.CLUSTER.key;
+
+export default {
+  data() {
+    return {
+      warning:             '',
+      info:                '',
+    };
+  },
+
+  computed:   {
+    ...mapState('action-menu', ['toRemove']),
+    ...mapGetters({ t: 'i18n/t' }),
+
+    names() {
+      return this.toRemove.map(obj => obj.nameDisplay).slice(0, 5);
+    },
+
+    plusMore() {
+      const remaining = this.toRemove.length - this.names.length;
+
+      return this.t('promptRemove.andOthers', { count: remaining });
+    },
+  },
+  watch: {
+    value: {
+      handler(neu) {
+        this.handleRoleDeletionCheck(neu, neu[0].type, this.$route.hash);
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    resourceNames,
+    async handleRoleDeletionCheck(rolesToRemove, resourceType, queryHash) {
+      this.warning = '';
+      let resourceToCheck;
+      let propToMatch;
+      let numberOfRolesWithBinds = 0;
+      const uniqueUsersWithBinds = new Set();
+
+      this.info = this.t('rbac.globalRoles.waiting', { count: rolesToRemove.length });
+
+      switch (resourceType) {
+      case MANAGEMENT.GLOBAL_ROLE:
+        resourceToCheck = MANAGEMENT.GLOBAL_ROLE_BINDING;
+        propToMatch = 'globalRoleName';
+        break;
+      default:
+        if (queryHash.includes(CLUSTER)) {
+          resourceToCheck = MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING;
+        } else {
+          resourceToCheck = MANAGEMENT.PROJECT_ROLE_TEMPLATE_BINDING;
+        }
+        propToMatch = 'roleTemplateName';
+        break;
+      }
+
+      try {
+        const request = await this.$store.dispatch('management/request', {
+          url:           `/v1/${ resourceToCheck }`,
+          method:        'get',
+        }, { root: true });
+
+        if (request.data && request.data.length) {
+          rolesToRemove.forEach((toRemove) => {
+            const usedRoles = request.data.filter(item => item[propToMatch] === toRemove.id);
+
+            if (usedRoles.length) {
+              const uniqueUsers = [...new Set(usedRoles.map(item => item.userName))];
+
+              if (uniqueUsers.length) {
+                numberOfRolesWithBinds++;
+                uniqueUsers.forEach(user => uniqueUsersWithBinds.add(user));
+              }
+            }
+          });
+
+          if (numberOfRolesWithBinds && uniqueUsersWithBinds.size) {
+            this.info = '';
+            this.warning = this.t('rbac.globalRoles.usersBound', { count: uniqueUsersWithBinds.size });
+          } else {
+            this.info = this.t('rbac.globalRoles.notBound', null, true);
+          }
+        } else {
+          this.info = this.t('rbac.globalRoles.notBound', null, true);
+        }
+      } catch (e) {
+        this.info = this.t('rbac.globalRoles.unableToCheck');
+      }
+    },
+  },
+};