@rancher/shell 0.1.1 → 0.1.3

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

@@ -12,10 +12,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', {
@@ -43,44 +45,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];
+
+            delete plugins[oldPlugin.id];
+          });
+        }
+
+        removed.then(() => {
+          element.onload = () => {
+            element.parentElement.removeChild(element);
+
+            if (!window[id]) {
+              return reject(new Error('Could not load plugin code'));
+            }
+
+            // Update the timestamp that new plugins were loaded - may be needed
+            // to update caches when new plugins are loaded
+            _lastLoaded = new Date().getTime();
+
+            // 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;
 
-          // 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);
+            // Initialize the plugin
+            window[id].default(plugin, this.internal());
 
-          plugins[id] = plugin;
+            // Uninstall existing plugin if there is one
+            this.removePlugin(plugin.name); // Removing this causes the plugin to not load on refresh
 
-          // 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);
+            // 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);
+            // Massage the error into something useful
+            const errorMessage = `Failed to load script from '${ e.target.src }'`;
 
-          resolve();
-        };
+            console.error(errorMessage, e); // eslint-disable-line no-console
+            reject(new Error(errorMessage)); // This is more useful where it's used
+          };
 
-        element.onerror = (e) => {
-          element.parentElement.removeChild(element);
-          reject(e);
-        };
+          document.head.appendChild(element);
+        }).catch((e) => {
+          const errorMessage = `Failed to unload old plugin${ oldPlugin?.id }`;
 
-        document.head.appendChild(element);
+          console.error(errorMessage, e); // eslint-disable-line no-console
+          reject(new Error(errorMessage)); // This is more useful where it's used
+        });
       });
     },
 
