grouping components

src/components/UploadFileForm.jsx

@@ -0,0 +1,56 @@
+import { Form, Upload, Button} from 'antd'
+import { UploadOutlined} from '@ant-design/icons'
+import { useState } from 'react'
+import { upload } from  './factory'
+
+export default function UploadFileForm({url, onUploadStart, onUploadComplete, onUploadError}) {  
+  const [isSubmitButtonEnabled, setSubmitButtonEnabled] = useState(false)  
+  const [form] = Form.useForm();
+
+  const handleFileSend = async (values) => {
+    if(onUploadStart)
+      onUploadStart()
+    try {
+      const values = await form.validateFields();      
+      const formData = new FormData()
+      values.documentFile.fileList.forEach((val) => {
+        formData.append("files", val.originFileObj);
+      });
+      await upload(url, formData)
+    } catch(error) {
+      if(onUploadError)
+      onUploadError(error)
+    } finally {
+      form.resetFields()
+      if(onUploadComplete)
+        onUploadComplete()
+    }
+  }
+
+  return(
+    <Form
+      form={form}
+      onFinish={handleFileSend}
+      style={{display: 'flex'}}>
+      <Form.Item 
+        name="file" 
+        style={{marginBottom: 0}}
+        rules={[{ required: true, message: 'Выберите файл' }]}>
+        <Upload 
+          name ="file"               
+          onChange={(props) => setSubmitButtonEnabled(props.fileList.length > 0)}>
+          <Button icon={<UploadOutlined/>}>Загрузить файл</Button>
+        </Upload>
+      </Form.Item>
+      <Form.Item style={{marginBottom: 0}}>
+        <Button 
+          type="primary" 
+          htmlType="submit"
+          disabled={!isSubmitButtonEnabled}
+          style={{marginLeft: '10px', display:isSubmitButtonEnabled?'':'none'}}>
+          Отправить
+        </Button>
+      </Form.Item>
+    </Form>
+  )
+} 

src/components/modalWindows/DocumentCreationForm.jsx

@@ -1,108 +0,0 @@
-import { Form, Upload, Button } from 'antd'
-import { InboxOutlined } from '@ant-design/icons'
-import {useState} from "react"
-import {useParams} from 'react-router-dom'
-
-const { Dragger } = Upload;
-
-export default function DocumentCreationForm({selectedFileCategory, closeModalHandler}){  
-
-    let {id} = useParams()
-
-    const [form] = Form.useForm();
-
-    const [selectedFiles, setSelectedFiles] = useState([])
-
-    const onFinish = (form) => {
-        form
-        .validateFields()
-        .then(values => {
-            var fileList = values.documentFile.fileList
-
-            if (fileList.length > 0) {
-                const formData = new FormData();
-            
-                fileList.forEach(val => {
-                    formData.append('files', val.originFileObj)
-                })
-            
-                fetch(`/api/files/${id}/files?idCategory=${selectedFileCategory}&idUser=${localStorage['userId']}`, {
-                    headers: {
-                        Authorization: 'Bearer ' + localStorage['token']
-                    },
-                    method: 'POST',
-                    body: formData
-                })
-
-                form.resetFields();
-                closeModalHandler()
-            }
-        }).catch(info => {
-            console.log('Validate Failed:', info);
-        });
-    }
-
-    const submitFileFormProps = {
-        progress: {
-          strokeColor: {
-            '0%': '#108ee9',
-            '100%': '#87d068',
-          },
-          strokeWidth: 3,
-          format: percent => `${parseFloat(percent.toFixed(2))}%`,
-        },
-        multiple: true,
-        onChange({ file, fileList }) {
-          if (file.status !== 'uploading') {
-            setSelectedFiles(fileList)
-          }
-        }
-      }
-
-    return (
-        <Form
-            form={form}
-            layout="vertical"
-            name="ImprovementCreationForm"
-            onFinish={(values) => onFinish(form)}
-        >
-            <Form.Item
-                name="documentFile" 
-                rules={[{ required: true, message: 'Выберите файл' }]}
-            >
-                <Dragger 
-                    name="documentFileInput"
-                    {...submitFileFormProps}
-                    listType="picture"
-                >
-                        <p className="ant-upload-drag-icon">
-                        <InboxOutlined />
-                        </p>
-                        <p className="ant-upload-text">Кликните или перенесите сюда файлы</p>
-                        <p className="ant-upload-hint">
-                            Возможна загрузка как одного файла, так и нескольких.
-                        </p>
-                </Dragger>
-            </Form.Item>
-            <Form.Item style={{marginBottom: 0}}>
-                <div style={{display: 'flex', justifyContent: 'flex-end'}}>
-                    <Button 
-                        key="cancel"
-                        onClick={closeModalHandler}>
-                        Отмена
-                    </Button>
-
-                    <Button 
-                        key="submit" 
-                        type="primary"
-                        htmlType="submit" 
-                        disabled={selectedFiles.length === 0}
-                        style={{marginLeft: '10px'}}
-                    >
-                        Отправить
-                    </Button>
-                </div>
-            </Form.Item>
-        </Form>
-    )
-}

