feat: use environment in paths

src/components/NodeHostWrapper/NodeHostWrapper.tsx

@@ -1,4 +1,4 @@
-import {getDefaultNodePath} from '../../containers/Node/NodePages';
+import {getDefaultNodePath} from '../../routes';
 import type {PreparedStorageNode} from '../../store/reducers/storage/types';
 import type {NodeAddress} from '../../types/additionalProps';
 import type {TNodeInfo, TSystemStateInfo} from '../../types/api/nodes';
@@ -35,11 +35,10 @@ export const NodeHostWrapper = ({
 
     const nodePath = isNodeAvailable
         ? getDefaultNodePath(
-              node.NodeId,
+              {id: node.NodeId, activeTab: node.TenantName ? 'tablets' : 'storage'},
               {
                   database: database ?? node.TenantName,
               },
-              node.TenantName ? 'tablets' : 'storage',
           )
         : undefined;
 

src/components/NodeId/NodeId.tsx

@@ -1,4 +1,4 @@
-import {getDefaultNodePath} from '../../containers/Node/NodePages';
+import {getDefaultNodePath} from '../../routes';
 import {useDatabaseFromQuery} from '../../utils/hooks/useDatabaseFromQuery';
 import {InternalLink} from '../InternalLink';
 
@@ -8,5 +8,5 @@ interface NodeIdProps {
 
 export function NodeId({id}: NodeIdProps) {
     const database = useDatabaseFromQuery();
-    return <InternalLink to={getDefaultNodePath(id, {database})}>{id}</InternalLink>;
+    return <InternalLink to={getDefaultNodePath({id}, {database})}>{id}</InternalLink>;
 }

src/components/PDiskInfo/PDiskInfo.tsx

@@ -1,6 +1,5 @@
 import {Flex} from '@gravity-ui/uikit';
 
-import {getPDiskPagePath} from '../../routes';
 import {valueIsDefined} from '../../utils';
 import {formatBytes} from '../../utils/bytesParsers';
 import {formatStorageValuesToGb} from '../../utils/dataFormatters/dataFormatters';
@@ -10,6 +9,7 @@ import {useIsUserAllowedToMakeChanges} from '../../utils/hooks/useIsUserAllowedT
 import type {InfoViewerItem} from '../InfoViewer';
 import {InfoViewer} from '../InfoViewer/InfoViewer';
 import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
+import {PDiskPageLink} from '../PDiskPageLink/PDiskPageLink';
 import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
 import {StatusIcon} from '../StatusIcon/StatusIcon';
 
@@ -149,7 +149,6 @@ function getPDiskInfo<T extends PreparedPDisk>({
         valueIsDefined(nodeId);
 
     if (shouldDisplayLinks) {
-        const pDiskPagePath = getPDiskPagePath(PDiskId, nodeId);
         const pDiskInternalViewerPath = createPDiskDeveloperUILink({
             nodeId,
             pDiskId: PDiskId,
@@ -159,13 +158,7 @@ function getPDiskInfo<T extends PreparedPDisk>({
             label: pDiskInfoKeyset('links'),
             value: (
                 <Flex wrap="wrap" gap={2}>
-                    {withPDiskPageLink && (
-                        <LinkWithIcon
-                            title={pDiskInfoKeyset('pdisk-page')}
-                            url={pDiskPagePath}
-                            external={false}
-                        />
-                    )}
+                    {withPDiskPageLink && <PDiskPageLink pDiskId={PDiskId} nodeId={nodeId} />}
                     {isUserAllowedToMakeChanges && (
                         <LinkWithIcon
                             title={pDiskInfoKeyset('developer-ui')}

src/components/PDiskInfo/i18n/en.json

@@ -19,7 +19,6 @@
   "links": "Links",
 
   "developer-ui": "Developer UI",
-  "pdisk-page": "PDisk page",
 
   "yes": "Yes"
 }

src/components/PDiskPageLink/PDiskPageLink.tsx

@@ -0,0 +1,19 @@
+import {getPDiskPagePath} from '../../routes';
+import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
+
+import {i18n} from './i18n';
+
+interface PDiskPageLinkProps {
+    pDiskId: string | number;
+    nodeId: string | number;
+}
+
+export function PDiskPageLink({pDiskId: PDiskId, nodeId}: PDiskPageLinkProps) {
+    return (
+        <LinkWithIcon
+            title={i18n('pdisk-page')}
+            url={getPDiskPagePath(PDiskId, nodeId)}
+            external={false}
+        />
+    );
+}

src/components/PDiskPageLink/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "pdisk-page": "PDisk page"
+}

src/components/PDiskPageLink/i18n/index.ts

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-pDisk-link';
+
+export const i18n = registerKeysets(COMPONENT, {en});

src/components/PDiskPopup/PDiskPopup.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 
 import {Flex} from '@gravity-ui/uikit';
 
-import {getPDiskPagePath} from '../../routes';
 import {selectNodesMap} from '../../store/reducers/nodesList';
 import {EFlag} from '../../types/api/enums';
 import {valueIsDefined} from '../../utils';
@@ -17,6 +16,7 @@ import {InfoViewer} from '../InfoViewer';
 import type {InfoViewerItem} from '../InfoViewer';
 import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
 import {pDiskInfoKeyset} from '../PDiskInfo/i18n';
+import {PDiskPageLink} from '../PDiskPageLink/PDiskPageLink';
 
 const errorColors = [EFlag.Orange, EFlag.Red, EFlag.Yellow];
 
@@ -83,16 +83,11 @@ export const preparePDiskData = (
             pDiskId: PDiskId,
         });
 
-        const pDiskPagePath = getPDiskPagePath(PDiskId, NodeId);
         pdiskData.push({
             label: 'Links',
             value: (
                 <Flex gap={2} wrap="wrap">
-                    <LinkWithIcon
-                        title={pDiskInfoKeyset('pdisk-page')}
-                        url={pDiskPagePath}
-                        external={false}
-                    />
+                    <PDiskPageLink pDiskId={PDiskId} nodeId={NodeId} />
                     <LinkWithIcon
                         title={pDiskInfoKeyset('developer-ui')}
                         url={pDiskInternalViewerPath}

src/components/QueriesActivityBar/QueriesActivityAlert.tsx

@@ -2,8 +2,8 @@ import {CirclePlay, Display, Person} from '@gravity-ui/icons';
 import {Button, Card, Flex, Icon, Label, Text} from '@gravity-ui/uikit';
 import {useHistory, useLocation} from 'react-router-dom';
 
-import {TenantTabsGroups, getTenantPath} from '../../containers/Tenant/TenantPages';
-import {parseQuery} from '../../routes';
+import {TenantTabsGroups} from '../../containers/Tenant/TenantPages';
+import {getTenantPath, parseQuery} from '../../routes';
 import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../store/reducers/tenant/constants';
 import {cn} from '../../utils/cn';
 

src/components/QueriesActivityBar/QueriesActivityExpandable.tsx

@@ -4,8 +4,8 @@ import {CirclePlay, Clock, Display, Person, Rocket} from '@gravity-ui/icons';
 import {ArrowToggle, Button, Card, Flex, Icon, Label, Text} from '@gravity-ui/uikit';
 import {useHistory, useLocation} from 'react-router-dom';
 
-import {TenantTabsGroups, getTenantPath} from '../../containers/Tenant/TenantPages';
-import {parseQuery} from '../../routes';
+import {TenantTabsGroups} from '../../containers/Tenant/TenantPages';
+import {getTenantPath, parseQuery} from '../../routes';
 import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../store/reducers/tenant/constants';
 import {cn} from '../../utils/cn';
 

src/components/ShardsTable/ShardsTable.tsx

@@ -12,14 +12,12 @@ import type {ShardsColumn} from './types';
 export interface ShardsTableProps
     extends Omit<ResizeableDataTableProps<KeyValueRow>, 'columnsWidthLSKey' | 'columns'> {
     columnsIds: TopShardsColumnId[];
-    database: string;
     databaseFullPath: string;
     overrideColumns?: ShardsColumn[];
 }
 
 export function ShardsTable({
     columnsIds,
-    database,
     databaseFullPath,
     overrideColumns = [],
     ...props
@@ -33,14 +31,14 @@ export function ShardsTable({
                     return overridedColumn;
                 }
 
-                const column = shardsColumnIdToGetColumn[id]({database, databaseFullPath});
+                const column = shardsColumnIdToGetColumn[id]({databaseFullPath});
 
                 return {
                     ...column,
                     sortable: isSortableTopShardsColumn(column.name),
                 };
             });
-    }, [columnsIds, database, overrideColumns, databaseFullPath]);
+    }, [columnsIds, overrideColumns, databaseFullPath]);
 
     return (
         <ResizeableDataTable

src/components/ShardsTable/columns.tsx

@@ -38,7 +38,7 @@ export const getDataSizeColumn: GetShardsColumn = () => {
         align: DataTable.RIGHT,
     };
 };
-export const getTabletIdColumn: GetShardsColumn = ({database}) => {
+export const getTabletIdColumn: GetShardsColumn = () => {
     return {
         name: TOP_SHARDS_COLUMNS_IDS.TabletId,
         header: TOP_SHARDS_COLUMNS_TITLES.TabletId,
@@ -50,7 +50,6 @@ export const getTabletIdColumn: GetShardsColumn = ({database}) => {
                 <TabletNameWrapper
                     tabletId={row.TabletId}
                     followerId={row.FollowerId || undefined}
-                    database={database}
                 />
             );
         },

src/components/ShardsTable/types.ts

@@ -4,7 +4,4 @@ import type {KeyValueRow} from '../../types/api/query';
 
 export type ShardsColumn = Column<KeyValueRow>;
 
-export type GetShardsColumn = (params: {
-    database: string;
-    databaseFullPath?: string;
-}) => ShardsColumn;
+export type GetShardsColumn = (params: {databaseFullPath?: string}) => ShardsColumn;

src/components/TabletNameWrapper/TabletNameWrapper.tsx

@@ -1,14 +1,14 @@
-import {getTabletPagePath} from '../../routes';
+import {useTabletPagePath} from '../../routes';
 import {EntityStatus} from '../EntityStatus/EntityStatus';
 
 interface TabletNameWrapperProps {
     tabletId: string | number;
     followerId?: string | number;
-    database?: string;
 }
 
-export function TabletNameWrapper({tabletId, followerId, database}: TabletNameWrapperProps) {
-    const tabletPath = getTabletPagePath(tabletId, {database, followerId: followerId?.toString()});
+export function TabletNameWrapper({tabletId, followerId}: TabletNameWrapperProps) {
+    const getTabletPagePath = useTabletPagePath();
+    const tabletPath = getTabletPagePath(tabletId, {followerId: followerId?.toString()});
     const tabletName = `${tabletId}${followerId ? `.${followerId}` : ''}`;
 
     return (

src/components/TabletsStatistic/TabletsStatistic.tsx

@@ -1,6 +1,6 @@
 import {Link} from 'react-router-dom';
 
-import {getDefaultNodePath} from '../../containers/Node/NodePages';
+import {getDefaultNodePath} from '../../routes';
 import type {TTabletStateInfo} from '../../types/api/tablet';
 import {cn} from '../../utils/cn';
 import {getTabletLabel} from '../../utils/constants';
@@ -31,7 +31,7 @@ interface TabletsStatisticProps {
 
 export const TabletsStatistic = ({tablets = [], database, nodeId}: TabletsStatisticProps) => {
     const renderTabletInfo = (item: ReturnType<typeof prepareTablets>[number], index: number) => {
-        const tabletsPath = getDefaultNodePath(nodeId, {database}, 'tablets');
+        const tabletsPath = getDefaultNodePath({id: nodeId, activeTab: 'tablets'}, {database});
 
         const label = `${item.label}: ${item.count}`;
         const className = b('tablet', {state: item.state?.toLowerCase()});

src/components/TenantNameWrapper/TenantNameWrapper.tsx

@@ -1,6 +1,6 @@
 import {DefinitionList, Flex} from '@gravity-ui/uikit';
 
-import {getTenantPath} from '../../containers/Tenant/TenantPages';
+import {getTenantPath} from '../../routes';
 import type {PreparedTenant} from '../../store/reducers/tenants/types';
 import type {AdditionalTenantsProps} from '../../types/additionalProps';
 import {uiFactory} from '../../uiFactory/uiFactory';

src/components/VDisk/VDisk.tsx

@@ -1,13 +1,11 @@
+import {useVDiskPagePath} from '../../routes';
 import {cn} from '../../utils/cn';
 import type {PreparedVDisk} from '../../utils/disks/types';
-import {useDatabaseFromQuery} from '../../utils/hooks/useDatabaseFromQuery';
 import {DiskStateProgressBar} from '../DiskStateProgressBar/DiskStateProgressBar';
 import {HoverPopup} from '../HoverPopup/HoverPopup';
 import {InternalLink} from '../InternalLink';
 import {VDiskPopup} from '../VDiskPopup/VDiskPopup';
 
-import {getVDiskLink} from './utils';
-
 import './VDisk.scss';
 
 const b = cn('ydb-vdisk-component');
@@ -35,10 +33,8 @@ export const VDisk = ({
     delayClose,
     delayOpen,
 }: VDiskProps) => {
-    const database = useDatabaseFromQuery();
-    const vDiskPath = getVDiskLink(data, {
-        database,
-    });
+    const getVDiskLink = useVDiskPagePath();
+    const vDiskPath = getVDiskLink({nodeId: data.NodeId, vDiskId: data.StringifiedId});
 
     return (
         <HoverPopup