Fix review findings across summary API and resource cards

- Fix broken reactivity in useDefaultResources (toValue inside computed)
- Fix division by zero in StatusCard percent function
- Fix race condition in useResourceSummary with fetchId staleness guard
- Fix inconsistent color assignment in StatusCard rowAccumulator
- Fix inconsistent sort comparator in useResourceCardRowFromRelationships
- Add color fallback for missing stateSimpleColor in StatusCard
- Add error handling for fire-and-forget async in useResourceSummary
- Parallelize service/ingress summary fetches with Promise.all
- Rename opt.namespaced to opt.namespace for clarity
- Replace hardcoded 'Resources' with i18n key
- Extract duplicated 'metadata.state.name' to constant
- Use nullish coalescing for res.count
- Fix JSDoc example to include required summaryField

Author: codyrancher

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

@@ -163,7 +163,11 @@ export function useResourceCardRowFromRelationships(label: string, relationships
       return 1;
     }
 
-    return left.count >= right.count ? -1 : 1;
+    if (left.count === right.count) {
+      return 0;
+    }
+
+    return left.count > right.count ? -1 : 1;
   });
 
   return {
@@ -181,8 +185,7 @@ export interface Pairs {
 }
 
 export function useDefaultResources(pairs: Ref<Pairs[]>) {
-  const pairsValue = toValue(pairs);
-  const rows = computed(() => pairsValue.map(({ label, resources, to }) => useResourceCardRow(label, resources, undefined, undefined, to)));
+  const rows = computed(() => toValue(pairs).map(({ label, resources, to }) => useResourceCardRow(label, resources, undefined, undefined, to)));
 
   return rows;
 }
@@ -236,7 +239,7 @@ export function useDefaultWorkloadResources(services?: any[], ingresses?: any[],
   const rows = useDefaultResources(remainingPairs);
 
   return {
-    title: 'Resources',
+    title: i18n.t('component.resource.detail.card.resourcesCard.title'),
     rows:  rows.value
   };
 }
@@ -268,7 +271,7 @@ export function useDefaultWorkloadInsightsCardProps(): StateCardProps {
 
 export interface ResourceSummaryOpt {
   summaryField: string;
-  namespaced?: string;
+  namespace?: string;
   filters?: PaginationParamFilter[];
 }
 
@@ -284,13 +287,24 @@ export function useResourceSummary(type: string, opt: ResourceSummaryOpt) {
   const summary = ref<SummaryResult['summary']>(null);
 
   const normalizedType = store.getters['cluster/normalizeType']?.(type) || type;
+  let fetchId = 0;
 
   async function fetch() {
-    const result = await store.dispatch('cluster/fetchResourceSummary', { type, opt });
+    const id = ++fetchId;
+
+    try {
+      const result = await store.dispatch('cluster/fetchResourceSummary', { type, opt });
+
+      if (id !== fetchId) {
+        return;
+      }
 
-    if (result) {
-      count.value = result.count;
-      summary.value = result.summary;
+      if (result) {
+        count.value = result.count;
+        summary.value = result.summary;
+      }
+    } catch (e) {
+      console.warn(`useResourceSummary: fetch failed for type "${ type }"`, e); // eslint-disable-line no-console
     }
   }
 

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

@@ -61,7 +61,7 @@ const segmentAccumulator = computed(() => {
     }
   } else {
     props.resources?.forEach((resource: any) => {
-      const color: StateColor = resource.stateSimpleColor;
+      const color: StateColor = resource.stateSimpleColor || 'disabled';
 
       accumulator[color] = accumulator[color] || { count: 0 };
       accumulator[color].count++;
@@ -90,17 +90,18 @@ const rowAccumulator = computed(() => {
     }
   } else {
     props.resources?.forEach((resource: any) => {
-      accumulator[resource.stateDisplay] = accumulator[resource.stateDisplay] || { count: 0, color: 'disabled' as StateColor };
+      const color = (resource.stateSimpleColor?.replace('text-', '') || 'disabled') as StateColor;
+
+      accumulator[resource.stateDisplay] = accumulator[resource.stateDisplay] || { count: 0, color };
       accumulator[resource.stateDisplay].count++;
-      accumulator[resource.stateDisplay].color = resource.stateSimpleColor.replace('text-', '') as StateColor;
     });
   }
 
   return accumulator;
 });
 
 const percent = (count: number, total: number) => {
-  return count / total * 100;
+  return total > 0 ? count / total * 100 : 0;
 };
 
 const count = computed(() => {

shell/models/workload.js

@@ -590,6 +590,7 @@ export default class Workload extends WorkloadService {
   async fetchSummaries() {
     const ns = this.metadata.namespace;
     const summaries = {};
+    const summaryField = 'metadata.state.name';
     const nsFilter = PaginationParamFilter.createSingleField({ field: 'metadata.namespace', value: ns });
 
     const podSelectorStr = this.podSelector;
@@ -608,18 +609,24 @@ export default class Workload extends WorkloadService {
         }
       });
 
-      summaries.pods = await this.$dispatch('fetchResourceSummary', { type: POD, opt: { summaryField: 'metadata.state.name', filters } });
+      summaries.pods = await this.$dispatch('fetchResourceSummary', { type: POD, opt: { summaryField, filters } });
     }
 
-    summaries.services = await this.$dispatch('fetchResourceSummary', {
-      type: SERVICE,
-      opt:  { summaryField: 'metadata.state.name', filters: [nsFilter] }
-    });
-
-    summaries.ingresses = await this.$dispatch('fetchResourceSummary', {
-      type: INGRESS,
-      opt:  { summaryField: 'metadata.state.name', filters: [nsFilter] }
-    });
+    // Service and ingress summaries are scoped by namespace only (not by workload selector)
+    // because the relationship between workloads and services/ingresses is not label-based.
+    const [services, ingresses] = await Promise.all([
+      this.$dispatch('fetchResourceSummary', {
+        type: SERVICE,
+        opt:  { summaryField, filters: [nsFilter] }
+      }),
+      this.$dispatch('fetchResourceSummary', {
+        type: INGRESS,
+        opt:  { summaryField, filters: [nsFilter] }
+      }),
+    ]);
+
+    summaries.services = services;
+    summaries.ingresses = ingresses;
 
     set(this, '_summaries', summaries);
 

shell/plugins/steve/__tests__/actions.test.ts

@@ -78,7 +78,7 @@ describe('steve: actions:', () => {
 
       ctx.dispatch.mockResolvedValue({ count: 2, summary: null });
 
-      await fetchResourceSummary.call({}, ctx, { type: 'pod', opt: { summaryField: 'metadata.state.name', namespaced: 'cattle-system' } });
+      await fetchResourceSummary.call({}, ctx, { type: 'pod', opt: { summaryField: 'metadata.state.name', namespace: 'cattle-system' } });
 
       const requestUrl = ctx.dispatch.mock.calls[0][1].opt.url;
 
@@ -92,7 +92,7 @@ describe('steve: actions:', () => {
       ctx.getters.schemaFor = () => nonNsSchema;
       ctx.dispatch.mockResolvedValue({ count: 1, summary: null });
 
-      await fetchResourceSummary.call({}, ctx, { type: 'pod', opt: { summaryField: 'metadata.state.name', namespaced: 'default' } });
+      await fetchResourceSummary.call({}, ctx, { type: 'pod', opt: { summaryField: 'metadata.state.name', namespace: 'default' } });
 
       const requestUrl = ctx.dispatch.mock.calls[0][1].opt.url;
 

shell/plugins/steve/actions.js

@@ -230,13 +230,16 @@ export default {
    * @param {object} [opt] - Options object
    *   @param {string} opt.summaryField - Field to aggregate counts by.
    *     Must be a field indexed by the VAI cache (see StevePaginationUtils.VALID_FIELDS in steve-pagination-utils.ts)
-   *   @param {string} [opt.namespaced] - Namespace to scope the request to (only applies to namespaced resource types)
+   *   @param {string} [opt.namespace] - Namespace to scope the request to (only applies to namespaced resource types)
    *   @param {PaginationParamFilter[]} [opt.filters] - Pre-built filters from PaginationParamFilter.createSingleField()
    * @returns {Promise<{ count: number, summary: { property: string, counts: Record<string, number> }[] | null } | undefined>}
    *
    * @example
    * const nsFilter = PaginationParamFilter.createSingleField({ field: 'metadata.namespace', value: 'default' });
-   * const result = await dispatch('fetchResourceSummary', { type: 'pod', opt: { filters: [nsFilter] } });
+   * const result = await dispatch('fetchResourceSummary', {
+   *   type: 'pod',
+   *   opt:  { summaryField: 'metadata.state.name', filters: [nsFilter] }
+   * });
    */
   async fetchResourceSummary({ getters, dispatch, rootGetters }, { type, opt = {} }) {
     type = getters.normalizeType(type);
@@ -263,8 +266,8 @@ export default {
     try {
       const url = new URL(schema.links.collection, window.location.origin);
 
-      if (schema.attributes?.namespaced && opt.namespaced) {
-        url.pathname += `/${ opt.namespaced }`;
+      if (schema.attributes?.namespaced && opt.namespace) {
+        url.pathname += `/${ opt.namespace }`;
       }
 
       url.searchParams.set('summary', opt.summaryField);
@@ -281,7 +284,7 @@ export default {
       const res = await dispatch('request', { opt: { url: url.pathname + url.search } });
 
       return {
-        count:   res.count || 0,
+        count:   res.count ?? 0,
         summary: res.summary || null
       };
     } catch (e) {