Support unknown devices logs

3 files changed, 47 insertions, 2 deletions

diff --git a/modern/src/reports/LogsPage.jsx b/modern/src/reports/LogsPage.jsx
index 9bc04201..4b689944 100644
--- a/modern/src/reports/LogsPage.jsx
+++ b/modern/src/reports/LogsPage.jsx
@@ -1,14 +1,33 @@
 import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import {
-  Table, TableRow, TableCell, TableHead, TableBody,
+  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();
 
@@ -19,11 +38,17 @@ const LogsPage = () => {
 
   const items = useSelector((state) => state.session.logs);
 
+  const registerDevice = (uniqueId) => {
+    const query = new URLSearchParams({ uniqueId });
+    navigate(`/settings/device?${query.toString()}`);
+  }
+
   return (
     <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'statisticsTitle']}>
       <Table>
         <TableHead>
           <TableRow>
+            <TableCell className={classes.columnAction} />
             <TableCell>{t('deviceIdentifier')}</TableCell>
             <TableCell>{t('positionProtocol')}</TableCell>
             <TableCell>{t('commandData')}</TableCell>
@@ -32,6 +57,19 @@ const LogsPage = () => {
         <TableBody>
           {items.map((item, index) => (
             <TableRow key={index}>
+              <TableCell className={classes.columnAction} padding="none">
+                {item.deviceId ? (
+                  <IconButton size="small" disabled>
+                    <CheckCircleOutlineIcon fontSize="small" className={classes.success} />
+                  </IconButton>
+                ) : (
+                  <Tooltip title={t('loginRegister')}>
+                    <IconButton size="small" onClick={() => registerDevice(item.uniqueId)}>
+                      <HelpOutlineIcon fontSize="small" className={classes.error} />
+                    </IconButton>
+                  </Tooltip>
+                )}
+              </TableCell>
               <TableCell>{item.uniqueId}</TableCell>
               <TableCell>{item.protocol}</TableCell>
               <TableCell>{item.data}</TableCell>
diff --git a/modern/src/reports/components/ReportsMenu.jsx b/modern/src/reports/components/ReportsMenu.jsx
index 76564e11..a45a4500 100644
--- a/modern/src/reports/components/ReportsMenu.jsx
+++ b/modern/src/reports/components/ReportsMenu.jsx
@@ -90,12 +90,14 @@ const ReportsMenu = () => {
           title={t('sharedLogs')}
           link="/reports/logs"
           icon={<NotesIcon />}
+          selected={location.pathname === '/reports/logs'}
         />
         {!readonly && (
           <MenuItem
             title={t('reportScheduled')}
             link="/reports/scheduled"
             icon={<EventRepeatIcon />}
+            selected={location.pathname === '/reports/scheduled'}
           />
         )}
         {admin && (
diff --git a/modern/src/settings/DevicePage.jsx b/modern/src/settings/DevicePage.jsx
index 435a48bd..d8a30cbf 100644
--- a/modern/src/settings/DevicePage.jsx
+++ b/modern/src/settings/DevicePage.jsx
@@ -22,6 +22,7 @@ import { useAdministrator } from '../common/util/permissions';
 import SettingsMenu from './components/SettingsMenu';
 import useCommonDeviceAttributes from '../common/attributes/useCommonDeviceAttributes';
 import { useCatch } from '../reactHelper';
+import useQuery from '../common/util/useQuery';
 
 const useStyles = makeStyles((theme) => ({
   details: {
@@ -41,7 +42,10 @@ const DevicePage = () => {
   const commonDeviceAttributes = useCommonDeviceAttributes(t);
   const deviceAttributes = useDeviceAttributes(t);
 
-  const [item, setItem] = useState();
+  const query = useQuery();
+  const uniqueId = query.get('uniqueId');
+
+  const [item, setItem] = useState(uniqueId ? { uniqueId } : null);
 
   const handleFiles = useCatch(async (files) => {
     if (files.length > 0) {
@@ -87,6 +91,7 @@ const DevicePage = () => {
                 onChange={(event) => setItem({ ...item, uniqueId: event.target.value })}
                 label={t('deviceIdentifier')}
                 helperText={t('deviceIdentifierHelp')}
+                disabled={Boolean(uniqueId)}
               />
             </AccordionDetails>
           </Accordion>