src/pages/Documents.jsx

@@ -1,183 +0,0 @@
-import {useState, useEffect} from "react"
-import {Table, DatePicker, Button, Modal, ConfigProvider} from 'antd'
-import { UploadOutlined } from '@ant-design/icons'
-import locale from "antd/lib/locale/ru_RU"
-import moment from 'moment'
-import DocumentCreationForm from '../components/modalWindows/DocumentCreationForm'
-import { FileService } from '../services/api'
-import notify from '../components/notify'
-import LoaderPortal from '../components/LoaderPortal'
-
-const pageSize = 12
-const {RangePicker} = DatePicker;
-
-export default function Documents({selectedFileCategory, idWell}) {
-  const [page, setPage] = useState(1)
-  const [range, setRange] = useState([])
-  const [pagination, setPagination] = useState(null)
-  const [files, setFiles] = useState([])
-  const [isModalVisible, setIsModalVisible] = useState(false)
-  const [isTableUpdating, setTableUpdating] = useState(false)
-
-  const [showLoader, setShowLoader] = useState(false)
-
-  const handleFileNameCLick = async (event, row) => {    
-    const element = event.target
-
-    if(!element.href.length) {
-      try {
-        setShowLoader(true)
-
-        await fetch(`/api/files/${idWell}/${row.id}`, {
-          headers: {
-            Authorization: 'Bearer ' + localStorage['token']
-          }
-        })
-        .then(async (response) => {
-          const blob = await response.blob();
-  
-          let reader = new FileReader();
-          reader.readAsDataURL(blob);
-          reader.onload = function (e) {
-            element.href = e.target.result
-            element.click()
-          };
-          setShowLoader(false)
-        });
-      } catch (error) {
-        notify(`Не удалось скачать файл ${row}`, 'error')
-        console.log(error)
-      }
-    }
-  }
-  
-  const columns = [
-    {
-        title: 'Документ',
-        key: 'document',
-        dataIndex: 'name',
-        render: (name, row) => 
-          <Button onClick={ev => handleFileNameCLick(ev, row)} download={name}>{name}</Button>
-    },
-    {
-        title: 'Дата загрузки',
-        key: 'uploadDate',
-        dataIndex: 'uploadDate',
-        render: (item) => moment.utc(item).local().format('DD MMM YYYY, HH:mm:ss')
-    },
-    {
-        title: 'Ф.И.О.',
-        key: 'userName',
-        dataIndex: 'userName',
-    }
-  ];
-
-  const openModal = () => {
-    setIsModalVisible(true)
-  }
-
-  const closeModal = () => {
-    setIsModalVisible(false)
-  }
-
-  const onChangeRange = (range) => {
-    setRange(range)
-  }
-
-  useEffect(() => {
-    const GetDocuments = async () => {
-      setShowLoader(true)
-
-      try {
-        let begin = null
-        let end = null
-        if (range?.length > 1) {
-          begin = range[0].toISOString()
-          end = range[1].toISOString()
-        }
-
-        await FileService.getFilesInfo(
-            `${idWell}`,
-            (page - 1) * pageSize,
-            pageSize,
-            selectedFileCategory,
-            begin,
-            end
-            ).then((paginatedFiles) => {
-                setFiles(paginatedFiles?.items.map(f => {
-                    return {
-                        key: f.id,
-                        begin: f.date,
-                        ...f
-                    }
-                }))
-
-                setPagination({
-                    total: paginatedFiles?.count,
-                    current: Math.floor(paginatedFiles?.skip / pageSize),
-                })
-
-                setTableUpdating(false)
-                setShowLoader(false)
-            }
-        )
-      } catch (ex) {
-        notify(`Не удалось загрузить файлы по скважине "${idWell}"`, 'error')
-        console.log(ex)
-      }
-    }
-    GetDocuments()
-  }, [idWell, range, page, selectedFileCategory, isTableUpdating])
-
-  return (
-    <div>
-        <div className='filter-group'>
-          <h3 className='filter-group-heading'>Фильтр документов:</h3>
-          <ConfigProvider locale={locale}>
-              <RangePicker
-                  showTime
-                  onChange={onChangeRange}
-              />
-          </ConfigProvider>
-        </div>
-        <LoaderPortal show={showLoader}></LoaderPortal>
-        <div>&nbsp;</div>
-
-        <Button
-          icon={<UploadOutlined />} 
-          onClick={openModal}
-        >Загрузить файл</Button>
-        <Modal
-          title="Загрузить файл"
-          centered
-          visible={isModalVisible}
-          onCancel={closeModal}
-          width={500}
-          footer={null}
-        >
-          <div>
-            <DocumentCreationForm 
-              selectedFileCategory={selectedFileCategory} 
-              closeModalHandler = {() => {
-                setIsModalVisible(false)
-                setTableUpdating(true)
-              }}> 
-            </DocumentCreationForm>
-          </div>
-      </Modal>
-      <div>&nbsp;</div>
-      <Table
-        columns={columns}
-        dataSource={files}
-        size={'small'}
-        pagination={{
-          pageSize: pageSize,
-          showSizeChanger: false,
-          total: pagination?.total,
-          current: page,
-          onChange: (page) => setPage(page)
-        }}
-        rowKey={(record) => record.id}
-      />
-    </div>);
-}

