@rancher/shell 0.1.2 → 0.1.4

package/content/docs/en-us/getting-started.md

@@ -72,11 +72,6 @@ As of version 2.6, Cluster Manager is no longer provided as a separate UI. The d
     <tr class="table-group">
       <td colspan="3">Global</td>
     </tr>
-    <tr>
-      <td>Apps</td>
-      <td>Global → Apps</td>
-      <td>Menu → Multi-cluster Apps → Apps</td>
-    </tr>
     <tr>
       <td>Settings</td>
       <td>Global → Settings</td>
@@ -100,7 +95,7 @@ As of version 2.6, Cluster Manager is no longer provided as a separate UI. The d
     <tr>
       <td>Pod Security Policies</td>
       <td>Global → Security → Pod Security Policies</td>
-      <td>Menu → Cluster Management → Advanced → Pod Security Policies</td>
+      <td>Menu → Cluster Management → Pod Security Policies</td>
     </tr>
     <!-- -->
     <tr class="table-group">
@@ -136,26 +131,11 @@ As of version 2.6, Cluster Manager is no longer provided as a separate UI. The d
       <td>(Cluster) → Tools → Notifiers</td>
       <td>Menu → (Cluster) → Legacy -> Notifiers</td>
     </tr>
-    <tr>
-      <td>Logging (V1)</td>
-      <td>(Cluster) → Tools → Logging</td>
-      <td>Menu → (Cluster) → Cluster Tools -> Logging (Legacy)</td>
-    </tr>
     <tr>
       <td>Monitoring (V1)</td>
       <td>(Cluster) → Tools → Monitoring</td>
       <td>Menu → (Cluster) → Cluster Tools -> Monitoring (Legacy)</td>
     </tr>
-    <tr>
-      <td>Istio (V1)</td>
-      <td>(Cluster) → Tools → Istio</td>
-      <td>Menu → (Cluster) → Cluster Tools -> Istio (Legacy)</td>
-    </tr>
-    <tr>
-      <td>CIS Scans (V1)</td>
-      <td>(Cluster) → Tools → CIS Scans</td>
-      <td>Menu → (Cluster) → Legacy -> CIS Scans</td>
-    </tr>
     <tr class="table-group">
       <td colspan="3">V1 Monitoring</td>
     <tr>
@@ -212,11 +192,6 @@ As of version 2.6, Cluster Manager is no longer provided as a separate UI. The d
       <td>(Cluster) → (Project) → Tools → Monitoring</td>
       <td>Menu → (Cluster) → Legacy → Project → (Project) → Monitoring</td>
     </tr>
-    <tr>
-      <td>Pipeline</td>
-      <td>(Cluster) → (Project) → Tools → Pipeline</td>
-      <td>Menu → (Cluster) → Legacy → Project → (Project) → Pipelines → Configuration</td>
-    </tr>
     <tr class="table-group">
       <td colspan="3">Other</td>
     </tr>

package/core/plugin-routes.ts

@@ -16,6 +16,7 @@ type RouteInstallHistory = {
 
 export class PluginRoutes {
   router: Router;
+  pluginRoutes: RouteConfig[] = [];
 
   replacedRoutes: RouteInstallHistory = {};
 
@@ -53,7 +54,7 @@ export class PluginRoutes {
 
             break;
           } else {
-            // Need to updare the previous item so that when it is removed, it restores the correct route
+            // Need to update the previous item so that when it is removed, it restores the correct route
             const previous = info[index - 1];
 
             previous.route = savedRoute.route;
@@ -65,14 +66,24 @@ export class PluginRoutes {
       }
     });
 
+    // Remove routes from pluginRoutes, update matcher (to avoid dupes when re-adding plugin routes)
+    this.pluginRoutes = this.pluginRoutes.filter(pR => !plugin.routes.find((r: any) => pR === r.route));
+    this.updateMatcher([], [
+      ...this.pluginRoutes,
+      ...(this.router.options.routes || [])
+    ]);
+
+    // Restore appropriate routes
     if (restore.length > 0) {
       this.addRoutes(null, restore);
     }
   }
 
   public addRoutes(plugin: any, routes: RouteInfo[]) {
-    const appRoutes = this.router.options.routes || [];
-    let replaced = 0;
+    const allRoutes = [
+      ...this.pluginRoutes,
+      ...(this.router.options.routes || [])
+    ];
 
     // Need to take into account if routes are being replaced
     // Despite what the docs say, routes are not replaced, so we use a workaround
@@ -82,18 +93,18 @@ export class PluginRoutes {
       let existing: any;
 
       if (r.parent) {
-        const pExisting = appRoutes.findIndex((route: any) => route.name === r.parent) as any;
+        const pExisting = allRoutes.findIndex((route: any) => route.name === r.parent) as any;
         const path = `${ pExisting.path }${ r.route.path }`;
 
         // TODO: Validate
-        existing = appRoutes.findIndex((route: any) => route.path === path);
+        existing = allRoutes.findIndex((route: any) => route.path === path);
       } else {
         // no parent route
-        existing = appRoutes.findIndex((route: any) => route.name === r.route.name);
+        existing = allRoutes.findIndex((route: any) => route.name === r.route.name);
       }
 
       if (existing >= 0) {
-        const existingRoute = appRoutes[existing];
+        const existingRoute = allRoutes[existing];
 
         // Store the route so we can restore it on uninstall
         if (plugin && existingRoute?.name) {
@@ -107,32 +118,33 @@ export class PluginRoutes {
           });
         }
 
-        appRoutes.splice(existing, 1);
-        replaced++;
+        allRoutes.splice(existing, 1);
       }
     });
 
