@rancher/shell 0.3.0 → 0.3.2

package/core/plugin.ts

@@ -1,6 +1,16 @@
 import { RouteConfig } from 'vue-router';
 import { DSL as STORE_DSL } from '@shell/store/type-map';
-import { CoreStoreInit, IPlugin } from './types';
+import {
+  CoreStoreInit,
+  Action,
+  Tab,
+  Card,
+  Panel,
+  TableColumn,
+  IPlugin,
+  LocationConfig,
+  ExtensionPoint,
+} from './types';
 import coreStore, { coreStoreModule, coreStoreState } from '@shell/plugins/dashboard-store';
 import {
   PluginRouteConfig, RegisterStore, UnregisterStore, CoreStoreSpecifics, CoreStoreConfig, OnNavToPackage, OnNavAwayFromPackage, OnLogOut
@@ -20,6 +30,8 @@ export class Plugin implements IPlugin {
   public onLeave: OnNavAwayFromPackage = () => Promise.resolve();
   public _onLogOut: OnLogOut = () => Promise.resolve();
 
+  public uiConfig: { [key: string]: any } = {};
+
   // Plugin metadata (plugin package.json)
   public _metadata: any = {};
 
@@ -34,6 +46,11 @@ export class Plugin implements IPlugin {
   constructor(id: string) {
     this.id = id;
     this.name = id;
+
+    // Initialize uiConfig for all of the possible enum values
+    Object.values(ExtensionPoint).forEach((v) => {
+      this.uiConfig[v] = {};
+    });
   }
 
   get metadata() {
@@ -108,6 +125,49 @@ export class Plugin implements IPlugin {
     this.routes.push({ parent, route });
   }
 
+  private _addUIConfig(type: string, where: string, when: LocationConfig | string, config: any) {
+    // For convenience 'when' can be a string to indicate a resource, so convert it to the LocationConfig format
+    const locationConfig = (typeof when === 'string') ? { resource: when } : when;
+
+    this.uiConfig[type][where] = this.uiConfig[type][where] || [];
+    this.uiConfig[type][where].push({ ...config, locationConfig });
+  }
+
+  /**
+   * Adds an action/button to the UI
+   */
+  addAction(where: string, when: LocationConfig | string, action: Action): void {
+    this._addUIConfig(ExtensionPoint.ACTION, where, when, action);
+  }
+
+  /**
+   * Adds a tab to the UI
+   */
+  addTab(where: string, when: LocationConfig | string, tab: Tab): void {
+    this._addUIConfig(ExtensionPoint.TAB, where, when, tab);
+  }
+
+  /**
+   * Adds a panel/component to the UI
+   */
+  addPanel(where: string, when: LocationConfig | string, panel: Panel): void {
+    this._addUIConfig(ExtensionPoint.PANEL, where, when, panel);
+  }
+
+  /**
+   * Adds a card to the to the UI
+   */
+  addCard( where: string, when: LocationConfig | string, card: Card): void {
+    this._addUIConfig(ExtensionPoint.CARD, where, when, card);
+  }
+
+  /**
+   * Adds a new column to a table on the UI
+   */
+  addTableColumn(where: string, when: LocationConfig | string, column: TableColumn): void {
+    this._addUIConfig(ExtensionPoint.TABLE_COL, where, when, column);
+  }
+
   setHomePage(component: any) {
     this.addRoute({
       name: 'home',

package/core/plugins.js

@@ -3,6 +3,7 @@ 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';
+import { ExtensionPoint } from './types';
 
 const MODEL_TYPE = 'models';
 
@@ -21,6 +22,12 @@ export default function({
 
   const pluginRoutes = new PluginRoutes(app.router);
 
+  const uiConfig = {};
+
+  for (const ep in ExtensionPoint) {
+    uiConfig[ExtensionPoint[ep]] = {};
+  }
+
   inject('plugin', {
     // Plugins should not use these - but we will pass them in for now as a 2nd argument
     // in case there are use cases not covered that require direct access - we may remove access later
@@ -251,6 +258,18 @@ export default function({
         });
       });
 
+      // UI Configuration - copy UI config from a plugin into the global uiConfig object
+      Object.keys(plugin.uiConfig).forEach((actionType) => {
+        Object.keys(plugin.uiConfig[actionType]).forEach((actionLocation) => {
+          plugin.uiConfig[actionType][actionLocation].forEach((action) => {
+            if (!uiConfig[actionType][actionLocation]) {
+              uiConfig[actionType][actionLocation] = [];
+            }
+            uiConfig[actionType][actionLocation].push(action);
+          });
+        });
+      });
+
       // l10n
       Object.keys(plugin.l10n).forEach((name) => {
         plugin.l10n[name].forEach((fn) => {
@@ -334,6 +353,20 @@ export default function({
       return validators[name];
     },
 
+    /**
+     * Return the UI configuration for the given type and location
+     */
+    getUIConfig(type, uiArea) {
+      return uiConfig[type][uiArea] || [];
+    },
+
+    /**
+     * Returns all UI Configuration (useful for debugging)
+     */
+    getAllUIConfig() {
+      return uiConfig;
+    },
+
     // 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

@@ -31,10 +31,111 @@ export type OnEnterLeavePackageConfig = {
   isExt: string,
   oldIsExt: string
 }
+
 export type OnNavToPackage = (store: any, config: OnEnterLeavePackageConfig) => Promise<void>;
 export type OnNavAwayFromPackage = (store: any, config: OnEnterLeavePackageConfig) => Promise<void>;
 export type OnLogOut = (store: any) => Promise<void>;
 
+/** Enum regarding the extensionable areas/places of the UI */
+export enum ExtensionPoint {
+  ACTION = 'Action', // eslint-disable-line no-unused-vars
+  TAB = 'Tab', // eslint-disable-line no-unused-vars
+  PANEL = 'Panel', // eslint-disable-line no-unused-vars
+  CARD = 'Card', // eslint-disable-line no-unused-vars
+  TABLE_COL = 'TableColumn', // eslint-disable-line no-unused-vars
+}
+
+/** Enum regarding action locations that are extensionable in the UI */
+export enum ActionLocation {
+  HEADER = 'header-action', // eslint-disable-line no-unused-vars
+  TABLE = 'table-action', // eslint-disable-line no-unused-vars
+}
+
+/** Enum regarding panel locations that are extensionable in the UI */
+export enum PanelLocation {
+  DETAILS_MASTHEAD = 'details-masthead', // eslint-disable-line no-unused-vars
+  DETAIL_TOP = 'detail-top', // eslint-disable-line no-unused-vars
+  RESOURCE_LIST = 'resource-list', // eslint-disable-line no-unused-vars
+}
+
+/** Enum regarding tab locations that are extensionable in the UI */
+export enum TabLocation {
+  RESOURCE_DETAIL = 'tab', // eslint-disable-line no-unused-vars
+}
+
+/** Enum regarding card locations that are extensionable in the UI */
+export enum CardLocation {
+  CLUSTER_DASHBOARD_CARD = 'cluster-dashboard-card', // eslint-disable-line no-unused-vars
+}
+
+/** Enum regarding table col locations that are extensionable in the UI */
+export enum TableColumnLocation {
+  RESOURCE = 'resource-list', // eslint-disable-line no-unused-vars
+}
+
+/** Definition of the shortcut object (keyboard shortcuts) */
+export type ShortCutKey = {
+  windows?: string[];
+  mac?: string[];
+};
+
+/** Definition of the action options (table actions) */
+export type ActionOpts = {
+  event: any;
+  isAlt: boolean;
+  action: any;
+};
+
+/** Definition of an extension action (options that can be passed when setting an extension action) */
+export type Action = {
+  label?: string;
+  labelKey?: string;
+  tooltipKey?: string;
+  tooltip?: string;
+  shortcut?: string | ShortCutKey;
+  svg?: Function;
+  icon?: string;
+  multiple?: boolean;
+  enabled?: (ctx: any) => boolean;
+  invoke: (opts: ActionOpts, resources: any[]) => void | boolean | Promise<boolean>;
+};
+
+/** Definition of a panel (options that can be passed when defining an extension panel enhancement) */
+export type Panel = {
+  component: Function;
+};
+
+/** Definition of a card (options that can be passed when defining an extension card enhancement) */
+export type Card = {
+  label?: string;
+  labelKey?: string;
+  component: Function;
+};
+
+export type TableColumn = any;
+
+/** Definition of a tab (options that can be passed when defining an extension tab enhancement) */
+export type Tab = {
+  name: string;
+  label?: string;
+  labelKey?: string;
+  tooltipKey?: string;
+  tooltip?: string;
+  showHeader?: boolean;
+  weight?: number;
+  component: Function;
+};
+
+/** Definition of the locationConfig object (used in extensions) */
+export type LocationConfig = {
+  product?: string[],
+  resource?: string[],
+  namespace?: string[],
+  cluster?: string[],
+  id?: string[],
+  mode?: string[]
+};
+
 /**
  * Interface for a Dashboard plugin
  */
@@ -63,7 +164,7 @@ export interface IPlugin {
   validators: {[key: string]: Function};
 
   /**
-   * Add a module contains localisations for a specific locale
+   * Add a module containing localisations for a specific locale
    */
   addL10n(locale: string, fn: Function): void;
 
@@ -73,6 +174,31 @@ export interface IPlugin {
   addRoute(route: RouteConfig): void;
   addRoute(parent: string, route: RouteConfig): void;
 
+  /**
+   * Adds an action/button to the UI
+   */
+  addAction(where: ActionLocation | string, when: LocationConfig | string, action: Action): void;
+
+  /**
+   * Adds a tab to the UI (ResourceTabs component)
+   */
+  addTab(where: TabLocation | string, when: LocationConfig | string, action: Tab): void;
+
+  /**
+   * Adds a panel/component to the UI
+   */
+  addPanel(where: PanelLocation | string, when: LocationConfig | string, action: Panel): void;
+
+  /**
+   * Adds a card to the UI
+   */
+  addCard(where: CardLocation | string, when: LocationConfig | string, action: Card): void;
+
+  /**
+   * Adds a new column to the SortableTable component
+   */
+  addTableColumn(where: TableColumnLocation | string, when: LocationConfig | string, action: TableColumn): void;
+
   /**
    * Set the component to use for the landing home page
    * @param component Home page component
@@ -116,7 +242,7 @@ export interface IPlugin {
     onLogOut?: OnLogOut
   ): 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'
    * @param {String} name unique name of 'something'

package/creators/pkg/package-lock.json

@@ -0,0 +1,37 @@
+{
+  "name": "@rancher/create-pkg",
+  "version": "0.1.37",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "requires": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      }
+    },
+    "graceful-fs": {
+      "version": "4.2.10",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
+    },
+    "jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "requires": {
+        "graceful-fs": "^4.1.6",
+        "universalify": "^2.0.0"
+      }
+    },
+    "universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ=="
+    }
+  }
+}

package/creators/pkg/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rancher/create-pkg",
   "description": "Rancher UI Package generator",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "license": "Apache-2.0",
   "author": "SUSE",
   "private": false,

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

@@ -30,7 +30,7 @@ export default {
   },
 
   async fetch() {
-    await this.$store.dispatch('catalog/load');
+    await this.$store.dispatch('catalog/load', { force: true, reset: true });
 
     this.allOperations = await this.$store.dispatch('cluster/findAll', { type: CATALOG.OPERATION });
   },

package/detail/pod.vue

@@ -98,7 +98,7 @@ export default {
           stateDisplay:     status ? this.value.containerStateDisplay(status) : undefined,
           stateBackground:  status ? this.value.containerStateColor(status).replace('text', 'bg') : undefined,
           nameSort:         sortableNumericSuffix(container.name).toLowerCase(),
-          readyIcon:        status?.ready ? 'icon-checkmark icon-2x text-success ml-5' : 'icon-x icon-2x text-error ml-5',
+          readyIcon:        status?.ready ? 'icon-checkmark text-success ml-5' : 'icon-x text-error ml-5',
           availableActions: this.value.containerActions,
           stateObj:         status, // Required if there's a description
           stateDescription: descriptions.join(' | '), // Required to display the description

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

@@ -9,7 +9,7 @@ import Tab from '@shell/components/Tabbed/Tab';
 import { allHash } from '@shell/utils/promise';
 import { CAPI, MANAGEMENT, NORMAN, SNAPSHOT } from '@shell/config/types';
 import {
-  STATE, NAME as NAME_COL, AGE, AGE_NORMAN, STATE_NORMAN, ROLES, MACHINE_NODE_OS, MANAGEMENT_NODE_OS, NAME, IP_ADDRESS
+  STATE, NAME as NAME_COL, AGE, AGE_NORMAN, INTERNAL_EXTERNAL_IP, STATE_NORMAN, ROLES, MACHINE_NODE_OS, MANAGEMENT_NODE_OS, NAME,
 } from '@shell/config/table-headers';
 import CustomCommand from '@shell/edit/provisioning.cattle.io.cluster/CustomCommand';
 import AsyncButton from '@shell/components/AsyncButton.vue';
@@ -17,7 +17,7 @@ import AnsiUp from 'ansi_up';
 import day from 'dayjs';
 import { addParams } from '@shell/utils/url';
 import { base64Decode } from '@shell/utils/crypto';
-import { DATE_FORMAT, TIME_FORMAT } from '@shell/store/prefs';
+import { DATE_FORMAT, TIME_FORMAT, SCALE_POOL_PROMPT } from '@shell/store/prefs';
 import { escapeHtml } from '@shell/utils/string';
 import MachineSummaryGraph from '@shell/components/formatter/MachineSummaryGraph';
 import Socket, {
@@ -29,6 +29,7 @@ import Socket, {
 } from '@shell/utils/socket';
 import { get } from '@shell/utils/object';
 import CapiMachineDeployment from '@shell/models/cluster.x-k8s.io.machinedeployment';
+import { isAlternate } from '@shell/utils/platform';
 
 let lastId = 1;
 const ansiup = new AnsiUp();
@@ -253,7 +254,9 @@ export default {
       const emptyPools = (this.value.spec.rkeConfig?.machinePools || []).filter((mp) => {
         const machinePrefix = `${ this.value.name }-${ mp.name }`;
         const machines = this.value.machines.filter((machine) => {
-          return machine.spec?.infrastructureRef?.name.startsWith(machinePrefix);
+          const isElementalCluster = machine.spec?.infrastructureRef?.apiVersion.startsWith('elemental.cattle.io');
+
+          return !isElementalCluster ? machine.spec?.infrastructureRef?.name.startsWith(machinePrefix) : machine.spec?.infrastructureRef?.name.includes(machinePrefix);
         });
 
         return machines.length === 0;
@@ -356,7 +359,7 @@ export default {
           formatterOpts: { reference: 'kubeNodeDetailLocation' },
           dashIfEmpty:   true,
         },
-        IP_ADDRESS,
+        INTERNAL_EXTERNAL_IP,
         MACHINE_NODE_OS,
         ROLES,
         AGE,
@@ -375,7 +378,7 @@ export default {
           formatterOpts: { reference: 'kubeNodeDetailLocation' },
           dashIfEmpty:   true,
         },
-        IP_ADDRESS,
+        INTERNAL_EXTERNAL_IP,
         MANAGEMENT_NODE_OS,
         ROLES,
         AGE
@@ -500,6 +503,24 @@ export default {
   },
 
   methods: {
+    toggleScaleDownModal( event, resources ) {
+      // Check if the user held alt key when an action is clicked.
+      const alt = isAlternate(event);
+      const showScalePoolPrompt = this.$store.getters['prefs/get'](SCALE_POOL_PROMPT);
+
+      // Prompt if showScalePoolPrompt pref not store and user did not held alt key
+      if (!alt && !showScalePoolPrompt) {
+        this.$store.dispatch('management/promptModal', {
+          component:  'ScalePoolDownDialog',
+          resources,
+          modalWidth: '450px'
+        });
+      } else {
+        // User held alt key, so don't prompt
+        resources.scalePool(-1);
+      }
+    },
+
     async takeSnapshot(btnCb) {
       try {
         await this.value.takeSnapshot();
@@ -679,16 +700,21 @@ export default {
                 </div>
               </div>
               <div
-                v-if="group.ref"
-                class="right mr-45"
+                v-if="group.ref && poolSummaryInfo[group.ref]"
+                class="right group-header-buttons mr-20"
               >
+                <MachineSummaryGraph
+                  :row="poolSummaryInfo[group.ref]"
+                  :horizontal="true"
+                  class="mr-20"
+                />
                 <template v-if="value.hasLink('update') && group.ref.showScalePool">
                   <button
                     v-tooltip="t('node.list.scaleDown')"
                     :disabled="!group.ref.canScaleDownPool()"
                     type="button"
                     class="btn btn-sm role-secondary"
-                    @click="group.ref.scalePool(-1)"
+                    @click="toggleScaleDownModal($event, group.ref)"
                   >
                     <i class="icon icon-sm icon-minus" />
                   </button>
@@ -772,7 +798,7 @@ export default {
                     :disabled="group.ref.spec.quantity < 2"
                     type="button"
                     class="btn btn-sm role-secondary"
-                    @click="group.ref.scalePool(-1)"
+                    @click="toggleScaleDownModal($event, group.ref)"
                   >
                     <i class="icon icon-sm icon-minus" />
                   </button>

package/detail/service.vue

@@ -11,7 +11,6 @@ import Tab from '@shell/components/Tabbed/Tab';
 import { CATTLE_PUBLIC_ENDPOINTS } from '@shell/config/labels-annotations';
 import { KEY, VALUE } from '@shell/config/table-headers';
 import { POD } from '@shell/config/types';
-import { allHash } from '@shell/utils/promise';
 import { findBy } from '@shell/utils/array';
 
 export default {
@@ -36,13 +35,7 @@ export default {
   },
 
   async fetch() {
-    const hash = { pods: this.value.pods() };
-
-    const res = await allHash(hash);
-
-    for (const k in res) {
-      this[k] = res[k];
-    }
+    await this.value.fetchPods();
   },
 
   data() {
@@ -159,7 +152,7 @@ export default {
       :weight="4"
     >
       <ResourceTable
-        :rows="pods"
+        :rows="value.pods"
         :headers="podTableHeaders"
         key-field="id"
         :table-actions="false"

package/detail/workload/index.vue

@@ -373,7 +373,6 @@ export default {
     </div>
     <ResourceTabs
       :value="value"
-      :always-show-events="true"
     >
       <Tab
         v-if="isCronJob"

package/dialog/AddClusterMemberDialog.vue

@@ -9,9 +9,9 @@ export default {
   },
 
   props: {
-    resources: {
-      type:     Array,
-      required: true
+    onAdd: {
+      type:    Function,
+      default: () => {}
     }
   },
 
@@ -19,12 +19,6 @@ export default {
     return { bindings: [] };
   },
 
-  computed: {
-    onAdd() {
-      return this.resources[0];
-    },
-  },
-
   methods: {
     close() {
       this.$emit('close');
@@ -39,33 +33,33 @@ export default {
 </script>
 
 <template>
-  <Card
-    class="prompt-rotate"
-    :show-highlight-border="false"
+  <Card
+    class="prompt-rotate"
+    :show-highlight-border="false"
   >
-    <h4
-      slot="title"
-      class="text-default-text"
-      v-html="t('addClusterMemberDialog.title')"
+    <h4
+      slot="title"
+      class="text-default-text"
+      v-html="t('addClusterMemberDialog.title')"
     />
 
-    <div
-      slot="body"
-      class="pl-10 pr-10"
+    <div
+      slot="body"
+      class="pl-10 pr-10"
     >
-      <ClusterPermissionsEditor
-        v-model="bindings"
-        :use-two-columns-for-custom="true"
+      <ClusterPermissionsEditor
+        v-model="bindings"
+        :use-two-columns-for-custom="true"
       />
     </div>
 
-    <div
-      slot="actions"
-      class="buttons"
+    <div
+      slot="actions"
+      class="buttons"
     >
-      <button
-        class="btn role-secondary mr-10"
-        @click="close"
+      <button
+        class="btn role-secondary mr-10"
+        @click="close"
       >
         {{ t('generic.cancel') }}
       </button>