dashboard: CPU, memory, diskIO and traffic on the footer (#15950)

* dashboard: footer, deep state update

* dashboard: resolve asset path

* dashboard: prevent state update on every reconnection

* dashboard: fix linter issue

* dashboard, cmd: minor UI fix, include commit hash

* dashboard: gitCommit renamed to commit

* dashboard: move the geth version to the right, make commit optional

* dashboard: memory, traffic and CPU on footer

* dashboard: fix merge

* dashboard: CPU, diskIO on footer

* dashboard: rename variables, use group declaration

* dashboard: docs

1 files changed, 29 insertions, 33 deletions

diff --git a/dashboard/assets/components/Header.jsx b/dashboard/assets/components/Header.jsx
index e29507bef..e91885af3 100644
--- a/dashboard/assets/components/Header.jsx
+++ b/dashboard/assets/components/Header.jsx
@@ -26,18 +26,22 @@ import IconButton from 'material-ui/IconButton';
 import Typography from 'material-ui/Typography';
 import ChevronLeftIcon from 'material-ui-icons/ChevronLeft';
 
-import {DURATION} from './Common';
+import {DURATION} from '../common';
 
-// arrowDefault is the default style of the arrow button.
-const arrowDefault = {
-	transition: `transform ${DURATION}ms`,
-};
-// arrowTransition is the additional style of the arrow button corresponding to the transition's state.
-const arrowTransition = {
-	entered: {transform: 'rotate(180deg)'},
+// styles contains the constant styles of the component.
+const styles = {
+	arrow: {
+		default: {
+			transition: `transform ${DURATION}ms`,
+		},
+		transition: {
+			entered: {transform: 'rotate(180deg)'},
+		},
+	},
 };
-// Styles for the Header component.
-const styles = theme => ({
+
+// themeStyles returns the styles generated from the theme for the component.
+const themeStyles = (theme: Object) => ({
 	header: {
 		backgroundColor: theme.palette.background.appBar,
 		color:           theme.palette.getContrastText(theme.palette.background.appBar),
@@ -47,53 +51,45 @@ const styles = theme => ({
 		paddingLeft:  theme.spacing.unit,
 		paddingRight: theme.spacing.unit,
 	},
-	mainText: {
+	title: {
 		paddingLeft: theme.spacing.unit,
 	},
 });
+
 export type Props = {
-	classes: Object,
+	classes: Object, // injected by withStyles()
 	opened: boolean,
-	openSideBar: () => {},
-	closeSideBar: () => {},
+	switchSideBar: () => void,
 };
+
 // Header renders the header of the dashboard.
 class Header extends Component<Props> {
 	shouldComponentUpdate(nextProps) {
 		return nextProps.opened !== this.props.opened;
 	}
 
-	// changeSideBar opens or closes the sidebar corresponding to the previous state.
-	changeSideBar = () => {
-		if (this.props.opened) {
-			this.props.closeSideBar();
-		} else {
-			this.props.openSideBar();
-		}
-	};
-
-	// arrowButton is connected to the sidebar; changes its state.
-	arrowButton = (transitionState: string) => (
-		<IconButton onClick={this.changeSideBar}>
+	// arrow renders a button, which changes the sidebar's state.
+	arrow = (transitionState: string) => (
+		<IconButton onClick={this.props.switchSideBar}>
 			<ChevronLeftIcon
 				style={{
-					...arrowDefault,
-					...arrowTransition[transitionState],
+					...styles.arrow.default,
+					...styles.arrow.transition[transitionState],
 				}}
 			/>
 		</IconButton>
 	);
 
 	render() {
-		const {classes, opened} = this.props; // The classes property is injected by withStyles().
+		const {classes, opened} = this.props;
 
 		return (
-			<AppBar position="static" className={classes.header}>
+			<AppBar position='static' className={classes.header}>
 				<Toolbar className={classes.toolbar}>
 					<Transition mountOnEnter in={opened} timeout={{enter: DURATION}}>
-						{this.arrowButton}
+						{this.arrow}
 					</Transition>
-					<Typography type="title" color="inherit" noWrap className={classes.mainText}>
+					<Typography type='title' color='inherit' noWrap className={classes.title}>
 						Go Ethereum Dashboard
 					</Typography>
 				</Toolbar>
@@ -102,4 +98,4 @@ class Header extends Component<Props> {
 	}
 }
 
-export default withStyles(styles)(Header);
+export default withStyles(themeStyles)(Header);