@rancher/shell 3.0.12-rc.2 → 3.0.12-rc.4

package/components/MgmtNodeList.vue

@@ -0,0 +1,184 @@
+<script>
+import { MANAGEMENT } from '@shell/config/types';
+import ResourceTable from '@shell/components/ResourceTable';
+import {
+  INTERNAL_EXTERNAL_IP,
+  STATE, NAME as NAME_COL, AGE, MANAGEMENT_NODE_OS
+} from '@shell/config/table-headers';
+
+// exclude roles column - it is not necessarily used (or used the same way) outside of Rancher provisioning
+export const DEFAULT_HEADERS = [STATE, {
+  ...NAME_COL,
+  value:         'status.nodeName',
+  formatterOpts: { reference: 'kubeNodeDetailLocation' }
+}, INTERNAL_EXTERNAL_IP, MANAGEMENT_NODE_OS, AGE];
+
+export default {
+  name: 'ClusterScopedManagementNodeList',
+
+  components: { ResourceTable },
+
+  props: {
+    resource: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    },
+
+    // override default management node schema headers
+    headers: {
+      type:    Array,
+      default: () => DEFAULT_HEADERS
+    },
+
+    // function to get node group for a given node, used for grouping nodes by pool in the table
+    // result  should be an object with name and (optionally) description properties
+    getNodeGroup: {
+      type:    Function,
+      default: null
+    }
+
+  },
+
+  /**
+   * avoid fetching ALL nodes to find this cluster's nodes
+   * mgmt nodes do not have labels that can be used with a labelSelector action
+   * neither the prov cluster nor mgmt cluster list mgmt nodes in their metadata.relationships nor are the node names listed in either cluster's status
+   * BUT mgmt nodes are scoped to a cluster's namespace, so we can fetch only mgmt nodes in the cluster's namespace
+   */
+  async fetch() {
+    const canList = this.$store.getters['management/canList'](MANAGEMENT.NODE);
+
+    if ( canList ) {
+      const hasAllMgmtNodes = this.$store.getters['management/haveAll'](MANAGEMENT.NODE);
+
+      if (hasAllMgmtNodes) {
+        this.mgmtNodes = this.$store.getters['management/all'](MANAGEMENT.NODE);
+      } else {
+        const res = await this.$store.dispatch('management/findLabelSelector', {
+          type:     MANAGEMENT.NODE,
+          matching: {
+            namespace:     this.resource.mgmtClusterId,
+            labelSelector: {
+              matchExpressions: [
+                {
+                  key:      'management.cattle.io/nodename',
+                  operator: 'Exists',
+                }
+              ]
+            }
+          }
+        } );
+
+        this.mgmtNodes = res;
+      }
+    }
+  },
+
+  data() {
+    return {
+      mgmtNodes: [],
+
+      mgmtNodeSchema: this.$store.getters[`management/schemaFor`](MANAGEMENT.NODE),
+
+      noneGroupOption: {
+        tooltipKey: 'resourceTable.groupBy.none',
+        icon:       'icon-list-flat',
+        value:      'none',
+      },
+
+      poolGroupOption: {
+        tooltipKey: 'resourceTable.groupBy.pool',
+        icon:       'icon-cluster',
+        value:      'poolRef',
+        field:      'poolRef.name'
+      }
+
+    };
+  },
+
+  computed: {
+    nodes() {
+      return this.mgmtNodes.filter((x) => x.mgmtClusterId === this.resource.mgmtClusterId).map((node) => {
+        const poolRef = typeof this.getNodeGroup === 'function' ? this.getNodeGroup(node) : null;
+
+        node.poolRef = poolRef;
+
+        return node;
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <ResourceTable
+    v-bind="$attrs"
+    :schema="mgmtNodeSchema"
+    :headers="headers"
+    :rows="nodes"
+    :ignore-filter="true"
+    group-ref="poolRef"
+    data-testid="mgmt-node-table"
+    :group-options="[noneGroupOption, poolGroupOption]"
+  >
+    <template #main-row:isFake="{fullColspan}">
+      <tr class="main-row">
+        <td
+          :colspan="fullColspan"
+          class="no-entries"
+        >
+          {{ t('node.list.noNodes') }}
+        </td>
+      </tr>
+    </template>
+
+    <template #group-by="{group}">
+      <div
+        class="pool-row"
+        :class="{'has-description':group.ref}"
+      >
+        <div
+          v-trim-whitespace
+          class="group-tab"
+        >
+          {{ group.ref?.name || t('resourceTable.groupLabel.notInANodePool') }}
+          <div
+            v-if="group.ref && group.ref.description"
+            v-clean-html="group.ref.description"
+            class="description text-muted text-small"
+          />
+        </div>
+      </div>
+    </template>
+  </ResourceTable>
+</template>
+
+<style scoped lang="scss">
+.pool-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  &.has-description {
+    .group-tab {
+      &, &::after {
+          height: 50px;
+      }
+
+      &::after {
+          right: -20px;
+      }
+
+      .description {
+          margin-top: -20px;
+      }
+    }
+  }
+  .group-header-buttons {
+    align-items: center;
+    display: flex;
+  }
+}
+</style>

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

@@ -1,4 +1,4 @@
-import { useResourceCardRow } from '@shell/components/Resource/Detail/Card/StateCard/composables';
+import { useResourceCardRow, useResourceCardRowFromRelationships } from '@shell/components/Resource/Detail/Card/StateCard/composables';
 
 describe('useResourceCardRow', () => {
   describe('with default keys', () => {
@@ -140,3 +140,92 @@ describe('useResourceCardRow', () => {
     });
   });
 });
+
+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'
+    }));
+  });
+});

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

