Merge 32b6ae33ac into 3c8656347f

.gitignore

@@ -30,3 +30,6 @@ build/_vendor/pkg
 # travis
 profile.tmp
 profile.cov
+
+# dashboard
+/dashboard/bundler/node_modules/

cmd/geth/config.go

@@ -30,6 +30,7 @@ import (
 
 	"github.com/ethereum/go-ethereum/cmd/utils"
 	"github.com/ethereum/go-ethereum/contracts/release"
+	"github.com/ethereum/go-ethereum/dashboard"
 	"github.com/ethereum/go-ethereum/eth"
 	"github.com/ethereum/go-ethereum/node"
 	"github.com/ethereum/go-ethereum/params"
@@ -76,10 +77,11 @@ type ethstatsConfig struct {
 }
 
 type gethConfig struct {
-	Eth      eth.Config
+	Eth       eth.Config
-	Shh      whisper.Config
+	Shh       whisper.Config
-	Node     node.Config
+	Node      node.Config
-	Ethstats ethstatsConfig
+	Ethstats  ethstatsConfig
+	Dashboard dashboard.Config
 }
 
 func loadConfig(file string, cfg *gethConfig) error {
@@ -110,9 +112,10 @@ func defaultNodeConfig() node.Config {
 func makeConfigNode(ctx *cli.Context) (*node.Node, gethConfig) {
 	// Load defaults.
 	cfg := gethConfig{
-		Eth:  eth.DefaultConfig,
+		Eth:       eth.DefaultConfig,
-		Shh:  whisper.DefaultConfig,
+		Shh:       whisper.DefaultConfig,
-		Node: defaultNodeConfig(),
+		Node:      defaultNodeConfig(),
+		Dashboard: dashboard.DefaultConfig,
 	}
 
 	// Load config file.
@@ -134,6 +137,7 @@ func makeConfigNode(ctx *cli.Context) (*node.Node, gethConfig) {
 	}
 
 	utils.SetShhConfig(ctx, stack, &cfg.Shh)
+	utils.SetDashboardConfig(ctx, &cfg.Dashboard)
 
 	return stack, cfg
 }
@@ -153,6 +157,9 @@ func makeFullNode(ctx *cli.Context) *node.Node {
 
 	utils.RegisterEthService(stack, &cfg.Eth)
 
+	if ctx.GlobalBool(utils.DashboardEnabledFlag.Name) {
+		utils.RegisterDashboardService(stack, &cfg.Dashboard)
+	}
 	// 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.DevModeFlag.Name)

cmd/geth/main.go

@@ -61,6 +61,11 @@ var (
 		utils.DataDirFlag,
 		utils.KeyStoreDirFlag,
 		utils.NoUSBFlag,
+		utils.DashboardEnabledFlag,
+		utils.DashboardAddrFlag,
+		utils.DashboardPortFlag,
+		utils.DashboardRefreshFlag,
+		utils.DashboardAssetsFlag,
 		utils.EthashCacheDirFlag,
 		utils.EthashCachesInMemoryFlag,
 		utils.EthashCachesOnDiskFlag,

cmd/geth/usage.go

@@ -92,6 +92,16 @@ var AppHelpFlagGroups = []flagGroup{
 			utils.EthashDatasetsOnDiskFlag,
 		},
 	},
+	{
+		Name: "DASHBOARD",
+		Flags: []cli.Flag{
+			utils.DashboardEnabledFlag,
+			utils.DashboardAddrFlag,
+			utils.DashboardPortFlag,
+			utils.DashboardRefreshFlag,
+			utils.DashboardAssetsFlag,
+		},
+	},
 	{
 		Name: "TRANSACTION POOL",
 		Flags: []cli.Flag{

cmd/utils/flags.go

@@ -36,6 +36,7 @@ import (
 	"github.com/ethereum/go-ethereum/core/state"
 	"github.com/ethereum/go-ethereum/core/vm"
 	"github.com/ethereum/go-ethereum/crypto"
+	"github.com/ethereum/go-ethereum/dashboard"
 	"github.com/ethereum/go-ethereum/eth"
 	"github.com/ethereum/go-ethereum/eth/downloader"
 	"github.com/ethereum/go-ethereum/eth/gasprice"
@@ -177,6 +178,31 @@ var (
 		Name:  "lightkdf",
 		Usage: "Reduce key-derivation RAM & CPU usage at some expense of KDF strength",
 	}
+	// Dashboard settings
+	DashboardEnabledFlag = cli.BoolFlag{
+		Name:  "dashboard",
+		Usage: "Enable the dashboard",
+	}
+	DashboardAddrFlag = cli.StringFlag{
+		Name:  "dashboard.addr",
+		Usage: "Dashboard listening interface",
+		Value: dashboard.DefaultConfig.Host,
+	}
+	DashboardPortFlag = cli.IntFlag{
+		Name:  "dashboard.host",
+		Usage: "Dashboard listening port",
+		Value: dashboard.DefaultConfig.Port,
+	}
+	DashboardRefreshFlag = cli.DurationFlag{
+		Name:  "dashboard.refresh",
+		Usage: "Dashboard metrics collection refresh rate",
+		Value: dashboard.DefaultConfig.Refresh,
+	}
+	DashboardAssetsFlag = cli.StringFlag{
+		Name:  "dashboard.assets",
+		Usage: "Developer flag to serve the dashboard from the local file system (default: \"\")",
+		Value: dashboard.DefaultConfig.Assets,
+	}
 	// Ethash settings
 	EthashCacheDirFlag = DirectoryFlag{
 		Name:  "ethash.cachedir",
@@ -997,6 +1023,14 @@ func SetEthConfig(ctx *cli.Context, stack *node.Node, cfg *eth.Config) {
 	}
 }
 
+// SetDashboardConfig applies dashboard related command line flags to the config.
+func SetDashboardConfig(ctx *cli.Context, cfg *dashboard.Config) {
+	cfg.Host = ctx.GlobalString(DashboardAddrFlag.Name)
+	cfg.Port = ctx.GlobalInt(DashboardPortFlag.Name)
+	cfg.Refresh = ctx.GlobalDuration(DashboardRefreshFlag.Name)
+	cfg.Assets = ctx.GlobalString(DashboardAssetsFlag.Name)
+}
+
 // RegisterEthService adds an Ethereum client to the stack.
 func RegisterEthService(stack *node.Node, cfg *eth.Config) {
 	var err error
@@ -1019,6 +1053,13 @@ func RegisterEthService(stack *node.Node, cfg *eth.Config) {
 	}
 }
 
+// RegisterDashboardService adds a dashboard to the stack.
+func RegisterDashboardService(stack *node.Node, cfg *dashboard.Config) {
+	stack.Register(func(ctx *node.ServiceContext) (node.Service, error) {
+		return dashboard.New(cfg)
+	})
+}
+
 // RegisterShhService configures Whisper and adds it to the given node.
 func RegisterShhService(stack *node.Node, cfg *whisper.Config) {
 	if err := stack.Register(func(n *node.ServiceContext) (node.Service, error) {

dashboard/README.md

@@ -0,0 +1,58 @@
+## Go Ethereum Dashboard
+### Description
+
+The dashboard is a data visualizer integrated into geth, intended to collect and visualize useful information of an Ethereum node. 
+The dashboard consists of two parts:
+* The server listens to connections, collects data with a given refresh rate, and updates the dashboards through the opened connections.
+* The client waits for update messages, updates the content and tries to reconnect on connection loss.
+
+### Users
+#### Installation steps
+
+1. `cd .../go-ethereum/`
+1. `go install -v ./cmd/geth`
+1. Run the server with `geth --rinkeby --dashboard --vmodule=dashboard=5 --metrics`.
+1. Enter `localhost:8080` (or change the configuration).
+
+### Developers
+
+The client's UI is maintained by [Inferno][Inferno], a sympathetic React-like JavaScript library.
+In order to create the Inferno's virtual DOM using JSX syntax, babel plugin is required.
+
+[Webpack module bundler][Webpack] is used for bundling the resources in order to gain cost efficiency and maintainability.
+The resources will be bundled into a single JS file (`bundle.js`), which can be then referenced from the main html file. 
+Finally this JS file will also take part in the `assets.go`.
+
+[Node.js][Node.js] is used for installing the necessary dependencies for the module bundler.
+
+#### Installation steps
+
+_Module bundler_
+
+1. `cd .../go-ethereum/dashboard/bundler/`
+1. `npm install`
+1. `./node_modules/.bin/webpack` // check out `webpack.config.js`
+
+_Server_
+
+1. Bundle the resources.
+1. `cd .../go-ethereum/`.
+1. `go generate ./dashboard && go install -v ./cmd/geth`.
+1. Run the server with `geth --rinkeby --dashboard --vmodule=dashboard=5 --metrics console`.
+    * Optionally use `--dashboard.assets=<path>` to set the assets' path (e.g. `--dashboard.assets=".../go-ethereum/dashboard/assets"`). 
+Using this flag it is enough to only bundle the resources with webpack and refresh the page.
+There is no need for stopping the server and regenerating the `assets.go` on every change of the UI.
+1. Enter `localhost:8080` (or change the configuration).
+
+#### Tools
+[Webpack][Webpack] offers great tools for visualizing the bundle's dependency tree and space usage.
+
+* Generate the bundle's profile by running `webpack --profile --json > stats.json`
+* For the _dependency tree_ go to [Webpack Analyze][WA], and import `stats.json`
+* For the _space usage_ go to [Webpack Visualizer][WV], and import `stats.json`
+
+[Inferno]: https://infernojs.org/
+[Webpack]: https://webpack.github.io/
+[WA]: http://webpack.github.io/analyse/
+[WV]: http://chrisbateman.github.io/webpack-visualizer/
+[Node.js]: https://nodejs.org/en/

dashboard/assets/dashboard.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <title>Go Ethereum Dashboard</title>
+        <link rel="shortcut icon" type="image/ico" href="https://ethereum.org/favicon.ico"/>
+
+        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
+        <link href="https://cdnjs.cloudflare.com/ajax/libs/gentelella/1.3.0/css/custom.min.css" rel="stylesheet">
+
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-noty/2.4.1/packaged/jquery.noty.packaged.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0/Chart.min.js"></script>
+        <script>
+            Chart.defaults.global.legend = { enabled: false };
+        </script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
+    </head>
+    <body>
+        <script src="https://unpkg.com/inferno@3.9.0/dist/inferno.min.js"></script>
+        <script src="https://unpkg.com/inferno-component@3.9.0/dist/inferno-component.min.js"></script>
+
+        <div id="dashboard" class="nav-md"></div>
+        <script src="js/bundle.js"></script>
+
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/gentelella/1.3.0/js/custom.min.js"></script>
+    </body>
+</html>

dashboard/bundler/package.json

@@ -0,0 +1,38 @@
+{
+  "jshintConfig": {
+    "esversion": 6
+  },
+  "eslintConfig": {
+    "parser": "babel-eslint"
+  },
+  "babel": {
+    "presets": [
+      ["es2015", {"loose": true, "modules": false}],
+      "stage-0"
+    ],
+    "plugins": [
+      "babel-plugin-syntax-jsx",
+      ["babel-plugin-inferno", {"imports": true}]
+    ]
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^7.2.3",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-inferno": "^3.2.0",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-syntax-object-rest-spread": "^6.13.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "eslint": "^4.5.0",
+    "eslint-config-inferno-app": "^4.2.0",
+    "eslint-loader": "^1.9.0",
+    "glob": "^7.1.2",
+    "inferno-devtools": "^3.8.2",
+    "path": "^0.12.7",
+    "url": "^0.11.0",
+    "webpack": "^3.5.5",
+    "webpack-dev-server": "^2.7.1"
+  }
+}

dashboard/bundler/src/components/Common.js

@@ -0,0 +1,10 @@
+// isNullOrUndefined returns true if a variable is null or undefined.
+export const isNullOrUndefined = variable => variable === null || typeof variable === 'undefined';
+
+export const mapChildren = (children, mapFunc) => !Array.isArray(children) || children.length < 1 ||
+children.length === 1 ? mapFunc(children) : children.map(mapFunc);
+
+export const Clearfix = () => <div className="clearfix"/>;
+
+export const MEMORY_SAMPLE_LIMIT = 200; // Maximum number of memory data samples.
+export const TRAFFIC_SAMPLE_LIMIT = 200; // Maximum number of traffic data samples.

dashboard/bundler/src/components/Dashboard.js

@@ -0,0 +1,124 @@
+import Component from 'component';
+import {isNullOrUndefined, MEMORY_SAMPLE_LIMIT} from "./Common";
+import {SideBar} from "./SideBar";
+import {TopNavigation} from "./TopNavigation";
+import PageContent from './PageContent';
+import {Footer} from './Footer';
+
+// 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.
+export default class Dashboard extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            charts: { // Stores the state of the charts.
+                memory: {
+                    labels: [],
+                    datasets: [{
+                        label: "system/memory/inuse",
+                        backgroundColor: "rgba(38, 185, 154, 0.31)",
+                        borderColor: "rgba(38, 185, 154, 0.7)",
+                        pointBorderColor: "rgba(38, 185, 154, 0.7)",
+                        pointBackgroundColor: "rgba(38, 185, 154, 0.7)",
+                        pointHoverBackgroundColor: "#fff",
+                        pointHoverBorderColor: "rgba(220,220,220,1)",
+                        pointBorderWidth: 1,
+                        data: [],
+                    }],
+                },
+                traffic: {
+                    labels: [],
+                    datasets: [{
+                        label: "p2p/InboundTraffic",
+                        backgroundColor: "rgba(3, 88, 106, 0.3)",
+                        borderColor: "rgba(3, 88, 106, 0.70)",
+                        pointBorderColor: "rgba(3, 88, 106, 0.70)",
+                        pointBackgroundColor: "rgba(3, 88, 106, 0.70)",
+                        pointHoverBackgroundColor: "#fff",
+                        pointHoverBorderColor: "rgba(151,187,205,1)",
+                        pointBorderWidth: 1,
+                        data: [],
+                    }],
+                },
+            },
+        };
+    }
+
+    // updateCharts Analyzes the incoming message, and updates the charts' content correspondingly.
+    updateCharts = msg => {
+        const memory = this.state.charts.memory;
+        const traffic = this.state.charts.traffic;
+
+        // Fill the dashboard with the past data. metrics is set only in the first msg,
+        // after the connection is established.
+        if (msg.metrics !== undefined) {
+            // Clear the arrays to prevent data confusion with the previous connection.
+            memory.labels = [];
+            traffic.labels = [];
+            memory.datasets[0].data = [];
+            traffic.datasets[0].data = [];
+
+            const mem = msg.metrics.memory;
+            const traff = msg.metrics.processor; // TODO (kurkomisi): !!!
+
+            // Put the past data to the beginning of the arrays. This prevents confusion with the next msg data,
+            // which goes to the end.
+            for (let i = mem.length - 1; i >= 0 && MEMORY_SAMPLE_LIMIT > memory.labels.length; --i) {
+                memory.labels.unshift(mem[i].time.substring(mem[i].time.length - 5));
+                traffic.labels.unshift(mem[i].time.substring(mem[i].time.length - 5));
+                memory.datasets[0].data.unshift(mem[i].value);
+                traffic.datasets[0].data.unshift(traff[i].value);
+            }
+
+            this.setState({charts: {memory, traffic,}}); // Update the components.
+            return;
+        }
+
+        // Put the new data to the end of the arrays.
+        if (msg.memory !== undefined) {
+            // Remove the first elements in case the samples' amount exceeds the limit.
+            if (memory.labels.length === MEMORY_SAMPLE_LIMIT) {
+                memory.labels.shift();
+                traffic.labels.shift();
+                memory.datasets[0].data.shift();
+                traffic.datasets[0].data.shift();
+            }
+            memory.labels.push(msg.memory.time.substring(msg.memory.time.length - 5));
+            traffic.labels.push(msg.memory.time.substring(msg.memory.time.length - 5));
+            memory.datasets[0].data.push(msg.memory.value);
+            traffic.datasets[0].data.push(msg.processor.value);
+
+            this.setState({charts: {memory, traffic,}}); // Update the components.
+        }
+    };
+
+    // reconnect establishes a websocket connection with the server, listens for incoming messages
+    // and tries to reconnect on connection loss.
+    reconnect = () => {
+        const server = new WebSocket("ws://" + location.host + "/api");
+
+        server.onmessage = event => {
+            const msg = JSON.parse(event.data);
+            if (isNullOrUndefined(msg)) {
+                return;
+            }
+            this.updateCharts(msg);
+        };
+
+        server.onclose = () => setTimeout(this.reconnect, 3000);
+    };
+
+    // componentDidMount initiates the establishment of the first websocket connection after the component is rendered.
+    componentDidMount = () => this.reconnect();
+
+    // render renders the components of the dashboard.
+    render = () => <div className="container body">
+        <div className="main_container">
+            <SideBar/>
+            <TopNavigation/>
+            <PageContent charts={this.state.charts}/>
+            <Footer/>
+        </div>
+    </div>;
+}

dashboard/bundler/src/components/Footer.js

@@ -0,0 +1,9 @@
+import {Clearfix} from "./Common";
+
+// Footer renders a footer component.
+export const Footer = () => <footer>
+    <div className="pull-right">
+        Copyright 2017 The go-ethereum Authors
+    </div>
+    <Clearfix/>
+</footer>;

dashboard/bundler/src/components/PageContent.js

@@ -0,0 +1,81 @@
+import Component from 'component';
+import {isNullOrUndefined, mapChildren, Clearfix} from "./Common";
+
+// Chart name is already in use.
+// ChartComponent renders a chart component and updates it, when the related data changes.
+class ChartComponent extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {};
+    }
+
+    componentDidMount = () => this.state.chart = new Chart(this.data, {
+        type: this.props.type,
+        data: this.props.data,
+    });
+
+    render = () => {
+        if (!isNullOrUndefined(this.state.chart)) {
+            this.state.chart.update();
+        }
+
+        return <div className={this.props.className}>
+            <div className="x_panel">
+                <div className="x_title">
+                    <h2>{this.props.text}</h2>
+                    <ul className="nav navbar-right panel_toolbox">
+                        <li><a className="collapse-link"><i className="fa fa-chevron-up"/></a></li>
+                        {
+                            // Render dropdown menu only if there are children.
+                            isNullOrUndefined(this.props.children) || <li className="dropdown">
+                                <a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button"
+                                   aria-expanded="false"><i className="fa fa-wrench"/></a>
+                                <ul className="dropdown-menu" role="menu">
+                                    {mapChildren(this.props.children, child => <li>{child}</li>)}
+                                </ul>
+                            </li>
+                        }
+                        <li><a className="close-link"><i className="fa fa-close"/></a>
+                        </li>
+                    </ul>
+                    <Clearfix/>
+                </div>
+                <div className="x_content">
+                    {/* The chart will be generated here after the component is mounted (this.componentDidMount). */}
+                    <canvas ref={data => this.data = data}/>
+                </div>
+            </div>
+        </div>;
+    }
+}
+
+// Row renders a row component of charts only if there is any chart.
+class Row extends Component {
+    render = () => isNullOrUndefined(this.props.children) || <div className="row"> {this.props.children} </div>;
+}
+
+// PageContent renders a component for the page content.
+export default class PageContent extends Component {
+    render = () => <div className="right_col" role="main">
+        <div className="">
+            <div className="page-title">
+                <div className="title_left">
+                    <h3>Go Ethereum Dashboard
+                        <small>Statistics</small>
+                    </h3>
+                </div>
+            </div>
+            <Clearfix/>
+            <Row>
+                <ChartComponent className="col-md-6 col-sm-6 col-xs-12" text="Memory usage system/memory/inuse"
+                                type="line" data={this.props.charts.memory}>
+                    <a href="#">Settings 1</a>
+                    <a href="#">Settings 2</a>
+                </ChartComponent>
+                <ChartComponent className="col-md-6 col-sm-6 col-xs-12" text="Inbound traffic p2p/InboundTraffic"
+                                type="line" data={this.props.charts.traffic}/>
+            </Row>
+            <Clearfix/>
+        </div>
+    </div>;
+}

dashboard/bundler/src/components/SideBar.js

@@ -0,0 +1,60 @@
+import Component from 'component';
+import {isNullOrUndefined, mapChildren, Clearfix} from "./Common";
+
+// MenuItem renders an item for a Menu component and the belonging submenu items, if there is any.
+class MenuItem extends Component {
+    render = () => <li>
+        <a>
+            <i className={`fa ${this.props.className}`}/>
+            {this.props.text}
+            <div className="fa fa-chevron-down"/>
+        </a>
+        {
+            // Render dropdown menu only if there are children.
+            isNullOrUndefined(this.props.children) || <ul className="nav child_menu">
+                {mapChildren(this.props.children, child => <li>{child}</li>)}
+            </ul>
+        }
+    </li>;
+}
+
+// Menu renders a menu component.
+const Menu = () => <ul className="nav side-menu">
+    <MenuItem className="fa-home" text="Home">
+        <a href="dashboard1.html">Dashboard1</a>
+        <a href="dashboard2.html">Dashboard2</a>
+    </MenuItem>
+    <MenuItem className="fa-edit" text="Networking">
+        <a href="networking.html">Networking</a>
+    </MenuItem>
+    <MenuItem className="fa-desktop" text="Txpool">
+        <a href="txpool.html">Txpool</a>
+    </MenuItem>
+    <MenuItem className="fa-table" text="Logs">
+        <a href="logs.html">Logs</a>
+    </MenuItem>
+    <MenuItem className="fa-clone" text="Blockchain">
+        <a href="blockchain1.html">Blockchain1</a>
+        <a href="blockchain2.html">Blockchain2</a>
+        <a href="blockchain3.html">Blockchain3</a>
+        <a href="blockchain4.html">Blockchain4</a>
+        <a href="blockchain5.html">Blockchain5</a>
+    </MenuItem>
+    <MenuItem className="fa-bar-chart-o" text="System"/>
+</ul>;
+
+// SideBar renders a sidebar component.
+export const SideBar = () => <div className="col-md-3 left_col">
+    <div className="left_col scroll-view">
+        <div className="navbar nav_title" style={{border: 0}}>
+            <a href="dashboard.html" className="site_title"><i className="fa fa-paw"/>
+                <span>Go Ethereum Dashboard</span></a>
+        </div>
+        <Clearfix/>
+        <div id="sidebar-menu" className="main_menu_side hidden-print main_menu">
+            <div className="menu_section">
+                <Menu/>
+            </div>
+        </div>
+    </div>
+</div>;

dashboard/bundler/src/components/TopNavigation.js

@@ -0,0 +1,12 @@
+// TopNavigation renders a top navigation component.
+export const TopNavigation = () => <div className="top_nav">
+    <div className="nav_menu">
+        <nav className="" role="navigation">
+            <div className="nav toggle">
+                <a id="_______menu_toggle"> {/* TODO (kurkomisi): Resize the main container on toggle */}
+                    <i className="fa fa-bars"/>
+                </a>
+            </div>
+        </nav>
+    </div>
+</div>;

dashboard/bundler/src/index.js

@@ -0,0 +1,5 @@
+import Inferno from 'inferno';
+import Dashboard from './components/Dashboard';
+
+// Renders the whole dashboard.
+Inferno.render(<Dashboard/>, document.getElementById('dashboard'));

dashboard/bundler/webpack.config.js

@@ -0,0 +1,60 @@
+const path = require('path');
+const webpack = require('webpack');
+
+const plugins = [
+    new webpack.optimize.CommonsChunkPlugin({
+        name:      'main', // Move dependencies to our main file.
+        children:  true, // Look for common dependencies in all children,
+        minChunks: 2, // How many times a dependency must come up before being extracted
+    }),
+
+    // This plugins optimizes chunks and modules by
+    // how much they are used in your app.
+    new webpack.optimize.OccurrenceOrderPlugin(),
+
+    // This plugin prevents Webpack from creating chunks
+    // that would be too small to be worth loading separately.
+    new webpack.optimize.MinChunkSizePlugin({
+        minChunkSize: 51200, // ~50kb
+    }),
+
+    // This plugin minifies all the Javascript code of the final bundle.
+    new webpack.optimize.UglifyJsPlugin({
+        mangle:   true,
+        compress: {
+            warnings: false, // Suppress uglification warnings
+        },
+    }),
+
+    // This plugin defines various variables that we can set to false
+    // to avoid code related to them from being compiled in the final bundle.
+    new webpack.DefinePlugin({
+        __SERVER__:      false,
+        __DEVELOPMENT__: false,
+        __DEVTOOLS__:    false,
+        'process.env':   {
+            BABEL_ENV: JSON.stringify(process.env.NODE_ENV),
+        },
+    }),
+];
+
+module.exports = {
+    entry:  './src/index.js',
+    output: {
+        path:     path.resolve(__dirname, '../assets/js'),
+        filename: 'bundle.js',
+    },
+    plugins: plugins,
+    externals: { // External libraries, which will not be included in the bundled file(s).
+        inferno: 'Inferno',
+        component: 'Inferno.Component',
+    },
+    module: {
+        loaders: [
+            {
+                test: /\.js$/, // regexp for JS files
+                loader: 'babel-loader', // The babel configuration is in the package.json.
+            },
+        ],
+    },
+};

dashboard/config.go

@@ -0,0 +1,45 @@
+// 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/>.
+
+package dashboard
+
+import "time"
+
+// DefaultConfig contains default settings for the dashboard.
+var DefaultConfig = Config{
+	Host:    "localhost",
+	Port:    8080,
+	Refresh: time.Second,
+}
+
+// Config contains the configuration parameters of the dashboard.
+type Config struct {
+	// Host is the host interface on which to start the dashboard server. If this
+	// field is empty, no dashboard will be started.
+	Host string `toml:",omitempty"`
+
+	// Port is the TCP port number on which to start the dashboard server. The
+	// default zero value is/ valid and will pick a port number randomly (useful
+	// for ephemeral nodes).
+	Port int `toml:",omitempty"`
+
+	// Refresh is the refresh rate of the data updates, the data will be collected this often.
+	Refresh time.Duration `toml:",omitempty"`
+
+	// Assets offers a possibility to manually set the dashboard website's location on the server side.
+	// It is useful for debugging, avoids the repeated generation of the binary.
+	Assets  string `toml:",omitempty"`
+}

dashboard/dashboard.go

@@ -0,0 +1,286 @@
+// 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/>.
+
+package dashboard
+
+//go:generate go-bindata -nometadata -o assets.go -prefix assets -pkg dashboard assets/...
+
+import (
+	"bytes"
+	"fmt"
+	"github.com/ethereum/go-ethereum/log"
+	"github.com/ethereum/go-ethereum/p2p"
+	"github.com/ethereum/go-ethereum/rpc"
+	"github.com/rcrowley/go-metrics"
+	"golang.org/x/net/websocket"
+	"io/ioutil"
+	"net"
+	"net/http"
+	"sync"
+	"sync/atomic"
+	"time"
+)
+
+const (
+	processorSampleLimit = 200
+	memorySampleLimit    = 200
+	trafficSampleLimit   = 200
+)
+
+var (
+	nextId uint32 // Next connection id
+)
+
+type dashboard struct {
+	config *Config
+
+	listener net.Listener
+	conns    map[uint32]*client // Currently live websocket connections
+	Metrics  *metricSamples     `json:"metrics,omitempty"`
+	Stats    *status            `json:"stats,omitempty"`
+	lock     sync.RWMutex       // Lock protecting the dashboard's internals
+
+	closing chan chan error // Channel used for graceful exit
+	wg      sync.WaitGroup
+}
+
+type client struct {
+	conn   *websocket.Conn              // Particular live websocket connection
+	msg    chan *map[string]interface{} // Message queue for the update messages
+	logger log.Logger                   // Logger for the particular live websocket connection
+}
+
+type metricSamples struct {
+	Processor []*data `json:"processor,omitempty"`
+	Memory    []*data `json:"memory,omitempty"`
+}
+
+type data struct {
+	Time  time.Time `json:"time,omitempty"`
+	Value float64   `json:"value,omitempty"`
+}
+
+type status struct {
+	Peers int `json:"peers,omitempty"`
+	Block int `json:"block,omitempty"`
+}
+
+// New creates a new dashboard instance with the given configuration.
+func New(config *Config) (*dashboard, error) {
+	return &dashboard{
+		conns:   make(map[uint32]*client),
+		config:  config,
+		Metrics: &metricSamples{},
+		closing: make(chan chan error),
+	}, nil
+}
+
+// Protocols is a meaningless implementation of node.Service.
+func (db *dashboard) Protocols() []p2p.Protocol { return nil }
+
+// APIs is a meaningless implementation of node.Service.
+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 {
+	db.wg.Add(1)
+	go db.collectData()
+
+	http.HandleFunc("/", db.webHandler)
+	http.Handle("/api", websocket.Handler(db.apiHandler))
+
+	listener, err := net.Listen("tcp", fmt.Sprintf("%s:%d", db.config.Host, db.config.Port))
+	if err != nil {
+		return err
+	}
+	db.listener = listener
+
+	go http.Serve(listener, nil)
+
+	return nil
+}
+
+// Stop implements node.Service, stopping the data collection thread and the connection listener of the dashboard.
+func (db *dashboard) Stop() error {
+	var err error
+	// Close the connection listener
+	if err = db.listener.Close(); err != nil {
+		log.Warn("Failed to close listener", "err", err)
+	}
+
+	errc := make(chan error)
+	db.closing <- errc
+	<-errc
+
+	db.lock.Lock()
+	for _, c := range db.conns {
+		if err := c.conn.Close(); err != nil {
+			c.logger.Warn("Failed to close connection", "err", err)
+		}
+	}
+	db.lock.Unlock()
+
+	db.wg.Wait()
+	log.Info("Dashboard stopped")
+
+	return err
+}
+
+// webHandler handles all non-api requests, simply flattening and returning the dashboard website.
+func (db *dashboard) webHandler(w http.ResponseWriter, r *http.Request) {
+	log.Info("Request", "URL", r.URL)
+
+	path := r.URL.String()
+	if path == "/" {
+		path = "/dashboard.html"
+	}
+
+	// If the path of the assets is manually set
+	if db.config.Assets != "" {
+		// Create the filename for ReadFile
+		var buffer bytes.Buffer
+		buffer.WriteString(db.config.Assets)
+		buffer.WriteString(path)
+
+		file, err := ioutil.ReadFile(buffer.String())
+		if err != nil {
+			log.Warn("Failed to read file", "err", err)
+			http.Error(w, "not found", http.StatusNotFound)
+			return
+		}
+		w.Write(file)
+		return
+	}
+	webapp, 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)
+		return
+	}
+	w.Write(webapp)
+}
+
+// apiHandler handles requests for the dashboard.
+func (db *dashboard) apiHandler(conn *websocket.Conn) {
+	id := atomic.AddUint32(&nextId, 1)
+	client := &client{
+		conn:   conn,
+		msg:    make(chan *map[string]interface{}, 128),
+		logger: log.New("id", id),
+	}
+
+	loss := make(chan bool, 1) // Buffered channel as sender may exit early
+
+	// Start listening for messages to send.
+	db.wg.Add(1)
+	go func() {
+		defer db.wg.Done()
+
+		for {
+			select {
+			case <-loss:
+				return
+			case msg := <-client.msg:
+				if err := websocket.JSON.Send(client.conn, msg); err != nil {
+					client.logger.Warn("Failed to send the message", "msg", msg, "err", err)
+					return
+				}
+			}
+		}
+	}()
+
+	// Send the past data.
+	client.msg <- &map[string]interface{}{
+		"metrics": db.Metrics,
+	}
+
+	// Start tracking the connection and drop at connection loss.
+	db.lock.Lock()
+	db.conns[id] = client
+	db.lock.Unlock()
+	defer func() {
+		db.lock.Lock()
+		delete(db.conns, id)
+		db.lock.Unlock()
+	}()
+
+	for {
+		fail := []byte{}
+		if _, err := conn.Read(fail); err != nil {
+			loss <- true
+			return
+		}
+		// Ignore all messages
+	}
+}
+
+// collectData collects the required data to plot on the dashboard.
+func (db *dashboard) collectData() {
+	defer db.wg.Done()
+
+	for {
+		select {
+		case errc := <-db.closing:
+			errc <- nil
+			return
+		case <-time.After(db.config.Refresh):
+			now := time.Now()
+			traffic := metrics.DefaultRegistry.Get("p2p/InboundTraffic").(metrics.Meter).Rate1()
+			memoryInUse := metrics.DefaultRegistry.Get("system/memory/inuse").(metrics.Meter).Rate1()
+			traff := &data{
+				Time:  now,
+				Value: traffic,
+			}
+			memory := &data{
+				Time:  now,
+				Value: memoryInUse,
+			}
+
+			// TODO (kurkomisi): do not mix traffic with processor!
+			db.update(traff, memory)
+		}
+	}
+}
+
+// update updates the dashboards through the live websocket connections.
+func (db *dashboard) update(processor *data, memory *data) {
+	// Remove the first elements in case the samples' amount exceeds the limit.
+	first := 0
+	if len(db.Metrics.Processor) == processorSampleLimit {
+		first = 1
+	}
+	db.Metrics.Processor = append(db.Metrics.Processor[first:], processor)
+	first = 0
+	if len(db.Metrics.Memory) == memorySampleLimit {
+		first = 1
+	}
+	db.Metrics.Memory = append(db.Metrics.Memory[first:], memory)
+
+	msg := &map[string]interface{}{
+		"processor": processor,
+		"memory":    memory,
+	}
+
+	db.lock.Lock()
+	for _, c := range db.conns {
+		select {
+		case c.msg <- msg:
+		default:
+			c.logger.Warn("Client message queue is full")
+		}
+	}
+	db.lock.Unlock()
+}