feat: add network tab to node page with peer connectivity visualization #2826
Conversation
Co-authored-by: adameat <[email protected]>
|
@copilot no, you needed to add another tab on the node page. like storage, tablets, threads - there is should be a network tab, very similar to database's network tab. but with filter by current node. |
Co-authored-by: adameat <[email protected]>
You're absolutely right! I've corrected the implementation to add a proper "Network" tab to the node page (alongside Storage, Tablets, Threads tabs) instead of just adding network info to the node information panel. The new Network tab shows:
This matches the database network tab pattern but filtered specifically for the current node. Changes in commit d420599. |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Stand: https://nda.ya.ru/t/H6OOh6tJ7MwxV8
This PR adds a Network tab to the individual node page, displaying connectivity data that helps users understand network topology and relationships between nodes.
Changes Made
New Network Tab
UI Components
NodeNetworkcomponent that follows the same pattern as the database network tabNodeNetworkcomponent from the database diagnostics for consistent visualizationTab Configuration
NODE_TABS_IDSandNODE_TABSconfigurationrenderTabContentswitch in Node.tsxInternationalization
Technical Implementation
The implementation leverages the existing network API (
networkApi.useGetNetworkInfoQuery) and filters the results to focus on the current node and its peers. The network tab uses the same visual components and interaction patterns as the database network tab, providing a consistent user experience.The network information is fetched only when a tenant name is available, and the component gracefully handles cases where no network data or peers are found.
Visual Impact
The network tab provides users with:
This enhancement improves the monitoring and debugging experience for YDB cluster administrators by making network relationships more visible and accessible at the individual node level.
Fixes #2428.
💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.
Greptile Overview
Greptile Summary
This PR adds a Network tab to the individual node page, displaying the current node and its network peers with connectivity visualization.
Key Changes:
NodeNetworkcomponent that filters network data to show current node and its peersNodeNetworkcomponent from database diagnostics for consistent visualizationThe implementation follows established patterns from the tenant diagnostics Network component and correctly integrates with the existing node page tab system.
Confidence Score: 4/5
useMemooptimizations are inconsistent with the codebase - the similar Network.tsx implementation in Tenant/Diagnostics also doesn't useuseMemoforgroupNodesByFieldcalls (lines 61-62). While AGENTS.md recommends memoization for expensive computations, thegroupNodesByFieldoperations on small peer arrays are not expensive enough to require memoization in this context, matching the pattern used throughout the codebase. The feature adds proper error handling, loading states, and integrates cleanly with existing tab navigation.Important Files Changed
File Analysis
Sequence Diagram
sequenceDiagram participant User participant NodePage as Node.tsx participant NodeNetwork as NodeNetwork.tsx participant NetworkAPI as networkApi participant Redux as Redux Store participant Components as UI Components User->>NodePage: Navigate to node page with network tab NodePage->>NodePage: Parse activeTabId from URL NodePage->>NodePage: Filter available tabs based on node capabilities alt Network tab selected NodePage->>NodeNetwork: Render NodeNetwork component NodeNetwork->>Redux: Get auto refresh interval NodeNetwork->>Redux: Get problem filter state NodeNetwork->>NetworkAPI: useGetNetworkInfoQuery(tenantName) NetworkAPI-->>NodeNetwork: Return network data or loading state alt Data loading NodeNetwork->>Components: Show loader Components-->>User: Display loading spinner else Data loaded successfully NodeNetwork->>NodeNetwork: Find current node from allNodes by nodeId NodeNetwork->>NodeNetwork: Extract peers from current node NodeNetwork->>NodeNetwork: Group current node by NodeType NodeNetwork->>NodeNetwork: Group peers by NodeType NodeNetwork->>Components: Render controls (ProblemFilter, checkboxes) NodeNetwork->>Components: Render current node section with Nodes component NodeNetwork->>Components: Render network peers section with Nodes component Components-->>User: Display network visualization else No current node found NodeNetwork->>Components: Show error message Components-->>User: Display 'No network data found for node' else No nodes data NodeNetwork->>Components: Show error message Components-->>User: Display 'No nodes data' else Error occurred NodeNetwork->>Components: Show ResponseError Components-->>User: Display error message end end User->>NodeNetwork: Toggle problem filter NodeNetwork->>Redux: Dispatch changeFilter action Redux-->>NodeNetwork: Update filter state NodeNetwork->>Components: Re-render Nodes with new filter Components-->>User: Update display based on filter User->>NodeNetwork: Toggle show ID checkbox NodeNetwork->>NodeNetwork: Update showId state NodeNetwork->>Components: Re-render Nodes with updated prop Components-->>User: Toggle node ID visibility User->>NodeNetwork: Toggle show racks checkbox NodeNetwork->>NodeNetwork: Update showRacks state NodeNetwork->>Components: Re-render Nodes with rack grouping Components-->>User: Toggle rack visualization User->>Components: Hover over node Components->>Redux: Dispatch showTooltip action Redux-->>User: Display node tooltip User->>Components: Mouse leave node Components->>Redux: Dispatch hideTooltip action Redux-->>User: Hide tooltipCI Results
Test Status:⚠️ FLAKY
📊 Full Report
Test Changes Summary ⏭️2
⏭️ Skipped Tests (2)
Bundle Size: 🔺
Current: 66.15 MB | Main: 66.11 MB
Diff: +0.04 MB (0.05%)
ℹ️ CI Information