[11513] Added workload-dashboard

cypress/e2e/po/pages/explorer/workload-dashboard.po.ts

@@ -0,0 +1,64 @@
+import PagePo from '@/cypress/e2e/po/pages/page.po';
+import BurgerMenuPo from '@/cypress/e2e/po/side-bars/burger-side-menu.po';
+import ProductNavPo from '@/cypress/e2e/po/side-bars/product-side-nav.po';
+import CardPo from '@/cypress/e2e/po/components/Resource/Detail/Card/statusCard.po';
+import BannersPo from '@/cypress/e2e/po/components/banners.po';
+
+export default class WorkloadDashboardPagePo extends PagePo {
+  private static createPath(clusterId: string) {
+    return `/c/${ clusterId }/explorer/workload-dashboard`;
+  }
+
+  static goTo(clusterId: string): Cypress.Chainable<Cypress.AUTWindow> {
+    return super.goTo(WorkloadDashboardPagePo.createPath(clusterId));
+  }
+
+  constructor(clusterId = 'local') {
+    super(WorkloadDashboardPagePo.createPath(clusterId));
+  }
+
+  static navTo(clusterId = 'local') {
+    const burgerMenu = new BurgerMenuPo();
+    const sideNav = new ProductNavPo();
+
+    burgerMenu.goToCluster(clusterId);
+    sideNav.navToSideMenuGroupByLabel('Workloads');
+    sideNav.navToSideMenuEntryByLabel('Workloads');
+  }
+
+  title() {
+    return cy.get('[data-testid="workload-dashboard-title"]');
+  }
+
+  subtitle() {
+    return cy.get('[data-testid="workload-dashboard-subtitle"]');
+  }
+
+  byStateSection() {
+    return cy.get('[data-testid="workload-dashboard-by-state"]');
+  }
+
+  stateCards() {
+    return cy.get('[data-testid="workload-dashboard-state-card"]');
+  }
+
+  byTypeSection() {
+    return cy.get('[data-testid="workload-dashboard-by-type"]');
+  }
+
+  byTypeCard(index = 0) {
+    return new CardPo(`[data-testid="resource-detail-status-card"]:eq(${ index })`);
+  }
+
+  byTypeCards() {
+    return cy.get('[data-testid="resource-detail-status-card"]');
+  }
+
+  emptyState() {
+    return cy.get('[data-testid="workload-dashboard-empty"]');
+  }
+
+  errorBanner() {
+    return new BannersPo('.banner.error');
+  }
+}

cypress/e2e/tests/pages/explorer/workload-dashboard.spec.ts

@@ -0,0 +1,54 @@
+import WorkloadDashboardPagePo from '@/cypress/e2e/po/pages/explorer/workload-dashboard.po';
+
+const workloadDashboard = new WorkloadDashboardPagePo('local');
+
+describe('Workload Dashboard', { testIsolation: 'off', tags: ['@explorer', '@adminUser'] }, () => {
+  before(() => {
+    cy.login();
+    cy.updateNamespaceFilter('local', 'none', '{"local":[]}');
+    WorkloadDashboardPagePo.navTo();
+    workloadDashboard.waitForPage();
+  });
+
+  it('should display the title', () => {
+    workloadDashboard.title().should('contain.text', 'Workloads Overview');
+  });
+
+  it('should display a namespace subtitle with workload count', () => {
+    workloadDashboard.subtitle().should('be.visible');
+    workloadDashboard.subtitle().invoke('text').should('match', /\(\d+\)/);
+  });
+
+  it('should display the By State section with state cards', () => {
+    workloadDashboard.byStateSection().should('be.visible');
+    workloadDashboard.stateCards().should('have.length.gte', 1);
+  });
+
+  it('should display the By Type section with type cards', () => {
+    workloadDashboard.byTypeSection().should('be.visible');
+    workloadDashboard.byTypeCards().should('have.length.gte', 1);
+  });
+
+  it('should navigate to the resource list when clicking a By Type card', () => {
+    WorkloadDashboardPagePo.navTo();
+    workloadDashboard.waitForPage();
+
+    workloadDashboard.byTypeCards().first().click();
+
+    cy.url().should('match', /\/c\/local\/explorer\/(apps\.|batch\.)?[a-z]+/);
+  });
+
+  it('should show empty state when namespace filter matches no workloads', () => {
+    cy.updateNamespaceFilter('local', 'none', '{"local":["ns://e2e-nonexistent-ns"]}');
+
+    WorkloadDashboardPagePo.navTo();
+    workloadDashboard.waitForPage();
+
+    workloadDashboard.emptyState().should('be.visible');
+  });
+
+  after(() => {
+    cy.login();
+    cy.updateNamespaceFilter('local', 'none', '{"local":["all://user"]}');
+  });
+});

shell/assets/translations/en-us.yaml

