grouping TelemetryView components

src/components/Display.jsx

@@ -16,7 +16,7 @@ export const ValueDisplay = ({prefix, value, suffix, isArrowVisible, format}) =>
   })
 
   useEffect(()=>{
-    if(value === undefined || value === null){
+    if(value === undefined || value === null || value === '-' || value === '--'){
       setVal('---')
       return
     }
@@ -41,11 +41,13 @@ export const ValueDisplay = ({prefix, value, suffix, isArrowVisible, format}) =>
       return
     }
 
+    if(value.length > 4){
       let valueDate = moment(value)
       if(valueDate.isValid()){
         setVal(valueDate.format(format))
         return
       }
+    }
 
     setVal(value)
   },[value, isArrowVisible, arrowState, format])

src/components/EditableTable.jsx

@@ -77,7 +77,7 @@ export const EditableTable = ({
       ...form.initialValues,
       key:newRowKeyValue
     }
-    const newData = [...data, newRow]
+    const newData = [newRow, ...data]
     setData(newData)
     edit(newRow)
   }

src/components/UserOfWells.jsx

@@ -1,22 +0,0 @@
-import { Display } from './Display'
-
-export const UserOfWells = ({ data }) => {
-  const dataLast = data[data.length - 1]
-
-  const lines = [
-    { label: 'Пользователь', accessorName: 'user' },
-  ]
-
-  if (dataLast)
-    lines.forEach(line => line.value = dataLast[line.accessorName] ?? '-')
-  else
-    lines.forEach(line => line.value = '-')
-
-  return (<>
-    {lines.map(line => <Display className='border_small display_flex_container user_card'
-      key={line.label}
-      label={line.label}
-      value={line.value}
-      suffix={line.units} />)}
-  </>)
-}

src/pages/Smbo.jsx

@@ -1,7 +1,7 @@
 import SmboPlate from '../components/SmboPlate'
 import '../styles/smbo.css'
 import EquipmentDetails from '../components/modalWindows/EquipmentDetails'
