From 05ade19302357eba6a24348f31df140ce0eca326 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kurk=C3=B3=20Mih=C3=A1ly?=
 <kurkomisi@users.noreply.github.com>
Date: Tue, 23 Jan 2018 22:51:04 +0200
Subject: 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
---
 dashboard/assets/components/Main.jsx | 39 +++++++++++++++++++++++++++---------
 1 file changed, 29 insertions(+), 10 deletions(-)

(limited to 'dashboard/assets/components/Main.jsx')

diff --git a/dashboard/assets/components/Main.jsx b/dashboard/assets/components/Main.jsx
index 6f1668a29..a9e3d3578 100644
--- a/dashboard/assets/components/Main.jsx
+++ b/dashboard/assets/components/Main.jsx
@@ -20,25 +20,38 @@ import React, {Component} from 'react';
 
 import withStyles from 'material-ui/styles/withStyles';
 
-import Home from './Home';
-import {MENU} from './Common';
+import {MENU} from '../common';
+import Footer from './Footer';
 import type {Content} from '../types/content';
 
-// Styles for the Content component.
-const styles = theme => ({
+// styles contains the constant styles of the component.
+const styles = {
+	wrapper: {
+		display:       'flex',
+		flexDirection: 'column',
+		width:         '100%',
+	},
+	content: {
+		flex:     1,
+		overflow: 'auto',
+	},
+};
+
+// themeStyles returns the styles generated from the theme for the component.
+const themeStyles = theme => ({
 	content: {
-		flexGrow:        1,
 		backgroundColor: theme.palette.background.default,
 		padding:         theme.spacing.unit * 3,
-		overflow:        'auto',
 	},
 });
+
 export type Props = {
 	classes: Object,
 	active: string,
 	content: Content,
 	shouldUpdate: Object,
 };
+
 // Main renders the chosen content.
 class Main extends Component<Props> {
 	render() {
@@ -49,8 +62,6 @@ class Main extends Component<Props> {
 		let children = null;
 		switch (active) {
 		case MENU.get('home').id:
-			children = <Home memory={content.home.memory} traffic={content.home.traffic} shouldUpdate={shouldUpdate} />;
-			break;
 		case MENU.get('chain').id:
 		case MENU.get('txpool').id:
 		case MENU.get('network').id:
@@ -61,8 +72,16 @@ class Main extends Component<Props> {
 			children = <div>{content.logs.log.map((log, index) => <div key={index}>{log}</div>)}</div>;
 		}
 
-		return <div className={classes.content}>{children}</div>;
+		return (
+			<div style={styles.wrapper}>
+				<div className={classes.content} style={styles.content}>{children}</div>
+				<Footer
+					content={content}
+					shouldUpdate={shouldUpdate}
+				/>
+			</div>
+		);
 	}
 }
 
-export default withStyles(styles)(Main);
+export default withStyles(themeStyles)(Main);
-- 
cgit v1.2.3