@@ -114,15 +141,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 +167,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 +183,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 +234,11 @@ export default function({
 
       // Routes
       pluginRoutes.addRoutes(plugin, plugin.routes);
+
+      // Validators
+      Object.keys(plugin.validators).forEach((key) => {
+        validators[key] = plugin.validators[key];
+      });
     },
 
     /**
@@ -252,6 +291,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/creators/app/tsconfig.json

@@ -25,10 +25,15 @@
         "./node_modules/@rancher/shell/*"
       ]
     },
+    "typeRoots": [
+      "./node_modules",
+      "./node_modules/@rancher/shell/types"
+    ],    
     "types": [
       "@types/node",
       "@nuxt/types",
-      "cypress"
+      "cypress",
+      "rancher"
     ]
   },
   "exclude": [

package/creators/pkg/init

@@ -137,6 +137,9 @@ if (!isNodeModulesShell) {
     tsconfig.compilerOptions.paths[p] = updateArray(tsconfig.compilerOptions.paths[p]);
   });
 
+  // Update typeRoots
+  tsconfig.compilerOptions.typeRoots = updateArray(tsconfig.compilerOptions.typeRoots);
+
   fs.writeFileSync(path.join(pkgFolder, 'tsconfig.json'), JSON.stringify(tsconfig, null, 2));
   console.log('  Updated tsconfig.json for shell folder location');
 }

package/creators/pkg/tsconfig.json

@@ -13,9 +13,15 @@
     "sourceMap": true,
     "baseUrl": ".",
     "preserveSymlinks": true,
+    "typeRoots": [
+      "../../node_modules",
+      "../../node_modules/@rancher/shell/types"
+    ],
     "types": [
       "node",
-      "webpack-env"
+      "webpack-env",
+      "@nuxt/types",
+      "rancher"
     ],
     "lib": [
       "esnext",
@@ -39,7 +45,6 @@
     "**/*.ts",
     "**/*.tsx",
     "**/*.vue",
-    "../../node_modules/@rancher/shell/types/*.d.ts",
     "../../node_modules/@rancher/shell/core/types.ts"
   ],
   "exclude": [

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

@@ -146,6 +146,16 @@ export default {
     this.allNodePools = fetchTwoRes.allNodePools || [];
     this.haveNodePools = !!fetchTwoRes.allNodePools;
     this.machineTemplates = fetchTwoRes.mdtt || [];
+
+    // Fetch RKE template revisions so we can show when an updated template is available
+    // This request does not need to be blocking
+    if ( this.$store.getters['management/canList'](MANAGEMENT.RKE_TEMPLATE) ) {
+      this.$store.dispatch('management/findAll', { type: MANAGEMENT.RKE_TEMPLATE });
+    }
+
+    if ( this.$store.getters['management/canList'](MANAGEMENT.RKE_TEMPLATE_REVISION) ) {
+      this.$store.dispatch('management/findAll', { type: MANAGEMENT.RKE_TEMPLATE_REVISION });
+    }
   },
 
   created() {
@@ -311,6 +321,18 @@ export default {
       return false;
     },
 
+    showEksNodeGroupWarning() {
+      if ( this.value.isEKS ) {
+        const desiredTotal = this.value.eksNodeGroups.filter(g => g.desiredSize === 0);
+
+        if ( desiredTotal.length === this.value.eksNodeGroups.length ) {
+          return true;
+        }
+      }
+
+      return false;
+    },
+
     machineHeaders() {
       return [
         STATE,
@@ -575,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 === WORKLOAD_TYPES.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 === WORKLOAD_TYPES.POD ) {
+        return this.value;
+      }
+
+      return this.value.spec?.template?.spec;
     },
 
     container() {

package/edit/auth/azuread.vue

@@ -67,6 +67,10 @@ export default {
 
   async fetch() {
     await this.reloadModel();
+
+    if ( this.value?.graphEndpoint ) {
+      this.setInitialEndpoint(this.value.graphEndpoint);
+    }
   },
 
   data() {
@@ -171,6 +175,16 @@ export default {
       }
     },
 
+    setInitialEndpoint(endpoint) {
+      const endpointKey = Object.keys(ENDPOINT_MAPPING).find(key => ENDPOINT_MAPPING[key].graphEndpoint === endpoint);
+
+      if ( endpointKey ) {
+        this.endpoint = endpointKey;
+      } else {
+        this.endpoint = 'custom';
+      }
+    },
+
     getNewApplicationSecret() {
       const applicationSecretOrId =
         this.model.applicationSecret || this.applicationSecret;
@@ -291,7 +305,7 @@ export default {
         <InfoBox v-if="!model.enabled" id="reply-info" class="mt-20 mb-20 p-10">
           {{ t('authConfig.azuread.reply.info') }}
           <br />
-          <label>{{ t('authConfig.azuread.reply.label') }} </label>
+          <label class="reply-url">{{ t('authConfig.azuread.reply.label') }} </label>
           <CopyToClipboardText :plain="true" :text="replyUrl" />
         </InfoBox>
 
@@ -387,4 +401,9 @@ export default {
 #reply-info {
   flex-grow: 0;
 }
+
+.reply-url {
+  color: inherit;
+  font-weight: 700;
+}
 </style>

package/edit/cloudcredential.vue

@@ -260,7 +260,13 @@ export default {
       @select-type="selectType"
       @error="e=>errors = e"
     >
-      <NameNsDescription v-model="value" name-key="_name" :mode="mode" :namespaced="false" />
+      <NameNsDescription
+        v-model="value"
+        name-key="_name"
+        description-key="description"
+        :mode="mode"
+        :namespaced="false"
+      />
       <keep-alive>
         <component
           :is="cloudComponent"

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

@@ -16,7 +16,7 @@ import { NAME } from '@shell/config/product/explorer';
 import { PROJECT_ID, _VIEW, _CREATE, _EDIT } from '@shell/config/query-params';
 import ProjectMembershipEditor from '@shell/components/form/Members/ProjectMembershipEditor';
 import { canViewProjectMembershipEditor } from '@shell/components/form/Members/ProjectMembershipEditor.vue';
-import { NAME as HARVESTER } from '@shell/config/product/harvester';
+import { HARVESTER_NAME as HARVESTER } from '@shell/config/product/harvester-manager';
 import { Banner } from '@components/Banner';
 
 export default {
@@ -188,7 +188,7 @@ export default {
 <template>
   <CruResource
     class="project"
-    :done-route="'c-cluster-product-projectsnamespaces'"
+    :done-route="value.listLocation"
     :errors="fvUnreportedValidationErrors"
     :mode="mode"
     :resource="value"