-    const newRouter: Router = replaced > 0 ? new Router({
+    this.updateMatcher(routes, allRoutes);
+  }
+
+  private updateMatcher(newRoutes: RouteInfo[], allRoutes: RouteConfig[]) {
+    // Note - Always use a new router and replace the existing router's matching
+    // Using the existing router and adding routes to it will force nuxt middleware (specifically authenticated on default layout) to
+    // execute many times (nuxt middleware boils down to router.beforeEach). This issue was seen refreshing in a harvester cluster with a
+    // dynamically loaded cluster
+    const newRouter: Router = new Router({
       mode:   'history',
-      routes: appRoutes
-    }) : this.router;
+      routes: allRoutes
+    });
 
-    routes.forEach((r: any) => {
+    newRoutes.forEach((r: any) => {
       if (r.parent) {
         newRouter.addRoute(r.parent, r.route);
       } else {
         newRouter.addRoute(r.route);
       }
+      this.pluginRoutes.push(r.route);
     });
 
-    if (replaced > 0) {
-      // Typing is incorrect
-      (this.router as any).matcher = (newRouter as any).matcher;
-    }
-
-    // If we replaced any routes, then we should reload on uninstall
-    if (plugin) {
-      plugin.reloadOnUninstall = replaced > 0;
-    }
+    // Typing is incorrect
+    (this.router as any).matcher = (newRouter as any).matcher;
   }
 }

package/core/plugin.ts

@@ -1,6 +1,6 @@
 import { RouteConfig } from 'vue-router';
 import { DSL as STORE_DSL } from '@shell/store/type-map';
