Исправлены стили

src/pages/Analysis.jsx

@@ -1,7 +1,11 @@
+// import {UserOfWells} from "../components/UserOfWells";
+
 export default function Analysis(props) {
   return (
     <div className="menu_title">
       <h2>Анализ</h2>
+      {/*<UserOfWells data={saubData}/>*/}
+      <hr/>
     </div>
   )
 }

src/pages/Archive.jsx

@@ -148,19 +148,18 @@ export default function Archive(props) {
   const colSpan = 24 / (paramsGroups.length)
 
   return (<div className="content-sheet">
-    <div className="menu_title">
+    <div className="menu-title">
       <h2>Архив</h2>
-      <span style={{flexGrow: 10}}></span>
+      <span style={{flexGrow: 10}}>&nbsp;</span>
       <UserOfWells data={saubData}/>
     </div>
     <hr/>
     <div className="content-sheet">
-      <Button type="primary" style={{
-        borderRadius: '5px',
-        font: 'bold',
-        textAlign: 'center',
-        margin: '5px 5px',
-      }}>Добавить график</Button>
+      <Button type="primary"
+              className="submit-button"
+      >
+        Добавить график
+      </Button>
       Интервал:&nbsp;
       <Select defaultValue="600" onChange={setChartInterval}>
         <Option value='600'>10 минут</Option>

src/pages/Files.jsx

@@ -1,6 +1,6 @@
 export default function Files(props) {
   return (
-    <div className="menu_title">
+    <div className="menu-title">
       <h2>Файлы</h2>
     </div>
   )

src/pages/Main.jsx

@@ -3,7 +3,6 @@ import Wells from './Wells'
 import PageHeader from './Header'
 import Well from "../components/Well";
 import {Redirect, Route, Switch} from "react-router-dom";
-import Notification from "../components/Notification";
 
 const {Content} = Layout
 

src/pages/Messages.jsx

@@ -1,13 +1,16 @@
-import {Table} from 'antd';
+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 moment from 'moment'
 import '../styles/message.css'
 import Notification from '../components/Notification'
 
+const {Option} = Select
+
+
 
 // Словарь категорий для строк таблицы
 const categoryDictionary = {
@@ -23,8 +26,6 @@ const columns = [
     key: 'date',
     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: 'Категория',
@@ -32,14 +33,16 @@ const columns = [
     dataIndex: 'categoryId',
     render: (_, item) => categoryDictionary[item.categoryId].title,
     style: (_, item) => categoryDictionary[item.categoryId].style,
-    sorter: (a, b) => a.categoryId - b.categoryId,
-    sortDirections: ['descend', 'ascend'],
+    filters: [
+      {text: 'Авария', value: '1'},
+      {text: 'Предупреждение', value: '2'},
+      {text: 'Информация', value: '3'},
+    ]
   },
   {
     title: 'Сообщение',
     key: 'message',
     dataIndex: 'message',
-    onFilter: (value, record) => record.name.indexOf(value) === 0,
   },
   {
     title: 'Пользователь',
@@ -48,12 +51,22 @@ const columns = [
   },
 ];
 
+// Опции для фильра
+
 // Данные для таблицы
 export default function Messages() {
   let {id} = useParams()
   const [messages, setMessages] = 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 handleReceiveMessages = (messages) => {
     if (messages) {
       setMessages(messages.items)
@@ -61,34 +74,53 @@ export default function Messages() {
   }
 
   useEffect(() => {
-      MessageService.getMessage(id)
-        .then(handleReceiveMessages)
-        .catch ((ex) => {
-      Notification(`Не удалось загрузить сообщения по скважине "${id}"`, 'error')
-      console.log(ex)
-    })
+    MessageService.getMessage(id)
+      .then(handleReceiveMessages)
+      .catch((ex) => {
+        Notification(`Не удалось загрузить сообщения по скважине "${id}"`, 'error')
+        console.log(ex)
+      })
 
     let unSubscribeMessagesHub = Subscribe('ReceiveMessages', `well_${id}`, handleReceiveMessages)
     return () => {
       unSubscribeMessagesHub()
     }
-  }, [id]);
+  }, [id])
 
   return (
     <>
       <h2>Сообщения</h2>
       <hr/>
+      <h3>Фильтр сообщений</h3>
+      <Select
+        mode="multiple"
+        allowClear
+        placeholder="Фильтр сообщений"
+        className="filter-selector"
+        // onChange={messagesFilter}
+      >
+        {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: 28}}
+        pagination={{pageSize: 26}}
         rowKey={(record) => record.id}
       />
       {loader && <Loader/>}
     </>
   )
 }
-
-// TODO Стили для отсортированных страниц

src/pages/TelemetryView.jsx

@@ -8,7 +8,6 @@ import {CustomColumn} from '../components/CustomColumn'
 import {UserOfWells} from '../components/UserOfWells'
 import {ModeDisplay} from '../components/ModeDisplay'
 import {Display} from '../components/Display'
-import notify from '../components/Notification'
 import moment from 'moment'
 import {Subscribe} from '../services/signalr'
 import {DataService, MessageService} from '../services/api'

src/styles/App.less

@@ -118,16 +118,16 @@ html {
   flex: auto;
 }
 
-.menu_title,
+.menu-title,
 .chart-footer {
   display: flex;
 }
 
-.submit_button {
-  display: flex;
-  align-items: center;
-  padding: 20px;
+.submit-button {
   border-radius: 5px;
+  font-weight: bold;
+  text-align: center;
+  margin: 0 5px 5px 0;
 }
 
 .well_menu {
@@ -140,3 +140,8 @@ html {
 tr.table_row_size {
   height: 10px;
 }
+
+.filter-selector {
+  width: 50%;
+  margin-right: 5px;
+}