Browse Source

introduce basic system status page

master
Rick Watson 5 years ago
parent
commit
b11c508d77
  1. 2
      interface/src/AppRouting.js
  2. 12
      interface/src/components/MenuAppBar.js
  3. 1
      interface/src/constants/Endpoints.js
  4. 141
      interface/src/containers/SystemStatus.js
  5. 3
      interface/src/sections/System.js
  6. 24
      src/SystemStatus.cpp
  7. 33
      src/SystemStatus.h
  8. 3
      src/main.cpp

2
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>

12
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>
);

1
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";

141
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));

3
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>

24
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);
}

33
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

3
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

Loading…
Cancel
Save