asb_cloud_front/src/pages/Messages.jsx

import {Button, Table, Select} from 'antd';
import {MessageService} from '../services/api'
import {useState, useEffect} from 'react'
import {useParams} from 'react-router-dom'
import {Subscribe} from '../services/signalr'
import Loader from '../components/Loader'
import moment from 'moment'
import '../styles/message.css'
import Notification from '../components/Notification'

const {Option} = Select

// Словарь категорий для строк таблицы
const categoryDictionary = {
  1: {title: 'Авария'},
  2: {title: 'Предупреждение'},
  3: {title: 'Информация'},
}

// Данные для таблицы
export default function Messages() {
  let {id} = useParams()
  const [messages, setMessages] = useState([])
  const [filteredInfo, setFilteredInfo] = useState({})
  const [loader] = useState(false)
  const filterOptions = [
    {label: 'Авария', value: '1'},
    {label: 'Предупреждение', value: '2'},
    {label: 'Информация', value: '3'},
  ]

  const children = filterOptions.map((line) => (<Option key={line.value}>{line.label}</Option>))

  const handleChange = (filters) => {
    setFilteredInfo({
      filteredInfo: filters
    })
  }

  const handleReceiveMessages = (messages) => {
    if (messages) {
      setMessages(messages.items)
    }
  }

  useEffect(() => {
    MessageService.getMessage(id)
      .then(handleReceiveMessages)
      .catch((ex) => {
        Notification(`Не удалось загрузить сообщения по скважине "${id}"`, 'error')
        console.log(ex)
      })

    let unSubscribeMessagesHub = Subscribe('ReceiveMessages', `well_${id}`, handleReceiveMessages)
    return () => {
      unSubscribeMessagesHub()
    }
  }, [id])

  const columns = [
    {
      title: 'Дата',
      key: 'date',
      dataIndex: 'date',
      render: (item) => moment(item).format('DD MMM YYYY, HH:MM:ss'),
    },
    {
      title: 'Категория',
      key: 'categoryId',
      dataIndex: 'categoryId',
      render: (_, item) => categoryDictionary[item.categoryId].title,
      style: (_, item) => categoryDictionary[item.categoryId].style,
      filters: [
        {text: 'Авария', value: '1'},
        {text: 'Предупреждение', value: '2'},
        {text: 'Информация', value: '3'},
      ],
      filteredValue: filteredInfo.categoryId,
      onFilter: (value, record) => record.categoryId.toString() === value,
      ellipsis: true,
    },
    {
      title: 'Сообщение',
      key: 'message',
      dataIndex: 'message',
    },
    {
      title: 'Пользователь',
      key: 'user',
      dataIndex: 'user',
    },
  ];

  return (
    <>
      <h2>Сообщения</h2>
      <hr/>
      <h3>Фильтр сообщений</h3>
      <Select
        mode="multiple"
        allowClear
        placeholder="Фильтр сообщений"
        className="filter-selector"
        onChange={handleChange}
      >
        {children}
      </Select>
      <Button
        type="primary"
        className="submit-button"
      >
        Применть
      </Button>
      <Button
        className="submit-button"
      >
        Обновить
      </Button>
      <Table
        columns={columns}
        dataSource={messages}
        rowClassName={(record) => `event_message_${record.categoryId} event_message`}
        size={'small'}
        pagination={{pageSize: 26}}
        rowKey={(record) => record.id}
      />
      {loader && <Loader/>}
    </>
  )
}