dashboard: send current block to the dashboard client

cmd/geth/config.go

@@ -158,9 +158,6 @@ func makeFullNode(ctx *cli.Context) *node.Node {
 	}
 	utils.RegisterEthService(stack, &cfg.Eth)
 
-	if ctx.GlobalBool(utils.DashboardEnabledFlag.Name) {
-		utils.RegisterDashboardService(stack, &cfg.Dashboard, gitCommit)
-	}
 	// Whisper must be explicitly enabled by specifying at least 1 whisper flag or in dev mode
 	shhEnabled := enableWhisper(ctx)
 	shhAutoEnabled := !ctx.GlobalIsSet(utils.WhisperEnabledFlag.Name) && ctx.GlobalIsSet(utils.DeveloperFlag.Name)
@@ -184,6 +181,12 @@ func makeFullNode(ctx *cli.Context) *node.Node {
 	if cfg.Ethstats.URL != "" {
 		utils.RegisterEthStatsService(stack, cfg.Ethstats.URL)
 	}
+
+	// Add dashboard daemon if requested. This should be the last registered service
+	// in order to be able to collect information about the other services.
+	if ctx.GlobalBool(utils.DashboardEnabledFlag.Name) {
+		utils.RegisterDashboardService(stack, &cfg.Dashboard, gitCommit)
+	}
 	return stack
 }
 

cmd/utils/flags.go