src/pages/Documents/DocumentsTemplate.jsx

@@ -0,0 +1,111 @@
+import {useState, useEffect} from "react"
+import {Table, DatePicker, Button, ConfigProvider} from 'antd'
+import locale from "antd/lib/locale/ru_RU"
+import moment from 'moment'
+import { FileService } from '../../services/api'
+import { updateFromWebApiWrapperAsync, download, makePaginationObject} from '../../components/factory'
+import UploadFileForm from '../../components/UploadFileForm'
+import LoaderPortal from '../../components/LoaderPortal'
+
+const pageSize = 12
+const {RangePicker} = DatePicker;
+
+export default function DocumentsTemplate({idCategory, idWell}) {
+  const [page, setPage] = useState(1)
+  const [range, setRange] = useState([])
+  const [pagination, setPagination] = useState(null)
+  const [files, setFiles] = useState([])
+  const [showLoader, setShowLoader] = useState(false)
+
+  const uploadUrl = `/api/well/${idWell}/files/`
+
+  const handleFileNameCLick = async (_, row) => {    
+    updateFromWebApiWrapperAsync(async ()=>{
+      await download(`/api/well/${idWell}/files/${row.id}`)
+    },
+    setShowLoader,
+    `Не удалось скачать файл ${row}`)
+  }
+  
+  const columns = [
+    {
+        title: 'Документ',
+        key: 'document',
+        dataIndex: 'name',
+        render: (name, row) => 
+          <Button onClick={ev => handleFileNameCLick(ev, row)} download={name}>{name}</Button>
+    },
+    {
+        title: 'Дата загрузки',
+        key: 'uploadDate',
+        dataIndex: 'uploadDate',
+        render: (item) => moment.utc(item).local().format('DD MMM YYYY, HH:mm:ss')
+    },
+    {
+        title: 'Ф.И.О.',
+        key: 'userName',
+        dataIndex: 'userName',
+    }
+  ];
+
+  const addKeysAndUpdateFiles = (items) =>{
+    const mappedFiles = items?.map(fileInfo => ({key: fileInfo.id, begin: fileInfo.date, ...fileInfo}))
+    setFiles(mappedFiles??[])
+  }
+
+  useEffect(() => {
+    let begin = null
+    let end = null
+    if (range?.length > 1) {
+      begin = range[0].toISOString()
+      end = range[1].toISOString()
+    }
+
+    updateFromWebApiWrapperAsync(
+      async ()=>{
+        const paginatedFiles = await FileService.getFilesInfo(
+          `${idWell}`,
+          (page - 1) * pageSize,
+          pageSize,
+          idCategory,
+          begin,
+          end)
+        if(!paginatedFiles)
+          return
+        addKeysAndUpdateFiles(paginatedFiles?.items)
+
+        const newPagination = makePaginationObject(paginatedFiles)
+        setPagination(newPagination)
+      },
+      setShowLoader,
+      `Не удалось загрузить файлы по скважине "${idWell}"`)
+  }, [idWell, range, page, idCategory])
+
+  return (    
+    <LoaderPortal show={showLoader}>
+      <UploadFileForm
+        url={uploadUrl}
+        onUploadStart={()=>setShowLoader(true)}
+        onUploadComplete={()=>setShowLoader(false)}
+      />
+      <div className='filter-group'>
+        <h3 className='filter-group-heading'>Фильтр документов:</h3>
+        <ConfigProvider locale={locale}>
+            <RangePicker
+                showTime
+                onChange={setRange}
+            />
+        </ConfigProvider>
+      </div>
+      <Table
+        columns={columns}
+        dataSource={files}
+        size={'small'}
+        pagination={{
+          ...pagination,
+          showSizeChanger: false,
+          onChange: (page) => setPage(page)}}
+        rowKey={(record) => record.id}
+      />
+    </LoaderPortal>);
+}