@@ -1,11 +1,26 @@
 import { Count, Props as ResourceRowProps } from '@shell/components/Resource/Detail/ResourceRow.types';
-import { useI18n } from '@shell/composables/useI18n';
-import { INGRESS, SERVICE } from '@shell/config/types';
 import { isHigherAlert, StateColor } from '@shell/utils/style';
-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 { simpleColorForState, stateDisplay as stateDisplayFn } from '@shell/plugins/dashboard-store/resource-class';
+
+interface Tuple extends Count {
+  color: StateColor;
+}
+
+export interface SummaryCountValue {
+  total: number;
+  namespace?: Record<string, number>;
+}
+
+export interface SummaryEntry {
+  property: string;
+  counts: Record<string, SummaryCountValue>;
+}
+
+export interface SummaryResult {
+  count: number;
+  summary: SummaryEntry[] | null;
+}
 
 export function useResourceCardRow(label: string, resources: any[], stateColorKey = 'stateSimpleColor', stateDisplayKey = 'stateDisplay', to?: RouteLocationRaw): ResourceRowProps {
   const agg: any = {};
@@ -20,12 +35,9 @@ export function useResourceCardRow(label: string, resources: any[], stateColorKe
     agg[state].count++;
   });
 
-  interface Tuple extends Count {
-    color: StateColor;
-  }
   const tuples: Tuple[] = Object.values(agg);
 
