* Роутинг по возможности перенесён в корневые файлы разделов

* В разделе скважины и панели администратора добавлены
* Операции по скважине разнесены на разные файлы

src/App.tsx

@@ -9,6 +9,8 @@ import SuspenseFallback from '@components/SuspenseFallback'
 import { getUserToken, NoAccessComponent } from '@utils'
 import { OpenAPI } from '@api'
 
+import '@styles/include/antd_theme.less'
+import '@styles/App.less'
 
 const Login = lazy(() => import('@pages/public/Login'))
 const Register = lazy(() => import('@pages/public/Register'))
@@ -19,8 +21,34 @@ const Deposit = lazy(() => import('@pages/Deposit'))
 const Cluster = lazy(() => import('@pages/Cluster'))
 const Well = lazy(() => import('@pages/Well'))
 
-import '@styles/include/antd_theme.less'
+const Measure = lazy(() => import('@pages/Measure'))
-import '@styles/App.less'
+const Reports = lazy(() => import('@pages/Reports'))
+const WellCase = lazy(() => import('@pages/WellCase'))
+const Analytics = lazy(() => import('@pages/Analytics'))
+const Documents = lazy(() => import('@pages/Documents'))
+const Telemetry = lazy(() => import('@pages/Telemetry'))
+const WellOperations = lazy(() => import('@pages/WellOperations'))
+const DrillingProgram = lazy(() => import('@pages/DrillingProgram'))
+
+const Tvd = lazy(() => import('@pages/WellOperations/Tvd'))
+const WellDrillParams = lazy(() => import('@pages/WellOperations/WellDrillParams'))
+const DrillProcessFlow = lazy(() => import('@pages/WellOperations/DrillProcessFlow'))
+const WellSectionsStat = lazy(() => import('@pages/WellOperations/WellSectionsStat'))
+const WellOperationsEditorFact = lazy(() => import('@pages/WellOperations/OperationEditor/Fact'))
+const WellOperationsEditorPlan = lazy(() => import('@pages/WellOperations/OperationEditor/Plan'))
+
+const Archive = lazy(() => import('@pages/Telemetry/Archive'))
+const Messages = lazy(() => import('@pages/Telemetry/Messages'))
+const Operations = lazy(() => import('@pages/Telemetry/Operations'))
+const DashboardNNB = lazy(() => import('@pages/Telemetry/DashboardNNB'))
+const TelemetryView = lazy(() => import('@pages/Telemetry/TelemetryView'))
+const OperationTime = lazy(() => import('@pages/Telemetry/OperationTime'))
+
+const DailyReport = lazy(() => import('@pages/Reports/DailyReport'))
+const DiagramReport = lazy(() => import('@pages/Reports/DiagramReport'))
+
+const Statistics = lazy(() => import('@pages/Analytics/Statistics'))
+const WellCompositeEditor = lazy(() => import('@pages/Analytics/WellCompositeEditor'))
 
 //OpenAPI.BASE = 'http://localhost:3000'
 OpenAPI.TOKEN = async () => getUserToken() ?? ''