src/pages/Documents/index.jsx

@@ -0,0 +1,27 @@
+import {Layout, Menu} from "antd";
+import {Switch, useParams} from "react-router-dom";
+import {makeMenuItems, makeRouteItems} from './menuItems'
+
+const { Content } = Layout
+
+export default function MenuDocuments({idWell}) {
+  let {category} = useParams()
+  const rootPath = `/well/${idWell}`
+
+  return(<>
+    <Menu
+      mode="horizontal"
+      selectable={true}
+      className="well_menu"
+      selectedKeys={[category]}>
+      {makeMenuItems('documentsPageMenu', rootPath)}
+    </Menu>
+    <Layout>
+        <Content className="site-layout-background">
+          <Switch>            
+            {makeRouteItems('documentsPageMenu', `${rootPath}`, idWell)}            
+          </Switch>
+        </Content>
+      </Layout>
+  </>)
+}

src/pages/Documents/menuItems.jsx

@@ -0,0 +1,58 @@
+import { Menu } from "antd";
+import { FolderOutlined } from "@ant-design/icons";
+import { Link, Route} from "react-router-dom";
+import DocumentsTemplate from './DocumentsTemplate'
+
+export const documentCategories = [
+  {id:1, key:'fluidService', title:'Растворный сервис'},
+  {id:2, key:'cementing', title:'Цементирование'},
+  {id:3, key:'nnb', title:'ННБ'},
+  {id:4, key:'gti', title:'ГТИ'},
+  {id:5, key:'documentsForWell', title:'Документы по скважине'},
+  {id:6, key:'supervisor', title:'Супервайзер'},
+  {id:7, key:'master', title:'Мастер'},
+]
+
+const makeMenuItem = (keyPrefix, keyValue, rootPath, title, other) => (
+  <Menu.Item className="ant-menu-item" 
+    key={`${keyPrefix}/${keyValue}/menuItem`} 
+    {...other}>
+    <Link to={{pathname: `${rootPath}/${keyValue}`}}>{title}</Link>
+  </Menu.Item>)
+
+const makeRouteItem = (keyPrefix, keyValue, rootPath, other) => (
+  <Route 
+    path={`${rootPath}/${keyValue}`} 
+    key={`${keyPrefix}/${keyValue}/routeItem`}>
+    <DocumentsTemplate {...other}/>
+  </Route>)
+
+const formatRoutePath = (rootPath) =>{
+  let root = rootPath.endsWith('/')
+  ? rootPath.slice(0,-1)
+  : rootPath
+
+  root = root.endsWith('/document')
+  ? root
+  : `${root}/document`
+
+  return root
+}
+
+const getCategoriesByUserRole = (role) => documentCategories
+  .filter(cat => !cat.roles || cat.roles.includes('*') || cat.roles.includes(role))
+
+export const makeMenuItems = (keyPrefix, rootPath) => {
+  const root = formatRoutePath(rootPath)
+  const categories = getCategoriesByUserRole(localStorage['roleName'])
+  return  categories.map(category => 
+    makeMenuItem(keyPrefix, category.key, root, category.title, {icon:<FolderOutlined/>}))
+}
+
+export const makeRouteItems = (keyPrefix, rootPath, idWell) => { 
+  const root = formatRoutePath(rootPath)
+  const categories = getCategoriesByUserRole(localStorage['roleName'])
+  const routes = categories.map(category =>
+    makeRouteItem(keyPrefix, category.key, root, {idCategory: category.id, idWell: idWell}))
+  return routes;
+}

