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

src/components/NetworkTable/NetworkTable.tsx

@@ -11,14 +11,15 @@ import {
 
 type NetworkWrapperProps = Pick<
     NodesProps,
-    'path' | 'scrollContainerRef' | 'database' | 'databaseFullPath'
+    'path' | 'scrollContainerRef' | 'database' | 'databaseFullPath' | 'nodeId'
 >;
 
 export function NetworkTable({
     database,
     databaseFullPath,
     path,
     scrollContainerRef,
+    nodeId,
 }: NetworkWrapperProps) {
     return (
         <Nodes
@@ -32,6 +33,7 @@ export function NetworkTable({
             requiredColumnsIds={NETWORK_REQUIRED_NODES_COLUMNS}
             selectedColumnsKey={NETWORK_NODES_TABLE_SELECTED_COLUMNS_KEY}
             groupByParams={NETWORK_NODES_GROUP_BY_PARAMS}
+            nodeId={nodeId}
         />
     );
 }

src/containers/Node/Node.tsx

@@ -11,6 +11,7 @@ import {ResponseError} from '../../components/Errors/ResponseError';
 import {FullNodeViewer} from '../../components/FullNodeViewer/FullNodeViewer';
 import {InfoViewerSkeleton} from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
 import {InternalLink} from '../../components/InternalLink';
+import {NetworkTable} from '../../components/NetworkTable/NetworkTable';
 import {PageMetaWithAutorefresh} from '../../components/PageMeta/PageMeta';
 import routes, {getDefaultNodePath} from '../../routes';
 import {
@@ -281,6 +282,16 @@ function NodePageContent({
                 return <Configs database={database} scrollContainerRef={parentContainer} />;
             }
 
+            case 'network': {
+                return (
+                    <NetworkTable
+                        database={database}
+                        scrollContainerRef={parentContainer}
+                        nodeId={nodeId}
+                    />
+                );
+            }
+
             default:
                 return false;
         }

src/containers/Node/NodePages.ts

@@ -11,6 +11,7 @@ const NODE_TABS_IDS = {
     tablets: 'tablets',
     structure: 'structure',
     threads: 'threads',
+    network: 'network',
     configs: 'configs',
 } as const;
 
@@ -41,6 +42,12 @@ export const NODE_TABS = [
             return i18n('tabs.threads');
         },
     },
+    {
+        id: NODE_TABS_IDS.network,
+        get title() {
+            return i18n('tabs.network');
+        },
+    },
     {
         id: NODE_TABS_IDS.configs,
         get title() {

src/containers/Node/i18n/en.json

@@ -6,6 +6,7 @@
   "tabs.structure": "Structure",
   "tabs.tablets": "Tablets",
   "tabs.threads": "Threads",
+  "tabs.network": "Network",
   "tabs.configs": "Configs",
 
   "node": "Node",

src/containers/Nodes/Nodes.tsx

@@ -37,6 +37,7 @@ export interface NodesProps {
     requiredColumnsIds?: NodesColumnId[];
     selectedColumnsKey?: string;
     groupByParams?: NodesGroupByField[];
+    nodeId?: string;
 }
 
 export function Nodes({
@@ -50,6 +51,7 @@ export function Nodes({
     requiredColumnsIds = REQUIRED_NODES_COLUMNS,
     selectedColumnsKey = NODES_TABLE_SELECTED_COLUMNS_LS_KEY,
     groupByParams = ALL_NODES_GROUP_BY_PARAMS,
+    nodeId,
 }: NodesProps) {
     const {handleDataFetched, columnsSettings} = useStorageColumnsSettings();
 
@@ -109,6 +111,7 @@ export function Nodes({
             selectedColumnsKey={selectedColumnsKey}
             groupByParams={effectiveGroupByParams}
             onDataFetched={handleDataFetched}
+            nodeId={nodeId}
         />
     );
 }

src/containers/Nodes/NodesTable.tsx

@@ -20,6 +20,8 @@ interface NodesTableProps {
     database?: string;
     databaseFullPath?: string;
 
+    nodeId?: string;
+
     searchValue: string;
     withProblems: boolean;
     uptimeFilter: NodesUptimeFilterValues;
@@ -40,6 +42,7 @@ export function NodesTable({
     path,
     database,
     databaseFullPath,
+    nodeId,
     searchValue,
     withProblems,
     uptimeFilter,
@@ -56,6 +59,7 @@ export function NodesTable({
             path,
             databaseFullPath,
             database,
+            nodeId,
             searchValue,
             withProblems,
             uptimeFilter,
@@ -67,6 +71,7 @@ export function NodesTable({
         path,
         databaseFullPath,
         database,
+        nodeId,
         searchValue,
         withProblems,
         uptimeFilter,

src/containers/Nodes/PaginatedNodes/GroupedNodesComponent.tsx

@@ -102,6 +102,7 @@ interface GroupedNodesComponentProps {
     selectedColumnsKey: string;
     groupByParams: NodesGroupByField[];
     onDataFetched?: (data: PaginatedTableData<PreparedStorageNode>) => void;
+    nodeId?: string;
 }
 
 export function GroupedNodesComponent({
@@ -116,6 +117,7 @@ export function GroupedNodesComponent({
     selectedColumnsKey,
     groupByParams,
     onDataFetched,
+    nodeId,
 }: GroupedNodesComponentProps) {
     const {searchValue, peerRoleFilter, groupByParam} = useNodesPageQueryParams(
         groupByParams,
@@ -145,6 +147,7 @@ export function GroupedNodesComponent({
             filter: searchValue,
             filter_peer_role: peerRoleFilter,
             group: groupByParam,
+            node_id: nodeId,
             limit: 0,
         },
         {

src/containers/Nodes/PaginatedNodes/NodesComponent.tsx

@@ -27,6 +27,7 @@ interface NodesComponentProps {
     selectedColumnsKey: string;
     groupByParams: NodesGroupByField[];
     onDataFetched?: (data: PaginatedTableData<PreparedStorageNode>) => void;
+    nodeId?: string;
 }
 
 export function NodesComponent({
@@ -41,6 +42,7 @@ export function NodesComponent({
     selectedColumnsKey,
     groupByParams,
     onDataFetched,
+    nodeId,
 }: NodesComponentProps) {
     const {searchValue, uptimeFilter, peerRoleFilter, withProblems} = useNodesPageQueryParams(
         groupByParams,
@@ -78,6 +80,7 @@ export function NodesComponent({
                     path={path}
                     database={database}
                     databaseFullPath={databaseFullPath}
+                    nodeId={nodeId}
                     searchValue={searchValue}
                     withProblems={withProblems}
                     uptimeFilter={uptimeFilter}

src/containers/Nodes/PaginatedNodes/PaginatedNodes.tsx

@@ -30,6 +30,7 @@ export interface PaginatedNodesProps {
     selectedColumnsKey: string;
     groupByParams: NodesGroupByField[];
     onDataFetched?: (data: PaginatedTableData<PreparedStorageNode>) => void;
+    nodeId?: string;
 }
 
 export function PaginatedNodes(props: PaginatedNodesProps) {

src/containers/Nodes/getNodes.ts

@@ -31,6 +31,7 @@ export const getNodes: FetchData<
         peerRoleFilter,
         filterGroup,
         filterGroupBy,
+        nodeId,
     } = filters ?? {};
 
     const sortField = getNodesColumnSortField(columnId);
@@ -55,6 +56,7 @@ export const getNodes: FetchData<
         filter_peer_role: peerRoleFilter,
         filter_group: filterGroup,
         filter_group_by: filterGroupBy,
+        node_id: nodeId,
         fieldsRequired: dataFieldsRequired,
     });
     const preparedResponse = prepareStorageNodesResponse(response);

src/store/reducers/nodes/types.ts

@@ -10,6 +10,7 @@ export interface NodesFilters {
     path?: string;
     databaseFullPath?: string;
     database?: string;
+    nodeId?: string;
 
     filterGroup?: string;
     filterGroupBy?: NodesGroupByField;