10000 Merge pull request #60 from rjwats/ft_restart_service · adityathakekar/esp8266-react@3c52b31 · GitHub
[go: up one dir, main page]

Skip to content

Commit 3c52b31

Browse files
authored
Merge pull request rjwats#60 from rjwats/ft_restart_service
Add reset service feature
2 parents 69caa84 + 1ded736 commit 3c52b31

20 files changed

+268
-128
lines changed

interface/package-lock.json

Lines changed: 91 additions & 97 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

interface/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"@material-ui/core": "^4.4.3",
7-
"@material-ui/icons": "^4.4.3",
6+
"@material-ui/core": "^4.7.0",
7+
"@material-ui/icons": "^4.5.1",
88
"compression-webpack-plugin": "^2.0.0",
99
"jwt-decode": "^2.2.0",
1010
"moment": "^2.24.0",
11-
"notistack": "^0.8.9",
11+
"notistack": "^0.9.6",
1212
"prop-types": "^15.7.2",
1313
"react": "^16.10.1",
1414
"react-dom": "^16.10.1",

interface/src/App.js

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,16 @@ import React, { Component } from 'react';
22
import { Redirect, Route, Switch } from 'react-router';
33

44
import AppRouting from './AppRouting';
5-
import { SnackbarProvider } from 'notistack';
6-
7-
import CssBaseline from '@material-ui/core/CssBaseline';
8-
import blueGrey from '@material-ui/core/colors/blueGrey';
9-
import indigo from '@material-ui/core/colors/indigo';
10-
import orange from '@material-ui/core/colors/orange';
11-
import red from '@material-ui/core/colors/red';
12-
import green from '@material-ui/core/colors/green';
5+
import { PROJECT_NAME } from './constants/Env';
136

7+
import { SnackbarProvider } from 'notistack';
148
import { create } from 'jss';
9+
10+
import { CssBaseline, IconButton, MuiThemeProvider, createMuiTheme } from '@material-ui/core';
1511
import { StylesProvider, jssPreset } from '@material-ui/styles';
12+
import { blueGrey, indigo, orange, red, green } from '@material-ui/core/colors';
13+
import CloseIcon from '@material-ui/icons/Close';
1614

17-
import {
18-
MuiThemeProvider,
19-
createMuiTheme
20-
} from '@material-ui/core/styles';
2115

