@rancher/shell 3.0.12-rc.3 → 3.0.12-rc.5

package/models/workload.js

@@ -1,15 +1,16 @@
 import { findBy, insertAt } from '@shell/utils/array';
 import { CATTLE_PUBLIC_ENDPOINTS } from '@shell/config/labels-annotations';
-import { WORKLOAD_TYPES, SERVICE, POD } from '@shell/config/types';
+import { WORKLOAD_TYPES, SERVICE, INGRESS, POD } from '@shell/config/types';
 import { set } from '@shell/utils/object';
 import day from 'dayjs';
-import { convertSelectorObj, parse, matches } from '@shell/utils/selector';
+import { convertSelectorObj, parse, matches, convert } from '@shell/utils/selector';
 import { SEPARATOR } from '@shell/config/workload';
 import WorkloadService from '@shell/models/workload.service';
 import { matching } from '@shell/utils/selector-typed';
 import { defineAsyncComponent, markRaw } from 'vue';
 import { useResourceCardRow } from '@shell/components/Resource/Detail/Card/StateCard/composables';
 import { colorForState as colorForStateFn, stateDisplay as stateDisplayFn } from '@shell/plugins/dashboard-store/resource-class';
+import { POD_SHELL } from '@shell/store/features';
 
 export const defaultContainer = {
   imagePullPolicy: 'Always',
@@ -28,6 +29,7 @@ export default class Workload extends WorkloadService {
   get _availableActions() {
     let out = super._availableActions;
     const type = this._type ? this._type : this.type;
+    const podShellFeatureEnabled = !!this.$rootGetters['features/get'](POD_SHELL);
 
     const editYaml = findBy(out, 'action', 'goToEditYaml');
     const index = editYaml ? out.indexOf(editYaml) : 0;
@@ -76,13 +78,16 @@ export default class Workload extends WorkloadService {
 
     insertAt(out, 0, { divider: true }) ;
 
-    insertAt(out, 0, {
-      action:  'openShell',
-      enabled: !!this.links.view,
-      icon:    'icon icon-chevron-right',
-      label:   this.t('action.openShell'),
-      total:   1,
-    });
+    // Only add the menu item for the pod shell if the feature flag is enabled
+    if (podShellFeatureEnabled) {
+      insertAt(out, 0, {
+        action:  'openShell',
+        enabled: !!this.links.view,
+        icon:    'icon icon-chevron-right',
+        label:   this.t('action.openShell'),
+        total:   1,
+      });
+    }
 
     const toFilter = ['cloneYaml'];
 
@@ -586,6 +591,29 @@ export default class Workload extends WorkloadService {
     return undefined;
   }
 
+  async fetchSummaries() {
+    const summaries = { pods: null };
+
+    try {
+      if (this.podMatchExpression) {
+        summaries.pods = await this.$dispatch('fetchResourceSummary', {
+          type: POD,
+          opt:  {
+            summaryField:  'metadata.state.name',
+            namespace:     this.metadata.namespace,
+            labelSelector: { matchExpressions: this.podMatchExpression },
+          }
+        });
+      }
+    } catch (e) {
+      console.warn('fetchSummaries: failed to fetch pod summary', e); // eslint-disable-line no-console
+    }
+
+    set(this, '_summaries', summaries);
+
+    return summaries;
+  }
+
   async unWatchPods() {
     return await this.$dispatch('unwatch', { type: POD, all: true });
   }
@@ -747,16 +775,70 @@ export default class Workload extends WorkloadService {
   }
 
   get relatedServices() {
-    // Find Services that have selectors that match this workload's Pod(s).
+    if (this.type === WORKLOAD_TYPES.JOB || this.type === WORKLOAD_TYPES.CRON_JOB) {
+      return [];
+    }
+
+    const podTemplateLabels = this.spec?.template?.metadata?.labels;
+
+    if (!podTemplateLabels || Object.keys(podTemplateLabels).length === 0) {
+      return [];
+    }
+
+    const templateAsObj = { metadata: { labels: podTemplateLabels } };
+
     return this.servicesInNamespace.filter((service) => {
       const selector = service.spec.selector;
 
-      for (let i = 0; i < this.pods.length; i++) {
-        const pod = this.pods[i];
+      if (!selector || typeof selector !== 'object') {
+        return false;
+      }
 
-        if (service.metadata?.namespace === this.metadata?.namespace && matches(pod, selector)) {
-          return true;
+      return matches(templateAsObj, convert(selector));
+    });
+  }
+
+  get matchingIngresses() {
+    const allIngresses = this.$rootGetters['cluster/all'](INGRESS);
+    const services = this.relatedServices;
+
+    if (!services.length) {
+      return [];
+    }
+
+    return allIngresses.filter((ingress) => {
+      try {
+        const rules = ingress.spec?.rules;
+
+        if (!rules || !Array.isArray(rules)) {
+          return false;
         }
+
+        for (const rule of rules) {
+          const paths = rule?.http?.paths;
+
+          if (!paths || !Array.isArray(paths)) {
+            continue;
+          }
+
+          for (const pathData of paths) {
+            const targetServiceName = pathData?.backend?.service?.name;
+
+            if (!targetServiceName) {
+              continue;
+            }
+
+            for (const service of services) {
+              if (ingress.metadata?.namespace === this.metadata?.namespace && service?.metadata?.name === targetServiceName) {
+                return true;
+              }
+            }
+          }
+        }
+      } catch (err) {
+        console.warn(`matchingIngresses: failed to match ingress "${ ingress.id }"`, err); // eslint-disable-line no-console
+
+        return false;
       }
 
       return false;
@@ -764,10 +846,23 @@ export default class Workload extends WorkloadService {
   }
 
   get resourcesCardRows() {
-    return [
-      useResourceCardRow(this.t('component.resource.detail.card.resourcesCard.rows.services'), this.relatedServices, undefined, undefined, '#services'),
-      ...this._resourcesCardRows,
-    ];
+    const rows = [...this._resourcesCardRows];
+    const showsIngressesAndServices = this.type !== WORKLOAD_TYPES.JOB && this.type !== WORKLOAD_TYPES.CRON_JOB;
+
+    if (showsIngressesAndServices) {
+      const services = this.relatedServices || [];
+      const ingresses = this.matchingIngresses || [];
+
+      if (ingresses.length) {
+        rows.unshift(useResourceCardRow(this.t('component.resource.detail.card.resourcesCard.rows.ingresses'), ingresses, undefined, undefined, '#ingresses'));
+      }
+
+      if (services.length) {
+        rows.unshift(useResourceCardRow(this.t('component.resource.detail.card.resourcesCard.rows.services'), services, undefined, undefined, '#services'));
+      }
+    }
+
+    return rows;
   }
 
   get podsCard() {
@@ -779,8 +874,11 @@ export default class Workload extends WorkloadService {
 
     const scalingTypes = [WORKLOAD_TYPES.DEPLOYMENT, WORKLOAD_TYPES.STATEFUL_SET];
     const canScale = this.canUpdate && scalingTypes.includes(this.type);
+    const summaryData = this._summaries?.pods || null;
+    const hasPods = this.pods?.length > 0;
+    const hasSummary = summaryData?.count > 0;
 
-    if (!this.pods || (this.pods.length === 0 && !canScale)) {
+    if (!hasPods && !hasSummary && !canScale) {
       return null;
     }
 
@@ -789,6 +887,7 @@ export default class Workload extends WorkloadService {
       props:     {
         title:              this.t('component.resource.detail.card.podsCard.title'),
         resources:          this.pods,
+        summaryData,
         showScaling:        canScale,
         onIncrease:         () => this.scale(true),
         onDecrease:         () => this.scale(false),
@@ -818,8 +917,9 @@ export default class Workload extends WorkloadService {
     return [
       this.podsCard,
       this.jobsCard,
+      this.resourcesCard,
       this.insightCard,
       ...this._cards
-    ];
+    ].filter((c) => c);
   }
 }

package/models/workload.service.js

@@ -5,8 +5,13 @@ import { WORKLOAD_TYPES, SERVICE } from '@shell/config/types';
 import { clone, get } from '@shell/utils/object';
 import SteveModel from '@shell/plugins/steve/steve-class';
 import { shortenedImage } from '@shell/utils/string';
+import { stateDisplay } from '@shell/plugins/dashboard-store/resource-class';
 
 export default class WorkloadService extends SteveModel {
+  get stateDisplay() {
+    return stateDisplay(this.state, true);
+  }
+
   async getPortsWithServiceType() {
     const ports = [];
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.12-rc.3",
+  "version": "3.0.12-rc.5",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancher/dashboard",
   "license": "Apache-2.0",
@@ -33,13 +33,14 @@
     "@babel/preset-typescript": "7.16.7",
     "@novnc/novnc": "1.2.0",
     "@popperjs/core": "2.11.8",
-    "@rancher/icons": "2.0.60",
+    "@rancher/icons": "2.0.62",
     "@smithy/fetch-http-handler": "5.1.1",
     "@types/is-url": "1.2.30",
     "@types/node": "25.3.3",
     "@types/semver": "^7.5.8",
     "@typescript-eslint/eslint-plugin": "5.62.0",
     "@typescript-eslint/parser": "5.62.0",
+    "@vee-validate/zod": "4.15.0",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-typescript": "~5.0.0",
     "@vue/cli-service": "5.0.8",
@@ -47,7 +48,7 @@
     "@vue/vue3-jest": "27.0.0",
     "add": "2.0.6",
     "ansi_up": "5.0.0",
-    "axios": "1.15.2",
+    "axios": "1.16.0",
     "axios-retry": "3.1.9",
     "babel-eslint": "10.1.0",
     "babel-preset-vue": "2.0.2",
@@ -80,14 +81,13 @@
     "eslint-plugin-n": "15.2.0",
     "eslint-plugin-vue": "9.32.0",
     "event-target-shim": "5.0.1",
-    "express": "4.17.1",
-    "file-saver": "2.0.2",
+    "express": "4.22.2",
+    "file-saver": "2.0.5",
     "floating-vue": "5.2.2",
     "focus-trap": "7.6.5",
     "frontmatter-markdown-loader": "3.7.0",
     "identicon.js": "2.3.3",
     "intl-messageformat": "7.8.4",
-    "ip": "2.0.1",
     "is-url": "1.2.4",
     "jest": "27.5.1",
     "jest-serializer-vue": "2.0.2",
@@ -124,12 +124,13 @@
     "webpack-virtual-modules": "0.6.2",
     "worker-loader": "3.0.8",
     "xmlbuilder2": "4.0.1",
-    "xterm": "5.2.1",
-    "xterm-addon-canvas": "0.5.0",
-    "xterm-addon-fit": "0.8.0",
-    "xterm-addon-search": "0.13.0",
-    "xterm-addon-web-links": "0.9.0",
-    "xterm-addon-webgl": "0.16.0",
+    "zod": "3.24.3",
+    "@xterm/xterm": "6.0.0",
+    "@xterm/addon-fit": "0.11.0",
+    "@xterm/addon-search": "0.16.0",
+    "@xterm/addon-web-links": "0.12.0",
+    "@xterm/addon-webgl": "0.19.0",
+    "@xterm/addon-canvas": "0.7.0",
     "yarn": "1.22.22"
   },
   "resolutions": {
@@ -142,7 +143,7 @@
     "merge": "2.1.1",
     "node-forge": "1.3.1",
     "nth-check": "2.1.1",
-    "qs": "6.11.1",
+    "qs": "6.15.2",
     "roarr": "7.0.4",
     "semver": "7.5.4",
     "@types/lodash": "4.17.5",

package/pages/about.vue

@@ -10,10 +10,11 @@ import TabTitle from '@shell/components/TabTitle';
 import { PanelLocation, ExtensionPoint } from '@shell/core/types';
 import ExtensionPanel from '@shell/components/ExtensionPanel';
 import { getVersionInfo } from '@shell/utils/version';
+import { RcButton } from '@components/RcButton';
 
 export default {
   components: {
-    BackLink, ExtensionPanel, Loading, TabTitle
+    BackLink, ExtensionPanel, Loading, TabTitle, RcButton
   },
   mixins: [BackRoute],
   async fetch() {
@@ -85,16 +86,14 @@ export default {
           {{ t('about.title') }}
         </TabTitle>
       </h1>
-      <router-link
+      <rc-button
+        size="large"
         :to="{ name: 'diagnostic' }"
-        class="btn role-primary"
         data-testid="about__diagnostics_button"
-        role="button"
         :aria-label="t('about.diagnostic.title')"
-        @keyup.space="$router.push({ name: 'diagnostic' })"
       >
         {{ t('about.diagnostic.title') }}
-      </router-link>
+      </rc-button>
     </div>
     <!-- Extensions area -->
     <ExtensionPanel

package/pages/auth/login.vue

@@ -410,41 +410,6 @@ export default {
             k="setup.defaultPassword.intro"
             :raw="true"
           />
-
-          <div>
-            <t
-              k="setup.defaultPassword.dockerPrefix"
-              :raw="true"
-            />
-          </div>
-          <ul>
-            <li>
-              <t
-                k="setup.defaultPassword.dockerPs"
-                :raw="true"
-              />
-            </li>
-            <li>
-              <CopyCode>
-                docker logs <u>container-id</u> 2&gt;&amp;1 | grep "Bootstrap Password:"
-              </CopyCode>
-            </li>
-          </ul>
-          <div>
-            <t
-              k="setup.defaultPassword.dockerSuffix"
-              :raw="true"
-            />
-          </div>
-
-          <br>
-          <div>
-            <t
-              k="setup.defaultPassword.helmPrefix"
-              :raw="true"
-            />
-          </div>
-          <br>
           <CopyCode>
             {{ kubectlCmd }}
           </CopyCode>

package/pages/auth/setup.vue

@@ -20,6 +20,7 @@ import FormValidation from '@shell/mixins/form-validation';
 import { isLocalhost, isValidUrl } from '@shell/utils/validators/setting';
 import Loading from '@shell/components/Loading';
 import { getBrandMeta } from '@shell/utils/brand';
+import { findMe } from '@shell/utils/auth';
 
 const calcIsFirstLogin = (store) => {
   const firstLoginSetting = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.FIRST_LOGIN);
@@ -77,6 +78,16 @@ export default {
       // Always show setup if this is the first log in
       return;
     } else if (mustChangePassword) {
+      // Skip password change for non-local sessions
+      try {
+        const me = await findMe(this.$store);
+
+        if (me && me.provider !== 'local') {
+          return this.$router.replace('/');
+        }
+      } catch (e) {
+      }
+
       // If the password needs changing and this isn't the first log in ensure we have the password
       if (!!this.$store.getters['auth/initialPass']) {
         // Got it... show setup

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

@@ -3,7 +3,7 @@ import { reactive } from 'vue';
 import { RcItemCardAction } from '@components/RcItemCard';
 import { RcButton } from '@components/RcButton';
 import { isTruncated } from '@shell/utils/style';
-import RcIcon from '@components/RcIcon/RcIcon.vue';
+import { RcIcon } from '@components/RcIcon';
 import type { RcIconType } from '@components/RcIcon/types';
 
 interface FooterItem {
@@ -195,7 +195,7 @@ function getTooltip(key: string, fallback?: string): string | undefined {
   }
 }
 
-button.variant-ghost.app-chart-card-footer-button {
+button.rc-button.variant-ghost.app-chart-card-footer-button {
   padding: 0;
   gap: 0;
   min-height: 20px;

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

@@ -9,12 +9,16 @@ interface SubHeaderItem {
 
 defineProps<{
   items: SubHeaderItem[];
+  removeMarginBottom?: boolean;
 }>();
 
 </script>
 
 <template>
-  <div class="app-chart-card-sub-header">
+  <div
+    class="app-chart-card-sub-header"
+    :class="{ 'no-margin-bottom': removeMarginBottom }"
+  >
     <div
       v-for="(subHeaderItem, i) in items"
       :key="i"
@@ -38,8 +42,13 @@ defineProps<{
   flex-wrap: wrap;
   gap: var(--gap) var(--gap-md);
   color: var(--link-text-secondary);
+  height: 22px;
   margin-bottom: 8px;
 
+  &.no-margin-bottom {
+    margin-bottom: 0;
+  }
+
   &-item {
     display: flex;
     align-items: center;

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

@@ -52,4 +52,97 @@ describe('page: Charts Index', () => {
       expect(hasExtensionCategory).toBe(false);
     });
   });
+
+  describe('method: loadMore', () => {
+    const createContext = (overrides: Record<string, any> = {}) => ({
+      isLoadingMore:             false,
+      visibleChartsCount:        30,
+      initialVisibleChartsCount: 30,
+      filteredCharts:            new Array(100),
+      _loadMoreTimer:            null,
+      $nextTick:                 (cb: () => void) => cb(),
+      ...overrides,
+    });
+
+    beforeEach(() => {
+      jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+
+    it('should set isLoadingMore, then increment visibleChartsCount and clear the flag after the delay', () => {
+      const ctx = createContext();
+
+      (Charts.methods!.loadMore as () => void).call(ctx);
+
+      expect(ctx.isLoadingMore).toBe(true);
+      expect(ctx.visibleChartsCount).toBe(30);
+      expect(ctx._loadMoreTimer).not.toBeNull();
+
+      jest.runAllTimers();
+
+      expect(ctx.visibleChartsCount).toBe(60);
+      expect(ctx.isLoadingMore).toBe(false);
+      expect(ctx._loadMoreTimer).toBeNull();
+    });
+
+    it('should do nothing when already loading', () => {
+      const ctx = createContext({ isLoadingMore: true });
+
+      (Charts.methods!.loadMore as () => void).call(ctx);
+
+      expect(ctx._loadMoreTimer).toBeNull();
+      expect(ctx.visibleChartsCount).toBe(30);
+    });
+
+    it('should do nothing when all charts are already visible', () => {
+      const ctx = createContext({ visibleChartsCount: 100 });
+
+      (Charts.methods!.loadMore as () => void).call(ctx);
+
+      expect(ctx.isLoadingMore).toBe(false);
+      expect(ctx._loadMoreTimer).toBeNull();
+    });
+  });
+
+  describe('method: resetLazyLoadState', () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+
+    it('should reset state and cancel a pending loadMore so visibleChartsCount is not incremented after reset', () => {
+      const ctx: Record<string, any> = {
+        isLoadingMore:             false,
+        visibleChartsCount:        30,
+        initialVisibleChartsCount: 30,
+        observerInitialized:       true,
+        hasOverflow:               true,
+        filteredCharts:            new Array(100),
+        _loadMoreTimer:            null,
+        $nextTick:                 (cb: () => void) => cb(),
+      };
+
+      (Charts.methods!.loadMore as () => void).call(ctx);
+      expect(ctx._loadMoreTimer).not.toBeNull();
+
+      (Charts.methods!.resetLazyLoadState as () => void).call(ctx);
+
+      expect(ctx.visibleChartsCount).toBe(30);
+      expect(ctx.observerInitialized).toBe(false);
+      expect(ctx.hasOverflow).toBe(false);
+      expect(ctx.isLoadingMore).toBe(false);
+      expect(ctx._loadMoreTimer).toBeNull();
+
+      jest.runAllTimers();
+
+      // The cancelled timer must not have fired — count stays at the reset value.
+      expect(ctx.visibleChartsCount).toBe(30);
+    });
+  });
 });