Fix bugs

Author: DaryaVorontsova

src/components/NetworkTable/NetworkTable.tsx

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

src/components/nodesColumns/columns.tsx

@@ -564,7 +564,7 @@ export function getPeerSkewColumn<T extends {ClockSkewUs?: string | number}>():
         resizeMinWidth: 90,
         render: ({row}) =>
             isNumeric(row.ClockSkewUs)
-                ? formatToMs(parseUsToMs(row.ClockSkewUs))
+                ? formatToMs(parseUsToMs(row.ClockSkewUs, 2))
                 : EMPTY_DATA_PLACEHOLDER,
     };
 }
@@ -578,7 +578,7 @@ export function getPeerPingColumn<T extends {PingTimeUs?: string | number}>(): C
         resizeMinWidth: 90,
         render: ({row}) =>
             isNumeric(row.PingTimeUs)
-                ? formatToMs(parseUsToMs(row.PingTimeUs))
+                ? formatToMs(parseUsToMs(row.PingTimeUs, 2))
                 : EMPTY_DATA_PLACEHOLDER,
     };
 }

src/containers/Node/Node.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import {Tab, TabList, TabProvider} from '@gravity-ui/uikit';
 import {skipToken} from '@reduxjs/toolkit/query';
 import {Helmet} from 'react-helmet-async';
-import {useRouteMatch} from 'react-router-dom';
+import {useHistory, useRouteMatch} from 'react-router-dom';
 import {useQueryParams} from 'use-query-params';
 
 import {EntityPageTitle} from '../../components/EntityPageTitle/EntityPageTitle';
@@ -50,6 +50,7 @@ export function Node() {
     const configsAvailable = isViewerUser && hasConfigs;
 
     const dispatch = useTypedDispatch();
+    const history = useHistory();
 
     const match = useRouteMatch<{id: string; activeTab: string}>(routes.node);
 
@@ -71,6 +72,7 @@ export function Node() {
 
     const capabilitiesLoaded = useCapabilitiesLoaded();
     const isDiskPagesAvailable = useDiskPagesAvailable();
+    const isPeersHandlerAvailable = useViewerPeersHandlerAvailable();
 
     const pageLoading = isLoading || !capabilitiesLoaded;
 
@@ -92,13 +94,23 @@ export function Node() {
         if (!threadsQuantity) {
             skippedTabs.push('threads');
         }
+        if (!isPeersHandlerAvailable) {
+            skippedTabs.push('network');
+        }
         const actualNodeTabs = NODE_TABS.filter((el) => !skippedTabs.includes(el.id));
 
         const actualActiveTab =
             actualNodeTabs.find(({id}) => id === activeTabId) ?? actualNodeTabs[0];
 
         return {activeTab: actualActiveTab, nodeTabs: actualNodeTabs};
-    }, [isStorageNode, isDiskPagesAvailable, activeTabId, threadsQuantity, configsAvailable]);
+    }, [
+        isStorageNode,
+        isDiskPagesAvailable,
+        isPeersHandlerAvailable,
+        activeTabId,
+        threadsQuantity,
+        configsAvailable,
+    ]);
 
     const database = tenantNameFromQuery?.toString();
 
@@ -118,6 +130,18 @@ export function Node() {
         }
     }, [dispatch, database, nodeId, isLoading, isStorageNode, databaseName]);
 
+    React.useEffect(() => {
+        if (!nodeId || !activeTab) {
+            return;
+        }
+
+        if (activeTab.id !== activeTabId) {
+            const path = getDefaultNodePath({id: nodeId, activeTab: activeTab.id}, {database});
+
+            history.replace(path);
+        }
+    }, [nodeId, database, activeTab.id, activeTabId, history, activeTab]);
+
     return (
         <div className={b(null)} ref={container}>
             {<NodePageHelmet node={node} activeTabTitle={activeTab.title} />}
@@ -216,8 +240,6 @@ function NodePageContent({
     tabs,
     parentContainer,
 }: NodePageContentProps) {
-    const isPeersHandlerAvailable = useViewerPeersHandlerAvailable();
-
     const renderTabs = () => {
         return (
             <div className={b('tabs')}>
@@ -286,10 +308,6 @@ function NodePageContent({
             }
 
             case 'network': {
-                if (!isPeersHandlerAvailable) {
-                    return i18n('alert_no-peers');
-                }
-
                 return <NodeNetwork nodeId={nodeId} scrollContainerRef={parentContainer} />;
             }
 

src/containers/Node/NodeNetwork/columns.ts

@@ -28,7 +28,7 @@ function getPeerConnectTimeColumn<T extends {ConnectTime?: string}>(): Column<T>
         name: NODE_NETWORK_COLUMNS_IDS.ConnectTime,
         header: NODE_NETWORK_COLUMNS_TITLES.ConnectTime,
         align: DataTable.LEFT,
-        width: 150,
+        width: 160,
         resizeMinWidth: 120,
         render: ({row}) =>
             row.ConnectTime ? formatDateTime(row.ConnectTime) : EMPTY_DATA_PLACEHOLDER,

src/containers/Nodes/Nodes.tsx

@@ -37,7 +37,6 @@ export interface NodesProps {
     requiredColumnsIds?: NodesColumnId[];
     selectedColumnsKey?: string;
     groupByParams?: NodesGroupByField[];
-    nodeId?: string;
 }
 
 export function Nodes({
@@ -51,7 +50,6 @@ 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();
 
@@ -111,7 +109,6 @@ export function Nodes({
             selectedColumnsKey={selectedColumnsKey}
             groupByParams={effectiveGroupByParams}
             onDataFetched={handleDataFetched}
-            nodeId={nodeId}
         />
     );
 }

src/containers/Nodes/NodesTable.tsx

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

src/containers/Nodes/PaginatedNodes/GroupedNodesComponent.tsx

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

src/containers/Nodes/PaginatedNodes/NodesComponent.tsx

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

src/containers/Nodes/PaginatedNodes/PaginatedNodes.tsx

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