src/pages/FluidService.jsx

@@ -1,8 +0,0 @@
-import Documents from "./Documents"
-
-export default function FluidService({selectedFileCategory}) {
-
-    return(
-        <Documents selectedFileCategory={selectedFileCategory} />
-    )
-}

src/pages/MenuDocuments.jsx

@@ -1,87 +0,0 @@
-import { useState, useEffect } from "react";
-import {Layout, Menu} from "antd";
-import {FolderOutlined} from "@ant-design/icons";
-import {Link, Route, Switch, useLocation} from "react-router-dom";
-import Documents from "./Documents";
-import LastData from './LastData'
-
-const { Content } = Layout
-
-export default function MenuDocuments({idWell}) {
-  let currentPath = useLocation().pathname
-
-  const rootPath = `/well/${idWell}`
-
-  const [selectedElement, setSelectedElement] = useState('fluidService')
-
-  useEffect(() => {
-    let pathLastElement = currentPath.split('/').pop()
-    setSelectedElement(pathLastElement)
-  }, [currentPath])
-
-  return(
-  <>
-    <Menu
-      mode="horizontal"
-      selectable={true}
-      className="well_menu"
-      selectedKeys={[selectedElement]}
-    >
-      <Menu.Item key="fluidService" icon={<FolderOutlined/>}>
-        <Link to={{pathname: `${rootPath}/documents/fluidService`}}>Растворный сервис</Link>
-      </Menu.Item>
-      <Menu.Item key="cementing" icon={<FolderOutlined/>}>
-        <Link to={{pathname: `${rootPath}/documents/cementing`}}>Цементирование</Link>
-      </Menu.Item>
-      <Menu.Item key="nnb" icon={<FolderOutlined/>}>
-        <Link to={{pathname: `${rootPath}/documents/nnb`}}>ННБ</Link>
-      </Menu.Item>
-      <Menu.Item key="gti" icon={<FolderOutlined/>}>
-        <Link to={{pathname: `${rootPath}/documents/gti`}}>ГТИ</Link>
-      </Menu.Item>
-      <Menu.Item key="documentsForWell" icon={<FolderOutlined/>}>
-        <Link to={{pathname: `${rootPath}/documents/documentsForWell`}}>Документы по скважине</Link>
-      </Menu.Item>
-      <Menu.Item key="supervisor" icon={<FolderOutlined/>}>
-        <Link to={{pathname: `${rootPath}/documents/supervisor`}}>Супервайзер</Link>
-      </Menu.Item>
-      <Menu.Item key="master" icon={<FolderOutlined/>}>
-        <Link to={{pathname: `${rootPath}/documents/master`}}>Мастер</Link>
-      </Menu.Item>
-      <Menu.Item key="lastData" icon={<FolderOutlined/>}>
-        <Link to={{pathname: `${rootPath}/documents/lastData`}}>Последние данные</Link>
-      </Menu.Item>
-    </Menu>
-
-    <Layout>
-        <Content className="site-layout-background">
-          <Switch>
-            <Route path="/well/:id/documents/fluidService">
-              <Documents selectedFileCategory={1}/>
-            </Route>
-            <Route path="/well/:id/documents/cementing">
-              <Documents selectedFileCategory={2}/>
-            </Route>
-            <Route path="/well/:id/documents/nnb">
-              <Documents selectedFileCategory={3}/>
-            </Route>
-            <Route path="/well/:id/documents/gti">
-              <Documents selectedFileCategory={4}/>
-            </Route>
-            <Route path="/well/:id/documents/documentsForWell">
-              <Documents selectedFileCategory={5}/>
-            </Route>
-            <Route path="/well/:id/documents/supervisor">
-              <Documents selectedFileCategory={6}/>
-            </Route>
-            <Route path="/well/:id/documents/master">
-              <Documents selectedFileCategory={7}/>
-            </Route>
-            <Route path="/well/:id/documents/lastData">
-              <LastData/>
-            </Route>
-          </Switch>
-        </Content>
-      </Layout>
-  </>)
-}

