use ES6 Map to track log lines per log file and link up tabs to log f…

…iles
jdrews · Feb 12, 2023 · f90f972 · f90f972
1 parent a03847d
commit f90f972
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 11 deletions.
diff --git a/web/src/App.jsx b/web/src/App.jsx
@@ -9,8 +9,8 @@ const url = 'http://localhost:8884' //DEV
 
 const rws = new ReconnectingWebSocket(wsurl);
 
-const App = (props) => {
-    const [lines, setLines] = useState([]);
+const App = () => {
+    const [logFiles, setLogFiles] = useState(new Map());
     const [title, setTitle] = useState("logstation");
     useEffect(() => {
         connect()
@@ -29,11 +29,14 @@ const App = (props) => {
         };
         rws.onmessage = (message) => {
             console.log(message.data);
-            setLines([...lines, JSON.parse(message.data).text])
+            const logObject = JSON.parse(message.data);
+            const logFileName = logObject.logfile
+            const newLogLines = logObject.text
+            setLogFiles(new Map(logFiles.set(logFileName, [...logFiles.get(logFileName) ?? [], newLogLines])))
         };
     }
 
-    return <MainLayout name={title} lines={lines}/>
+    return <MainLayout name={title} logFiles={logFiles}/>
 }
 
 

diff --git a/web/src/MainLayout.jsx b/web/src/MainLayout.jsx
@@ -5,6 +5,7 @@ import Container from '@mui/material/Container';
 import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
 import Box from '@mui/material/Box';
+import {useState} from "react";
 
 function a11yProps(index) {
     return {
@@ -14,30 +15,36 @@ function a11yProps(index) {
 }
 
 const MainLayout = (props) => {
+    const [selectedLogFile, setSelectedLogFile] = useState("0");
+
+    const handleLogSelection = (event, newLogFile) => {
+        setSelectedLogFile(newLogFile);
+    };
+
     //TODO: Figure out how to wrap this in a tabular header that shows the file and lets you swap between files
         // Might be able to have this react class be instantiated within a larger react class that handles the file tabs and switching
     return (
         <Container disableGutters maxWidth="false" sx={{width: '100%', height: '100vh'}}>
                 <Box sx={{borderBottom: 1, borderColor: 'divider', height: '8vh', m: 0, p: 0}}>
-                    <Tabs value={1} aria-label="log selector bar" textColor="secondary" indicatorColor="secondary">
+                    <Tabs value={selectedLogFile} aria-label="log selector bar" textColor="secondary" indicatorColor="secondary" onChange={handleLogSelection}>
                         {/*<Tabs value={value} onChange={handleChange} aria-label="basic tabs example">*/
                             /*TODO: use value and onChange to populate tabs dynamically and make them do stuff*/}
-                        <Tab label="logstation" disabled={true} disableRipple={true} {...a11yProps(0)}
+                        <Tab key="0" value="0" label="logstation" disabled={true} disableRipple={true} {...a11yProps("0")}
                              sx={{
                                  color: '#ffffff !important',
                                  opacity: '0.6 !important',
                                  textTransform: 'unset',
                                  fontSize: '110%'
                              }}/>
                         {/*TODO: This should pull from the MUI theme instead of hardcoded.*/}
-                        <Tab label="log1.log" {...a11yProps(1)}
-                             sx={{color: '#ffffff', background: '#222', textTransform: 'unset'}}/>
-                        <Tab label="log2.log" {...a11yProps(2)}
-                             sx={{color: '#ffffff', background: '#222', textTransform: 'unset'}}/>
+                        {[...props.logFiles.keys()].map(logFile =>
+                            (<Tab key={logFile} value={logFile} label={logFile} {...a11yProps(logFile)} sx={{color: '#ffffff', background: '#222', textTransform: 'unset'}}/>)
+                        )}
+
                     </Tabs>
                 </Box>
                 <Box sx={{width: '100%', height: '92vh'}} className="LogViewer">
-                       <LogStationLogViewer data={props.lines}/>
+                       <LogStationLogViewer data={props.logFiles.get(selectedLogFile)}/>
                 </Box>
         </Container>
     );