Enable resource cards on workload detail pages

Use the Steve summary API (?summary=metadata.state.name) to fetch
per-state counts for pods, services, and ingresses without loading
full resource collections. Relationship rows (Referred to by / Refers
to) read state directly from metadata.relationships.

Fixes #16375

Author: codyrancher

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

@@ -1,4 +1,5 @@
-import { useResourceCardRow } from '@shell/components/Resource/Detail/Card/StateCard/composables';
+import { useResourceCardRow, useResourceCardRowFromSummary, useResourceCardRowFromRelationships } from '@shell/components/Resource/Detail/Card/StateCard/composables';
+import type { SummaryResult } from '@shell/components/Resource/Detail/Card/StateCard/composables';
 
 describe('useResourceCardRow', () => {
   describe('with default keys', () => {
@@ -140,3 +141,195 @@ describe('useResourceCardRow', () => {
     });
   });
 });
+
+describe('useResourceCardRowFromSummary', () => {
+  it('should return empty props when summaryResult is null', () => {
+    const result = useResourceCardRowFromSummary('Services', null);
+
+    expect(result.label).toBe('Services');
+    expect(result.color).toBeUndefined();
+    expect(result.counts).toBeUndefined();
+  });
+
+  it('should return empty props when summary array is empty', () => {
+    const result = useResourceCardRowFromSummary('Services', { count: 0, summary: [] });
+
+    expect(result.color).toBeUndefined();
+    expect(result.counts).toBeUndefined();
+  });
+
+  it('should return empty props when summary is null', () => {
+    const result = useResourceCardRowFromSummary('Services', { count: 5, summary: null });
+
+    expect(result.color).toBeUndefined();
+    expect(result.counts).toBeUndefined();
+  });
+
+  it('should return a plain count when no metadata.state.name entry exists', () => {
+    const summary: SummaryResult = {
+      count:   3,
+      summary: [{ property: 'some.other.field', counts: { foo: 3 } }]
+    };
+
+    const result = useResourceCardRowFromSummary('Pods', summary);
+
+    expect(result.counts).toStrictEqual([{ label: '', count: 3 }]);
+  });
+
+  it('should map state names to colors and display labels', () => {
+    const summary: SummaryResult = {
+      count:   5,
+      summary: [{ property: 'metadata.state.name', counts: { running: 3, error: 2 } }]
+    };
+
+    const result = useResourceCardRowFromSummary('Pods', summary);
+
+    expect(result.counts).toHaveLength(2);
+    expect(result.counts).toContainEqual(expect.objectContaining({
+      label: 'running', count: 3, color: 'success'
+    }));
+    expect(result.counts).toContainEqual(expect.objectContaining({
+      label: 'error', count: 2, color: 'error'
+    }));
+  });
+
+  it('should set the highest alert color as main color', () => {
+    const summary: SummaryResult = {
+      count:   4,
+      summary: [{ property: 'metadata.state.name', counts: { active: 3, error: 1 } }]
+    };
+
+    const result = useResourceCardRowFromSummary('Services', summary);
+
+    expect(result.color).toBe('error');
+  });
+
+  it('should sort by alert level then by count', () => {
+    const summary: SummaryResult = {
+      count:   6,
+      summary: [{
+        property: 'metadata.state.name',
+        counts:   {
+          active: 3, error: 1, warning: 2
+        }
+      }]
+    };
+
+    const result = useResourceCardRowFromSummary('Pods', summary);
+
+    expect(result.counts![0].color).toBe('error');
+    expect(result.counts![1].color).toBe('warning');
+    expect(result.counts![2].color).toBe('success');
+  });
+
+  it('should pass the to parameter through', () => {
+    const to = { hash: '#pods' };
+    const result = useResourceCardRowFromSummary('Pods', null, to);
+
+    expect(result.to).toStrictEqual(to);
+  });
+
+  it('should handle a single state', () => {
+    const summary: SummaryResult = {
+      count:   2,
+      summary: [{ property: 'metadata.state.name', counts: { active: 2 } }]
+    };
+
+    const result = useResourceCardRowFromSummary('Services', summary);
+
+    expect(result.counts).toHaveLength(1);
+    expect(result.counts![0]).toStrictEqual(expect.objectContaining({
+      label: 'active', count: 2, color: 'success'
+    }));
+    expect(result.color).toBe('success');
+  });
+});
+
+describe('useResourceCardRowFromRelationships', () => {
+  it('should return empty props for empty relationships', () => {
+    const result = useResourceCardRowFromRelationships('Refers to', []);
+
+    expect(result.label).toBe('Refers to');
+    expect(result.color).toBeUndefined();
+    expect(result.counts).toBeUndefined();
+  });
+
+  it('should aggregate relationship states', () => {
+    const rels = [
+      { toType: 'configmap', state: 'active' },
+      { toType: 'secret', state: 'active' },
+      { toType: 'serviceaccount', state: 'error' }
+    ];
+
+    const result = useResourceCardRowFromRelationships('Refers to', rels);
+
+    expect(result.counts).toHaveLength(2);
+    expect(result.counts).toContainEqual(expect.objectContaining({ label: 'active', count: 2 }));
+    expect(result.counts).toContainEqual(expect.objectContaining({ label: 'error', count: 1 }));
+  });
+
+  it('should default missing state to "missing"', () => {
+    const rels = [
+      { toType: 'configmap' },
+      { toType: 'secret', state: 'active' }
+    ];
+
+    const result = useResourceCardRowFromRelationships('Refers to', rels);
+
+    expect(result.counts).toContainEqual(expect.objectContaining({
+      label: 'missing', count: 1, color: 'warning'
+    }));
+    expect(result.counts).toContainEqual(expect.objectContaining({
+      label: 'active', count: 1, color: 'success'
+    }));
+  });
+
+  it('should set the highest alert color as main color', () => {
+    const rels = [
+      { toType: 'configmap', state: 'active' },
+      { toType: 'secret', state: 'error' }
+    ];
+
+    const result = useResourceCardRowFromRelationships('Refers to', rels);
+
+    expect(result.color).toBe('error');
+  });
+
+  it('should sort by alert level then by count', () => {
+    const rels = [
+      { toType: 'a', state: 'active' },
+      { toType: 'b', state: 'active' },
+      { toType: 'c', state: 'active' },
+      { toType: 'd', state: 'error' },
+      { toType: 'e', state: 'warning' },
+      { toType: 'f', state: 'warning' }
+    ];
+
+    const result = useResourceCardRowFromRelationships('Refers to', rels);
+
+    expect(result.counts![0].color).toBe('error');
+    expect(result.counts![1].color).toBe('warning');
+    expect(result.counts![2].color).toBe('success');
+  });
+
+  it('should pass the to parameter through', () => {
+    const to = { hash: '#related' };
+    const result = useResourceCardRowFromRelationships('Refers to', [], to);
+
+    expect(result.to).toStrictEqual(to);
+  });
+
+  it('should handle all relationships having no state', () => {
+    const rels = [
+      { toType: 'configmap' },
+      { toType: 'secret' }
+    ];
+
+    const result = useResourceCardRowFromRelationships('Refers to', rels);
+
+    expect(result.counts).toHaveLength(1);
+    expect(result.counts![0]).toStrictEqual(expect.objectContaining({
+      label: 'missing', count: 2, color: 'warning'
+    }));
+  });
+});

