forked from ddrilling/asb_cloud_front
83 lines
2.5 KiB
React
83 lines
2.5 KiB
React
|
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>)
|
|||
|
|
}
|