diff --git a/src/containers/App/Content.tsx b/src/containers/App/Content.tsx index 38204d933..1683e01ac 100644 --- a/src/containers/App/Content.tsx +++ b/src/containers/App/Content.tsx @@ -13,18 +13,11 @@ import {getUser} from '../../store/reducers/authentication/authentication'; import {nodesListApi} from '../../store/reducers/nodesList'; import {cn} from '../../utils/cn'; import {useTypedDispatch, useTypedSelector} from '../../utils/hooks'; +import {lazyComponent} from '../../utils/lazyComponent'; import Authentication from '../Authentication/Authentication'; -import Cluster from '../Cluster/Cluster'; import {getClusterPath} from '../Cluster/utils'; -import {Clusters} from '../Clusters/Clusters'; import Header from '../Header/Header'; import type {RawBreadcrumbItem} from '../Header/breadcrumbs'; -import Node from '../Node/Node'; -import {PDiskPage} from '../PDiskPage/PDiskPage'; -import {Tablet} from '../Tablet'; -import {TabletsFilters} from '../TabletsFilters/TabletsFilters'; -import Tenant from '../Tenant/Tenant'; -import {VDiskPage} from '../VDiskPage/VDiskPage'; import { ClusterSlot, @@ -54,40 +47,45 @@ const routesSlots: RouteSlot[] = [ { path: routes.cluster, slot: ClusterSlot, - component: Cluster, + component: lazyComponent(() => import('../Cluster/Cluster'), 'Cluster'), }, { path: routes.tenant, slot: TenantSlot, - component: Tenant, + component: lazyComponent(() => import('../Tenant/Tenant'), 'Tenant'), }, { path: routes.node, slot: NodeSlot, - component: Node, + component: lazyComponent(() => import('../Node/Node'), 'Node'), }, { path: routes.pDisk, slot: PDiskPageSlot, - component: PDiskPage, + component: lazyComponent(() => import('../PDiskPage/PDiskPage'), 'PDiskPage'), }, { path: routes.vDisk, slot: VDiskPageSlot, - component: VDiskPage, + component: lazyComponent(() => import('../VDiskPage/VDiskPage'), 'VDiskPage'), }, { path: routes.tablet, slot: TabletSlot, - component: Tablet, + component: lazyComponent(() => import('../Tablet'), 'Tablet'), }, { path: routes.tabletsFilters, slot: TabletsFiltersSlot, - component: TabletsFilters, + component: lazyComponent( + () => import('../TabletsFilters/TabletsFilters'), + 'TabletsFilters', + ), }, ]; +const Clusters = lazyComponent(() => import('../Clusters/Clusters'), 'Clusters'); + function renderRouteSlot(slots: SlotMap, route: RouteSlot) { return ( { return renderRouteSlot(slots, route); })} - + } + /> diff --git a/src/containers/App/Providers.tsx b/src/containers/App/Providers.tsx index 85ea859df..3193b76c7 100644 --- a/src/containers/App/Providers.tsx +++ b/src/containers/App/Providers.tsx @@ -5,7 +5,7 @@ import type {Store} from '@reduxjs/toolkit'; import type {History} from 'history'; import {HelmetProvider} from 'react-helmet-async'; import {Provider} from 'react-redux'; -import {Router} from 'react-router'; +import {Router} from 'react-router-dom'; import {QueryParamProvider} from 'use-query-params'; import {ReactRouter5Adapter} from 'use-query-params/adapters/react-router-5'; diff --git a/src/containers/App/appSlots.tsx b/src/containers/App/appSlots.tsx index 09a8bd729..8703010d8 100644 --- a/src/containers/App/appSlots.tsx +++ b/src/containers/App/appSlots.tsx @@ -1,13 +1,13 @@ -import type {RedirectProps, RouteComponentProps} from 'react-router'; +import type {RedirectProps, RouteComponentProps} from 'react-router-dom'; import {createSlot} from '../../components/slots'; -import type Cluster from '../Cluster/Cluster'; +import type {Cluster} from '../Cluster/Cluster'; import type {Clusters} from '../Clusters/Clusters'; -import type Node from '../Node/Node'; +import type {Node} from '../Node/Node'; import type {PDiskPage} from '../PDiskPage/PDiskPage'; import type {Tablet} from '../Tablet'; import type {TabletsFilters} from '../TabletsFilters/TabletsFilters'; -import type Tenant from '../Tenant/Tenant'; +import type {Tenant} from '../Tenant/Tenant'; import type {VDiskPage} from '../VDiskPage/VDiskPage'; export const ClustersSlot = createSlot<{ diff --git a/src/containers/AppWithClusters/ExtendedCluster/ExtendedCluster.tsx b/src/containers/AppWithClusters/ExtendedCluster/ExtendedCluster.tsx index f37e0509a..0a261b1cb 100644 --- a/src/containers/AppWithClusters/ExtendedCluster/ExtendedCluster.tsx +++ b/src/containers/AppWithClusters/ExtendedCluster/ExtendedCluster.tsx @@ -13,7 +13,7 @@ import {cn} from '../../../utils/cn'; import type {GetMonitoringClusterLink, GetMonitoringLink} from '../../../utils/monitoring'; import {getCleanBalancerValue, removeViewerPathname} from '../../../utils/parseBalancer'; import {getBackendFromNodeHost} from '../../../utils/prepareBackend'; -import type Cluster from '../../Cluster/Cluster'; +import type {Cluster} from '../../Cluster/Cluster'; import {useClusterData} from '../useClusterData'; import './ExtendedCluster.scss'; diff --git a/src/containers/AppWithClusters/ExtendedNode/ExtendedNode.tsx b/src/containers/AppWithClusters/ExtendedNode/ExtendedNode.tsx index aae4afaee..d26d492a1 100644 --- a/src/containers/AppWithClusters/ExtendedNode/ExtendedNode.tsx +++ b/src/containers/AppWithClusters/ExtendedNode/ExtendedNode.tsx @@ -1,4 +1,4 @@ -import type Node from '../../Node/Node'; +import type {Node} from '../../Node/Node'; import {useClusterData} from '../useClusterData'; export function ExtendedNode({component: NodeComponent}: {component: typeof Node}) { diff --git a/src/containers/AppWithClusters/ExtendedTenant/ExtendedTenant.tsx b/src/containers/AppWithClusters/ExtendedTenant/ExtendedTenant.tsx index 2b82af2f4..36500b21c 100644 --- a/src/containers/AppWithClusters/ExtendedTenant/ExtendedTenant.tsx +++ b/src/containers/AppWithClusters/ExtendedTenant/ExtendedTenant.tsx @@ -1,7 +1,7 @@ import {MonitoringButton} from '../../../components/MonitoringButton/MonitoringButton'; import type {ETenantType} from '../../../types/api/tenant'; import type {GetMonitoringLink} from '../../../utils/monitoring'; -import type Tenant from '../../Tenant/Tenant'; +import type {Tenant} from '../../Tenant/Tenant'; import {useClusterData} from '../useClusterData'; export interface ExtendedTenantProps { diff --git a/src/containers/AppWithClusters/useClusterData.ts b/src/containers/AppWithClusters/useClusterData.ts index a7f994a63..53fece6f6 100644 --- a/src/containers/AppWithClusters/useClusterData.ts +++ b/src/containers/AppWithClusters/useClusterData.ts @@ -1,6 +1,6 @@ import React from 'react'; -import {useLocation} from 'react-router'; +import {useLocation} from 'react-router-dom'; import {parseQuery} from '../../routes'; import {clustersApi} from '../../store/reducers/clusters/clusters'; diff --git a/src/containers/AsideNavigation/YdbInternalUser/YdbInternalUser.tsx b/src/containers/AsideNavigation/YdbInternalUser/YdbInternalUser.tsx index 0a885f10d..b3a1eebb6 100644 --- a/src/containers/AsideNavigation/YdbInternalUser/YdbInternalUser.tsx +++ b/src/containers/AsideNavigation/YdbInternalUser/YdbInternalUser.tsx @@ -1,6 +1,6 @@ import {ArrowRightFromSquare, ArrowRightToSquare} from '@gravity-ui/icons'; import {Button, Icon} from '@gravity-ui/uikit'; -import {useHistory} from 'react-router'; +import {useHistory} from 'react-router-dom'; import routes, {createHref} from '../../../routes'; import {logout} from '../../../store/reducers/authentication/authentication'; diff --git a/src/containers/Authentication/Authentication.tsx b/src/containers/Authentication/Authentication.tsx index e7b08d118..7fd8f935b 100644 --- a/src/containers/Authentication/Authentication.tsx +++ b/src/containers/Authentication/Authentication.tsx @@ -2,7 +2,7 @@ import React from 'react'; import {Eye, EyeSlash, Xmark} from '@gravity-ui/icons'; import {Button, Link as ExternalLink, Icon, TextInput} from '@gravity-ui/uikit'; -import {useHistory, useLocation} from 'react-router'; +import {useHistory, useLocation} from 'react-router-dom'; import {parseQuery} from '../../routes'; import {authenticate} from '../../store/reducers/authentication/authentication'; diff --git a/src/containers/Cluster/Cluster.tsx b/src/containers/Cluster/Cluster.tsx index 6c8ac5a22..ad8c6fda7 100644 --- a/src/containers/Cluster/Cluster.tsx +++ b/src/containers/Cluster/Cluster.tsx @@ -41,7 +41,7 @@ interface ClusterProps { additionalVersionsProps?: AdditionalVersionsProps; } -function Cluster({ +export function Cluster({ additionalClusterProps, additionalTenantsProps, additionalNodesProps, @@ -198,7 +198,11 @@ function Cluster({ > - + ( + + )} + /> @@ -228,5 +232,3 @@ function useClusterTab() { return activeTab; } - -export default Cluster; diff --git a/src/containers/Node/Node.tsx b/src/containers/Node/Node.tsx index d676c08de..3c547d516 100644 --- a/src/containers/Node/Node.tsx +++ b/src/containers/Node/Node.tsx @@ -33,7 +33,7 @@ interface NodeProps { className?: string; } -function Node(props: NodeProps) { +export function Node(props: NodeProps) { const container = React.useRef(null); const dispatch = useTypedDispatch(); @@ -159,5 +159,3 @@ function Node(props: NodeProps) { return
no node data
; } } - -export default Node; diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopQueries.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopQueries.tsx index 1724b01c6..6e600a165 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopQueries.tsx +++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopQueries.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import {useHistory, useLocation} from 'react-router'; +import {useHistory, useLocation} from 'react-router-dom'; import {parseQuery} from '../../../../../routes'; import {changeUserInput} from '../../../../../store/reducers/executeQuery'; diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopShards.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopShards.tsx index 789957e5f..1091935b8 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopShards.tsx +++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopShards.tsx @@ -1,4 +1,4 @@ -import {useLocation} from 'react-router'; +import {useLocation} from 'react-router-dom'; import {parseQuery} from '../../../../../routes'; import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants'; diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx index 60196ba8d..d9402e1c5 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx +++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx @@ -1,6 +1,6 @@ import type {Column} from '@gravity-ui/react-data-table'; import DataTable from '@gravity-ui/react-data-table'; -import {useLocation} from 'react-router'; +import {useLocation} from 'react-router-dom'; import {CellWithPopover} from '../../../../../components/CellWithPopover/CellWithPopover'; import {LinkToSchemaObject} from '../../../../../components/LinkToSchemaObject/LinkToSchemaObject'; diff --git a/src/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx b/src/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx index e102fab67..8f575ca09 100644 --- a/src/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx +++ b/src/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import {useHistory, useLocation} from 'react-router'; +import {useHistory, useLocation} from 'react-router-dom'; import type {DateRangeValues} from '../../../../components/DateRange'; import {DateRange} from '../../../../components/DateRange'; diff --git a/src/containers/Tenant/Diagnostics/TopShards/TopShards.tsx b/src/containers/Tenant/Diagnostics/TopShards/TopShards.tsx index 0400db785..ee3228878 100644 --- a/src/containers/Tenant/Diagnostics/TopShards/TopShards.tsx +++ b/src/containers/Tenant/Diagnostics/TopShards/TopShards.tsx @@ -2,7 +2,7 @@ import React from 'react'; import type {Column, Settings, SortOrder} from '@gravity-ui/react-data-table'; import DataTable from '@gravity-ui/react-data-table'; -import {useLocation} from 'react-router'; +import {useLocation} from 'react-router-dom'; import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable'; import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout'; diff --git a/src/containers/Tenant/Info/ExternalTable/ExternalTable.tsx b/src/containers/Tenant/Info/ExternalTable/ExternalTable.tsx index e822f0831..9d42cfec0 100644 --- a/src/containers/Tenant/Info/ExternalTable/ExternalTable.tsx +++ b/src/containers/Tenant/Info/ExternalTable/ExternalTable.tsx @@ -1,4 +1,4 @@ -import {useLocation} from 'react-router'; +import {useLocation} from 'react-router-dom'; import {EntityStatus} from '../../../../components/EntityStatus/EntityStatus'; import type {InfoViewerItem} from '../../../../components/InfoViewer'; diff --git a/src/containers/Tenant/ObjectSummary/ObjectSummary.tsx b/src/containers/Tenant/ObjectSummary/ObjectSummary.tsx index c558bd5b8..43fffeede 100644 --- a/src/containers/Tenant/ObjectSummary/ObjectSummary.tsx +++ b/src/containers/Tenant/ObjectSummary/ObjectSummary.tsx @@ -4,8 +4,7 @@ import {HelpPopover} from '@gravity-ui/components'; import {LayoutHeaderCellsLargeFill} from '@gravity-ui/icons'; import {Button, Icon, Tabs} from '@gravity-ui/uikit'; import qs from 'qs'; -import {useLocation} from 'react-router'; -import {Link} from 'react-router-dom'; +import {Link, useLocation} from 'react-router-dom'; import {StringParam, useQueryParam} from 'use-query-params'; import {AsyncReplicationState} from '../../../components/AsyncReplicationState'; diff --git a/src/containers/Tenant/Query/QueryTabs/QueryTabs.tsx b/src/containers/Tenant/Query/QueryTabs/QueryTabs.tsx index 047c81cd2..755ce0c32 100644 --- a/src/containers/Tenant/Query/QueryTabs/QueryTabs.tsx +++ b/src/containers/Tenant/Query/QueryTabs/QueryTabs.tsx @@ -1,5 +1,5 @@ import {Tabs} from '@gravity-ui/uikit'; -import {useLocation} from 'react-router'; +import {useLocation} from 'react-router-dom'; import {InternalLink} from '../../../../components/InternalLink/InternalLink'; import {parseQuery} from '../../../../routes'; diff --git a/src/containers/Tenant/Tenant.tsx b/src/containers/Tenant/Tenant.tsx index ca6266543..de6bd347a 100644 --- a/src/containers/Tenant/Tenant.tsx +++ b/src/containers/Tenant/Tenant.tsx @@ -40,7 +40,7 @@ interface TenantProps { additionalNodesProps?: AdditionalNodesProps; } -function Tenant(props: TenantProps) { +export function Tenant(props: TenantProps) { const [summaryVisibilityState, dispatchSummaryVisibilityAction] = React.useReducer( paneVisibilityToggleReducerCreator(DEFAULT_IS_TENANT_SUMMARY_COLLAPSED), undefined, @@ -143,5 +143,3 @@ function Tenant(props: TenantProps) { ); } - -export default Tenant; diff --git a/src/containers/Tenant/TenantNavigation/useTenantNavigation.tsx b/src/containers/Tenant/TenantNavigation/useTenantNavigation.tsx index e0a5c8a9a..d13dae51a 100644 --- a/src/containers/Tenant/TenantNavigation/useTenantNavigation.tsx +++ b/src/containers/Tenant/TenantNavigation/useTenantNavigation.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {Pulse, Terminal} from '@gravity-ui/icons'; -import {useHistory, useLocation} from 'react-router'; +import {useHistory, useLocation} from 'react-router-dom'; import routes, {parseQuery} from '../../../routes'; import {TENANT_PAGE, TENANT_PAGES_IDS} from '../../../store/reducers/tenant/constants'; diff --git a/src/utils/hooks/useSearchQuery.ts b/src/utils/hooks/useSearchQuery.ts index c3c936a7e..242776436 100644 --- a/src/utils/hooks/useSearchQuery.ts +++ b/src/utils/hooks/useSearchQuery.ts @@ -1,4 +1,4 @@ -import {useLocation} from 'react-router'; +import {useLocation} from 'react-router-dom'; import {parseQuery} from '../../routes';