feat: add network peer information to node page

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

Author: Copilot

src/components/FullNodeViewer/FullNodeViewer.tsx

@@ -1,5 +1,7 @@
 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';
@@ -10,6 +12,7 @@ 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';
@@ -19,14 +22,20 @@ 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}: FullNodeViewerProps) => {
+export const FullNodeViewer = ({node, className, database}: 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) {
@@ -86,6 +95,14 @@ export const FullNodeViewer = ({node, className}: 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

@@ -0,0 +1,56 @@
+import {getDefaultNodePath} from '../../containers/Node/NodePages';
+import type {TNodeInfo} from '../../types/api/nodes';
+import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
+import {InfoViewer} from '../InfoViewer/InfoViewer';
+import type {InfoViewerItem} from '../InfoViewer/InfoViewer';
+import {InternalLink} from '../InternalLink';
+
+import i18n from './i18n';
+
+interface NodeNetworkInfoProps {
+    nodeNetworkInfo?: TNodeInfo | null;
+    className?: string;
+    database?: string;
+}
+
+export const NodeNetworkInfo = ({nodeNetworkInfo, className, database}: NodeNetworkInfoProps) => {
+    const peers = nodeNetworkInfo?.Peers;
+
+    if (!peers || peers.length === 0) {
+        return null;
+    }
+
+    const connectedPeers = peers.filter((peer) => peer.Connected);
+    const totalPeers = peers.length;
+
+    const networkInfo: InfoViewerItem[] = [
+        {
+            label: i18n('network.total-peers'),
+            value: totalPeers,
+        },
+        {
+            label: i18n('network.connected-peers'),
+            value: connectedPeers.length,
+        },
+    ];
+
+    // Show up to 5 peers in the info section
+    const displayPeers = peers.slice(0, 5);
+
+    displayPeers.forEach((peer, index) => {
+        const nodeLink = peer.NodeId ? (
+            <InternalLink to={getDefaultNodePath(peer.NodeId, {database})}>
+                {peer.NodeId}
+            </InternalLink>
+        ) : (
+            EMPTY_DATA_PLACEHOLDER
+        );
+
+        networkInfo.push({
+            label: `${i18n('network.peer-node-id')} ${index + 1}`,
+            value: nodeLink,
+        });
+    });
+
+    return <InfoViewer title={i18n('title.network')} className={className} info={networkInfo} />;
+};

src/components/FullNodeViewer/i18n/en.json

@@ -17,5 +17,15 @@
   "title.endpoints": "Endpoints",
   "title.roles": "Roles",
   "title.pools": "Pools",
-  "title.load-average": "Load average"
+  "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"
 }

src/containers/Node/Node.tsx

@@ -109,7 +109,7 @@ export function Node() {
             {<NodePageMeta node={node} loading={pageLoading} />}
             {<NodePageTitle node={node} />}
             {error ? <ResponseError error={error} className={b('error')} /> : null}
-            {<NodePageInfo node={node} loading={pageLoading} />}
+            {<NodePageInfo node={node} loading={pageLoading} database={tenantName} />}
             {nodeId ? (
                 <NodePageContent
                     nodeId={nodeId}
@@ -174,14 +174,15 @@ function NodePageTitle({node}: NodePageTitleProps) {
 interface NodePageInfoProps {
     node?: PreparedNode;
     loading?: boolean;
+    database?: string;
 }
 
-function NodePageInfo({node, loading}: NodePageInfoProps) {
+function NodePageInfo({node, loading, database}: NodePageInfoProps) {
     if (loading) {
         return <InfoViewerSkeleton className={b('info')} rows={10} />;
     }
 
-    return <FullNodeViewer node={node} className={b('info')} />;
+    return <FullNodeViewer node={node} className={b('info')} database={database} />;
 }
 
 interface NodePageContentProps {

src/store/reducers/node/node.ts

@@ -15,6 +15,24 @@ export const nodeApi = api.injectEndpoints({
             },
             providesTags: ['All'],
         }),
+        getNodeNetworkInfo: build.query({
+            queryFn: async ({nodeId, database}: {nodeId: string; database?: string}, {signal}) => {
+                try {
+                    const data = await window.api.viewer.getNodes(
+                        {
+                            node_id: nodeId,
+                            database,
+                            fieldsRequired: ['Peers'],
+                        },
+                        {signal},
+                    );
+                    return {data: data.Nodes?.[0] || null};
+                } catch (error) {
+                    return {error};
+                }
+            },
+            providesTags: ['All'],
+        }),
         getNodeStructure: build.query({
             queryFn: async ({nodeId}: {nodeId: string}, {signal}) => {
                 try {

src/utils/yaMetrica.ts

@@ -2,11 +2,10 @@ import {uiFactory} from '../uiFactory/uiFactory';
 
 /**
  * Interface for a counter that provides methods for tracking metrics.
- *
- * @method hit - Tracks a hit event with optional arguments. https://yandex.ru/support/metrica/ru/objects/hit
- * @method params - Sets parameters for the counter with optional arguments. https://yandex.ru/support/metrica/ru/objects/params-method
- * @method userParams - Sets user-specific parameters for the counter with optional arguments. https://yandex.ru/support/metrica/ru/objects/user-params
- * @method reachGoal - Tracks a goal achievement event with optional arguments. https://yandex.ru/support/metrica/ru/objects/reachgoal
+ * @function hit - Tracks a hit event with optional arguments. https://yandex.ru/support/metrica/ru/objects/hit
+ * @function params - Sets parameters for the counter with optional arguments. https://yandex.ru/support/metrica/ru/objects/params-method
+ * @function userParams - Sets user-specific parameters for the counter with optional arguments. https://yandex.ru/support/metrica/ru/objects/user-params
+ * @function reachGoal - Tracks a goal achievement event with optional arguments. https://yandex.ru/support/metrica/ru/objects/reachgoal
  */
 export interface Counter {
     hit: (...args: unknown[]) => void;
@@ -21,7 +20,6 @@ const yaMetricaMap = uiFactory.yaMetricaMap;
  * A fake implementation of a counter metric for Yandex.Metrica.
  * This class is used when the actual Yandex.Metrica counter is not defined,
  * and it provides a warning message the first time any of its methods are called.
- *
  * @property name - The name of the counter.
  * @property warnShown - Flag to indicate if the warning has been shown.
  */
@@ -61,7 +59,6 @@ class FakeMetrica implements Counter {
 /**
  * Retrieves a Yandex Metrica instance by name from the global window object.
  * If no instance is found for the given name, returns a FakeMetrica instance instead.
- *
  * @param name The name of the metrica to retrieve
  * @returns The Yandex Metrica instance if found, otherwise a FakeMetrica instance
  */