@rancher/shell 0.5.3 → 2.0.0

package/plugins/dashboard-store/mutations.js

@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue, { markRaw } from 'vue';
 import { addObject, addObjects, clear, removeObject } from '@shell/utils/array';
 import { SCHEMA, COUNT } from '@shell/config/types';
 import { normalizeType, keyFieldFor } from '@shell/plugins/dashboard-store/normalize';
@@ -14,15 +14,31 @@ function registerType(state, type) {
       list:          [],
       haveAll:       false,
       haveSelector:  {},
-      haveNamespace: undefined, // If the cached list only contains resources for a namespace, this will contain the ns name
-      revision:      0, // The highest known resourceVersion from the server for this type
-      generation:    0, // Updated every time something is loaded for this type
-      loadCounter:   0, // Used to cancel incremental loads if the page changes during load
+      /**
+       * If the cached list only contains resources for a namespace, this will contain the ns name
+       */
+      haveNamespace: undefined,
+      /**
+       * If the cached list only contains resources from a pagination request, this will contain the pagination settings (`StorePagination`)
+       */
+      havePage:      undefined,
+      /**
+       * The highest known resourceVersion from the server for this type
+       */
+      revision:      0,
+      /**
+       * Updated every time something is loaded for this type
+       */
+      generation:    0,
+      /**
+       * Used to cancel incremental loads if the page changes during load
+       */
+      loadCounter:   0,
+
+      // Not enumerable so they don't get sent back to the client for SSR
+      map: markRaw(new Map()),
     };
 
-    // Not enumerable so they don't get sent back to the client for SSR
-    Object.defineProperty(cache, 'map', { value: new Map() });
-
     Vue.set(state.types, type, cache);
   }
 
@@ -47,11 +63,28 @@ function replaceResource(existing, data, getters) {
   return replace(existing, data);
 }
 