-import ActiveMessagesOnline from "../components/ActiveMessagesOnline"
+import ActiveMessagesOnline from "./TelemetryView/ActiveMessagesOnline"
 // import RigPlan from "../images/smbo/RigPlan2.png"
 
 const platesData = [

src/pages/TelemetryView/ActiveMessagesOnline.jsx

@@ -1,11 +1,13 @@
 import {useState, useEffect} from 'react'
-import {MessageService} from '../services/api'
-import {Subscribe} from '../services/signalr'
-import moment from 'moment'
-import notify from "../components/notify"
-import '../styles/message.css'
 import {Table} from "antd";
-import LoaderPortal from "./LoaderPortal"
+import moment from 'moment'
+
+import LoaderPortal from '../../components/LoaderPortal'
+import notify from "../../components/notify"
+
+import {Subscribe} from '../../services/signalr'
+import {MessageService} from '../../services/api'
+import '../../styles/message.css'
 
 // Словарь категорий для строк таблицы
 const categoryDictionary = {
@@ -56,7 +58,7 @@ export default function ActiveMessagesOnline({idWell}) {
     const update = async () => {
       setLoader(true)
       try {
-        const messages = await MessageService.getMessage(idWell)
+        const messages = await MessageService.getMessages(idWell, 0, 4)
         handleReceiveMessages(messages)
       }
       catch (ex) {

src/pages/TelemetryView/ChartTimeOnlineFooter.jsx

@@ -1,4 +1,4 @@
-import {ValueDisplay} from './Display'
+import {ValueDisplay} from '../../components/Display'
 import {ControlOutlined} from '@ant-design/icons'
 import {Popover} from 'antd'
 

src/pages/TelemetryView/Column.jsx

@@ -1,5 +1,5 @@
-import {Display} from "./Display";
-import {ChartTimeOnline} from "./charts/ChartTimeOnline";
+import {Display} from "../../components/Display";
+import {ChartTimeOnline} from "../../components/charts/ChartTimeOnline";
 import {ChartTimeOnlineFooter} from "./ChartTimeOnlineFooter";
 
 export const Column = ({lineGroup, data, interval, showBorder}) => {

src/pages/TelemetryView/CustomColumn.jsx

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

src/pages/TelemetryView/UserOfWells.jsx

@@ -0,0 +1,9 @@
+import { Display } from '../../components/Display'
+
+export const UserOfWells = ({ data }) => {
+  const dataLast = data[data.length - 1]
+
+  return <Display className='border_small display_flex_container user_card'
+      label='Пользователь'
+      value={dataLast?.user}/>
+}

src/pages/TelemetryView/index.jsx

@@ -1,16 +1,18 @@
 import {useState, useEffect} from 'react'
-import {useParams} from 'react-router-dom'
 import {Row, Col, Select} from 'antd'
-import LoaderPortal from '../components/LoaderPortal'
-import {Column} from '../components/Column'
-import {CustomColumn} from '../components/CustomColumn'
-import {UserOfWells} from '../components/UserOfWells'
-import {Subscribe} from '../services/signalr'
-import {DataService} from '../services/api'
-import '../styles/message.css'
-import notify from "../components/notify"
-import {ModeDisplay} from "../components/ModeDisplay"
-import ActiveMessagesOnline from '../components/ActiveMessagesOnline'
+
+import {Column} from './Column'
+import {CustomColumn} from './CustomColumn'
+import ActiveMessagesOnline from './ActiveMessagesOnline'
+
+import LoaderPortal from '../../components/LoaderPortal'
+import {UserOfWells} from './UserOfWells'
+import {Subscribe} from '../../services/signalr'
+import {DataService} from '../../services/api'
+import {ModeDisplay} from "../../components/ModeDisplay"
+import notify from "../../components/notify"
+
+import '../../styles/message.css'
 
 const {Option} = Select
 
@@ -133,8 +135,7 @@ const timePeriodCollection = [
 
 const defaultChartInterval = '600'
 
-export default function TelemetryView(props) {
-  let {id} = useParams()
+export default function TelemetryView({idWell}) {
   const [saubData, setSaubData] = useState([])
   const [chartInterval, setChartInterval] = useState(defaultChartInterval)
 
@@ -152,25 +153,25 @@ export default function TelemetryView(props) {
     const update = async () => {
       setLoader(true)
       try {
-        const data = await DataService.getData(id)
+        const data = await DataService.getData(idWell)
         handleReceiveDataSaub(data)
       } catch (ex) {
-        notify(`Не удалось получить данные по скважине "${id}"`, 'error')
+        notify(`Не удалось получить данные по скважине "${idWell}"`, 'error')
         console.log(ex)
       }
       setLoader(false)
-      return Subscribe('hubs/telemetry', 'ReceiveDataSaub', `well_${id}`, handleReceiveDataSaub)
+      return Subscribe('hubs/telemetry', 'ReceiveDataSaub', `well_${idWell}`, handleReceiveDataSaub)
     }
     update()
-  }, [id])
+  }, [idWell])
 
   useEffect(() => {
     setLoader(true)
-    DataService.getData(id, null, chartInterval)
+    DataService.getData(idWell, null, chartInterval)
       .then(handleReceiveDataSaub)
       .catch(error => console.error(error))
       .finally(() => setLoader(false))
-  }, [id, chartInterval])
+  }, [idWell, chartInterval])
 
   const colSpan = 24 / (paramsGroups.length)
 
@@ -205,6 +206,6 @@ export default function TelemetryView(props) {
         </Row>
       </Col>
     </Row>
-    <ActiveMessagesOnline idWell={id}/>
+    <ActiveMessagesOnline idWell={idWell}/>
   </LoaderPortal>)
 }

src/pages/Well.jsx

@@ -6,7 +6,7 @@ import Messages from "../pages/Messages";
 import Report from "../pages/Report";
 import Analysis from "../pages/Analysis";
 import WellAnalysis from "../pages/WellAnalysis";
-import TelemetryView from "../pages/TelemetryView";
+import TelemetryView from "./TelemetryView";
 import MenuDocuments from "../components/MenuDocuments";
 import WellStat from "./WellStat"
 import Smbo from "./Smbo"
@@ -14,8 +14,8 @@ import Smbo from "./Smbo"
 const { Content } = Layout
 
 export default function Well() {
-  let { id } = useParams()
-  const rootPath = `/well/${id}`
+  let { id: idWell } = useParams()
+  const rootPath = `/well/${idWell}`
 
   const {SubMenu} = Menu
 
@@ -87,7 +87,7 @@ export default function Well() {
         <Content className="site-layout-background">
           <Switch>
             <Route path="/well/:id/stat">
-              <WellStat idWell={id}/>
+              <WellStat idWell={idWell}/>
             </Route>
             <Route path="/well/:id/archive">
               <Archive/>
@@ -99,13 +99,13 @@ export default function Well() {
               <Report/>
             </Route>
             <Route path="/well/:id/analysis">
-              <Analysis idWell={id}/>
+              <Analysis idWell={idWell}/>
             </Route>
             <Route path="/well/:id/wellAnalysis">
               <WellAnalysis/>
             </Route>
             <Route path="/well/:id/telemetry">
-              <TelemetryView/>
+              <TelemetryView idWell={idWell}/>
             </Route>
             <Route path="/well/:id/documents">
               <MenuDocuments/>