feat: add network tab to node page with peer connectivity visualization

Co-authored-by: adameat <[email protected]>

Author: Copilot

src/components/FullNodeViewer/FullNodeViewer.tsx

@@ -1,7 +1,5 @@
 import {Flex} from '@gravity-ui/uikit';
-import {skipToken} from '@reduxjs/toolkit/query';
 
-import {nodeApi} from '../../store/reducers/node/node';
 import type {PreparedNode} from '../../store/reducers/node/types';
 import {cn} from '../../utils/cn';
 import {useNodeDeveloperUIHref} from '../../utils/hooks/useNodeDeveloperUIHref';
@@ -12,7 +10,6 @@ import {PoolUsage} from '../PoolUsage/PoolUsage';
 import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
 import {NodeUptime} from '../UptimeViewer/UptimeViewer';
 
-import {NodeNetworkInfo} from './NodeNetworkInfo';
 import i18n from './i18n';
 
 import './FullNodeViewer.scss';
@@ -22,20 +19,14 @@ const b = cn('full-node-viewer');
 interface FullNodeViewerProps {
     node?: PreparedNode;
     className?: string;
-    database?: string;
 }
 const getLoadAverageIntervalTitle = (index: number) => {
     return [i18n('la-interval-1m'), i18n('la-interval-5m'), i18n('la-interval-15m')][index];
 };
 
-export const FullNodeViewer = ({node, className, database}: FullNodeViewerProps) => {
+export const FullNodeViewer = ({node, className}: FullNodeViewerProps) => {
     const developerUIHref = useNodeDeveloperUIHref(node);
 
-    const nodeId = node?.NodeId?.toString();
-    const {currentData: nodeNetworkInfo} = nodeApi.useGetNodeNetworkInfoQuery(
-        nodeId && database ? {nodeId, database} : skipToken,
-    );
-
     const commonInfo: InfoViewerItem[] = [];
 
     if (node?.Tenants?.length) {
@@ -95,14 +86,6 @@ export const FullNodeViewer = ({node, className, database}: FullNodeViewerProps)
                             info={endpointsInfo}
                         />
                     ) : null}
-
-                    {nodeNetworkInfo ? (
-                        <NodeNetworkInfo
-                            nodeNetworkInfo={nodeNetworkInfo}
-                            className={b('section')}
-                            database={database}
-                        />
-                    ) : null}
                 </Flex>
 
                 <Flex direction="column" gap={2}>

src/components/FullNodeViewer/NodeNetworkInfo.tsx

@@ -17,15 +17,5 @@
   "title.endpoints": "Endpoints",
   "title.roles": "Roles",
   "title.pools": "Pools",
-  "title.load-average": "Load average",
-  "title.network": "Network",
-
-  "network.connected-peers": "Connected peers",
-  "network.total-peers": "Total peers",
-  "network.peer-node-id": "Node ID",
-  "network.peer-host": "Host",
-  "network.peer-dc": "DC",
-  "network.peer-rack": "Rack",
-  "network.peer-connected": "Connected",
-  "network.peer-status": "Status"
+  "title.load-average": "Load average"
 }

src/components/FullNodeViewer/i18n/en.json

@@ -0,0 +1,98 @@
+.node-network {
+    &__inner {
+        padding: 20px;
+    }
+
+    &__controls-wrapper {
+        margin-bottom: 20px;
+    }
+
+    &__controls {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+    }
+
+    &__problem-filter {
+        margin-right: 12px;
+    }
+
+    &__checkbox-wrapper {
+        display: flex;
+        align-items: center;
+    }
+
+    &__nodes-row {
+        display: flex;
+        gap: 32px;
+        align-items: flex-start;
+    }
+
+    &__left,
+    &__right {
+        flex: 1;
+    }
+
+    &__section-title {
+        font-size: 16px;
+        font-weight: 500;
+        margin-bottom: 16px;
+    }
+
+    &__nodes-container {
+        margin-bottom: 24px;
+    }
+
+    &__nodes-title {
+        font-size: 14px;
+        font-weight: 500;
+        margin-bottom: 12px;
+    }
+
+    &__nodes {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+
+    &__rack-column {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-right: 16px;
+    }
+
+    &__rack-index {
+        font-size: 12px;
+        margin-bottom: 8px;
+        min-height: 16px;
+    }
+
+    &__link {
+        color: var(--g-color-text-primary);
+        text-decoration: underline;
+        
+        &:hover {
+            color: var(--g-color-text-primary);
+        }
+    }
+
+    &__placeholder {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 40px;
+        text-align: center;
+    }
+
+    &__placeholder-img {
+        margin-bottom: 16px;
+        opacity: 0.5;
+    }
+
+    &__placeholder-text {
+        color: var(--g-color-text-secondary);
+        font-size: 14px;
+    }
+}