@rancher/shell 0.3.15 → 0.3.17

package/core/plugin-helpers.js

@@ -3,6 +3,7 @@ import { isMac } from '@shell/utils/platform';
 import { ucFirst, randomStr } from '@shell/utils/string';
 import { _EDIT, _CONFIG, _DETAIL, _LIST } from '@shell/config/query-params';
 import { getProductFromRoute } from '@shell/middleware/authenticated';
+import { isEqual } from '@shell/utils/object';
 
 function checkRouteProduct({ name, params, query }, locationConfigParam) {
   const product = getProductFromRoute({
@@ -34,7 +35,7 @@ function checkRouteMode({ name, query }, locationConfigParam) {
   return false;
 }
 
-function checkExtensionRouteBinding($route, locationConfig) {
+function checkExtensionRouteBinding($route, locationConfig, context) {
   // if no configuration is passed, consider it as global
   if (!Object.keys(locationConfig).length) {
     return true;
@@ -43,23 +44,30 @@ function checkExtensionRouteBinding($route, locationConfig) {
   const { params } = $route;
 
   // "params" to be checked based on the locationConfig
+  // This has become overloaded with mode and context
   const paramsToCheck = [
     'product',
     'resource',
     'namespace',
     'cluster',
     'id',
-    'mode'
+    'mode',
+    // url query params
+    'queryParam',
+    // Custom context specific params provided by the extension, not to be confused with location params
+    'context',
   ];
 
-  let res = false;
+  let res = true;
 
   for (let i = 0; i < paramsToCheck.length; i++) {
     const param = paramsToCheck[i];
 
     if (locationConfig[param]) {
-      for (let x = 0; x < locationConfig[param].length; x++) {
-        const locationConfigParam = locationConfig[param][x];
+      const asArray = Array.isArray(locationConfig[param]) ? locationConfig[param] : [locationConfig[param]];
+
+      for (let x = 0; x < asArray.length; x++) {
+        const locationConfigParam = asArray[x];
 
         if (locationConfigParam) {
           // handle "product" in a separate way...
@@ -68,6 +76,11 @@ function checkExtensionRouteBinding($route, locationConfig) {
           // also handle "mode" in a separate way because it mainly depends on query params
           } else if (param === 'mode') {
             res = checkRouteMode($route, locationConfigParam);
+          } else if (param === 'context') {
+            // Need all keys and values to match
+            res = isEqual(locationConfigParam, context);
+          } else if (param === 'queryParam') {
+            res = isEqual(locationConfigParam, $route.query);
           } else if (locationConfigParam === params[param]) {
             res = true;
           } else {
@@ -91,7 +104,7 @@ function checkExtensionRouteBinding($route, locationConfig) {
   return res;
 }
 
-export function getApplicableExtensionEnhancements(pluginCtx, actionType, uiArea, currRoute, translationCtx = pluginCtx) {
+export function getApplicableExtensionEnhancements(pluginCtx, actionType, uiArea, currRoute, translationCtx = pluginCtx, context) {
   const extensionEnhancements = [];
 
   // gate it so that we prevent errors on older versions of dashboard
@@ -99,7 +112,7 @@ export function getApplicableExtensionEnhancements(pluginCtx, actionType, uiArea
     const actions = pluginCtx.$plugin.getUIConfig(actionType, uiArea);
 
     actions.forEach((action, i) => {
-      if (checkExtensionRouteBinding(currRoute, action.locationConfig)) {
+      if (checkExtensionRouteBinding(currRoute, action.locationConfig, context || {})) {
         // ADD CARD PLUGIN UI ENHANCEMENT
         if (actionType === ExtensionPoint.CARD) {
           // intercept to apply translation
@@ -116,11 +129,6 @@ export function getApplicableExtensionEnhancements(pluginCtx, actionType, uiArea
               actions[i].label = translationCtx.t(action.labelKey);
             }
 
-            // sets the enabled flag to true if omitted on the config
-            if (!Object.keys(action).includes('enabled')) {
-              actions[i].enabled = true;
-            }
-
             // bulkable flag
             actions[i].bulkable = actions[i].multiple || actions[i].bulkable;
 

package/core/plugin.ts

@@ -15,6 +15,7 @@ import {
   PluginRouteConfig, RegisterStore, UnregisterStore, CoreStoreSpecifics, CoreStoreConfig, OnNavToPackage, OnNavAwayFromPackage, OnLogOut
 } from './types';
 import coreStore, { coreStoreModule, coreStoreState } from '@shell/plugins/dashboard-store';
+import { registerLayout } from '@shell/initialize/layouts';
 
 export type ProductFunction = (plugin: IPlugin, store: any) => void;
 
@@ -267,6 +268,14 @@ export class Plugin implements IPlugin {
       }
 
       this.l10n[name].push(fn);
+    } else if (type === 'layouts') {
+      fn().then((component: any) => {
+        if (component.default) {
+          registerLayout(name, component.default);
+        } else {
+          console.error(`Failed to load layout ${ name } because the file didn't export a default component.`); // eslint-disable-line no-console
+        }
+      });
     } else {
       if (!this.types[type]) {
         this.types[type] = {};

package/core/plugins.js

@@ -182,7 +182,7 @@ export default function({
           console.error('Error removing plugin', e); // eslint-disable-line no-console
         }
 
-        delete plugins[plugin.name];
+        delete plugins[plugin.id];
       }
     },
 

package/core/types-provisioning.ts

@@ -0,0 +1,253 @@
+/**
+ * A function to run as part of the save cluster process
+ */
+export type ClusterSaveHook = (cluster: any) => Promise<any>
+
+/**
+ * Register a function to run as part of the save cluster process
+ *
+ * @param hook function to run
+ * @param name unique identifier
+ * @param priority higher numbers are lower priority
+ * @param fnContext the `this` context from inside the function. If left blank will be a Vue component (where this.value will be the cluster)
+ */
+export type RegisterClusterSaveHook = (hook: ClusterSaveHook, name: string, priority?: number, fnContext?: any) => void;
+
+/**
+ * Params used when constructing an instance of the cluster provisioner
+ */
+export interface ClusterProvisionerContext {
+  /**
+   * 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,
+  /**
+   * Are we in the context of creating a cluster
+   */
+  isCreate: boolean
+  /**
+   * Are we in the context of editing an existing cluster
+   */
+  isEdit: boolean
+  /**
+   * Are we viewing an existing cluster
+   */
+  isView: boolean
+}
+
+/**
+ * Interface that a custom Cluster Provisioner should implement
+ *
+ * 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
+   */
+  id: string;
+
+  /**
+   * Should the UI show a namespace selector when using this provisioner
+   */
+  namespaced?: boolean;
+
+  /* --------------------------------------------------------------------------------------
+   * Define how the cluster provider is presented in a card to the user
+   * --------------------------------------------------------------------------------------- */
+
+  /**
+   * If missing the `cluster.provider.<provider id>` translation will be used
+   *
+   * It is recommended to not hardcode anything that might be localised
+   */
+  label?: string;
+
+  /**
+   * The description will be shown when the user is selecting the type of cluster provider
+   *
+   * This isn't normally used.
+   */
+  description?: string;
+
+  /**
+   * Icon shown when the user is selecting the type of cluster provider
+   */
+  icon?: any;
+
+  /**
+   * Cluster providers are in groups
+   *
+   * `rke2` - default
+   * `kontainer`
+   * `custom2`
+   */
+  group?: string;
+
+  /**
+   * Disable the cluster provider card
+   */
+  disabled?: boolean;
+
+  /**
+   * Custom Dashboard route to navigate to when the cluster provider card is clicked
+   */
+  link?: string;
+
+  /**
+   * Text to show top right on the cluster provider card. For example `Experimental`
+   */
+  tag?: string;
+
+  /* --------------------------------------------------------------------------------------
+   * Custer Details View
+   * --------------------------------------------------------------------------------------- */
+
+  /**
+   * Existing tabs to show or hide in the cluster's detail view
+   *
+   * `plugin.addTab(TabLocation.RESOURCE_DETAIL... ` can be used to add additional tabs to the same view
+   */
+  detailTabs: {
+    /**
+     * 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
+  };
+
+  /* --------------------------------------------------------------------------------------
+   * Getters / Functions for Managing Machine Configs
+  * --------------------------------------------------------------------------------------- */
+
+  /**
+   * Schema for machine config object. For example rke-machine-config.cattle.io.digitaloceanconfig
+   *
+   * The `id` should be in the format of `rke-machine-config.cattle.io.${ provider id }config`
+   *
+   * The `attributes: { kind: <value> }` should match the last part of the id
+   * The `attributes: { group: <value> }` should match the remaining parts of the id
+   */
+  machineConfigSchema?: { [key: string]: any };
+
+  /**
+   * Override the default method to create a machine config object that will be inserted into a new machine pool
+   *
+   * The machine config will be an instance related to the machine config schema
+   *
+   * This is usually used when the user has selected to add a machine pool when creating/editing the cluster.
+   *
+   * > If the user updates the cluster's namespace after pools have been created.... the machine config's will need updating later on
+   *
+   * @param idx Index of new pool
+   * @param pools Existing machine pools
+   * @param cluster The cluster (`provisioning.cattle.io.cluster`)
+   * @returns Instance of a machine config
+   */
+  createMachinePoolMachineConfig?(idx: number, pools: any[], cluster: any): Promise<{[key: string]: any}>;
+
+  /**
+   * Override the default process to save the machine config's associated with the machine pools
+   *
+   * If machine config's will be the pool's `config` property.
+   *
+   * The pool will have `create: true` if the pool is new or `update: true` if the pool already exists
+   *
+   * For information on proxying HTTP requests from the browser via Rancher https://rancher.github.io/dashboard/code-base-works/machine-drivers#api-calls
+   * These docs also cover how to reference a Cloud Credential and use it's properties in the proxy's request `Authorization` header
+   *
+   * @param pools Machine pools
+   * @param cluster The cluster (`provisioning.cattle.io.cluster`)
+   * @returns Content of async result / promise N/A, only the success / fail state
+   */
+  saveMachinePoolConfigs?(pools: any[], cluster: any): Promise<any>
+
+  /* --------------------------------------------------------------------------------------
+   * Optionally override parts of the cluster save process with
+   * - hooks that run before or after the cluster resource is saved
+   * - the actual save of the cluster resource
+  * --------------------------------------------------------------------------------------- */
+
+  /**
+   * Update the cluster before and or after the cluster is saved
+   *
+   * @param registerBeforeHook
+   *  Call `registerBeforeHook` with a function. The function will be executed before the cluster is saved.
+   *  This allows the model used in the API request to be updated before being sent
+   * @param registerAfterHook
+   *  Call `registerAfterHook` with a function. The function will be executed after the cluster has been saved.
+   *  This allows the model received in response to the API request to be updated
+   * @param cluster The cluster (`provisioning.cattle.io.cluster`)
+   */
+  registerSaveHooks?(registerBeforeHook: RegisterClusterSaveHook, registerAfterHook: RegisterClusterSaveHook, cluster: any): void;
+
+  /**
+   * Optionally override the save of the cluster resource itself.
+   *
+   * https://github.com/rancher/dashboard/blob/master/shell/mixins/create-edit-view/impl.js#L179
+   *
+   * This means a lot of the generic handling of cluster provisioning is not skipped (as per the `provision` method)
+   *
+   * @param cluster The cluster (`provisioning.cattle.io.cluster`)
+   * @returns Rejected promise / exception from `await` if failed to save
+   */
+  saveCluster?(cluster: any): Promise<any>
+
+  /* --------------------------------------------------------------------------------------
+   * Optionally override all of cluster save process
+   * --------------------------------------------------------------------------------------- */
+
+  /**
+   * Optionally override all of the ui's save cluster process (including hooks and saving the resource)
+   *
+   * https://github.com/rancher/dashboard/blob/master/shell/edit/provisioning.cattle.io.cluster/rke2.vue#L1420
+   *
+   * For information on proxying HTTP requests from the browser via Rancher https://rancher.github.io/dashboard/code-base-works/machine-drivers#api-calls
+   * These docs also cover how to reference a Cloud Credential and use it's properties in the proxy's request `Authorization` header
+   *
+   * @param pools Machine pools
+   * @param cluster The cluster (`provisioning.cattle.io.cluster`)
+   * @param isCreate True if the cluster is being created, false if an existing cluster being edited
+   * @returns Array of errors. If there are no errors the array will be empty
+   */
+  provision?(cluster: any, pools: any[]): Promise<any[]>;
+}

package/core/types.ts

@@ -1,6 +1,9 @@
 import { ProductFunction } from './plugin';
 import { RouteConfig, Location } from 'vue-router';
 
+// Cluster Provisioning types
+export * from './types-provisioning';
+
 // package.json metadata
 export interface PackageMetadata {
   name: string;
@@ -62,6 +65,7 @@ export enum PanelLocation {
 /** Enum regarding tab locations that are extensionable in the UI */
 export enum TabLocation {
   RESOURCE_DETAIL = 'tab', // eslint-disable-line no-unused-vars
+  CLUSTER_CREATE_RKE2 = 'cluster-create-rke2', // eslint-disable-line no-unused-vars
 }
 
 /** Enum regarding card locations that are extensionable in the UI */
@@ -97,7 +101,7 @@ export type Action = {
   svg?: Function;
   icon?: string;
   multiple?: boolean;
-  enabled?: (ctx: any) => boolean;
+  enabled?: Function | boolean;
   invoke: (opts: ActionOpts, resources: any[]) => void | boolean | Promise<boolean>;
 };
 
@@ -134,7 +138,17 @@ export type LocationConfig = {
   namespace?: string[],
   cluster?: string[],
   id?: string[],
-  mode?: string[]
+  mode?: string[],
+  /**
+   * Query Params from URL
+   */
+  queryParam?: { [key: string]: string},
+  /**
+   * Context specific params.
+   *
+   * Components can provide additional context specific params that this value must match
+   */
+  context?: { [key: string]: string},
 };
 
 export interface ProductOptions {
@@ -516,7 +530,7 @@ export interface IPlugin {
    * @param {String} name unique name of 'something'
    * @param {Function} fn function that dynamically loads the module for the thing being registered
    */
-  register(type: string, name: string, fn: Function): void;
+  register(type: string, name: string, fn: Function | Boolean): void;
 
   /**
    * Will return all of the configuration functions used for creating a new product.

package/detail/autoscaling.horizontalpodautoscaler/index.vue

@@ -94,7 +94,7 @@ export default {
       name="metrics"
       :label="t('hpa.tabs.metrics')"
       class="bordered-table hpa-metrics-table"
-      :weight="3"
+      :weight="4"
     >
       <div
         v-for="(metric, index) in mappedMetrics"
@@ -185,6 +185,55 @@ export default {
         </InfoBox>
       </div>
     </Tab>
+    <Tab
+      v-if="!!value.spec.behavior"
+      name="behavior"
+      :label="t('hpa.tabs.behavior')"
+      class="bordered-table hpa-behavior-table"
+      :weight="3"
+    >
+      <div
+        v-for="(type, i) in ['scaleDown', 'scaleUp']"
+        :key="`${i}`"
+      >
+        <InfoBox v-if="!!value.spec.behavior[type]">
+          <div class="row info-row">
+            <div class="col span-6 info-column">
+              <h4>
+                <t
+                  :k="`hpa.${type}Rules.label`"
+                />
+              </h4>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col span-6 info-column">
+              <label class="text-label"><t k="hpa.scalingRule.policyHeader" /></label>
+              <ul
+                v-for="(current, currentIndex) in value.spec.behavior[type].policies"
+                :key="`${currentIndex}`"
+              >
+                <li>
+                  <span>{{ current.value }}</span>
+                  <span>{{ current.type }}</span>
+                  <span>(for {{ current.periodSeconds }}s)</span>
+                </li>
+              </ul>
+            </div>
+            <div class="col span-6">
+              <div class="mb-5">
+                <label class="text-label"><t k="hpa.scalingRule.selectPolicy" />: </label>
+                <span>{{ value.spec.behavior[type].selectPolicy }}</span>
+              </div>
+              <div class="mb-5">
+                <label class="text-label"><t k="hpa.scalingRule.stabilizationWindowSeconds" />: </label>
+                <span>{{ value.spec.behavior[type].stabilizationWindowSeconds }}s</span>
+              </div>
+            </div>
+          </div>
+        </InfoBox>
+      </div>
+    </Tab>
   </ResourceTabs>
 </template>
 

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

@@ -19,10 +19,17 @@ export default {
     </div>
     <div
       v-if="value.isGit"
-      class="span-6"
+      class="span-3"
     >
       <h3>{{ t('tableHeaders.branch') }}</h3>
       <span>{{ value.branchDisplay }}</span>
     </div>
+    <div
+      v-if="value.isGit"
+      class="span-3"
+    >
+      <h3>{{ t('tableHeaders.commit') }}</h3>
+      <span>{{ value.status.commit }}</span>
+    </div>
   </div>
 </template>

package/detail/node.vue

@@ -1,7 +1,7 @@
 <script>
 import ConsumptionGauge from '@shell/components/ConsumptionGauge';
 import Alert from '@shell/components/Alert';
-import SortableTable from '@shell/components/SortableTable';
+import ResourceTable from '@shell/components/ResourceTable';
 import Tab from '@shell/components/Tabbed/Tab';
 import {
   EFFECT,
@@ -35,7 +35,7 @@ export default {
     Loading,
     ResourceTabs,
     Tab,
-    SortableTable,
+    ResourceTable,
     EmberPage,
   },
 
@@ -252,7 +252,7 @@ export default {
         :label="t('node.detail.tab.pods')"
         :weight="4"
       >
-        <SortableTable
+        <ResourceTable
           key-field="_key"
           :headers="podTableHeaders"
           :rows="value.pods"
@@ -283,7 +283,7 @@ export default {
         class="bordered-table"
         :weight="2"
       >
-        <SortableTable
+        <ResourceTable
           key-field="_key"
           :headers="infoTableHeaders"
           :rows="infoTableRows"
@@ -298,7 +298,7 @@ export default {
         :label="t('node.detail.tab.images')"
         :weight="1"
       >
-        <SortableTable
+        <ResourceTable
           key-field="_key"
           :headers="imageTableHeaders"
           :rows="imageTableRows"
@@ -311,7 +311,7 @@ export default {
         :label="t('node.detail.tab.taints')"
         :weight="0"
       >
-        <SortableTable
+        <ResourceTable
           key-field="_key"
           :headers="taintTableHeaders"
           :rows="taintTableRows"

package/detail/pod.vue

@@ -3,14 +3,13 @@ import CreateEditView from '@shell/mixins/create-edit-view';
 import Tab from '@shell/components/Tabbed/Tab';
 import ResourceTabs from '@shell/components/form/ResourceTabs';
 import SortableTable from '@shell/components/SortableTable';
-import { STATE, SIMPLE_NAME, IMAGE } from '@shell/config/table-headers';
+import { STATE, SIMPLE_NAME, IMAGE_NAME } from '@shell/config/table-headers';
 import { sortableNumericSuffix } from '@shell/utils/sort';
 import { findBy } from '@shell/utils/array';
 import DashboardMetrics from '@shell/components/DashboardMetrics';
 import V1WorkloadMetrics from '@shell/mixins/v1-workload-metrics';
 import { mapGetters } from 'vuex';
 import { allDashboardsExist } from '@shell/utils/grafana';
-import Loading from '@shell/components/Loading';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import day from 'dayjs';
 import { DATE_FORMAT, TIME_FORMAT } from '@shell/store/prefs';
@@ -24,7 +23,6 @@ export default {
 
   components: {
     DashboardMetrics,
-    Loading,
     ResourceTabs,
     Tab,
     SortableTable,
@@ -142,7 +140,7 @@ export default {
           ...SIMPLE_NAME,
           value: 'name'
         },
-        IMAGE,
+        IMAGE_NAME,
         {
           name:          'isInit',
           labelKey:      'workload.container.init',
@@ -224,9 +222,7 @@ export default {
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
   <ResourceTabs
-    v-else
     mode="view"
     class="mt-20"
     :value="value"