@rancher/shell 3.0.12-rc.6 → 3.0.12-rc.7

package/pages/c/_cluster/explorer/workload-dashboard/__tests__/composable.test.ts

@@ -1,11 +1,15 @@
 import { useWorkloadDashboard } from '@shell/pages/c/_cluster/explorer/workload-dashboard/composable';
 import { WORKLOAD_RESOURCE_TYPES } from '@shell/pages/c/_cluster/explorer/workload-dashboard/types';
+import { WORKLOAD_TYPES } from '@shell/config/types';
 import { defineComponent, h } from 'vue';
 import { shallowMount, flushPromises } from '@vue/test-utils';
 
+const WORKLOAD_DASHBOARD_ROUTE = 'c-cluster-explorer-workload-dashboard';
+
 const mockGetters: Record<string, any> = {};
 const mockDispatch = jest.fn();
 const mockRouterPush = jest.fn();
+const mockCurrentRoute = { value: { name: WORKLOAD_DASHBOARD_ROUTE } };
 
 jest.mock('vuex', () => ({
   useStore: () => ({
@@ -18,7 +22,7 @@ jest.mock('vuex', () => ({
   }),
 }));
 
-jest.mock('vue-router', () => ({ useRouter: () => ({ push: mockRouterPush }) }));
+jest.mock('vue-router', () => ({ useRouter: () => ({ push: mockRouterPush, currentRoute: mockCurrentRoute }) }));
 
 jest.mock('@shell/composables/useI18n', () => ({ useI18n: () => ({ t: (key: string, args?: Record<string, any>) => `%${ key }%${ args ? JSON.stringify(args) : '' }` }) }));
 
@@ -105,6 +109,7 @@ describe('composable: useWorkloadDashboard', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     setupGetters();
+    mockCurrentRoute.value.name = WORKLOAD_DASHBOARD_ROUTE;
   });
 
   describe('namespaceSubtitle', () => {
@@ -558,4 +563,134 @@ describe('composable: useWorkloadDashboard', () => {
       wrapper.unmount();
     });
   });
+
+  describe('response validation', () => {
+    // The composable caches malformed clusters in a module-level singleton, so each
+    // invalid-data test uses a unique cluster id to stay independent of the others.
+    function deploymentRouteFor(cluster: string) {
+      return {
+        name:   'c-cluster-product-resource',
+        params: {
+          cluster,
+          product:  'explorer',
+          resource: WORKLOAD_TYPES.DEPLOYMENT,
+        },
+      };
+    }
+
+    const malformedSummaryResponse = {
+      summary: [{
+        property: 'metadata.state.name',
+        counts:   { running: { namespace: { default: 5 } } },
+      }],
+      data: [],
+    };
+
+    it('should redirect to the deployment page when a count entry is missing total', async() => {
+      const { wrapper } = mountComposable({ clusterId: 'c-missing-total' }, malformedSummaryResponse);
+
+      await flushPromises();
+
+      expect(mockRouterPush).toHaveBeenCalledWith(deploymentRouteFor('c-missing-total'));
+      wrapper.unmount();
+    });
+
+    it('should redirect when the summary is empty but data is present', async() => {
+      const dataWithoutSummaryResponse = { summary: [], data: [{ id: 'pod-1' }] };
+
+      const { wrapper } = mountComposable({ clusterId: 'c-empty-summary-with-data' }, dataWithoutSummaryResponse);
+
+      await flushPromises();
+
+      expect(mockRouterPush).toHaveBeenCalledWith(deploymentRouteFor('c-empty-summary-with-data'));
+      wrapper.unmount();
+    });
+
+    it('should redirect when there is no summary but data is present', async() => {
+      const dataWithoutSummaryResponse = { data: [{ id: 'pod-1' }] };
+
+      const { wrapper } = mountComposable({ clusterId: 'c-no-summary-with-data' }, dataWithoutSummaryResponse);
+
+      await flushPromises();
+
+      expect(mockRouterPush).toHaveBeenCalledWith(deploymentRouteFor('c-no-summary-with-data'));
+      wrapper.unmount();
+    });
+
+    it('should not redirect when every count entry has a total', async() => {
+      const { wrapper } = mountComposable();
+
+      await flushPromises();
+
+      expect(mockRouterPush).not.toHaveBeenCalled();
+      wrapper.unmount();
+    });
+
+    it('should not redirect when the summary is empty and there is no data', async() => {
+      const emptyResponse = { summary: [], data: [] };
+
+      const { wrapper } = mountComposable({}, emptyResponse);
+
+      await flushPromises();
+
+      expect(mockRouterPush).not.toHaveBeenCalled();
+      wrapper.unmount();
+    });
+
+    it('should not redirect when there is no summary and no data', async() => {
+      const noSummaryResponse = { data: [] };
+
+      const { wrapper } = mountComposable({}, noSummaryResponse);
+
+      await flushPromises();
+
+      expect(mockRouterPush).not.toHaveBeenCalled();
+      wrapper.unmount();
+    });
+
+    it('should not redirect for entries returned with an error', async() => {
+      const errorResponse = { summary: null, error: 'No access' };
+
+      const { wrapper } = mountComposable({}, errorResponse);
+
+      await flushPromises();
+
+      expect(mockRouterPush).not.toHaveBeenCalled();
+      wrapper.unmount();
+    });
+
+    it('should not redirect when the user has already navigated away from the dashboard', async() => {
+      // The fetch resolves after the user left the workload dashboard.
+      mockCurrentRoute.value.name = 'c-cluster-product-resource';
+
+      const { wrapper } = mountComposable({ clusterId: 'c-navigated-away' }, malformedSummaryResponse);
+
+      await flushPromises();
+
+      expect(mockRouterPush).not.toHaveBeenCalled();
+      wrapper.unmount();
+    });
+
+    it('should skip fetching and redirect immediately for a cluster already known to be invalid', async() => {
+      const cluster = 'c-cached-invalid';
+
+      // First mount detects the malformed response and caches the cluster.
+      const first = mountComposable({ clusterId: cluster }, malformedSummaryResponse);
+
+      await flushPromises();
+      first.wrapper.unmount();
+
+      jest.clearAllMocks();
+
+      // Second mount returns a valid response, but the cache should short-circuit the
+      // fetch entirely and redirect without ever requesting the summaries again.
+      const second = mountComposable({ clusterId: cluster }, summaryResponse);
+
+      await flushPromises();
+
+      expect(mockDispatch).not.toHaveBeenCalledWith('cluster/request', expect.anything());
+      expect(mockRouterPush).toHaveBeenCalledWith(deploymentRouteFor(cluster));
+      second.wrapper.unmount();
+    });
+  });
 });

