fix(ui): prevent wide gaps in grouped resource tree (#25747)

Signed-off-by: choejwoo <jaewoo45@gmail.com>

Author: choejwoo

ui/src/app/applications/components/application-resource-tree/application-resource-tree.scss

@@ -59,6 +59,7 @@
 
     $pod-size: 25px;
     $gutter: 3px;
+    // Keep in sync with `POD_GROUP_PODS_PER_ROW` in `application-resource-tree.tsx`.
     $pods-per-row: 8;
     $pods-per-column: 4;
     $max-rows: 5;

ui/src/app/applications/components/application-resource-tree/application-resource-tree.tsx

@@ -88,6 +88,9 @@ interface Line {
 const NODE_WIDTH = 282;
 const NODE_HEIGHT = 52;
 const POD_NODE_HEIGHT = 136;
+const POD_GROUP_ROW_HEIGHT = 20;
+// Keep in sync with `$pods-per-row` in `application-resource-tree.scss`.
+const POD_GROUP_PODS_PER_ROW = 8;
 const FILTERED_INDICATOR_NODE = '__filtered_indicator__';
 const EXTERNAL_TRAFFIC_NODE = '__external_traffic__';
 const INTERNAL_TRAFFIC_NODE = '__internal_traffic__';
@@ -400,11 +403,31 @@ function processPodGroup(targetPodGroup: ResourceTreeNode, child: ResourceTreeNo
     }
 }
 
+function getPodGroupNumberOfRows(pods: models.Pod[], showPodGroupByStatus: boolean) {
+    if (!pods || pods.length === 0) {
+        return 0;
+    }
+    if (showPodGroupByStatus) {
+        const statuses = new Set<string>();
+        for (const pod of pods) {
+            if (!pod) {
+                continue;
+            }
+            const health = pod.health;
+            if (health === 'Healthy' || health === 'Degraded' || health === 'Progressing') {
+                statuses.add(health);
+            }
+        }
+        return statuses.size;
+    }
+    return Math.ceil(pods.length / POD_GROUP_PODS_PER_ROW);
+}
+
 function renderPodGroup(
     props: ApplicationResourceTreeProps,
-    id: string,
     node: ResourceTreeNode & dagre.Node & {groupedNodeIds?: string[]},
-    childMap: Map<string, ResourceTreeNode[]>
+    childMap: Map<string, ResourceTreeNode[]>,
+    showPodGroupByStatus: boolean
 ) {
     const fullName = nodeKey(node);
     let comparisonStatus: models.SyncStatusCode = null;
@@ -424,8 +447,6 @@ function renderPodGroup(
         return acc;
     }, []);
     const childCount = nonPodChildren?.length;
-    const margin = 8;
-    let topExtra = 0;
     const podGroup = node.podGroup;
     const podGroupHealthy = [];
     const podGroupDegraded = [];
@@ -444,14 +465,10 @@ function renderPodGroup(
         }
     }
 
