Add placeholder system section, for status page and reset feature.

interface/src/AppRouting.js

@@ -7,13 +7,13 @@ import AuthenticationWrapper from './authentication/AuthenticationWrapper';
 import AuthenticatedRoute from './authentication/AuthenticatedRoute';
 import UnauthenticatedRoute from './authentication/UnauthenticatedRoute';
 
-import OTAConfiguration from './containers/OTAConfiguration';
 import SignInPage from './containers/SignInPage';
 
 import WiFiConnection from './sections/WiFiConnection';
 import AccessPoint from './sections/AccessPoint';
 import NetworkTime from './sections/NetworkTime';
 import Security from './sections/Security';
+import System from './sections/System';
 
 class AppRouting extends Component {
 
@@ -29,7 +29,7 @@ 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="/ota-configuration" component={OTAConfiguration} />
+          <AuthenticatedRoute exact path="/system/*" component={System} />
           <AuthenticatedRoute exact path="/security/*" component={Security} />
           <Redirect to="/" />
         </Switch>

interface/src/components/MenuAppBar.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
+import { Link, withRouter } from 'react-router-dom';
 
 import { withStyles } from '@material-ui/core/styles';
 import Drawer from '@material-ui/core/Drawer';
@@ -13,23 +13,19 @@ import Divider from '@material-ui/core/Divider';
 import Grow from '@material-ui/core/Grow';
 import MenuItem from '@material-ui/core/MenuItem';
 import MenuList from '@material-ui/core/MenuList';
-
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
-
 import Popper from '@material-ui/core/Popper';
 import MenuIcon from '@material-ui/icons/Menu';
 import WifiIcon from '@material-ui/icons/Wifi';
-import SystemUpdateIcon from '@material-ui/icons/SystemUpdate';
+import SettingsIcon from '@material-ui/icons/Settings';
 import AccessTimeIcon from '@material-ui/icons/AccessTime';
 import AccountCircleIcon from '@material-ui/icons/AccountCircle';
 import SettingsInputAntennaIcon from '@material-ui/icons/SettingsInputAntenna';
 import LockIcon from '@material-ui/icons/Lock';
-
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
-
 import Paper from '@material-ui/core/Paper';
 
 import { APP_NAME } from '../constants/App';
@@ -102,7 +98,7 @@ class MenuAppBar extends React.Component {
   render() {
     const { classes, theme, children, sectionTitle, authenticationContext } = this.props;
     const { mobileOpen, authMenuOpen } = this.state;
-
+    const path = this.props.match.url;
     const drawer = (
       <div>
         <Toolbar>
@@ -113,31 +109,31 @@ class MenuAppBar extends React.Component {
         </Toolbar>
         <Divider />
         <List>
-          <ListItem button component={Link} to='/wifi/'>
+          <ListItem button component={Link} to='/wifi/' selected={path.startsWith('/wifi/')}>
             <ListItemIcon>
               <WifiIcon />
             </ListItemIcon>
             <ListItemText primary="WiFi Connection" />
           </ListItem>
-          <ListItem button component={Link} to='/ap/'>
+          <ListItem button component={Link} to='/ap/' selected={path.startsWith('/ap/')}>
             <ListItemIcon>
               <SettingsInputAntennaIcon />
             </ListItemIcon>
             <ListItemText primary="Access Point" />
           </ListItem>
-          <ListItem button component={Link} to='/ntp/'>
+          <ListItem button component={Link} to='/ntp/' selected={path.startsWith('/ntp/')}>
             <ListItemIcon>
               <AccessTimeIcon />
             </ListItemIcon>
             <ListItemText primary="Network Time" />
           </ListItem>
-          <ListItem button component={Link} to='/ota-configuration'>
+          <ListItem button component={Link} to='/system/' selected={path.startsWith('/system/')}>
             <ListItemIcon>
-              <SystemUpdateIcon />
+              <SettingsIcon />
             </ListItemIcon>
-            <ListItemText primary="OTA Updates" />
+            <ListItemText primary="System" />
           </ListItem>
-          <ListItem button component={Link} to='/security/'>
+          <ListItem button component={Link} to='/security/' selected={path.startsWith('/security/')}>
             <ListItemIcon>
               <LockIcon />
             </ListItemIcon>
@@ -241,4 +237,8 @@ MenuAppBar.propTypes = {
   sectionTitle: PropTypes.string.isRequired,
 };
 
-export default withAuthenticationContext(withStyles(styles, { withTheme: true })(MenuAppBar));
+export default withAuthenticationContext(
+  withRouter(
+    withStyles(styles, { withTheme: true })(MenuAppBar)
+  )
+);

interface/src/containers/APStatus.js

@@ -118,7 +118,7 @@ class APStatus extends Component {
               <LinearProgress className={classes.fetching} />
               <Typography variant="h4" className={classes.fetching}>
                 Loading...
-           </Typography>
+              </Typography>
             </div>
             :
             data ? this.renderAPStatus(data, classes)
@@ -129,7 +129,7 @@ class APStatus extends Component {
                 </Typography>
                 <Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
                   Refresh
-          </Button>
+                </Button>
               </div>
         }
       </SectionContent>

interface/src/containers/NTPStatus.js

@@ -79,7 +79,8 @@ class NTPStatus extends Component {
               <ListItemAvatar>
                 <Avatar>
                   <SwapVerticalCircleIcon />
-                </Avatar></ListItemAvatar>
+                </Avatar>
+              </ListItemAvatar>
               <ListItemText primary="Last Sync" secondary={data.last_sync > 0 ? unixTimeToTimeAndDate(data.last_sync) : "never"} />
             </ListItem>
             <Divider variant="inset" component="li" />
@@ -98,7 +99,8 @@ class NTPStatus extends Component {
           <ListItemAvatar>
             <Avatar>
               <TimerIcon />
-            </Avatar></ListItemAvatar>
+            </Avatar>
+          </ListItemAvatar>
           <ListItemText primary="Sync Interval" secondary={moment.duration(data.interval, 'seconds').humanize()} />
         </ListItem>
         <Divider variant="inset" component="li" />
@@ -106,7 +108,8 @@ class NTPStatus extends Component {
           <ListItemAvatar>
             <Avatar>
               <AvTimerIcon />
-            </Avatar></ListItemAvatar>
+            </Avatar>
+          </ListItemAvatar>
           <ListItemText primary="Uptime" secondary={moment.duration(data.uptime, 'seconds').humanize()} />
         </ListItem>
         <Divider variant="inset" component="li" />
@@ -138,7 +141,7 @@ class NTPStatus extends Component {
               <LinearProgress className={classes.fetching} />
               <Typography variant="h4" className={classes.fetching}>
                 Loading...
-           </Typography>
+              </Typography>
             </div>
             :
             data ? this.renderNTPStatus(data, classes)
@@ -149,7 +152,7 @@ class NTPStatus extends Component {
                 </Typography>
                 <Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
                   Refresh
-          </Button>
+                </Button>
               </div>
         }
       </SectionContent>

interface/src/containers/OTAConfiguration.js

@@ -1,15 +0,0 @@
-import React, { Component } from 'react';
-import MenuAppBar from '../components/MenuAppBar';
-import OTASettings from './OTASettings';
-
-class OTAConfiguration extends Component {
-  render() {
-    return (
-        <MenuAppBar sectionTitle="OTA Configuration">
-          <OTASettings />
-        </MenuAppBar>
-    )
-  }
-}
-
-export default OTAConfiguration

interface/src/sections/System.js

@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import { Redirect, Switch } from 'react-router-dom'
+
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+
+import AuthenticatedRoute from '../authentication/AuthenticatedRoute';
+import MenuAppBar from '../components/MenuAppBar';
+import OTASettings from '../containers/OTASettings';
+
+class System extends Component {
+
+  handleTabChange = (event, path) => {
+    this.props.history.push(path);
+  };
+
+  render() {
+    return (
+      <MenuAppBar sectionTitle="System">
+        <Tabs value={this.props.match.url} onChange={this.handleTabChange} indicatorColor="primary" textColor="primary" variant="fullWidth">
+          <Tab value="/system/status" label="System Status" />
+          <Tab value="/system/ota" label="OTA Updates" />
+        </Tabs>
+        <Switch>
+          <AuthenticatedRoute exact={true} path="/system/status" component={OTASettings} />
+          <AuthenticatedRoute exact={true} path="/system/ota" component={OTASettings} />
+          <Redirect to="/system/status" />
+        </Switch>
+      </MenuAppBar>
+    )
+  }
+}
+
+export default System