@@ -1538,9 +1538,18 @@ func RegisterEthService(stack *node.Node, cfg *eth.Config) {
 
 // RegisterDashboardService adds a dashboard to the stack.
 func RegisterDashboardService(stack *node.Node, cfg *dashboard.Config, commit string) {
-	stack.Register(func(ctx *node.ServiceContext) (node.Service, error) {
-		return dashboard.New(cfg, commit, ctx.ResolvePath("logs")), nil
+	err := stack.Register(func(ctx *node.ServiceContext) (node.Service, error) {
+		var (
+			ethServ *eth.Ethereum
+			lesServ *les.LightEthereum
+		)
+		_ = ctx.Service(&ethServ)
+		_ = ctx.Service(&lesServ)
+		return dashboard.New(cfg, ethServ, lesServ, commit, ctx.ResolvePath("logs")), nil
 	})
+	if err != nil {
+		Fatalf("Failed to register the dashboard service: %v", err)
+	}
 }
 
 // RegisterShhService configures Whisper and adds it to the given node.

dashboard/assets/components/Chain.jsx

@@ -0,0 +1,53 @@
+// @flow
+
+// Copyright 2019 The go-ethereum Authors
+// This file is part of the go-ethereum library.
+//
+// The go-ethereum library is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Lesser General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// The go-ethereum library is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Lesser General Public License for more details.
+//
+// You should have received a copy of the GNU Lesser General Public License
+// along with the go-ethereum library. If not, see <http://www.gnu.org/licenses/>.
+
+import React, {Component} from 'react';
+import type {Chain as ChainType} from '../types/content';
+
+export const inserter = () => (update: ChainType, prev: ChainType) => {
+	if (!update.currentBlock) {
+		return;
+	}
+	if (!prev.currentBlock) {
+		prev.currentBlock = {};
+	}
+	prev.currentBlock.number = update.currentBlock.number;
+	prev.currentBlock.timestamp = update.currentBlock.timestamp;
+	return prev;
+};
+
+// styles contains the constant styles of the component.
+const styles = {};
+
+// themeStyles returns the styles generated from the theme for the component.
+const themeStyles = theme => ({});
+
+export type Props = {
+	content: Content,
+};
+
+type State = {};
+
+// Logs renders the log page.
+class Chain extends Component<Props, State> {
+	render() {
+		return <></>;
+	}
+}
+
+export default Chain;

dashboard/assets/components/Dashboard.jsx

@@ -25,6 +25,7 @@ import Header from 'Header';
 import Body from 'Body';
 import {inserter as logInserter, SAME} from 'Logs';
 import {inserter as peerInserter} from 'Network';
+import {inserter as chainInserter} from 'Chain';
 import {MENU} from '../common';
 import type {Content} from '../types/content';
 
@@ -83,17 +84,24 @@ const appender = <T>(limit: number, mapper = replacer) => (update: Array<T>, pre
 // the execution of unnecessary operations (e.g. copy of the log array).
 const defaultContent: () => Content = () => ({
 	general: {
-		version: null,
 		commit:  null,
+		version: null,
+		genesis: '',
+	},
+	home:  {},
+	chain: {
+		currentBlock: {
+			number:    0,
+			timestamp: 0,
+		},
 	},
-	home:    {},
-	chain:   {},
 	txpool:  {},
 	network: {
 		peers: {
 			bundles: {},
 		},
-		diff: [],
+		diff:            [],
+		activePeerCount: 0,
 	},
 	system: {
 		activeMemory:   [],
@@ -121,9 +129,10 @@ const updaters = {
 	general: {
 		version: replacer,
 		commit:  replacer,
+		genesis: replacer,
 	},
 	home:    null,
-	chain:   null,
+	chain:   chainInserter(),
 	txpool:  null,
 	network: peerInserter(200),
 	system:  {
@@ -241,6 +250,7 @@ class Dashboard extends Component<Props, State> {
 			<div className={this.props.classes.dashboard} style={styles.dashboard}>
 				<Header
 					switchSideBar={this.switchSideBar}
+					content={this.state.content}
 				/>
 				<Body
 					opened={this.state.sideBar}

dashboard/assets/components/Footer.jsx

@@ -32,6 +32,9 @@ import ChartRow from 'ChartRow';
 import CustomTooltip, {bytePlotter, bytePerSecPlotter, percentPlotter, multiplier} from 'CustomTooltip';
 import {chartStrokeWidth, styles as commonStyles} from '../common';
 import type {General, System} from '../types/content';
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faNetworkWired} from "@fortawesome/free-solid-svg-icons";
+import Toolbar from "@material-ui/core/Toolbar";
 
 const FOOTER_SYNC_ID = 'footerSyncId';
 
@@ -154,6 +157,23 @@ class Footer extends Component<Props, State> {
 
 	render() {
 		const {general, system} = this.props;
+		let network = '';
+		switch (general.genesis) {
+		case '0xd4e56740f876aef8c010b86a40d5f56745a118d0906a34e69aec8c0db1cb8fa3':
+			network = 'main';
+			break;
+		case '0x41941023680923e0fe4d74a34bdac8141f2540e3ae90623718e47d66d1ca4a2d':
+			network = 'ropsten';
+			break;
+		case '0x6341fd3daf94b748c72ced5a5b26028f2474f5f00d824504e4fa37a75767e177':
+			network = 'rinkeby';
+			break;
+		case '0xbf7e331f7f7c1dd2e05159666b3bf8bc7a8a3a9eb1d518969eab529dd9b88c1a':
+			network = 'görli';
+			break;
+		default:
+			network = `unknown (${general.genesis.substring(0, 8)})`;
+		}
 
 		return (
 			<Grid container className={this.props.classes.footer} direction='row' alignItems='center' style={styles.footer}>
@@ -202,6 +222,9 @@ class Footer extends Component<Props, State> {
 							</a>
 						</Typography>
 					)}
+					<Typography style={styles.headerText}>
+						<span style={commonStyles.light}>Network</span> {network}
+					</Typography>
 				</Grid>
 			</Grid>
 		);

dashboard/assets/components/Header.jsx

@@ -23,16 +23,25 @@ import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import IconButton from '@material-ui/core/IconButton';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faBars} from '@fortawesome/free-solid-svg-icons';
+import {faBars, faSortAmountUp, faClock, faUsers, faSync} from '@fortawesome/free-solid-svg-icons';
 import Typography from '@material-ui/core/Typography';
+import type {Content} from '../types/content';
+
+
+const magnitude = [31536000, 604800, 86400, 3600, 60, 1];
+const label     = ['y', 'w', 'd', 'h', 'm', 's'];
 
 // styles contains the constant styles of the component.
 const styles = {
 	header: {
 		height: '8%',
 	},
+	headerText: {
+		marginRight: 15,
+	},
 	toolbar: {
-		height: '100%',
+		height:    '100%',
+		minHeight: 'unset',
 	},
 };
 
@@ -50,16 +59,52 @@ const themeStyles = (theme: Object) => ({
 	title: {
 		paddingLeft: theme.spacing.unit,
 		fontSize:    3 * theme.spacing.unit,
+		flex:        1,
 	},
 });
 
 export type Props = {
-	classes: Object, // injected by withStyles()
+	classes:       Object, // injected by withStyles()
 	switchSideBar: () => void,
+	content:       Content,
+	networkID:     number,
 };
 
+type State = {
+	since: string,
+}
 // Header renders the header of the dashboard.
-class Header extends Component<Props> {
+class Header extends Component<Props, State> {
+	constructor(props) {
+		super(props);
+		this.state = {since: ''};
+	}
+
+	componentDidMount() {
+		this.interval = setInterval(() => this.setState(() => {
+			// time (seconds) since last block.
+			let timeDiff = Math.floor((Date.now() - this.props.content.chain.currentBlock.timestamp * 1000) / 1000);
+			let since = '';
+			let i = 0;
+			for (; i < magnitude.length && timeDiff < magnitude[i]; i++);
+			for (let j = 2; i < magnitude.length && j > 0; j--, i++) {
+				const t = Math.floor(timeDiff / magnitude[i]);
+				if (t > 0) {
+					since += `${t}${label[i]} `;
+					timeDiff %= magnitude[i];
+				}
+			}
+			if (since === '') {
+				since = 'now';
+			}
+			this.setState({since: since});
+		}), 1000);
+	}
+
+	componentWillUnmount() {
+		clearInterval(this.interval);
+	}
+
 	render() {
 		const {classes} = this.props;
 
@@ -72,6 +117,15 @@ class Header extends Component<Props> {
 					<Typography type='title' color='inherit' noWrap className={classes.title}>
 						Go Ethereum Dashboard
 					</Typography>
+					<Typography style={styles.headerText}>
+						<FontAwesomeIcon icon={faSortAmountUp} /> {this.props.content.chain.currentBlock.number}
+					</Typography>
+					<Typography style={styles.headerText}>
+						<FontAwesomeIcon icon={faClock} /> {this.state.since}
+					</Typography>
+					<Typography style={styles.headerText}>
+						<FontAwesomeIcon icon={faUsers} /> {this.props.content.network.activePeerCount}
+					</Typography>
 				</Toolbar>
 			</AppBar>
 		);

dashboard/assets/components/Main.jsx

@@ -20,6 +20,7 @@ import React, {Component} from 'react';
 
 import withStyles from '@material-ui/core/styles/withStyles';
 
+import Chain from 'Chain';
 import Network from 'Network';
 import Logs from 'Logs';
 import Footer from 'Footer';
@@ -95,7 +96,9 @@ class Main extends Component<Props, State> {
 			children = <div>Work in progress.</div>;
 			break;
 		case MENU.get('chain').id:
-			children = <div>Work in progress.</div>;
+			children = <Chain
+				content={this.props.content.chain}
+			/>;
 			break;
 		case MENU.get('txpool').id:
 			children = <div>Work in progress.</div>;