Fancy wifi Table and Camera Load widget (Challenge)

frontend/components/CommandWidgets.jsx

@@ -1,25 +1,15 @@
-import { default as React, useEffect, useState } from 'react';
-import { exec } from '../util/exec';
+import React from 'react';
 
-export function Command(props) {
+export function Command({ command, output, children }) {
   return (
     <pre style={{ backgroundColor: '#eee', overflowX: 'auto' }}>
-      $ {props.command} {`\n`} <PlainCommand {...props} />
+      $ {command} {`\n`} <PlainCommand children={children} output={output} />
     </pre>
   );
 }
 
-export function PlainCommand({ command, interval, children }) {
-  const [output, setOutput] = useState('');
-  useEffect(() => {
-    const callback = () =>
-      exec(command)
-        .then(result => setOutput(result[0]))
-        .catch(err => setOutput(err[1]));
-    const interval_handle = setInterval(callback, interval);
-    callback();
-    return () => clearInterval(interval_handle);
-  }, [command]);
+export function PlainCommand({ children, output }) {
+  if (!output) return null;
 
   if (children === undefined) {
     return <>{output}</>;

frontend/components/LoadChartWidget.jsx

@@ -0,0 +1,84 @@
+import Chart from 'react-apexcharts';
+import React, { useEffect } from 'react';
+import ApexCharts from 'apexcharts';
+
+const graph_height = 400;
+
+export default function LoadChartWidget(props) {
+  const options = {
+    chart: {
+      height: graph_height,
+      type: 'line',
+      zoom: {
+        enabled: true,
+      },
+      id: 'load_chart',
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    title: {
+      text: props.title,
+    },
+    stroke: {
+      width: 2,
+      curve: 'smooth',
+    },
+    colors: ['#2E93fA', '#66DA26', '#546E7A'],
+    fill: {
+      type: 'gradient',
+      gradient: {
+        shadeIntensity: 1,
+        inverseColors: true,
+        gradientToColors: ['#ff0fd7', '#b7ff00', '#0841ff'],
+        opacityFrom: 1,
+        opacityTo: 1,
+        type: 'vertical',
+        stops: [0, 30],
+      },
+    },
+  };
+
+  const series = [
+    {
+      name: '1 minute',
+      data: [],
+    },
+    {
+      name: '5 minute',
+      data: [],
+    },
+    {
+      name: '15 mintue',
+      data: [],
+    },
+  ];
+
+  useEffect(() => {
+    ApexCharts.exec('load_chart', 'updateOptions', {
+      xaxis: {
+        labels: {
+          show: false,
+        },
+      },
+    });
+
+    ApexCharts.exec('load_chart', 'appendData', [
+      {
+        data: props.data[0],
+      },
+      {
+        data: props.data[1],
+      },
+      {
+        data: props.data[2],
+      },
+    ]);
+  });
+
+  return (
+    <div id="chart">
+      <Chart options={options} series={series} type="line" height={graph_height} />
+    </div>
+  );
+}

frontend/components/RunCommand.jsx

@@ -0,0 +1,71 @@
+import { Box } from '@material-ui/core';
+import React, { useEffect, useState } from 'react';
+import { Command } from './CommandWidgets';
+import LoadChartWidget from './LoadChartWidget';
+
+const uptime_cmd = 'uptime';
+
+const graph_title = 'Load average';
+
+export default function RunCommand(props) {
+  const [state, setstate] = useState({
+    labels: [],
+    data: [[], [], []],
+    output: '',
+  });
+
+  function extractLoadFromString(str = '') {
+    let list = str.split(',').map(ele => {
+      return ele.trim();
+    });
+
+    let one_min = parseFloat(list[2].split(':')[1]);
+    let five_min = parseFloat(list[3]);
+    let fifteen_min = parseFloat(list[4]);
+
+    return {
+      y_value: [one_min, five_min, fifteen_min],
+      original_str: str,
+    };
+  }
+
+  function updateData(new_data) {
+    setstate({
+      data: [[new_data.y_value[0]], [new_data.y_value[1]], [new_data.y_value[2]]],
+      output: new_data.original_str,
+    });
+  }
+
+  useEffect(() => {
+    const callback = () =>
+      exec(props.command)
+        .then(result => {
+          if (props.showGraph) updateData(extractLoadFromString(result[0]));
+          else
+            setstate(prevState => ({
+              ...prevState,
+              output: result[0],
+            }));
+        })
+        .catch(err => console.log(err[1]));
+    const interval_handle = setInterval(callback, props.interval);
+    callback();
+    return () => clearInterval(interval_handle);
+  }, [props.command]);
+
+  return (
+    <div>
+      {props.showGraph !== undefined && props.command === uptime_cmd ? (
+        <Box
+          style={{
+            padding: '1.5rem',
+          }}
+        >
+          <LoadChartWidget data={state.data} title={graph_title} />
+        </Box>
+      ) : null}
+
+      <Command command={props.command} output={state.output} children={props.children} />
+    </div>
+  );
+}

frontend/index.jsx

@@ -10,7 +10,7 @@ const theme = createMuiTheme({
   palette: {
     primary: {
       main: '#FA8756',
-      contrastText: 'white',
+      contrastText: '#ffffff',
     },
     secondary: green,
   },

frontend/routes/SystemInformation.jsx

@@ -1,20 +1,20 @@
 import * as React from 'react';
-import { Command } from '../components/CommandWidgets';
+import RunCommand from '../components/RunCommand';
 
 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) {
+export function Component() {
   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} />
+      <RunCommand command="uptime" interval={1000} showGraph={true} />
+      <RunCommand command="date" interval={1000} />
+      <RunCommand command="free -h" interval={1000} />
+      <RunCommand command="ip a" interval={1000} />
+      <RunCommand command="uname -a" interval={10000} />
+      <RunCommand command="ps -aef --forest" interval={10000} />
     </div>
   );
 }