Handled YAML Errors for dashboard

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,
@@ -19,7 +20,11 @@ import { usePromiseGenerator } from '../util/usePromiseGenerator';
 import { NctrlValueWidgets } from '../components/*.jsx';
 import Typography from '@material-ui/core/Typography';
 import { NCTRL_BASE_PATH } from '../util/nctrl';
+import { Player } from '@lottiefiles/react-lottie-player';
+import { classicNameResolver } from 'typescript';
 
+const apertus_animation = require('../util/animations/aperture.json');
+const yaml_error = require('../util/animations/error.json');
 export const title = 'Dashboard';
 export const route = '/dashboard';
 export const explanation = `
@@ -35,6 +40,25 @@ const useStyles = makeStyles(theme => ({
     right: 0,
     margin: '50px',
   },
+  error_message: {
+    padding: theme.spacing(2),
+  },
+  error_wrapper: {
+    textAlign: 'left',
+    width: '100%',
+  },
+  error_player: {
+    height: '10px',
+    width: '10px',
+    alignItems: 'center',
+    display: 'flex',
+  },
+  load_player: {
+    height: '10px',
+    width: '10px',
+    alignItems: 'center',
+    display: 'flex',
+  },
   ul: {
     listStyle: 'none',
     padding: 0,
@@ -62,13 +86,13 @@ export function Component(props) {
     }
   }, [file_yml]);
 
-  const parsed = useYaml(yaml) || [];
+  const parsed = useYaml(yaml);
 
   const [rerenderDep, setRerenderDep] = useState(0);
   const rerender = () => setRerenderDep(rerenderDep + 1);
 
   return (
-    <div>
+    <Box>
       {
         <EditDashboard
           current_yml={yaml}
@@ -79,32 +103,62 @@ export function Component(props) {
         />
       }
       <div className={classes.ul}>
-        {Object.keys(parsed).map((heading, i) => {
-          return (
-            <div className={classes.notWide} key={i}>
-              <Typography variant="h6">{heading}:</Typography>
-              <Paper className={classes.paper}>
-                {parsed[heading].map((x, i) => {
-                  const InputWidget =
-                    NctrlValueWidgets[
-                      `NctrlValue${x.widget.replace(/^(.)/, v => v.toUpperCase())}`
-                    ];
-                  return (
-                    <InputWidget
-                      key={i}
-                      rerender={rerender}
-                      rerenderDep={rerenderDep}
-                      {...x}
-                      path={`${NCTRL_BASE_PATH}${x.path}`}
-                    />
-                  );
-                })}
-              </Paper>
-            </div>
-          );
-        })}
+        {!parsed ? (
+          <Player
+            src={apertus_animation}
+            autoplay={true}
+            loop={true}
+            controls={false}
+            style={{ height: '500px', width: '500px', alignItems: 'center', display: 'flex' }}
+            speed={3}
+          />
+        ) : parsed.error_message ? (
+          <div className={classes.error_wrapper}>
+            <Player
+              src={yaml_error}
+              autoplay={true}
+              loop={true}
+              controls={false}
+              style={{ height: '200px', width: '200px', alignItems: 'center', display: 'flex' }}
+            />
+            <Typography color="error" className={classes.error_message}>
+              An Error has Occured : <br />
+              <br />
+              <b>Name</b> : {parsed.error_name} <br />
+              <br />
+              <b>Message</b> : {parsed.error_message} <br />
+              <br />
+              <b>Stack</b> : {parsed.error_stack}
+            </Typography>
+          </div>
+        ) : (
+          Object.keys(parsed).map((heading, i) => {
+            return (
+              <div className={classes.notWide} key={i}>
+                <Typography variant="h6">{heading}:</Typography>
+                <Paper className={classes.paper}>
+                  {parsed[heading].map((x, i) => {
+                    const InputWidget =
+                      NctrlValueWidgets[
+                        `NctrlValue${x.widget.replace(/^(.)/, v => v.toUpperCase())}`
+                      ];
+                    return (
+                      <InputWidget
+                        key={i}
+                        rerender={rerender}
+                        rerenderDep={rerenderDep}
+                        {...x}
+                        path={`${NCTRL_BASE_PATH}${x.path}`}
+                      />
+                    );
+                  })}
+                </Paper>
+              </div>
+            );
+          })
+        )}
       </div>
-    </div>
+    </Box>
   );
 }
 
@@ -166,7 +220,16 @@ function EditDashboard({ current_yml: currentYaml, setYaml }) {
 function useYaml(yamlString) {
   const [deserialized, setDeserialized] = useState(null);
   useEffect(() => {
-    setDeserialized(safeLoad(yamlString));
+    try {
+      setDeserialized(safeLoad(yamlString));
+    } catch (error) {
+      console.log(error);
+      return setDeserialized({
+        error_name: error.name,
+        error_message: error.message,
+        error_stack: error.stack,
+      });
+    }
   }, [yamlString]);
   return deserialized;
 }