-    const showPodGroupByStatus = props.tree.nodes.filter((rNode: ResourceTreeNode) => rNode.kind === 'Pod').length >= props.podGroupCount;
-    const numberOfRows = showPodGroupByStatus
-        ? [podGroupHealthy, podGroupDegraded, podGroupInProgress].reduce((total, podGroupByStatus) => total + (podGroupByStatus.filter(pod => pod).length > 0 ? 1 : 0), 0)
-        : Math.ceil(podGroup?.pods.length / 8);
-
-    if (podGroup) {
-        topExtra = margin + (POD_NODE_HEIGHT / 2 + 30 * numberOfRows) / 2;
-    }
+    // Use Dagre's measured height directly to avoid duplicating sizing logic in the render path.
+    // Dagre assigns node.y as the node center; convert to DOM top-left for rendering.
+    const podGroupHeight = node.height;
+    const podGroupTop = node.y - podGroupHeight / 2;
 
     return (
         <div
@@ -463,9 +480,9 @@ function renderPodGroup(
             title={describeNode(node)}
             style={{
                 left: node.x,
-                top: node.y - topExtra,
+                top: podGroupTop,
                 width: node.width,
-                height: showPodGroupByStatus ? POD_NODE_HEIGHT + 20 * numberOfRows : node.height
+                height: podGroupHeight
             }}>
             <NodeUpdateAnimation resourceVersion={node.resourceVersion} />
             <div onClick={() => props.onNodeClick && props.onNodeClick(fullName)} className={`application-resource-tree__node__top-part`}>
@@ -537,7 +554,7 @@ function renderPodGroup(
                         <>
                             <br />
                             <div
-                                style={{top: node.height / 2 - 6}}
+                                style={{top: podGroupHeight / 2 - 6}}
                                 className='application-resource-tree__node--podgroup--expansion'
                                 onClick={event => {
                                     expandCollapse(node, props);
@@ -767,7 +784,7 @@ function NodeInfoDetails({tag: tag, kind: kind}: {tag: models.InfoItem; kind: st
     }
 }
 
-function renderResourceNode(props: ApplicationResourceTreeProps, id: string, node: ResourceTreeNode & dagre.Node, nodesHavingChildren: Map<string, number>) {
+function renderResourceNode(props: ApplicationResourceTreeProps, node: ResourceTreeNode & dagre.Node, nodesHavingChildren: Map<string, number>) {
     const fullName = nodeKey(node);
     let comparisonStatus: models.SyncStatusCode = null;
     let healthState: models.HealthStatus = null;
@@ -1019,6 +1036,7 @@ export const ApplicationResourceTree = (props: ApplicationResourceTreeProps) =>
     }, [props.filters]);
     const {podGroupCount, userMsgs, updateUsrHelpTipMsgs, setShowCompactNodes} = props;
     const podCount = nodes.filter(node => node.kind === 'Pod').length;
+    const showPodGroupByStatus = props.tree.nodes.filter((rNode: ResourceTreeNode) => rNode.kind === 'Pod').length >= props.podGroupCount;
 
     React.useEffect(() => {
         if (podCount > podGroupCount) {
@@ -1238,8 +1256,14 @@ export const ApplicationResourceTree = (props: ApplicationResourceTreeProps) =>
     }
 
     function setPodGroupNode(node: ResourceTreeNode, root: ResourceTreeNode) {
-        const numberOfRows = Math.ceil(node.podGroup.pods.length / 8);
-        graph.setNode(treeNodeKey(node), {...node, type: NODE_TYPES.podGroup, width: NODE_WIDTH, height: POD_NODE_HEIGHT + 30 * numberOfRows, root});
+        const numberOfRows = getPodGroupNumberOfRows(node.podGroup?.pods, showPodGroupByStatus);
+        graph.setNode(treeNodeKey(node), {
+            ...node,
+            type: NODE_TYPES.podGroup,
+            width: NODE_WIDTH,
+            height: POD_NODE_HEIGHT + POD_GROUP_ROW_HEIGHT * numberOfRows,
+            root
+        });
     }
 
     function processNode(node: ResourceTreeNode, root: ResourceTreeNode, colors?: string[]) {
@@ -1410,9 +1434,9 @@ export const ApplicationResourceTree = (props: ApplicationResourceTreeProps) =>
                         case NODE_TYPES.groupedNodes:
                             return <React.Fragment key={key}>{renderGroupedNodes(props, node as any)}</React.Fragment>;
                         case NODE_TYPES.podGroup:
-                            return <React.Fragment key={key}>{renderPodGroup(props, key, node as ResourceTreeNode & dagre.Node, childrenMap)}</React.Fragment>;
+                            return <React.Fragment key={key}>{renderPodGroup(props, node as ResourceTreeNode & dagre.Node, childrenMap, showPodGroupByStatus)}</React.Fragment>;
                         default:
-                            return <React.Fragment key={key}>{renderResourceNode(props, key, node as ResourceTreeNode & dagre.Node, nodesHavingChildren)}</React.Fragment>;
+                            return <React.Fragment key={key}>{renderResourceNode(props, node as ResourceTreeNode & dagre.Node, nodesHavingChildren)}</React.Fragment>;
                     }
                 })}
                 {edges.map(edge => (