@rancher/shell 0.1.0 → 0.1.1

package/plugins/i18n.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import { escapeHtml } from '../utils/string';
 
-function stringFor(store, key, args, raw = false) {
+function stringFor(store, key, args, raw = false, escapehtml = true) {
   const translation = store.getters['i18n/t'](key, args);
 
   let out;
@@ -19,8 +19,10 @@ function stringFor(store, key, args, raw = false) {
 
   if ( raw ) {
     return out;
-  } else {
+  } else if (escapehtml) {
     return escapeHtml(out);
+  } else {
+    return out;
   }
 }
 
@@ -81,10 +83,14 @@ Vue.component('t', {
       type:    [String, Object],
       default: 'span'
     },
+    escapehtml: {
+      type:    Boolean,
+      default: true,
+    }
   },
 
   render(h) {
-    const msg = stringFor(this.$store, this.k, this.$attrs, this.raw);
+    const msg = stringFor(this.$store, this.k, this.$attrs, this.raw, this.escapehtml);
 
     if ( this.raw ) {
       return h(

package/plugins/steve/actions.js

@@ -1,12 +1,20 @@
 import https from 'https';
 import { addParam, parse as parseUrl, stringify as unParseUrl } from '@shell/utils/url';
-import { handleSpoofedRequest } from '@shell/plugins/dashboard-store/actions';
+import { handleSpoofedRequest, loadSchemas } from '@shell/plugins/dashboard-store/actions';
 import { set } from '@shell/utils/object';
 import { deferred } from '@shell/utils/promise';
 import { streamJson, streamingSupported } from '@shell/utils/stream';
 import isObject from 'lodash/isObject';
+import { classify } from '@shell/plugins/dashboard-store/classify';
+import { NAMESPACE } from '@shell/config/types';
 
 export default {
+
+  // Need to override this, so that thhe 'this' context is correct (this class not the base class)
+  async loadSchemas(ctx, watch = true) {
+    return await loadSchemas(ctx, watch);
+  },
+
   async request({ state, dispatch, rootGetters }, pOpt ) {
     const opt = pOpt.opt || pOpt;
 
@@ -255,6 +263,13 @@ export default {
     }
   },
 
+  createNamespace(ctx, obj) {
+    return classify(ctx, {
+      type:     NAMESPACE,
+      metadata: { name: obj.name }
+    });
+  },
+
   cleanForNew(ctx, obj) {
     const m = obj.metadata || {};
 

package/plugins/steve/getters.js

@@ -101,5 +101,13 @@ export default {
     const typeSuperClass = Object.getPrototypeOf(Object.getPrototypeOf(existing))?.constructor;
 
     return typeSuperClass === HybridModel ? cleanHybridResources(data) : data;
-  }
+  },
+
+  // Return all the pods for a given namespace
+  podsByNamespace: state => (namespace) => {
+    const map = state.podsByNamespace[namespace];
+
+    return map?.list || [];
+  },
+
 };

package/plugins/steve/index.js

@@ -1,6 +1,6 @@
 import coreStore, { coreStoreModule, coreStoreState } from '@shell/plugins/dashboard-store/index';
-
 import {
+  createWorker,
   mutations as subscribeMutations,
   actions as subscribeActions,
   getters as subscribeGetters
@@ -26,6 +26,7 @@ function SteveFactory(namespace, baseUrl) {
         deferredRequests: {},
         started:          [],
         inError:          {},
+        podsByNamespace:  {}, // Cache of pods by namespace
       };
     },
 
@@ -64,7 +65,10 @@ export default (config) => {
   }
 
   return coreStore(
-    SteveFactory(config),
+    SteveFactory(config.namespace, config.baseUrl),
     config,
+    (store, ctx) => {
+      createWorker(store, ctx);
+    }
   );
 };

package/plugins/steve/mutations.js

@@ -1,17 +1,72 @@
-import { forgetType, resetStore, loadAll } from '@shell/plugins/dashboard-store/mutations';
+import { addObject, removeObject } from '@shell/utils/array';
+import { NAMESPACE, POD, SCHEMA } from '@shell/config/types';
+import {
+  forgetType,
+  resetStore,
+  loadAll,
+  load,
+  remove
+} from '@shell/plugins/dashboard-store/mutations';
 import { keyForSubscribe } from '@shell/plugins/steve/subscribe';
 import { perfLoadAll } from '@shell/plugins/steve/performanceTesting';
+import Vue from 'vue';
+
+function registerNamespace(state, namespace) {
+  let cache = state.podsByNamespace[namespace];
+
+  if (!cache) {
+    cache = {
+      list: [],
+      map:  new Map()
+    };
+
+    Vue.set(state.podsByNamespace, namespace, cache);
+  }
+
+  return cache;
+}
 
 export default {
-  loadAll(state, { type, data, ctx }) {
+  loadAll(state, {
+    type,
+    data,
+    ctx,
+    skipHaveAll
+  }) {
     // Performance testing in dev and when env var is set
-    if (process.env.dev && process.env.perfTest) {
+    if (process.env.dev && !!process.env.perfTest) {
       data = perfLoadAll(type, data);
     }
 
-    return loadAll(state, {
-      type, data, ctx
+    const proxies = loadAll(state, {
+      type, data, ctx, skipHaveAll
     });
+
+    // If we loaded a set of pods, then update the podsByNamespace cache
+    if (type === POD) {
+      // Clear the entire cache - this is a fresh load
+      Object.keys(state.podsByNamespace).forEach((ns) => {
+        delete state.podsByNamespace[ns];
+      });
+
+      // Go through all of the pods and populate cache by namespace
+      proxies.forEach((entry) => {
+        const cache = registerNamespace(state, entry.namespace);
+
+        addObject(cache.list, entry);
+        cache.map.set(entry.id, entry);
+      });
+    }
+
+    // Notify the web worker of the initial load of schemas
+    if (type === SCHEMA) {
+      const worker = (this.$workers || {})[ctx.getters.storeName];
+
+      if (worker) {
+        // Store raw json objects, not the proxies
+        worker.loadSchema(data);
+      }
+    }
   },
 
   forgetType(state, type) {
@@ -23,5 +78,45 @@ export default {
   reset(state) {
     resetStore(state, this.commit);
     this.commit(`${ state.config.namespace }/resetSubscriptions`);
+
+    // Clear the podsByNamespace cache
+    state.podsByNamespace = {};
+  },
+
+  clearFromQueue(state, type) {
+    // Remove anything in the queue that is a resource update for the given type
+    state.queue = state.queue.filter((item) => {
+      return item.body?.type !== type;
+    });
+  },
+
+  loadMulti(state, { data, ctx }) {
+    for (const entry of data) {
+      const resource = load(state, { data: entry, ctx });
+
+      if (resource.type === POD && resource.metadata) {
+        const cache = registerNamespace(state, resource.namespace);
+
+        addObject(cache.list, resource);
+        cache.map.set(resource.id, resource);
+      }
+    }
+  },
+
+  remove(state, obj) {
+    remove(state, obj, this.getters);
+
+    if (obj && obj.type === POD) {
+      const cache = state.podsByNamespace[obj.namespace];
+
+      // Extra defensive check that the cache exists for the namespace being removed
+      if (cache) {
+        removeObject(cache.list, obj);
+        cache.map.delete(obj.id);
+      }
+    } else if (obj && obj.type === NAMESPACE) {
+      // Namespace deleted
+      delete state.podsByNamespace[obj.namespace];
+    }
   }
 };

package/plugins/steve/norman-class.js

@@ -48,4 +48,12 @@ export default class NormanModel extends Resource {
       delete this.annotations[key];
     }
   }
+
+  setResourceQuotas(spec) {
+    const keys = ['resourceQuota', 'namespaceDefaultResourceQuota'];
+
+    keys.forEach((key) => {
+      Vue.set(this, key, { ...spec[key] });
+    });
+  }
 }

package/plugins/steve/performanceTesting.js

@@ -19,6 +19,11 @@ const PERF_DATA = {
   },
 };
 
+// Log a warning when performance data simulation is enabled
+if (!!process.env.perfTest && process.env.dev ) {
+  console.warn('Performance Testing data enabled', PERF_DATA); // eslint-disable-line no-console
+}
+
 const DEFAULTS = {
   count:     1, // One copy of each resource
   statusRow: 0, // Don't add any status rows (0 = None, 1 = All, N = 1 out of N)

package/plugins/steve/subscribe.js

@@ -1,17 +1,56 @@
 import { addObject, clear, removeObject } from '@shell/utils/array';
 import { get } from '@shell/utils/object';
+import { COUNT, SCHEMA } from '@shell/config/types';
 import Socket, {
   EVENT_CONNECTED,
   EVENT_DISCONNECTED,
   EVENT_MESSAGE,
   //  EVENT_FRAME_TIMEOUT,
-  EVENT_CONNECT_ERROR
+  EVENT_CONNECT_ERROR,
+  EVENT_DISCONNECT_ERROR
 } from '@shell/utils/socket';
 import { normalizeType } from '@shell/plugins/dashboard-store/normalize';
+import day from 'dayjs';
+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';
 
 export const NO_WATCH = 'NO_WATCH';
 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;
+  const storeName = getters.storeName;
+
+  store.$workers = store.$workers || {};
+
+  if (storeName !== 'cluster') {
+    return;
+  }
+
+  function callback(resource) {
+    queueChange(ctx, resource, true, 'Change');
+  }
+
+  if (!store.$workers[storeName]) {
+    const worker = Comlink.wrap(new Worker());
+
+    store.$workers[storeName] = worker;
+
+    worker.initWorker(storeName, Comlink.proxy(callback));
+  }
+}
+
 export function keyForSubscribe({
   resourceType, type, namespace, id, selector
 } = {}) {
@@ -68,7 +107,7 @@ function queueChange({ getters, state }, { data, revision }, load, label) {
       });
     }
 
-    if ( type === 'schema' ) {
+    if ( type === SCHEMA ) {
       // Clear the current records in the store when a type disappears
       state.queue.push({
         action: 'commit',
@@ -108,7 +147,6 @@ export const actions = {
       socket = new Socket(`${ state.config.baseUrl }/subscribe`);
 
       commit('setSocket', socket);
-
       socket.addEventListener(EVENT_CONNECTED, (e) => {
         dispatch('opened', e);
       });
@@ -118,7 +156,11 @@ export const actions = {
       });
 
       socket.addEventListener(EVENT_CONNECT_ERROR, (e) => {
-        dispatch('error', e.detail);
+        dispatch('error', e );
+      });
+
+      socket.addEventListener(EVENT_DISCONNECT_ERROR, (e) => {
+        dispatch('error', e );
       });
 
       socket.addEventListener(EVENT_MESSAGE, (e) => {
@@ -137,11 +179,23 @@ export const actions = {
     socket.connect(get(opt, 'metadata'));
   },
 
-  unsubscribe({ state, commit }) {
+  unsubscribe({ state, commit, getters }) {
     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];
+    }
+
     if ( socket ) {
       return socket.disconnect();
     }
@@ -338,7 +392,7 @@ export const actions = {
   },
 
   async opened({
-    commit, dispatch, state, getters
+    commit, dispatch, state, getters, rootGetters
   }, event) {
     state.debugSocket && console.info(`WebSocket Opened [${ getters.storeName }]`); // eslint-disable-line no-console
 
@@ -364,6 +418,21 @@ 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 });
+
+      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);
+        }
+      }
     }
 
     // Try resending any frames that were attempted to be sent while the socket was down, once.
@@ -381,10 +450,38 @@ export const actions = {
     state.queueTimer = null;
   },
 
-  error({ getters, state }, event) {
-    console.error(`WebSocket Error [${ getters.storeName }]`, event); // eslint-disable-line no-console
+  error({
+    getters, state, dispatch, rootGetters
+  }, 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;
+
+        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);
+    } 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
+    }
   },
 
   send({ state, commit }, obj) {
@@ -467,10 +564,36 @@ export const actions = {
   },
 
   'ws.resource.change'(ctx, msg) {
-    queueChange(ctx, msg, true, 'Change');
-
     const data = msg.data;
     const type = data.type;
+
+    // Debounce count changes so we send at most 1 every 5 seconds
+    if (type === COUNT) {
+      const worker = (this.$workers || {})[ctx.getters.storeName];
+
+      if (worker) {
+        worker.countsUpdate(msg);
+
+        // No further processing - let the web worker debounce the counts
+        return;
+      }
+    }
+
+    // Web worker can process schemas to check that they are actually changing and
+    // only load updates if the schema did actually change
+    if (type === SCHEMA) {
+      const worker = (this.$workers || {})[ctx.getters.storeName];
+
+      if (worker) {
+        worker.updateSchema(data);
+
+        // No further processing - let the web worker check the schema updates
+        return;
+      }
+    }
+
+    queueChange(ctx, msg, true, 'Change');
+
     const typeOption = ctx.rootGetters['type-map/optionsFor'](type);
 
     if (typeOption?.alias?.length > 0) {
@@ -490,10 +613,19 @@ export const actions = {
   },
 
   'ws.resource.remove'(ctx, msg) {
-    queueChange(ctx, msg, false, 'Remove');
-
     const data = msg.data;
     const type = data.type;
+
+    if (type === SCHEMA) {
+      const worker = (this.$workers || {})[ctx.getters.storeName];
+
+      if (worker) {
+        worker.removeSchema(data.id);
+      }
+    }
+
+    queueChange(ctx, msg, false, 'Remove');
+
     const typeOption = ctx.rootGetters['type-map/optionsFor'](type);
 
     if (typeOption?.alias?.length > 0) {

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

@@ -0,0 +1,129 @@
+import * as Comlink from 'comlink';
+import { SCHEMA } from '@shell/config/types';
+
+const COUNTS_FLUSH_TIMEOUT = 5000;
+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
+  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);
+    const existing = state.schemas[schema.id];
+
+    if (!existing || (existing && existing !== hash)) {
+      // console.log(`${ schema.id } CHANGED  ${ hash } > ${ existing }`);
+      state.schemas[schema.id] = hash;
+
+      const msg = {
+        data:          schema,
+        resourceType:  SCHEMA,
+        type:          'resource.change'
+      };
+
+      load(msg);
+    }
+  });
+
+  state.queue = [];
+
+  state.flushTimer = setTimeout(flush, SCHEMA_FLUSH_TIMEOUT);
+}
+
+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);
+  }
+}
+
+// Web Worker API
+const fns = {
+  initWorker(storeName, loadFn) {
+    state.store = storeName;
+    state.load = loadFn;
+  },
+
+  destroyWorker() {
+    clearTimeout(state.countTimer);
+    clearTimeout(state.flushTimer);
+
+    // 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
+  loadSchema(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
+      delete schema._id;
+      delete schema._group;
+
+      state.schemas[schema.id] = hashObj(schema);
+    });
+  },
+
+  // Called when schema is updated
+  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) {
+    // 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);
+
+    // 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];
+  }
+};
+
+// Expose the Web Worker API - see: https://github.com/GoogleChromeLabs/comlink
+Comlink.expose(fns);

package/promptRemove/kubevirt.io.virtualmachine.vue

@@ -3,6 +3,7 @@ import { mapState, mapGetters } from 'vuex';
 import { HCI } from '@shell/config/types';
 import { isEmpty } from '@shell/utils/object';
 import Parse from 'url-parse';
+import { resourceNames } from '@shell/utils/string';
 
 export default {
   name: 'HarvesterPromptRemove',
@@ -64,22 +65,6 @@ export default {
 
       return this.t('promptRemove.andOthers', { count: remaining });
     },
-
-    resourceNames() {
-      return this.names.reduce((res, name, i) => {
-        if (i >= 5) {
-          return res;
-        }
-        res += `<b>${ name }</b>`;
-        if (i === this.names.length - 1) {
-          res += this.plusMore;
-        } else {
-          res += i === this.toRemove.length - 2 ? ' and ' : ', ';
-        }
-
-        return res;
-      }, '');
-    }
   },
 
   watch: {
@@ -97,6 +82,7 @@ export default {
   },
 
   methods: {
+    resourceNames,
     remove() {
       const parentComponent = this.$parent.$parent.$parent;
 
@@ -148,7 +134,7 @@ export default {
 <template>
   <div class="mt-10">
     {{ t('promptRemove.attemptingToRemove', {type}) }}
-    <span v-html="resourceNames"></span>
+    <span v-html="resourceNames(names, plusMore, t)"></span>
 
     <div class="mt-10">
       {{ t('harvester.virtualMachine.promptRemove.title') }}