-export function load(state, { data, ctx, existing }) {
+/**
+ * `load` can be called as part of a loop. to avoid common look ups create them up front and pass as `cachedArgs`
+ */
+export function createLoadArgs(ctx, dataType) {
   const { getters } = ctx;
-  let type = normalizeType(data.type);
+  const type = normalizeType(dataType);
   const keyField = getters.keyFieldForType(type);
   const opts = ctx.rootGetters[`type-map/optionsFor`](type);
+
+  return {
+    type, keyField, opts
+  };
+}
+
+export function load(state, {
+  data, ctx, existing, cachedArgs
+}) {
+  const { getters } = ctx;
+  // Optimisation. This can run once per resource loaded.., so pass in from parent
+  const { type: cachedType, keyField, opts } = cachedArgs || createLoadArgs(ctx, data.type);
+  let type = cachedType;
+
   const limit = opts?.limit;
 
   // Inject special fields for indexing schemas
@@ -65,37 +98,52 @@ export function load(state, { data, ctx, existing }) {
 
   cache.generation++;
 
-  let entry;
+  let entry = cache.map.get(id);
+  const inMap = !!entry;
 
+  //
+  // Determine the `entry` that should be in the local map and list cache
+  //
   if ( existing && !existing.id ) {
-    // A specific proxy instance to used was passed in (for create -> save),
-    // use it instead of making a new proxy
-    entry = replaceResource(existing, data, getters);
-    addObject(cache.list, entry);
-    cache.map.set(id, entry);
-    // console.log('### Mutation added from existing proxy', type, id);
-  } else {
-    entry = cache.map.get(id);
+    // A specific proxy instance to use was passed in (for create -> save), use it instead of making a new proxy
+    // `existing` is a classified resource created locally that is most probably not in the store (unless a slow connection means it's added by socket before the API responds)
+    // Note - `existing` has no `id` because the resource was created locally and not supplied by Rancher API
 
-    if ( entry ) {
-      // There's already an entry in the store, update it
-      replaceResource(entry, data, getters);
-      // console.log('### Mutation Updated', type, id);
+    // Get the latest and greatest version of the resource
+    const latestEntry = replaceResource(existing, data, getters);
+
+    if (inMap) {
+      // There's already an entry in the store, so merge changes into it. The list entry is a reference to the map (and vice versa)
+      entry = replaceResource(entry, latestEntry, getters);
+    } else {
+      // There's no entry, using existing proxy
+      entry = latestEntry;
+    }
+  } else {
+    if (inMap) {
+      // There's already an entry in the store, so merge changes into it. The list entry is a reference to the map (and vice versa)
+      entry = replaceResource(entry, data, getters);
     } else {
       // There's no entry, make a new proxy
       entry = classify(ctx, data);
-      addObject(cache.list, entry);
-      cache.map.set(id, entry);
-      // console.log('### Mutation', type, id);
+    }
+  }
 
-      // If there is a limit to the number of resources we can store for this type then
-      // remove the first one to keep the list size to that limit
-      if (limit && cache.list.length > limit) {
-        const rm = cache.list.shift();
+  //
+  // Ensure the `entry` is in both both list and cache
+  // Note - We should be safe assuming the two collections have parity (not in map means not in list)
+  //
+  if (!inMap) {
+    cache.list.push(entry);
+    cache.map.set(id, entry);
+  }
 
-        cache.map.delete(rm.id);
-      }
-    }
+  // If there is a limit to the number of resources we can store for this type then
+  // remove the first one to keep the list size to that limit
+  if (limit && cache.list.length > limit) {
+    const rm = cache.list.shift();
+
+    cache.map.delete(rm.id);
   }
 
   if ( data.baseType ) {
@@ -117,6 +165,7 @@ export function forgetType(state, type) {
     cache.haveAll = false;
     cache.haveSelector = {};
     cache.haveNamespace = undefined;
+    cache.havePage = undefined;
     cache.revision = 0;
     cache.generation = 0;
     clear(cache.list);
@@ -291,13 +340,39 @@ export function loadAll(state, {
 
   // Allow requester to skip setting that everything has loaded
   if (!skipHaveAll) {
-    cache.haveNamespace = namespace;
-    cache.haveAll = !namespace;
+    if (namespace) {
+      cache.havePage = false;
+      cache.haveNamespace = namespace;
+      cache.haveAll = false;
+    } else {
+      cache.havePage = false;
+      cache.haveNamespace = false;
+      cache.haveAll = true;
+    }
   }
 
   return proxies;
 }
 
+/**
+ * Add a set of resources to the store for a given type
+ *
+ * Don't mark the 'haveAll' field - this is used for incremental loading
+ */
+export function loadAdd(state, { type, data: allLatest, ctx }) {
+  const { getters } = ctx;
+  const keyField = getters.keyFieldForType(type);
+  const cachedArgs = createLoadArgs(ctx, allLatest?.[0]?.type);
+
+  allLatest.forEach((entry) => {
+    const existing = state.types[type].map.get(entry[keyField]);
+
+    load(state, {
+      data: entry, ctx, existing, cachedArgs
+    });
+  });
+}
+
 export default {
   registerType,
   load,
@@ -310,8 +385,12 @@ export default {
     Object.assign(state.config, config);
   },
 
+  /**
+   * Load multiple different types of resources
+   */
   loadMulti(state, { data, ctx }) {
     // console.log('### Mutation loadMulti', data?.length);
+
     for ( const entry of data ) {
       load(state, { data: entry, ctx });
     }
@@ -321,9 +400,12 @@ export default {
     type, entries, ctx, selector, revision
   }) {
     const cache = registerType(state, type);
+    const cachedArgs = createLoadArgs(ctx, entries?.[0]?.type);
 
     for ( const data of entries ) {
-      load(state, { data, ctx });
+      load(state, {
+        data, ctx, cachedArgs
+      });
     }
 
     cache.haveSelector[selector] = true;
@@ -343,12 +425,13 @@ export default {
     // const allExisting = getters.all({type});
     const keyField = getters.keyFieldForType(type);
     const cache = state.types[type];
+    const cachedArgs = createLoadArgs(ctx, allLatest?.[0].type);
 
     allLatest.forEach((entry) => {
       const existing = state.types[type].map.get(entry[keyField]);
 
       load(state, {
-        data: entry, ctx, existing
+        data: entry, ctx, existing, cachedArgs
       });
     });
     cache.list.forEach((entry) => {
@@ -358,19 +441,38 @@ export default {
     });
   },
 
-  // Add a set of resources to the store for a given type
-  // Don't mark the 'haveAll' field - this is used for incremental loading
-  loadAdd(state, { type, data: allLatest, ctx }) {
-    const { getters } = ctx;
-    const keyField = getters.keyFieldForType(type);
+  loadAdd,
 
-    allLatest.forEach((entry) => {
-      const existing = state.types[type].map.get(entry[keyField]);
+  loadPage(state, {
+    type,
+    data,
+    ctx,
+    pagination,
+  }) {
+    if (!data) {
+      return;
+    }
 
-      load(state, {
-        data: entry, ctx, existing
-      });
-    });
+    const keyField = ctx.getters.keyFieldForType(type);
+    const proxies = data.map((x) => classify(ctx, x));
+    const cache = registerType(state, type);
+
+    clear(cache.list);
+    cache.map.clear();
+    cache.generation++;
+
+    addObjects(cache.list, proxies);
+
+    for ( let i = 0 ; i < proxies.length ; i++ ) {
+      cache.map.set(proxies[i][keyField], proxies[i]);
+    }
+
+    // havePage is of type `StorePagination`
+    cache.havePage = pagination;
+    cache.haveNamespace = undefined;
+    cache.haveAll = undefined;
+
+    return proxies;
   },
 
   forgetAll(state, { type }) {

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

@@ -16,10 +16,8 @@ import { downloadFile, generateZip } from '@shell/utils/download';
 import { clone, get } from '@shell/utils/object';
 import { eachLimit } from '@shell/utils/promise';
 import { sortableNumericSuffix } from '@shell/utils/sort';
-import { coerceStringTypeToScalarType, escapeHtml, ucFirst } from '@shell/utils/string';
+import { escapeHtml, ucFirst } from '@shell/utils/string';
 import {
-  displayKeyFor,
-  validateBoolean,
   validateChars,
   validateDnsLikeTypes,
   validateLength,
@@ -32,26 +30,12 @@ import forIn from 'lodash/forIn';
 import isEmpty from 'lodash/isEmpty';
 import isFunction from 'lodash/isFunction';
 import isString from 'lodash/isString';
-import uniq from 'lodash/uniq';
 import Vue from 'vue';
 
-import { normalizeType } from './normalize';
-
 import { ExtensionPoint, ActionLocation } from '@shell/core/types';
 import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
 
-const STRING_LIKE_TYPES = [
-  'string',
-  'date',
-  'blob',
-  'enum',
-  'multiline',
-  'masked',
-  'password',
-  'dnsLabel',
-  'hostname',
-];
-const DNS_LIKE_TYPES = ['dnsLabel', 'dnsLabelRestricted', 'hostname'];
+export const DNS_LIKE_TYPES = ['dnsLabel', 'dnsLabelRestricted', 'hostname'];
 
 const REMAP_STATE = {
   disabled:                 'inactive',
@@ -1138,10 +1122,10 @@ export default class Resource {
    */
   processSaveResponse(res) { }
 
-  async _save(opt = {}) {
+  async _save(opt = { }) {
     const forNew = !this.id;
 
-    const errors = await this.validationErrors(this, opt.ignoreFields);
+    const errors = this.validationErrors(this, opt);
 
     if (!isEmpty(errors)) {
       return Promise.reject(errors);
@@ -1260,11 +1244,11 @@ export default class Resource {
   // ------------------------------------------------------------------
 
   currentRoute() {
-    return window.$nuxt.$route;
+    return window.$globalApp.$route;
   }
 
   currentRouter() {
-    return window.$nuxt.$router;
+    return window.$globalApp.$router;
   }
 
   get listLocation() {
@@ -1674,93 +1658,14 @@ export default class Resource {
     return errors;
   }
 
-  validationErrors(data = this, ignoreFields) {
-    const errors = [];
-    const {
-      type: originalType,
-      schema
-    } = data;
-    const type = normalizeType(originalType);
-
-    if ( !originalType ) {
-      // eslint-disable-next-line
-      console.warn(this.t('validation.noType'), data);
-
-      return errors;
-    }
-
-    if ( !schema ) {
-      // eslint-disable-next-line
-      // console.warn(this.t('validation.noSchema'), originalType, data);
-
-      return errors;
-    }
-
-    const fields = schema.resourceFields || {};
-    const keys = Object.keys(fields);
-    let field, key, val, displayKey;
-
-    for ( let i = 0 ; i < keys.length ; i++ ) {
-      const fieldErrors = [];
-
-      key = keys[i];
-      field = fields[key];
-      val = get(data, key);
-      displayKey = displayKeyFor(type, key, this.$rootGetters);
-
-      const fieldType = field?.type ? normalizeType(field.type) : null;
-      const valIsString = isString(val);
-
-      if ( ignoreFields && ignoreFields.includes(key) ) {
-        continue;
-      }
-
-      if ( val === undefined ) {
-        val = null;
-      }
-
-      if (valIsString) {
-        if (fieldType) {
-          Vue.set(data, key, coerceStringTypeToScalarType(val, fieldType));
-        }
-
-        // Empty strings on nullable string fields -> null
-        if ( field.nullable && val.length === 0 && STRING_LIKE_TYPES.includes(fieldType)) {
-          val = null;
-
-          Vue.set(data, key, val);
-        }
-      }
-      if (fieldType === 'boolean') {
-        validateBoolean(val, field, displayKey, this.$rootGetters, fieldErrors);
-      } else {
-        validateLength(val, field, displayKey, this.$rootGetters, fieldErrors);
-        validateChars(val, field, displayKey, this.$rootGetters, fieldErrors);
-      }
-
-      if (fieldErrors.length > 0) {
-        fieldErrors.push(this.t('validation.required', { key: displayKey }));
-        errors.push(...fieldErrors);
-        continue;
-      }
-
-      // IDs claim to be these but are lies...
-      if ( key !== 'id' && !isEmpty(val) && DNS_LIKE_TYPES.includes(fieldType) ) {
-        // DNS types should be lowercase
-        const tolower = (val || '').toLowerCase();
-
-        if ( tolower !== val ) {
-          val = tolower;
-
-          Vue.set(data, key, val);
-        }
-
-        fieldErrors.push(...validateDnsLikeTypes(val, fieldType, displayKey, this.$rootGetters, fieldErrors));
-      }
-      errors.push(...fieldErrors);
-    }
-
-    return uniq([...errors, ...this.customValidationErrors(data)]);
+  /**
+   * Check this instance is valid against
+   * - any custom dashboard validation
+   *
+   * Models can override this and call super.validationErrors
+   */
+  validationErrors(data = this, opts = { }) {
+    return this.customValidationErrors(data);
   }
 
   get ownersByType() {

package/plugins/directives.js

@@ -1,41 +1,8 @@
 import Vue from 'vue';
+import focusDirective from '@shell/plugins/directives.js';
 
-Vue.directive('focus', {
-  inserted(_el, _binding, vnode) {
-    const element = getElement(vnode);
-
-    if (element) {
-      element.focus();
-    }
-  }
-});
-
-const getElement = (vnode) => {
-  const { componentInstance, componentOptions: { tag } } = vnode;
-
-  if (tag === 'LabeledInput') {
-    return componentInstance.$refs.value;
-  }
-
-  if (tag === 'LabeledSelect') {
-    componentInstance.shouldOpen = false;
-
-    return componentInstance.$refs['select-input'].$refs.search;
-  }
-
-  if (tag === 'SelectPrincipal') {
-    const labeledSelect = componentInstance.$refs['labeled-select'];
-
-    labeledSelect.shouldOpen = false;
-
-    return labeledSelect.$refs['select-input'].$refs.search;
-  }
-
-  if (tag === 'TextAreaAutoGrow') {
-    return componentInstance.$refs.ta;
-  }
-
-  if (tag === 'Password') {
-    return componentInstance.$refs.input.$refs.value;
-  }
-};
+export default focusDirective;
+/* eslint-disable-next-line no-console */
+console.warn(`Importing focusDirective from plugins has been deprecated, use shell/directives/focus.js instead.
+Make sure to invoke it using Vue.directive('focus', focusDirective ) to maintain compatibility.`);
+Vue.directive('focus', focusDirective);

package/plugins/ember-cookie.js

@@ -0,0 +1,13 @@
+import { REDIRECTED } from '@shell/config/cookies';
+
+export default function({ $cookies }) {
+  // This tells Ember not to redirect back to us once you've already been to dashboard once.
+  // TODO: Remove this once the ember portion of the app is no longer needed
+  if ( !$cookies.get(REDIRECTED) ) {
+    $cookies.set(REDIRECTED, 'true', {
+      path:     '/',
+      sameSite: true,
+      secure:   true,
+    });
+  }
+}

package/plugins/global-formatters.js

@@ -1,10 +1,31 @@
+/* eslint-disable no-console */
 import Vue from 'vue';
 
 const components = require.context('@shell/components/formatter', false, /[A-Z]\w+\.(vue)$/);
 
-components.keys().forEach((fileName) => {
-  const componentConfig = components(fileName);
-  const componentName = fileName.split('/').pop().split('.')[0];
+const globalFormatters = {
+  install: (Vue) => {
+    components.keys().forEach((fileName) => {
+      const componentConfig = components(fileName);
+      const componentName = fileName.split('/').pop().split('.')[0];
 
-  Vue.component(componentName, componentConfig.default || componentConfig);
-});
+      if (Vue.component(componentName)) {
+        // eslint-disable-next-line no-console
+        console.debug(`Skipping ${ componentName } install. Component already exists.`);
+      } else {
+        Vue.component(componentName, componentConfig.default || componentConfig);
+      }
+    });
+  }
+};
+
+export default globalFormatters;
+
+// This is being done for backwards compatibility with our extensions that have written tests and didn't properly make use of Vue.use() when importing and mocking vue plugins
+const isThisFileBeingExecutedInATest = process.env.NODE_ENV === 'test';
+
+if (isThisFileBeingExecutedInATest) {
+  console.warn('The implicit addition of global formatters has been deprecated in Rancher Shell and will be removed in a future version. Make sure to invoke `Vue.use(globalFormatters)` to maintain compatibility.');
+
+  Vue.use(globalFormatters);
+}