Merge branch 'master' of https://bitbucket.org/frolovng/asb_cloud_front_react

src/components/ActiveMessagesOnline.jsx

@@ -0,0 +1,84 @@
+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(() => {
+    const update = async () => {
+      setLoader(true)
+      try {
+        const messages = await MessageService.getMessage(idWell)
+        handleReceiveMessages(messages)
+      }
+      catch (ex) {
+        notify(`Не удалось загрузить сообщения по скважине "${idWell}"`, 'error')
+        console.log(ex)
+      }
+      setLoader(false)
+      return Subscribe('hubs/telemetry','ReceiveMessages', `well_${idWell}`, handleReceiveMessages)
+    }
+    update()
+  }, [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/components/factory.ts

@@ -0,0 +1,26 @@
+export const makeColumn = (title:string, key:string, other?:any) => ({
+  title: title,
+  key: key,
+  dataIndex: key,
+  ...other,
+})
+
+export const makeColumnsPlanFact = (title:string, keyPlan:string, keyFact?:string, groupOther?:any) =>
+{
+  let keyPlanLocal = keyPlan
+  let keyFactLocal = keyFact ?? ''
+  
+  if(!keyFact){
+    keyPlanLocal = keyPlan + 'Plan'
+    keyFactLocal =  keyPlan + 'Fact'
+  }
+
+  return {  
+    title: title,
+    ...groupOther,
+    children: [ 
+      makeColumn('план', keyPlanLocal),
+      makeColumn('факт', keyFactLocal),
+    ]
+  }
+}

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

@@ -1,18 +1,16 @@
 import {useState, useEffect} from 'react'
 import {useParams} from 'react-router-dom'
-import {Row, Col, Select, Table} from 'antd'
+import {Row, Col, Select} 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
 
@@ -21,8 +19,16 @@ const dash = [7, 3]
 const blockHeightGroup = {
   label: "Высота блока",
   yDisplay: false,
-  linePv: { label: "blockPosition", units: 'м', xAccessorName: "blockPosition", yAccessorName: "date", color: '#333' },
+  linePv: {label: "blockPosition", units: 'м', xAccessorName: "blockPosition", yAccessorName: "date", color: '#333'},
-  lineOther: { label: "wellDepth", units: 'м', xAccessorName: "wellDepth", yAccessorName: "date", color: '#333', showLine: false, xConstValue:30 },
+  lineOther: {
+    label: "wellDepth",
+    units: 'м',
+    xAccessorName: "wellDepth",
+    yAccessorName: "date",
+    color: '#333',
+    showLine: false,
+    xConstValue: 30
+  },
 }
 
 const blockSpeedGroup = {
@@ -114,83 +120,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 +137,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,45 +148,29 @@ export default function TelemetryView(props) {
     }
   }
 
-  const handleReceiveMessages = (messages) => {
-    if (messages) {
-      setMessages(messages.items.splice(0, 4))
-    }
-  }
-
   useEffect(() => {
+    const update = async () => {
       setLoader(true)
-    let promiseData = DataService.getData(id)
+      try {
-      .then(handleReceiveDataSaub)
+        const data = await DataService.getData(id)
-      .catch((ex) => {
+        handleReceiveDataSaub(data)
-        notify(`Не удалось загрузить данные по скважине "${id}"`, 'error')
+      } catch (ex) {
+        notify(`Не удалось получить данные по скважине "${id}"`, 'error')
         console.log(ex)
-      })
-
-    let promiseMessages = MessageService.getMessage(id)
-      .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]);
+      setLoader(false)
+      return Subscribe('hubs/telemetry', 'ReceiveDataSaub', `well_${id}`, handleReceiveDataSaub)
+    }
+    update()
+  }, [id])
 
   useEffect(() => {
     setLoader(true)
     DataService.getData(id, null, chartInterval)
       .then(handleReceiveDataSaub)
       .catch(error => console.error(error))
-      .finally(()=>setLoader(false))
+      .finally(() => setLoader(false))
-  }, [id, chartInterval]);
+  }, [id, chartInterval])
 
   const colSpan = 24 / (paramsGroups.length)
 
@@ -287,20 +199,12 @@ 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>
     </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>)
 }

src/pages/Well.jsx

@@ -9,6 +9,7 @@ import WellAnalysis from "../pages/WellAnalysis";
 import TelemetryView from "../pages/TelemetryView";
 import MenuDocuments from "../components/MenuDocuments";
 import WellStat from "./WellStat";
+import MenuDocuments from "../components/MenuDocuments";
 
 const { Content } = Layout