@rancher/shell 0.2.5 → 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);
@@ -41,9 +21,9 @@ function flush() {
       state.schemas[schema.id] = hash;
 
       const msg = {
-        data:          schema,
-        resourceType:  SCHEMA,
-        type:          'resource.change'
+        data:         schema,
+        resourceType: SCHEMA,
+        type:         'resource.change'
       };
 
       load(msg);
@@ -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/promptRemove/management.cattle.io.project.vue

@@ -37,7 +37,7 @@ export default {
     };
   },
 
-  computed:   {
+  computed: {
     ...mapState('action-menu', ['toRemove']),
     ...mapGetters({ t: 'i18n/t' }),
     ...mapGetters(['currentCluster']),

package/promptRemove/mixin/roleDeletionCheck.js

@@ -7,12 +7,12 @@ const CLUSTER = SUBTYPE_MAPPING.CLUSTER.key;
 export default {
   data() {
     return {
-      warning:             '',
-      info:                '',
+      warning: '',
+      info:    '',
     };
   },
 
-  computed:   {
+  computed: {
     ...mapState('action-menu', ['toRemove']),
     ...mapGetters({ t: 'i18n/t' }),
 
@@ -62,14 +62,14 @@ export default {
 
       try {
         const request = await this.$store.dispatch('management/request', {
-          url:           `/v1/${ resourceToCheck }`,
-          method:        'get',
+          url:    `/v1/${ resourceToCheck }`,
+          method: 'get',
         }, { root: true });
 
         // We need to fetch the users here in order to get an accurate count when selecting global roles.
         const users = await this.$store.dispatch('management/request', {
-          url:           `/v1/${ MANAGEMENT.USER }`,
-          method:        'get',
+          url:    `/v1/${ MANAGEMENT.USER }`,
+          method: 'get',
         }, { root: true });
 
         const userMap = users.data?.reduce((map, user) => {

package/promptRemove/pod.vue

@@ -12,9 +12,9 @@ export default {
     Checkbox
   },
 
-  props:      {
+  props: {
     value: {
-      type:     Array,
+      type:    Array,
       default: () => {
         return [];
       }

package/rancher-components/components/BadgeState/BadgeState.spec.ts

@@ -0,0 +1,12 @@
+import { shallowMount } from '@vue/test-utils';
+import { BadgeState } from './index';
+
+describe('BadgeState.vue', () => {
+  it('renders props.msg when passed', () => {
+    const label = 'Hello, World!';
+
+    const wrapper = shallowMount(BadgeState, { propsData: { label } });
+
+    expect(wrapper.find('span').text()).toMatch(label);
+  });
+});

package/rancher-components/components/BadgeState/BadgeState.vue

@@ -0,0 +1,111 @@
+<script lang="ts">
+import Vue, { PropType } from 'vue';
+
+interface Badge {
+  stateBackground: string;
+  stateDisplay: string;
+}
+
+/**
+ * Badge state component.
+ * <p>Represents a badge whose label and color is either taken from the value property or
+ * from the label and color properties. The state property takes precedence.</p>
+ */
+export default Vue.extend({
+  props: {
+    /**
+     * A value having the properties `stateBackground` and `stateDisplay`
+     */
+    value: {
+      type:    Object as PropType<Badge>,
+      default: null
+    },
+
+    /**
+     * Badge color. `stateBackground` of the value property takes precedence if supplied
+     */
+    color: {
+      type:    String,
+      default: null
+    },
+
+    /**
+     * Optional icon to be shown before the label
+     */
+    icon: {
+      type:    String,
+      default: null
+    },
+
+    /**
+     * Label to display in the badge. `stateDisplay` of the value property takes precedence if supplied
+     */
+    label: {
+      type:    String,
+      default: null
+    }
+  },
+
+  computed: {
+    bg(): string | null {
+      return this.value?.stateBackground || this.color;
+    },
+
+    msg(): string | null {
+      return this.value?.stateDisplay || this.label;
+    }
+  }
+});
+</script>
+
+<template>
+  <span :class="{'badge-state': true, [bg]: true}">
+    <i
+      v-if="icon"
+      class="icon"
+      :class="{[icon]: true, 'mr-5': !!msg}"
+    />{{ msg }}
+  </span>
+</template>
+
+<style lang="scss" scoped>
+  .badge-state {
+    align-items: center;
+    display: inline-flex;
+    padding: 2px 10px;
+    border: 1px solid transparent;
+    border-radius: 20px;
+
+    &.bg-info {
+      border-color: var(--primary);
+    }
+
+    &.bg-error {
+      border-color: var(--error);
+    }
+
+    &.bg-warning {
+      border-color: var(--warning);
+    }
+
+    // Successful states are de-emphasized by using [text-]color instead of background-color
+    &.bg-success {
+      color: var(--success);
+      background: transparent;
+      border-color: var(--success);
+    }
+  }
+</style>
+<style lang="scss">
+  // TODO: #6005
+  // Investigate why this is here.. I don't think that styles for sortable table should belong here
+  .sortable-table TD .badge-state {
+    @include clip;
+    display: inline-block;
+    max-width: 100%;
+    position: relative;
+    max-width: 110px;
+    font-size: .85em;
+    vertical-align: middle;
+  }
+</style>

package/rancher-components/components/BadgeState/index.ts

@@ -0,0 +1 @@
+export { default as BadgeState } from './BadgeState.vue';

package/rancher-components/components/Banner/Banner.test.ts

@@ -0,0 +1,57 @@
+import { mount } from '@vue/test-utils';
+import { Banner } from './index';
+
+describe('component: Banner', () => {
+  it('should display text based on label', () => {
+    const label = 'test';
+    const wrapper = mount(Banner, { propsData: { label } });
+
+    const element = wrapper.find('span').element;
+
+    expect(element.textContent).toBe(label);
+  });
+
+  it('should display an icon', () => {
+    const icon = 'my-icon';
+    const wrapper = mount(Banner, { propsData: { icon } });
+
+    const element = wrapper.find(`.${ icon }`).element;
+
+    expect(element.classList).toContain(icon);
+  });
+
+  it('should not display an icon', () => {
+    const wrapper = mount(Banner);
+
+    const element = wrapper.find(`[data-testid="banner-icon"]`).element;
+
+    expect(element).not.toBeDefined();
+  });
+
+  it('should emit close event', () => {
+    const wrapper = mount(Banner, { propsData: { closable: true } });
+    const element = wrapper.find(`[data-testid="banner-close"]`).element;
+
+    element.click();
+
+    expect(wrapper.emitted('close')).toHaveLength(1);
+  });
+
+  it('should add the right color', () => {
+    const color = 'red';
+    const wrapper = mount(Banner, { propsData: { color } });
+
+    const element = wrapper.element;
+
+    expect(element.classList).toContain(color);
+  });
+
+  it('should stack the banner messages', () => {
+    const stacked = true;
+    const wrapper = mount(Banner, { propsData: { stacked } });
+
+    const element = wrapper.find(`[data-testid="banner-content"]`).element;
+
+    expect(element.classList).toContain('stacked');
+  });
+});