forks/go-ethereum
1
0
Fork 1
mirror of https://github.com/ethereum/go-ethereum.git synced 2026-08-17 01:13:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

cmd, dashboard, metrics: initial proof of concept dashboard

Browse source
This commit is contained in:
Kurkó Mihály 2017-11-14 15:36:32 +02:00
parent 523ff69b23
commit c48c55fedb
19 changed files with 1794 additions and 1488 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.gitignore vendored
View file

@ -35,4 +35,6 @@ profile.cov
.idea
# dashboard
/dashboard/assets/node_modules
/dashboard/assets/node_modules
/dashboard/assets/stats.json
/dashboard/assets/public/bundle.js

2
cmd/utils/flags.go
View file

@ -206,7 +206,7 @@ var (
}
DashboardAssetsFlag = cli.StringFlag{
Name: "dashboard.assets",
Usage: "Developer flag to serve the dashboard from the local file system (default: \"\")",
Usage: "Developer flag to serve the dashboard from the local file system",
Value: dashboard.DefaultConfig.Assets,
}
// Ethash settings

74
dashboard/README.md
View file

@ -1,55 +1,41 @@
## 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.
Consists of two parts:
* The client visualizes the collected data.
* The server collects the data, and updates the clients.
### Users
#### Installation steps
The client's UI uses [React][React] with JSX syntax, which is validated by the [ESLint][ESLint] linter
mostly according to the [Airbnb React/JSX Style Guide][Airbnb]. The style is defined in the `.eslintrc` configuration file.
The resources are bundled into a single `bundle.js` file using [Webpack][Webpack], which relies on the `webpack.config.js`.
The bundled file is referenced from `dashboard.html` and takes part in the `assets.go` too.
The necessary dependencies for the module bundler are gathered by [Node.js][Node.js].
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).
### Install and run the server
### Developers
The client's UI is maintained by [React][React], the facebook's JavaScript library.
The [ESLint pluggable linting utility][ESLint] validates the JSX syntax mostly according to the [Airbnb React/JSX Style Guide][Airbnb], the style is defined in the `.eslintrc` configuration file.
[Webpack module bundler][Webpack] is used for bundling the resources in order to gain cost efficiency and maintainability.
The resources are bundled into a single JS file (`bundle.js`), which is referenced from the main html file.
This JS file also takes 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/assets/`
1. `npm install`
1. `./node_modules/.bin/webpack` // check out `webpack.config.js`
* Optionally use `--watch` to automatically bundle the resources on change.
_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/public"`).
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).
1. `geth --dashboard --vmodule=dashboard=5`.
#### Tools
[Webpack][Webpack] offers great tools for visualizing the bundle's dependency tree and space usage.
During the development use the `--dashboard.assets=<absolute path>` flag to set the assets' path
(e.g. `geth --rinkeby --dashboard --dashboard.assets="<path>/dashboard/assets/public" --vmodule=dashboard=5 console`).
This way there is no need to stop and regenerate the server to modify the client.
* Generate the bundle's profile by running `webpack --profile --json > stats.json`
### Install the module bundler
1. `cd dashboard/assets`
1. `npm install`
### Bundle the resources
1. `cd dashboard/assets`
1. `./node_modules/.bin/webpack`
1. Enter `localhost:8080` to check the result
### Have fun
[Webpack][Webpack] offers handy tools for visualizing the bundle's dependency tree and space usage.
* Generate the bundle's profile 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`
@ -59,4 +45,4 @@ There is no need for stopping the server and regenerating the `assets.go` on eve
[Webpack]: https://webpack.github.io/
[WA]: http://webpack.github.io/analyse/
[WV]: http://chrisbateman.github.io/webpack-visualizer/
[Node.js]: https://nodejs.org/en/
[Node.js]: https://nodejs.org/en/

4
dashboard/assets.go
View file

File diff suppressed because one or more lines are too long

25
dashboard/assets/.eslintrc
View file

