@rancher/shell 3.0.6 → 3.0.8-rc.1

package/edit/provisioning.cattle.io.cluster/tabs/AddOnConfig.vue

@@ -48,6 +48,27 @@ export default {
     initYamlEditor: {
       type:     Function,
       required: true,
+    },
+    /**
+     * Indicates if a configuration conflict was detected for this addon.
+     */
+    hasDiff: {
+      type:    Boolean,
+      default: false
+    },
+    /**
+     * The Kubernetes version the user is upgrading from.
+     */
+    previousKubeVersion: {
+      type:    String,
+      default: ''
+    },
+    /**
+     * The Kubernetes version the user is upgrading to.
+     */
+    newKubeVersion: {
+      type:    String,
+      default: ''
     }
 
   },
@@ -73,10 +94,15 @@ export default {
 <template>
   <div>
     <Banner
-      v-if="isEdit"
+      v-if="isEdit && hasDiff"
       color="warning"
     >
-      {{ t('cluster.addOns.dependencyBanner') }}
+      <span
+        v-clean-html="t('cluster.addOns.dependencyBanner', {
+          previousKubeVersion,
+          newKubeVersion
+        }, true)"
+      />
     </Banner>
     <div
       v-if="versionInfo && addonVersion"

package/list/projectsecret.vue

@@ -199,7 +199,7 @@ export default {
         }
 
         // Filter in if this cluster
