Исправлено меню для скважин

.gitignore

@@ -21,3 +21,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# .idea
+.idea
+.idea/*

src/components/Well.jsx

@@ -1,6 +1,73 @@
+import {Layout, Menu} from "antd";
+import {FolderOutlined, FundViewOutlined} from "@ant-design/icons";
+import {Link, Redirect, Route, Switch, useParams} from "react-router-dom";
+import Files from "../pages/Files";
+import Archive from "../pages/Archive";
+import Messages from "../pages/Messages";
+import Report from "../pages/Report";
+import Analysis from "../pages/Analysis";
+import TelemetryView from "../pages/TelemetryView";
+import Wells from "../pages/Wells";
 
+const { Content } = Layout
 
-export const Well = (props) => {
+export default function Well() {
+  let { id } = useParams()
 
-  return(<div></div>)
+  return (<>
+    <Layout>
+      <Menu
+        mode="horizontal"
+        selectable={false}
+        style={{height: '100%', borderRight: 0}}
+      >
+        <Menu.Item key="1" icon={<FundViewOutlined/>}>
+          <Link to='telemetry'>Мониторинг</Link>
+        </Menu.Item>
+        <Menu.Item key="2" icon={<FolderOutlined/>}>
+          <Link to='message'>Сообщения</Link>
+        </Menu.Item>
+        <Menu.Item key="3" icon={<FolderOutlined/>}>
+          <Link to='report'>Рапорт</Link>
+        </Menu.Item>
+        <Menu.Item key="4" icon={<FolderOutlined/>}>
+          <Link to='analysis'>Анализ</Link>
+        </Menu.Item>
+        <Menu.Item key="5" icon={<FolderOutlined/>}>
+          <Link to='file'>Файлы</Link>
+        </Menu.Item>
+        <Menu.Item key="6" icon={<FolderOutlined/>}>
+          <Link to='archive'>Архив</Link>
+        </Menu.Item>
+      </Menu>
+
+      <Layout>
+        <Content className="site-layout-background sheet">
+          <Switch>
+            <Route path="/well/:id/file">
+              <Files/>
+            </Route>
+            <Route path="/well/:id/archive">
+              <Archive/>
+            </Route>
+            <Route path="/well/:id/message">
+              <Messages/>
+            </Route>
+            <Route path="/well/:id/report">
+              <Report/>
+            </Route>
+            <Route path="/well/:id/analysis">
+              <Analysis/>
+            </Route>
+            <Route path="/well/:id/telemetry">
+              <TelemetryView/>
+            </Route>
+            <Route path="/">
+              <Redirect to={{pathname: `/well/${id}/telemetry`}}/>
+            </Route>
+          </Switch>
+        </Content>
+      </Layout>
+    </Layout>
+  </>)
 }

src/components/WellTreeSelector.jsx

@@ -57,7 +57,7 @@ export default function WellTreeSelector(props) {
 
   const onSelect = (value) => {
     if (value)
-      history.push(`/well/${value}`);
+      history.replace(`/well/${value}/`);
     console.log(value)
   }
 

src/pages/Main.jsx

@@ -1,92 +1,32 @@
-import { Layout, Menu,  } from 'antd' // Button,
+import { Layout, } from 'antd'
-import { FundViewOutlined, FolderOutlined } from '@ant-design/icons' // UserOutlined, MenuOutlined,
-import { useState } from 'react'
-import { Switch, Route, Redirect, Link} from "react-router-dom"
 import Wells from './Wells'
-import TelemetryView from './TelemetryView'
-import Files from './Files'
-import Archive from './Archive'
-import Messages from './Messages'
-import Report from './Report'
-import Analysis from './Analysis'
 import PageHeader from './Header'
+import TelemetryView from "./TelemetryView";
+import Well from "../components/Well";
+import {Redirect, Route, Switch} from "react-router-dom";
 
-const { Content, Sider } = Layout
+const { Content } = Layout
 
 export default function Main(){
-  const [sidebarVisible] = useState(true)  // setSidebarVisible
-  // const login = localStorage['login']
-
-  // let handleLogout = () => {
-  //   localStorage.removeItem('login')
-  //   localStorage.removeItem('token')
-  // }
 
   return(
-    <Layout>
+    <Content>
       <PageHeader />
-      <Layout>
-        {sidebarVisible &&
-        <Sider width={200} className="site-layout-background">
-          <Menu
-            mode="inline"
-            defaultSelectedKeys={['1']}
-            defaultOpenKeys={['sub1']}
-            style={{ height: '100%', borderRight: 0 }}
-          >
-            <Menu.Item key="1" icon= {<FundViewOutlined />}>
-              <Link to="/well">Мониторинг</Link>
-            </Menu.Item>            
-            <Menu.Item key="2" icon= {<FolderOutlined />}>
-              <Link to="/archive">Архив</Link>
-            </Menu.Item>
-            <Menu.Item key="3" icon= {<FolderOutlined />}>
-              <Link to="/messages">Сообщения</Link>
-            </Menu.Item>
-            <Menu.Item key="4" icon= {<FolderOutlined />}>
-              <Link to="/report">Рапорт</Link>
-            </Menu.Item>
-            <Menu.Item key="5" icon= {<FolderOutlined />}>
-              <Link to="/analysis">Анализ</Link>
-            </Menu.Item>
-            <Menu.Item key="6" icon= {<FolderOutlined />}>
-              <Link to="/file">Файлы</Link>
-            </Menu.Item>
-          </Menu>
-        </Sider>
-        }
-        
       <Layout>
         <Content className="site-layout-background sheet">
           <Switch>
-              <Route path="/file">
+            <Route path="/well/:id/">
-                <Files />
+              <Well/>
-              </Route>
-              <Route path="/archive">
-                <Archive />
-              </Route>
-              <Route path="/well/:id/messages">
-                <Messages />
-              </Route>
-              <Route path="/report">
-                <Report />
-              </Route>
-              <Route path="/analysis">
-                <Analysis />
-              </Route>
-              <Route path="/well/:id">
-                <TelemetryView/>
             </Route>
             <Route path="/well">
               <Wells/>
             </Route>
             <Route path="/">
-                <Redirect to={{pathname: "/well"}}/>
+              <Redirect to={{pathname: `/well`}}/>
             </Route>
           </Switch>
           </Content>
       </Layout>
-      </Layout>
+    </Content>
-    </Layout>
   );
 }

src/pages/TelemetryView.jsx

@@ -160,7 +160,7 @@ export default function TelemetryView(props) {
 
   const handleReceiveMessages = (messages) => {
     if (messages) {
-      setMessages(messages.items.splice(0, 3))
+      setMessages(messages.items.splice(0, 4))
     }
   }
 

src/pages/Wells.jsx

@@ -59,7 +59,7 @@ const groupBy = (table, ...keys) => {
 
 export default function Wells(props){
   const [wells, setWells] = useState([])
-  const [wellsTree, setWellsTree] = useState([]) // wellsTree,
+  const [setWellsTree] = useState([]) // wellsTree,
   const [loader, setLoader] = useState(false)
   const history = useHistory()
 
@@ -87,7 +87,7 @@ export default function Wells(props){
         columns={columns}
         onRow={(record) => {
           return {
-            onClick: event => {history.push(`well/${record.id}`)},
+            onClick: event => {history.push(`/well/${record.id}/`)},
           };
         }}/>
       {loader&&<Loader/>}