-import { IPlugin } from './types';
+import { CoreStoreInit, IPlugin } from './types';
 import coreStore, { coreStoreModule, coreStoreState } from '@shell/plugins/dashboard-store';
 import {
   PluginRouteConfig, RegisterStore, UnregisterStore, CoreStoreSpecifics, CoreStoreConfig, OnNavToPackage, OnNavAwayFromPackage, OnLogOut
@@ -23,6 +23,8 @@ export class Plugin implements IPlugin {
   // Plugin metadata (plugin package.json)
   public _metadata: any = {};
 
+  public _validators: {[key:string]: Function } = {}
+
   // Is this a built-in plugin (bundled with the application)
   public builtin = false;
 
@@ -43,6 +45,14 @@ export class Plugin implements IPlugin {
     this.name = this._metadata.name || this.id;
   }
 
+  get validators() {
+    return this._validators;
+  }
+
+  set validators(vals: {[key:string]: Function }) {
+    this._validators = vals;
+  }
+
   // Track which products the plugin creates
   DSL(store: any, productName: string) {
     const storeDSL = STORE_DSL(store, productName);
@@ -104,13 +114,14 @@ export class Plugin implements IPlugin {
     });
   }
 
-  addDashboardStore(storeName: string, storeSpecifics: CoreStoreSpecifics, config: CoreStoreConfig) {
+  addDashboardStore(storeName: string, storeSpecifics: CoreStoreSpecifics, config: CoreStoreConfig, init?: CoreStoreInit) {
     this.stores.push({
       storeName,
       register: () => {
         return coreStore(
           this.storeFactory(storeSpecifics, config),
           config,
+          init,
         );
       },
       unregister: (store: any) => {
@@ -167,7 +178,8 @@ export class Plugin implements IPlugin {
     const nparts = name.split('/');
 
     // Support components in a sub-folder - component_name/index.vue (and ignore other componnets in that folder)
-    if (nparts.length === 2) {
+    // Allow store-scoped models via sub-folder - pkgname/models/storename/type will be registered as storename/type to avoid overwriting shell/models/type
+    if (nparts.length === 2 && type !== 'models') {
       if (nparts[1] !== 'index') {
         return;
       }

package/core/plugins-loader.js

@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import $ from 'jquery';
 import JSZip from 'jszip';
 import jsyaml from 'js-yaml';
 
@@ -25,6 +26,7 @@ export default function({
     window.Vue = Vue;
 
     // Global libraries - allows us to externalise these to reduce package bundle size
+    window.$ = $;
     window.__jszip = JSZip;
     window.__jsyaml = jsyaml;
   }

package/core/plugins.js

@@ -2,6 +2,7 @@ import { productsLoaded } from '@shell/store/type-map';
 import { clearModelCache } from '@shell/plugins/dashboard-store/model-loader';
 import { Plugin } from './plugin';
 import { PluginRoutes } from './plugin-routes';
+import { UI_PLUGIN_BASE_URL } from '@shell/config/uiplugins';
 
 const MODEL_TYPE = 'models';
 
@@ -12,10 +13,12 @@ export default function({
   redirect
 }, inject) {
   const dynamic = {};
+  const validators = {};
   let _lastLoaded = 0;
 
   // Track which plugin loaded what, so we can unload stuff
   const plugins = {};
+
   const pluginRoutes = new PluginRoutes(app.router);
 
   inject('plugin', {
@@ -33,6 +36,17 @@ export default function({
       return internal;
     },
 
+    // Load a plugin from a UI package
+    loadAsyncByNameAndVersion(name, version, url) {
+      const id = `${ name }-${ version }`;
+
+      if (!url) {
+        url = `${ UI_PLUGIN_BASE_URL }/${ name }/${ version }/plugin/${ id }.umd.min.js`;
+      }
+
+      return this.loadAsync(id, url);
+    },
+
     // Load a plugin from a UI package
     loadAsync(id, mainFile) {
       return new Promise((resolve, reject) => {
@@ -43,44 +57,69 @@ export default function({
         element.type = 'text/javascript';
         element.async = true;
 
-        element.onload = () => {
-          element.parentElement.removeChild(element);
+        // id is `<product>-<version>`.
+        const oldPlugin = Object.values(plugins).find(p => id.startsWith(p.name));
 
-          if (!window[id]) {
-            return reject(new Error('Could not load plugin code'));
-          }
+        let removed = Promise.resolve();
+
+        if (oldPlugin) {
+          // Uninstall existing plugin if there is one. This ensures that last loaded plugin is not always used
+          // (nav harv1-->harv2-->harv1 and harv2 would be shown)
+          removed = this.removePlugin(oldPlugin.name).then(() => {
+            delete window[oldPlugin.id];
 
-          // Update the timestamp that new plugins were loaded - may be needed
-          // to update caches when new plugins are loaded
-          _lastLoaded = new Date().getTime();
+            delete plugins[oldPlugin.id];
+          });
+        }
+
+        removed.then(() => {
+          element.onload = () => {
+            element.parentElement.removeChild(element);
+
+            if (!window[id]) {
+              return reject(new Error('Could not load plugin code'));
+            }
 
-          // TODO: Error if we are loading a plugin already loaded?
-          // name is the name of the plugin, including the version number
-          const plugin = new Plugin(id);
+            // Update the timestamp that new plugins were loaded - may be needed
+            // to update caches when new plugins are loaded
+            _lastLoaded = new Date().getTime();
 
-          plugins[id] = plugin;
+            // name is the name of the plugin, including the version number
+            const plugin = new Plugin(id);
 
-          // Initialize the plugin
-          window[id].default(plugin, this.internal());
+            plugins[id] = plugin;
 
-          // Uninstall existing plugin if there is one
-          this.removePlugin(plugin.name);
+            // Initialize the plugin
+            window[id].default(plugin, this.internal());
 
-          // Load all of the types etc from the plugin
-          this.applyPlugin(plugin);
+            // Uninstall existing plugin if there is one
+            this.removePlugin(plugin.name); // Removing this causes the plugin to not load on refresh
 
-          // Add the plugin to the store
-          store.dispatch('uiplugins/addPlugin', plugin);
+            // Load all of the types etc from the plugin
+            this.applyPlugin(plugin);
 
-          resolve();
-        };
+            // Add the plugin to the store
+            store.dispatch('uiplugins/addPlugin', plugin);
 
-        element.onerror = (e) => {
-          element.parentElement.removeChild(element);
-          reject(e);
-        };
+            resolve();
+          };
 
-        document.head.appendChild(element);
+          element.onerror = (e) => {
+            element.parentElement.removeChild(element);
+            // Massage the error into something useful
+            const errorMessage = `Failed to load script from '${ e.target.src }'`;
+
+            console.error(errorMessage, e); // eslint-disable-line no-console
+            reject(new Error(errorMessage)); // This is more useful where it's used
+          };
+
+          document.head.appendChild(element);
+        }).catch((e) => {
+          const errorMessage = `Failed to unload old plugin${ oldPlugin?.id }`;
+
+          console.error(errorMessage, e); // eslint-disable-line no-console
+          reject(new Error(errorMessage)); // This is more useful where it's used
+        });
       });
     },
 
@@ -114,15 +153,17 @@ export default function({
     },
 
     // Remove the plugin
-    removePlugin(name) {
+    async removePlugin(name) {
       const plugin = Object.values(plugins).find(p => p.name === name);
 
       if (!plugin) {
         return;
       }
 
+      const promises = [];
+
       plugin.productNames.forEach((product) => {
-        store.dispatch('type-map/removeProduct', { product, plugin });
+        promises.push(store.dispatch('type-map/removeProduct', { product, plugin }));
       });
 
       // Remove all of the types
@@ -138,13 +179,13 @@ export default function({
 
       // Remove locales
       plugin.locales.forEach((localeObj) => {
-        store.dispatch('i18n/removeLocale', localeObj);
+        promises.push(store.dispatch('i18n/removeLocale', localeObj));
       });
 
       if (plugin.types.models) {
         // Ask the Steve stores to forget any data it has for models that we are removing
-        this.removeTypeFromStore(store, 'rancher', Object.keys(plugin.types.models));
-        this.removeTypeFromStore(store, 'management', Object.keys(plugin.types.models));
+        promises.push(...this.removeTypeFromStore(store, 'rancher', Object.keys(plugin.types.models)));
+        promises.push(...this.removeTypeFromStore(store, 'management', Object.keys(plugin.types.models)));
       }
 
       // Uninstall routes
@@ -154,19 +195,24 @@ export default function({
       plugin.uninstallHooks.forEach(fn => fn(plugin, this.internal()));
 
       // Remove the plugin itself
-      store.dispatch('uiplugins/removePlugin', name);
+      promises.push( store.dispatch('uiplugins/removePlugin', name));
 
       // Unregister vuex stores
       plugin.stores.forEach(pStore => pStore.unregister(store));
 
+      // Remove validators
+      Object.keys(plugin.validators).forEach((key) => {
+        delete validators[key];
+      });
+
+      await Promise.all(promises);
+
       // Update last load since we removed a plugin
       _lastLoaded = new Date().getTime();
     },
 
     removeTypeFromStore(store, storeName, types) {
-      (types || []).forEach((type) => {
-        store.commit(`${ storeName }/forgetType`, type);
-      });
+      return (types || []).map(type => store.commit(`${ storeName }/forgetType`, type));
     },
 
     // Apply the plugin based on its metadata
@@ -200,6 +246,11 @@ export default function({
 
       // Routes
       pluginRoutes.addRoutes(plugin, plugin.routes);
+
+      // Validators
+      Object.keys(plugin.validators).forEach((key) => {
+        validators[key] = plugin.validators[key];
+      });
     },
 
     /**
@@ -252,6 +303,10 @@ export default function({
       return dynamic[typeName]?.[name];
     },
 
+    getValidator(name) {
+      return validators[name];
+    },
+
     // Timestamp that a UI package was last loaded
     // Typically used to invalidate caches (e.g. i18n) when new plugins are loaded
     get lastLoad() {

package/core/types.ts

@@ -18,6 +18,7 @@ export interface PackageMetadata {
 export type VuexStoreObject = { [key: string]: any }
 export type CoreStoreSpecifics = { state: () => VuexStoreObject, getters: VuexStoreObject, mutations: VuexStoreObject, actions: VuexStoreObject }
 export type CoreStoreConfig = { namespace: string, baseUrl?: string, modelBaseClass?: string, supportsStream?: boolean, isClusterStore?: boolean }
+export type CoreStoreInit = (store: any, ctx: any) => void;
 export type RegisterStore = () => (store: any) => void
 export type UnregisterStore = (store: any) => void
 
@@ -56,6 +57,11 @@ export interface IPlugin {
    */
   metadata: PackageMetadata;
 
+  /**
+   * Validators used in the same manner as shell/utils/custom-validators
+   */
+  validators: {[key: string]: Function};
+
   /**
    * Add a module contains localisations for a specific locale
    */
@@ -91,7 +97,7 @@ export interface IPlugin {
    * actions, will eventually call a `request` action which will make the raw http request. This is a pkg specific feature so needs the
    * `request` action needs to be supplied in the `storeSpecifics`
    */
-  addDashboardStore(storeName: string, storeSpecifics: CoreStoreSpecifics, config: CoreStoreConfig): void;
+  addDashboardStore(storeName: string, storeSpecifics: CoreStoreSpecifics, config: CoreStoreConfig, init?: CoreStoreInit): void;
 
   /**
    * Add hooks that will execute when a user navigates

package/detail/provisioning.cattle.io.cluster.vue

@@ -93,7 +93,7 @@ export default {
       fetchOne.snapshots = this.$store.dispatch('management/findAll', { type: SNAPSHOT });
     }
 
-    if ( this.value.isImported || this.value.isCustom || this.value.isAKS || this.value.isEKS ) {
+    if ( this.value.isImported || this.value.isCustom || this.value.isHostedKubernetesProvider ) {
       fetchOne.clusterToken = this.value.getOrCreateToken();
     }
 
@@ -321,6 +321,18 @@ export default {
       return false;
     },
 
+    showEksNodeGroupWarning() {
+      if ( this.value.provisioner === 'EKS' ) {
+        const desiredTotal = this.value.eksNodeGroups.filter(g => g.desiredSize === 0);
+
+        if ( desiredTotal.length === this.value.eksNodeGroups.length ) {
+          return true;
+        }
+      }
+
+      return false;
+    },
+
     machineHeaders() {
       return [
         STATE,
@@ -439,7 +451,7 @@ export default {
         return true;
       }
 
-      if ( ( this.value.isAKS || this.value.isEKS ) && !this.isClusterReady ) {
+      if ( this.value.isHostedKubernetesProvider && !this.isClusterReady ) {
         return true;
       }
 
@@ -585,6 +597,7 @@ export default {
   <Loading v-if="$fetchState.pending" />
   <div v-else>
     <Banner v-if="showWindowsWarning" color="error" :label="t('cluster.banner.os', { newOS: 'Windows', existingOS: 'Linux' })" />
+    <Banner v-if="showEksNodeGroupWarning" color="error" :label="t('cluster.banner.desiredNodeGroupWarning')" />
 
     <Banner v-if="$fetchState.error" color="error" :label="$fetchState.error" />
     <ResourceTabs v-model="value" :default-tab="defaultTab">

package/detail/workload/index.vue

@@ -120,6 +120,10 @@ export default {
       return this.value.type === WORKLOAD_TYPES.CRON_JOB;
     },
 
+    isPod() {
+      return this.value.type === POD;
+    },
+
     podSchema() {
       return this.$store.getters['cluster/schemaFor'](POD);
     },
@@ -133,13 +137,15 @@ export default {
     },
 
     podTemplateSpec() {
-      const isCronJob = this.value.type === WORKLOAD_TYPES.CRON_JOB;
-
-      if ( isCronJob ) {
+      if ( this.value.type === WORKLOAD_TYPES.CRON_JOB ) {
         return this.value.spec.jobTemplate.spec.template.spec;
-      } else {
-        return this.value.spec?.template?.spec;
       }
+
+      if ( this.value.type === POD ) {
+        return this.value;
+      }
+
+      return this.value.spec?.template?.spec;
     },
 
     container() {