-        if (metadata.namespace.startsWith(this.currentCluster.id)) {
+        if (metadata.namespace?.startsWith(this.currentCluster.id)) {
           return true;
         }
 

package/machine-config/azure.vue

@@ -35,7 +35,7 @@ const defaultConfig = {
   dns:                   '',
   environment:           'AzurePublicCloud',
   faultDomainCount:      '3',
-  image:                 'canonical:UbuntuServer:18.04-LTS:latest',
+  image:                 'canonical:ubuntu-24_04-lts:server-gen1:latest',
   location:              'westus',
   managedDisks:          false,
   noPublicIp:            false,

package/mixins/__tests__/chart.test.ts

@@ -213,7 +213,7 @@ describe('chartMixin', () => {
       });
 
       expect(wrapper.vm.action).toStrictEqual({
-        name: 'upgradeVersion',
+        name: 'upgrade',
         tKey: 'upgrade',
         icon: 'icon-upgrade-alt',
       });

package/mixins/chart.js

@@ -220,7 +220,7 @@ export default {
     },
 
     currentVersion() {
-      return this.existing?.spec.chart.metadata.version;
+      return this.existing?.spec?.chart?.metadata?.version;
     },
 
     targetVersion() {
@@ -242,7 +242,7 @@ export default {
 
       if (compare(this.currentVersion, this.targetVersion) < 0) {
         return {
-          name: 'upgradeVersion', tKey: 'upgrade', icon: 'icon-upgrade-alt'
+          name: 'upgrade', tKey: 'upgrade', icon: 'icon-upgrade-alt'
         };
       }
 

package/models/__tests__/chart.test.ts

@@ -12,9 +12,9 @@ type MockChartContext = {
 };
 
 interface CardContent {
-  subHeaderItems: { label: string }[];
+  subHeaderItems: { label: string, labelTooltip?: string}[];
   footerItems: { labels: string[]; icon?: string }[];
-  statuses: { tooltip: { key: string }; color: string }[];
+  statuses: { tooltip: { key?: string; text?: string }; color: string }[];
 }
 
 const t = jest.fn((key) => key); // mock translation function
@@ -225,7 +225,7 @@ describe('class Chart', () => {
 
       const result = chart.cardContent as CardContent;
 
-      const deprecatedStatus = result.statuses.find((s) => s.tooltip.key === 'generic.deprecated');
+      const deprecatedStatus = result.statuses.find((s) => s.tooltip?.key === 'generic.deprecated');
 
       expect(deprecatedStatus).toBeDefined();
       expect(deprecatedStatus?.color).toBe('error');
@@ -240,10 +240,11 @@ describe('class Chart', () => {
 
       const result = chart.cardContent as CardContent;
 
-      const installedStatus = result.statuses.find((s) => s.tooltip.key === 'generic.installed');
+      const installedStatus = result.statuses.find((s) => s.tooltip?.text?.startsWith('generic.installed'));
 
       expect(installedStatus).toBeDefined();
       expect(installedStatus?.color).toBe('success');
+      expect(installedStatus?.tooltip?.text).toContain(installedApp.spec.chart.metadata.version);
     });
 
     it('includes upgradeable status when upgrade is available', () => {
@@ -255,7 +256,7 @@ describe('class Chart', () => {
 
       const result = chart.cardContent as CardContent;
 
-      const upgradeableStatus = result.statuses.find((s) => s.tooltip.key === 'generic.upgradeable');
+      const upgradeableStatus = result.statuses.find((s) => s.tooltip?.key === 'generic.upgradeable');
 
       expect(upgradeableStatus).toBeDefined();
       expect(upgradeableStatus?.color).toBe('info');
@@ -270,9 +271,16 @@ describe('class Chart', () => {
 
       const result = chart.cardContent as CardContent;
 
-      const keys = result.statuses.map((s) => s.tooltip.key);
+      const statuses = result.statuses.map((s) => {
+        if (s.tooltip?.key) {
+          return s.tooltip.key;
+        }
+        if (s.tooltip?.text?.startsWith('generic.installed')) {
+          return 'generic.installed';
+        }
+      });
 
-      expect(keys).toStrictEqual(expect.arrayContaining([
+      expect(statuses).toStrictEqual(expect.arrayContaining([
         'generic.deprecated',
         'generic.upgradeable',
         'generic.installed'
@@ -290,11 +298,11 @@ describe('class Chart', () => {
       const chart = new Chart(chartWithZeroTime, {
         rootGetters: {
           'cluster/all': () => [],
-          'i18n/t':      (key) => key
+          'i18n/t':      (key: string) => key
         },
       });
 
-      const result = chart.cardContent;
+      const result = chart.cardContent as CardContent;
       const lastUpdatedItem = result.subHeaderItems[1];
 
       expect(lastUpdatedItem.label).toBe('generic.na');

package/models/__tests__/compliance.cattle.io.clusterscanprofile.spec.js

@@ -0,0 +1,30 @@
+import ComplianceProfile from '@shell/models/compliance.cattle.io.clusterscanprofile';
+
+describe('class: ComplianceProfile', () => {
+  describe('getter: numberTestsSkipped', () => {
+    it('should return 0 if skipTests is not present in spec', () => {
+      const complianceProfile = new ComplianceProfile({ spec: {} });
+
+      expect(complianceProfile.numberTestsSkipped).toBe(0);
+    });
+
+    it('should return 0 if skipTests is null', () => {
+      const complianceProfile = new ComplianceProfile({ spec: { skipTests: null } });
+
+      expect(complianceProfile.numberTestsSkipped).toBe(0);
+    });
+
+    it('should return 0 if skipTests is an empty array', () => {
+      const complianceProfile = new ComplianceProfile({ spec: { skipTests: [] } });
+
+      expect(complianceProfile.numberTestsSkipped).toBe(0);
+    });
+
+    it('should return the correct number of skipped tests', () => {
+      const tests = ['test-1', 'test-2', 'test-3'];
+      const complianceProfile = new ComplianceProfile({ spec: { skipTests: tests } });
+
+      expect(complianceProfile.numberTestsSkipped).toBe(tests.length);
+    });
+  });
+});

package/models/catalog.cattle.io.app.js

@@ -323,7 +323,7 @@ export default class CatalogApp extends SteveModel {
 
   get relatedResourcesToRemove() {
     return async() => {
-      const crd = this.spec.chart.metadata.annotations[CATALOG_ANNOTATIONS.AUTO_INSTALL].replace('=match', '');
+      const crd = this.spec?.chart?.metadata?.annotations?.[CATALOG_ANNOTATIONS.AUTO_INSTALL]?.replace('=match', '');
 
       return await this.$dispatch('find', {
         type: CATALOG.APP,

package/models/chart.js

@@ -195,8 +195,10 @@ export default class Chart extends SteveModel {
       }
 
       if (this.isInstalled) {
+        const installedVersion = this.matchingInstalledApps[0]?.spec?.chart?.metadata?.version;
+
         statuses.push({
-          icon: 'icon-confirmation-alt', color: 'success', tooltip: { key: 'generic.installed' }
+          icon: 'icon-confirmation-alt', color: 'success', tooltip: { text: `${ this.t('generic.installed') } (${ installedVersion })` }
         });
       }
 

package/models/compliance.cattle.io.clusterscanprofile.js

@@ -11,7 +11,7 @@ export default class ComplianceProfile extends SteveModel {
   get numberTestsSkipped() {
     const { skipTests = [] } = this.spec;
 
-    return skipTests.length;
+    return skipTests?.length || 0;
   }
 
   get benchmarkVersionLink() {

package/models/event.js

@@ -25,6 +25,13 @@ export default class K8sEvent extends SteveModel {
     return this._type;
   }
 
+  get firstSeen() {
+    const schema = this.$getters['schemaFor'](this.type);
+    const rowValueGetter = this.$rootGetters['type-map/rowValueGetter'];
+
+    return schema && rowValueGetter ? rowValueGetter(schema, 'First Seen')(this) : null;
+  }
+
   get lastSeen() {
     const schema = this.$getters['schemaFor'](this.type);
     const rowValueGetter = this.$rootGetters['type-map/rowValueGetter'];

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

@@ -14,6 +14,7 @@ export const configType = {
   googleoauth:     'oauth',
   local:           '',
   github:          'oauth',
+  githubapp:       'oauth',
   keycloakoidc:    'oidc',
   genericoidc:     'oidc',
   cognito:         'oidc',

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

@@ -391,6 +391,15 @@ export default class ProvCluster extends SteveModel {
       const pCluster = this.$rootGetters['management/byId'](CAPI.RANCHER_CLUSTER, this.id);
       const name = this.status?.clusterName || pCluster?.status?.clusterName;
 
+      try {
+        if (name) {
+          // Just in case we're not generically watching all mgmt clusters and...
+          // thus won't receive new mgmt cluster over socket...
+          // fire and forget a request to fetch it (this won't make multiple requests if one is already running)
+          this.$dispatch('find', { type: MANAGEMENT.CLUSTER, id: name });
+        }
+      } catch {}
+
       return name && !!this.$rootGetters['management/byId'](MANAGEMENT.CLUSTER, name);
     }, this.$rootGetters['i18n/t']('cluster.managementTimeout'), timeout, interval);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.6",
+  "version": "3.0.8-rc.1",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
@@ -38,7 +38,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.49",
     "@types/is-url": "1.2.30",
     "@types/node": "20.10.8",
     "@types/semver": "^7.5.8",

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';
@@ -47,6 +47,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 +68,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');

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/chart.vue

@@ -259,11 +259,11 @@ export default {
               class="status"
             >
               <i
-                v-clean-tooltip="t(status.tooltip.key)"
+                v-clean-tooltip="status.tooltip.key ? t(status.tooltip.key) : status.tooltip.text"
                 :class="['icon', status.icon, status.color]"
                 :style="{color: status.customColor}"
                 role="img"
-                :aria-label="t(status.tooltip.key)"
+                :aria-label="status.tooltip.key ? t(status.tooltip.key) : status.tooltip.text"
               />
             </div>
           </div>

package/pages/c/_cluster/explorer/EventsTable.vue

@@ -3,9 +3,11 @@
 import { MESSAGE, NAME, OBJECT, REASON } from '@shell/config/table-headers';
 import { EVENT } from '@shell/config/types';
 import PaginatedResourceTable from '@shell/components/PaginatedResourceTable';
-import { STEVE_EVENT_OBJECT, STEVE_NAME_COL } from '@shell/config/pagination-table-headers';
+import { STEVE_EVENT_FIRST_SEEN, STEVE_EVENT_LAST_SEEN, STEVE_EVENT_OBJECT, STEVE_NAME_COL } from '@shell/config/pagination-table-headers';
 import { headerFromSchemaColString } from '@shell/store/type-map.utils';
 import { NAME as EXPLORER } from '@shell/config/product/explorer';
+import { ROWS_PER_PAGE } from '@shell/store/prefs';
+import { RcDropdown, RcDropdownTrigger, RcDropdownItem } from '@components/RcDropdown';
 
 const reason = {
   ...REASON,
@@ -29,15 +31,42 @@ const eventHeaders = [
   },
 ];
 
+// Local storage key for the events table row count preference
+const ROWS_COUNT_PREF = 'events-row-count-pref';
+// Value to use when we want to use the user's preference from the table
+const ROWS_PREF_USE_TABLE = -1;
+// Default number of rows to show in the events table when not set in the preference
+const ROWS_COUNT_DEFAULT = 10;
+
 export default {
-  components: { PaginatedResourceTable },
+  components: {
+    PaginatedResourceTable,
+    RcDropdown,
+    RcDropdownItem,
+    RcDropdownTrigger
+  },
 
   data() {
+    const tableRowOptions = this.$store.getters['prefs/options'](ROWS_PER_PAGE);
+
+    let rowsPerPage = ROWS_COUNT_DEFAULT;
+
+    // Read the current value from localStorage if it exists
+    if (window.localStorage.getItem(ROWS_COUNT_PREF)) {
+      try {
+        rowsPerPage = parseInt(window.localStorage.getItem(ROWS_COUNT_PREF));
+      } catch (e) {
+        console.error('Error parsing rows count from localStorage:', e); // eslint-disable-line no-console
+      }
+    }
+
     return {
+      rowsPerPage,
       schema:            null,
       events:            [],
       eventHeaders,
       paginationHeaders: null,
+      options:           tableRowOptions || [],
       allEventsLink:     {
         name:   'c-cluster-product-resource',
         params: {
@@ -59,11 +88,8 @@ export default {
         ...STEVE_NAME_COL,
         defaultSort: false,
       },
-      headerFromSchemaColString('First Seen', schema, this.$store.getters, true),
-      {
-        ...headerFromSchemaColString('Last Seen', schema, this.$store.getters, true),
-        defaultSort: true,
-      },
+      STEVE_EVENT_FIRST_SEEN,
+      STEVE_EVENT_LAST_SEEN,
       headerFromSchemaColString('Count', schema, this.$store.getters, true),
     ] : [];
 
@@ -75,7 +101,34 @@ export default {
     this.dismissRouteHandler = this.$router.beforeEach(this.onRouteChange);
   },
 
+  computed: {
+    userPrefRowsPerPage() {
+      return parseInt(this.$store.getters['prefs/get'](ROWS_PER_PAGE), 10) || undefined;
+    },
+    rowOptions() {
+      const rowOptions = [];
+
+      this.options.forEach((item) => rowOptions.push({
+        label: this.t('glance.showXEvents', { count: item }),
+        value: item
+      }));
+
+      if (this.userPrefRowsPerPage) {
+        rowOptions.push({
+          label: this.t('glance.useUserPreference', { count: this.userPrefRowsPerPage }),
+          value: ROWS_PREF_USE_TABLE,
+        });
+      }
+
+      return rowOptions;
+    }
+  },
+
   methods: {
+    updateRowsCount(val) {
+      this.rowsPerPage = val;
+      window.localStorage.setItem(ROWS_COUNT_PREF, val);
+    },
     async onRouteChange(to, from, next) {
       if (this.$route.name !== to.name) {
         await this.$store.dispatch('cluster/forgetType', EVENT);
@@ -103,7 +156,7 @@ export default {
     :table-actions="false"
     :row-actions="false"
     :groupable="false"
-    :rows-per-page="10"
+    :rows-per-page="rowsPerPage"
   >
     <template v-slot:header-right>
       <router-link
@@ -113,14 +166,44 @@ export default {
       >
         <span>{{ t('glance.eventsTable') }}</span>
       </router-link>
+      <rc-dropdown>
+        <rc-dropdown-trigger
+          data-testid="events-list-row-count-menu-toggle"
+          :aria-label="t('glance.changeEventsListRowCount')"
+          ghost
+          small
+        >
+          <i class="icon icon-gear" />
+        </rc-dropdown-trigger>
+        <template #dropdownCollection>
+          <rc-dropdown-item
+            v-for="(item, i) in rowOptions"
+            :key="i"
+            :value="item.value"
+            @click.stop="updateRowsCount(item.value)"
+          >
+            <span :class="{ 'selected-pagesize-option': rowsPerPage === item.value }">
+              {{ item.label }}
+            </span>
+          </rc-dropdown-item>
+        </template>
+      </rc-dropdown>
     </template>
   </PaginatedResourceTable>
 </template>
 
 <style lang="scss" scoped>
+.icon.icon-gear {
+  color: var(--primary);
+  padding: 0 8px;
+}
 .events-link {
   align-self: center;
-  padding-right: 20px;
+  margin-right: 10px;
   white-space: nowrap;
 }
+
+.selected-pagesize-option {
+  font-weight: bold;
+}
 </style>

package/pages/c/_cluster/explorer/tools/index.vue

@@ -96,7 +96,7 @@ export default {
             title:    { text: chart.chartNameDisplay },
             statuses: chart.cardContent.statuses
           },
-          subHeaderItems: chart.cardContent.subHeaderItems.slice(0, 1),
+          subHeaderItems: chart.cardContent.subHeaderItems,
           footerItems:    chart.deploysOnWindows ? [{
             icon:        'icon-tag-alt',
             iconTooltip: { key: 'generic.tags' },
@@ -151,7 +151,7 @@ export default {
           action: 'edit',
         });
 
-        const currentVersion = installedApp.spec.chart.metadata.version;
+        const currentVersion = installedApp.spec?.chart?.metadata?.version;
         const versions = rawChart.versions;
         const currentIndex = versions.findIndex((v) => v.version === currentVersion);
 
@@ -190,7 +190,7 @@ export default {
     },
 
     downgrade(app, chart) {
-      const currentVersion = app.spec.chart.metadata.version;
+      const currentVersion = app.spec?.chart?.metadata?.version;
       const versions = chart.versions;
       const currentIndex = versions.findIndex((v) => v.version === currentVersion);
 

package/pages/c/_cluster/settings/performance.vue

@@ -76,6 +76,13 @@ export default {
           resource: MANAGEMENT.FEATURE
         }
       }).href,
+      settingsPageUrl: this.$router.resolve({
+        name:   'c-cluster-product-resource',
+        params: {
+          product:  SETTING_PRODUCT,
+          resource: MANAGEMENT.SETTING
+        }
+      }).href,
       ssPApplicableTypesOpen: false,
     };
   },
@@ -105,7 +112,7 @@ export default {
         if (settings.resources.enableAll) {
           resources.push(this.t('performance.serverPagination.resources.all'));
         } else {
-          settings.resources.enableSome.enabled.forEach((resource) => {
+          settings.resources.enableSome.enabled?.forEach((resource) => {
             resources.push(!!resource.length ? resource : `${ resource.resource } (${ resource.context })`);
           });
           if (settings.resources.enableSome.generic) {
@@ -206,31 +213,11 @@ export default {
         <!-- Inactivity -->
         <div class="mt-20">
           <h2>{{ t('performance.inactivity.title') }}</h2>
-          <p>{{ t('performance.inactivity.description') }}</p>
-          <Checkbox
-            v-model:value="value.inactivity.enabled"
-            :mode="mode"
-            :label="t('performance.inactivity.checkboxLabel')"
-            class="mt-10 mb-20"
-            :primary="true"
-          />
-          <div class="ml-20">
-            <LabeledInput
-              v-model:value="value.inactivity.threshold"
-              data-testid="inactivity-threshold"
-              :mode="mode"
-              :label="t('performance.inactivity.inputLabel')"
-              :disabled="!value.inactivity.enabled"
-              class="input mb-10"
-              type="number"
-              min="0"
-              :rules="[validateInactivityThreshold]"
-            />
-            <span
-              v-clean-html="t('performance.inactivity.information', {}, true)"
-              :class="{ 'text-muted': !value.incrementalLoading.enabled }"
-            />
-          </div>
+          <Banner
+            color="warning"
+          >
+            <span v-clean-html="t(`performance.deprecatedInactivitySetting`, { settingsPageUrl }, true)" />
+          </Banner>
         </div>
         <!-- Websocket Notifications -->
         <div class="mt-40">