@ -1,3 +1,19 @@
// 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/>.
// React syntax style mostly according to https://github.com/airbnb/javascript/tree/master/react
{
"plugins": [
@ -26,6 +42,11 @@
"react/self-closing-comp": 2,
"react/jsx-no-bind": 2,
"react/require-render-return": 2,
"react/no-is-mounted": 2
"react/no-is-mounted": 2,
"key-spacing": ["error", {"align": {
"beforeColon": false,
"afterColon": true,
"on": "value"
}}]
}
}
}

49
dashboard/assets/components/Common.jsx
View file

@ -1,21 +1,36 @@
// 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/>.
// isNullOrUndefined returns true if the given variable is null or undefined.
export const isNullOrUndefined = variable => variable === null || typeof variable === 'undefined';
// defaultZero returns 0 if the given element is null or undefined, otherwise returns the given element.
export const defaultZero = elem => isNullOrUndefined(elem) ? 0 : elem;
export const MEMORY_SAMPLE_LIMIT = 200; // Maximum number of memory data samples.
export const TRAFFIC_SAMPLE_LIMIT = 200; // Maximum number of traffic data samples.
export const LIMIT = {
memory: 200, // Maximum number of memory data samples.
traffic: 200, // Maximum number of traffic data samples.
log: 200, // Maximum number of logs.
};
// The sidebar menu and the main content are rendered based on these elements.
export const TAGS = (() => {
const T = {
home: { title: "Home", },
logs: { title: "Logs", },
networking: { title: "Networking", },
txpool: { title: "Txpool", },
blockchain: { title: "Blockchain", },
system: { title: "System", },
home: { title: "Home", },
chain: { title: "Chain", },
transactions: { title: "Transactions", },
network: { title: "Network", },
system: { title: "System", },
logs: { title: "Logs", },
};
// Using the key is circumstantial in some cases, so it is better to insert it also as a value.
// This way the mistyping is prevented.
@ -25,5 +40,13 @@ export const TAGS = (() => {
return T;
})();
export const DATA_KEYS = (() => {
const DK = {};
["memory", "traffic", "logs"].map(key => {
DK[key] = key;
});
return DK;
})();
// Temporary - taken from Material-UI
export const DRAWER_WIDTH = 240;
export const DRAWER_WIDTH = 240;

127
dashboard/assets/components/Dashboard.jsx
View file

@ -1,3 +1,19 @@
// 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 PropTypes from 'prop-types';
import {withStyles} from 'material-ui/styles';
@ -5,31 +21,31 @@ import {withStyles} from 'material-ui/styles';
import SideBar from './SideBar.jsx';
import Header from './Header.jsx';
import Main from "./Main.jsx";
import {isNullOrUndefined, defaultZero, MEMORY_SAMPLE_LIMIT, TAGS} from "./Common.jsx";
import {isNullOrUndefined, LIMIT, TAGS, DATA_KEYS,} from "./Common.jsx";
// Styles for the Dashboard component.
const styles = theme => ({
appFrame: {
position: 'relative',
display: 'flex',
width: '100%',
height: '100%',
background: '#303030',
position: 'relative',
display: 'flex',
width: '100%',
height: '100%',
background: theme.palette.background.default,
},
});
// Dashboard is the main component, which renders the whole page,
// makes connection with the server and listens for messages.
// 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 {
constructor(props) {
super(props);
this.state = {
active: TAGS.home.id, // active menu
sideBar: true, // true if the sidebar is opened
memory: [],
traffic: [],
logs: [],
active: TAGS.home.id, // active menu
sideBar: true, // true if the sidebar is opened
memory: [],
traffic: [],
logs: [],
shouldUpdate: {},
};
}
@ -41,7 +57,7 @@ class Dashboard extends Component {
// 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");
const server = new WebSocket(((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + "/api");
server.onmessage = event => {
const msg = JSON.parse(event.data);
@ -58,50 +74,56 @@ class Dashboard extends Component {
// update analyzes the incoming message, and updates the charts' content correspondingly.
update = msg => {
// (Re)initialize the state with the past data. metrics is set only in the first msg,
// after the connection is established.
if (!isNullOrUndefined(msg.metrics)) {
let memory = [];
let traffic = [];
if (!isNullOrUndefined(msg.metrics.memory)) {
memory = msg.metrics.memory.map(elem => ({memory: elem.value}));
traffic = msg.metrics.processor.map(elem => ({traffic: defaultZero(elem.value)})) // TODO (kurkomisi): traffic != processor!!!
console.log(msg);
this.setState(prevState => {
let newState = [];
newState.shouldUpdate = {};
const insert = (key, values, limit) => {
newState[key] = [...prevState[key], ...values];
while (newState[key].length > limit) {
newState[key].shift();
}
newState.shouldUpdate[key] = true;
};
// (Re)initialize the state with the past data.
if (!isNullOrUndefined(msg.history)) {
const memory = DATA_KEYS.memory;
const traffic = DATA_KEYS.traffic;
newState[memory] = [];
newState[traffic] = [];
if (!isNullOrUndefined(msg.history.memorySamples)) {
newState[memory] = msg.history.memorySamples.map(elem => isNullOrUndefined(elem.value) ? 0 : elem.value);
while (newState[memory].length > LIMIT.memory) {
newState[memory].shift();
}
newState.shouldUpdate[memory] = true;
}
if (!isNullOrUndefined(msg.history.trafficSamples)) {
newState[traffic] = msg.history.trafficSamples.map(elem => isNullOrUndefined(elem.value) ? 0 : elem.value);
while (newState[traffic].length > LIMIT.traffic) {
newState[traffic].shift();
}
newState.shouldUpdate[traffic] = true;
}
}
// Insert the new data samples.
if (!isNullOrUndefined(msg.memory)) {
insert(DATA_KEYS.memory, [isNullOrUndefined(msg.memory.value) ? 0 : msg.memory.value], LIMIT.memory);
}
if (!isNullOrUndefined(msg.traffic)) {
insert(DATA_KEYS.traffic, [isNullOrUndefined(msg.traffic.value) ? 0 : msg.traffic.value], LIMIT.traffic);
}
if (!isNullOrUndefined(msg.log)) {
insert(DATA_KEYS.logs, [msg.log], LIMIT.log);
}
this.setState({
memory: memory,
traffic: traffic,
logs: [],
});
}
// Insert the new data samples.
isNullOrUndefined(msg.memory) || this.setState(prevState => {
let memory = prevState.memory;
let traffic = prevState.traffic;
// Remove the first elements in case the samples' amount exceeds the limit.
if (memory.length === MEMORY_SAMPLE_LIMIT) {
memory.shift();
traffic.shift();
}
return ({
memory: [...memory, {memory: msg.memory.value}],
traffic: [...traffic, {traffic: defaultZero(msg.processor.value)}],
});
});
// Insert the new log.
isNullOrUndefined(msg.log) || this.setState(prevState => {
let logs = prevState.logs;
if(logs.length > 20) {
logs.shift();
}
return {logs: [...logs, msg.log]};
return newState;
});
};
// The change of the active label on the SideBar component will trigger a new render in the Main component.
changeContent = active => {
this.state.active === active || this.setState({active: active});
this.setState(prevState => prevState.active !== active ? {active: active} : {});
};
openSideBar = () => {
@ -133,6 +155,7 @@ class Dashboard extends Component {
memory={this.state.memory}
traffic={this.state.traffic}
logs={this.state.logs}
shouldUpdate={this.state.shouldUpdate}
/>
</div>
);
@ -143,4 +166,4 @@ Dashboard.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(Dashboard);
export default withStyles(styles)(Dashboard);

32
dashboard/assets/components/Header.jsx
View file

@ -1,3 +1,19 @@
// 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 PropTypes from 'prop-types';
import classNames from 'classnames';
@ -13,22 +29,22 @@ import {DRAWER_WIDTH} from './Common.jsx';
// Styles for the Header component.
const styles = theme => ({
appBar: {
position: 'absolute',
position: 'absolute',
transition: theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.sharp,
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
},
appBarShift: {
marginLeft: DRAWER_WIDTH,
width: `calc(100% - ${DRAWER_WIDTH}px)`,
width: `calc(100% - ${DRAWER_WIDTH}px)`,
transition: theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.easeOut,
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
},
menuButton: {
marginLeft: 12,
marginLeft: 12,
marginRight: 20,
},
hide: {
@ -64,8 +80,8 @@ class Header extends Component {
Header.propTypes = {
classes: PropTypes.object.isRequired,
opened: PropTypes.bool.isRequired,
open: PropTypes.func.isRequired,
opened: PropTypes.bool.isRequired,
open: PropTypes.func.isRequired,
};
export default withStyles(styles)(Header);
export default withStyles(styles)(Header);

89
dashboard/assets/components/Home.jsx Normal file
View file

@ -0,0 +1,89 @@
// 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 PropTypes from 'prop-types';
import Grid from 'material-ui/Grid';
import {LineChart, AreaChart, Area, YAxis, CartesianGrid, Line, ResponsiveContainer} from 'recharts';
import {withTheme} from 'material-ui/styles';
import {isNullOrUndefined, DATA_KEYS} from "./Common.jsx";
// ChartGrid renders a grid container for responsive charts.
// The children are Recharts components extended with the Material-UI's xs property.
class ChartGrid extends Component {
render() {
return (
<Grid container spacing={this.props.spacing}>
{
React.Children.map(this.props.children, child => (
<Grid item xs={child.props.xs}>
<ResponsiveContainer width="100%" height={child.props.height}>
{React.cloneElement(child, {data: child.props.values.map(value => ({value: value}))})}
</ResponsiveContainer>
</Grid>
))
}
</Grid>
);
}
}
ChartGrid.propTypes = {
spacing: PropTypes.number.isRequired,
};
// Home renders the home component.
class Home extends Component {
shouldComponentUpdate(nextProps) {
return !isNullOrUndefined(nextProps.shouldUpdate[DATA_KEYS.memory]) ||
!isNullOrUndefined(nextProps.shouldUpdate[DATA_KEYS.traffic]);
}
render() {
const {theme} = this.props;
const memoryColor = theme.palette.primary[300];
const trafficColor = theme.palette.secondary[300];
return (
<ChartGrid spacing={24}>
<AreaChart xs={6} height={300} values={this.props.memory}>
<YAxis />
<Area type="monotone" dataKey="value" stroke={memoryColor} fill={memoryColor} />
</AreaChart>
<LineChart xs={6} height={300} values={this.props.traffic}>
<Line type="monotone" dataKey="value" stroke={trafficColor} dot={false} />
</LineChart>
<LineChart xs={6} height={300} values={this.props.memory}>
<YAxis />
<CartesianGrid stroke="#eee" strokeDasharray="5 5" />
<Line type="monotone" dataKey="value" stroke={memoryColor} dot={false} />
</LineChart>
<AreaChart xs={6} height={300} values={this.props.traffic}>
<CartesianGrid stroke="#eee" strokeDasharray="5 5" vertical={false} />
<Area type="monotone" dataKey="value" stroke={trafficColor} fill={trafficColor} />
</AreaChart>
</ChartGrid>
);
}
}
Home.propTypes = {
theme: PropTypes.object.isRequired,
shouldUpdate: PropTypes.object.isRequired,
};
export default withTheme()(Home);

141
dashboard/assets/components/Main.jsx
View file

@ -1,122 +1,71 @@
// 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 PropTypes from 'prop-types';
import classNames from 'classnames';
import {withStyles} from 'material-ui/styles';
import Grid from 'material-ui/Grid';
import {LineChart, AreaChart, Area, YAxis, CartesianGrid, Line, ResponsiveContainer} from 'recharts';
import {TAGS, DRAWER_WIDTH} from "./Common.jsx";
// ChartGrid renders a grid container for responsive charts.
// The children are Recharts components extended with the Material-UI's xs property.
class ChartGrid extends Component {
render() {
return (
<Grid container spacing={this.props.spacing}>
{
React.Children.map(this.props.children, child => (
<Grid item xs={child.props.xs}>
<ResponsiveContainer width="100%" height={child.props.height}>
{child}
</ResponsiveContainer>
</Grid>
))
}
</Grid>
);
}
}
ChartGrid.propTypes = {
spacing: PropTypes.number.isRequired,
};
import Home from './Home.jsx';
// ContentSwitch chooses and renders the proper page content.
class ContentSwitch extends Component {
render() {
switch(this.props.active) {
case TAGS.home.id:
return (
<ChartGrid spacing={24}>
<AreaChart xs={6} height={300} data={this.props.memory}>
<YAxis />
<Area type="monotone" dataKey="memory" stroke="#8884d8" fill="#8884d8" />
</AreaChart>
<LineChart xs={6} height={300} data={this.props.traffic}>
<Line type="monotone" dataKey="traffic" dot={false} />
</LineChart>
<LineChart xs={6} height={300} data={this.props.memory}>
<YAxis />
<CartesianGrid stroke="#eee" strokeDasharray="5 5" />
<Line type="monotone" dataKey="memory" stroke="#8884d8" dot={false} />
</LineChart>
<AreaChart xs={6} height={300} data={this.props.traffic}>
<CartesianGrid stroke="#eee" strokeDasharray="5 5" vertical={false} />
<Area type="monotone" dataKey="traffic" />
</AreaChart>
</ChartGrid>
);
return <Home memory={this.props.memory} traffic={this.props.traffic} shouldUpdate={this.props.shouldUpdate} />;
case TAGS.chain.id:
return null;
case TAGS.transactions.id:
return null;
case TAGS.network.id:
// Only for testing.
return null;
case TAGS.system.id:
return null;
case TAGS.logs.id:
return <div>{this.props.logs.map((log, index) => <div key={index}>{log}</div>)}</div>;
case TAGS.networking.id:
// Only for testing.
return (
<Grid container spacing={24}>
<Grid item xs={6}>
<ResponsiveContainer width="100%" height={300}>
<LineChart data={this.props.traffic}>
<Line type="monotone" dataKey="traffic" dot={false} />
</LineChart>
</ResponsiveContainer>
</Grid>
<Grid item xs={6}>
<ResponsiveContainer width="100%" height={300}>
<AreaChart data={this.props.memory}>
<YAxis />
<Area type="monotone" dataKey="memory" stroke="#8884d8" fill="#8884d8" />
</AreaChart>
</ResponsiveContainer>
</Grid>
<Grid item xs={6}>
<ResponsiveContainer width="100%" height={300}>
<AreaChart data={this.props.traffic}>
<CartesianGrid stroke="#eee" strokeDasharray="5 5" vertical={false} />
<Area type="monotone" dataKey="traffic" />
</AreaChart>
</ResponsiveContainer>
</Grid>
</Grid>
);
case TAGS.txpool.id:
case TAGS.blockchain.id:
case TAGS.system.id:
}
return null;
}
}
ContentSwitch.propTypes = {
active: PropTypes.string.isRequired,
active: PropTypes.string.isRequired,
shouldUpdate: PropTypes.object.isRequired,
};
// Styles for the Main component.
// styles contains the styles for the Main component.
const styles = theme => ({
content: {
width: '100%',
marginLeft: -DRAWER_WIDTH,
flexGrow: 1,
width: '100%',
marginLeft: -DRAWER_WIDTH,
flexGrow: 1,
backgroundColor: theme.palette.background.default,
padding: theme.spacing.unit * 3,
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.sharp,
padding: theme.spacing.unit * 3,
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
marginTop: 56,
overflow: 'auto',
marginTop: 56,
overflow: 'auto',
[theme.breakpoints.up('sm')]: {
content: {
height: 'calc(100% - 64px)',
height: 'calc(100% - 64px)',
marginTop: 64,
},
},
@ -124,7 +73,7 @@ const styles = theme => ({
contentShift: {
marginLeft: 0,
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.easeOut,
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
},
@ -143,6 +92,7 @@ class Main extends Component {
memory={this.props.memory}
traffic={this.props.traffic}
logs={this.props.logs}
shouldUpdate={this.props.shouldUpdate}
/>
</main>
);
@ -150,9 +100,10 @@ class Main extends Component {
}
Main.propTypes = {
classes: PropTypes.object.isRequired,
opened: PropTypes.bool.isRequired,
active: PropTypes.string.isRequired,
classes: PropTypes.object.isRequired,
opened: PropTypes.bool.isRequired,
active: PropTypes.string.isRequired,
shouldUpdate: PropTypes.object.isRequired,
};
export default withStyles(styles)(Main);
export default withStyles(styles)(Main);

45
dashboard/assets/components/SideBar.jsx
View file

@ -1,3 +1,19 @@
// 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 PropTypes from 'prop-types';
import {withStyles} from 'material-ui/styles';
@ -12,18 +28,18 @@ import {TAGS, DRAWER_WIDTH} from './Common.jsx';
const styles = theme => ({
drawerPaper: {
position: 'relative',
height: '100%',
width: DRAWER_WIDTH,
height: '100%',
width: DRAWER_WIDTH,
},
drawerHeader: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: '0 8px',
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: '0 8px',
...theme.mixins.toolbar,
transitionDuration: {
enter: theme.transitions.duration.enteringScreen,
exit: theme.transitions.duration.leavingScreen,
exit: theme.transitions.duration.leavingScreen,
}
},
});
@ -39,8 +55,9 @@ class SideBar extends Component {
this.clickOn = {};
for(let key in TAGS) {
const id = TAGS[key].id;
this.clickOn[id] = e => {
e.preventDefault();
this.clickOn[id] = event => {
event.preventDefault();
console.log(event.target.key);
this.props.changeContent(id);
};
}
@ -69,7 +86,7 @@ class SideBar extends Component {
<ListItem button key={tag.id} onClick={this.clickOn[tag.id]}>
<ListItemText primary={tag.title} />
</ListItem>
)
);
})
}
</List>
@ -80,10 +97,10 @@ class SideBar extends Component {
}
SideBar.propTypes = {
classes: PropTypes.object.isRequired,
opened: PropTypes.bool.isRequired,
close: PropTypes.func.isRequired,
classes: PropTypes.object.isRequired,
opened: PropTypes.bool.isRequired,
close: PropTypes.func.isRequired,
changeContent: PropTypes.func.isRequired,
};
export default withStyles(styles)(SideBar);
export default withStyles(styles)(SideBar);

18
dashboard/assets/index.jsx
View file

@ -1,3 +1,19 @@
// 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 from 'react';
import {hydrate} from 'react-dom';
import {createMuiTheme, MuiThemeProvider} from 'material-ui/styles';
@ -17,4 +33,4 @@ hydrate(
<Dashboard />
</MuiThemeProvider>,
document.getElementById('dashboard')
); // server-side rendering
);

2
dashboard/assets/package.json
View file

@ -19,4 +19,4 @@
"url": "^0.11.0",
"webpack": "^3.5.5"
}
}
}

2453
dashboard/assets/public/bundle.js
View file

File diff suppressed because it is too large Load diff

2
dashboard/assets/public/dashboard.html
View file

@ -14,4 +14,4 @@
<div id="dashboard" style="height: 100%"></div>
<script src="bundle.js"></script>
</body>
</html>
</html>

18
dashboard/assets/webpack.config.js
View file

@ -1,3 +1,19 @@
// 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/>.
const path = require('path');
module.exports = {
@ -17,4 +33,4 @@ module.exports = {
},
],
},
};
};

2
dashboard/config.go
View file

@ -36,7 +36,7 @@ type Config struct {
// for ephemeral nodes).
Port int `toml:",omitempty"`
// Refresh is the refresh rate of the data updates, the data will be collected this often.
// Refresh is the refresh rate of the data updates, the chartEntry 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.

192
dashboard/dashboard.go
View file

@ -19,7 +19,6 @@ package dashboard
//go:generate go-bindata -nometadata -o assets.go -prefix assets -pkg dashboard assets/public/...
import (
"bytes"
"fmt"
"github.com/ethereum/go-ethereum/log"
"github.com/ethereum/go-ethereum/p2p"
@ -29,62 +28,65 @@ import (
"io/ioutil"
"net"
"net/http"
"path/filepath"
"sync"
"sync/atomic"
"time"
)
const (
processorSampleLimit = 200
memorySampleLimit = 200
trafficSampleLimit = 200
memorySampleLimit = 200 // Maximum number of memory data samples
trafficSampleLimit = 200 // Maximum number of traffic data samples
)
var (
nextId uint32 // Next connection id
)
var nextId uint32 // Next connection id
// dashboard contains the dashboard internals.
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"`
charts charts // The collected data samples to plot
lock sync.RWMutex // Lock protecting the dashboard's internals
closing chan chan error // Channel used for graceful exit
wg sync.WaitGroup
quit chan chan error // Channel used for graceful exit
wg sync.WaitGroup
}
// message embraces the data samples of a client message.
type message struct {
History *charts `json:"history,omitempty"` // Past data samples
Memory *chartEntry `json:"memory,omitempty"` // One memory sample
Traffic *chartEntry `json:"traffic,omitempty"` // One traffic sample
Log string `json:"log,omitempty"` // One log
}
// client represents active websocket connection with a remote browser.
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
conn *websocket.Conn // Particular live websocket connection
msg chan message // 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"`
// charts contains the collected data samples.
type charts struct {
Memory []*chartEntry `json:"memorySamples,omitempty"`
Traffic []*chartEntry `json:"trafficSamples,omitempty"`
}
type data struct {
// chartEntry represents one data sample
type chartEntry 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),
conns: make(map[uint32]*client),
config: config,
quit: make(chan chan error),
}, nil
}
@ -116,18 +118,20 @@ func (db *dashboard) Start(server *p2p.Server) error {
// 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)
// Close the connection listener.
var errs []error
if err := db.listener.Close(); err != nil {
errs = append(errs, err)
}
errc := make(chan error)
db.closing <- errc // collectData
<-errc
db.closing <- errc // collectLogs
<-errc
// Close the collectors.
errc := make(chan error, 1)
for i := 0; i < 2; i++ {
db.quit <- errc
if err := <-errc; err != nil {
errs = append(errs, err)
}
}
// Close the connections.
db.lock.Lock()
for _, c := range db.conns {
if err := c.conn.Close(); err != nil {
@ -136,18 +140,16 @@ func (db *dashboard) Stop() error {
}
db.lock.Unlock()
// Wait until every goroutine terminates.
db.wg.Wait()
log.Info("Dashboard stopped")
return err
}
func join(strings ...string) *bytes.Buffer {
var buffer bytes.Buffer
for _, s := range strings {
buffer.WriteString(s)
var err error
if len(errs) > 0 {
err = fmt.Errorf("%v", errs)
}
return &buffer
return err
}
// webHandler handles all non-api requests, simply flattening and returning the dashboard website.
@ -158,26 +160,24 @@ func (db *dashboard) webHandler(w http.ResponseWriter, r *http.Request) {
if path == "/" {
path = "/dashboard.html"
}
// If the path of the assets is manually set
if db.config.Assets != "" {
file, err := ioutil.ReadFile(join(db.config.Assets, path).String())
blob, err := ioutil.ReadFile(filepath.Join(db.config.Assets, path))
if err != nil {
log.Warn("Failed to read file", "err", err)
log.Warn("Failed to read file", "path", path, "err", err)
http.Error(w, "not found", http.StatusNotFound)
return
}
w.Write(file)
w.Write(blob)
return
}
webapp, err := Asset(join("public", path).String())
blob, err := Asset(filepath.Join("public", path))
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)
w.Write(blob)
}
// apiHandler handles requests for the dashboard.
@ -185,11 +185,10 @@ func (db *dashboard) apiHandler(conn *websocket.Conn) {
id := atomic.AddUint32(&nextId, 1)
client := &client{
conn: conn,
msg: make(chan *map[string]interface{}, 128),
msg: make(chan message, 128),
logger: log.New("id", id),
}
loss := make(chan bool, 1) // Buffered channel as sender may exit early
done := make(chan struct{}) // Buffered channel as sender may exit early
// Start listening for messages to send.
db.wg.Add(1)
@ -198,22 +197,21 @@ func (db *dashboard) apiHandler(conn *websocket.Conn) {
for {
select {
case <-loss:
case <-done:
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)
client.conn.Close()
return
}
}
}
}()
// Send the past data.
client.msg <- &map[string]interface{}{
"metrics": db.Metrics,
client.msg <- message{
History: &db.charts,
}
// Start tracking the connection and drop at connection loss.
db.lock.Lock()
db.conns[id] = client
@ -223,11 +221,10 @@ func (db *dashboard) apiHandler(conn *websocket.Conn) {
delete(db.conns, id)
db.lock.Unlock()
}()
for {
fail := []byte{}
if _, err := conn.Read(fail); err != nil {
loss <- true
close(done)
return
}
// Ignore all messages
@ -240,24 +237,37 @@ func (db *dashboard) collectData() {
for {
select {
case errc := <-db.closing:
case errc := <-db.quit:
errc <- nil
return
case <-time.After(db.config.Refresh):
now := time.Now()
traffic := metrics.DefaultRegistry.Get("p2p/InboundTraffic").(metrics.Meter).Rate1()
inboundTraffic := 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{
now := time.Now()
memory := &chartEntry{
Time: now,
Value: memoryInUse,
}
traffic := &chartEntry{
Time: now,
Value: inboundTraffic,
}
// Remove the first elements in case the samples' amount exceeds the limit.
first := 0
if len(db.charts.Memory) == memorySampleLimit {
first = 1
}
db.charts.Memory = append(db.charts.Memory[first:], memory)
first = 0
if len(db.charts.Traffic) == trafficSampleLimit {
first = 1
}
db.charts.Traffic = append(db.charts.Traffic[first:], traffic)
// TODO (kurkomisi): do not mix traffic with processor!
db.update(traff, memory)
db.sendToAll(&message{
Memory: memory,
Traffic: traffic,
})
}
}
}
@ -269,45 +279,25 @@ func (db *dashboard) collectLogs() {
// TODO (kurkomisi): log collection comes here.
for {
select {
case errc := <-db.closing:
case errc := <-db.quit:
errc <- nil
return
case <-time.After(db.config.Refresh):
db.sendToAll(&map[string]interface{}{
"log": "This is a fake log.",
case <-time.After(db.config.Refresh / 2):
db.sendToAll(&message{
Log: "This is a fake log.",
})
}
}
}
// 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)
db.sendToAll(&map[string]interface{}{
"processor": processor,
"memory": memory,
})
}
// Sends the given message to the active dashboards.
func (db *dashboard) sendToAll(msg *map[string]interface{}) {
// sendToAll sends the given message to the active dashboards.
func (db *dashboard) sendToAll(msg *message) {
db.lock.Lock()
for _, c := range db.conns {
select {
case c.msg <- msg:
case c.msg <- *msg:
default:
c.logger.Warn("Client message queue is full")
c.conn.Close()
}
}
db.lock.Unlock()

3
metrics/metrics.go
View file

@ -30,6 +30,7 @@ import (
// MetricsEnabledFlag is the CLI flag name to use to enable metrics collections.
const MetricsEnabledFlag = "metrics"
const DashboardEnabledFlag = "dashboard"
// Enabled is the flag specifying if metrics are enable or not.
var Enabled = false
@ -39,7 +40,7 @@ var Enabled = false
// and peek into the command line args for the metrics flag.
func init() {
for _, arg := range os.Args {
if strings.TrimLeft(arg, "-") == MetricsEnabledFlag {
if flag := strings.TrimLeft(arg, "-"); flag == MetricsEnabledFlag || flag == DashboardEnabledFlag {
log.Info("Enabling metrics collection")
Enabled = true
}