Со страницы TelemetryView перенесны сообщения и колоны

src/components/ActiveMessagesOnline.jsx

@@ -0,0 +1,83 @@
+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"
+
+// Словарь категорий для строк таблицы
+const categoryDictionary = {
+  1: {title: 'Важное'},
+  2: {title: 'Предупреждение'},
+  3: {title: 'Информация'},
+}
+
+// Конфигурация таблицы
+const columns = [
+  {
+    title: 'Дата',
+    dataIndex: 'date',
+    render: (item) => moment(item).format('DD MMM YYYY, HH:MM:ss'),
+    sorter: (a, b) => new Date(b.date) - new Date(a.date),
+    sortDirections: ['descend', 'ascend'],
+  },
+  {
+    title: 'Категория',
+    dataIndex: 'categoryId',
+    render: (_, item) => categoryDictionary[item.categoryId].title,
+    style: (_, item) => categoryDictionary[item.categoryId].style,
+    sorter: (a, b) => a.categoryId - b.categoryId,
+    sortDirections: ['descend', 'ascend'],
+  },
+  {
+    title: 'Сообщение',
+    dataIndex: 'message',
+    onFilter: (value, record) => record.name.indexOf(value) === 0,
+  },
+  {
+    title: 'Пользователь',
+    dataIndex: 'user',
+  },
+];
+
+export default function ActiveMessagesOnline({idWell}) {
+  const [messages, setMessages] = useState([])
+  const [loader, setLoader] = useState(false)
+
+  const handleReceiveMessages = (messages) => {
+    if (messages) {
+      setMessages(messages.items.splice(0, 4))
+    }
+  }
+
+  useEffect(() => {
+    setLoader(true)
+    let promiseMessages = MessageService.getMessage(idWell)
+      .then(handleReceiveMessages)
+      .catch((ex) => {
+        notify(`Не удалось загрузить сообщения по скважине "${idWell}"`, 'error')
+        console.log(ex)
+      })
+
+    Promise.all([promiseMessages]).then(()=>setLoader(false))
+    let unSubscribeMessagesHub = Subscribe('hubs/telemetry','ReceiveMessages', `well_${idWell}`, handleReceiveMessages)
+    return () => {
+      unSubscribeMessagesHub()
+    }
+  }, [idWell])
+
+  return (<LoaderPortal show={loader}>
+    <Table
+      showHeader={false}
+      columns={columns}
+      dataSource={messages}
+      rowClassName={(record) => `event_message_${record.categoryId} event_message`}
+      className={'message_table'}
+      size={'small'}
+      pagination={false}
+      rowKey={(record) => record.id}
+    />
+  </LoaderPortal>)
+}

src/components/Column.jsx

@@ -0,0 +1,45 @@
+import {Display} from "./Display";
+import {ChartTimeOnline} from "./charts/ChartTimeOnline";
+import {ChartTimeOnlineFooter} from "./ChartTimeOnlineFooter";
+
+export const Column = ({lineGroup, data, interval, showBorder}) => {
+  let lines = [lineGroup.linePv]
+
+  if (lineGroup.lineSp)
+    lines.push(lineGroup.lineSp)
+
+  if (lineGroup.lineOther)
+    lines.push(lineGroup.lineOther)
+
+  if (lineGroup.lineAvg)
+    lines.push(lineGroup.lineAvg)
+
+  if (lineGroup.lineMax)
+    lines.push(lineGroup.lineMax)
+
+  let dataLast = null
+  let pv = null
+  if (data?.length > 0) {
+    dataLast = data[data.length - 1];
+    if (lineGroup.linePv)
+      pv = dataLast[lineGroup.linePv?.xAccessorName]
+  }
+
+  return (
+    <>
+      <div style={{boxShadow: showBorder ? "inset 0px 0px 0px 3px black" : ""}}>
+        <Display
+          label={lineGroup.label}
+          value={pv}
+          suffix={lineGroup.linePv?.units} isArrowVisible={false}/>
+      </div>
+      <ChartTimeOnline
+        data={data}
+        yDisplay={lineGroup.yDisplay}
+        lines={lines}
+        interval={interval}/>
+      <ChartTimeOnlineFooter
+        data={dataLast}
+        {...lineGroup} />
+    </>)
+}

src/pages/TelemetryView.jsx

@@ -1,18 +1,16 @@
 import {useState, useEffect} from 'react'
 import {useParams} from 'react-router-dom'
 import {Row, Col, Select, Table} from 'antd'
-import {ChartTimeOnline} from '../components/charts/ChartTimeOnline'
 import LoaderPortal from '../components/LoaderPortal'
-import {ChartTimeOnlineFooter} from '../components/ChartTimeOnlineFooter'
+import { Column } from '../components/Column'
 import {CustomColumn} from '../components/CustomColumn'
 import {UserOfWells} from '../components/UserOfWells'
-import {ModeDisplay} from '../components/ModeDisplay'
-import {Display} from '../components/Display'
-import moment from 'moment'
 import {Subscribe} from '../services/signalr'
-import {DataService, MessageService} from '../services/api'
+import {DataService} from '../services/api'
 import '../styles/message.css'
 import notify from "../components/notify"
