import React, { useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; import { Table, TableRow, TableCell, TableHead, TableBody, IconButton, Tooltip, } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'; import HelpOutlineIcon from '@mui/icons-material/HelpOutline'; import { useTranslation } from '../common/components/LocalizationProvider'; import PageLayout from '../common/components/PageLayout'; import ReportsMenu from './components/ReportsMenu'; import { sessionActions } from '../store'; const useStyles = makeStyles((theme) => ({ columnAction: { width: '1%', paddingLeft: theme.spacing(1), }, success: { color: theme.palette.success.main, }, error: { color: theme.palette.error.main, }, })); const LogsPage = () => { const classes = useStyles(); const navigate = useNavigate(); const dispatch = useDispatch(); const t = useTranslation(); useEffect(() => { dispatch(sessionActions.enableLogs(true)); return () => dispatch(sessionActions.enableLogs(false)); }, []); const items = useSelector((state) => state.session.logs); const registerDevice = (uniqueId) => { const query = new URLSearchParams({ uniqueId }); navigate(`/settings/device?${query.toString()}`); }; return ( } breadcrumbs={['reportTitle', 'statisticsTitle']}> {t('deviceIdentifier')} {t('positionProtocol')} {t('commandData')} {items.map((item, index) => /* eslint-disable react/no-array-index-key */ ( {item.deviceId ? ( ) : ( registerDevice(item.uniqueId)}> )} {item.uniqueId} {item.protocol} {item.data} ))}
); }; export default LogsPage;