@rancher/shell 0.1.3 → 0.1.4

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/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');
+      }
+    },
+  },
+};

package/scripts/publish-shell.sh

@@ -6,7 +6,7 @@ BASE_DIR="$(
   pwd
 )"
 SHELL_DIR=$BASE_DIR/shell/
-PUBLISH_ARGS="--no-git-tag-version --access public"
+PUBLISH_ARGS="--no-git-tag-version --access public $PUBLISH_ARGS"
 
 echo "Publishing Shell Packages"
 

package/scripts/sync-shell-deps

@@ -0,0 +1,37 @@
+#!/usr/bin/env node
+
+const fs = require('fs-extra');
+const path = require('path');
+
+console.log(__dirname);
+
+const dir = path.resolve('.');
+
+console.log('Syncing shell dependencies');
+
+const topFile = path.join(dir, 'package.json');
+const shellFile = path.join(dir, 'shell', 'package.json');
+
+console.log(topFile);
+console.log(shellFile);
+
+const mainPkg = JSON.parse(fs.readFileSync(topFile));
+
+console.log(mainPkg.version);
+
+const shellPkg = JSON.parse(fs.readFileSync(shellFile));
+
+console.log(shellPkg.version);
+
+Object.keys(shellPkg.dependencies).forEach(k => {
+  const version = mainPkg.dependencies[k] || mainPkg.devDependencies[k];
+  const current = shellPkg.dependencies[k];
+
+  if (version) {
+    console.log(`Syncing ${ k } -> ${ version } was ${ current }`);
+    shellPkg.dependencies[k] = version;
+  }
+});
+
+fs.writeFileSync(shellFile, JSON.stringify(shellPkg, undefined, 2));
+

package/store/catalog.js

@@ -61,6 +61,11 @@ export const getters = {
     return [...clustered, ...namespaced];
   },
 
+  // Raw charts
+  rawCharts(state) {
+    return state.charts;
+  },
+
   repo(state, getters) {
     return ({ repoType, repoName }) => {
       const ary = (repoType === 'cluster' ? state.clusterRepos : state.namespacedRepos);
@@ -250,19 +255,13 @@ export const getters = {
 
   haveComponent() {
     return (name) => {
-      try {
-        require.resolve(`@shell/chart/${ name }`);
-
-        return true;
-      } catch (e) {
-        return false;
-      }
+      return getters['type-map/hasCustomChart'](name);
     };
   },
 
   importComponent(state, getters) {
     return (name) => {
-      return importChart(name);
+      return getters['type-map/importChart'](name);
     };
   },
 
@@ -340,6 +339,7 @@ export const actions = {
     // Installing an app? This is fine (in cluster store)
     // Fetching list of cluster templates? This is fine (in management store)
     // Installing a cluster template? This isn't fine (in cluster store as per installing app, but if there is no cluster we need to default to management)
+
     const inStore = rootGetters['currentCluster'] ? rootGetters['currentProduct'].inStore : 'management';
 
     if ( rootGetters[`${ inStore }/schemaFor`](CATALOG.CLUSTER_REPO) ) {
@@ -517,6 +517,7 @@ function addChart(ctx, map, chart, repo) {
       chartName:            chart.name,
       chartNameDisplay:     chart.annotations?.[CATALOG_ANNOTATIONS.DISPLAY_NAME] || chart.name,
       chartDescription:     chart.description,
+      featured:             chart.annotations?.[CATALOG_ANNOTATIONS.FEATURED],
       repoKey:              repo._key,
       versions:             [],
       categories:           filterCategories(chart.keywords),

package/store/i18n.js

@@ -139,6 +139,14 @@ export const getters = {
     return state.default;
   },
 
+  multiWithFallback: (state, getters) => (items, key = 'key') => {
+    return items.map((item) => {
+      item[key] = getters.withFallback(item[key], null, item[key]);
+
+      return item;
+    });
+  },
+
   withFallback: (state, getters) => (key, args, fallback, fallbackIsKey = false) => {
     // Support withFallback(key,fallback) when no args
     if ( !fallback && typeof args === 'string' ) {
@@ -153,7 +161,8 @@ export const getters = {
     } else {
       return fallback;
     }
-  }
+  },
+
 };
 
 export const mutations = {