2216
// Our theme
2317
const theme = createMuiTheme({
@@ -38,11 +32,28 @@ const jss = create(jssPreset());
3832
const unauthorizedRedirect = () => <Redirect to="/" />;
3933

4034
class App extends Component {
35+
36+
notistackRef = React.createRef();
37+
38+
componentDidMount() {
39+
document.title = PROJECT_NAME;
40+
}
41+
42+
onClickDismiss = (key) => () => {
43+
this.notistackRef.current.closeSnackbar(key);
44+
}
45+
4146
render() {
4247
return (
4348
<StylesProvider jss={jss}>
4449
<MuiThemeProvider theme={theme}>
45-
<SnackbarProvider maxSnack={3}>
50+
<SnackbarProvider maxSnack={3} anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
51+
ref={this.notistackRef}
52+
action={(key) => (
53+
<IconButton onClick={this.onClickDismiss(key)} size="small">
54+
<CloseIcon />
55+
</IconButton>
56+
)}>
4657
<CssBaseline />
4758
<Switch>
4859
<Route exact path="/unauthorized" component={unauthorizedRedirect} />

interface/src/constants/Endpoints.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,4 @@ export const SYSTEM_STATUS_ENDPOINT = ENDPOINT_ROOT + "systemStatus";
1313
export const SIGN_IN_ENDPOINT = ENDPOINT_ROOT + "signIn";
1414
export const VERIFY_AUTHORIZATION_ENDPOINT = ENDPOINT_ROOT + "verifyAuthorization";
1515
export const SECURITY_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "securitySettings";
16+
export const RESET_ENDPOINT = ENDPOINT_ROOT + "reset";

interface/src/containers/APStatus.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import Divider from '@material-ui/core/Divider';
1111
import SettingsInputAntennaIcon from '@material-ui/icons/SettingsInputAntenna';
1212
import DeviceHubIcon from '@material-ui/icons/DeviceHub';
1313
import ComputerIcon from '@material-ui/icons/Computer';
14+
import RefreshIcon from '@material-ui/icons/Refresh';
1415

1516
import { restComponent } from '../components/RestComponent';
1617
import LoadingNotification from '../components/LoadingNotification';
@@ -93,7 +94,7 @@ class APStatus extends Component {
9394
<List>
9495
{this.createListItems(data, classes)}
9596
</List>
96-
<Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
97+
<Button startIcon={<RefreshIcon />} variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
9798
Refresh
9899
</Button>
99100
</div>

interface/src/containers/NTPStatus.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import DNSIcon from '@material-ui/icons/Dns';
1414
import TimerIcon from '@material-ui/icons/Timer';
1515
import UpdateIcon from '@material-ui/icons/Update';
1616
import AvTimerIcon from '@material-ui/icons/AvTimer';
17+
import RefreshIcon from '@material-ui/icons/Refresh';
1718

1819
import { isSynchronized, ntpStatusHighlight, ntpStatus } from '../constants/NTPStatus';
1920
import * as Highlight from '../constants/Highlight';
@@ -118,7 +119,7 @@ class NTPStatus extends Component {
118119
<List>
119120
{this.createListItems(data, classes)}
120121
</List>
121-
<Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
122+
<Button startIcon={<RefreshIcon />} variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
122123
Refresh
123124
</Button>
124125
</div>

interface/src/containers/SystemStatus.js

Lines changed: 74 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { Component, Fragment } from 'react';
2+
import { withSnackbar } from 'notistack';
23

34
import { withStyles } from '@material-ui/core/styles';
45
import Button from '@material-ui/core/Button';
@@ -8,16 +9,24 @@ import ListItemAvatar from '@material-ui/core/ListItemAvatar';
89
import ListItemText from '@material-ui/core/ListItemText';
910
import Avatar from '@material-ui/core/Avatar';
1011
import Divider from '@material-ui/core/Divider';
12+
import Dialog from '@material-ui/core/Dialog';
13+
import DialogActions from '@material-ui/core/DialogActions';
14+
import DialogTitle from '@material-ui/core/DialogTitle';
15+
import DialogContent from '@material-ui/core/DialogContent';
16+
1117
import DevicesIcon from '@material-ui/icons/Devices';
1218
import MemoryIcon from '@material-ui/icons/Memory';
1319
import ShowChartIcon from '@material-ui/icons/ShowChart';
1420
import SdStorageIcon from '@material-ui/icons/SdStorage';
1521
import DataUsageIcon from '@material-ui/icons/DataUsage';
22+
import AutorenewIcon from '@material-ui/icons/Autorenew';
23+
import RefreshIcon from '@material-ui/icons/Refresh';
1624

17-
import { SYSTEM_STATUS_ENDPOINT } from '../constants/Endpoints';
25+
import { SYSTEM_STATUS_ENDPOINT, RESET_ENDPOINT } from '../constants/Endpoints';
1826
import { restComponent } from '../components/RestComponent';
1927
import LoadingNotification from '../components/LoadingNotification';
2028
import SectionContent from '../components/SectionContent';
29+
import { redirectingAuthorizedFetch } from '../authentication/Authentication';
2130

2231
const styles = theme => ({
2332
button: {
@@ -28,6 +37,16 @@ const styles = theme => ({
2837

2938
class SystemStatus extends Component {
3039

40+
41+
constructor(props) {
42+
super(props);
43+
44+
this.state = {
45+
confirmReset: false,
46+
processing: false
47+
}
48+
}
49+
3150
componentDidMount() {
3251
this.props.loadData();
3352
}
@@ -90,13 +109,63 @@ class SystemStatus extends Component {
90109
<List>
91110
{this.createListItems(data, classes)}
92111
</List>
93-
<Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
112+
<Button startIcon={<RefreshIcon />} variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
94113
Refresh
95114
</Button>
115+
<Button startIcon={<AutorenewIcon />} variant="contained" color=& 10000 quot;secondary" className={classes.button} onClick={this.onReset}>
116+
Reset
117+
</Button>
96118
</div>
97119
);
98120
}
99121

122+
onReset = () => {
123+
this.setState({ confirmReset: true });
124+
}
125+
126+
onResetRejected = () => {
127+
this.setState({ confirmReset: false });
128+
}
129+
130+
onResetConfirmed = () => {
131+
this.setState({ processing: true });
132+
redirectingAuthorizedFetch(RESET_ENDPOINT, { method: 'POST' })
133+
.then(response => {
134+
if (response.status === 200) {
135+
this.props.enqueueSnackbar("Device is reseting", { variant: 'info' });
136+
this.setState({ processing: false, confirmReset: false });
137+
} else {
138+
throw Error("Invalid status code: " + response.status);
139+
}
140+
})
141+
.catch(error => {
142+
this.props.enqueueSnackbar(error.message || "Problem resetting device", { variant: 'error' });
143+
this.setState({ processing: false, confirmReset: false });
144+
});
145+
}
146+
147+
renderResetDialog() {
148+
return (
149+
<Dialog
150+
open={this.state.confirmReset}
151+
onClose={this.onResetRejected}
152+
>
153+
<DialogTitle>Confirm Reset</DialogTitle>
154+
<DialogContent dividers={true}>
155+
Are you sure you want to reset the device?
156+
</DialogContent>
157+
<DialogActions>
158+
<Button startIcon={<AutorenewIcon />} variant="contained" onClick={this.onResetConfirmed} disabled={this.state.processing} color="primary" autoFocus>
159+
Reset
160+
</Button>
161+
<Button variant="contained" onClick={this.onResetRejected} color="secondary">
162+
Cancel
163+
</Button>
164+
</DialogActions>
165+
</Dialog>
166+
)
167+
}
168+
100169
render() {
101170
const { data, fetched, errorMessage, loadData, classes } = this.props;
102171
return (
@@ -109,9 +178,11 @@ class SystemStatus extends Component {
109178
() => this.renderSystemStatus(data, classes)
110179
}
111180
/>
181+
{this.renderResetDialog()}
112182
</SectionContent>
113183
)
114184
}
185+
115186
}
116187

117-
export default restComponent(SYSTEM_STATUS_ENDPOINT, withStyles(styles)(SystemStatus));
188+
export default withSnackbar(restComponent(SYSTEM_STATUS_ENDPOINT, withStyles(styles)(SystemStatus)));

interface/src/containers/WiFiStatus.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import DNSIcon from '@material-ui/icons/Dns';
1313
import SettingsInputComponentIcon from '@material-ui/icons/SettingsInputComponent';
1414
import SettingsInputAntennaIcon from '@material-ui/icons/SettingsInputAntenna';
1515
import DeviceHubIcon from '@material-ui/icons/DeviceHub';
16+
import RefreshIcon from '@material-ui/icons/Refresh';
1617

1718
import SectionContent from '../components/SectionContent';
1819
import { WIFI_STATUS_ENDPOINT } from '../constants/Endpoints';
@@ -130,7 +131,7 @@ class WiFiStatus extends Component {
130131
<List>
131132
{this.createListItems(data, classes)}
132133
</List>
133-
<Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
134+
<Button startIcon={<RefreshIcon />} variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
134135
Refresh
135136
</Button>
136137
</div>

interface/src/forms/APSettingsForm.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import PasswordValidator from '../components/PasswordValidator';
88
import { withStyles } from '@material-ui/core/styles';
99
import Button from '@material-ui/core/Button';
1010
import MenuItem from '@material-ui/core/MenuItem';
11+
import SaveIcon from '@material-ui/icons/Save';
1112

1213
const styles = theme => ({
1314
textField: {
@@ -61,7 +62,7 @@ class APSettingsForm extends React.Component {
6162
/>
6263
</Fragment>
6364
}
64-
<Button variant="contained" color="primary" className={classes.button} type="submit">
65+
<Button startIcon={<SaveIcon />} variant="contained" color="primary" className={classes.button} type="submit">
6566
Save
6667
</Button>
6768
<Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>

interface/src/forms/ManageUsersForm.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ import DeleteIcon from '@material-ui/icons/Delete';
1818
import CloseIcon from '@material-ui/icons/Close';
1919
import CheckIcon from '@material-ui/icons/Check';
2020
import IconButton from '@material-ui/core/IconButton';
21+
import SaveIcon from '@material-ui/icons/Save';
22+
import PersonAddIcon from '@material-ui/icons/PersonAdd';
2123

2224
import UserForm from './UserForm';
2325
import { withAuthenticationContext } from '../authentication/Context';
@@ -161,7 +163,7 @@ class ManageUsersForm extends React.Component {
161163
<TableRow>
162164
<TableCell colSpan={2} />
163165
<TableCell align="center">
164-
<Button variant="contained" color="secondary" onClick={this.createUser}>
166+
<Button startIcon={<PersonAddIcon />} variant="contained" color="secondary" onClick={this.createUser}>
165167
Add User
166168
</Button>
167169
</TableCell>
@@ -176,7 +178,7 @@ class ManageUsersForm extends React.Component {
176178
</Box>
177179
</Typography>
178180
}
179-
<Button variant="contained" color="primary" className={classes.button} type="submit" disabled={this.noAdminConfigured()}>
181+
<Button startIcon={<SaveIcon />} variant="contained" color="primary" className={classes.button} type="submit" disabled={this.noAdminConfigured()}>
180182
Save
181183
</Button>
182184
<Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>

0 commit comments

Comments
 (0)
0