@rancher/shell 0.3.4 → 0.3.5

package/plugins/dashboard-store/actions.js

@@ -53,8 +53,9 @@ export async function loadSchemas(ctx, watch = true) {
 
   commit('loadAll', {
     ctx,
-    type: SCHEMA,
-    data: res.data
+    type:     SCHEMA,
+    data:     res.data,
+    revision: res.revision
   });
 
   if ( watch !== false ) {
@@ -148,11 +149,14 @@ export default {
       commit('registerType', type);
     }
 
+    // No need to request the resources if we have them already
     if ( opt.force !== true && (getters['haveAll'](type) || getters['haveAllNamespace'](type, opt.namespaced))) {
       const args = {
         type,
         revision:  '',
-        namespace: opt.watchNamespace
+        // watchNamespace - used sometimes when we haven't fetched the results of a single namespace
+        // namespaced - used when we have fetched the result of a single namespace (see https://github.com/rancher/dashboard/pull/7329/files)
+        namespace: opt.watchNamespace || opt.namespaced
       };
 
       if (opt.watch !== false ) {
@@ -304,17 +308,21 @@ export default {
           ctx,
           type,
           data:      out.data,
+          revision:  out.revision,
           skipHaveAll,
           namespace: opt.namespaced,
         });
       }
     }
 
+    // ToDo: SM if we start a "bigger" watch (such as watch without a namespace vs a watch with a namespace), we should stop the stop the "smaller" watch so we don't have duplicate events coming back
     if ( opt.watch !== false ) {
       dispatch('watch', {
         type,
         revision:  out.revision,
-        namespace: opt.watchNamespace
+        namespace: opt.watchNamespace || opt.namespaced, // it could be either apparently
+        // ToDo: SM namespaced is sometimes a boolean and sometimes a string, I don't see it as especially broken but we should refactor that in the future
+        force:     opt.forceWatch === true,
       });
     }
 
@@ -369,15 +377,17 @@ export default {
     commit('loadSelector', {
       ctx,
       type,
-      entries: res.data,
-      selector
+      entries:  res.data,
+      selector,
+      revision: res.revision,
     });
 
     if ( opt.watch !== false ) {
       dispatch('watch', {
         type,
         selector,
-        revision: res.revision
+        revision: res.revision,
+        force:    opt.forceWatch === true,
       });
     }
 
@@ -394,6 +404,12 @@ export default {
   //  url: Use this specific URL instead of looking up the URL for the type/id.  This should only be used for bootstrapping schemas on startup.
   //  @TODO depaginate: If the response is paginated, retrieve all the pages. (default: true)
   async find(ctx, { type, id, opt }) {
+    if (!id) {
+      console.error('Attempting to find a resource with no id', type, id); // eslint-disable-line no-console
+
+      return;
+    }
+
     const { getters, dispatch } = ctx;
 
     opt = opt || {};
@@ -459,6 +475,11 @@ export default {
         commit('registerType', type);
       }
     }
+    // Inject special fields for indexing schemas
+    if ( type === SCHEMA ) {
+      addSchemaIndexFields(data);
+    }
+
     const keyField = getters.keyFieldForType(type);
     const id = data?.[keyField] || existing?.[keyField];
 
@@ -531,8 +552,10 @@ export default {
 
   // Forget a type in the store
   // Remove all entries for that type and stop watching it
-  forgetType({ commit, getters, dispatch }, type) {
-    dispatch('unwatch', type);
+  forgetType({ commit, dispatch, state }, type) {
+    state.started
+      .filter(entry => entry.type === type)
+      .forEach(entry => dispatch('unwatch', entry));
 
     commit('forgetType', type);
   },

package/plugins/dashboard-store/mutations.js

@@ -261,7 +261,8 @@ export function loadAll(state, {
   data,
   ctx,
   skipHaveAll,
-  namespace
+  namespace,
+  revision
 }) {
   const { getters } = ctx;
 
@@ -283,6 +284,7 @@ export function loadAll(state, {
 
   clear(cache.list);
   cache.map.clear();
+  cache.revision = revision || 0;
   cache.generation++;
 
   addObjects(cache.list, proxies);
@@ -320,7 +322,7 @@ export default {
   },
 
   loadSelector(state, {
-    type, entries, ctx, selector
+    type, entries, ctx, selector, revision
   }) {
     const cache = registerType(state, type);
 
@@ -329,6 +331,7 @@ export default {
     }
 
     cache.haveSelector[selector] = true;
+    cache.revision = revision || 0;
   },
 
   loadAll,

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

@@ -1110,7 +1110,7 @@ export default class Resource {
     }
 
     // @TODO remove this once the API maps steve _type <-> k8s type in both directions
-    opt.data = { ...this };
+    opt.data = this.toSave() || { ...this };
 
     if (opt?.data._type) {
       opt.data.type = opt.data._type;
@@ -1884,6 +1884,13 @@ export default class Resource {
     return out;
   }
 
+  /**
+   * Allow models to override the object that is sent when saving this resource
+   */
+  toSave() {
+    return undefined;
+  }
+
   get creationTimestamp() {
     return this.metadata?.creationTimestamp;
   }

package/plugins/steve/mutations.js

@@ -121,7 +121,8 @@ export default {
     data,
     ctx,
     skipHaveAll,
-    namespace
+    namespace,
+    revision
   }) {
     // Performance testing in dev and when env var is set
     if (process.env.dev && !!process.env.perfTest) {
@@ -129,7 +130,7 @@ export default {
     }
 
     const proxies = loadAll(state, {
-      type, data, ctx, skipHaveAll, namespace
+      type, data, ctx, skipHaveAll, namespace, revision
     });
 
     // If we loaded a set of pods, then update the podsByNamespace cache

package/plugins/steve/steve-description-class.js

@@ -20,7 +20,7 @@ export default class SteveDescriptionModel extends SteveModel {
     this._description = value;
   }
 
-  // Ensure when we clone that we preserve the desription
+  // Ensure when we clone that we preserve the description
   toJSON() {
     const data = super.toJSON();
 
@@ -29,4 +29,8 @@ export default class SteveDescriptionModel extends SteveModel {
 
     return data;
   }
+
+  toSave() {
+    return this.toJSON();
+  }
 }

package/plugins/steve/subscribe.js

@@ -21,6 +21,7 @@ import Socket, {
   EVENT_DISCONNECT_ERROR,
   NO_WATCH,
   NO_SCHEMA,
+  REVISION_TOO_OLD
 } from '@shell/utils/socket';
 import { normalizeType } from '@shell/plugins/dashboard-store/normalize';
 import day from 'dayjs';
@@ -29,8 +30,6 @@ import { escapeHtml } from '@shell/utils/string';
 import { keyForSubscribe } from '@shell/plugins/steve/resourceWatcher';
 import { waitFor } from '@shell/utils/async';
 
-// eslint-disable-next-line
-import storeWorker from './worker/index.js';
 import { BLANK_CLUSTER } from '@shell/store/index.js';
 
 // minimum length of time a disconnect notification is shown
@@ -97,7 +96,7 @@ export async function createWorker(store, ctx) {
 
   if (!store.$workers[storeName]) {
     const workerMode = advancedWorker ? 'advanced' : 'basic';
-    const worker = storeWorker(workerMode);
+    const worker = store.steveCreateWorker(workerMode);
 
     store.$workers[storeName] = worker;
 
@@ -307,8 +306,13 @@ const sharedActions = {
     }
 
     // If socket is in error don't try to watch.... unless we `force` it
-    if ( !stop && !force && !getters.canWatch(params) ) {
-      console.error(`Cannot Watch [${ getters.storeName }]`, JSON.stringify(params)); // eslint-disable-line no-console
+    const inError = getters.inError(params);
+
+    if ( !stop && !force && inError ) {
+      // REVISION_TOO_OLD is a temporary state and will be handled when `resyncWatch` completes
+      if (inError !== REVISION_TOO_OLD) {
+        console.error(`Aborting Watch Request [${ getters.storeName }]. Watcher in error (${ inError })`, JSON.stringify(params)); // eslint-disable-line no-console
+      }
 
       return;
     }
@@ -316,7 +320,10 @@ const sharedActions = {
     if ( !stop && getters.watchStarted({
       type, id, selector, namespace
     }) ) {
-      state.debugSocket && console.debug(`Already Watching [${ getters.storeName }]`, JSON.stringify(params)); // eslint-disable-line no-console
+      // eslint-disable-next-line no-console
+      state.debugSocket && console.debug(`Already Watching [${ getters.storeName }]`, {
+        type, id, selector, namespace
+      });
 
       return;
     }
@@ -347,7 +354,7 @@ const sharedActions = {
       msg.selector = selector;
     }
 
-    const worker = this.$workers[getters.storeName] || {};
+    const worker = this.$workers?.[getters.storeName] || {};
 
     if (worker.mode === 'advanced') {
       if ( force ) {
@@ -362,12 +369,17 @@ const sharedActions = {
     return dispatch('send', msg);
   },
 
-  unwatch(ctx, type) {
+  unwatch(ctx, {
+    type, id, namespace, selector
+  }) {
     const { commit, getters, dispatch } = ctx;
 
     if (getters['schemaFor'](type)) {
       const obj = {
         type,
+        id,
+        namespace,
+        selector,
         stop: true, // Stops the watch on a type
       };
 
@@ -675,14 +687,30 @@ const defaultActions = {
   /**
    * Steve only event
    */
-  'ws.resource.start'({ state, getters, commit }, msg) {
+  'ws.resource.start'({
+    state, getters, commit, dispatch
+  }, msg) {
     state.debugSocket && console.info(`Resource start: [${ getters.storeName }]`, msg); // eslint-disable-line no-console
-    commit('setWatchStarted', {
+
+    const newWatch = {
       type:      msg.resourceType,
       namespace: msg.namespace,
       id:        msg.id,
       selector:  msg.selector
+    };
+
+    state.started.filter((entry) => {
+      if (
+        entry.type === newWatch.type &&
+        entry.namespace !== newWatch.namespace
+      ) {
+        return true;
+      }
+    }).forEach((entry) => {
+      dispatch('unwatch', entry);
     });
+
+    commit('setWatchStarted', newWatch);
   },
 
   'ws.resource.error'({ getters, commit, dispatch }, msg) {
@@ -695,6 +723,10 @@ const defaultActions = {
     } else if ( err.includes('failed to find schema') ) {
       commit('setInError', { type: msg.resourceType, reason: NO_SCHEMA });
     } else if ( err.includes('too old') ) {
+      // Set an error for (all) subs of this type. This..
+      // 1) blocks attempts by resource.stop to resub (as type is in error)
+      // 2) will be cleared when resyncWatch --> watch (with force) --> resource.start completes
+      commit('setInError', { type: msg.resourceType, reason: REVISION_TOO_OLD });
       dispatch('resyncWatch', msg);
     }
   },
@@ -702,12 +734,15 @@ const defaultActions = {
   /**
    * Steve only event
    *
-   * Steve only seems to send out `resource.stop` messages for two reasons
-   * - We have requested that the resource watch should be stopped and we receive this event as confirmation
-   * - Steve tells us that the resource is no longer watched
-   *
+   * Steve has stopped watching this resource. This happens for a couple of reasons
+   * - We have requested that the resource watch should be stopped (and we receive this event as confirmation)
+   * - Steve tells us that the resource watch has been stopped. Possible reasons
+   *   - The rancher <--> k8s socket closed (happens every ~30 mins on mgmt socket)
+   *   - Permissions has changed for the subscribed resource, so rancher closes socket
    */
-  'ws.resource.stop'({ getters, commit, dispatch }, msg) {
+  'ws.resource.stop'({
+    state, getters, commit, dispatch
+  }, msg) {
     const type = msg.resourceType;
     const obj = {
       type,
@@ -716,51 +751,23 @@ const defaultActions = {
       selector:  msg.selector
     };
 
-    // console.warn(`Resource stop: [${ getters.storeName }]`, msg); // eslint-disable-line no-console
+    state.debugSocket && console.info(`Resource Stop [${ getters.storeName }]`, type, msg); // eslint-disable-line no-console
+
+    if (!type) {
+      console.error(`Resource Stop [${ getters.storeName }]. Received resource.stop with an empty resourceType, aborting`, msg); // eslint-disable-line no-console
+
+      return;
+    }
 
     // If we're trying to watch this event, attempt to re-watch
     if ( getters['schemaFor'](type) && getters['watchStarted'](obj) ) {
       commit('setWatchStopped', obj);
-
-      // In summary, we need to re-watch but with a reliable `revision` (to avoid `too old` message kicking off a full re-fetch of all
-      // resources). To get a reliable `revision` go out and fetch the latest for that resource type, in theory our local cache should be
-      // up to date with that revision.
-
-      const revisionExisting = getters.nextResourceVersion(type, obj.id);
-
-      let revisionLatest;
-
-      if (revisionExisting) {
-        // Attempt to fetch the latest revision at the time the resource watch was stopped, in theory our local cache should be up to
-        // date with this
-        // Ideally we shouldn't need to fetch here and supply `0`, `-1` or `null` to start watching from the latest revision, however steve
-        // will send the current state of each resource via a `resource.created` event.
-        const opt = { limit: 1 };
-
-        opt.url = getters.urlFor(type, null, opt);
-        revisionLatest = dispatch('request', { opt, type } )
-          .then(res => res.revision)
-          .catch((err) => {
-            // For some reason we can't fetch a reasonable revision, so force a re-fetch
-            console.warn(`Resource error retrieving resourceVersion, forcing re-fetch`, type, ':', err); // eslint-disable-line no-console
-            dispatch('resyncWatch', msg);
-            throw err;
-          });
-      } else {
-        // Some v1 resource types don't have revisions (either at the collection or resource level), so we avoided making an API request
-        // for them
-        revisionLatest = Promise.resolve(null); // Null to ensure we don't go through `nextResourceVersion` again
-      }
-
-      setTimeout(() => {
-        // Delay a bit so that immediate start/error/stop causes
-        // only a slow infinite loop instead of a tight one.
-        revisionLatest.then(revision => dispatch('watch', { ...obj, revision }));
-      }, 5000);
+      dispatch('watch', obj);
     }
   },
 
   'ws.resource.create'(ctx, msg) {
+    ctx.state.debugSocket && console.info(`Resource Create [${ ctx.getters.storeName }]`, msg.resourceType, msg); // eslint-disable-line no-console
     queueChange(ctx, msg, true, 'Create');
   },
 
@@ -811,6 +818,8 @@ const defaultActions = {
     const data = msg.data;
     const type = data.type;
 
+    ctx.state.debugSocket && console.info(`Resource Remove [${ ctx.getters.storeName }]`, type, msg); // eslint-disable-line no-console
+
     if (type === SCHEMA) {
       const worker = (this.$workers || {})[ctx.getters.storeName];
 
@@ -914,8 +923,8 @@ const defaultMutations = {
  * Getters that cover cases 1 & 2 (see file description)
  */
 const defaultGetters = {
-  canWatch: state => (obj) => {
-    return !state.inError[keyForSubscribe(obj)];
+  inError: state => (obj) => {
+    return state.inError[keyForSubscribe(obj)];
   },
 
   watchStarted: state => (obj) => {

package/plugins/steve-create-worker.js

@@ -0,0 +1,14 @@
+import createWorker from './steve/worker/index.js';
+
+/**
+ * Link the steve worker creator to the store
+ *
+ * This is done to allow disassociate (no import chain) access to the steve worker file.
+ * Without this third party plugins (in given scenarios / harvester) will fail to build
+ * due to missing web worker specific build config
+ *
+ * Note - When rancher/steve store is spun out in to a extension this also needs to move out
+ */
+export default function({ store }) {
+  store.steveCreateWorker = createWorker;
+}

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

@@ -23,14 +23,14 @@ export default {
   <div>
     <template>
       {{ t('promptRemove.attemptingToRemove', { type }) }} <span
-        v-html="resourceNames(names, plusMore, t)"
+        v-clean-html="resourceNames(names, plusMore, t)"
       />
     </template>
     <div
       v-if="info"
       class="text info mb-10 mt-20"
     >
-      <span v-html="info" />
+      <span v-clean-html="info" />
     </div>
     <div
       v-if="warning"

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

@@ -100,8 +100,8 @@ export default {
         <template v-if="!canSeeProjectlessNamespaces">
           <span class="delete-warning"> {{ t('promptRemove.willDeleteAssociatedNamespaces') }}</span> <br>
           <div
+            v-clean-html="resourceNames(names, plusMore, t)"
             class="mt-10"
-            v-html="resourceNames(names, plusMore, t)"
           />
         </template>
       </div>
@@ -114,7 +114,7 @@ export default {
           :label="t('promptRemove.deleteAssociatedNamespaces')"
         />
         <div class="mt-10 ml-20">
-          <span v-html="resourceNames(names, plusMore, t)" />
+          <span v-clean-html="resourceNames(names, plusMore, t)" />
         </div>
       </div>
     </div>

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

@@ -23,14 +23,14 @@ export default {
   <div>
     <template>
       {{ t('promptRemove.attemptingToRemove', { type }) }} <span
-        v-html="resourceNames(names, plusMore, t)"
+        v-clean-html="resourceNames(names, plusMore, t)"
       />
     </template>
     <div
       v-if="info"
       class="text info mb-10 mt-20"
     >
-      <span v-html="info" />
+      <span v-clean-html="info" />
     </div>
     <div
       v-if="warning"

package/promptRemove/pod.vue

@@ -108,8 +108,8 @@ export default {
   <div class="mt-10">
     <div class="mb-30">
       {{ t('promptRemove.attemptingToRemove', { type }) }} <span
+        v-clean-html="podNames"
         class="machine-name"
-        v-html="podNames"
       />
     </div>
     <div class="mb-30">

package/public/index.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="shortcut icon" type="image/x-icon" href="/public/favicon.png">
+    <title>Rancher</title>
+</head>
+
+<body>
+    <div id="app">
+        <script>
+            (() => {
+                const isDark = document.cookie.includes('R_PCS=dark');
+                const color = isDark ? '#1b1c21' : '#FFF';
+                const style = document.createElement('style');
+                style.innerHTML = ':root { --loading-bg-color: ' + color + ';}';
+                document.getElementsByTagName('head')[0].prepend(style);
+            })();
+        </script>
+        <style>
+            .initial-load-spinner-container {
+                align-items: center;
+                background-color: var(--loading-bg-color);
+                display: flex;
+                justify-content: center;
+                height: 100vh;
+                left: 0;
+                position: absolute;
+                top: 0;
+                width: 100vw;
+            }
+
+            .initial-load-spinner {
+                animation: initial-load-animate 1s infinite linear;
+                background-color: var(--loading-bg-color);
+                box-sizing: border-box;
+                border: 5px solid #008ACF;
+                border-radius: 50%;
+                border-top-color: #00B2E2;
+                display: inline-block;
+                height: 80px;
+                margin: 0 auto;
+                width: 80px;
+            }
+
+            @keyframes initial-load-animate {
+                0% {
+                    transform: rotate(0deg);
+                }
+
+                100% {
+                    transform: rotate(359deg);
+                }
+            }
+        </style>
+        <div class="initial-load-spinner-container">
+            <i class="initial-load-spinner"></i>
+        </div>
+    </div>
+</body>
+
+</html>

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

@@ -1,10 +1,18 @@
 import { mount } from '@vue/test-utils';
 import { Banner } from './index';
+import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive'
 
 describe('component: Banner', () => {
   it('should display text based on label', () => {
     const label = 'test';
-    const wrapper = mount(Banner, { propsData: { label } });
+    const wrapper = mount(
+      Banner,
+      {
+        directives: {
+         cleanHtmlDirective 
+        },
+        propsData: { label }
+      });
 
     const element = wrapper.find('span').element;
 

package/rancher-components/components/Banner/Banner.vue

@@ -95,7 +95,7 @@ export default Vue.extend({
         <span v-else-if="messageLabel">{{ messageLabel }}</span>
         <span
           v-else
-          v-html="nlToBr(label)"
+          v-clean-html="nlToBr(label)"
         />
       </slot>
       <div

package/rancher-components/components/Form/Checkbox/Checkbox.vue

@@ -5,6 +5,8 @@ import { addObject, removeObject } from '@shell/utils/array';
 import cloneDeep from 'lodash/cloneDeep';
 
 export default Vue.extend({
+  name: 'Checkbox',
+
   props: {
     /**
      * The checkbox value.

package/rancher-components/components/Form/Radio/RadioButton.vue

@@ -152,7 +152,7 @@ export default Vue.extend({
         v-if="label"
         :class="[ muteLabel ? 'text-muted' : '', 'radio-label', 'm-0']"
         :for="name"
-        v-html="label"
+        v-clean-html="label"
       >
         <slot name="label">{{ label }}</slot>
       </label>

package/scripts/build-pkg.sh

@@ -40,6 +40,7 @@ if [ -d "${BASE_DIR}/pkg/${1}" ]; then
   echo "  Package name:    ${NAME}"
   echo "  Package version: ${VERSION}"
   echo "  Output formats:  ${FORMATS}"
+  echo "  Output directory: ${PKG_DIST}"
   rm -rf ${PKG_DIST}
   mkdir -p ${PKG_DIST}
 

package/scripts/clean

@@ -0,0 +1,6 @@
+#!/bin/bash
+set -e
+
+cd $(dirname $0)/..
+
+rm -rf dist .nuxt* node_modules/.cache