@@ -7425,6 +7425,29 @@ wm:
   kubectlShell:
     title: "Kubectl: {name}"
 
+workloadDashboard:
+  title: Workloads Overview
+  subtitle:
+    allNamespaces: "For all namespaces ({count})"
+    userNamespaces: "Only for user namespaces ({count})"
+    systemNamespaces: "Only for system namespaces ({count})"
+    namespacedOnly: "Only for namespaced resources ({count})"
+    clusterOnly: "Only for cluster resources ({count})"
+    project: "For the namespaces of Project {name} ({count})"
+    namespace: "For the namespace {name} ({count})"
+    multipleSelected: "For {selected} items selected ({count})"
+  sections:
+    byState: By State
+    byType: By Type
+  errors:
+    noAccess: "No access to {type}"
+    fetchType: "Failed to fetch {type}"
+    fetchAll: Failed to fetch workload summaries
+  empty:
+    title: No workloads to show
+    message: "Tips: undo the last namespace filter you applied or <resetLink>reset the namespaces filter</resetLink>."
+    docsMessage: "Want to learn more about Workloads? Read our <docsLink>documentation</docsLink>."
+
 workload:
   scaleWorkloads: Scale workloads
   healthWorkloads: Jobs/Pods health status

shell/components/Resource/Detail/Card/StatusCard/index.vue

@@ -8,12 +8,16 @@ import { useI18n } from '@shell/composables/useI18n';
 import { StateColor } from '@shell/utils/style';
 import { computed } from 'vue';
 import { useStore } from 'vuex';
+import type { RouteLocationRaw } from 'vue-router';
 
 export interface Props {
   title: string;
   resources?: any[];
   showScaling?: boolean;
+  showPercent?: boolean;
   noResourcesMessage?: string;
+  to?: RouteLocationRaw;
+  rowTo?: RouteLocationRaw | string;
 }
 </script>
 
@@ -24,7 +28,10 @@ const i18n = useI18n(store);
 const props = withDefaults(defineProps<Props>(), {
   resources:          undefined,
   showScaling:        false,
-  noResourcesMessage: undefined
+  showPercent:        true,
+  noResourcesMessage: undefined,
+  to:                 undefined,
+  rowTo:              undefined,
 });
 const emit = defineEmits(['decrease', 'increase']);
 
@@ -38,7 +45,7 @@ const segmentAccumulator = computed(() => {
     const color: StateColor = resource.stateSimpleColor;
 
     accumulator[color] = accumulator[color] || { count: 0 };
-    accumulator[color].count++;
+    accumulator[color].count += resource.count || 1;
   });
 
   return accumulator;
