Fancy wifi Table and Camera Load widget (Challenge)

frontend/App.jsx

@@ -17,6 +17,8 @@ import MenuIcon from '@material-ui/icons/Menu';
 import { useState } from 'react';
 import clsx from 'clsx';
 import { isDesktop } from './util/isDesktop';
+import Brightness4Icon from '@material-ui/icons/Brightness4';
+import Brightness7Icon from '@material-ui/icons/Brightness7';
 
 const drawerWidth = 240;
 const useStyles = makeStyles(theme => ({
@@ -25,6 +27,7 @@ const useStyles = makeStyles(theme => ({
     backgroundColor: theme.palette.background.default,
     width: '100vw',
     minHeight: '100vh',
+    flexGrow: 1,
   },
   appBar: {
     zIndex: theme.zIndex.drawer + 1,
@@ -57,6 +60,9 @@ const useStyles = makeStyles(theme => ({
     marginLeft: 0,
   },
   toolbar: theme.mixins.toolbar,
+  title: {
+    flexGrow: 1,
+  },
 }));
 
 export function App(props) {
@@ -77,7 +83,7 @@ export function App(props) {
             <MenuIcon />
           </IconButton>
 
-          <Typography variant="h6" noWrap>
+          <Typography variant="h6" noWrap className={classes.title}>
             {process.env.MOCK ? 'Mock' : ''} AXIOM WebUi -&nbsp;
             <Switch>
               {Object.values(routes).map(({ route, title }) => (
@@ -87,6 +93,9 @@ export function App(props) {
               ))}
             </Switch>
           </Typography>
+          <IconButton aria-label="dark" onClick={props.changeTheme}>
+            {props.isDark ? <Brightness7Icon /> : <Brightness4Icon />}
+          </IconButton>
         </Toolbar>
       </AppBar>
 

frontend/Themer.jsx

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { createMuiTheme } from '@material-ui/core';
+import { green } from '@material-ui/core/colors';
+import { ThemeProvider } from '@material-ui/core/styles';
+import { App } from './App';
+
+export default function Themer() {
+  const [isDark, setDark] = useState(false);
+  function changeTheme() {
+    setDark(!isDark);
+  }
+  const theme = createMuiTheme({
+    palette: {
+      primary: {
+        main: '#FA8756',
+        contrastText: '#ffffff',
+      },
+      secondary: green,
+      type: isDark ? 'dark' : 'light',
+    },
+  });
+
+  return (
+    <ThemeProvider theme={theme}>
+      <App isDark={isDark} changeTheme={changeTheme} />
+    </ThemeProvider>
+  );
+}

frontend/components/CommandWidgets.jsx

@@ -3,7 +3,7 @@ import { exec } from '../util/exec';
 
 export function Command(props) {
   return (
-    <pre style={{ backgroundColor: '#eee', overflowX: 'auto' }}>
+    <pre style={{ overflowX: 'auto' }}>
       $ {props.command} {`\n`} <PlainCommand {...props} />
     </pre>
   );

frontend/components/LoadGraph.jsx

@@ -0,0 +1,92 @@
+import React, { useEffect, useRef } from 'react';
+import Dygraph from 'dygraphs';
+import { Container, makeStyles, Paper } from '@material-ui/core';
+import { blue, green, red } from '@material-ui/core/colors';
+import { Alert } from '@material-ui/lab';
+
+const update_interval = 1000;
+const command = 'uptime';
+const chart_title = 'Load averages';
+
+const chart_config = {
+  legend: 'always',
+  labelsSeparateLines: true,
+  colors: [red.A200, green.A200, blue.A200],
+  strokeWidth: 1.5,
+  xlabel: 'Time',
+  xLabelHeight: 16,
+  title: chart_title,
+};
+
+const useStyles = makeStyles(theme => ({
+  chart_paper: {
+    height: '350px',
+    margin: theme.spacing(2),
+    padding: theme.spacing(2),
+  },
+  chart: {
+    width: '100%',
+    height: '100%',
+  },
+  box_wrapper: {
+    width: '100%',
+    marginBottom: theme.spacing(4),
+    fontFamily: theme.typography.fontFamily,
+  },
+  tooltip: {
+    margin: theme.spacing(2),
+    padding: theme.spacing(2),
+  },
+}));
+
+let data = 'date, 1 minute, 5 minute, 15 minute\n';
+let chart = null;
+
+export default function LoadGraph(props) {
+  const chartRef = useRef();
+  const tooltip_ref = useRef();
+  const classes = useStyles();
+
+  function addData(str = '') {
+    if (str.length == 0) return;
+    const list = str.split('load average: ');
+    data += `${new Date()}, ${list[1].trim()}\n`;
+    const row = chart.getSelection();
+    chart.updateOptions({ file: data });
+    chart.setSelection(row);
+  }
+
+  useEffect(() => {
+    chart = new Dygraph(chartRef.current, data, {
+      ...chart_config,
+      labelsDiv: tooltip_ref.current,
+    });
+
+    const callback = () =>
+      exec(command)
+        .then(result => {
+          addData(result[0]);
+        })
+        .catch(err => {
+          <Alert severity="error">{err[1]}</Alert>;
+          console.log(err[1]);
+        });
+    const interval_handle = setInterval(
+      callback,
+      props.interval ? props.interval : update_interval
+    );
+    callback();
+    return () => clearInterval(interval_handle);
+  }, []);
+
+  return (
+    <Container className={classes.box_wrapper}>
+      <Paper className={classes.chart_paper} variant="outlined">
+        <div ref={chartRef} className={classes.chart} />
+      </Paper>
+      <Paper className={classes.tooltip} variant="outlined">
+        <div ref={tooltip_ref} />
+      </Paper>
+    </Container>
+  );
+}

frontend/index.jsx

@@ -1,26 +1,10 @@
 import * as React from 'react';
 import ReactDOM from 'react-dom';
-import { App } from './App';
+import Themer from './Themer';
 import { HashRouter as Router } from 'react-router-dom';
-import { createMuiTheme } from '@material-ui/core';
-import { amber, green } from '@material-ui/core/colors';
-import { ThemeProvider } from '@material-ui/core/styles';
-
-const theme = createMuiTheme({
-  palette: {
-    primary: {
-      main: '#FA8756',
-      contrastText: 'white',
-    },
-    secondary: green,
-  },
-});
-
 ReactDOM.render(
   <Router>
-    <ThemeProvider theme={theme}>
-      <App />
-    </ThemeProvider>
+    <Themer />
   </Router>,
   document.getElementById('root')
 );

frontend/routes/Dashboard.jsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  Box,
   Button,
   Dialog,
   DialogActions,
@@ -68,7 +69,7 @@ export function Component(props) {
   const rerender = () => setRerenderDep(rerenderDep + 1);
 
   return (
-    <div>
+    <Box>
       {
         <EditDashboard
           current_yml={yaml}
@@ -104,7 +105,7 @@ export function Component(props) {
           );
         })}
       </div>
-    </div>
+    </Box>
   );
 }
 

frontend/routes/Home.jsx

@@ -14,7 +14,10 @@ import { Link, Link as RouterLink } from 'react-router-dom';
 import ReactMarkdown from 'markdown-to-jsx';
 import { routes } from '../*/*.jsx';
 import { PlainCommand } from '../components/CommandWidgets';
+import { Player } from '@lottiefiles/react-lottie-player';
+import '@lottiefiles/lottie-player';
 
+const apertus_animation = require('../util/animations/aperture.json');
 export const title = 'Home';
 export const route = '/';
 export const position = 1;
@@ -24,7 +27,7 @@ const useStyles = makeStyles(theme => ({
     marginRight: theme.spacing(2),
   },
   heroContent: {
-    padding: theme.spacing(12, 0, 6),
+    padding: theme.spacing(0, 0, 6),
   },
   cardGrid: {
     paddingTop: theme.spacing(8),
@@ -57,6 +60,13 @@ export function Component(props) {
     <div>
       <div className={classes.heroContent}>
         <Container maxWidth="sm">
+          <Player
+            src={apertus_animation}
+            autoplay={true}
+            loop={true}
+            controls={false}
+            style={{ height: '200px', width: '200px', alignItems: 'center', display: 'flex' }}
+          />
           <Typography component="h1" variant="h2" align="center" color="textPrimary" gutterBottom>
             AXIOM <br />
             WebUI

frontend/routes/SystemInformation.jsx

@@ -1,20 +1,117 @@
 import * as React from 'react';
 import { Command } from '../components/CommandWidgets';
+import LoadGraph from '../components/LoadGraph';
+import { makeStyles } from '@material-ui/core/styles';
+import Accordion from '@material-ui/core/Accordion';
+import AccordionSummary from '@material-ui/core/AccordionSummary';
+import AccordionDetails from '@material-ui/core/AccordionDetails';
+import Typography from '@material-ui/core/Typography';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 
 export const title = 'System Information';
 export const route = '/system_information';
 export const explanation = `Get an overview of whats going on in the linux side of your camera. 
   Ip address, system load, etc can be found here`;
 
-export function Component(props) {
+const useStyles = makeStyles(theme => ({
+  root: {
+    width: '100%',
+  },
+  heading: {
+    fontSize: theme.typography.pxToRem(16),
+    fontWeight: theme.typography.fontWeightRegular,
+  },
+}));
+
+export function Component() {
+  const classes = useStyles();
+
   return (
-    <div>
-      <Command command="date" interval={1000} />
-      <Command command="uptime" interval={1000} />
-      <Command command="free -h" interval={1000} />
-      <Command command="ip a" interval={1000} />
-      <Command command="uname -a" interval={10000} />
-      <Command command="ps -aef --forest" interval={10000} />
+    <div className={classes.root}>
+      <Accordion defaultExpanded={true}>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel1a-content"
+          id="panel1a-header"
+        >
+          <Typography className={classes.heading}>Camera load</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <LoadGraph interval={1000} />
+        </AccordionDetails>
+      </Accordion>
+      <Accordion TransitionProps={{ unmountOnExit: true }}>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel1a-content"
+          id="panel1a-header"
+        >
+          <Typography className={classes.heading}>date</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Command command="date" interval={1000} />
+        </AccordionDetails>
+      </Accordion>
+      <Accordion TransitionProps={{ unmountOnExit: true }}>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel2a-content"
+          id="panel2a-header"
+        >
+          <Typography className={classes.heading}>uptime</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Command command="uptime" interval={1000} />
+        </AccordionDetails>
+      </Accordion>
+      <Accordion TransitionProps={{ unmountOnExit: true }}>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel1a-content"
+          id="panel1a-header"
+        >
+          <Typography className={classes.heading}>free -h</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Command command="free -h" interval={1000} />
+        </AccordionDetails>
+      </Accordion>
+      <Accordion TransitionProps={{ unmountOnExit: true }}>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel1a-content"
+          id="panel1a-header"
+        >
+          <Typography className={classes.heading}>ip a</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Command command="ip a" interval={1000} />
+        </AccordionDetails>
+      </Accordion>
+      <Accordion TransitionProps={{ unmountOnExit: true }}>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel1a-content"
+          id="panel1a-header"
+        >
+          <Typography className={classes.heading}>uname -a</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Command command="uname -a" interval={10000} />
+        </AccordionDetails>
+      </Accordion>
+      <Accordion TransitionProps={{ unmountOnExit: true }}>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel1a-content"
+          id="panel1a-header"
+        >
+          <Typography className={classes.heading}>ps -aef --forest</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Command command="ps -aef --forest" interval={10000} />
+        </AccordionDetails>
+      </Accordion>
     </div>
   );
 }