@rancher/shell 3.0.8-rc.1 → 3.0.8-rc.10

package/models/chart.js

@@ -1,8 +1,10 @@
-import { compatibleVersionsFor, APP_UPGRADE_STATUS } from '@shell/store/catalog';
+import { APP_UPGRADE_STATUS } from '@shell/store/catalog';
 import {
   REPO_TYPE, REPO, CHART, VERSION, _FLAGGED, HIDE_SIDE_NAV, CATEGORY, TAG, DEPRECATED as DEPRECATED_QUERY
 } from '@shell/config/query-params';
 import { BLANK_CLUSTER } from '@shell/store/store-types.js';
+import { SHOW_PRE_RELEASE } from '@shell/store/prefs';
+import { getLatestCompatibleVersion } from '@shell/utils/chart';
 import SteveModel from '@shell/plugins/steve/steve-class';
 import { CATALOG, ZERO_TIME } from '@shell/config/types';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
@@ -10,17 +12,7 @@ import day from 'dayjs';
 
 export default class Chart extends SteveModel {
   queryParams(from, hideSideNav) {
-    let version;
-    const chartVersions = this.versions;
-    const currentCluster = this.$rootGetters['currentCluster'];
-    const workerOSs = currentCluster?.workerOSs;
-    const compatibleVersions = compatibleVersionsFor(this, workerOSs);
-
-    if (compatibleVersions.length) {
-      version = compatibleVersions[0].version;
-    } else {
-      version = chartVersions[0].version;
-    }
+    const version = this.latestCompatibleVersion.version;
 
     const out = {
       [REPO_TYPE]: this.repoType,
@@ -115,6 +107,26 @@ export default class Chart extends SteveModel {
     return this.isInstalled && this.matchingInstalledApps[0].upgradeAvailable === APP_UPGRADE_STATUS.SINGLE_UPGRADE;
   }
 
+  /**
+   * Retrieves the latest chart version that is compatible with the current cluster's OS and user's pre-release preference.
+   * It caches the result for efficiency.
+   *
+   * @returns {Object} The latest compatible chart version object.
+   */
+  get latestCompatibleVersion() {
+    if (this._latestCompatibleVersion) {
+      return this._latestCompatibleVersion;
+    }
+
+    const currentCluster = this.$rootGetters['currentCluster'];
+    const workerOSs = currentCluster?.workerOSs;
+    const showPrerelease = this.$rootGetters['prefs/get'](SHOW_PRE_RELEASE);
+
+    this._latestCompatibleVersion = getLatestCompatibleVersion(this, workerOSs, showPrerelease);
+
+    return this._latestCompatibleVersion;
+  }
+
   /**
    * Builds structured metadata for display in RcItemCard.vue:
    * - Sub-header (version and last updated)
@@ -125,7 +137,7 @@ export default class Chart extends SteveModel {
    */
   get cardContent() {
     if (!this._cardContent) {
-      const latestVersion = this.versions?.[0] || {};
+      const latestVersion = this.latestCompatibleVersion;
       const subHeaderItems = [];
 
       if (latestVersion) {

package/models/cluster/node.js

@@ -4,7 +4,6 @@ import {
   CAPI, MANAGEMENT, METRIC, NORMAN, POD
 } from '@shell/config/types';
 import { parseSi } from '@shell/utils/units';
-import findLast from 'lodash/findLast';
 
 import SteveModel from '@shell/plugins/steve/steve-class';
 import { LOCAL } from '@shell/config/query-params';
@@ -96,15 +95,23 @@ export default class ClusterNode extends SteveModel {
     return this.status?.addresses || [];
   }
 
-  get internalIp() {
-    return findLast(this.addresses, (address) => address.type === 'InternalIP')?.address;
+  get internalIps() {
+    return this.addresses.filter((address) => address.type === 'InternalIP').map((address) => address.address);
   }
 
-  get externalIp() {
+  get externalIps() {
     const annotationAddress = this.metadata.annotations[RKE.EXTERNAL_IP];
-    const statusAddress = findLast(this.addresses, (address) => address.type === 'ExternalIP')?.address;
+    const statusAddresses = this.addresses.filter((address) => address.type === 'ExternalIP').map((address) => address.address);
+
+    return statusAddresses.concat(annotationAddress || []);
+  }
 
-    return statusAddress || annotationAddress;
+  get internalIp() {
+    return this.internalIps[0];
+  }
+
+  get externalIp() {
+    return this.externalIps[0];
   }
 
   get labels() {

package/models/cluster.x-k8s.io.machine.js

@@ -244,29 +244,19 @@ export default class CapiMachine extends SteveModel {
     return this.status?.phase === 'Running';
   }
 
-  get internalIp() {
-    // This shows in the IP address column for RKE2 nodes in the
-    // list of nodes in the cluster detail page of Cluster Management.
-    const internal = this.status?.addresses?.find(({ type }) => {
-      return type === ADDRESSES.INTERNAL_IP;
-    })?.address;
-
-    if (internal) {
-      return internal;
-    }
-
-    return this.t('generic.none');
+  get internalIps() {
+    return this.status?.addresses?.filter(({ type }) => type === ADDRESSES.INTERNAL_IP).map((addr) => addr.address) || [];
   }
 
-  get externalIp() {
-    const external = this.status?.addresses?.find(({ type }) => {
-      return type === ADDRESSES.EXTERNAL_IP;
-    })?.address;
+  get externalIps() {
+    return this.status?.addresses?.filter(({ type }) => type === ADDRESSES.EXTERNAL_IP).map((addr) => addr.address) || [];
+  }
 
-    if (external) {
-      return external;
-    }
+  get internalIp() {
+    return this.internalIps[0];
+  }
 
-    return this.t('generic.none');
+  get externalIp() {
+    return this.externalIps[0];
   }
 }

package/models/cluster.x-k8s.io.machinedeployment.js

@@ -4,7 +4,7 @@ import { sortBy } from '@shell/utils/sort';
 import SteveModel from '@shell/plugins/steve/steve-class';
 import { exceptionToErrorsArray } from '@shell/utils/error';
 import { handleConflict } from '@shell/plugins/dashboard-store/normalize';
-import { MACHINE_ROLES } from '@shell/config/labels-annotations';
+import { CAPI as CAPI_ANNOTATIONS, MACHINE_ROLES } from '@shell/config/labels-annotations';
 import { notOnlyOfRole } from '@shell/models/cluster.x-k8s.io.machine';
 import { KIND } from '../config/elemental-types';
 import { KIND as HARVESTER_KIND } from '../config/harvester-manager-types';
@@ -173,6 +173,10 @@ export default class CapiMachineDeployment extends SteveModel {
     }, 1000);
   }
 
+  get isAutoscalerEnabled() {
+    return this.annotations?.[CAPI_ANNOTATIONS.AUTOSCALER_MACHINE_POOL_MIN_SIZE] || this.annotations?.[CAPI_ANNOTATIONS.AUTOSCALER_MACHINE_POOL_MAX_SIZE];
+  }
+
   // prevent scaling pool to 0 if it would scale down the only etcd or control plane node
   canScaleDownPool() {
     if (!this.canUpdate || this.inClusterSpec?.quantity === 0 || this.infrastructureRefKind === KIND.MACHINE_INV_SELECTOR_TEMPLATES) {

package/models/management.cattle.io.cluster.js

@@ -15,6 +15,7 @@ import { LINUX, WINDOWS } from '@shell/store/catalog';
 import { KONTAINER_TO_DRIVER } from './management.cattle.io.kontainerdriver';
 import { PINNED_CLUSTERS } from '@shell/store/prefs';
 import { copyTextToClipboard } from '@shell/utils/clipboard';
+import { isHostedProvider } from '@shell/utils/provider';
 
 const DEFAULT_BADGE_COLOR = '#707070';
 
@@ -171,9 +172,20 @@ export default class MgmtCluster extends SteveModel {
     return this.isCondition('Ready');
   }
 
+  get config() {
+    if (!this.spec?.[`${ this.provisioner }Config`]) {
+      const allKeys = Object.keys(this.spec);
+      const configKey = allKeys.find( (k) => k.endsWith('Config'));
+
+      return this.spec[configKey];
+    }
+
+    return this.spec?.[`${ this.provisioner }Config`];
+  }
+
   get kubernetesVersionRaw() {
     const fromStatus = this.status?.version?.gitVersion;
-    const fromSpec = this.spec?.[`${ this.provisioner }Config`]?.kubernetesVersion;
+    const fromSpec = this.config?.kubernetesVersion;
 
     return fromStatus || fromSpec;
   }
@@ -239,9 +251,15 @@ export default class MgmtCluster extends SteveModel {
   }
 
   get isHostedKubernetesProvider() {
-    const providers = ['AKS', 'EKS', 'GKE'];
+    const context = {
+      dispatch:   this.$dispatch,
+      getters:    this.$getters,
+      axios:      this.$axios,
+      $extension: this.$plugin,
+      t:          (...args) => this.t.apply(this, args),
+    };
 
-    return providers.includes(this.provisioner);
+    return isHostedProvider(context, this.provisioner);
   }
 
   get providerLogo() {

package/models/management.cattle.io.kontainerdriver.js

@@ -41,6 +41,7 @@ export const DRIVER_TO_IMPORT = {
   googlegke: 'gke',
   amazoneks: 'eks',
   azureaks:  'aks',
+  alibaba:   'alibabacloud'
 };
 
 export default class KontainerDriver extends HybridModel {

package/models/provisioning.cattle.io.cluster.js

@@ -1,5 +1,7 @@
 import {
-  CAPI, MANAGEMENT, NAMESPACE, NORMAN, SNAPSHOT, HCI, LOCAL_CLUSTER
+  CAPI, MANAGEMENT, NAMESPACE, NORMAN, SNAPSHOT, HCI, LOCAL_CLUSTER,
+  CONFIG_MAP, AUTOSCALER_CONFIG_MAP_ID,
+  EVENT
 } from '@shell/config/types';
 import SteveModel from '@shell/plugins/steve/steve-class';
 import { findBy } from '@shell/utils/array';
@@ -7,10 +9,14 @@ import { get, set } from '@shell/utils/object';
 import { sortBy } from '@shell/utils/sort';
 import { ucFirst } from '@shell/utils/string';
 import { compare } from '@shell/utils/version';
-import { AS, MODE, _VIEW, _YAML } from '@shell/config/query-params';
 import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 import { CAPI as CAPI_ANNOTATIONS, NODE_ARCHITECTURE } from '@shell/config/labels-annotations';
 import { KEV1 } from '@shell/models/management.cattle.io.kontainerdriver';
+import jsyaml from 'js-yaml';
+import { defineAsyncComponent, markRaw } from 'vue';
+import stevePaginationUtils from '@shell/plugins/steve/steve-pagination-utils';
+import { PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { isHostedProvider } from '@shell/utils/provider';
 
 const RKE1_ALLOWED_ACTIONS = [
   'promptRemove',
@@ -21,6 +27,11 @@ const RKE1_ALLOWED_ACTIONS = [
   'viewInApi'
 ];
 
+const AUTOSCALER_STATUS = {
+  PROVISIONING: 'provisioning',
+  UNAVAILABLE:  'unavailable'
+};
+
 /**
  * Class representing Cluster resource.
  * @extends SteveModel
@@ -48,6 +59,17 @@ export default class ProvCluster extends SteveModel {
         label:   this.t('cluster.detail.machines'),
         content: this.desired,
       },
+      {
+        label:         'Autoscaler',
+        content:       this.isAutoscalerEnabled,
+        valueOverride: {
+          component: markRaw(defineAsyncComponent(() => import('@shell/components/formatter/Autoscaler.vue'))),
+          props:     {
+            value: true,
+            row:   this
+          }
+        }
+      }
     ].filter((x) => !!x.content);
 
     if (!this.machineProvider) {
@@ -148,7 +170,14 @@ export default class ProvCluster extends SteveModel {
         label:   this.$rootGetters['i18n/t']('nav.rotateEncryptionKeys'),
         icon:    'icon icon-refresh',
         enabled: canEditRKE2cluster
-      }, { divider: true }];
+      },
+      {
+        action:  'toggleAutoscalerRunner',
+        label:   this.isAutoscalerPaused ? 'Resume Autoscaler' : 'Pause Autoscaler',
+        icon:    `icon ${ this.isAutoscalerPaused ? 'icon-play' : 'icon-pause' }`,
+        enabled: this.canPauseResumeAutoscaler
+      },
+      { divider: true }];
 
     const all = actions.concat(out);
 
@@ -231,26 +260,6 @@ export default class ProvCluster extends SteveModel {
     }
   }
 
-  goToViewYaml() {
-    let location;
-
-    if ( !this.isRke2 ) {
-      location = this.mgmt?.detailLocation;
-    }
-
-    if ( !location ) {
-      location = this.detailLocation;
-    }
-
-    location.query = {
-      ...location.query,
-      [MODE]: _VIEW,
-      [AS]:   _YAML
-    };
-
-    this.currentRouter().push(location);
-  }
-
   get canDelete() {
     return super.canDelete && this.stateObj?.name !== 'removing';
   }
@@ -264,9 +273,26 @@ export default class ProvCluster extends SteveModel {
   }
 
   get isHostedKubernetesProvider() {
-    const providers = ['AKS', 'EKS', 'GKE'];
+    const context = {
+      dispatch:   this.$dispatch,
+      getters:    this.$getters,
+      axios:      this.$axios,
+      $extension: this.$plugin,
+      t:          (...args) => this.t.apply(this, args),
+    };
+
+    return isHostedProvider(context, this.provisioner);
+  }
 
-    return providers.includes(this.provisioner);
+  get providerConfig() {
+    if ( this.isRke2 ) {
+      return this.spec.rkeConfig;
+    }
+    if (this.mgmt && this.mgmt.config) {
+      return this.mgmt.config;
+    }
+
+    return null;
   }
 
   get isPrivateHostedProvider() {
@@ -306,13 +332,7 @@ export default class ProvCluster extends SteveModel {
 
     // imported KEv2
     // we can't rely on this.provisioner to determine imported-ness for these clusters, as it will return 'aks' 'eks' 'gke' for both provisioned and imported clusters
-    const kontainerConfigs = ['aksConfig', 'eksConfig', 'gkeConfig'];
-
-    const isImportedKontainer = kontainerConfigs.filter((key) => {
-      return this.mgmt?.spec?.[key]?.imported === true;
-    }).length;
-
-    if (isImportedKontainer) {
+    if (this.isHostedKubernetesProvider && !!this.providerConfig.imported) {
       return true;
     }
 
@@ -361,7 +381,11 @@ export default class ProvCluster extends SteveModel {
   }
 
   get mgmtClusterId() {
-    return this.status?.clusterName;
+    // when a cluster is created `this` instance isn't immediately updated with `status.clusterName`
+    // Workaround - Get fresh copy from the store
+    const pCluster = this.$rootGetters['management/byId'](CAPI.RANCHER_CLUSTER, this.id);
+
+    return this.status?.clusterName || pCluster?.status?.clusterName;
   }
 
   get mgmt() {
@@ -1023,4 +1047,196 @@ export default class ProvCluster extends SteveModel {
   get fullDetailPageOverride() {
     return true;
   }
+
+  async loadAutoscalerEvents() {
+    const autoscalerConfigMap = await this.loadAutoscalerConfigMap();
+    const eventSchema = this.$rootGetters['management/schemaFor'](EVENT);
+    const fields = [new PaginationFilterField({
+      field: 'involvedObject.uid',
+      value: autoscalerConfigMap.metadata.uid,
+      exact: true,
+    }),
+    new PaginationFilterField({
+      field: 'metadata.namespace',
+      value: 'kube-system',
+      exact: true,
+    })];
+    const pagination = {
+      page:     1,
+      pageSize: 200,
+      filters:  [
+        new PaginationParamFilter({ fields })
+      ]
+
+    };
+    const params = stevePaginationUtils.createParamsForPagination({ schema: eventSchema, opt: { pagination } });
+    const url = `/k8s/clusters/${ this.mgmtClusterId }/v1/${ EVENT }?${ params }`;
+
+    const events = (await this.$dispatch('cluster/request', { url }, { root: true }))?.data || [];
+
+    return events.filter((event) => event.involvedObject.name === 'cluster-autoscaler-status');
+  }
+
+  get hasAccessToAutoscalerConfigMap() {
+    // This may change but for now this is the best proxy we have for access to the configmap without attempting to access it and getting a 404.
+    return this.canEdit;
+  }
+
+  async loadAutoscalerConfigMap() {
+    const url = `/k8s/clusters/${ this.mgmtClusterId }/v1/${ CONFIG_MAP }/${ AUTOSCALER_CONFIG_MAP_ID }`;
+
+    return await this.$dispatch('cluster/request', { url }, { root: true });
+  }
+
+  get canPauseResumeAutoscaler() {
+    return this.isAutoscalerEnabled && this.canExplore && this.hasAccessToAutoscalerConfigMap;
+  }
+
+  async loadAutoscalerStatus() {
+    if (!this.canExplore) {
+      return AUTOSCALER_STATUS.PROVISIONING;
+    }
+
+    if (!this.hasAccessToAutoscalerConfigMap) {
+      return AUTOSCALER_STATUS.UNAVAILABLE;
+    }
+
+    try {
+      const configMap = await this.loadAutoscalerConfigMap();
+      const yaml = configMap?.data?.status || '';
+
+      return jsyaml.load(yaml);
+    } catch (ex) {
+      console.error(ex); // eslint-disable-line no-console
+
+      return AUTOSCALER_STATUS.UNAVAILABLE;
+    }
+  }
+
+  async loadAutoscalerDetails() {
+    const out = [];
+
+    if (this.isAutoscalerPaused) {
+      out.push({
+        label: this.t('autoscaler.card.details.status'),
+        value: this.t('autoscaler.card.details.paused')
+      });
+
+      return out;
+    }
+
+    const status = await this.loadAutoscalerStatus();
+
+    if (status === AUTOSCALER_STATUS.UNAVAILABLE) {
+      out.push({
+        label: this.t('autoscaler.card.details.status'),
+        value: this.t('autoscaler.card.details.unavailable')
+      });
+
+      return out;
+    }
+
+    if (status === AUTOSCALER_STATUS.PROVISIONING) {
+      out.push({
+        label: this.t('autoscaler.card.details.status'),
+        value: this.t('autoscaler.card.details.provisioning')
+      });
+
+      return out;
+    }
+
+    if (status.autoscalerStatus) {
+      out.push({
+        label: this.t('autoscaler.card.details.status'),
+        value: status.autoscalerStatus
+      });
+    }
+
+    if (status.clusterWide?.health?.status) {
+      const statusValue = status.clusterWide.health.status;
+
+      out.push({
+        label: this.t('autoscaler.card.details.health'),
+        value: {
+          component: 'BadgeStateFormatter',
+          props:     {
+            value: statusValue, arbitrary: true, row: {}
+          },
+        }
+      });
+    }
+
+    if (status.clusterWide?.scaleDown?.lastTransitionTime) {
+      out.push({
+        label: this.t('autoscaler.card.details.scaleDown'),
+        value: {
+          component: 'LiveDate',
+          props:     {
+            value:     status.clusterWide.scaleDown.lastTransitionTime,
+            addSuffix: true
+          }
+        }
+      });
+    }
+
+    if (status.clusterWide?.scaleUp?.lastTransitionTime) {
+      out.push({
+        label: this.t('autoscaler.card.details.scaleUp'),
+        value: {
+          component: 'LiveDate',
+          props:     {
+            value:     status.clusterWide.scaleUp.lastTransitionTime,
+            addSuffix: true
+          }
+        }
+      });
+    }
+
+    if (status.clusterWide?.health?.nodeCounts?.registered) {
+      out.push({ label: this.t('autoscaler.card.details.nodes') });
+
+      out.push({
+        label: this.t('autoscaler.card.details.ready'),
+        value: status.clusterWide.health.nodeCounts.registered.ready || '0'
+      });
+      out.push({
+        label: this.t('autoscaler.card.details.notStarted'),
+        value: status.clusterWide.health.nodeCounts.registered.notStarted || '0'
+      });
+      out.push({
+        label: this.t('autoscaler.card.details.inTotal'),
+        value: status.clusterWide.health.nodeCounts.registered.total || '0'
+      });
+    }
+
+    return out;
+  }
+
+  get isAutoscalerEnabled() {
+    return !!this.spec?.rkeConfig?.machinePools?.some((pool) => {
+      return typeof pool.autoscalingMinSize !== 'undefined' || typeof pool.autoscalingMaxSize !== 'undefined';
+    });
+  }
+
+  get isAutoscalerPaused() {
+    return !!this.metadata?.annotations?.[CAPI_ANNOTATIONS.AUTOSCALER_CLUSTER_PAUSE];
+  }
+
+  pauseAutoscaler() {
+    this.setAnnotation(CAPI_ANNOTATIONS.AUTOSCALER_CLUSTER_PAUSE, 'true');
+  }
+
+  resumeAutoscaler() {
+    this.setAnnotation(CAPI_ANNOTATIONS.AUTOSCALER_CLUSTER_PAUSE, undefined);
+  }
+
+  toggleAutoscalerRunner() {
+    if (this.isAutoscalerPaused) {
+      this.resumeAutoscaler();
+    } else {
+      this.pauseAutoscaler();
+    }
+
+    return this.save();
+  }
 }

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.8-rc.1",
+  "version": "3.0.8-rc.10",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
   "author": "SUSE",
   "private": false,
+  "types": "types/shell/index.d.ts",
   "engines": {
     "node": ">=20.0.0"
   },
@@ -38,7 +39,7 @@
     "@babel/preset-typescript": "7.16.7",
     "@novnc/novnc": "1.2.0",
     "@popperjs/core": "2.11.8",
-    "@rancher/icons": "2.0.49",
+    "@rancher/icons": "2.0.54",
     "@types/is-url": "1.2.30",
     "@types/node": "20.10.8",
     "@types/semver": "^7.5.8",
@@ -61,7 +62,7 @@
     "clipboard-polyfill": "4.0.1",
     "codemirror-editor-vue3": "2.8.0",
     "codemirror": ">=5.64.0 <6",
-    "color": "4.2.3",
+    "color": "5.0.3",
     "cookie-universal": "2.2.2",
     "cookie": "0.7.0",
     "core-js": "3.45.0",
@@ -105,7 +106,7 @@
     "jquery": "3.5.1",
     "js-cookie": "3.0.5",
     "js-yaml-loader": "1.2.2",
-    "js-yaml": "4.1.0",
+    "js-yaml": "4.1.1",
     "jsdiff": "1.1.1",
     "jsonpath-plus": "10.3.0",
     "jsrsasign": "11.0.0",
@@ -114,7 +115,7 @@
     "marked": "4.0.17",
     "node-polyfill-webpack-plugin": "3.0.0",
     "nodemon": "2.0.22",
-    "nyc": "15.1.0",
+    "nyc": "17.1.0",
     "papaparse": "5.3.0",
     "portal-vue": "~3.0.0",
     "sass-loader": "12.6.0",