introduce basic system status page

interface/src/AppRouting.js

@@ -29,8 +29,8 @@ class AppRouting extends Component {
           <AuthenticatedRoute exact path="/wifi/*" component={WiFiConnection} />
           <AuthenticatedRoute exact path="/ap/*" component={AccessPoint} />
           <AuthenticatedRoute exact path="/ntp/*" component={NetworkTime} />
-          <AuthenticatedRoute exact path="/system/*" component={System} />
           <AuthenticatedRoute exact path="/security/*" component={Security} />
+          <AuthenticatedRoute exact path="/system/*" component={System} />
           <Redirect to="/" />
         </Switch>
       </AuthenticationWrapper>

interface/src/components/MenuAppBar.js

@@ -127,18 +127,18 @@ class MenuAppBar extends React.Component {
             </ListItemIcon>
             <ListItemText primary="Network Time" />
           </ListItem>
-          <ListItem button component={Link} to='/system/' selected={path.startsWith('/system/')}>
-            <ListItemIcon>
-              <SettingsIcon />
-            </ListItemIcon>
-            <ListItemText primary="System" />
-          </ListItem>
           <ListItem button component={Link} to='/security/' selected={path.startsWith('/security/')}>
             <ListItemIcon>
               <LockIcon />
             </ListItemIcon>
             <ListItemText primary="Security" />
           </ListItem>
+          <ListItem button component={Link} to='/system/' selected={path.startsWith('/system/')}>
+            <ListItemIcon>
+              <SettingsIcon />
+            </ListItemIcon>
+            <ListItemText primary="System" />
+          </ListItem>
         </List>
       </div>
     );

interface/src/constants/Endpoints.js

@@ -9,6 +9,7 @@ export const LIST_NETWORKS_ENDPOINT = ENDPOINT_ROOT + "listNetworks";
 export const WIFI_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "wifiSettings";
 export const WIFI_STATUS_ENDPOINT = ENDPOINT_ROOT + "wifiStatus";
 export const OTA_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "otaSettings";
+export const SYSTEM_STATUS_ENDPOINT = ENDPOINT_ROOT + "systemStatus";
 export const SIGN_IN_ENDPOINT = ENDPOINT_ROOT + "signIn";
 export const VERIFY_AUTHORIZATION_ENDPOINT = ENDPOINT_ROOT + "verifyAuthorization";
 export const USERS_ENDPOINT = ENDPOINT_ROOT + "users";

interface/src/containers/SystemStatus.js

@@ -0,0 +1,141 @@
+import React, { Component, Fragment } from 'react';
+
+import { withStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import LinearProgress from '@material-ui/core/LinearProgress';
+import Typography from '@material-ui/core/Typography';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
+import ListItemText from '@material-ui/core/ListItemText';
+import Avatar from '@material-ui/core/Avatar';
+import Divider from '@material-ui/core/Divider';
+import DevicesIcon from '@material-ui/icons/Devices';
+import MemoryIcon from '@material-ui/icons/Memory';
+import ShowChartIcon from '@material-ui/icons/ShowChart';
+import SdStorageIcon from '@material-ui/icons/SdStorage';
+import DataUsageIcon from '@material-ui/icons/DataUsage';
+
+
+import { SYSTEM_STATUS_ENDPOINT } from '../constants/Endpoints';
+import { restComponent } from '../components/RestComponent';
+import SectionContent from '../components/SectionContent';
+
+const styles = theme => ({
+  fetching: {
+    margin: theme.spacing.unit * 4,
+    textAlign: "center"
+  },
+  button: {
+    marginRight: theme.spacing.unit * 2,
+    marginTop: theme.spacing.unit * 2,
+  }
+});
+
+class SystemStatus extends Component {
+
+  componentDidMount() {
+    this.props.loadData();
+  }
+  /*
+  {
+    "sdk_version": "v3.2-18-g977854975",
+    "flash_chip_size": 4194304,
+    "flash_chip_speed": 40000000
+ }
+*/
+  createListItems(data, classes) {
+    return (
+      <Fragment>
+        <ListItem >
+          <ListItemAvatar>
+            <Avatar>
+              <DevicesIcon />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText primary="Platform" secondary={data.esp_platform} />
+        </ListItem>
+        <Divider variant="inset" component="li" />
+        <ListItem >
+          <ListItemAvatar>
+            <Avatar>
+              <ShowChartIcon />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText primary="CPU Frequency" secondary={data.cpu_freq_mhz + ' MHz'} />
+        </ListItem>
+        <Divider variant="inset" component="li" />
+        <ListItem >
+          <ListItemAvatar>
+            <Avatar>
+              <MemoryIcon />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText primary="Free Heap" secondary={data.free_heap + ' bytes'} />
+        </ListItem>
+        <Divider variant="inset" component="li" />
+        <ListItem >
+          <ListItemAvatar>
+            <Avatar>
+              <DataUsageIcon />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText primary="Sketch Size (used/max)" secondary={data.sketch_size + ' / ' + data.free_sketch_space + ' bytes'} />
+        </ListItem>
+        <Divider variant="inset" component="li" />
+        <ListItem >
+          <ListItemAvatar>
+            <Avatar>
+              <SdStorageIcon />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText primary="Flash Chip Size" secondary={data.flash_chip_size + ' bytes'} />
+        </ListItem>
+        <Divider variant="inset" component="li" />        
+      </Fragment>
+    );
+  }
+
+  renderNTPStatus(data, classes) {
+    return (
+      <div>
+        <List>
+          {this.createListItems(data, classes)}
+        </List>
+        <Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
+          Refresh
+        </Button>
+      </div>
+    );
+  }
+
+  render() {
+    const { data, fetched, errorMessage, classes } = this.props;
+    return (
+      <SectionContent title="System Status">
+        {
+          !fetched ?
+            <div>
+              <LinearProgress className={classes.fetching} />
+              <Typography variant="h4" className={classes.fetching}>
+                Loading...
+              </Typography>
+            </div>
+            :
+            data ? this.renderNTPStatus(data, classes)
+              :
+              <div>
+                <Typography variant="h4" className={classes.fetching}>
+                  {errorMessage}
+                </Typography>
+                <Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
+                  Refresh
+                </Button>
+              </div>
+        }
+      </SectionContent>
+    )
+  }
+}
+
+export default restComponent(SYSTEM_STATUS_ENDPOINT, withStyles(styles)(SystemStatus));

interface/src/sections/System.js

@@ -7,6 +7,7 @@ import Tab from '@material-ui/core/Tab';
 import AuthenticatedRoute from '../authentication/AuthenticatedRoute';
 import MenuAppBar from '../components/MenuAppBar';
 import OTASettings from '../containers/OTASettings';
+import SystemStatus from '../containers/SystemStatus';
 
 class System extends Component {
 
@@ -22,7 +23,7 @@ class System extends Component {
           <Tab value="/system/ota" label="OTA Settings" />
         </Tabs>
         <Switch>
-          <AuthenticatedRoute exact={true} path="/system/status" component={OTASettings} />
+          <AuthenticatedRoute exact={true} path="/system/status" component={SystemStatus} />
           <AuthenticatedRoute exact={true} path="/system/ota" component={OTASettings} />
           <Redirect to="/system/status" />
         </Switch>

src/SystemStatus.cpp

@@ -0,0 +1,24 @@
+#include <SystemStatus.h>
+
+ SystemStatus::SystemStatus(AsyncWebServer *server) : _server(server) {
+  _server->on(SYSTEM_STATUS_SERVICE_PATH, HTTP_GET, std::bind(&SystemStatus::systemStatus, this, std::placeholders::_1));
+}
+
+ void SystemStatus::systemStatus(AsyncWebServerRequest *request) {
+  AsyncJsonResponse * response = new AsyncJsonResponse(MAX_ESP_STATUS_SIZE);
+  JsonObject root = response->getRoot();
+#if defined(ESP8266)
+  root["esp_platform"] = "esp8266";
+#elif defined(ESP_PLATFORM)
+  root["esp_platform"] = "esp32";
+#endif
+  root["cpu_freq_mhz"] = ESP.getCpuFreqMHz();  
+  root["free_heap"] = ESP.getFreeHeap();
+  root["sketch_size"] = ESP.getSketchSize();
+  root["free_sketch_space"] = ESP.getFreeSketchSpace();
+  root["sdk_version"] = ESP.getSdkVersion();
+  root["flash_chip_size"] = ESP.getFlashChipSize();
+  root["flash_chip_speed"] = ESP.getFlashChipSpeed();
+  response->setLength();
+  request->send(response);
+}

src/SystemStatus.h

@@ -0,0 +1,33 @@
+#ifndef SystemStatus_h
+#define SystemStatus_h
+
+#if defined(ESP8266)
+  #include <ESP8266WiFi.h>
+  #include <ESPAsyncTCP.h>
+#elif defined(ESP_PLATFORM)
+  #include <WiFi.h>
+  #include <AsyncTCP.h>
+#endif
+
+#include <ESPAsyncWebServer.h>
+#include <ArduinoJson.h>
+#include <AsyncArduinoJson6.h>
+
+#define MAX_ESP_STATUS_SIZE 1024
+#define SYSTEM_STATUS_SERVICE_PATH "/rest/systemStatus"
+
+class SystemStatus {
+
+  public:
+
+    SystemStatus(AsyncWebServer *server);
+
+  private:
+
+    AsyncWebServer* _server;
+
+    void systemStatus(AsyncWebServerRequest *request);
+
+};
+
+#endif // end SystemStatus_h

src/main.cpp

@@ -21,7 +21,7 @@
 #include <WiFiStatus.h>
 #include <NTPStatus.h>
 #include <APStatus.h>
-
+#include <SystemStatus.h>
 
 #define SERIAL_BAUD_RATE 115200
 
@@ -39,6 +39,7 @@ WiFiScanner wifiScanner = WiFiScanner(&server);
 WiFiStatus wifiStatus = WiFiStatus(&server);
 NTPStatus ntpStatus = NTPStatus(&server);
 APStatus apStatus = APStatus(&server);
+SystemStatus systemStatus = SystemStatus(&server);
 
 void setup() {
     // Disable wifi config persistance