src/pages/Smbo/EquipmentDetails.jsx

@@ -1,5 +1,5 @@
 import {Row, Col} from 'antd'
-import Documents from '../Documents'
+import Documents from '../Documents/DocumentsTemplate'
 import '../../styles/equipment_details.css'
 
 export default function EquipmentDetails({id, equipmentTimers, equipmentSensors}) {

src/pages/TelemetryView/CustomColumn.jsx

@@ -1,5 +1,5 @@
 import {Display} from '../../components/Display'
-import RigMnemo from '../../components/RigMnemo'
+import RigMnemo from './RigMnemo'
 
 const params = [
   {label:'Рот., об/мин', accessorName:'rotorSpeed', isArrowVisible:true},

src/pages/Well.jsx

@@ -7,25 +7,24 @@ import Report from "../pages/Report";
 import Archive from "../pages/Archive";
 import Analysis from "../pages/Analysis";
 import WellAnalysis from "../pages/WellAnalysis";
-import MenuDocuments from "./MenuDocuments";
-import WellStat from "./WellStat"
-import Smbo from "./Smbo"
+import Documents from "../pages/Documents";
+import LastData from '../pages/LastData'
+import { makeMenuItems } from "./Documents/menuItems";
+import WellStat from "./WellStat";
+import Smbo from "./Smbo";
 
-const { Content } = Layout
+const { Content } = Layout;
 
 export default function Well() {
-  let { idWell } = useParams()
-  const rootPath = `/well/${idWell}`
+  let { idWell } = useParams();
+  const rootPath = `/well/${idWell}`;
 
-  const {SubMenu} = Menu
+  const { SubMenu } = Menu;
 
-  return (<>
+  return (
+    <>
       <Layout>
-      <Menu
-        mode="horizontal"
-        selectable={true}
-        className="well_menu"
-      >
+        <Menu mode="horizontal" selectable={true} className="well_menu">
           <Menu.Item key="1" icon={<FundViewOutlined />}>
             <Link to={{ pathname: `${rootPath}/telemetry` }}>Мониторинг</Link>
           </Menu.Item>
@@ -39,80 +38,72 @@ export default function Well() {
             <Link to={{ pathname: `${rootPath}/analysis` }}>Анализ</Link>
           </Menu.Item>
           <Menu.Item key="5" icon={<FolderOutlined />}>
-          <Link to={{pathname: `${rootPath}/wellAnalysis`}}>Операции по скважине</Link>
+            <Link to={{ pathname: `${rootPath}/wellAnalysis` }}>
+              Операции по скважине
+            </Link>
           </Menu.Item>
           <Menu.Item key="6" icon={<FolderOutlined />}>
-          <Link to='stat'>Статистика</Link>
+            <Link to="stat">Статистика</Link>
           </Menu.Item>
           <Menu.Item key="7" icon={<FolderOutlined />}>
             <Link to={{ pathname: `${rootPath}/archive` }}>Архив</Link>
           </Menu.Item>
           <SubMenu
             key="documentsSub"
-            title={<Link to={{pathname: `${rootPath}/documents/fluidService`}} className="linkDocuments">Документы</Link>}
+            title={
+              <Link
+                to={{ pathname: `${rootPath}/document/fluidService` }}
+                className="linkDocuments"
+              >
+                Документы
+              </Link>
+            }
             icon={<FolderOutlined />}
             selectable={true}
           >
-            <Menu.Item key="documentsSub1" icon={<FolderOutlined/>}>
-              <Link to={{pathname: `${rootPath}/documents/fluidService`}}>Растворный сервис</Link>
-            </Menu.Item>
-            <Menu.Item key="documentsSub1.1" icon={<FolderOutlined/>}>
-              <Link to={{pathname: `${rootPath}/documents/cementing`}}>Цементирование</Link>
-            </Menu.Item>
-            <Menu.Item key="documentsSub1.2" icon={<FolderOutlined/>}>
-              <Link to={{pathname: `${rootPath}/documents/nnb`}}>ННБ</Link>
-            </Menu.Item>
-            <Menu.Item key="documentsSub1.3" icon={<FolderOutlined/>}>
-              <Link to={{pathname: `${rootPath}/documents/gti`}}>ГТИ</Link>
-            </Menu.Item>
-            <Menu.Item key="documentsSub1.4" icon={<FolderOutlined/>}>
-              <Link to={{pathname: `${rootPath}/documents/documentsForWell`}}>Документы по скважине</Link>
-            </Menu.Item>
-            <Menu.Item key="documentsSub1.5" icon={<FolderOutlined/>}>
-              <Link to={{pathname: `${rootPath}/documents/supervisor`}}>Супервайзер</Link>
-            </Menu.Item>
-            <Menu.Item key="documentsSub1.6" icon={<FolderOutlined/>}>
-              <Link to={{pathname: `${rootPath}/documents/master`}}>Мастер</Link>
-            </Menu.Item>
-            <Menu.Item key="documentsSub1.7" icon={<FolderOutlined/>}>
-              <Link to={{pathname: `${rootPath}/documents/lastData`}}>Последние данные</Link>
-            </Menu.Item>
+            {makeMenuItems('documentsSubMenu', `${rootPath}/document`)}
           </SubMenu>
           <Menu.Item key="8" icon={<FolderOutlined />}>
             <Link to={{ pathname: `${rootPath}/smbo` }}>СМБО</Link>
           </Menu.Item>
+          <Menu.Item key="9" icon={<FolderOutlined />}>
+            <Link to={{ pathname: `${rootPath}/lastData` }}>Последние данные</Link>
+          </Menu.Item>
         </Menu>
 
         <Layout>
           <Content className="site-layout-background">
             <Switch>
-            <Route path="/well/:id/telemetry">
+              <Route path="/well/:idWell/telemetry">
                 <TelemetryView idWell={idWell} />
               </Route>
-            <Route path="/well/:id/message">
+              <Route path="/well/:idWell/message">
                 <Messages idWell={idWell} />
               </Route>
-            <Route path="/well/:id/report">
+              <Route path="/well/:idWell/report">
                 <Report idWell={idWell} />
               </Route>
-            <Route path="/well/:id/analysis">
+              <Route path="/well/:idWell/analysis">
                 <Analysis idWell={idWell} />
               </Route>
-            <Route path="/well/:id/stat">
+              <Route path="/well/:idWell/stat">
                 <WellStat idWell={idWell} />
               </Route>
-            <Route path="/well/:id/wellAnalysis">
+              <Route path="/well/:idWell/wellAnalysis">
                 <WellAnalysis idWell={idWell} />
               </Route>
-            <Route path="/well/:id/archive">
+              <Route path="/well/:idWell/archive">
                 <Archive idWell={idWell} />
               </Route>
-            <Route path="/well/:id/documents">
-              <MenuDocuments idWell={idWell}/>
+              <Route path="/well/:idWell/document/:category">
+                <Documents idWell={idWell} />
               </Route>
-            <Route path="/well/:id/smbo">
+              <Route path="/well/:idWell/smbo">
                 <Smbo idWell={idWell} />
               </Route>
+              <Route path="/well/:id/lastData">
+                <LastData/>
+              </Route>
               <Route path="/">
                 <Redirect to={{ pathname: `${rootPath}/telemetry` }} />
               </Route>
@@ -120,5 +111,6 @@ export default function Well() {
           </Content>
         </Layout>
       </Layout>
-  </>)
+    </>
+  );
 }