package/pages/c/_cluster/explorer/workload-dashboard/composable.ts

@@ -3,7 +3,7 @@ import {
 } from 'vue';
 import { useStore } from 'vuex';
 import { useRouter, type RouteLocationRaw } from 'vue-router';
-import { NAMESPACE } from '@shell/config/types';
+import { NAMESPACE, WORKLOAD_TYPES } from '@shell/config/types';
 import type { StateColor } from '@shell/utils/style';
 import { useI18n } from '@shell/composables/useI18n';
 import { useStateColor } from '@shell/composables/useStateColor';
@@ -26,6 +26,15 @@ import {
   type WorkloadDashboardByNamespaceCard,
 } from './types';
 
+const WORKLOAD_DASHBOARD_ROUTE = 'c-cluster-explorer-workload-dashboard';
+
+/**
+ * Singleton (module-level) cache of cluster ids whose workload summary responses
+ * have been found to be malformed. Once a cluster is flagged we skip re-fetching
+ * and redirect straight away. Held in memory only, so it is cleared on reload.
+ */
+const invalidDataClusters = new Set<string>();
+
 export function useWorkloadDashboard() {
   const store = useStore();
   const router = useRouter();
@@ -344,12 +353,57 @@ export function useWorkloadDashboard() {
 
   // ── Fetching & polling ──
 
+  /**
+   * Validates the shape of a successfully fetched response.
+   * - An empty/absent summary is only valid when there is also no `data`
+   *   (a populated `data` with no summary means we got the wrong response).
+   * - When a summary is present, every state entry under `counts` must
+   *   include a `total`; a count key without `total` is invalid.
+   */
+  function isValidResponse(res: { summary?: WorkloadDashboardSummaryEntry['summary']; data?: unknown }): boolean {
+    const summary = res?.summary;
+
+    if (!Array.isArray(summary) || summary.length === 0) {
+      // With no summary, the response is only valid when there is also no data.
+      return Array.isArray(res?.data) ? res.data.length === 0 : !res?.data;
+    }
+
+    return summary.every((item) => Object.values(item.counts || {})
+      .every((detail) => typeof detail?.total === 'number'));
+  }
+
+  function redirectToDeployment(): void {
+    // The redirect can fire from an async fetch or poll that resolves after the
+    // user has already navigated away — only redirect if still on the dashboard.
+    if (router.currentRoute.value.name !== WORKLOAD_DASHBOARD_ROUTE) {
+      return;
+    }
+
+    // Logged to help triage "where's my workload summary page?" style questions:
+    // the summary response was malformed, so we fall back to the deployments list.
+    console.info(`Workload dashboard: unexpected summary response for cluster "${ clusterId.value }", redirecting to the deployments list.`); // eslint-disable-line no-console
+
+    stopPollTimer();
+    router.push(resourceRoute(WORKLOAD_TYPES.DEPLOYMENT));
+  }
+
   async function fetchSummaries(): Promise<void> {
+    // If this cluster's data was already found to be malformed, skip the requests
+    // and redirect straight away (cleared on reload via the in-memory singleton).
+    if (invalidDataClusters.has(clusterId.value)) {
+      redirectToDeployment();
+
+      return;
+    }
+
     try {
       const accessibleTypes = WORKLOAD_RESOURCE_TYPES.filter(
         (type) => store.getters['cluster/canList'](type)
       );
 
+      // Set when a successfully fetched response has an unexpected shape.
+      let hasInvalidResponse = false;
+
       const workloadPromises = accessibleTypes.map(async(type): Promise<WorkloadDashboardSummaryEntry> => {
         try {
           let url = `${ store.getters['cluster/urlFor'](type) }`;
@@ -361,6 +415,10 @@ export function useWorkloadDashboard() {
 
           const res = await store.dispatch('cluster/request', { url });
 
+          if (!hasInvalidResponse && !isValidResponse(res)) {
+            hasInvalidResponse = true;
+          }
+
           return {
             type, summary: res.summary || [], error: null
           };
@@ -375,6 +433,16 @@ export function useWorkloadDashboard() {
 
       const results = await Promise.all(workloadPromises);
 
+      // Only successful responses are validated (errors are caught above). If any
+      // had an unexpected shape, remember it so we skip future requests, then
+      // stop polling and redirect to the deployment list page.
+      if (hasInvalidResponse) {
+        invalidDataClusters.add(clusterId.value);
+        redirectToDeployment();
+
+        return;
+      }
+
       await resolveStateColors(results);
       summaries.value = results;
       fetchError.value = null;

package/pages/c/_cluster/fleet/index.vue

@@ -322,19 +322,15 @@ export default {
       this.selectedCard = selected;
 
       this.$shell.slideIn.open(ResourceDetails, {
-        showHeader: false,
-        props:      {
+        props: {
           value,
           statePanel,
           workspace
         },
-        width:              '73%',
-        // We want this to be full viewport height top to bottom
-        height:             '100vh',
-        top:                '0',
-        'z-index':          101, // We want this to be above the main side menu
-        closeOnRouteChange: ['name', 'params', 'query'], // We want to ignore hash changes, tables in extensions can trigger the drawer to close while opening
-        triggerFocusTrap:   false,
+        width:              'wide',
+        height:             'full',
+        closeOnRouteChange: ['name', 'params', 'query'],
+        disableFocusTrap:   true,
       });
     },
 

package/pkg/vue.config.js

@@ -91,9 +91,10 @@ module.exports = function(dir) {
       // These modules will be externalised and not included with the build of a package library
       // This helps reduce the package size, but these dependencies must be provided by the hosting application
       config.externals = {
-        jquery:    '$',
-        jszip:     '__jszip',
-        'js-yaml': '__jsyaml'
+        jquery:       '$',
+        jszip:        '__jszip',
+        'js-yaml':    '__jsyaml',
+        'vue-router': '__vueRouter'
       };
 
       // Prevent warning in log with the md files in the content folder

package/plugins/codemirror.js

@@ -27,6 +27,8 @@ import 'codemirror/addon/hint/show-hint.css';
 import 'codemirror/addon/hint/show-hint.js';
 import 'codemirror/addon/hint/anyword-hint.js';
 
+import 'codemirror/addon/comment/comment.js';
+
 import { strPad } from '@shell/utils/string';
 
 function isLineComment(cm, lineNo) {

package/plugins/dashboard-store/resource-class.js

@@ -932,12 +932,9 @@ export default class Resource {
       componentProps: {
         resource:           this,
         onClose,
-        width:              '73%',
-        // We want this to be full viewport height top to bottom
-        height:             '100vh',
-        top:                '0',
-        'z-index':          101, // We want this to be above the main side menu
-        closeOnRouteChange: ['name', 'params', 'query'], // We want to ignore hash changes, tables in extensions can trigger the drawer to close while opening
+        width:              'wide',
+        height:             'full',
+        closeOnRouteChange: ['name', 'params', 'query'],
         triggerFocusTrap:   true,
         returnFocusSelector,
         defaultTab