shell/components/Resource/Detail/Card/StateCard/composables.ts

@@ -6,6 +6,12 @@ import { computed, Ref, toValue } from 'vue';
 import { useStore } from 'vuex';
 import { Props as StateCardProps } from '@shell/components/Resource/Detail/Card/StateCard/types';
 import { RouteLocationRaw } from 'vue-router';
+import { colorForState as colorForStateFn, stateDisplay as stateDisplayFn } from '@shell/plugins/dashboard-store/resource-class';
+
+export interface SummaryResult {
+  count: number;
+  summary: { property: string; counts: Record<string, number> }[] | null;
+}
 
 export function useResourceCardRow(label: string, resources: any[], stateColorKey = 'stateSimpleColor', stateDisplayKey = 'stateDisplay', to?: RouteLocationRaw): ResourceRowProps {
   const agg: any = {};
@@ -49,6 +55,122 @@ export function useResourceCardRow(label: string, resources: any[], stateColorKe
   };
 }
 
+/**
+ * Builds a ResourceRowProps from summary API response data.
+ * The summary API returns state counts as { property: 'metadata.state.name', counts: { running: 2, error: 1 } }.
+ * This maps those state names to display labels and colors using the same logic as resource models.
+ */
+export function useResourceCardRowFromSummary(label: string, summaryResult: SummaryResult | null | undefined, to?: RouteLocationRaw): ResourceRowProps {
+  if (!summaryResult?.summary?.length) {
+    return {
+      label,
+      color:  undefined,
+      counts: undefined,
+      to
+    };
+  }
+
+  const stateSummary = summaryResult.summary.find((s) => s.property === 'metadata.state.name');
+
+  if (!stateSummary?.counts) {
+    return {
+      label,
+      color:  undefined,
+      counts: summaryResult.count ? [{ label: '', count: summaryResult.count }] : undefined,
+      to
+    };
+  }
+
+  interface Tuple extends Count {
+    color: StateColor;
+  }
+
+  const tuples: Tuple[] = Object.entries(stateSummary.counts).map(([state, count]) => {
+    const colorRaw = colorForStateFn(state) as string;
+    const color = (colorRaw?.replace('text-', '') || 'disabled') as StateColor;
+    const display = stateDisplayFn(state) as string;
+
+    return {
+      color,
+      label: display?.toLowerCase() || state,
+      count
+    };
+  });
+
+  tuples.sort((left: Tuple, right: Tuple) => {
+    if (isHigherAlert(left.color, right.color)) {
+      return -1;
+    }
+
+    if (left.color !== right.color) {
+      return 1;
+    }
+
+    if (left.count === right.count) {
+      return 0;
+    }
+
+    return left.count > right.count ? -1 : 1;
+  });
+
+  return {
+    label,
+    color:  tuples.length ? tuples[0].color : undefined,
+    counts: tuples.length ? tuples : undefined,
+    to
+  };
+}
+
+/**
+ * Builds a ResourceRowProps from relationship state data.
+ * Each relationship entry includes a `state` field (e.g. "active", "error").
+ */
+export function useResourceCardRowFromRelationships(label: string, relationships: any[], to?: RouteLocationRaw): ResourceRowProps {
+  if (!relationships.length) {
+    return {
+      label, color: undefined, counts: undefined, to
+    };
+  }
+
+  const agg: Record<string, { color: StateColor; label: string; count: number }> = {};
+
+  relationships.forEach((r: any) => {
+    const state = (r.state || 'missing').toLowerCase();
+    const colorRaw = colorForStateFn(state) as string;
+    const color = (colorRaw?.replace('text-', '') || 'disabled') as StateColor;
+    const display = (stateDisplayFn(state) as string)?.toLowerCase() || state;
+
+    agg[state] = agg[state] || {
+      color, label: display, count: 0
+    };
+    agg[state].count++;
+  });
+
+  interface Tuple extends Count {
+    color: StateColor;
+  }
+  const tuples: Tuple[] = Object.values(agg);
+
+  tuples.sort((left: Tuple, right: Tuple) => {
+    if (isHigherAlert(left.color, right.color)) {
+      return -1;
+    }
+
+    if (left.color !== right.color) {
+      return 1;
+    }
+
+    return left.count >= right.count ? -1 : 1;
+  });
+
+  return {
+    label,
+    color:  tuples.length ? tuples[0].color : undefined,
+    counts: tuples.length ? tuples : undefined,
+    to
+  };
+}
+
 export interface Pairs {
     label: string;
     to?: RouteLocationRaw;