TelemetryView и ActiveMessage переписаны в асинхронную функцию

src/components/ActiveMessagesOnline.jsx

@@ -53,16 +53,20 @@ export default function ActiveMessagesOnline({idWell}) {
   }
 
   useEffect(() => {
-    setLoader(true)
-    MessageService.getMessage(idWell)
-      .then(handleReceiveMessages)
-      .catch((ex) => {
+    const update = async () => {
+      setLoader(true)
+      try {
+        const messages = await MessageService.getMessage(idWell)
+        handleReceiveMessages(messages)
+      }
+      catch (ex) {
         notify(`Не удалось загрузить сообщения по скважине "${idWell}"`, 'error')
         console.log(ex)
-      })
-      .finally(()=>setLoader(false))
-
-    return Subscribe('hubs/telemetry','ReceiveMessages', `well_${idWell}`, handleReceiveMessages)
+      }
+      setLoader(false)
+      return Subscribe('hubs/telemetry','ReceiveMessages', `well_${idWell}`, handleReceiveMessages)
+    }
+    update()
   }, [idWell])
 
   return (<LoaderPortal show={loader}>

src/pages/Deposit.jsx

@@ -31,7 +31,7 @@ export default function Deposit() {
   const [showLoader, setShowLoader] = useState(false)
 
   useEffect(()=>{
-    const updateClusters = async()=>{
+    const update = async()=>{
       setShowLoader(true) 
       try{
         const data = await ClusterService.getClusters()
@@ -43,7 +43,7 @@ export default function Deposit() {
       }    
       setShowLoader(false) 
     }
-    updateClusters()
+    update()
   }, [])
 
   const viewParams = calcViewParams(clustersData)

src/pages/TelemetryView.jsx

@@ -2,7 +2,7 @@ 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 {Column} from '../components/Column'
 import {CustomColumn} from '../components/CustomColumn'
 import {UserOfWells} from '../components/UserOfWells'
 import {Subscribe} from '../services/signalr'
@@ -19,8 +19,16 @@ const dash = [7, 3]
 const blockHeightGroup = {
   label: "Высота блока",
   yDisplay: false,
-  linePv: { label: "blockPosition", units: 'м', xAccessorName: "blockPosition", yAccessorName: "date", color: '#333' },
-  lineOther: { label: "wellDepth", units: 'м', xAccessorName: "wellDepth", yAccessorName: "date", color: '#333', showLine: false, xConstValue:30 },
+  linePv: {label: "blockPosition", units: 'м', xAccessorName: "blockPosition", yAccessorName: "date", color: '#333'},
+  lineOther: {
+    label: "wellDepth",
+    units: 'м',
+    xAccessorName: "wellDepth",
+    yAccessorName: "date",
+    color: '#333',
+    showLine: false,
+    xConstValue: 30
+  },
 }
 
 const blockSpeedGroup = {
@@ -141,16 +149,19 @@ export default function TelemetryView(props) {
   }
 
   useEffect(() => {
-    setLoader(true)
-    DataService.getData(id)
-      .then(handleReceiveDataSaub)
-      .catch((ex) => {
-        notify(`Не удалось загрузить данные по скважине "${id}"`, 'error')
+    const update = async () => {
+      setLoader(true)
+      try {
+        const data = await DataService.getData(id)
+        handleReceiveDataSaub(data)
+      } catch (ex) {
+        notify(`Не удалось получить данные по скважине "${id}"`, 'error')
         console.log(ex)
-      })
-      .finally(()=>setLoader(false))
-
-    return Subscribe('hubs/telemetry', 'ReceiveDataSaub', `well_${id}`, handleReceiveDataSaub)
+      }
+      setLoader(false)
+      return Subscribe('hubs/telemetry', 'ReceiveDataSaub', `well_${id}`, handleReceiveDataSaub)
+    }
+    update()
   }, [id])
 
   useEffect(() => {
@@ -158,7 +169,7 @@ export default function TelemetryView(props) {
     DataService.getData(id, null, chartInterval)
       .then(handleReceiveDataSaub)
       .catch(error => console.error(error))
-      .finally(()=>setLoader(false))
+      .finally(() => setLoader(false))
   }, [id, chartInterval])
 
   const colSpan = 24 / (paramsGroups.length)
@@ -188,7 +199,8 @@ export default function TelemetryView(props) {
         <Row>
           {paramsGroups.map((group, index) =>
             <Col span={colSpan} className='border_small' key={group.label}>
-              <Column data={saubData} lineGroup={group} interval={chartInterval} showBorder = {saubData[saubData.length - 1]?.drillingBy === index}/>
+              <Column data={saubData} lineGroup={group} interval={chartInterval}
+                      showBorder={saubData[saubData.length - 1]?.drillingBy === index}/>
             </Col>)}
         </Row>
       </Col>