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
This commit is contained in:
Kurkó Mihály 2018-01-15 11:20:00 +02:00 committed by Péter Szilágyi
parent 81ad8f665d
commit 938cf4528a
16 changed files with 1429 additions and 5321 deletions

2
.gitignore vendored
View File

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

View File

@ -158,7 +158,7 @@ func makeFullNode(ctx *cli.Context) *node.Node {
utils.RegisterEthService(stack, &cfg.Eth) utils.RegisterEthService(stack, &cfg.Eth)
if ctx.GlobalBool(utils.DashboardEnabledFlag.Name) { 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 // Whisper must be explicitly enabled by specifying at least 1 whisper flag or in dev mode
shhEnabled := enableWhisper(ctx) shhEnabled := enableWhisper(ctx)

View File

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

View File

@ -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) $ (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`: To bundle up the final UI into Geth, run `go generate`:

File diff suppressed because one or more lines are too long

View File

@ -62,32 +62,4 @@ export type MenuProp = {|...ProvidedMenuProp, id: string|};
// This way the mistyping is prevented. // This way the mistyping is prevented.
export const MENU: Map<string, {...MenuProp}> = new Map(menuSkeletons.map(({id, menu}) => ([id, {id, ...menu}]))); 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 DURATION = 200;
export const LENS: Map<string, string> = new Map([
'content',
...menuSkeletons.map(({id}) => id),
...sampleSkeletons.map(({id}) => id),
].map(lens => [lens, lens]));

View File

@ -19,37 +19,99 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import withStyles from 'material-ui/styles/withStyles'; import withStyles from 'material-ui/styles/withStyles';
import {lensPath, view, set} from 'ramda';
import Header from './Header'; import Header from './Header';
import Body from './Body'; 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'; 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 => ({ const styles = theme => ({
dashboard: { dashboard: {
display: 'flex', display: 'flex',
@ -61,15 +123,18 @@ const styles = theme => ({
overflow: 'hidden', overflow: 'hidden',
}, },
}); });
export type Props = { export type Props = {
classes: Object, classes: Object,
}; };
type State = { type State = {
active: string, // active menu active: string, // active menu
sideBar: boolean, // true if the sidebar is opened 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 // 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. // listens for messages. When there is an incoming message, updates the page's content correspondingly.
class Dashboard extends Component<Props, State> { class Dashboard extends Component<Props, State> {
@ -78,8 +143,8 @@ class Dashboard extends Component<Props, State> {
this.state = { this.state = {
active: MENU.get('home').id, active: MENU.get('home').id,
sideBar: true, 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 // reconnect establishes a websocket connection with the server, listens for incoming messages
// and tries to reconnect on connection loss. // and tries to reconnect on connection loss.
reconnect = () => { reconnect = () => {
this.setState({
content: {home: {memory: [], traffic: []}, logs: {log: []}},
});
const server = new WebSocket(`${((window.location.protocol === 'https:') ? 'wss://' : 'ws://') + window.location.host}/api`); const server = new WebSocket(`${((window.location.protocol === 'https:') ? 'wss://' : 'ws://') + window.location.host}/api`);
server.onopen = () => {
this.setState({content: defaultContent, shouldUpdate: {}});
};
server.onmessage = (event) => { server.onmessage = (event) => {
const msg: Message = JSON.parse(event.data); const msg: $Shape<Content> = JSON.parse(event.data);
if (!msg) { if (!msg) {
console.error(`Incoming message is ${msg}`);
return; return;
} }
this.update(msg); 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. // 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} content={this.state.content}
shouldUpdate={this.state.shouldUpdate} 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> </div>
); );
} }

View File

@ -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);

View File

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

View File

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

View File

@ -16,38 +16,49 @@
// You should have received a copy of the GNU Lesser General Public License // 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/>. // along with the go-ethereum library. If not, see <http://www.gnu.org/licenses/>.
import type {ChartEntry} from './message';
export type Content = { 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 = { 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 = { export type Chain = {
/* TODO (kurkomisi) */ /* TODO (kurkomisi) */
}; };
export type TxPool = { export type TxPool = {
/* TODO (kurkomisi) */ /* TODO (kurkomisi) */
}; };
export type Network = { export type Network = {
/* TODO (kurkomisi) */ /* TODO (kurkomisi) */
}; };
export type System = { export type System = {
/* TODO (kurkomisi) */ /* TODO (kurkomisi) */
}; };
export type Logs = { export type Logs = {
log: Array<string>, log: Array<string>,
}; };

View File

@ -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,
};

View File

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

View File

@ -18,8 +18,9 @@ package dashboard
//go:generate npm --prefix ./assets install //go:generate npm --prefix ./assets install
//go:generate ./assets/node_modules/.bin/webpack --config ./assets/webpack.config.js --context ./assets //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 //go:generate gofmt -w -s assets.go
import ( import (
@ -34,6 +35,7 @@ import (
"github.com/ethereum/go-ethereum/log" "github.com/ethereum/go-ethereum/log"
"github.com/ethereum/go-ethereum/p2p" "github.com/ethereum/go-ethereum/p2p"
"github.com/ethereum/go-ethereum/params"
"github.com/ethereum/go-ethereum/rpc" "github.com/ethereum/go-ethereum/rpc"
"github.com/rcrowley/go-metrics" "github.com/rcrowley/go-metrics"
"golang.org/x/net/websocket" "golang.org/x/net/websocket"
@ -53,6 +55,7 @@ type Dashboard struct {
listener net.Listener listener net.Listener
conns map[uint32]*client // Currently live websocket connections conns map[uint32]*client // Currently live websocket connections
charts *HomeMessage charts *HomeMessage
commit string
lock sync.RWMutex // Lock protecting the dashboard's internals lock sync.RWMutex // Lock protecting the dashboard's internals
quit chan chan error // Channel used for graceful exit 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. // 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{ return &Dashboard{
conns: make(map[uint32]*client), conns: make(map[uint32]*client),
config: config, config: config,
quit: make(chan chan error), quit: make(chan chan error),
charts: &HomeMessage{ charts: &HomeMessage{
Memory: &Chart{}, Memory: ChartEntries{},
Traffic: &Chart{}, Traffic: ChartEntries{},
}, },
commit: commit,
}, nil }, 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. // Start implements node.Service, starting the data collection thread and the listening server of the dashboard.
func (db *Dashboard) Start(server *p2p.Server) error { func (db *Dashboard) Start(server *p2p.Server) error {
log.Info("Starting dashboard")
db.wg.Add(2) db.wg.Add(2)
go db.collectData() go db.collectData()
go db.collectLogs() // In case of removing this line change 2 back to 1 in wg.Add. 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) w.Write(blob)
return return
} }
blob, err := Asset(filepath.Join("public", path)) blob, err := Asset(path[1:])
if err != nil { if err != nil {
log.Warn("Failed to load the asset", "path", path, "err", err) log.Warn("Failed to load the asset", "path", path, "err", err)
http.Error(w, "not found", http.StatusNotFound) 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. // Send the past data.
client.msg <- Message{ 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{ 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. // Start tracking the connection and drop at connection loss.
@ -249,24 +260,20 @@ func (db *Dashboard) collectData() {
Value: inboundTraffic, Value: inboundTraffic,
} }
first := 0 first := 0
if len(db.charts.Memory.History) == memorySampleLimit { if len(db.charts.Memory) == memorySampleLimit {
first = 1 first = 1
} }
db.charts.Memory.History = append(db.charts.Memory.History[first:], memory) db.charts.Memory = append(db.charts.Memory[first:], memory)
first = 0 first = 0
if len(db.charts.Traffic.History) == trafficSampleLimit { if len(db.charts.Traffic) == trafficSampleLimit {
first = 1 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{ db.sendToAll(&Message{
Home: &HomeMessage{ 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): case <-time.After(db.config.Refresh / 2):
db.sendToAll(&Message{ db.sendToAll(&Message{
Logs: &LogsMessage{ Logs: &LogsMessage{
Log: fmt.Sprintf("%-4d: This is a fake log.", id), Log: []string{fmt.Sprintf("%-4d: This is a fake log.", id)},
}, },
}) })
id++ id++

View File

@ -19,6 +19,7 @@ package dashboard
import "time" import "time"
type Message struct { type Message struct {
General *GeneralMessage `json:"general,omitempty"`
Home *HomeMessage `json:"home,omitempty"` Home *HomeMessage `json:"home,omitempty"`
Chain *ChainMessage `json:"chain,omitempty"` Chain *ChainMessage `json:"chain,omitempty"`
TxPool *TxPoolMessage `json:"txpool,omitempty"` TxPool *TxPoolMessage `json:"txpool,omitempty"`
@ -27,16 +28,18 @@ type Message struct {
Logs *LogsMessage `json:"logs,omitempty"` 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 { type ChartEntry struct {
Time time.Time `json:"time,omitempty"` Time time.Time `json:"time,omitempty"`
Value float64 `json:"value,omitempty"` Value float64 `json:"value,omitempty"`
@ -59,5 +62,5 @@ type SystemMessage struct {
} }
type LogsMessage struct { type LogsMessage struct {
Log string `json:"log,omitempty"` Log []string `json:"log,omitempty"`
} }