WIP logevent console

rjwats · mjkl-gh · Jan 2, 2021 · Jan 2, 2021 · Dec 25, 2021 · Dec 25, 2021
commit 87106367d6e47dcf02b44098b1d84fc5fb0db1f9
diff --git a/interface/src/components/layout/LayoutMenu.tsx b/interface/src/components/layout/LayoutMenu.tsx
@@ -8,6 +8,7 @@ import DeviceHubIcon from '@mui/icons-material/DeviceHub';
 import SettingsIcon from '@mui/icons-material/Settings';
 import LockIcon from '@mui/icons-material/Lock';
 import WifiIcon from '@mui/icons-material/Wifi';
+import CableIcon from '@mui/icons-material/Cable';
 
 import { FeaturesContext } from '../../contexts/features';
 import ProjectMenu from '../../project/ProjectMenu';
@@ -35,6 +36,9 @@ const LayoutMenu: FC = () => {
         {features.mqtt && (
           <LayoutMenuItem icon={DeviceHubIcon} label="MQTT" to="/mqtt" />
         )}
+        {features.serial && (
+          <LayoutMenuItem icon={CableIcon} label="Serial" to="/serial" />
+        )}
         {features.security && (
           <LayoutMenuItem icon={LockIcon} label="Security" to="/security" disabled={!authenticatedContext.me.admin} />
         )}

diff --git a/interface/src/framework/serial/LogEventConsole.tsx b/interface/src/framework/serial/LogEventConsole.tsx
@@ -1,10 +1,12 @@
 import React, { FC } from 'react';
 
 import { LogEvent, LogLevel } from '../../types';
-import { Theme, makeStyles, Box } from '@mui/material';
+import { Box } from '@mui/system';
 import { useWindowSize } from '../../components';
 import { formatIsoDateTimeToHr } from "../../utils";
 
+import { useTheme } from "@mui/material/styles"
+
 interface LogEventConsoleProps {
   events: LogEvent[];
 }
@@ -16,62 +18,24 @@ interface Offsets {
 const topOffset = () => document.getElementById('serial-tabs')?.getBoundingClientRect().bottom || 0;
 const leftOffset = () => document.getElementById('serial-tabs')?.getBoundingClientRect().left || 0;
 
-const useStyles = makeStyles((theme: Theme) => ({
-  console: {
-    padding: theme.spacing(2),
-    position: "absolute",
-    left: (offsets: Offsets) => offsets.leftOffset(),
-    right: 0,
-    top: (offsets: Offsets) => offsets.topOffset(),
-    bottom: 0,
-    backgroundColor: "black",
-    overflow: "auto"
-  },
-  entry: {
-    color: "#bbbbbb",
-    fontFamily: "Courier New, monospace",
-    fontSize: "14px",
-    letterSpacing: "normal",
-    whiteSpace: "nowrap"
-  },
-  file: {
-    color: "#00ffff"
-  },
-  debug: {
-    color: "#0000ff"
-  },
-  info: {
-    color: "#00ff00"
-  },
-  warning: {
-    color: "#ffff00"
-  },
-  error: {
-    color: "#ff0000"
-  },
-  unknown: {
-    color: "#ffffff"
-  }
-}));
-
 
 const LogEventConsole: FC<LogEventConsoleProps> = (props) => {
   useWindowSize();
-  const classes = useStyles({ topOffset, leftOffset });
   const { events } = props;
+  const theme = useTheme()
 
   const styleLevel = (level: LogLevel) => {
     switch (level) {
       case LogLevel.DEBUG:
-        return classes.debug;
+        return styles.debug;
       case LogLevel.INFO:
-        return classes.info;
+        return styles.info;
       case LogLevel.WARNING:
-        return classes.warning;
+        return styles.warning;
       case LogLevel.ERROR:
-        return classes.error;
+        return styles.error;
       default:
-        return classes.unknown;
+        return styles.unknown;
     }
   }
 
@@ -95,13 +59,51 @@ const LogEventConsole: FC<LogEventConsoleProps> = (props) => {
     return label.padStart(7, '\xa0');
   }
 
+  const  styles = {
+    console: {
+      padding: theme.spacing(2),
+      position: "absolute",
+      //left: (offsets: Offsets) => offsets.leftOffset(),
+      right: 0,
+      //top: (offsets: Offsets) => offsets.topOffset(),
+      bottom: 0,
+      backgroundColor: "black",
+      overflow: "auto"
+    },
+    entry: {
+      color: "#bbbbbb",
+      fontFamily: "Courier New, monospace",
+      fontSize: "14px",
+      letterSpacing: "normal",
+      whiteSpace: "nowrap"
+    },
+    file: {
+      color: "#00ffff"
+    },
+    debug: {
+      color: "#0000ff"
+    },
+    info: {
+      color: "#00ff00"
+    },
+    warning: {
+      color: "#ffff00"
+    },
+    error: {
+      color: "#ff0000"
+    },
+    unknown: {
+      color: "#ffffff"
+    }
+  };
+
   return (
-    <Box className={classes.console}>
+    <Box sx={styles.console}>
       {events.map(e => (
-        <div className={classes.entry}>
-          <span>{formatIsoDateTimeToHr(e.time)} </span>
-          <span>{e.message}</span>
-        </div>
+        <Box sx={styles.entry}>
+           <Box component="span">{formatIsoDateTimeToHr(e.time)} </Box>
+          <Box component="span">{e.message}</Box>
+        </Box>
       ))}
     </Box>
   );

diff --git a/interface/src/framework/serial/LogEventController.tsx b/interface/src/framework/serial/LogEventController.tsx
@@ -4,7 +4,7 @@ import { withSnackbar, WithSnackbarProps } from 'notistack';
 
 import { addAccessTokenParameter } from '../../api/authentication';
 import { LogEvent } from '../../types';
-import { WEB_SOCKET_ROOT } from '../../api/env';
+import { WEB_SOCKET_ROOT } from '../../api/endpoints';
 import LogEventConsole from './LogEventConsole';
 
 const LOG_EVENT_WEB_SOCKET_URL = WEB_SOCKET_ROOT + "serial";

diff --git a/interface/src/framework/serial/Serial.tsx b/interface/src/framework/serial/Serial.tsx
@@ -8,7 +8,6 @@ import { AuthenticatedContext } from '../../contexts/authentication';
 
 import SerialStatusForm from './SerialStatusForm';
 import SerialSettingsForm from './SerialSettingsForm';
-import LogEventConsole from './LogEventConsole';
 
 const Serial: FC= () => {
   useLayoutTitle("Serial");
@@ -20,13 +19,12 @@ const Serial: FC= () => {
     <>
       <RouterTabs value={routerTab}>
         <Tab value="status" label="Serial Status" />
-        <Tab value="log" label="Remote Log" />
+        {/* <Tab value="log" label="Remote Log" /> */}
         <Tab value="settings" label="Serial Settings" disabled={!authenticatedContext.me.admin} />
       </RouterTabs>
       <Routes>
-        <Route path="status" element={SerialStatusForm} />
-        <Route path="log" element={LogEventConsole} />
-        <Route 
+        <Route path="status" element={<SerialStatusForm />} />
+        <Route
         path="settings"
         element={
           <RequireAdmin>
@@ -38,6 +36,6 @@ const Serial: FC= () => {
       </Routes>
     </>
   );
-}
+};
 
 export default Serial;