-  tuples.sort((left: any, right: any) => {
+  tuples.sort((left: Tuple, right: Tuple) => {
     if (isHigherAlert(left.color, right.color)) {
       return -1;
     }
@@ -49,94 +61,52 @@ export function useResourceCardRow(label: string, resources: any[], stateColorKe
   };
 }
 
-export interface Pairs {
-    label: string;
-    to?: RouteLocationRaw;
-    resources: any[];
-}
-
-export function useDefaultResources(pairs: Ref<Pairs[]>) {
-  const pairsValue = toValue(pairs);
-  const rows = computed(() => pairsValue.map(({ label, resources, to }) => useResourceCardRow(label, resources, undefined, undefined, to)));
-
-  return rows;
-}
-
-export function useResourcePair(label: string, type: string, resources?: any[]) {
-  const store = useStore();
+/**
+ * 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
+    };
+  }
 
-  return computed(() => {
-    if (!resources) {
-      return undefined;
-    }
+  const agg: Record<string, { color: StateColor; label: string; count: number }> = {};
 
-    const resourcesValue = toValue(resources);
+  relationships.forEach((r: any) => {
+    const state = (r.state || 'missing').toLowerCase();
+    const color = simpleColorForState(state) as StateColor;
+    const display = (stateDisplayFn(state) as string)?.toLowerCase() || state;
 
-    return {
-      label,
-      resources: resourcesValue,
-      to:        (resourcesValue?.length > 0) ? {
-        name:   'c-cluster-product-resource',
-        params: {
-          cluster:  store.getters.currentCluster.id,
-          product:  store.getters.currentProduct.name,
-          resource: type
-        }
-      } : undefined,
+    agg[state] = agg[state] || {
+      color, label: display, count: 0
     };
+    agg[state].count++;
   });
-}
 
-export function useDefaultWorkloadResources(services?: any[], ingresses?: any[], referredToBy?: any[], refersTo?: any[]): StateCardProps {
-  const store = useStore();
-  const i18n = useI18n(store);
-
-  const pairs: Ref<(Pairs | undefined)[]> = computed(() => [
-    useResourcePair(i18n.t('component.resource.detail.card.resourcesCard.rows.services'), SERVICE, services).value,
-    useResourcePair(i18n.t('component.resource.detail.card.resourcesCard.rows.ingresses'), INGRESS, ingresses).value,
-    referredToBy ? {
-      label:     i18n.t('component.resource.detail.card.resourcesCard.rows.referredToBy'),
-      resources: toValue(referredToBy || []),
-      to:        { hash: '#related' }
-    } : undefined,
-    refersTo ? {
-      label:     i18n.t('component.resource.detail.card.resourcesCard.rows.refersTo'),
-      resources: toValue(refersTo || []),
-      to:        { hash: '#related' }
-    } : undefined
-  ]);
-
-  const remainingPairs = computed(() => pairs.value.filter((p: (Pairs | undefined)): p is Pairs => p !== undefined));
-
-  const rows = useDefaultResources(remainingPairs);
+  const tuples: Tuple[] = Object.values(agg);
 
-  return {
-    title: 'Resources',
-    rows:  rows.value
-  };
-}
+  tuples.sort((left: Tuple, right: Tuple) => {
+    if (isHigherAlert(left.color, right.color)) {
+      return -1;
+    }
 
-export function useDefaultWorkloadInsightsCardProps(): StateCardProps {
-  const store = useStore();
-  const i18n = useI18n(store);
-
-  const rows: ResourceRowProps[] = [
-    {
-      label:  i18n.t('component.resource.detail.card.insightsCard.rows.conditions'),
-      to:     '#conditions',
-      color:  'disabled',
-      counts: [{ label: 'Available', count: 1 }, { label: 'Progressing', count: 1 }]
-    },
-    {
-      label:  i18n.t('component.resource.detail.card.insightsCard.rows.events'),
-      to:     '#events',
-      color:  'disabled',
-      counts: [{ label: 'Normal', count: 2 }]
+    if (left.color !== right.color) {
+      return 1;
     }
-  ];
+
+    if (left.count === right.count) {
+      return 0;
+    }
+
+    return left.count > right.count ? -1 : 1;
+  });
 
   return {
-    title: i18n.t('component.resource.detail.card.insightsCard.title'),
-    rows
+    label,
+    color:  tuples.length ? tuples[0].color : undefined,
+    counts: tuples.length ? tuples : undefined,
+    to
   };
 }

package/components/Resource/Detail/Card/StatusCard/__tests__/StatusCard.test.ts

@@ -3,6 +3,7 @@ import StatusCard from '@shell/components/Resource/Detail/Card/StatusCard/index.
 import StatusBar from '@shell/components/Resource/Detail/StatusBar.vue';
 import StatusRow from '@shell/components/Resource/Detail/StatusRow.vue';
 import Scaler from '@shell/components/Resource/Detail/Card/Scaler.vue';
+import type { SummaryResult } from '@shell/components/Resource/Detail/Card/StateCard/composables';
 
 describe('component: StatusCard', () => {
   const mockResource = (stateDisplay: string, stateSimpleColor: string) => ({
@@ -106,4 +107,64 @@ describe('component: StatusCard', () => {
       expect(wrapper.findComponent(Scaler).exists()).toBe(false);
     });
   });
+
+  describe('with summaryData', () => {
+    it('should render StatusBar and StatusRows from summary counts', () => {
+      const summaryData: SummaryResult = {
+        count:   5,
+        summary: [{ property: 'metadata.state.name', counts: { running: { total: 3 }, error: { total: 2 } } }]
+      };
+
+      const wrapper = mountCard({ summaryData });
+
+      expect(wrapper.findComponent(StatusBar).exists()).toBe(true);
+      expect(wrapper.findAllComponents(StatusRow)).toHaveLength(2);
+    });
+
+    it('should use summaryData over resources when both are provided', () => {
+      const summaryData: SummaryResult = {
+        count:   4,
+        summary: [{ property: 'metadata.state.name', counts: { running: { total: 3 }, completed: { total: 1 } } }]
+      };
+      const resources = [
+        mockResource('Running', 'text-success'),
+      ];
+
+      const wrapper = mountCard({ summaryData, resources });
+
+      expect(wrapper.findAllComponents(StatusRow)).toHaveLength(2);
+    });
+
+    it('should fall back to resources when summaryData has no summary', () => {
+      const summaryData: SummaryResult = { count: 0, summary: null };
+      const resources = [
+        mockResource('Running', 'text-success'),
+        mockResource('Error', 'text-error'),
+      ];
+
+      const wrapper = mountCard({ summaryData, resources });
+
+      expect(wrapper.findAllComponents(StatusRow)).toHaveLength(2);
+    });
+
+    it('should show noResourcesMessage when summaryData has no counts', () => {
+      const summaryData: SummaryResult = { count: 0, summary: [] };
+
+      const wrapper = mountCard({ summaryData, noResourcesMessage: 'No pods' });
+
+      expect(wrapper.findComponent(StatusBar).exists()).toBe(false);
+      expect(wrapper.find('.text-deemphasized').text()).toBe('No pods');
+    });
+
+    it('should render a single state from summary', () => {
+      const summaryData: SummaryResult = {
+        count:   2,
+        summary: [{ property: 'metadata.state.name', counts: { active: { total: 2 } } }]
+      };
+
+      const wrapper = mountCard({ summaryData });
+
+      expect(wrapper.findAllComponents(StatusRow)).toHaveLength(1);
+    });
+  });
 });

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

@@ -8,10 +8,13 @@ import { useI18n } from '@shell/composables/useI18n';
 import { StateColor } from '@shell/utils/style';
 import { computed } from 'vue';
 import { useStore } from 'vuex';
+import { colorForState as colorForStateFn, stateDisplay as stateDisplayFn } from '@shell/plugins/dashboard-store/resource-class';
+import type { SummaryResult } from '@shell/components/Resource/Detail/Card/StateCard/composables';
 
 export interface Props {
   title: string;
   resources?: any[];
+  summaryData?: SummaryResult | null;
   showScaling?: boolean;
   noResourcesMessage?: string;
 }
@@ -23,23 +26,47 @@ const i18n = useI18n(store);
 
 const props = withDefaults(defineProps<Props>(), {
   resources:          undefined,
+  summaryData:        undefined,
   showScaling:        false,
   noResourcesMessage: undefined
 });
 const emit = defineEmits(['decrease', 'increase']);
 
+const summaryStateCounts = computed(() => {
+  const summary = props.summaryData?.summary;
+
+  if (!summary?.length) {
+    return null;
+  }
+
+  const entry = summary.find((s) => s.property === 'metadata.state.name');
+
+  return entry?.counts || null;
+});
+
 const segmentAccumulator = computed(() => {
   interface Value {
     count: number;
   }
   const accumulator: {[key in StateColor]?: Value} = {};
-
-  props.resources?.forEach((resource: any) => {
-    const color: StateColor = resource.stateSimpleColor;
-
-    accumulator[color] = accumulator[color] || { count: 0 };
-    accumulator[color].count++;
-  });
+  const stateCounts = summaryStateCounts.value;
+
+  if (stateCounts) {
+    for (const [state, stateCount] of Object.entries(stateCounts)) {
+      const colorRaw = colorForStateFn(state) as string;
+      const color = (colorRaw?.replace('text-', '') || 'disabled') as StateColor;
+
+      accumulator[color] = accumulator[color] || { count: 0 };
+      accumulator[color].count += stateCount.total;
+    }
+  } else {
+    props.resources?.forEach((resource: any) => {
+      const color: StateColor = resource.stateSimpleColor || 'disabled';
+
+      accumulator[color] = accumulator[color] || { count: 0 };
+      accumulator[color].count++;
+    });
+  }
 
   return accumulator;
 });
@@ -50,21 +77,40 @@ const rowAccumulator = computed(() => {
     color: StateColor;
   }
   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].color = resource.stateSimpleColor.replace('text-', '') as StateColor;
-  });
+  const stateCounts = summaryStateCounts.value;
+
+  if (stateCounts) {
+    for (const [state, stateCount] of Object.entries(stateCounts)) {
+      const display = stateDisplayFn(state) as string;
+      const colorRaw = colorForStateFn(state) as string;
+      const color = (colorRaw?.replace('text-', '') || 'disabled') as StateColor;
+
+      accumulator[display] = accumulator[display] || { count: 0, color };
+      accumulator[display].count += stateCount.total;
+    }
+  } else {
+    props.resources?.forEach((resource: any) => {
+      const color = (resource.stateSimpleColor?.replace('text-', '') || 'disabled') as StateColor;
+
+      accumulator[resource.stateDisplay] = accumulator[resource.stateDisplay] || { count: 0, color };
+      accumulator[resource.stateDisplay].count++;
+    });
+  }
 
   return accumulator;
 });
 
 const percent = (count: number, total: number) => {
-  return count / total * 100;
+  return total > 0 ? count / total * 100 : 0;
 };
 
-const count = computed(() => props.resources?.length || 0);
+const count = computed(() => {
+  if (summaryStateCounts.value) {
+    return props.summaryData?.count ?? 0;
+  }
+
+  return props.resources?.length ?? 0;
+});
 
 const segmentColors = computed(() => Object.keys(segmentAccumulator.value) as StateColor[]);
 const segments = computed(() => segmentColors.value.map((color: StateColor) => ({

package/components/Resource/Detail/Metadata/IdentifyingInformation/index.vue

@@ -103,12 +103,28 @@ const getRowValueId = (row:Row): string => `value-${ row.label }:${ row.value }`
     flex-direction: column;
 
     .row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      // Hide clearfix pseudo-elements inherited from the global .row class
+      &::before, &::after {
+        display: none;
+      }
+
       &:not(:last-of-type) {
         margin-bottom: 8px;
       }
 
       .full-custom-value {
         flex: 1;
+        min-width: 0;
+
+        // Override inline-block on .popover-card-target so it respects the
+        // parent's width constraint instead of sizing to its content
+        :deep(.popover-card-target) {
+          width: 100%;
+        }
       }
 
       .value {
@@ -128,7 +144,7 @@ const getRowValueId = (row:Row): string => `value-${ row.label }:${ row.value }`
 
       .label {
         width: 30%;
-        min-width: 120px;
+        min-width: min-content;
       }
 
       .status {