@@ -48,7 +76,51 @@ export const App = memo(() => (
                             <Route path={'/file_download/:idWell/:idFile/*'} element={<FileDownload />} />
                             <Route path={'/deposit/*'} element={<Deposit />} />
                             <Route path={'/cluster/:idCluster'} element={<Cluster />} />
-                            <Route path={'/well/:idWell/*'} element={<Well />} />
+                            <Route path={'/well/:idWell/*'} element={<Well />}>
+                                <Route index element={<Navigate to={'telemetry'} replace />} />
+                                <Route path={'*'} element={<NoAccessComponent />} />
+
+                                <Route path={'telemetry/*'} element={<Telemetry />}>
+                                    <Route index element={<Navigate to={'telemetry'} replace />} />
+                                    <Route path={'*'} element={<NoAccessComponent />} />
+
+                                    <Route path={'telemetry'} element={<TelemetryView />} />
+                                    <Route path={'messages'} element={<Messages />} />
+                                    <Route path={'archive'} element={<Archive />} />
+                                    <Route path={'dashboard_nnb'} element={<DashboardNNB />} />
+                                    <Route path={'operations'} element={<Operations />} />
+                                    <Route path={'operation_time'} element={<OperationTime />} />
+                                </Route>
+                                <Route path={'reports/*'} element={<Reports />}>
+                                    <Route index element={<Navigate to={'diagram_report'} replace />} />
+                                    <Route path={'*'} element={<NoAccessComponent />} />
+
+                                    <Route path={'diagram_report'} element={<DiagramReport />} />
+                                    <Route path={'daily_report'} element={<DailyReport />} />
+                                </Route>
+                                <Route path={'analytics/*'} element={<Analytics />}>
+                                    <Route index element={<Navigate to={'composite'} replace />} />
+                                    <Route path={'*'} element={<NoAccessComponent />} />
+
+                                    <Route path={'composite/*'} element={<WellCompositeEditor />} />
+                                    <Route path={'statistics'} element={<Statistics />} />
+                                </Route>
+                                <Route path={'operations/*'} element={<WellOperations />}>
+                                    <Route index element={<Navigate to={'tvd'} replace />} />
+                                    <Route path={'*'} element={<NoAccessComponent />} />
+
+                                    <Route path={'tvd'} element={<Tvd />} />
+                                    <Route path={'sections'} element={<WellSectionsStat />} />
+                                    <Route path={'plan'} element={<WellOperationsEditorPlan />} />
+                                    <Route path={'fact'} element={<WellOperationsEditorFact />} />
+                                    <Route path={'drillProcessFlow'} element={<DrillProcessFlow />} />
+                                    <Route path={'params'} element={<WellDrillParams />} />
+                                </Route>
+                                <Route path={'document/*'} element={<Documents />} />
+                                <Route path={'measure/*'} element={<Measure />} />
+                                <Route path={'drillingProgram'} element={<DrillingProgram />} />
+                                <Route path={'well_case'} element={<WellCase />} />
+                            </Route>
                         </Route>
                     </Routes>
                 </Router>

src/pages/AdminPanel/Telemetry/index.jsx

@@ -1,11 +1,8 @@
 import { memo, useMemo } from 'react'
-import { Navigate, Route, Routes } from 'react-router-dom'
+import { Outlet } from 'react-router-dom'
 
 import { RootPathContext, useRootPath } from '@asb/context'
-import { NoAccessComponent, wrapPrivateComponent } from '@utils'
+import { wrapPrivateComponent } from '@utils'
-
-import TelemetryViewer from './TelemetryViewer'
-import TelemetryMerger from './TelemetryMerger'
 
 const Telemetry = memo(() => {
     const root = useRootPath()
@@ -13,12 +10,7 @@ const Telemetry = memo(() => {
 
     return (
         <RootPathContext.Provider value={rootPath}>
-            <Routes>
+            <Outlet />
-                <Route index element={<Navigate to={TelemetryViewer.route} replace />} />
-                <Route path={'*'} element={<NoAccessComponent />} />
-                <Route path={TelemetryViewer.route} element={<TelemetryViewer />} />
-                <Route path={TelemetryMerger.route} element={<TelemetryMerger />} />
-            </Routes>
         </RootPathContext.Provider>
     )
 })

src/pages/AdminPanel/index.jsx

@@ -1,21 +1,25 @@
 import { Navigate, Route, Routes } from 'react-router-dom'
-import { memo, useMemo } from 'react'
+import { lazy, memo, Suspense, useMemo } from 'react'
 
 import { RootPathContext, useRootPath } from '@asb/context'
 import { LayoutPortal } from '@components/LayoutPortal'
+import SuspenseFallback from '@components/SuspenseFallback'
 import { NoAccessComponent, wrapPrivateComponent } from '@utils'
 
 import AdminNavigationMenu from './AdminNavigationMenu'
-import ClusterController from './ClusterController'
+
-import CompanyController from './CompanyController'
+const ClusterController = lazy(() => import('./ClusterController'))
-import DepositController from './DepositController'
+const CompanyController = lazy(() => import('./CompanyController'))
-import UserController from './UserController'
+const DepositController = lazy(() => import('./DepositController'))
-import WellController from './WellController'
+const UserController = lazy(() => import('./UserController'))
-import RoleController from './RoleController'
+const WellController = lazy(() => import('./WellController'))
-import CompanyTypeController from './CompanyTypeController'
+const RoleController = lazy(() => import('./RoleController'))
-import PermissionController from './PermissionController'
+const CompanyTypeController = lazy(() => import('./CompanyTypeController'))
-import Telemetry from './Telemetry'
+const PermissionController = lazy(() => import('./PermissionController'))
-import VisitLog from './VisitLog'
+const Telemetry = lazy(() => import('./Telemetry'))
+const TelemetryViewer = lazy(() => import('./Telemetry/TelemetryViewer'))
+const TelemetryMerger = lazy(() => import('./Telemetry/TelemetryMerger'))
+const VisitLog = lazy(() => import('./VisitLog'))
 
 const AdminPanel = memo(() => {
     const root = useRootPath()
@@ -24,20 +28,27 @@ const AdminPanel = memo(() => {
     return (
         <RootPathContext.Provider value={rootPath}>
             <LayoutPortal isAdmin title={'Администраторская панель'} sider={<AdminNavigationMenu />}>
+                <Suspense fallback={<SuspenseFallback style={{ minHeight: '100%' }} />}>
                     <Routes>
-                    <Route index element={<Navigate to={VisitLog.route} replace />} />
+                        <Route index element={<Navigate to={'visit_log'} replace />} />
                         <Route path={'*'} element={<NoAccessComponent />} />
-                    <Route path={DepositController.route} element={<DepositController />} />
+                        <Route path={'deposit'} element={<DepositController />} />
-                    <Route path={ClusterController.route} element={<ClusterController />} />
+                        <Route path={'cluster'} element={<ClusterController />} />
-                    <Route path={WellController.route} element={<WellController />} />
+                        <Route path={'well'} element={<WellController />} />
-                    <Route path={UserController.route} element={<UserController />} />
+                        <Route path={'user'} element={<UserController />} />
-                    <Route path={CompanyController.route} element={<CompanyController />} />
+                        <Route path={'company'} element={<CompanyController />} />
-                    <Route path={CompanyTypeController.route} element={<CompanyTypeController />} />
+                        <Route path={'company_type'} element={<CompanyTypeController />} />
-                    <Route path={RoleController.route} element={<RoleController />} />
+                        <Route path={'role'} element={<RoleController />} />
-                    <Route path={PermissionController.route} element={<PermissionController />} />
+                        <Route path={'permission'} element={<PermissionController />} />
-                    <Route path={Telemetry.route} element={<Telemetry />} />
+                        <Route path={'telemetry'} element={<Telemetry />}>
-                    <Route path={VisitLog.route} element={<VisitLog />} />
+                            <Route index element={<Navigate to={'viewer'} replace />} />
+                            <Route path={'*'} element={<NoAccessComponent />} />
+                            <Route path={'viewer'} element={<TelemetryViewer />} />
+                            <Route path={'merger'} element={<TelemetryMerger />} />
+                        </Route>
+                        <Route path={'visit_log'} element={<VisitLog />} />
                     </Routes>
+                </Suspense>
             </LayoutPortal>
         </RootPathContext.Provider>
     )

src/pages/Analytics/WellCompositeEditor/index.jsx

@@ -1,5 +1,5 @@
 import { Navigate, Route, Routes } from 'react-router-dom'
-import { useState, useEffect, memo } from 'react'
+import { useState, useEffect, memo, Suspense } from 'react'
 import { Row } from 'antd'
 
 import { useWell } from '@asb/context'
@@ -11,6 +11,7 @@ import { OperationStatService, WellCompositeService } from '@api'
 
 import ClusterWells from '@pages/Cluster/ClusterWells'
 import WellCompositeSections from './WellCompositeSections'
+import SuspenseFallback from '@asb/components/SuspenseFallback'
 
 const properties = {
     requirements: ['OperationStat.get', 'WellComposite.get'],
@@ -66,6 +67,7 @@ const WellCompositeEditor = memo(() => {
             <Row align={'middle'} justify={'space-between'} wrap={false} style={{ backgroundColor: 'white' }}>
                 <WellSelector onChange={setSelectedIdWells} value={selectedIdWells} />
             </Row>
+            <Suspense fallback={<SuspenseFallback style={{ minHeight: '100%' }} />}>
                 <Routes>
                     <Route index element={<Navigate to={ClusterWells.route} replace/>} />
                     <Route path={'*'} element={<NoAccessComponent />} />
@@ -73,6 +75,7 @@ const WellCompositeEditor = memo(() => {
                     <Route path={ClusterWells.route} element={<ClusterWells statsWells={statsWells} />} />
                     <Route path={WellCompositeSections.route} element={<WellCompositeSections statsWells={statsWells} selectedSections={selectedSections} />} />
                 </Routes>
+            </Suspense>
         </LoaderPortal>
     )
 })

src/pages/Analytics/index.jsx

@@ -1,11 +1,8 @@
 import { memo, useMemo } from 'react'
-import { Navigate, Route, Routes } from 'react-router-dom'
+import { Outlet } from 'react-router-dom'
 
 import { RootPathContext, useRootPath } from '@asb/context'
-import { NoAccessComponent, wrapPrivateComponent } from '@utils'
+import { wrapPrivateComponent } from '@utils'
-
-import Statistics from './Statistics'
-import WellCompositeEditor from './WellCompositeEditor'
 
 const Analytics = memo(() => {
     const root = useRootPath()
@@ -13,13 +10,7 @@ const Analytics = memo(() => {
 
     return (
         <RootPathContext.Provider value={rootPath}>
-            <Routes>
+            <Outlet />
-                <Route index element={<Navigate to={WellCompositeEditor.getKey()} replace />} />
-                <Route path={'*'} element={<NoAccessComponent />} />
-
-                <Route path={WellCompositeEditor.route} element={<WellCompositeEditor />} />
-                <Route path={Statistics.route} element={<Statistics />} />
-            </Routes>
         </RootPathContext.Provider>
     )
 })

src/pages/Reports/index.jsx

@@ -1,11 +1,8 @@
-import { Navigate, Route, Routes } from 'react-router-dom'
+import { Outlet } from 'react-router-dom'
 import { memo, useMemo } from 'react'
 
 import { RootPathContext, useRootPath } from '@asb/context'
-import { NoAccessComponent, wrapPrivateComponent } from '@utils'
+import { wrapPrivateComponent } from '@utils'
-
-import DailyReport from './DailyReport'
-import DiagramReport from './DiagramReport'
 
 const Reports = memo(() => {
     const root = useRootPath()
@@ -13,13 +10,7 @@ const Reports = memo(() => {
 
     return (
         <RootPathContext.Provider value={rootPath}>
-            <Routes>
+            <Outlet />
-                <Route index element={<Navigate to={'diagram_report'} replace />} />
-                <Route path={'*'} element={<NoAccessComponent />} />
-
-                <Route path={DiagramReport.route} element={<DiagramReport />} />
-                <Route path={DailyReport.route} element={<DailyReport />} />
-            </Routes>
         </RootPathContext.Provider>
     )
 })

src/pages/Telemetry/index.jsx

@@ -1,16 +1,9 @@
-import { Navigate, Route, Routes } from 'react-router-dom'
-import { memo, useMemo } from 'react'
 import { FundViewOutlined } from '@ant-design/icons'
+import { Outlet } from 'react-router-dom'
+import { memo, useMemo } from 'react'
 
 import { RootPathContext, useRootPath } from '@asb/context'
-import { NoAccessComponent, wrapPrivateComponent } from '@utils'
+import { wrapPrivateComponent } from '@utils'
-
-import Archive from './Archive'
-import Messages from './Messages'
-import Operations from './Operations'
-import DashboardNNB from './DashboardNNB'
-import TelemetryView from './TelemetryView'
-import OperationTime from './OperationTime'
 
 import '@styles/index.css'
 
@@ -20,17 +13,7 @@ const Telemetry = memo(() => {
 
   return (
     <RootPathContext.Provider value={rootPath}>
-      <Routes>
+      <Outlet />
-        <Route index element={<Navigate to={TelemetryView.route} replace />} />
-        <Route path={'*'} element={<NoAccessComponent />} />
-
-        <Route path={TelemetryView.route} element={<TelemetryView />} />
-        <Route path={Messages.route} element={<Messages />} />
-        <Route path={Archive.route} element={<Archive />} />
-        <Route path={DashboardNNB.route} element={<DashboardNNB />} />
-        <Route path={Operations.route} element={<Operations />} />
-        <Route path={OperationTime.route} element={<OperationTime />} />
-      </Routes>
     </RootPathContext.Provider>
   )
 })

src/pages/Well.jsx

@@ -1,25 +1,17 @@
-import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { memo, Suspense, useCallback, useEffect, useMemo, useState } from 'react'
-import { Navigate, Outlet, Route, Routes, useParams } from 'react-router-dom'
+import { Outlet, useParams } from 'react-router-dom'
 
 import { WellContext, RootPathContext, useRootPath } from '@asb/context'
 import { LayoutPortal } from '@components/LayoutPortal'
+import SuspenseFallback from '@components/SuspenseFallback'
 import { invokeWebApiWrapperAsync } from '@components/factory'
-import { NoAccessComponent, wrapPrivateComponent } from '@utils'
+import { wrapPrivateComponent } from '@utils'
 import { WellService } from '@api'
 
-import Measure from './Measure'
-import Reports from './Reports'
-import WellCase from './WellCase'
-import Analytics from './Analytics'
-import Documents from './Documents'
-import Telemetry from './Telemetry'
-import WellOperations from './WellOperations'
-import DrillingProgram from './DrillingProgram'
 import NavigationMenu from './NavigationMenu'
 
 import '@styles/index.css'
 
-
 const Well = memo(() => {
   const { idWell } = useParams()
 
@@ -54,20 +46,9 @@ const Well = memo(() => {
     <RootPathContext.Provider value={rootPath}>
       <WellContext.Provider value={[well, updateWell]}>
         <LayoutPortal sider={<NavigationMenu />}>
-          <Routes>
+          <Suspense fallback={<SuspenseFallback style={{ minHeight: '100%' }} />}>
-            <Route index element={<Navigate to={Telemetry.getKey()} replace />} />
-            <Route path={'*'} element={<NoAccessComponent />} />
-
-            <Route path={Telemetry.route} element={<Telemetry />} />
-            <Route path={Reports.route} element={<Reports />} />
-            <Route path={Analytics.route} element={<Analytics />} />
-            <Route path={WellOperations.route} element={<WellOperations />} />
-            <Route path={Documents.route} element={<Documents />} />
-            <Route path={Measure.route} element={<Measure />} />
-            <Route path={DrillingProgram.route} element={<DrillingProgram />} />
-            <Route path={WellCase.route} element={<WellCase />} />
-          </Routes>
             <Outlet />
+          </Suspense>
         </LayoutPortal>
       </WellContext.Provider>
     </RootPathContext.Provider>

src/pages/WellOperations/OperationEditor/Fact.jsx

@@ -0,0 +1,14 @@
+import { wrapPrivateComponent } from '@utils'
+
+import WellOperationsEditor from './WellOperationsEditor'
+
+export const WellOperationsEditorFact = wrapPrivateComponent(
+    () => <WellOperationsEditor idType={1} tableName={'well_operations_fact'}/>,
+    {
+        requirements: [ 'WellOperation.get' ],
+        title: 'Факт',
+        route: 'fact',
+    }
+)
+
+export default WellOperationsEditorFact

src/pages/WellOperations/OperationEditor/Plan.jsx

@@ -0,0 +1,14 @@
+import { wrapPrivateComponent } from '@utils'
+
+import WellOperationsEditor from './WellOperationsEditor'
+
+export const WellOperationsEditorPlan = wrapPrivateComponent(
+    () => <WellOperationsEditor idType={0} tableName={'well_operations_plan'}/>,
+    {
+        requirements: [ 'WellOperation.get' ],
+        title: 'План',
+        route: 'plan',
+    }
+)
+
+export default WellOperationsEditorPlan

src/pages/WellOperations/OperationEditor/WellOperationsEditor.jsx

@@ -17,7 +17,7 @@ import {
 } from '@components/Table'
 import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
-import { arrayOrDefault, wrapPrivateComponent } from '@utils'
+import { arrayOrDefault } from '@utils'
 import { WellOperationService } from '@api'
 
 const { TextArea } = Input
@@ -51,7 +51,7 @@ const generateColumns = (showNpt = false, categories = [], sectionTypes = []) =>
   makeTextColumn('Комментарий', 'comment', null, null, null, { editable: true, input: <TextArea/> }),
 ].filter(Boolean)
 
-const WellOperationsEditor = memo(({ idType, showNpt, ...other }) => {
+export const WellOperationsEditor = memo(({ idType, showNpt, ...other }) => {
   const [pageNumAndPageSize, setPageNumAndPageSize] = useState({ current: 1, pageSize: basePageSize })
   const [paginationTotal, setPaginationTotal] = useState(0)
   const [operations, setOperations] = useState([])
@@ -161,20 +161,4 @@ const WellOperationsEditor = memo(({ idType, showNpt, ...other }) => {
   )
 })
 
-export const WellOperationsEditorPlan = wrapPrivateComponent(
+export default WellOperationsEditor
-  () => <WellOperationsEditor idType={0} tableName={'well_operations_plan'}/>,
-  {
-    requirements: [ 'WellOperation.get' ],
-    title: 'План',
-    route: 'plan',
-  }
-)
-
-export const WellOperationsEditorFact = wrapPrivateComponent(
-  () => <WellOperationsEditor idType={1} tableName={'well_operations_fact'}/>,
-  {
-    requirements: [ 'WellOperation.get' ],
-    title: 'Факт',
-    route: 'fact',
-  }
-)

src/pages/WellOperations/index.jsx

@@ -1,16 +1,11 @@
-import { useNavigate, useLocation, Route, Routes, Navigate } from 'react-router-dom'
+import { useNavigate, useLocation, Outlet } from 'react-router-dom'
 import { memo, useCallback, useMemo } from 'react'
 
 import { RootPathContext, useRootPath } from '@asb/context'
 import { Flex } from '@components/Grid'
-import { getTabname, NoAccessComponent, wrapPrivateComponent } from '@utils'
+import { getTabname, wrapPrivateComponent } from '@utils'
 
-import Tvd from './Tvd'
 import { ImportExportBar } from './ImportExportBar'
-import { WellDrillParams } from './WellDrillParams'
-import { DrillProcessFlow } from './DrillProcessFlow'
-import { WellSectionsStat } from './WellSectionsStat'
-import { WellOperationsEditorPlan, WellOperationsEditorFact } from './WellOperationsEditor'
 
 const properties = {
   requirements: [],
@@ -37,17 +32,7 @@ const WellOperations = memo(() => {
       <Flex style={{ width: '100%' }}>
         <ImportExportBar disabled={isIEBarDisabled} onImported={onImported}/>
       </Flex>
-      <Routes>
+      <Outlet />
-        <Route index element={<Navigate to={Tvd.getKey()} replace />} />
-        <Route path={'*'} element={<NoAccessComponent />} />
-
-        <Route path={Tvd.route} element={<Tvd />} />
-        <Route path={'sections'} element={<WellSectionsStat />} />
-        <Route path={WellOperationsEditorPlan.route} element={<WellOperationsEditorPlan />} />
-        <Route path={WellOperationsEditorFact.route} element={<WellOperationsEditorFact />} />
-        <Route path={'drillProcessFlow'} element={<DrillProcessFlow />} />
-        <Route path={'params'} element={<WellDrillParams />} />
-      </Routes>
     </RootPathContext.Provider>
   )
 })