asb_cloud_front/src/pages/Well.jsx

import { Layout, Menu } from 'antd'
import {
  FolderOutlined,
  FundViewOutlined,
  AlertOutlined,
  FilePdfOutlined,
  DatabaseOutlined,
  ExperimentOutlined,
  FundProjectionScreenOutlined,
} from '@ant-design/icons'
import { Link, Redirect, Route, Switch, useParams } from 'react-router-dom'
import { PrivateMenuItem } from '../components/Private'
import TelemetryView from './TelemetryView'
import Messages from './Messages'
import Report from './Report'
import Archive from './Archive'
import Documents from './Documents'
import Measure from './Measure'
import WellOperations from './WellOperations'
import TelemetryAnalysis from './TelemetryAnalysis'
import { makeMenuItems } from './Documents/'
import DrillingProgram from './Documents/DrillingProgram'

const { Content } = Layout

export default function Well() {
  const { idWell, tab } = useParams()
  const rootPath = `/well/${idWell}`

  const { SubMenu } = Menu

  return (
    <Layout>
      <Menu
        mode={'horizontal'}
        selectable={true}
        selectedKeys={[tab]}
        className={'well_menu'}
      >
        <PrivateMenuItem key={'telemetry'} icon={<FundViewOutlined />}>
          <Link to={`${rootPath}/telemetry`}>Мониторинг</Link>
        </PrivateMenuItem>
        <PrivateMenuItem key={'message'} icon={<AlertOutlined/>}>
            <Link to={`${rootPath}/message`}>Сообщения</Link>
        </PrivateMenuItem>
        <PrivateMenuItem key={'report'} icon={<FilePdfOutlined />}>
          <Link to={`${rootPath}/report`}>Рапорт</Link>
        </PrivateMenuItem>
        <PrivateMenuItem key={'operations'} icon={<FolderOutlined />}>
          <Link to={`${rootPath}/operations`}>Операции по скважине</Link>
        </PrivateMenuItem>
        <PrivateMenuItem key={'archive'} icon={<DatabaseOutlined />}>
          <Link to={`${rootPath}/archive`}>Архив</Link>
        </PrivateMenuItem>
        <PrivateMenuItem key={'telemetryAnalysis'} icon={<FundProjectionScreenOutlined />} roles={'admin'}>
          <Link to={`${rootPath}/telemetryAnalysis/depthToDay`}>Операции по телеметрии</Link>
        </PrivateMenuItem>
        <SubMenu
          key={'document'}
          title={
            <Link to={`${rootPath}/document/fluidService`} className={'linkDocuments'}>
              Документы
            </Link>
          }
          icon={<FolderOutlined />}
          selectable={true}
        >
          {makeMenuItems(rootPath)}
        </SubMenu>
        <PrivateMenuItem key={'measure'} icon={<ExperimentOutlined />}>
          <Link to={`${rootPath}/measure`}>Измерения</Link>
        </PrivateMenuItem>
        <PrivateMenuItem key={'drillingProgram'} icon={<FolderOutlined />}>
          <Link to={`${rootPath}/drillingProgram`}>Программа бурения</Link>
        </PrivateMenuItem>
      </Menu>

      <Layout>
        <Content className={'site-layout-background'}>
          <Switch>
            <Route path={'/well/:idWell/telemetry'}>
              <TelemetryView idWell={idWell} />
            </Route>
            <Route path={'/well/:idWell/message'}>
              <Messages idWell={idWell} />
            </Route>
            <Route path={'/well/:idWell/report'}>
              <Report idWell={idWell} />
            </Route>
            <Route path={'/well/:idWell/operations/:tab?'}>
              <WellOperations idWell={idWell} />
            </Route>
            <Route path={'/well/:idWell/archive'}>
              <Archive idWell={idWell} />
            </Route>
            <Route path={'/well/:idWell/telemetryAnalysis/:tab'}>
              <TelemetryAnalysis idWell={idWell} />
            </Route>
            <Route path={'/well/:idWell/document/:category'}>
              <Documents idWell={idWell} />
            </Route>
            <Route path={'/well/:id/measure'}>
              <Measure idWell={idWell}/>
            </Route>
            <Route path={'/well/:id/drillingProgram'}>
              <DrillingProgram idWell={idWell}/>
            </Route>
            <Route path={'/'}>
              <Redirect to={`${rootPath}/telemetry`} />
            </Route>
          </Switch>
        </Content>
      </Layout>
    </Layout>
  )
}