@@ -48,12 +55,13 @@ const rowAccumulator = computed(() => {
   interface Value {
     count: number;
     color: StateColor;
+    stateId: string;
   }
   const accumulator: {[key in string]: Value} = {};
 
   props.resources?.forEach((resource: any) => {
-    accumulator[resource.stateDisplay] = accumulator[resource.stateDisplay] || { count: 0 };
-    accumulator[resource.stateDisplay].count++;
+    accumulator[resource.stateDisplay] = accumulator[resource.stateDisplay] || { count: 0, stateId: resource.stateId || resource.stateDisplay };
+    accumulator[resource.stateDisplay].count += resource.count || 1;
     accumulator[resource.stateDisplay].color = resource.stateSimpleColor.replace('text-', '') as StateColor;
   });
 
@@ -64,7 +72,13 @@ const percent = (count: number, total: number) => {
   return count / total * 100;
 };
 
-const count = computed(() => props.resources?.length || 0);
+const count = computed(() => {
+  if (!props.resources?.length) {
+    return 0;
+  }
+
+  return props.resources.reduce((sum: number, r: any) => sum + (r.count || 1), 0);
+});
 
 const segmentColors = computed(() => Object.keys(segmentAccumulator.value) as StateColor[]);
 const segments = computed(() => segmentColors.value.map((color: StateColor) => ({
@@ -80,17 +94,27 @@ const rows = computed(() => {
   return rowStates.value.map((state) => ({
     color:   rowAccumulator.value[state].color,
     label:   state,
+    stateId: rowAccumulator.value[state].stateId,
     count:   rowAccumulator.value[state].count,
     percent: percent(rowAccumulator.value[state].count, count.value)
   }));
 });
 
+function rowRoute(stateId: string): RouteLocationRaw | undefined {
+  if (!props.rowTo || typeof props.rowTo === 'string') {
+    return undefined;
+  }
+
+  return { ...props.rowTo, query: { q: `"metadata.state.name":"${ stateId }"` } };
+}
+
 </script>
 
 <template>
   <Card
     :title="title"
     data-testid="resource-detail-status-card"
+    :to="props.to"
   >
     <template
       v-if="props.showScaling"
@@ -120,6 +144,8 @@ const rows = computed(() => {
         :label="row.label"
         :count="row.count"
         :percent="row.percent"
+        :showPercent="props.showPercent"
+        :to="rowRoute(row.stateId)"
       />
     </div>
     <div

shell/components/Resource/Detail/Card/__tests__/Card.test.ts

@@ -1,36 +1,104 @@
-import { mount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import Card from '@shell/components/Resource/Detail/Card/index.vue';
 
+const mockPush = jest.fn();
+
+jest.mock('vue-router', () => ({ useRouter: () => ({ push: mockPush }) }));
+
 describe('component: Card/index', () => {
-  it('should render title and default slot', async() => {
+  it('should render title and default slot', () => {
     const title = 'title';
     const content = 'content';
-    const wrapper = mount(Card, { props: { title }, slots: { default: content } });
+    const wrapper = shallowMount(Card, { props: { title }, slots: { default: content } });
 
-    expect(wrapper.find('.title').element.innerHTML).toStrictEqual(title);
+    expect(wrapper.find('.title').text()).toStrictEqual(title);
   });
 
-  it('should allow you to override the heading with slot', async() => {
+  it('should allow you to override the heading with slot', () => {
     const title = 'title';
     const content = 'content';
-    const wrapper = mount(Card, { props: { title }, slots: { heading: content } });
+    const wrapper = shallowMount(Card, { props: { title }, slots: { heading: content } });
 
     expect(wrapper.find('.title').exists()).toBeFalsy();
-    expect(wrapper.find('.heading').element.innerHTML).toStrictEqual(content);
+    expect(wrapper.find('.heading').text()).toStrictEqual(content);
   });
 
-  it('should allow you to override the title with slot', async() => {
+  it('should allow you to override the title with slot', () => {
     const title = 'title';
     const content = 'content';
-    const wrapper = mount(Card, { props: { title }, slots: { title: content } });
+    const wrapper = shallowMount(Card, { props: { title }, slots: { title: content } });
 
-    expect(wrapper.find('.title').element.innerHTML).toStrictEqual(content);
+    expect(wrapper.find('.title').text()).toStrictEqual(content);
   });
 
-  it('should allow you to insert heading-action with slot', async() => {
+  it('should allow you to insert heading-action with slot', () => {
     const content = '<div id="test">content</div>';
-    const wrapper = mount(Card, { slots: { 'heading-action': content } });
+    const wrapper = shallowMount(Card, { slots: { 'heading-action': content } });
 
     expect(wrapper.find('.heading #test').exists()).toBeTruthy();
   });
+
+  it('should hide heading when no title or heading slots are provided', () => {
+    const wrapper = shallowMount(Card, { slots: { default: 'body' } });
+
+    expect(wrapper.find('.heading').exists()).toBeFalsy();
+  });
+
+  describe('click navigation', () => {
+    const to = { name: 'test-route', params: { id: '1' } };
+
+    beforeEach(() => {
+      mockPush.mockClear();
+    });
+
+    it('should navigate when card body is clicked and to prop is set', async() => {
+      const wrapper = shallowMount(Card, { props: { to }, slots: { default: '<span>content</span>' } });
+
+      await wrapper.find('.body span').trigger('click');
+
+      expect(mockPush).toHaveBeenCalledWith(to);
+    });
+
+    it('should not navigate when no to prop is set', async() => {
+      const wrapper = shallowMount(Card, { props: { title: 'test' }, slots: { default: '<span>content</span>' } });
+
+      await wrapper.find('.body span').trigger('click');
+
+      expect(mockPush).not.toHaveBeenCalled();
+    });
+
+    it('should not navigate when clicking on a child anchor element', async() => {
+      const wrapper = shallowMount(Card, {
+        props: { to },
+        slots: { default: '<a href="#" class="inner-link">link</a>' },
+      });
+
+      await wrapper.find('.inner-link').trigger('click');
+
+      expect(mockPush).not.toHaveBeenCalled();
+    });
+
+    it('should not navigate when clicking on a child button element', async() => {
+      const wrapper = shallowMount(Card, {
+        props: { to },
+        slots: { default: '<button class="inner-btn">btn</button>' },
+      });
+
+      await wrapper.find('.inner-btn').trigger('click');
+
+      expect(mockPush).not.toHaveBeenCalled();
+    });
+
+    it('should add clickable class when to prop is set', () => {
+      const wrapper = shallowMount(Card, { props: { to }, slots: { default: 'body' } });
+
+      expect(wrapper.find('.detail-card').classes()).toContain('clickable');
+    });
+
+    it('should not add clickable class when to prop is not set', () => {
+      const wrapper = shallowMount(Card, { slots: { default: 'body' } });
+
+      expect(wrapper.find('.detail-card').classes()).not.toContain('clickable');
+    });
+  });
 });