@rancher/shell 0.3.16 → 0.3.18

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,21 @@ export type LocationConfig = {
   namespace?: string[],
   cluster?: string[],
   id?: string[],
-  mode?: string[]
+  mode?: string[],
+  /**
+   * path match from URL (excludes host address)
+   */
+  path?: { [key: string]: string | boolean}[],
+  /**
+   * 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 +534,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/fleet.cattle.io.gitrepo.vue

@@ -31,8 +31,9 @@ export default {
 
   data() {
     return {
-      allFleet:   [],
-      allBundles: []
+      allFleet:             [],
+      allBundles:           [],
+      allBundleDeployments: [],
     };
   },
 
@@ -79,6 +80,12 @@ export default {
         inStoreType: 'management',
         type:        FLEET.BUNDLE
       },
+
+      allBundleDeployments: {
+        inStoreType: 'management',
+        type:        FLEET.BUNDLE_DEPLOYMENT
+      },
+
       allFleet: {
         inStoreType: 'management',
         type:        FLEET.CLUSTER
@@ -89,6 +96,7 @@ export default {
       }
     }, this.$store);
 
+    this.allBundleDeployments = allDispatches.allBundleDeployments || [];
     this.allBundles = allDispatches.allBundles || [];
     this.allFleet = allDispatches.allFleet || [];
   },

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,18 +3,19 @@ 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';
 import { escapeHtml } from '@shell/utils/string';
+import { NAMESPACE } from '@shell/config/types';
+import { PROJECT } from '@shell/config/labels-annotations';
 
 const POD_METRICS_DETAIL_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-pod-containers-1/rancher-pod-containers?orgId=1';
 const POD_METRICS_SUMMARY_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-pod-1/rancher-pod?orgId=1';
@@ -24,7 +25,6 @@ export default {
 
   components: {
     DashboardMetrics,
-    Loading,
     ResourceTabs,
     Tab,
     SortableTable,
@@ -35,6 +35,18 @@ export default {
 
   async fetch() {
     this.showMetrics = await allDashboardsExist(this.$store, this.currentCluster.id, [POD_METRICS_DETAIL_URL, POD_METRICS_SUMMARY_URL]);
+    if (!this.showMetrics) {
+      const namespace = await this.$store.dispatch('cluster/find', { type: NAMESPACE, id: this.value.metadata.namespace });
+
+      const projectId = namespace?.metadata?.labels[PROJECT];
+
+      if (projectId) {
+        this.POD_PROJECT_METRICS_DETAIL_URL = `/api/v1/namespaces/cattle-project-${ projectId }-monitoring/services/http:cattle-project-${ projectId }-monitoring-grafana:80/proxy/d/rancher-pod-containers-1/rancher-pod-containers?orgId=1'`;
+        this.POD_PROJECT_METRICS_SUMMARY_URL = `/api/v1/namespaces/cattle-project-${ projectId }-monitoring/services/http:cattle-project-${ projectId }-monitoring-grafana:80/proxy/d/rancher-pod-1/rancher-pod?orgId=1`;
+
+        this.showProjectMetrics = await allDashboardsExist(this.$store, this.currentCluster.id, [this.POD_PROJECT_METRICS_DETAIL_URL, this.POD_PROJECT_METRICS_SUMMARY_URL], 'cluster', projectId);
+      }
+    }
   },
 
   data() {
@@ -47,10 +59,13 @@ export default {
     return {
       POD_METRICS_DETAIL_URL,
       POD_METRICS_SUMMARY_URL,
+      POD_PROJECT_METRICS_DETAIL_URL:  '',
+      POD_PROJECT_METRICS_SUMMARY_URL: '',
       POD_OPTION,
-      showMetrics: false,
-      selection:   POD_OPTION,
-      metricsID:   null,
+      showMetrics:                     false,
+      showProjectMetrics:              false,
+      selection:                       POD_OPTION,
+      metricsID:                       null,
     };
   },
 
@@ -142,7 +157,7 @@ export default {
           ...SIMPLE_NAME,
           value: 'name'
         },
-        IMAGE,
+        IMAGE_NAME,
         {
           name:          'isInit',
           labelKey:      'workload.container.init',
@@ -224,9 +239,7 @@ export default {
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
   <ResourceTabs
-    v-else
     mode="view"
     class="mt-20"
     :value="value"
@@ -282,6 +295,22 @@ export default {
         />
       </template>
     </Tab>
+    <Tab
+      v-if="showProjectMetrics"
+      :label="t('workload.container.titles.metrics')"
+      name="pod-metrics"
+      :weight="2.5"
+    >
+      <template #default="props">
+        <DashboardMetrics
+          v-if="props.active"
+          :detail-url="POD_PROJECT_METRICS_DETAIL_URL"
+          :summary-url="POD_PROJECT_METRICS_SUMMARY_URL"
+          :vars="graphVars"
+          graph-height="550px"
+        />
+      </template>
+    </Tab>
   </ResourceTabs>
 </template>
 <style scoped>

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

@@ -81,6 +81,24 @@ export default {
 
   async fetch() {
     await this.value.waitForProvisioner();
+
+    const extClass = this.$plugin.getDynamic('provisioner', this.value.machineProvider);
+
+    if (extClass) {
+      this.extProvider = new extClass({
+        dispatch: this.$store.dispatch,
+        getters:  this.$store.getters,
+        axios:    this.$store.$axios,
+        $plugin:  this.$store.app.$plugin,
+        $t:       this.t
+      });
+      this.extDetailTabs = {
+        ...this.extDetailTabs,
+        ...this.extProvider.detailTabs
+      };
+      this.extCustomParams = { provider: this.value.machineProvider };
+    }
+
     const fetchOne = {};
 
     if ( this.$store.getters['management/canList'](CAPI.MACHINE_DEPLOYMENT) ) {
@@ -206,6 +224,18 @@ export default {
       logSocket: null,
       logs:      [],
 
+      extProvider:     null,
+      extCustomParams: null,
+      extDetailTabs:   {
+        machines:     true, // in this component
+        logs:         true, // in this component
+        registration: true, // in this component
+        snapshots:    true, // in this component
+        related:      true, // in ResourceTabs
+        events:       true, // in ResourceTabs
+        conditions:   true, // in ResourceTabs
+      },
+
       showWindowsWarning: false
     };
   },
@@ -336,7 +366,9 @@ export default {
     },
 
     showMachines() {
-      return this.haveMachines && (this.value.isRke2 || !!this.machines.length);
+      const showMachines = this.haveMachines && (this.value.isRke2 || !!this.machines.length);
+
+      return showMachines && this.extDetailTabs.machines;
     },
 
     showNodes() {
@@ -345,9 +377,9 @@ export default {
 
     showSnapshots() {
       if (this.value.isRke1) {
-        return this.$store.getters['rancher/canList'](NORMAN.ETCD_BACKUP);
+        return this.$store.getters['rancher/canList'](NORMAN.ETCD_BACKUP) && this.extDetailTabs.snapshots;
       } else if (this.value.isRke2) {
-        return this.$store.getters['management/canList'](SNAPSHOT);
+        return this.$store.getters['management/canList'](SNAPSHOT) && this.extDetailTabs.snapshots;
       }
 
       return false;
@@ -476,15 +508,15 @@ export default {
       }
 
       if ( this.value.isImported ) {
-        return !this.value.mgmt?.isReady;
+        return !this.value.mgmt?.isReady && this.extDetailTabs.registration;
       }
 
       if ( this.value.isCustom ) {
-        return true;
+        return this.extDetailTabs.registration;
       }
 
       if ( this.value.isHostedKubernetesProvider && !this.isClusterReady ) {
-        return true;
+        return this.extDetailTabs.registration;
       }
 
       return false;
@@ -495,7 +527,9 @@ export default {
     },
 
     showLog() {
-      return this.value.mgmt?.hasLink('log');
+      const showLog = this.value.mgmt?.hasLink('log');
+
+      return showLog && this.extDetailTabs.logs;
     },
 
     dateTimeFormatStr() {
@@ -686,6 +720,10 @@ export default {
       v-model="value"
       :default-tab="defaultTab"
       :need-related="hasLocalAccess"
+      :extension-params="extCustomParams"
+      :needRelated="extDetailTabs.related"
+      :needEvents="extDetailTabs.events"
+      :needConditions="extDetailTabs.conditions"
     >
       <Tab
         v-if="showMachines"
@@ -773,6 +811,7 @@ export default {
           </template>
         </ResourceTable>
       </Tab>
+
       <Tab
         v-else-if="showNodes"
         name="node-pools"