Улучшен стиль сообщений

src/pages/Telemetry/Messages.jsx

@@ -1,22 +1,21 @@
-import { Table, Select, DatePicker, Input } from 'antd'
+import { Select, DatePicker, Input, Tooltip } from 'antd'
-import { useState, useEffect, memo, useCallback } from 'react'
+import { useState, useEffect, memo, useCallback, useMemo } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import moment from 'moment'
 
 import { useIdWell } from '@asb/context'
 import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
-import { makeColumn, makeDateColumn, makeNumericSorter } from '@components/Table'
+import { makeColumn, makeDateColumn, makeNumericColumn, makeNumericSorter, makeTextColumn, Table } from '@components/Table'
 import { wrapPrivateComponent } from '@utils'
 import { MessageService } from '@api'
 
-
 import '@styles/message.css'
 
-const { Option } = Select
 const pageSize = 26
-const { RangePicker } = DatePicker
 const { Search } = Input
+const { Option } = Select
+const { RangePicker } = DatePicker
 
 // Словарь категорий для строк таблицы
 const categoryDictionary = {
@@ -26,11 +25,17 @@ const categoryDictionary = {
 }
 
 // Конфигурация таблицы
-export const columns = [
+export const makeMessageColumns = (idWell) => [
   makeDateColumn('Дата', 'date', undefined, undefined, { width: '10rem' }),
-  makeColumn('Глубина', 'wellDepth', { width: '10rem', render: depth => <span>{depth.toFixed(2)} м.</span> }),
+  makeNumericColumn('Глубина, м', 'wellDepth', null, null, (depth, item) => (
+    <Tooltip title={'Нажмите для перехода в архив'}>
+      <Link style={{ color: 'inherit', textDecoration: 'underline' }} to={`/well/${idWell}/telemetry/archive?range=1800&start=${moment(item?.date).subtract(3, 'minute').local().toISOString()}`}>
+        {depth.toFixed(2)}
+      </Link>
+    </Tooltip>
+  ), '7rem'),
   makeColumn('Категория', 'categoryId', {
-    width: '10rem',
+    width: '8rem',
     render: (_, item) => categoryDictionary[item.categoryId].title,
     style: (_, item) => categoryDictionary[item.categoryId]?.style,
     sorter: makeNumericSorter('categoryId'),
@@ -38,7 +43,7 @@ export const columns = [
     ellipsis: true,
   }),
   makeColumn('Сообщение', 'message', { onFilter: (value, record) => record.name.indexOf(value) === 0 }),
-  makeColumn('Пользователь', 'user', { width: '10rem' }),
+  makeTextColumn('Пользователь', 'user', null, null, null, { width: '10rem' }),
 ]
 
 const filterOptions = [
@@ -60,10 +65,11 @@ const Messages = memo(() => {
   const [showLoader, setShowLoader] = useState(false)
 
   const idWell = useIdWell()
-  const navigate = useNavigate()
 
   const onChangeSearchString = useCallback((message) => setSearchString(message.length > 2 ? message : ''), [])
 
+  const columns = useMemo(() => makeMessageColumns(idWell), [idWell])
+
   useEffect(() => {
     invokeWebApiWrapperAsync(
       async () => {
@@ -89,10 +95,6 @@ const Messages = memo(() => {
     )
   }, [idWell, page, categories, range, searchString])
 
-  const onMessageRow = useCallback((record) => ({
-    onClick: () => navigate(`/well/${idWell}/telemetry/archive?range=1800&start=${moment(record?.date).subtract(3, 'minute').local().toISOString()}`)
-  }), [idWell, navigate])
-
   return (
     <>
       <div className={'filter-group'}>
@@ -128,7 +130,6 @@ const Messages = memo(() => {
           }}
           rowKey={(record) => record.id}
           tableName={'messages'}
-          onRow={onMessageRow}
         />
       </LoaderPortal>
     </>

src/pages/Telemetry/TelemetryView/ActiveMessagesOnline.jsx

@@ -1,5 +1,5 @@
 import { Table } from 'antd'
-import { useState, useEffect, useCallback, memo } from 'react'
+import { useState, useEffect, useCallback, memo, useMemo } from 'react'
 
 import { useIdWell } from '@asb/context'
 import LoaderPortal from '@components/LoaderPortal'
@@ -7,7 +7,7 @@ import { invokeWebApiWrapperAsync } from '@components/factory'
 import { Subscribe } from '@services/signalr'
 import { MessageService } from '@api'
 
-import { columns } from '../Messages'
+import { makeMessageColumns } from '../Messages'
 
 import '@styles/message.css'
 
@@ -22,6 +22,8 @@ export const ActiveMessagesOnline = memo(() => {
     setMessages(messages.items.splice(0, 4))
   }, [])
   
+  const columns = useMemo(() => makeMessageColumns(idWell), [idWell])
+
   useEffect(() => {
     invokeWebApiWrapperAsync(
     async () => {

src/styles/message.css

@@ -40,5 +40,9 @@
 
 td.ant-table-column-sort {
   color: black;
-  background-color: rgb(221, 247, 221);
+  background-color: #fafafa;
+}
+
+.ant-table-tbody > tr > td.ant-table-cell-row-hover {
+  color: black;
 }