Add restart service for esp8266 and esp32

Add restart feature to status screen
Upgrade material-ui
Add icons to buttons

interface/src/containers/APStatus.js

@@ -11,6 +11,7 @@ import Divider from '@material-ui/core/Divider';
 import SettingsInputAntennaIcon from '@material-ui/icons/SettingsInputAntenna';
 import DeviceHubIcon from '@material-ui/icons/DeviceHub';
 import ComputerIcon from '@material-ui/icons/Computer';
+import RefreshIcon from '@material-ui/icons/Refresh';
 
 import { restComponent } from '../components/RestComponent';
 import LoadingNotification from '../components/LoadingNotification';
@@ -93,7 +94,7 @@ class APStatus extends Component {
         <List>
           {this.createListItems(data, classes)}
         </List>
-        <Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
+        <Button startIcon={<RefreshIcon />} variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
           Refresh
         </Button>
       </div>

interface/src/containers/NTPStatus.js

@@ -14,6 +14,7 @@ import DNSIcon from '@material-ui/icons/Dns';
 import TimerIcon from '@material-ui/icons/Timer';
 import UpdateIcon from '@material-ui/icons/Update';
 import AvTimerIcon from '@material-ui/icons/AvTimer';
+import RefreshIcon from '@material-ui/icons/Refresh';
 
 import { isSynchronized, ntpStatusHighlight, ntpStatus } from '../constants/NTPStatus';
 import * as Highlight from '../constants/Highlight';
@@ -118,7 +119,7 @@ class NTPStatus extends Component {
         <List>
           {this.createListItems(data, classes)}
         </List>
-        <Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
+        <Button startIcon={<RefreshIcon />} variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
           Refresh
         </Button>
       </div>

interface/src/containers/SystemStatus.js

@@ -1,4 +1,5 @@
 import React, { Component, Fragment } from 'react';
+import { withSnackbar } from 'notistack';
 
 import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
@@ -8,16 +9,24 @@ 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 Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogContent from '@material-ui/core/DialogContent';
+
 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 AutorenewIcon from '@material-ui/icons/Autorenew';
+import RefreshIcon from '@material-ui/icons/Refresh';
 
-import { SYSTEM_STATUS_ENDPOINT } from '../constants/Endpoints';
+import { SYSTEM_STATUS_ENDPOINT, RESTART_ENDPOINT } from '../constants/Endpoints';
 import { restComponent } from '../components/RestComponent';
 import LoadingNotification from '../components/LoadingNotification';
 import SectionContent from '../components/SectionContent';
+import { redirectingAuthorizedFetch } from '../authentication/Authentication';
 
 const styles = theme => ({
   button: {
@@ -28,6 +37,16 @@ const styles = theme => ({
 
 class SystemStatus extends Component {
 
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      confirmRestart: false,
+      processing: false
+    }
+  }
+
   componentDidMount() {
     this.props.loadData();
   }
@@ -90,13 +109,63 @@ class SystemStatus extends Component {
         <List>
           {this.createListItems(data, classes)}
         </List>
-        <Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
+        <Button startIcon={<RefreshIcon />} variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
           Refresh
         </Button>
+        <Button startIcon={<AutorenewIcon />} variant="contained" color="secondary" className={classes.button} onClick={this.onRestart}>
+          Restart
+        </Button>
       </div>
     );
   }
 
+  onRestart = () => {
+    this.setState({ confirmRestart: true });
+  }
+
+  onRestartRejected = () => {
+    this.setState({ confirmRestart: false });
+  }
+
+  onRestartConfirmed = () => {
+    this.setState({ processing: true });
+    redirectingAuthorizedFetch(RESTART_ENDPOINT, { method: 'POST' })
+      .then(response => {
+        if (response.status === 200) {
+          this.props.enqueueSnackbar("Device is restarting", { variant: 'info' });
+          this.setState({ processing: false, confirmRestart: false });
+        } else {
+          throw Error("Invalid status code: " + response.status);
+        }
+      })
+      .catch(error => {
+        this.props.enqueueSnackbar(error.message || "Problem restarting device", { variant: 'error' });
+        this.setState({ processing: false, confirmRestart: false });
+      });
+  }
+
+  renderRestartDialog() {
+    return (
+      <Dialog
+        open={this.state.confirmRestart}
+        onClose={this.onRestartRejected}
+      >
+        <DialogTitle>Confirm Restart</DialogTitle>
+        <DialogContent dividers={true}>
+          Are you sure you want to restart the device?
+        </DialogContent>
+        <DialogActions>
+          <Button startIcon={<AutorenewIcon />} variant="contained" onClick={this.onRestartConfirmed} disabled={this.state.processing} color="primary" autoFocus>
+            Restart
+          </Button>
+          <Button variant="contained" onClick={this.onRestartRejected} color="secondary">
+            Cancel
+          </Button>
+        </DialogActions>
+      </Dialog>
+    )
+  }
+
   render() {
     const { data, fetched, errorMessage, loadData, classes } = this.props;
     return (
@@ -109,9 +178,11 @@ class SystemStatus extends Component {
             () => this.renderSystemStatus(data, classes)
           }
         />
+        {this.renderRestartDialog()}
       </SectionContent>
     )
   }
+
 }
 
-export default restComponent(SYSTEM_STATUS_ENDPOINT, withStyles(styles)(SystemStatus));
+export default withSnackbar(restComponent(SYSTEM_STATUS_ENDPOINT, withStyles(styles)(SystemStatus)));

interface/src/containers/WiFiStatus.js

@@ -13,6 +13,7 @@ import DNSIcon from '@material-ui/icons/Dns';
 import SettingsInputComponentIcon from '@material-ui/icons/SettingsInputComponent';
 import SettingsInputAntennaIcon from '@material-ui/icons/SettingsInputAntenna';
 import DeviceHubIcon from '@material-ui/icons/DeviceHub';
+import RefreshIcon from '@material-ui/icons/Refresh';
 
 import SectionContent from '../components/SectionContent';
 import { WIFI_STATUS_ENDPOINT } from '../constants/Endpoints';
@@ -130,7 +131,7 @@ class WiFiStatus extends Component {
         <List>
           {this.createListItems(data, classes)}
         </List>
-        <Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
+        <Button startIcon={<RefreshIcon />} variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
           Refresh
         </Button>
       </div>