+import {ModeDisplay} from "../components/ModeDisplay"
+import ActiveMessagesOnline from '../components/ActiveMessagesOnline'
 
 const {Option} = Select
 
@@ -114,83 +112,6 @@ const rotorTorqueGroup = {
 
 const paramsGroups = [blockHeightGroup, blockSpeedGroup, pressureGroup, axialLoadGroup, hookWeightGroup, rotorTorqueGroup]
 
-export const Column = ({lineGroup, data, interval, showBorder}) => {
-  let lines = [lineGroup.linePv]
-
-  if (lineGroup.lineSp)
-    lines.push(lineGroup.lineSp)
-
-  if (lineGroup.lineOther)
-    lines.push(lineGroup.lineOther)
-
-  if (lineGroup.lineAvg)
-    lines.push(lineGroup.lineAvg)
-
-  if (lineGroup.lineMax)
-    lines.push(lineGroup.lineMax)
-
-  let dataLast = null
-  let pv = null
-  if (data?.length > 0) {
-    dataLast = data[data.length - 1];
-    if (lineGroup.linePv)
-      pv = dataLast[lineGroup.linePv?.xAccessorName]
-  }
-
-  return (
-    <>
-      <div style={{boxShadow: showBorder ? "inset 0px 0px 0px 3px black" : ""}}>
-        <Display
-          label={lineGroup.label}
-          value={pv}
-          suffix={lineGroup.linePv?.units} isArrowVisible={false}/>
-      </div>
-      <ChartTimeOnline
-        data={data}
-        yDisplay={lineGroup.yDisplay}
-        lines={lines}
-        interval={interval}/>
-      <ChartTimeOnlineFooter
-        data={dataLast}
-        {...lineGroup} />
-    </>)
-}
-
-// Словарь категорий для строк таблицы
-const categoryDictionary = {
-  1: {title: 'Важное'},
-  2: {title: 'Предупреждение'},
-  3: {title: 'Информация'},
-}
-
-// Конфигурация таблицы
-const columns = [
-  {
-    title: 'Дата',
-    dataIndex: 'date',
-    render: (item) => moment(item).format('DD MMM YYYY, HH:MM:ss'),
-    sorter: (a, b) => new Date(b.date) - new Date(a.date),
-    sortDirections: ['descend', 'ascend'],
-  },
-  {
-    title: 'Категория',
-    dataIndex: 'categoryId',
-    render: (_, item) => categoryDictionary[item.categoryId].title,
-    style: (_, item) => categoryDictionary[item.categoryId].style,
-    sorter: (a, b) => a.categoryId - b.categoryId,
-    sortDirections: ['descend', 'ascend'],
-  },
-  {
-    title: 'Сообщение',
-    dataIndex: 'message',
-    onFilter: (value, record) => record.name.indexOf(value) === 0,
-  },
-  {
-    title: 'Пользователь',
-    dataIndex: 'user',
-  },
-];
-
 const timePeriodCollection = [
   {value: '60', label: '1 минута'},
   {value: '300', label: '5 минут'},
@@ -208,7 +129,6 @@ export default function TelemetryView(props) {
   let {id} = useParams()
   const [saubData, setSaubData] = useState([])
   const [chartInterval, setChartInterval] = useState(defaultChartInterval)
-  const [messages, setMessages] = useState([])
 
   const [loader, setLoader] = useState(false)
 
@@ -220,12 +140,6 @@ export default function TelemetryView(props) {
     }
   }
 
-  const handleReceiveMessages = (messages) => {
-    if (messages) {
-      setMessages(messages.items.splice(0, 4))
-    }
-  }
-
   useEffect(() => {
     setLoader(true)
     let promiseData = DataService.getData(id)
@@ -235,20 +149,11 @@ export default function TelemetryView(props) {
         console.log(ex)
       })
 
-    let promiseMessages = MessageService.getMessage(id)
+    Promise.all([promiseData]).then(()=>setLoader(false))
-      .then(handleReceiveMessages)
-      .catch((ex) => {
-        notify(`Не удалось загрузить сообщения по скважине "${id}"`, 'error')
-        console.log(ex)
-      })
-
-    Promise.all([promiseData, promiseMessages]).then(()=>setLoader(false))
 
     let unSubscribeDataSaubHub = Subscribe('hubs/telemetry', 'ReceiveDataSaub', `well_${id}`, handleReceiveDataSaub)
-    let unSubscribeMessagesHub = Subscribe('hubs/telemetry','ReceiveMessages', `well_${id}`, handleReceiveMessages)
     return () => {
       unSubscribeDataSaubHub()
-      unSubscribeMessagesHub()
     }
   }, [id]);
 
@@ -292,15 +197,6 @@ export default function TelemetryView(props) {
         </Row>
       </Col>
     </Row>
-    <Table
+    <ActiveMessagesOnline idWell={id}/>
-      showHeader={false}
-      columns={columns}
-      dataSource={messages}
-      rowClassName={(record) => `event_message_${record.categoryId} event_message`}
-      className={'message_table'}
-      size={'small'}
-      pagination={false}
-      rowKey={(record) => record.id}
-    />
   </LoaderPortal>)
 }