@rancher/shell 3.0.7 → 3.0.8-rc.10

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.7",
+  "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.38",
+    "@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",

package/pages/auth/login.vue

@@ -10,7 +10,7 @@ import CopyCode from '@shell/components/CopyCode';
 import { Banner } from '@components/Banner';
 import {
   LOCAL, LOGGED_OUT, TIMED_OUT, IS_SSO, _FLAGGED,
-  IS_SLO
+  IS_SLO, IS_SESSION_IDLE
 } from '@shell/config/query-params';
 import { Checkbox } from '@components/Form/Checkbox';
 import Password from '@shell/components/form/Password';
@@ -32,6 +32,7 @@ import loadPlugins from '@shell/plugins/plugin';
 import Loading from '@shell/components/Loading';
 import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 import TabTitle from '@shell/components/TabTitle.vue';
+import { getBrandMeta } from '@shell/utils/brand';
 
 export default {
   name:       'Login',
@@ -47,6 +48,7 @@ export default {
 
       timedOut:           this.$route.query[TIMED_OUT] === _FLAGGED,
       loggedOut:          this.$route.query[LOGGED_OUT] === _FLAGGED,
+      isSessionIdle:      this.$route.query[IS_SESSION_IDLE] === _FLAGGED,
       isSsoLogout:        this.$route.query[IS_SSO] === _FLAGGED,
       isSlo:              this.$route.query[IS_SLO] === _FLAGGED,
       err:                this.$route.query.err,
@@ -67,7 +69,9 @@ export default {
     ...mapGetters({ t: 'i18n/t', hasMultipleLocales: 'i18n/hasMultipleLocales' }),
 
     loggedOutSuccessMsg() {
-      if (this.isSlo) {
+      if (this.isSessionIdle) {
+        return this.t('login.loggedOutSessionIdle');
+      } else if (this.isSlo) {
         return this.t('login.loggedOutFromSlo');
       } else if (this.isSsoLogout) {
         return this.t('login.loggedOutFromSso');
@@ -131,6 +135,25 @@ export default {
     hasLoginMessage() {
       return this.errorToDisplay || this.loggedOut || this.timedOut;
     },
+
+    customizations() {
+      const brandMeta = getBrandMeta(this.$store.getters['management/brand']);
+      const login = brandMeta?.login || {};
+
+      return {
+        welcomeLabelKey: 'login.welcome',
+        logoClass:       'login-logo',
+        ...login,
+      };
+    },
+
+    bannerClass() {
+      return this.customizations.bannerClass;
+    },
+
+    brandLogo() {
+      return this.customizations.logo;
+    }
   },
 
   async fetch() {
@@ -332,11 +355,20 @@ export default {
     </TabTitle>
     <div class="row gutless mb-20">
       <div class="col span-6 p-20">
-        <p class="text-center">
+        <p
+          v-if="!brandLogo"
+          class="text-center"
+        >
           {{ t('login.howdy') }}
         </p>
+        <BrandImage
+          v-else
+          :class="{[customizations.logoClass]: !!customizations.logoClass}"
+          :file-name="brandLogo"
+          :alt="t('login.landscapeAlt')"
+        />
         <h1 class="text-center login-welcome">
-          {{ t('login.welcome', {vendor}) }}
+          {{ t(customizations.welcomeLabelKey, {vendor}) }}
         </h1>
         <div
           class="login-messages"
@@ -521,6 +553,7 @@ export default {
         </div>
       </div>
       <BrandImage
+        :class="bannerClass"
         class="col span-6 landscape"
         data-testid="login-landscape__img"
         file-name="login-landscape.svg"
@@ -549,6 +582,12 @@ export default {
       margin: 0
     }
 
+    .login-logo {
+      align-self: center;
+      max-width: 260px;
+      margin-bottom: 20px;
+    }
+
     .login-messages {
       display: flex;
       justify-content: center;

package/pages/auth/verify.vue

@@ -10,7 +10,7 @@ import { AUTH_BROADCAST_CHANNEL_NAME } from '@shell/utils/auth';
 
 const samlProviders = ['ping', 'adfs', 'keycloak', 'okta', 'shibboleth'];
 
-const oauthProviders = ['github', 'googleoauth', 'azuread'];
+const oauthProviders = ['github', 'githubapp', 'googleoauth', 'azuread'];
 
 function reply(err, code) {
   try {

package/pages/c/_cluster/apps/charts/AppChartCardSubHeader.vue

@@ -19,7 +19,7 @@ defineProps<{
       v-for="(subHeaderItem, i) in items"
       :key="i"
       class="app-chart-card-sub-header-item"
-      data-testid="app-chart-card-version"
+      data-testid="app-chart-card-sub-header-item"
     >
       <i
         v-clean-tooltip="t(subHeaderItem.iconTooltip.key)"
@@ -35,7 +35,8 @@ defineProps<{
 <style scoped lang="scss">
 .app-chart-card-sub-header {
   display: flex;
-  gap: var(--gap-md);
+  flex-wrap: wrap;
+  gap: var(--gap) var(--gap-md);
   color: var(--link-text-secondary);
   margin-bottom: 8px;
 

package/pages/c/_cluster/apps/charts/__tests__/chart.test.ts

@@ -0,0 +1,135 @@
+import Chart from '@shell/pages/c/_cluster/apps/charts/chart.vue';
+
+jest.mock('clipboard-polyfill', () => ({ writeText: () => {} }));
+
+describe('page: Chart Detail', () => {
+  describe('computed: maintainers', () => {
+    it('should return an empty array if no maintainers are provided', () => {
+      const thisContext = {
+        version:     {},
+        versionInfo: null,
+      };
+      const result = (Chart.computed!.maintainers as () => any[]).call(thisContext);
+
+      expect(result).toStrictEqual([]);
+    });
+
+    it('should return an empty array for empty maintainers arrays', () => {
+      const thisContext = {
+        version:     { maintainers: [] },
+        versionInfo: { chart: { maintainers: [] } },
+      };
+      const result = (Chart.computed!.maintainers as () => any[]).call(thisContext);
+
+      expect(result).toStrictEqual([]);
+    });
+
+    it('should prioritize maintainers from "version"', () => {
+      const thisContext = {
+        version: {
+          maintainers: [
+            { name: 'Version Maintainer', email: 'version@test.com' }
+          ]
+        },
+        versionInfo: {
+          chart: {
+            maintainers: [
+              { name: 'VersionInfo Maintainer', email: 'versioninfo@test.com' }
+            ]
+          }
+        },
+      };
+      const result = (Chart.computed!.maintainers as () => any[]).call(thisContext);
+
+      expect(result).toHaveLength(1);
+      expect(result[0].name).toBe('Version Maintainer');
+    });
+
+    it('should fall back to maintainers from "versionInfo"', () => {
+      const thisContext = {
+        version:     {},
+        versionInfo: {
+          chart: {
+            maintainers: [
+              { name: 'VersionInfo Maintainer', email: 'versioninfo@test.com' }
+            ]
+          }
+        },
+      };
+      const result = (Chart.computed!.maintainers as () => any[]).call(thisContext);
+
+      expect(result).toHaveLength(1);
+      expect(result[0].name).toBe('VersionInfo Maintainer');
+    });
+
+    it('should correctly map all maintainer fields', () => {
+      const thisContext = {
+        version: {
+          maintainers: [
+            {
+              name: 'Full Maintainer', email: 'full@test.com', url: 'http://full.com'
+            }
+          ]
+        },
+        versionInfo: null,
+      };
+      const result = (Chart.computed!.maintainers as () => any[]).call(thisContext);
+      const expected = {
+        id:    'Full Maintainer-0',
+        name:  'Full Maintainer',
+        href:  'http://full.com',
+        label: 'Full Maintainer'
+      };
+
+      expect(result[0]).toStrictEqual(expected);
+    });
+
+    it('should handle maintainers with missing optional fields', () => {
+      const thisContext = {
+        version: {
+          maintainers: [
+            { name: 'No Email Maintainer', url: 'http://noemail.com' },
+            { name: 'No URL Maintainer', email: 'nourl@test.com' },
+            { name: 'Name Only Maintainer' },
+            { url: 'http://noname.com' },
+            { email: 'noname@test.com' }
+          ]
+        },
+        versionInfo: null,
+      };
+      const result = (Chart.computed!.maintainers as () => any[]).call(thisContext);
+
+      expect(result).toHaveLength(5);
+      expect(result[0]).toStrictEqual({
+        id:    'No Email Maintainer-0',
+        name:  'No Email Maintainer',
+        href:  'http://noemail.com',
+        label: 'No Email Maintainer'
+      });
+      expect(result[1]).toStrictEqual({
+        id:    'No URL Maintainer-1',
+        name:  'No URL Maintainer',
+        href:  'mailto:nourl@test.com',
+        label: 'No URL Maintainer'
+      });
+      expect(result[2]).toStrictEqual({
+        id:    'Name Only Maintainer-2',
+        name:  'Name Only Maintainer',
+        href:  null,
+        label: 'Name Only Maintainer'
+      });
+      expect(result[3]).toStrictEqual({
+        id:    'undefined-3',
+        name:  undefined,
+        href:  'http://noname.com',
+        label: 'http://noname.com'
+      });
+      expect(result[4]).toStrictEqual({
+        id:    'undefined-4',
+        name:  undefined,
+        href:  'mailto:noname@test.com',
+        label: 'noname@test.com'
+      });
+    });
+  });
+});