@rancher/shell 0.3.29 → 0.5.0

package/pages/support/index.vue

@@ -10,7 +10,6 @@ import { isRancherPrime } from '@shell/config/version';
 import { hasCspAdapter } from 'mixins/brand';
 
 export default {
-  layout: 'home',
 
   components: {
     BannerGraphic,
@@ -82,13 +81,8 @@ export default {
     },
 
     serverUrl() {
-      if (process.client) {
-        // Client-side rendered: use the current window location
-        return window.location.origin;
-      }
-
-      // Server-side rendered
-      return this.serverSetting?.value || '';
+      // Client-side rendered: use the current window location
+      return window.location.origin;
     },
 
     supportConfigLink() {

package/pkg/auto-import.js

@@ -1,6 +1,6 @@
 const fs = require('fs');
 const path = require('path');
-const contextFolders = ['chart', 'cloud-credential', 'content', 'detail', 'edit', 'layouts', 'list', 'machine-config', 'models', 'promptRemove', 'l10n', 'windowComponents', 'dialog', 'formatters', 'login'];
+const contextFolders = ['chart', 'cloud-credential', 'content', 'detail', 'edit', 'list', 'machine-config', 'models', 'promptRemove', 'l10n', 'windowComponents', 'dialog', 'formatters', 'login'];
 const contextMap = contextFolders.reduce((map, obj) => {
   map[obj] = true;
 

package/plugins/axios.js

@@ -1,7 +1,5 @@
 import https from 'https';
 import { CSRF } from '@shell/config/cookies';
-import { parse as setCookieParser } from 'set-cookie-parser';
-import pkg from '../package.json';
 
 export default function({
   $axios, $cookies, isDev, req
@@ -15,42 +13,8 @@ export default function({
     if ( csrf ) {
       config.headers['x-api-csrf'] = csrf;
     }
-
-    if ( process.server ) {
-      config.headers.common['access-control-expose-headers'] = `set-cookie`;
-      config.headers.common['user-agent'] = `Dashboard (Mozilla) v${ pkg.version }`;
-
-      if ( req.headers.cookie ) {
-        config.headers.common['cookies'] = req.headers.cookie;
-      }
-
-      if ( config.url.startsWith('/') ) {
-        config.baseURL = `${ req.protocol || 'https' }://${ req.headers.host }`;
-      }
-    }
   });
 
-  if ( process.server ) {
-    $axios.onResponse((res) => {
-      const parsed = setCookieParser(res.headers['set-cookie'] || []);
-
-      for ( const opt of parsed ) {
-        const key = opt.name;
-        const value = opt.value;
-
-        delete opt.name;
-        delete opt.value;
-
-        opt.encode = (x) => x;
-        opt.sameSite = true;
-        opt.path = '/';
-        opt.secure = true;
-
-        $cookies.set(key, value, opt);
-      }
-    });
-  }
-
   if ( isDev ) {
     // https://github.com/nuxt-community/axios-module/blob/dev/lib/module.js#L78
     // forces localhost to http, for no obvious reason.

package/plugins/back-button.js

@@ -1,5 +1,3 @@
-if ( process.client ) {
-  window.addEventListener('popstate', () => {
-    window._popStateDetected = true;
-  });
-}
+window.addEventListener('popstate', () => {
+  window._popStateDetected = true;
+});

package/plugins/clean-html-directive.js

@@ -1,23 +1,5 @@
 import Vue from 'vue';
-import DOMPurify from 'dompurify';
-
-const ALLOWED_TAGS = [
-  'code',
-  'li',
-  'a',
-  'p',
-  'b',
-  'br',
-  'ul',
-  'pre',
-  'span',
-  'div',
-  'i',
-  'em',
-  'strong',
-];
-
-export const purifyHTML = (value) => DOMPurify.sanitize(value, { ALLOWED_TAGS });
+import { purifyHTML } from './clean-html';
 
 export const cleanHtmlDirective = {
   inserted(el, binding) {

package/plugins/clean-html.js

@@ -0,0 +1,53 @@
+import DOMPurify from 'dompurify';
+import { uniq } from '@shell/utils/array';
+
+const ALLOWED_TAGS = [
+  'code',
+  'li',
+  'a',
+  'p',
+  'b',
+  'br',
+  'ul',
+  'pre',
+  'span',
+  'div',
+  'i',
+  'em',
+  'strong',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'table',
+  'thead',
+  'tr',
+  'th',
+  'tbody',
+  'td',
+  'blockquote'
+];
+
+// Allow 'A' tags to keep the target=_blank attribute if they have it
+DOMPurify.addHook('uponSanitizeAttribute', (node, data) => {
+  if (node.tagName === 'A' && data.attrName === 'target' && data.attrValue === '_blank') {
+    data.forceKeepAttr = true;
+  }
+});
+
+// Ensure if an 'A' tag has target=_blank that we add noopener, noreferrer and nofollow to the 'rel' attribute
+DOMPurify.addHook('afterSanitizeAttributes', (node) => {
+  if (node.tagName === 'A' && node?.target === '_blank') {
+    const rel = ['noopener', 'noreferrer', 'nofollow'];
+    const existingRel = node.rel?.length ? node.rel.split(' ') : [];
+    const combined = uniq([...rel, ...existingRel]);
+
+    node.setAttribute('rel', combined.join(' '));
+  }
+});
+
+export const purifyHTML = (value, options = { ALLOWED_TAGS }) => {
+  return DOMPurify.sanitize(value, options);
+};

package/plugins/clean-tooltip-directive.js

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import { VTooltip } from 'v-tooltip';
-import { purifyHTML } from './clean-html-directive';
+import { purifyHTML } from './clean-html';
 
 function purifyContent(value) {
   const type = typeof value;

package/plugins/codemirror-loader.js

@@ -1,5 +1,5 @@
 // Share codemirror with plugins
 
-if ( process.client && !window.__codeMirrorLoader ) {
+if ( !window.__codeMirrorLoader ) {
   window.__codeMirrorLoader = () => import(/* webpackChunkName: "codemirror" */ '@shell/plugins/codemirror');
 }

package/plugins/codemirror.js

@@ -125,6 +125,47 @@ CodeMirror.defineExtension('foldLinesMatching', function(regex) {
   });
 });
 
+function countSpaces(line) {
+  for (let i = 0; i < line.length; i++) {
+    if (line[i] !== ' ') {
+      return i;
+    }
+  }
+
+  return line.length;
+}
+
+CodeMirror.defineExtension('foldYaml', function(path) {
+  this.operation(() => {
+    let elements = [];
+
+    for (let i = this.firstLine(), e = this.lastLine(); i <= e; i++) {
+      const line = this.getLine(i);
+      const index = countSpaces(line);
+      const trimmed = line.trim();
+
+      if (trimmed.endsWith(':') || trimmed.endsWith(': >-')) {
+        const name = trimmed.split(':')[0].substr(0, trimmed.length - 1);
+
+        // Remove all elements of the same are greater index
+        elements = elements.filter((e) => e.index < index);
+
+        // Add on this one
+        elements.push({
+          index,
+          name
+        });
+
+        const currentPath = elements.map((e) => e.name).join('.');
+
+        if (currentPath === path) {
+          this.foldCode(CodeMirror.Pos(i, 0), null, 'fold');
+        }
+      }
+    }
+  });
+});
+
 CodeMirror.registerHelper('fold', 'yamlcomments', (cm, start) => {
   if ( !isLineComment(cm, start.line) ) {
     return;

package/plugins/dashboard-store/__tests__/{mutations.spec.ts → mutations.test.ts}

@@ -1,4 +1,4 @@
-import { batchChanges } from '@shell/plugins/dashboard-store/mutations';
+import { batchChanges } from '@shell/plugins/dashboard-store/mutations.js';
 import { POD, WORKLOAD_TYPES } from '@shell/config/types';
 import Resource from '@shell/plugins/dashboard-store/resource-class';
 

package/plugins/dashboard-store/__tests__/resource-class.test.ts

@@ -0,0 +1,49 @@
+import Resource from '@shell/plugins/dashboard-store/resource-class.js';
+import { resourceClassJunkObject } from '@shell/plugins/dashboard-store/__tests__/utils/store-mocks';
+
+describe('class: Resource', () => {
+  describe('given custom resource keys', () => {
+    const customResource = resourceClassJunkObject;
+
+    it('should keep internal keys', () => {
+      const resource = new Resource(customResource, {
+        getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+        dispatch:    jest.fn(),
+        rootGetters: { 'i18n/t': jest.fn() },
+      });
+
+      expect({ ...resource }).toStrictEqual(customResource);
+    });
+
+    describe('method: save', () => {
+      it('should remove all the internal keys', async() => {
+        const dispatch = jest.fn();
+        const resource = new Resource(customResource, {
+          getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+          dispatch,
+          rootGetters: { 'i18n/t': jest.fn() },
+        });
+
+        const expectation = { type: customResource.type };
+
+        await resource.save();
+
+        const opt = {
+          data:    expectation,
+          headers: {
+            accept:         'application/json',
+            'content-type': 'application/json',
+          },
+          method: 'post',
+          url:    undefined,
+        };
+
+        // Data sent should have been cleaned
+        expect(dispatch).toHaveBeenCalledWith('request', { opt, type: customResource.type });
+
+        // Original workload model should remain unchanged
+        expect({ ...resource }).toStrictEqual(customResource);
+      });
+    });
+  });
+});

package/plugins/dashboard-store/__tests__/utils/store-mocks.ts

@@ -0,0 +1,7 @@
+const customType = 'dsaf';
+
+export const resourceClassJunkObject = {
+  type:        customType,
+  __rehydrate: 'whatever',
+  __clone:     'whatever',
+};

package/plugins/dashboard-store/actions.js

@@ -15,7 +15,8 @@ export const _ALL_IF_AUTHED = 'allIfAuthed';
 export const _NONE = 'none';
 
 const SCHEMA_CHECK_RETRIES = 15;
-const SCHEMA_CHECK_RETRY_LOG = 10;
+const HAVE_ALL_CHECK_RETRIES = 15;
+const RETRY_LOG = 10;
 
 export async function handleSpoofedRequest(rootGetters, schemaStore, opt, product) {
   // Handle spoofed types instead of making an actual request
@@ -70,6 +71,10 @@ export async function loadSchemas(ctx, watch = true) {
   return all;
 }
 
+const findAllGetter = (getters, type, opt) => {
+  return opt.namespaced ? getters.matching(type, null, opt.namespaced, { skipSelector: true }) : getters.all(type);
+};
+
 export default {
   request() {
     throw new Error('Not Implemented');
@@ -163,7 +168,7 @@ export default {
         dispatch('watch', args);
       }
 
-      return getters.all(type);
+      return findAllGetter(getters, type, opt);
     }
 
     let load = (opt.load === undefined ? _ALL : opt.load);
@@ -328,7 +333,7 @@ export default {
       dispatch('watch', args);
     }
 
-    const all = getters.all(type);
+    const all = findAllGetter(getters, type, opt);
 
     if (!opt.incremental && opt.hasManualRefresh) {
       dispatch('resource-fetch/updateManualRefreshIsLoading', false, { root: true });
@@ -613,7 +618,7 @@ export default {
       schema = getters['schemaFor'](type);
 
       if (!schema) {
-        if (tries === SCHEMA_CHECK_RETRY_LOG) {
+        if (tries === RETRY_LOG) {
           console.warn(`Schema for ${ type } not available... retrying...`); // eslint-disable-line no-console
         }
         await new Promise((resolve) => setTimeout(resolve, 1000));
@@ -628,6 +633,27 @@ export default {
     }
   },
 
+  async waitForHaveAll({ getters }, { type, throwError = false, attempts = HAVE_ALL_CHECK_RETRIES }) {
+    let tries = attempts;
+    let haveAll = null;
+
+    while (!haveAll && tries > 0) {
+      haveAll = getters['haveAll'](type);
+
+      if (!haveAll) {
+        if (tries === RETRY_LOG) {
+          console.warn(`wait for all of ${ type } continuing...`); // eslint-disable-line no-console
+        }
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+        tries--;
+      }
+    }
+
+    if (tries === 0 && throwError) {
+      throw new Error(`Failed to wait for all of ${ type }`);
+    }
+  },
+
   incrementLoadCounter({ commit }, resource) {
     commit('incrementLoadCounter', resource);
   },

package/plugins/dashboard-store/classify.js

@@ -12,24 +12,7 @@ export function classify(ctx, obj, isClone = false) {
 
   const customModel = ctx.getters['classify'](obj);
 
-  const out = new customModel(obj, ctx, (process.server ? ctx.state.config.namespace : null), isClone);
-
-  if ( process.server ) {
-    Object.defineProperty(obj, '__rehydrate', {
-      value:        ctx.state.config.namespace,
-      enumerable:   true,
-      configurable: true
-    });
-
-    if ( isClone ) {
-      Object.defineProperty(obj, '__clone', {
-        value:        true,
-        enumerable:   true,
-        configurable: true,
-        writable:     true
-      });
-    }
-  }
+  const out = new customModel(obj, ctx, null, isClone);
 
   return out;
 }

package/plugins/dashboard-store/getters.js

@@ -64,19 +64,24 @@ export default {
     return state.types[type].list;
   },
 
-  matching: (state, getters, rootState) => (type, selector, namespace) => {
-    let all = getters['all'](type);
+  matching: (state, getters, rootState) => (type, selector, namespace, config = { skipSelector: false }) => {
+    let matching = getters['all'](type);
 
     // Filter first by namespace if one is provided, since this is efficient
-    if (namespace) {
-      all = all.filter((obj) => obj.namespace === namespace);
+    if (namespace && typeof namespace === 'string') {
+      matching = matching.filter((obj) => obj.namespace === namespace);
     }
 
     garbageCollect.gcUpdateLastAccessed({
       state, getters, rootState
     }, type);
 
-    return all.filter((obj) => {
+    // Looks like a falsy selector is a thing, so if we're not interested in filtering by the selector... explicitly avoid it
+    if (config.skipSelector) {
+      return matching;
+    }
+
+    return matching.filter((obj) => {
       return matches(obj, selector);
     });
   },

package/plugins/dashboard-store/index.js

@@ -33,21 +33,9 @@ export default (vuexModule, config, init) => {
   const namespace = config.namespace || '';
 
   return function(store) {
-    // const inst = SteveFactory(namespace, config.baseUrl);
-
     store.registerModule(namespace, vuexModule);
     store.commit(`${ namespace }/applyConfig`, config);
 
-    if ( !process.client ) {
-      return;
-    }
-
-    // store.subscribe(({ type }, state) => {
-    //   if ( type === 'auth/loggedOut' ) {
-    //     store.dispatch(`${ namespace }/unsubscribe`);
-    //   }
-    // });
-
     const module = store._modules.root._children[namespace];
     const fromServer = window.__NUXT__;
 

package/plugins/dashboard-store/mutations.js

@@ -23,10 +23,6 @@ function registerType(state, type) {
     // Not enumerable so they don't get sent back to the client for SSR
     Object.defineProperty(cache, 'map', { value: new Map() });
 
-    if ( process.server && !cache.list.__rehydrateAll ) {
-      Object.defineProperty(cache.list, '__rehydrateAll', { value: `${ state.config.namespace }/${ type }`, enumerable: true });
-    }
-
     Vue.set(state.types, type, cache);
   }
 

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

@@ -105,6 +105,7 @@ export const STATES_ENUM = {
   ERRORING:         'erroring',
   ERRORS:           'errors',
   EXPIRED:          'expired',
+  EXPIRING:         'expiring',
   FAIL:             'fail',
   FAILED:           'failed',
   HEALTHY:          'healthy',
@@ -167,6 +168,13 @@ export const STATES_ENUM = {
   WARNING:          'warning',
 };
 
+export function mapStateToEnum(statusString) {
+  // e.g. in fleet Status is Capitalized. This function will map it to the enum
+  return Object.values(STATES_ENUM).find((val) => {
+    return val.toLowerCase() === statusString.toLocaleLowerCase();
+  });
+}
+
 export const STATES = {
   [STATES_ENUM.IN_USE]: {
     color: 'success', icon: 'dot-open', label: 'In Use', compoundIcon: 'checkmark'
@@ -253,7 +261,10 @@ export const STATES = {
     color: 'error', icon: 'error', label: 'Errors', compoundIcon: 'error'
   },
   [STATES_ENUM.EXPIRED]: {
-    color: 'warning', icon: 'error', label: 'Expired', compoundIcon: 'warning'
+    color: 'error', icon: 'error', label: 'Expired', compoundIcon: 'warning'
+  },
+  [STATES_ENUM.EXPIRING]: {
+    color: 'warning', icon: 'error', label: 'Expiring', compoundIcon: 'error'
   },
   [STATES_ENUM.FAIL]: {
     color: 'error', icon: 'error', label: 'Fail', compoundIcon: 'error'
@@ -512,6 +523,28 @@ export function stateDisplay(state) {
   return key.split(/-/).map(ucFirst).join('-');
 }
 
+export function primaryDisplayStatusFromCount(status) {
+  const statusOrder = [
+    STATES_ENUM.ERROR,
+    STATES_ENUM.FAILED,
+    STATES_ENUM.WARNING,
+    STATES_ENUM.MODIFIED,
+    STATES_ENUM.WAIT_APPLIED,
+    STATES_ENUM.ORPHANED,
+    STATES_ENUM.MISSING,
+    STATES_ENUM.UNKNOWN,
+    STATES_ENUM.NOT_READY,
+    STATES_ENUM.READY,
+  ];
+
+  // sort status by order of statusOrder
+  const existingStatuses = Object.keys(status).filter((key) => {
+    return status[key] > 0 && statusOrder.includes(key.toLowerCase());
+  }).sort((a, b) => statusOrder.indexOf(a.toLowerCase()) - statusOrder.indexOf(b.toLowerCase()));
+
+  return existingStatuses[0] ? existingStatuses[0] : STATES_ENUM.UNKNOWN;
+}
+
 export function stateSort(color, display) {
   color = color.replace(/^(text|bg)-/, '');
 
@@ -1089,6 +1122,16 @@ export default class Resource {
     return this._save(...arguments);
   }
 
+  /**
+   * Remove any unwanted properties from the object that will be saved
+   */
+  cleanForSave(data, forNew) {
+    delete data.__rehydrate;
+    delete data.__clone;
+
+    return data;
+  }
+
   /**
    * Allow to handle the response of the save request
    * @param {*} res Full request response
@@ -1096,9 +1139,6 @@ export default class Resource {
   processSaveResponse(res) { }
 
   async _save(opt = {}) {
-    delete this.__rehydrate;
-    delete this.__clone;
-
     const forNew = !this.id;
 
     const errors = await this.validationErrors(this, opt.ignoreFields);
@@ -1145,22 +1185,24 @@ export default class Resource {
     // @TODO remove this once the API maps steve _type <-> k8s type in both directions
     opt.data = this.toSave() || { ...this };
 
-    if (opt?.data._type) {
+    if (opt.data._type) {
       opt.data.type = opt.data._type;
     }
 
-    if (opt?.data._name) {
+    if (opt.data._name) {
       opt.data.name = opt.data._name;
     }
 
-    if (opt?.data._labels) {
+    if (opt.data._labels) {
       opt.data.labels = opt.data._labels;
     }
 
-    if (opt?.data._annotations) {
+    if (opt.data._annotations) {
       opt.data.annotations = opt.data._annotations;
     }
 
+    opt.data = this.cleanForSave(opt.data, forNew);
+
     // handle "replace" opt as a query param _replace=true for norman PUT requests
     if (opt?.replace && opt.method === 'put') {
       const argParam = opt.url.includes('?') ? '&' : '?';
@@ -1218,19 +1260,11 @@ export default class Resource {
   // ------------------------------------------------------------------
 
   currentRoute() {
-    if ( process.server ) {
-      return this.$rootState.$route;
-    } else {
-      return window.$nuxt.$route;
-    }
+    return window.$nuxt.$route;
   }
 
   currentRouter() {
-    if ( process.server ) {
-      return this.$rootState.$router;
-    } else {
-      return window.$nuxt.$router;
-    }
+    return window.$nuxt.$router;
   }
 
   get listLocation() {
@@ -1931,4 +1965,11 @@ export default class Resource {
   get creationTimestamp() {
     return this.metadata?.creationTimestamp;
   }
+
+  /**
+   * Allows model to specify JSON Paths that should be folded in the YAML editor by default
+   */
+  get yamlFolding() {
+    return [];
+  }
 }

package/plugins/index.js

@@ -0,0 +1,11 @@
+/**
+ * Load the directives
+ *
+ * These are included in a function that can be explictly called, so that we can be sure
+ * of the execution order, rather than importing them at the top of a file.
+ */
+export function loadDirectives() {
+  import('./clean-html-directive');
+  import('./clean-tooltip-directive');
+  import('./directives');
+}