dashboard: deep state update, version in footer (#15837)

* dashboard: footer, deep state update

* dashboard: resolve asset path

* dashboard: remove bundle.js

* dashboard: prevent state update on every reconnection

* dashboard: fix linter issue

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

* remove geth binary

* dashboard: gitCommit renamed to commit

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

* dashboard: commit limited to 7 characters

* dashboard: limit commit length on client side

* dashboard: run go generate

.gitignore

@@ -38,4 +38,4 @@ profile.cov
 /dashboard/assets/flow-typed
 /dashboard/assets/node_modules
 /dashboard/assets/stats.json
-/dashboard/assets/public/bundle.js
+/dashboard/assets/bundle.js

cmd/geth/config.go

@@ -158,7 +158,7 @@ func makeFullNode(ctx *cli.Context) *node.Node {
 	utils.RegisterEthService(stack, &cfg.Eth)
 
 	if ctx.GlobalBool(utils.DashboardEnabledFlag.Name) {
-		utils.RegisterDashboardService(stack, &cfg.Dashboard)
+		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)

cmd/utils/flags.go

@@ -1104,9 +1104,9 @@ func RegisterEthService(stack *node.Node, cfg *eth.Config) {
 }
 
 // RegisterDashboardService adds a dashboard to the stack.
-func RegisterDashboardService(stack *node.Node, cfg *dashboard.Config) {
+func RegisterDashboardService(stack *node.Node, cfg *dashboard.Config, commit string) {
 	stack.Register(func(ctx *node.ServiceContext) (node.Service, error) {
-		return dashboard.New(cfg)
+		return dashboard.New(cfg, commit)
 	})
 }
 

dashboard/README.md

@@ -20,7 +20,7 @@ Normally the dashboard assets are bundled into Geth via `go-bindata` to avoid ex
 
 ```
 $ (cd dashboard/assets && ./node_modules/.bin/webpack --watch)
-$ geth --dashboard --dashboard.assets=dashboard/assets/public --vmodule=dashboard=5
+$ geth --dashboard --dashboard.assets=dashboard/assets --vmodule=dashboard=5
 ```
 
 To bundle up the final UI into Geth, run `go generate`:

dashboard/assets/components/Common.jsx

@@ -62,32 +62,4 @@ export type MenuProp = {|...ProvidedMenuProp, id: string|};
 // This way the mistyping is prevented.
 export const MENU: Map<string, {...MenuProp}> = new Map(menuSkeletons.map(({id, menu}) => ([id, {id, ...menu}])));
 
-type ProvidedSampleProp = {|limit: number|};
-const sampleSkeletons: Array<{|id: string, sample: ProvidedSampleProp|}> = [
-	{
-		id:     'memory',
-		sample: {
-			limit: 200,
-		},
-	}, {
-		id:     'traffic',
-		sample: {
-			limit: 200,
-		},
-	}, {
-		id:     'logs',
-		sample: {
-			limit: 200,
-		},
-	},
-];
-export type SampleProp = {|...ProvidedSampleProp, id: string|};
-export const SAMPLE: Map<string, {...SampleProp}> = new Map(sampleSkeletons.map(({id, sample}) => ([id, {id, ...sample}])));
-
 export const DURATION = 200;
-
-export const LENS: Map<string, string> = new Map([
-	'content',
-	...menuSkeletons.map(({id}) => id),
-	...sampleSkeletons.map(({id}) => id),
-].map(lens => [lens, lens]));

dashboard/assets/components/Dashboard.jsx

@@ -19,37 +19,99 @@
 import React, {Component} from 'react';
 
 import withStyles from 'material-ui/styles/withStyles';
-import {lensPath, view, set} from 'ramda';
 
 import Header from './Header';
 import Body from './Body';
-import {MENU, SAMPLE} from './Common';
+import Footer from './Footer';
-import type {Message, HomeMessage, LogsMessage, Chart} from '../types/message';
+import {MENU} from './Common';
 import type {Content} from '../types/content';
 
-// appender appends an array (A) to the end of another array (B) in the state.
+// deepUpdate updates an object corresponding to the given update data, which has
-// lens is the path of B in the state, samples is A, and limit is the maximum size of the changed array.
+// the shape of the same structure as the original object. updater also has the same
+// structure, except that it contains functions where the original data needs to be
+// updated. These functions are used to handle the update.
 //
-// appender retrieves a function, which overrides the state's value at lens, and returns with the overridden state.
+// Since the messages have the same shape as the state content, this approach allows
-const appender = (lens, samples, limit) => (state) => {
+// the generalization of the message handling. The only necessary thing is to set a
-	const newSamples = [
+// handler function for every path of the state in order to maximize the flexibility
-		...view(lens, state), // retrieves a specific value of the state at the given path (lens).
+// of the update.
-		...samples,
+const deepUpdate = (prev: Object, update: Object, updater: Object) => {
-	];
+	if (typeof update === 'undefined') {
-	// set is a function of ramda.js, which needs the path, the new value, the original state, and retrieves
+		// TODO (kurkomisi): originally this was deep copy, investigate it.
-	// the altered state.
+		return prev;
-	return set(
+	}
-		lens,
+	if (typeof updater === 'function') {
-		newSamples.slice(newSamples.length > limit ? newSamples.length - limit : 0),
+		return updater(prev, update);
-		state
+	}
-	);
+	const updated = {};
+	Object.keys(prev).forEach((key) => {
+		updated[key] = deepUpdate(prev[key], update[key], updater[key]);
+	});
+
+	return updated;
 };
-// Lenses for specific data fields in the state, used for a clearer deep update.
+
-// NOTE: This solution will be changed very likely.
+// shouldUpdate returns the structure of a message. It is used to prevent unnecessary render
-const memoryLens = lensPath(['content', 'home', 'memory']);
+// method triggerings. In the affected component's shouldComponentUpdate method it can be checked
-const trafficLens = lensPath(['content', 'home', 'traffic']);
+// whether the involved data was changed or not by checking the message structure.
-const logLens = lensPath(['content', 'logs', 'log']);
+//
-// styles retrieves the styles for the Dashboard component.
+// We could return the message itself too, but it's safer not to give access to it.
+const shouldUpdate = (msg: Object, updater: Object) => {
+	const su = {};
+	Object.keys(msg).forEach((key) => {
+		su[key] = typeof updater[key] !== 'function' ? shouldUpdate(msg[key], updater[key]) : true;
+	});
+
+	return su;
+};
+
+// appender is a state update generalization function, which appends the update data
+// to the existing data. limit defines the maximum allowed size of the created array.
+const appender = <T>(limit: number) => (prev: Array<T>, update: Array<T>) => [...prev, ...update].slice(-limit);
+
+// replacer is a state update generalization function, which replaces the original data.
+const replacer = <T>(prev: T, update: T) => update;
+
+// defaultContent is the initial value of the state content.
+const defaultContent: Content = {
+	general: {
+		version: null,
+		commit:  null,
+	},
+	home: {
+		memory:  [],
+		traffic: [],
+	},
+	chain:   {},
+	txpool:  {},
+	network: {},
+	system:  {},
+	logs:    {
+		log: [],
+	},
+};
+
+// updaters contains the state update generalization functions for each path of the state.
+// TODO (kurkomisi): Define a tricky type which embraces the content and the handlers.
+const updaters = {
+	general: {
+		version: replacer,
+		commit:  replacer,
+	},
+	home: {
+		memory:  appender(200),
+		traffic: appender(200),
+	},
+	chain:   null,
+	txpool:  null,
+	network: null,
+	system:  null,
+	logs:    {
+		log: appender(200),
+	},
+};
+
+// styles returns the styles for the Dashboard component.
 const styles = theme => ({
 	dashboard: {
 		display:    'flex',
@@ -61,15 +123,18 @@ const styles = theme => ({
 		overflow:   'hidden',
 	},
 });
+
 export type Props = {
 	classes: Object,
 };
+
 type State = {
 	active: string, // active menu
 	sideBar: boolean, // true if the sidebar is opened
-	content: $Shape<Content>, // the visualized data
+	content: Content, // the visualized data
-	shouldUpdate: Set<string> // labels for the components, which need to rerender based on the incoming message
+	shouldUpdate: Object // labels for the components, which need to rerender based on the incoming message
 };
+
 // Dashboard is the main component, which renders the whole page, makes connection with the server and
 // listens for messages. When there is an incoming message, updates the page's content correspondingly.
 class Dashboard extends Component<Props, State> {
@@ -78,8 +143,8 @@ class Dashboard extends Component<Props, State> {
 		this.state = {
 			active:       MENU.get('home').id,
 			sideBar:      true,
-			content:      {home: {memory: [], traffic: []}, logs: {log: []}},
+			content:      defaultContent,
-			shouldUpdate: new Set(),
+			shouldUpdate: {},
 		};
 	}
 
@@ -91,13 +156,14 @@ class Dashboard extends Component<Props, State> {
 	// reconnect establishes a websocket connection with the server, listens for incoming messages
 	// and tries to reconnect on connection loss.
 	reconnect = () => {
-		this.setState({
-			content: {home: {memory: [], traffic: []}, logs: {log: []}},
-		});
 		const server = new WebSocket(`${((window.location.protocol === 'https:') ? 'wss://' : 'ws://') + window.location.host}/api`);
+		server.onopen = () => {
+			this.setState({content: defaultContent, shouldUpdate: {}});
+		};
 		server.onmessage = (event) => {
-			const msg: Message = JSON.parse(event.data);
+			const msg: $Shape<Content> = JSON.parse(event.data);
 			if (!msg) {
+				console.error(`Incoming message is ${msg}`);
 				return;
 			}
 			this.update(msg);
@@ -107,56 +173,12 @@ class Dashboard extends Component<Props, State> {
 		};
 	};
 
-	// samples retrieves the raw data of a chart field from the incoming message.
+	// update updates the content corresponding to the incoming message.
-	samples = (chart: Chart) => {
+	update = (msg: $Shape<Content>) => {
-		let s = [];
+		this.setState(prevState => ({
-		if (chart.history) {
+			content:      deepUpdate(prevState.content, msg, updaters),
-			s = chart.history.map(({value}) => (value || 0)); // traffic comes without value at the beginning
+			shouldUpdate: shouldUpdate(msg, updaters),
-		}
+		}));
-		if (chart.new) {
-			s = [...s, chart.new.value || 0];
-		}
-		return s;
-	};
-
-	// handleHome changes the home-menu related part of the state.
-	handleHome = (home: HomeMessage) => {
-		this.setState((prevState) => {
-			let newState = prevState;
-			newState.shouldUpdate = new Set();
-			if (home.memory) {
-				newState = appender(memoryLens, this.samples(home.memory), SAMPLE.get('memory').limit)(newState);
-				newState.shouldUpdate.add('memory');
-			}
-			if (home.traffic) {
-				newState = appender(trafficLens, this.samples(home.traffic), SAMPLE.get('traffic').limit)(newState);
-				newState.shouldUpdate.add('traffic');
-			}
-			return newState;
-		});
-	};
-
-	// handleLogs changes the logs-menu related part of the state.
-	handleLogs = (logs: LogsMessage) => {
-		this.setState((prevState) => {
-			let newState = prevState;
-			newState.shouldUpdate = new Set();
-			if (logs.log) {
-				newState = appender(logLens, [logs.log], SAMPLE.get('logs').limit)(newState);
-				newState.shouldUpdate.add('logs');
-			}
-			return newState;
-		});
-	};
-
-	// update analyzes the incoming message, and updates the charts' content correspondingly.
-	update = (msg: Message) => {
-		if (msg.home) {
-			this.handleHome(msg.home);
-		}
-		if (msg.logs) {
-			this.handleLogs(msg.logs);
-		}
 	};
 
 	// changeContent sets the active label, which is used at the content rendering.
@@ -191,6 +213,13 @@ class Dashboard extends Component<Props, State> {
 					content={this.state.content}
 					shouldUpdate={this.state.shouldUpdate}
 				/>
+				<Footer
+					opened={this.state.sideBar}
+					openSideBar={this.openSideBar}
+					closeSideBar={this.closeSideBar}
+					general={this.state.content.general}
+					shouldUpdate={this.state.shouldUpdate}
+				/>
 			</div>
 		);
 	}

dashboard/assets/components/Footer.jsx

@@ -0,0 +1,80 @@
+// @flow
+
+// Copyright 2017 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 withStyles from 'material-ui/styles/withStyles';
+import AppBar from 'material-ui/AppBar';
+import Toolbar from 'material-ui/Toolbar';
+import Typography from 'material-ui/Typography';
+
+import type {General} from '../types/content';
+
+// styles contains styles for the Header component.
+const styles = theme => ({
+	footer: {
+		backgroundColor: theme.palette.background.appBar,
+		color:           theme.palette.getContrastText(theme.palette.background.appBar),
+		zIndex:          theme.zIndex.appBar,
+	},
+	toolbar: {
+		paddingLeft:    theme.spacing.unit,
+		paddingRight:   theme.spacing.unit,
+		display:        'flex',
+		justifyContent: 'flex-end',
+	},
+	light: {
+		color: 'rgba(255, 255, 255, 0.54)',
+	},
+});
+export type Props = {
+	general: General,
+	classes: Object,
+};
+// TODO (kurkomisi): If the structure is appropriate, make an abstraction of the common parts with the Header.
+// Footer renders the header of the dashboard.
+class Footer extends Component<Props> {
+	shouldComponentUpdate(nextProps) {
+		return typeof nextProps.shouldUpdate.logs !== 'undefined';
+	}
+
+	info = (about: string, data: string) => (
+		<Typography type="caption" color="inherit">
+			<span className={this.props.classes.light}>{about}</span> {data}
+		</Typography>
+	);
+
+	render() {
+		const {classes, general} = this.props; // The classes property is injected by withStyles().
+		const geth = general.version ? this.info('Geth', general.version) : null;
+		const commit = general.commit ? this.info('Commit', general.commit.substring(0, 7)) : null;
+
+		return (
+			<AppBar position="static" className={classes.footer}>
+				<Toolbar className={classes.toolbar}>
+					<div>
+						{geth}
+						{commit}
+					</div>
+				</Toolbar>
+			</AppBar>
+		);
+	}
+}
+
+export default withStyles(styles)(Footer);

dashboard/assets/components/Home.jsx

@@ -22,13 +22,13 @@ import withTheme from 'material-ui/styles/withTheme';
 import {LineChart, AreaChart, Area, YAxis, CartesianGrid, Line} from 'recharts';
 
 import ChartGrid from './ChartGrid';
-import type {ChartEntry} from '../types/message';
+import type {ChartEntry} from '../types/content';
 
 export type Props = {
     theme: Object,
     memory: Array<ChartEntry>,
     traffic: Array<ChartEntry>,
-    shouldUpdate: Object,
+	shouldUpdate: Object,
 };
 // Home renders the home content.
 class Home extends Component<Props> {
@@ -40,11 +40,16 @@ class Home extends Component<Props> {
 	}
 
 	shouldComponentUpdate(nextProps) {
-		return nextProps.shouldUpdate.has('memory') || nextProps.shouldUpdate.has('traffic');
+		return typeof nextProps.shouldUpdate.home !== 'undefined';
 	}
 
+	memoryColor: Object;
+	trafficColor: Object;
+
 	render() {
-		const {memory, traffic} = this.props;
+		let {memory, traffic} = this.props;
+		memory = memory.map(({value}) => (value || 0));
+		traffic = traffic.map(({value}) => (value || 0));
 
 		return (
 			<ChartGrid spacing={24}>

dashboard/assets/package.json

@@ -1,7 +1,7 @@
 {
     "dependencies": {
         "babel-core": "^6.26.0",
-        "babel-eslint": "^8.0.3",
+        "babel-eslint": "^8.1.2",
         "babel-loader": "^7.1.2",
         "babel-plugin-transform-class-properties": "^6.24.1",
         "babel-plugin-transform-decorators-legacy": "^1.3.4",
@@ -12,28 +12,28 @@
         "babel-preset-stage-0": "^6.24.1",
         "babel-runtime": "^6.26.0",
         "classnames": "^2.2.5",
-        "css-loader": "^0.28.7",
+        "css-loader": "^0.28.8",
-        "eslint": "^4.13.1",
+        "eslint": "^4.15.0",
         "eslint-config-airbnb": "^16.1.0",
         "eslint-loader": "^1.9.0",
         "eslint-plugin-import": "^2.8.0",
         "eslint-plugin-jsx-a11y": "^6.0.3",
         "eslint-plugin-react": "^7.5.1",
-        "eslint-plugin-flowtype": "^2.40.1",
+        "eslint-plugin-flowtype": "^2.41.0",
         "file-loader": "^1.1.6",
-        "flow-bin": "^0.61.0",
+        "flow-bin": "^0.63.1",
         "flow-bin-loader": "^1.0.2",
         "flow-typed": "^2.2.3",
         "material-ui": "^1.0.0-beta.24",
         "material-ui-icons": "^1.0.0-beta.17",
         "path": "^0.12.7",
-        "ramda": "^0.25.0",
         "react": "^16.2.0",
         "react-dom": "^16.2.0",
         "react-fa": "^5.0.0",
         "react-transition-group": "^2.2.1",
-        "recharts": "^1.0.0-beta.6",
+        "recharts": "^1.0.0-beta.7",
         "style-loader": "^0.19.1",
+        "typeface-roboto": "^0.0.50",
         "url": "^0.11.0",
         "url-loader": "^0.6.2",
         "webpack": "^3.10.0"

dashboard/assets/types/content.jsx

@@ -16,38 +16,49 @@
 // 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 type {ChartEntry} from './message';
-
 export type Content = {
-    home: Home,
+	general: General,
-    chain: Chain,
+	home: Home,
-    txpool: TxPool,
+	chain: Chain,
-    network: Network,
+	txpool: TxPool,
-    system: System,
+	network: Network,
-    logs: Logs,
+	system: System,
+	logs: Logs,
+};
+
+export type General = {
+	version: ?string,
+	commit: ?string,
 };
 
 export type Home = {
-    memory: Array<ChartEntry>,
+	memory: ChartEntries,
-    traffic: Array<ChartEntry>,
+	traffic: ChartEntries,
+};
+
+export type ChartEntries = Array<ChartEntry>;
+
+export type ChartEntry = {
+	time: Date,
+	value: number,
 };
 
 export type Chain = {
-    /* TODO (kurkomisi) */
+	/* TODO (kurkomisi) */
 };
 
 export type TxPool = {
-    /* TODO (kurkomisi) */
+	/* TODO (kurkomisi) */
 };
 
 export type Network = {
-    /* TODO (kurkomisi) */
+	/* TODO (kurkomisi) */
 };
 
 export type System = {
-    /* TODO (kurkomisi) */
+	/* TODO (kurkomisi) */
 };
 
 export type Logs = {
-    log: Array<string>,
+	log: Array<string>,
 };

dashboard/assets/types/message.jsx

@@ -1,61 +0,0 @@
-// @flow
-
-// Copyright 2017 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/>.
-
-export type Message = {
-    home?: HomeMessage,
-    chain?: ChainMessage,
-    txpool?: TxPoolMessage,
-    network?: NetworkMessage,
-    system?: SystemMessage,
-    logs?: LogsMessage,
-};
-
-export type HomeMessage = {
-    memory?: Chart,
-    traffic?: Chart,
-};
-
-export type Chart = {
-    history?: Array<ChartEntry>,
-    new?: ChartEntry,
-};
-
-export type ChartEntry = {
-    time: Date,
-    value: number,
-};
-
-export type ChainMessage = {
-    /* TODO (kurkomisi) */
-};
-
-export type TxPoolMessage = {
-    /* TODO (kurkomisi) */
-};
-
-export type NetworkMessage = {
-    /* TODO (kurkomisi) */
-};
-
-export type SystemMessage = {
-    /* TODO (kurkomisi) */
-};
-
-export type LogsMessage = {
-    log: string,
-};

dashboard/assets/webpack.config.js

@@ -23,7 +23,7 @@ module.exports = {
 	},
 	entry:  './index',
 	output: {
-		path:     path.resolve(__dirname, 'public'),
+		path:     path.resolve(__dirname, ''),
 		filename: 'bundle.js',
 	},
 	plugins: [

dashboard/dashboard.go

@@ -18,8 +18,9 @@ package dashboard
 
 //go:generate npm --prefix ./assets install
 //go:generate ./assets/node_modules/.bin/webpack --config ./assets/webpack.config.js --context ./assets
-//go:generate go-bindata -nometadata -o assets.go -prefix assets -nocompress -pkg dashboard assets/public/...
+//go:generate go-bindata -nometadata -o assets.go -prefix assets -nocompress -pkg dashboard assets/dashboard.html assets/bundle.js
-//go:generate sh -c "sed 's#var _public#//nolint:misspell\\\n&#' assets.go > assets.go.tmp && mv assets.go.tmp assets.go"
+//go:generate sh -c "sed 's#var _bundleJs#//nolint:misspell\\\n&#' assets.go > assets.go.tmp && mv assets.go.tmp assets.go"
+//go:generate sh -c "sed 's#var _dashboardHtml#//nolint:misspell\\\n&#' assets.go > assets.go.tmp && mv assets.go.tmp assets.go"
 //go:generate gofmt -w -s assets.go
 
 import (
@@ -34,6 +35,7 @@ import (
 
 	"github.com/ethereum/go-ethereum/log"
 	"github.com/ethereum/go-ethereum/p2p"
+	"github.com/ethereum/go-ethereum/params"
 	"github.com/ethereum/go-ethereum/rpc"
 	"github.com/rcrowley/go-metrics"
 	"golang.org/x/net/websocket"
@@ -53,6 +55,7 @@ type Dashboard struct {
 	listener net.Listener
 	conns    map[uint32]*client // Currently live websocket connections
 	charts   *HomeMessage
+	commit   string
 	lock     sync.RWMutex // Lock protecting the dashboard's internals
 
 	quit chan chan error // Channel used for graceful exit
@@ -67,15 +70,16 @@ type client struct {
 }
 
 // New creates a new dashboard instance with the given configuration.
-func New(config *Config) (*Dashboard, error) {
+func New(config *Config, commit string) (*Dashboard, error) {
 	return &Dashboard{
 		conns:  make(map[uint32]*client),
 		config: config,
 		quit:   make(chan chan error),
 		charts: &HomeMessage{
-			Memory:  &Chart{},
+			Memory:  ChartEntries{},
-			Traffic: &Chart{},
+			Traffic: ChartEntries{},
 		},
+		commit: commit,
 	}, nil
 }
 
@@ -87,6 +91,8 @@ func (db *Dashboard) APIs() []rpc.API { return nil }
 
 // Start implements node.Service, starting the data collection thread and the listening server of the dashboard.
 func (db *Dashboard) Start(server *p2p.Server) error {
+	log.Info("Starting dashboard")
+
 	db.wg.Add(2)
 	go db.collectData()
 	go db.collectLogs() // In case of removing this line change 2 back to 1 in wg.Add.
@@ -160,7 +166,7 @@ func (db *Dashboard) webHandler(w http.ResponseWriter, r *http.Request) {
 		w.Write(blob)
 		return
 	}
-	blob, err := Asset(filepath.Join("public", path))
+	blob, err := Asset(path[1:])
 	if err != nil {
 		log.Warn("Failed to load the asset", "path", path, "err", err)
 		http.Error(w, "not found", http.StatusNotFound)
@@ -197,15 +203,20 @@ func (db *Dashboard) apiHandler(conn *websocket.Conn) {
 			}
 		}
 	}()
+
+	versionMeta := ""
+	if len(params.VersionMeta) > 0 {
+		versionMeta = fmt.Sprintf(" (%s)", params.VersionMeta)
+	}
 	// Send the past data.
 	client.msg <- Message{
+		General: &GeneralMessage{
+			Version: fmt.Sprintf("v%d.%d.%d%s", params.VersionMajor, params.VersionMinor, params.VersionPatch, versionMeta),
+			Commit:  db.commit,
+		},
 		Home: &HomeMessage{
-			Memory: &Chart{
+			Memory:  db.charts.Memory,
-				History: db.charts.Memory.History,
+			Traffic: db.charts.Traffic,
-			},
-			Traffic: &Chart{
-				History: db.charts.Traffic.History,
-			},
 		},
 	}
 	// Start tracking the connection and drop at connection loss.
@@ -249,24 +260,20 @@ func (db *Dashboard) collectData() {
 				Value: inboundTraffic,
 			}
 			first := 0
-			if len(db.charts.Memory.History) == memorySampleLimit {
+			if len(db.charts.Memory) == memorySampleLimit {
 				first = 1
 			}
-			db.charts.Memory.History = append(db.charts.Memory.History[first:], memory)
+			db.charts.Memory = append(db.charts.Memory[first:], memory)
 			first = 0
-			if len(db.charts.Traffic.History) == trafficSampleLimit {
+			if len(db.charts.Traffic) == trafficSampleLimit {
 				first = 1
 			}
-			db.charts.Traffic.History = append(db.charts.Traffic.History[first:], traffic)
+			db.charts.Traffic = append(db.charts.Traffic[first:], traffic)
 
 			db.sendToAll(&Message{
 				Home: &HomeMessage{
-					Memory: &Chart{
+					Memory:  ChartEntries{memory},
-						New: memory,
+					Traffic: ChartEntries{traffic},
-					},
-					Traffic: &Chart{
-						New: traffic,
-					},
 				},
 			})
 		}
@@ -287,7 +294,7 @@ func (db *Dashboard) collectLogs() {
 		case <-time.After(db.config.Refresh / 2):
 			db.sendToAll(&Message{
 				Logs: &LogsMessage{
-					Log: fmt.Sprintf("%-4d: This is a fake log.", id),
+					Log: []string{fmt.Sprintf("%-4d: This is a fake log.", id)},
 				},
 			})
 			id++

dashboard/message.go

@@ -19,6 +19,7 @@ package dashboard
 import "time"
 
 type Message struct {
+	General *GeneralMessage `json:"general,omitempty"`
 	Home    *HomeMessage    `json:"home,omitempty"`
 	Chain   *ChainMessage   `json:"chain,omitempty"`
 	TxPool  *TxPoolMessage  `json:"txpool,omitempty"`
@@ -27,16 +28,18 @@ type Message struct {
 	Logs    *LogsMessage    `json:"logs,omitempty"`
 }
 
-type HomeMessage struct {
+type GeneralMessage struct {
-	Memory  *Chart `json:"memory,omitempty"`
+	Version string `json:"version,omitempty"`
-	Traffic *Chart `json:"traffic,omitempty"`
+	Commit  string `json:"commit,omitempty"`
 }
 
-type Chart struct {
+type HomeMessage struct {
-	History []*ChartEntry `json:"history,omitempty"`
+	Memory  ChartEntries `json:"memory,omitempty"`
-	New     *ChartEntry   `json:"new,omitempty"`
+	Traffic ChartEntries `json:"traffic,omitempty"`
 }
 
+type ChartEntries []*ChartEntry
+
 type ChartEntry struct {
 	Time  time.Time `json:"time,omitempty"`
 	Value float64   `json:"value,omitempty"`
@@ -59,5 +62,5 @@ type SystemMessage struct {
 }
 
 type LogsMessage struct {
-	Log string `json:"log,omitempty"`
+	Log []string `json:"log,omitempty"`
 }