@rancher/shell 3.0.2-rc.2 → 3.0.2-rc.3

package/core/plugins.js

@@ -1,11 +1,10 @@
 import { productsLoaded } from '@shell/store/type-map';
 import { clearModelCache } from '@shell/plugins/dashboard-store/model-loader';
-import { Plugin } from './plugin';
+import { EXT_IDS, Plugin } from './plugin';
 import { PluginRoutes } from './plugin-routes';
 import { UI_PLUGIN_BASE_URL } from '@shell/config/uiplugins';
 import { ExtensionPoint } from './types';
-
-const MODEL_TYPE = 'models';
+import { addLinkInterceptor, removeLinkInterceptor } from '@shell/plugins/clean-html';
 
 export default function(context, inject, vueApp) {
   const {
@@ -22,10 +21,28 @@ export default function(context, inject, vueApp) {
 
   const uiConfig = {};
 
+  // Builtin extensions - these are registered when the UI loads and then initialized/loaded at the same time as the external extensions
+  let builtin = [];
+
   for (const ep in ExtensionPoint) {
     uiConfig[ExtensionPoint[ep]] = {};
   }
 
+  /**
+   * When an extension adds a model extension, it provides the class - we will instantiate that class and store and use that
+   */
+  function instantiateModelExtension($plugin, clz) {
+    const context = {
+      dispatch: store.dispatch,
+      getters:  store.getters,
+      t:        store.getters['i18n/t'],
+      $axios,
+      $plugin,
+    };
+
+    return new clz(context);
+  }
+
   inject(
     'plugin',
     {
@@ -78,77 +95,79 @@ export default function(context, inject, vueApp) {
           element.id = id;
           element.dataset.purpose = 'extension';
 
-          // id is `<product>-<version>`.
-          const oldPlugin = Object.values(plugins).find((p) => id.startsWith(p.name));
-
-          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];
-
-              const oldElement = document.getElementById(oldPlugin.id);
-
-              oldElement.parentElement.removeChild(oldElement);
-            });
-          }
-
-          removed.then(() => {
-            element.onload = () => {
-              if (!window[id]) {
-                return reject(new Error('Could not load plugin code'));
-              }
+          element.onload = () => {
+            if (!window[id] || (typeof window[id].default !== 'function')) {
+              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();
+            // 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);
+            // name is the name of the plugin, including the version number
+            const plugin = new Plugin(id);
 
-              plugins[id] = plugin;
+            plugins[id] = plugin;
 
-              // Initialize the plugin
+            // Initialize the plugin
+            try {
               window[id].default(plugin, this.internal());
+            } catch (e) {
+              delete plugins[id];
 
-              // Uninstall existing plugin if there is one
-              this.removePlugin(plugin.name); // Removing this causes the plugin to not load on refresh
-
-              // Load all of the types etc from the plugin
-              this.applyPlugin(plugin);
-
-              // Add the plugin to the store
-              store.dispatch('uiplugins/addPlugin', plugin);
+              return reject(new Error('Could not initialize plugin'));
+            }
 
-              resolve();
-            };
+            // Load all of the types etc from the plugin
+            this.applyPlugin(plugin);
 
-            element.onerror = (e) => {
-              element.parentElement.removeChild(element);
+            // Add the plugin to the store
+            store.dispatch('uiplugins/addPlugin', plugin);
 
-              // 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);
 
-            document.head.appendChild(element);
-          }).catch((e) => {
-            const errorMessage = `Failed to unload old plugin${ oldPlugin?.id }`;
+            // 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);
         });
       },
 
-      // Used by the dynamic loader when a plugin is included in the build
-      initPlugin(id, module) {
+      /**
+       * Load the builtin extensions by initializing them in turn
+       */
+      loadBuiltinExtensions() {
+        builtin.forEach((ext) => {
+          this.initBuiltinExtension(ext.id, ext.module);
+        });
+
+        // We've loaded the builtin extensions, so clear out the list so we don't load again
+        builtin = [];
+      },
+
+      /**
+       * Register a builtin extension that should be loaded
+       *
+       * Used by the dynamic loader when a plugin is included in the build (see shell/vue.config.js)
+       */
+      registerBuiltinExtension(id, module) {
+        builtin.push({ id, module });
+      },
+
+      /**
+       * Initialize a builtin extension
+       *
+       * This is only used by the 'loadBuiltinExtensions' function above
+       */
+      initBuiltinExtension(id, module) {
         const plugin = new Plugin(id);
 
         // Mark the plugin as being built-in
@@ -160,19 +179,32 @@ export default function(context, inject, vueApp) {
         const p = module;
 
         try {
-          p.default(plugin, this.internal());
-
-          // Uninstall existing product if there is one
-          this.removePlugin(plugin.name);
-
-          // Load all of the types etc from the plugin
-          this.applyPlugin(plugin);
-
-          // Add the plugin to the store
-          store.dispatch('uiplugins/addPlugin', plugin);
+          const load = p.default(plugin, this.internal());
+
+          // The function must explicitly return false to skip loading of the extension (this is only allows on builtin extensions)
+          // Only built-in extensions can return that they should not be loaded, because the extension can still do 'things'
+          // in its init code (inject code, styles etc), so we do not want to hide an extension that has 'partially' loaded,
+          // just because it tells us it should not load.
+          // Built-in extensions are compiled into the app, so there is a level of trust assumed with them
+          if (load !== false) {
+            // Update last load so that the translations get loaded
+            _lastLoaded = new Date().getTime();
+
+            // Load all of the types etc from the extension
+            this.applyPlugin(plugin);
+
+            // Add the extension to the store
+            store.dispatch('uiplugins/addPlugin', plugin);
+          } else {
+            // Plugin did not load, so remove it so it is not shown as loaded
+            delete plugins[id];
+          }
         } catch (e) {
-          console.error(`Error loading plugin ${ plugin.name }`); // eslint-disable-line no-console
+          console.error(`Error loading extension ${ plugin.name }`); // eslint-disable-line no-console
           console.error(e); // eslint-disable-line no-console
+
+          // Plugin did not load, so remove it so it is not shown as loaded
+          delete plugins[id];
         }
       },
 
@@ -189,7 +221,7 @@ export default function(context, inject, vueApp) {
           try {
             await this.removePlugin(plugin.name);
           } catch (e) {
-            console.error('Error removing plugin', e); // eslint-disable-line no-console
+            console.error('Error removing extension', e); // eslint-disable-line no-console
           }
 
           delete plugins[plugin.id];
@@ -215,7 +247,7 @@ export default function(context, inject, vueApp) {
           Object.keys(plugin.types[typ]).forEach((name) => {
             this.unregister(typ, name);
 
-            if (typ === MODEL_TYPE) {
+            if (typ === EXT_IDS.MODELS) {
               clearModelCache(name);
             }
           });
@@ -246,6 +278,13 @@ export default function(context, inject, vueApp) {
           delete validators[key];
         });
 
+        // Remove link interceptors
+        if (plugin.types.linkInterceptor) {
+          Object.keys(plugin.types.linkInterceptor).forEach((name) => {
+            removeLinkInterceptor(plugin.types.linkInterceptor[name]);
+          });
+        }
+
         await Promise.all(promises);
 
         // Update last load since we removed a plugin
@@ -284,6 +323,13 @@ export default function(context, inject, vueApp) {
           });
         });
 
+        // Model extensions
+        Object.keys(plugin.modelExtensions).forEach((name) => {
+          plugin.modelExtensions[name].forEach((fn) => {
+            this.register(EXT_IDS.MODEL_EXTENSION, name, instantiateModelExtension(this, fn));
+          });
+        });
+
         // Initialize the product if the store is ready
         if (productsLoaded()) {
           this.loadProducts([plugin]);
@@ -304,6 +350,13 @@ export default function(context, inject, vueApp) {
         Object.keys(plugin.validators).forEach((key) => {
           validators[key] = plugin.validators[key];
         });
+
+        // Link Interceptors
+        if (dynamic.linkInterceptor) {
+          Object.keys(dynamic.linkInterceptor).forEach((name) => {
+            addLinkInterceptor(dynamic.linkInterceptor[name], name);
+          });
+        }
       },
 
       /**
@@ -317,8 +370,8 @@ export default function(context, inject, vueApp) {
           dynamic[type] = {};
         }
 
-        // Accumulate l10n resources rather than replace
-        if (type === 'l10n') {
+        // Accumulate l10n resources and model extensions rather than replace
+        if (type === 'l10n' || type === EXT_IDS.MODEL_EXTENSION) {
           if (!dynamic[type][name]) {
             dynamic[type][name] = [];
           }

package/core/types-provisioning.ts

@@ -13,6 +13,37 @@ export type ClusterSaveHook = (cluster: any) => Promise<any>
  */
 export type RegisterClusterSaveHook = (hook: ClusterSaveHook, name: string, priority?: number, fnContext?: any) => void;
 
+export type ClusterDetailTabs = {
+  /**
+   * RKE2 machine pool tabs
+   */
+  machines: boolean,
+  /**
+   * RKE2 provisioning logs
+   */
+  logs: boolean,
+  /**
+   * RKE2 registration commands
+   */
+  registration: boolean,
+  /**
+   * RKE2 snapshots
+   */
+  snapshots: boolean,
+  /**
+   * Kube resources related to the instance of provisioning.cattle.io.cluster
+   */
+  related: boolean,
+  /**
+   * Kube events associated with the instance of provisioning.cattle.io.cluster
+   */
+  events: boolean,
+  /**
+   * Kube conditions of the provisioning.cattle.io.cluster instance
+   */
+  conditions: boolean
+};
+
 /**
  * Params used when constructing an instance of the cluster provisioner
  */
@@ -57,7 +88,6 @@ export interface ClusterProvisionerContext {
  * The majority of these hooks are used in shell/edit/provisioning.cattle.io.cluster/rke2.vue
  */
 export interface IClusterProvisioner {
-
   /**
    * Unique ID of the Cluster Provisioner
    * If this overlaps with the name of an existing provisioner (seen in the type query param while creating a cluster) this provisioner will overwrite the built-in ui
@@ -233,7 +263,7 @@ export interface IClusterProvisioner {
   registerSaveHooks?(registerBeforeHook: RegisterClusterSaveHook, registerAfterHook: RegisterClusterSaveHook, cluster: any): void;
 
   /**
-   * Optionally override the save of the cluster resource itself.
+   * Optionally override the save of the cluster resource itself
    *
    * https://github.com/rancher/dashboard/blob/master/shell/mixins/create-edit-view/impl.js#L179
    *
@@ -263,3 +293,62 @@ export interface IClusterProvisioner {
    */
   provision?(cluster: any, pools: any[]): Promise<any[]>;
 }
+
+/**
+ * Interface that a model extension for the provisioning cluster model should implement
+ */
+export interface IClusterModelExtension {
+  /**
+   * Indicates if this extension should be used for the given cluster
+   *
+   * This allows the extension to determine if it should be used for a cluster based on attributes/metadata of its choosing
+   *
+   * @param cluster The cluster model (`provisioning.cattle.io.cluster`)
+   * @returns Whether to use this provisioner for the given cluster.
+   */
+  useFor(cluster: any): boolean;
+
+  /**
+   * Optionally Process the available actions for a cluster and return a (possibly modified) set of actions
+   *
+   * @param cluster The cluster model (`provisioning.cattle.io.cluster`)
+   * @returns List of actions for the cluster or undefined if the list is modified in-place
+   */
+  availableActions?(cluster: any, actions: any[]): any[] | undefined;
+
+  /**
+   * Get the display name for the machine provider for this model
+   *
+   * @param cluster The cluster model (`provisioning.cattle.io.cluster`)
+   * @returns Machine provider display name
+   */
+  machineProviderDisplay?(cluster: any): string;
+
+  /**
+   * Get the display name for the provisioner for this model
+   *
+   * @param cluster The cluster model (`provisioning.cattle.io.cluster`)
+   * @returns Provisioner display name
+   */
+  provisionerDisplay?(cluster: any): string;
+
+  /**
+   * Get the parent cluster for this cluster, or undefined if no parent cluster
+   *
+   * @param cluster The cluster model (`provisioning.cattle.io.cluster`)
+   * @returns ID of the parent cluster
+   */
+  parentCluster?(cluster: any): string;
+
+  /**
+   * Function to run after the cluster has been deleted
+   *
+   * @param cluster The cluster (`provisioning.cattle.io.cluster`)
+   */
+  postDelete?(cluster: any): void;
+
+  /**
+   * Existing tabs to show or hide in the cluster's detail view
+   */
+  get detailTabs(): ClusterDetailTabs;
+}

package/core/types.ts

@@ -156,6 +156,16 @@ export type LocationConfig = {
   context?: { [key: string]: string},
 };
 
+/**
+ * Environment metadata that extensions can access
+ */
+export type ExtensionEnvironment = {
+  version: string;
+  commit: string;
+  isPrime: boolean;
+  docsVersion: string; /** e.g. 'v2.10' */
+};
+
 export interface ProductOptions {
   /**
    * The category this product belongs under. i.e. 'config'
@@ -478,6 +488,37 @@ export interface DSLReturnType {
   // weightType: (input, weight, forBasic)
 }
 
+/**
+ * Context for the constructor of a model extension
+ */
+export type ModelExtensionContext = {
+  /**
+   * Dispatch vuex actions
+   */
+  dispatch: any,
+  /**
+   * Get from vuex store
+   */
+  getters: any,
+  /**
+   * Used to make http requests
+   */
+  axios: any,
+  /**
+   * Definition of the extension
+   */
+  $plugin: any,
+  /**
+   * Function to retrieve a localised string
+   */
+  t: (key: string) => string,
+};
+
+/**
+ * Constructor signature for a model extension
+ */
+export type ModelExtensionConstructor = (context: ModelExtensionContext) => Object;
+
 /**
  * Interface for a Dashboard plugin
  */
@@ -584,6 +625,15 @@ export interface IPlugin {
     onLogOut?: OnLogOut
   ): void;
 
+  /**
+   * Adds a model extension
+   * @experimental May change or be removed in the future
+   *
+   * @param type Model type
+   * @param clz  Class for the model extension (constructor)
+   */
+  addModelExtension(type: string, clz: ModelExtensionConstructor): void;
+
   /**
    * Register 'something' that can be dynamically loaded - e.g. model, edit, create, list, i18n
    * @param {String} type type of thing to register, e.g. 'edit'
@@ -598,6 +648,11 @@ export interface IPlugin {
    * @param productName The name of the new product. This name is displayed in the navigation.
    */
   DSL(store: any, productName: string): DSLReturnType;
+
+  /**
+   * Get information about the Extension Environment
+   */
+  get environment(): ExtensionEnvironment;
 }
 
 // Internal interface

package/detail/__tests__/autoscaling.horizontalpodautoscaler.test.ts

@@ -7,9 +7,18 @@ describe('view: autoscaling.horizontalpodautoscaler', () => {
       'i18n/t':                  (text: string) => text,
       t:                         (text: string) => text,
       currentStore:              () => 'current_store',
-      'current_store/schemaFor': jest.fn(),
-      'current_store/all':       jest.fn(),
-      workspace:                 jest.fn(),
+      'current_store/schemaFor': () => ({
+        attributes: {
+          columns: [
+            { name: 'Subobject', field: '' },
+            { name: 'Source', field: '' },
+            { name: 'First Seen', field: '' },
+            { name: 'Count', field: '' }]
+        }
+      }),
+      'current_store/all': jest.fn(),
+      workspace:           jest.fn(),
+      'i18n/exists':       jest.fn(),
     },
   };
 

package/detail/catalog.cattle.io.app.vue

@@ -34,7 +34,7 @@ export default {
     const promises = {
       catalog:       this.$store.dispatch('catalog/load'),
       allOperations: this.$store.dispatch('cluster/findAll', { type: CATALOG.OPERATION }),
-      secrets:       this.value.fetchValues(true),
+      secret:        this.value.fetchValues(true),
     };
 
     const res = await allHash(promises);

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

@@ -29,11 +29,11 @@ export default {
   },
 
   async fetch() {
-    const clusterId = this.value?.metadata?.labels[FLEET_LABELS.CLUSTER_NAME];
+    const managementClusterId = this.value?.metadata?.labels[FLEET_LABELS.CLUSTER_NAME];
     const hash = await allHash({
       rancherCluster: this.$store.dispatch('management/find', {
         type: MANAGEMENT.CLUSTER,
-        id:   clusterId
+        id:   managementClusterId
       }),
       repos:             this.$store.dispatch('management/findAll', { type: FLEET.GIT_REPO }),
       workspaces:        this.$store.dispatch('management/findAll', { type: FLEET.WORKSPACE }),
@@ -53,7 +53,7 @@ export default {
       return this.value.bundleDeployments;
     },
     clusterId() {
-      return this.value?.metadata?.labels[FLEET_LABELS.CLUSTER_NAME];
+      return this.value.id;
     },
 
     repos() {

package/detail/namespace.vue

@@ -10,9 +10,7 @@ import Tab from '@shell/components/Tabbed/Tab';
 import ResourceTable from '@shell/components/ResourceTable';
 import SortableTable from '@shell/components/SortableTable';
 import Loading from '@shell/components/Loading';
-import {
-  flatten, compact, filter, findKey, values
-} from 'lodash';
+import { flatten, compact, findKey, values } from 'lodash';
 
 export default {
   emits: ['input'],
@@ -89,6 +87,9 @@ export default {
       },
     ];
 
+    const params = this.$route.params;
+    const { id: namespaceId } = params;
+
     return {
       allWorkloads: {
         default: () => ([]),
@@ -97,7 +98,10 @@ export default {
       resourceTypes:  [],
       summaryStates:  ['success', 'info', 'warning', 'error', 'unknown'],
       headers,
-      workloadSchema: WORKLOAD_SCHEMA
+      workloadSchema: WORKLOAD_SCHEMA,
+      inStore:        this.$store.getters['currentProduct'].inStore,
+      statesByType:   getStatesByType(),
+      namespaceId,
     };
   },
 
@@ -106,10 +110,6 @@ export default {
   },
 
   computed: {
-    inStore() {
-      return this.$store.getters['currentProduct'].inStore;
-    },
-
     namespacedResourceCounts() {
       const allClusterResourceCounts = this.$store.getters[`${ this.inStore }/all`](COUNT)[0].counts;
 
@@ -148,20 +148,11 @@ export default {
       }, totals);
     },
 
-    statesByType() {
-      return getStatesByType();
-    },
-
     /**
      * Workload table data for current namespace
      */
     workloadRows() {
-      const params = this.$route.params;
-      const { id } = params;
-      const rows = flatten(compact(this.allWorkloads)).filter((row) => !row.ownedByWorkload);
-      const namespacedRows = filter(rows, ({ metadata: { namespace } }) => namespace === id);
-
-      return namespacedRows;
+      return flatten(compact(this.allWorkloads)).filter((row) => !row.ownedByWorkload);
     }
   },
 
@@ -198,7 +189,10 @@ export default {
       return Promise.all(values(WORKLOAD_TYPES)
         // You may not have RBAC to see some of the types
         .filter((type) => Boolean(this.schemaFor(type)))
-        .map((type) => this.$store.dispatch('cluster/findAll', { type }))
+        // findAll on each workload type here, argh! however...
+        // - results are shown in a single table containing all workloads rather than an SSP compatible way (one table per type)
+        // - we're restricting by namespace. not great, but a big improvement
+        .map((type) => this.$store.dispatch('cluster/findAll', { type, opt: { namespaced: this.namespaceId } }))
       );
     },