Add restart service for esp8266 and esp32

Add restart feature to status screen
Upgrade material-ui
Add icons to buttons
This commit is contained in:
Rick Watson
2019-11-30 12:34:52 +00:00
parent 69caa841a3
commit 78b9ae101e
20 changed files with 265 additions and 129 deletions

View File

@ -2,22 +2,16 @@ import React, { Component } from 'react';
import { Redirect, Route, Switch } from 'react-router';
import AppRouting from './AppRouting';
import { PROJECT_NAME } from './constants/Env';
import { SnackbarProvider } from 'notistack';
import CssBaseline from '@material-ui/core/CssBaseline';
import blueGrey from '@material-ui/core/colors/blueGrey';
import indigo from '@material-ui/core/colors/indigo';
import orange from '@material-ui/core/colors/orange';
import red from '@material-ui/core/colors/red';
import green from '@material-ui/core/colors/green';
import { create } from 'jss';
import { StylesProvider, jssPreset } from '@material-ui/styles';
import {
MuiThemeProvider,
createMuiTheme
} from '@material-ui/core/styles';
import { CssBaseline, IconButton, MuiThemeProvider, createMuiTheme } from '@material-ui/core';
import { StylesProvider, jssPreset } from '@material-ui/styles';
import { blueGrey, indigo, orange, red, green } from '@material-ui/core/colors';
import CloseIcon from '@material-ui/icons/Close';
// Our theme
const theme = createMuiTheme({
@ -38,11 +32,28 @@ const jss = create(jssPreset());
const unauthorizedRedirect = () => <Redirect to="/" />;
class App extends Component {
notistackRef = React.createRef();
componentDidMount() {
document.title = PROJECT_NAME;
}
onClickDismiss = (key) => () => {
this.notistackRef.current.closeSnackbar(key);
}
render() {
return (
<StylesProvider jss={jss}>
<MuiThemeProvider theme={theme}>
<SnackbarProvider maxSnack={3}>
<SnackbarProvider maxSnack={3} anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
ref={this.notistackRef}
action={(key) => (
<IconButton onClick={this.onClickDismiss(key)} size="small">
<CloseIcon />
</IconButton>
)}>
<CssBaseline />
<Switch>
<Route exact path="/unauthorized" component={unauthorizedRedirect} />

View File

@ -13,3 +13,4 @@ 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 SECURITY_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "securitySettings";
export const RESTART_ENDPOINT = ENDPOINT_ROOT + "restart";

View File

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

View File

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

View File

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

View File

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

View File

@ -8,6 +8,7 @@ import PasswordValidator from '../components/PasswordValidator';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import MenuItem from '@material-ui/core/MenuItem';
import SaveIcon from '@material-ui/icons/Save';
const styles = theme => ({
textField: {
@ -61,7 +62,7 @@ class APSettingsForm extends React.Component {
/>
</Fragment>
}
<Button variant="contained" color="primary" className={classes.button} type="submit">
<Button startIcon={<SaveIcon />} variant="contained" color="primary" className={classes.button} type="submit">
Save
</Button>
<Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>

View File

@ -18,6 +18,8 @@ import DeleteIcon from '@material-ui/icons/Delete';
import CloseIcon from '@material-ui/icons/Close';
import CheckIcon from '@material-ui/icons/Check';
import IconButton from '@material-ui/core/IconButton';
import SaveIcon from '@material-ui/icons/Save';
import PersonAddIcon from '@material-ui/icons/PersonAdd';
import UserForm from './UserForm';
import { withAuthenticationContext } from '../authentication/Context';
@ -161,7 +163,7 @@ class ManageUsersForm extends React.Component {
<TableRow>
<TableCell colSpan={2} />
<TableCell align="center">
<Button variant="contained" color="secondary" onClick={this.createUser}>
<Button startIcon={<PersonAddIcon />} variant="contained" color="secondary" onClick={this.createUser}>
Add User
</Button>
</TableCell>
@ -176,7 +178,7 @@ class ManageUsersForm extends React.Component {
</Box>
</Typography>
}
<Button variant="contained" color="primary" className={classes.button} type="submit" disabled={this.noAdminConfigured()}>
<Button startIcon={<SaveIcon />} variant="contained" color="primary" className={classes.button} type="submit" disabled={this.noAdminConfigured()}>
Save
</Button>
<Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>

View File

@ -4,6 +4,7 @@ import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import SaveIcon from '@material-ui/icons/Save';
import isIP from '../validators/isIP';
import isHostname from '../validators/isHostname';
@ -50,7 +51,7 @@ class NTPSettingsForm extends React.Component {
onChange={handleValueChange('interval')}
margin="normal"
/>
<Button variant="contained" color="primary" className={classes.button} type="submit">
<Button startIcon={<SaveIcon />} variant="contained" color="primary" className={classes.button} type="submit">
Save
</Button>
<Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>

View File

@ -6,6 +6,7 @@ import Button from '@material-ui/core/Button';
import Switch from '@material-ui/core/Switch';
import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import SaveIcon from '@material-ui/icons/Save';
import isIP from '../validators/isIP';
import isHostname from '../validators/isHostname';
@ -69,7 +70,7 @@ class OTASettingsForm extends React.Component {
onChange={handleValueChange('password')}
margin="normal"
/>
<Button variant="contained" color="primary" className={classes.button} type="submit">
<Button startIcon={<SaveIcon />} variant="contained" color="primary" className={classes.button} type="submit">
Save
</Button>
<Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>

View File

@ -6,6 +6,7 @@ import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
import SaveIcon from '@material-ui/icons/Save';
import PasswordValidator from '../components/PasswordValidator';
import { withAuthenticationContext } from '../authentication/Context';
@ -46,7 +47,7 @@ class SecuritySettingsForm extends React.Component {
If you modify the JWT Secret, all users will be logged out.
</Box>
</Typography>
<Button variant="contained" color="primary" className={classes.button} type="submit">
<Button startIcon={<SaveIcon />} variant="contained" color="primary" className={classes.button} type="submit">
Save
</Button>
<Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>

View File

@ -18,6 +18,7 @@ import Badge from '@material-ui/core/Badge';
import WifiIcon from '@material-ui/icons/Wifi';
import LockIcon from '@material-ui/icons/Lock';
import LockOpenIcon from '@material-ui/icons/LockOpen';
import PermScanWifiIcon from '@material-ui/icons/PermScanWifi';
import { isNetworkOpen, networkSecurityMode } from '../constants/WiFiSecurityModes';
@ -86,7 +87,7 @@ class WiFiNetworkSelector extends Component {
</div>
}
<Button variant="contained" color="secondary" className={classes.button} onClick={requestNetworkScan} disabled={scanningForNetworks}>
<Button startIcon={<PermScanWifiIcon />} variant="contained" color="secondary" className={classes.button} onClick={requestNetworkScan} disabled={scanningForNetworks}>
Scan again...
</Button>
</div>

View File

@ -16,6 +16,7 @@ import IconButton from '@material-ui/core/IconButton';
import LockIcon from '@material-ui/icons/Lock';
import LockOpenIcon from '@material-ui/icons/LockOpen';
import DeleteIcon from '@material-ui/icons/Delete';
import SaveIcon from '@material-ui/icons/Save';
import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator';
import { isNetworkOpen, networkSecurityMode } from '../constants/WiFiSecurityModes';
@ -175,7 +176,7 @@ class WiFiSettingsForm extends React.Component {
/>
</Fragment>
}
<Button variant="contained" color="primary" className={classes.button} type="submit">
<Button startIcon={<SaveIcon />} variant="contained" color="primary" className={classes.button} type="submit">
Save
</Button>
<Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>

View File

@ -10,6 +10,7 @@ import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import Slider from '@material-ui/core/Slider';
import { makeStyles } from '@material-ui/core/styles';
import SaveIcon from '@material-ui/icons/Save';
export const DEMO_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "demoSettings";
@ -69,7 +70,7 @@ function DemoControllerForm(props) {
max={255}
onChange={handleSliderChange('blink_speed')}
/>
<Button variant="contained" color="primary" className={classes.button} type="submit">
<Button startIcon={<SaveIcon />} variant="contained" color="primary" className={classes.button} type="submit">
Save
</Button>
<Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>