mirror of https://github.com/status-im/op-geth.git
cmd, dashboard: use webpack dev server, remove custom assets (#16263)
* cmd, dashboard: remove custom assets, webpack dev server * dashboard: yarn commands, small fixes
This commit is contained in:
Kurkó Mihály
Péter Szilágyi
parent
3ec1b9a92d
commit
704840a8ad
|
|
@ -42,3 +42,6 @@ profile.cov
|
|||
/dashboard/assets/node_modules
|
||||
/dashboard/assets/stats.json
|
||||
/dashboard/assets/bundle.js
|
||||
/dashboard/assets/package-lock.json
|
||||
|
||||
**/yarn-error.log
|
||||
|
|
|
|||
|
|
@ -65,7 +65,6 @@ var (
|
|||
utils.DashboardAddrFlag,
|
||||
utils.DashboardPortFlag,
|
||||
utils.DashboardRefreshFlag,
|
||||
utils.DashboardAssetsFlag,
|
||||
utils.EthashCacheDirFlag,
|
||||
utils.EthashCachesInMemoryFlag,
|
||||
utils.EthashCachesOnDiskFlag,
|
||||
|
|
|
|||
|
|
@ -209,11 +209,6 @@ var (
|
|||
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",
|
||||
Value: dashboard.DefaultConfig.Assets,
|
||||
}
|
||||
// Ethash settings
|
||||
EthashCacheDirFlag = DirectoryFlag{
|
||||
Name: "ethash.cachedir",
|
||||
|
|
@ -1120,7 +1115,6 @@ 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.
|
||||
|
|
|
|||
|
|
@ -12,28 +12,27 @@ The client's UI uses [React][React] with JSX syntax, which is validated by the [
|
|||
As the dashboard depends on certain NPM packages (which are not included in the `go-ethereum` repo), these need to be installed first:
|
||||
|
||||
```
|
||||
$ (cd dashboard/assets && npm install)
|
||||
$ (cd dashboard/assets && ./node_modules/.bin/flow-typed install)
|
||||
$ (cd dashboard/assets && yarn install && yarn flow)
|
||||
```
|
||||
|
||||
Normally the dashboard assets are bundled into Geth via `go-bindata` to avoid external dependencies. Rebuilding Geth after each UI modification however is not feasible from a developer perspective. Instead, we can run `webpack` in watch mode to automatically rebundle the UI, and ask `geth` to use external assets to not rely on compiled resources:
|
||||
Normally the dashboard assets are bundled into Geth via `go-bindata` to avoid external dependencies. Rebuilding Geth after each UI modification however is not feasible from a developer perspective. Instead, we can run `yarn dev` to watch for file system changes and refresh the browser automatically.
|
||||
|
||||
```
|
||||
$ (cd dashboard/assets && ./node_modules/.bin/webpack --watch)
|
||||
$ geth --dashboard --dashboard.assets=dashboard/assets --vmodule=dashboard=5
|
||||
$ geth --dashboard --vmodule=dashboard=5
|
||||
$ (cd dashboard/assets && yarn dev)
|
||||
```
|
||||
|
||||
To bundle up the final UI into Geth, run `go generate`:
|
||||
|
||||
```
|
||||
$ go generate ./dashboard
|
||||
$ (cd dashboard && go generate)
|
||||
```
|
||||
|
||||
### Static type checking
|
||||
|
||||
Since JavaScript doesn't provide type safety, [Flow][Flow] is used to check types. These are only useful during development, so at the end of the process Babel will strip them.
|
||||
|
||||
To take advantage of static type checking, your IDE needs to be prepared for it. In case of [Atom][Atom] a configuration guide can be found [here][Atom config]: Install the [Nuclide][Nuclide] package for Flow support, making sure it installs all of its support packages by enabling `Install Recommended Packages on Startup`, and set the path of the `flow-bin` which were installed previously by `npm`.
|
||||
To take advantage of static type checking, your IDE needs to be prepared for it. In case of [Atom][Atom] a configuration guide can be found [here][Atom config]: Install the [Nuclide][Nuclide] package for Flow support, making sure it installs all of its support packages by enabling `Install Recommended Packages on Startup`, and set the path of the `flow-bin` which were installed previously by `yarn`.
|
||||
|
||||
For more IDE support install the `linter-eslint` package too, which finds the `.eslintrc` file, and provides real-time linting. Atom warns, that these two packages are incompatible, but they seem to work well together. For third-party library errors and auto-completion [flow-typed][flow-typed] is used.
|
||||
|
||||
|
|
@ -41,7 +40,7 @@ For more IDE support install the `linter-eslint` package too, which finds the `.
|
|||
|
||||
[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`
|
||||
* Generate the bundle's profile running `yarn stats`
|
||||
* 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`
|
||||
|
||||
|
|
|
|||
4299
dashboard/assets.go
4299
dashboard/assets.go
File diff suppressed because one or more lines are too long
|
|
@ -38,15 +38,15 @@ export const percentPlotter = <T>(text: string, mapper: (T => T) = multiplier(1)
|
|||
};
|
||||
|
||||
// unit contains the units for the bytePlotter.
|
||||
const unit = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
|
||||
const unit = ['', 'Ki', 'Mi', 'Gi', 'Ti', 'Pi', 'Ei', 'Zi', 'Yi'];
|
||||
|
||||
// simplifyBytes returns the simplified version of the given value followed by the unit.
|
||||
const simplifyBytes = (x: number) => {
|
||||
let i = 0;
|
||||
for (; x > 1024 && i < 5; i++) {
|
||||
for (; x > 1024 && i < 8; i++) {
|
||||
x /= 1024;
|
||||
}
|
||||
return x.toFixed(2).toString().concat(' ', unit[i]);
|
||||
return x.toFixed(2).toString().concat(' ', unit[i], 'B');
|
||||
};
|
||||
|
||||
// bytePlotter renders a tooltip, which displays the payload as a byte value.
|
||||
|
|
|
|||
|
|
@ -81,7 +81,11 @@ const defaultContent: Content = {
|
|||
version: null,
|
||||
commit: null,
|
||||
},
|
||||
home: {
|
||||
home: {},
|
||||
chain: {},
|
||||
txpool: {},
|
||||
network: {},
|
||||
system: {
|
||||
activeMemory: [],
|
||||
virtualMemory: [],
|
||||
networkIngress: [],
|
||||
|
|
@ -91,10 +95,6 @@ const defaultContent: Content = {
|
|||
diskRead: [],
|
||||
diskWrite: [],
|
||||
},
|
||||
chain: {},
|
||||
txpool: {},
|
||||
network: {},
|
||||
system: {},
|
||||
logs: {
|
||||
log: [],
|
||||
},
|
||||
|
|
@ -108,7 +108,11 @@ const updaters = {
|
|||
version: replacer,
|
||||
commit: replacer,
|
||||
},
|
||||
home: {
|
||||
home: null,
|
||||
chain: null,
|
||||
txpool: null,
|
||||
network: null,
|
||||
system: {
|
||||
activeMemory: appender(200),
|
||||
virtualMemory: appender(200),
|
||||
networkIngress: appender(200),
|
||||
|
|
@ -118,11 +122,7 @@ const updaters = {
|
|||
diskRead: appender(200),
|
||||
diskWrite: appender(200),
|
||||
},
|
||||
chain: null,
|
||||
txpool: null,
|
||||
network: null,
|
||||
system: null,
|
||||
logs: {
|
||||
logs: {
|
||||
log: appender(200),
|
||||
},
|
||||
};
|
||||
|
|
@ -136,7 +136,7 @@ const styles = {
|
|||
height: '100%',
|
||||
zIndex: 1,
|
||||
overflow: 'hidden',
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
// themeStyles returns the styles generated from the theme for the component.
|
||||
|
|
@ -178,7 +178,8 @@ class Dashboard extends Component<Props, State> {
|
|||
// reconnect establishes a websocket connection with the server, listens for incoming messages
|
||||
// and tries to reconnect on connection loss.
|
||||
reconnect = () => {
|
||||
const server = new WebSocket(`${((window.location.protocol === 'https:') ? 'wss://' : 'ws://') + window.location.host}/api`);
|
||||
// PROD is defined by webpack.
|
||||
const server = new WebSocket(`${((window.location.protocol === 'https:') ? 'wss://' : 'ws://')}${PROD ? window.location.host : 'localhost:8080'}/api`);
|
||||
server.onopen = () => {
|
||||
this.setState({content: defaultContent, shouldUpdate: {}});
|
||||
};
|
||||
|
|
@ -217,7 +218,6 @@ class Dashboard extends Component<Props, State> {
|
|||
return (
|
||||
<div className={this.props.classes.dashboard} style={styles.dashboard}>
|
||||
<Header
|
||||
opened={this.state.sideBar}
|
||||
switchSideBar={this.switchSideBar}
|
||||
/>
|
||||
<Body
|
||||
|
|
|
|||
|
|
@ -26,7 +26,17 @@ import {ResponsiveContainer, AreaChart, Area, Tooltip} from 'recharts';
|
|||
import ChartRow from './ChartRow';
|
||||
import CustomTooltip, {bytePlotter, bytePerSecPlotter, percentPlotter, multiplier} from './CustomTooltip';
|
||||
import {styles as commonStyles} from '../common';
|
||||
import type {Content} from '../types/content';
|
||||
import type {General, System} from '../types/content';
|
||||
|
||||
const FOOTER_SYNC_ID = 'footerSyncId';
|
||||
|
||||
const CPU = 'cpu';
|
||||
const MEMORY = 'memory';
|
||||
const DISK = 'disk';
|
||||
const TRAFFIC = 'traffic';
|
||||
|
||||
const TOP = 'Top';
|
||||
const BOTTOM = 'Bottom';
|
||||
|
||||
// styles contains the constant styles of the component.
|
||||
const styles = {
|
||||
|
|
@ -40,17 +50,16 @@ const styles = {
|
|||
padding: 0,
|
||||
},
|
||||
doubleChartWrapper: {
|
||||
height: '100%',
|
||||
width: '99%',
|
||||
paddingTop: 5,
|
||||
height: '100%',
|
||||
width: '99%',
|
||||
},
|
||||
};
|
||||
|
||||
// themeStyles returns the styles generated from the theme for the component.
|
||||
const themeStyles: Object = (theme: Object) => ({
|
||||
footer: {
|
||||
backgroundColor: theme.palette.background.appBar,
|
||||
color: theme.palette.getContrastText(theme.palette.background.appBar),
|
||||
backgroundColor: theme.palette.grey[900],
|
||||
color: theme.palette.getContrastText(theme.palette.grey[900]),
|
||||
zIndex: theme.zIndex.appBar,
|
||||
height: theme.spacing.unit * 10,
|
||||
},
|
||||
|
|
@ -59,111 +68,108 @@ const themeStyles: Object = (theme: Object) => ({
|
|||
export type Props = {
|
||||
classes: Object, // injected by withStyles()
|
||||
theme: Object,
|
||||
content: Content,
|
||||
general: General,
|
||||
system: System,
|
||||
shouldUpdate: Object,
|
||||
};
|
||||
|
||||
// Footer renders the footer of the dashboard.
|
||||
class Footer extends Component<Props> {
|
||||
shouldComponentUpdate(nextProps) {
|
||||
return typeof nextProps.shouldUpdate.home !== 'undefined';
|
||||
return typeof nextProps.shouldUpdate.general !== 'undefined' || typeof nextProps.shouldUpdate.system !== 'undefined';
|
||||
}
|
||||
|
||||
// info renders a label with the given values.
|
||||
info = (about: string, value: ?string) => (value ? (
|
||||
<Typography type='caption' color='inherit'>
|
||||
<span style={commonStyles.light}>{about}</span> {value}
|
||||
</Typography>
|
||||
) : null);
|
||||
// halfHeightChart renders an area chart with half of the height of its parent.
|
||||
halfHeightChart = (chartProps, tooltip, areaProps) => (
|
||||
<ResponsiveContainer width='100%' height='50%'>
|
||||
<AreaChart {...chartProps} >
|
||||
{!tooltip || (<Tooltip cursor={false} content={<CustomTooltip tooltip={tooltip} />} />)}
|
||||
<Area isAnimationActive={false} type='monotone' {...areaProps} />
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
);
|
||||
|
||||
// doubleChart renders a pair of charts separated by the baseline.
|
||||
doubleChart = (syncId, topChart, bottomChart) => {
|
||||
const topKey = 'topKey';
|
||||
const bottomKey = 'bottomKey';
|
||||
const topDefault = topChart.default ? topChart.default : 0;
|
||||
const bottomDefault = bottomChart.default ? bottomChart.default : 0;
|
||||
const topTooltip = topChart.tooltip ? (
|
||||
<Tooltip cursor={false} content={<CustomTooltip tooltip={topChart.tooltip} />} />
|
||||
) : null;
|
||||
const bottomTooltip = bottomChart.tooltip ? (
|
||||
<Tooltip cursor={false} content={<CustomTooltip tooltip={bottomChart.tooltip} />} />
|
||||
) : null;
|
||||
doubleChart = (syncId, chartKey, topChart, bottomChart) => {
|
||||
if (!Array.isArray(topChart.data) || !Array.isArray(bottomChart.data)) {
|
||||
return null;
|
||||
}
|
||||
const topDefault = topChart.default || 0;
|
||||
const bottomDefault = bottomChart.default || 0;
|
||||
const topKey = `${chartKey}${TOP}`;
|
||||
const bottomKey = `${chartKey}${BOTTOM}`;
|
||||
const topColor = '#8884d8';
|
||||
const bottomColor = '#82ca9d';
|
||||
|
||||
// Put the samples of the two charts into the same array in order to avoid problems
|
||||
// at the synchronized area charts. If one of the two arrays doesn't have value at
|
||||
// a given position, give it a 0 default value.
|
||||
let data = [...topChart.data.map(({value}) => {
|
||||
const d = {};
|
||||
d[topKey] = value || topDefault;
|
||||
return d;
|
||||
})];
|
||||
for (let i = 0; i < data.length && i < bottomChart.data.length; i++) {
|
||||
// The value needs to be negative in order to plot it upside down.
|
||||
const d = bottomChart.data[i];
|
||||
data[i][bottomKey] = d && d.value ? -d.value : bottomDefault;
|
||||
}
|
||||
data = [...data, ...bottomChart.data.slice(data.length).map(({value}) => {
|
||||
const d = {};
|
||||
d[topKey] = topDefault;
|
||||
d[bottomKey] = -value || bottomDefault;
|
||||
return d;
|
||||
})];
|
||||
|
||||
return (
|
||||
<div style={styles.doubleChartWrapper}>
|
||||
<ResponsiveContainer width='100%' height='50%'>
|
||||
<AreaChart data={data} syncId={syncId} >
|
||||
{topTooltip}
|
||||
<Area type='monotone' dataKey={topKey} stroke={topColor} fill={topColor} />
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
<div style={{marginTop: -10, width: '100%', height: '50%'}}>
|
||||
<ResponsiveContainer width='100%' height='100%'>
|
||||
<AreaChart data={data} syncId={syncId} >
|
||||
{bottomTooltip}
|
||||
<Area type='monotone' dataKey={bottomKey} stroke={bottomColor} fill={bottomColor} />
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
{this.halfHeightChart(
|
||||
{
|
||||
syncId,
|
||||
data: topChart.data.map(({value}) => ({[topKey]: value || topDefault})),
|
||||
margin: {top: 5, right: 5, bottom: 0, left: 5},
|
||||
},
|
||||
topChart.tooltip,
|
||||
{dataKey: topKey, stroke: topColor, fill: topColor},
|
||||
)}
|
||||
{this.halfHeightChart(
|
||||
{
|
||||
syncId,
|
||||
data: bottomChart.data.map(({value}) => ({[bottomKey]: -value || -bottomDefault})),
|
||||
margin: {top: 0, right: 5, bottom: 5, left: 5},
|
||||
},
|
||||
bottomChart.tooltip,
|
||||
{dataKey: bottomKey, stroke: bottomColor, fill: bottomColor},
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const {content} = this.props;
|
||||
const {general, home} = content;
|
||||
const {general, system} = this.props;
|
||||
|
||||
return (
|
||||
<Grid container className={this.props.classes.footer} direction='row' alignItems='center' style={styles.footer}>
|
||||
<Grid item xs style={styles.chartRowWrapper}>
|
||||
<ChartRow>
|
||||
{this.doubleChart(
|
||||
'all',
|
||||
{data: home.processCPU, tooltip: percentPlotter('Process')},
|
||||
{data: home.systemCPU, tooltip: percentPlotter('System', multiplier(-1))},
|
||||
FOOTER_SYNC_ID,
|
||||
CPU,
|
||||
{data: system.processCPU, tooltip: percentPlotter('Process load')},
|
||||
{data: system.systemCPU, tooltip: percentPlotter('System load', multiplier(-1))},
|
||||
)}
|
||||
{this.doubleChart(
|
||||
'all',
|
||||
{data: home.activeMemory, tooltip: bytePlotter('Active')},
|
||||
{data: home.virtualMemory, tooltip: bytePlotter('Virtual', multiplier(-1))},
|
||||
FOOTER_SYNC_ID,
|
||||
MEMORY,
|
||||
{data: system.activeMemory, tooltip: bytePlotter('Active memory')},
|
||||
{data: system.virtualMemory, tooltip: bytePlotter('Virtual memory', multiplier(-1))},
|
||||
)}
|
||||
{this.doubleChart(
|
||||
'all',
|
||||
{data: home.diskRead, tooltip: bytePerSecPlotter('Disk Read')},
|
||||
{data: home.diskWrite, tooltip: bytePerSecPlotter('Disk Write', multiplier(-1))},
|
||||
FOOTER_SYNC_ID,
|
||||
DISK,
|
||||
{data: system.diskRead, tooltip: bytePerSecPlotter('Disk read')},
|
||||
{data: system.diskWrite, tooltip: bytePerSecPlotter('Disk write', multiplier(-1))},
|
||||
)}
|
||||
{this.doubleChart(
|
||||
'all',
|
||||
{data: home.networkIngress, tooltip: bytePerSecPlotter('Download')},
|
||||
{data: home.networkEgress, tooltip: bytePerSecPlotter('Upload', multiplier(-1))},
|
||||
FOOTER_SYNC_ID,
|
||||
TRAFFIC,
|
||||
{data: system.networkIngress, tooltip: bytePerSecPlotter('Download')},
|
||||
{data: system.networkEgress, tooltip: bytePerSecPlotter('Upload', multiplier(-1))},
|
||||
)}
|
||||
</ChartRow>
|
||||
</Grid>
|
||||
<Grid item >
|
||||
{this.info('Geth', general.version)}
|
||||
{this.info('Commit', general.commit ? general.commit.substring(0, 7) : null)}
|
||||
<Typography type='caption' color='inherit'>
|
||||
<span style={commonStyles.light}>Geth</span> {general.version}
|
||||
</Typography>
|
||||
{general.commit && (
|
||||
<Typography type='caption' color='inherit'>
|
||||
<span style={commonStyles.light}>{'Commit '}</span>
|
||||
<a href={`https://github.com/ethereum/go-ethereum/commit/${general.commit}`} target='_blank' style={{color: 'inherit', textDecoration: 'none'}} >
|
||||
{general.commit.substring(0, 8)}
|
||||
</a>
|
||||
</Typography>
|
||||
)}
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -21,30 +21,16 @@ 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 Transition from 'react-transition-group/Transition';
|
||||
import IconButton from 'material-ui/IconButton';
|
||||
import Icon from 'material-ui/Icon';
|
||||
import MenuIcon from 'material-ui-icons/Menu';
|
||||
import Typography from 'material-ui/Typography';
|
||||
import ChevronLeftIcon from 'material-ui-icons/ChevronLeft';
|
||||
|
||||
import {DURATION} from '../common';
|
||||
|
||||
// styles contains the constant styles of the component.
|
||||
const styles = {
|
||||
arrow: {
|
||||
default: {
|
||||
transition: `transform ${DURATION}ms`,
|
||||
},
|
||||
transition: {
|
||||
entered: {transform: 'rotate(180deg)'},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// themeStyles returns the styles generated from the theme for the component.
|
||||
const themeStyles = (theme: Object) => ({
|
||||
header: {
|
||||
backgroundColor: theme.palette.background.appBar,
|
||||
color: theme.palette.getContrastText(theme.palette.background.appBar),
|
||||
backgroundColor: theme.palette.grey[900],
|
||||
color: theme.palette.getContrastText(theme.palette.grey[900]),
|
||||
zIndex: theme.zIndex.appBar,
|
||||
},
|
||||
toolbar: {
|
||||
|
|
@ -53,42 +39,28 @@ const themeStyles = (theme: Object) => ({
|
|||
},
|
||||
title: {
|
||||
paddingLeft: theme.spacing.unit,
|
||||
fontSize: 3 * theme.spacing.unit,
|
||||
},
|
||||
});
|
||||
|
||||
export type Props = {
|
||||
classes: Object, // injected by withStyles()
|
||||
opened: boolean,
|
||||
switchSideBar: () => void,
|
||||
};
|
||||
|
||||
// Header renders the header of the dashboard.
|
||||
class Header extends Component<Props> {
|
||||
shouldComponentUpdate(nextProps) {
|
||||
return nextProps.opened !== this.props.opened;
|
||||
}
|
||||
|
||||
// arrow renders a button, which changes the sidebar's state.
|
||||
arrow = (transitionState: string) => (
|
||||
<IconButton onClick={this.props.switchSideBar}>
|
||||
<ChevronLeftIcon
|
||||
style={{
|
||||
...styles.arrow.default,
|
||||
...styles.arrow.transition[transitionState],
|
||||
}}
|
||||
/>
|
||||
</IconButton>
|
||||
);
|
||||
|
||||
render() {
|
||||
const {classes, opened} = this.props;
|
||||
const {classes} = this.props;
|
||||
|
||||
return (
|
||||
<AppBar position='static' className={classes.header}>
|
||||
<Toolbar className={classes.toolbar}>
|
||||
<Transition mountOnEnter in={opened} timeout={{enter: DURATION}}>
|
||||
{this.arrow}
|
||||
</Transition>
|
||||
<IconButton onClick={this.props.switchSideBar}>
|
||||
<Icon>
|
||||
<MenuIcon />
|
||||
</Icon>
|
||||
</IconButton>
|
||||
<Typography type='title' color='inherit' noWrap className={classes.title}>
|
||||
Go Ethereum Dashboard
|
||||
</Typography>
|
||||
|
|
|
|||
|
|
@ -76,7 +76,8 @@ class Main extends Component<Props> {
|
|||
<div style={styles.wrapper}>
|
||||
<div className={classes.content} style={styles.content}>{children}</div>
|
||||
<Footer
|
||||
content={content}
|
||||
general={content.general}
|
||||
system={content.system}
|
||||
shouldUpdate={shouldUpdate}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -41,10 +41,10 @@ const styles = {
|
|||
// themeStyles returns the styles generated from the theme for the component.
|
||||
const themeStyles = theme => ({
|
||||
list: {
|
||||
background: theme.palette.background.appBar,
|
||||
background: theme.palette.grey[900],
|
||||
},
|
||||
listItem: {
|
||||
minWidth: theme.spacing.unit * 3,
|
||||
minWidth: theme.spacing.unit * 7,
|
||||
},
|
||||
icon: {
|
||||
fontSize: theme.spacing.unit * 3,
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -15,11 +15,11 @@
|
|||
"css-loader": "^0.28.9",
|
||||
"eslint": "^4.16.0",
|
||||
"eslint-config-airbnb": "^16.1.0",
|
||||
"eslint-loader": "^1.9.0",
|
||||
"eslint-loader": "^2.0.0",
|
||||
"eslint-plugin-flowtype": "^2.41.0",
|
||||
"eslint-plugin-import": "^2.8.0",
|
||||
"eslint-plugin-jsx-a11y": "^6.0.3",
|
||||
"eslint-plugin-react": "^7.5.1",
|
||||
"eslint-plugin-flowtype": "^2.41.0",
|
||||
"file-loader": "^1.1.6",
|
||||
"flow-bin": "^0.63.1",
|
||||
"flow-bin-loader": "^1.0.2",
|
||||
|
|
@ -35,6 +35,13 @@
|
|||
"style-loader": "^0.19.1",
|
||||
"url": "^0.11.0",
|
||||
"url-loader": "^0.6.2",
|
||||
"webpack": "^3.10.0"
|
||||
"webpack": "^3.10.0",
|
||||
"webpack-dev-server": "^2.11.1"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "NODE_ENV=production webpack",
|
||||
"stats": "webpack --profile --json > stats.json",
|
||||
"dev": "webpack-dev-server --port 8081",
|
||||
"flow": "flow-typed install"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,22 +26,6 @@ export type Content = {
|
|||
logs: Logs,
|
||||
};
|
||||
|
||||
export type General = {
|
||||
version: ?string,
|
||||
commit: ?string,
|
||||
};
|
||||
|
||||
export type Home = {
|
||||
activeMemory: ChartEntries,
|
||||
virtualMemory: ChartEntries,
|
||||
networkIngress: ChartEntries,
|
||||
networkEgress: ChartEntries,
|
||||
processCPU: ChartEntries,
|
||||
systemCPU: ChartEntries,
|
||||
diskRead: ChartEntries,
|
||||
diskWrite: ChartEntries,
|
||||
};
|
||||
|
||||
export type ChartEntries = Array<ChartEntry>;
|
||||
|
||||
export type ChartEntry = {
|
||||
|
|
@ -49,6 +33,15 @@ export type ChartEntry = {
|
|||
value: number,
|
||||
};
|
||||
|
||||
export type General = {
|
||||
version: ?string,
|
||||
commit: ?string,
|
||||
};
|
||||
|
||||
export type Home = {
|
||||
/* TODO (kurkomisi) */
|
||||
};
|
||||
|
||||
export type Chain = {
|
||||
/* TODO (kurkomisi) */
|
||||
};
|
||||
|
|
@ -62,7 +55,14 @@ export type Network = {
|
|||
};
|
||||
|
||||
export type System = {
|
||||
/* TODO (kurkomisi) */
|
||||
activeMemory: ChartEntries,
|
||||
virtualMemory: ChartEntries,
|
||||
networkIngress: ChartEntries,
|
||||
networkEgress: ChartEntries,
|
||||
processCPU: ChartEntries,
|
||||
systemCPU: ChartEntries,
|
||||
diskRead: ChartEntries,
|
||||
diskWrite: ChartEntries,
|
||||
};
|
||||
|
||||
export type Logs = {
|
||||
|
|
|
|||
|
|
@ -32,6 +32,9 @@ module.exports = {
|
|||
mangle: false,
|
||||
beautify: true,
|
||||
}),
|
||||
new webpack.DefinePlugin({
|
||||
PROD: process.env.NODE_ENV === 'production',
|
||||
}),
|
||||
],
|
||||
module: {
|
||||
rules: [
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -38,8 +38,4 @@ type Config struct {
|
|||
|
||||
// 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.
|
||||
// It is useful for debugging, avoids the repeated generation of the binary.
|
||||
Assets string `toml:",omitempty"`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,19 +16,17 @@
|
|||
|
||||
package dashboard
|
||||
|
||||
//go:generate npm --prefix ./assets install
|
||||
//go:generate ./assets/node_modules/.bin/webpack --config ./assets/webpack.config.js --context ./assets
|
||||
//go:generate go-bindata -nometadata -o assets.go -prefix assets -nocompress -pkg dashboard assets/dashboard.html assets/bundle.js
|
||||
//go:generate yarn --cwd ./assets install
|
||||
//go:generate yarn --cwd ./assets build
|
||||
//go:generate go-bindata -nometadata -o assets.go -prefix assets -nocompress -pkg dashboard assets/index.html assets/bundle.js
|
||||
//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 sh -c "sed 's#var _indexHtml#//nolint:misspell\\\n&#' assets.go > assets.go.tmp && mv assets.go.tmp assets.go"
|
||||
//go:generate gofmt -w -s assets.go
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"io/ioutil"
|
||||
"net"
|
||||
"net/http"
|
||||
"path/filepath"
|
||||
"runtime"
|
||||
"sync"
|
||||
"sync/atomic"
|
||||
|
|
@ -62,7 +60,7 @@ type Dashboard struct {
|
|||
|
||||
listener net.Listener
|
||||
conns map[uint32]*client // Currently live websocket connections
|
||||
charts *HomeMessage
|
||||
charts *SystemMessage
|
||||
commit string
|
||||
lock sync.RWMutex // Lock protecting the dashboard's internals
|
||||
|
||||
|
|
@ -84,7 +82,7 @@ func New(config *Config, commit string) (*Dashboard, error) {
|
|||
conns: make(map[uint32]*client),
|
||||
config: config,
|
||||
quit: make(chan chan error),
|
||||
charts: &HomeMessage{
|
||||
charts: &SystemMessage{
|
||||
ActiveMemory: emptyChartEntries(now, activeMemorySampleLimit, config.Refresh),
|
||||
VirtualMemory: emptyChartEntries(now, virtualMemorySampleLimit, config.Refresh),
|
||||
NetworkIngress: emptyChartEntries(now, networkIngressSampleLimit, config.Refresh),
|
||||
|
|
@ -180,18 +178,7 @@ func (db *Dashboard) webHandler(w http.ResponseWriter, r *http.Request) {
|
|||
|
||||
path := r.URL.String()
|
||||
if path == "/" {
|
||||
path = "/dashboard.html"
|
||||
}
|
||||
// If the path of the assets is manually set
|
||||
if db.config.Assets != "" {
|
||||
blob, err := ioutil.ReadFile(filepath.Join(db.config.Assets, path))
|
||||
if err != nil {
|
||||
log.Warn("Failed to read file", "path", path, "err", err)
|
||||
http.Error(w, "not found", http.StatusNotFound)
|
||||
return
|
||||
}
|
||||
w.Write(blob)
|
||||
return
|
||||
path = "/index.html"
|
||||
}
|
||||
blob, err := Asset(path[1:])
|
||||
if err != nil {
|
||||
|
|
@ -241,7 +228,7 @@ func (db *Dashboard) apiHandler(conn *websocket.Conn) {
|
|||
Version: fmt.Sprintf("v%d.%d.%d%s", params.VersionMajor, params.VersionMinor, params.VersionPatch, versionMeta),
|
||||
Commit: db.commit,
|
||||
},
|
||||
Home: &HomeMessage{
|
||||
System: &SystemMessage{
|
||||
ActiveMemory: db.charts.ActiveMemory,
|
||||
VirtualMemory: db.charts.VirtualMemory,
|
||||
NetworkIngress: db.charts.NetworkIngress,
|
||||
|
|
@ -277,6 +264,8 @@ func (db *Dashboard) collectData() {
|
|||
systemCPUUsage := gosigar.Cpu{}
|
||||
systemCPUUsage.Get()
|
||||
var (
|
||||
mem runtime.MemStats
|
||||
|
||||
prevNetworkIngress = metrics.DefaultRegistry.Get("p2p/InboundTraffic").(metrics.Meter).Count()
|
||||
prevNetworkEgress = metrics.DefaultRegistry.Get("p2p/OutboundTraffic").(metrics.Meter).Count()
|
||||
prevProcessCPUTime = getProcessCPUTime()
|
||||
|
|
@ -306,7 +295,7 @@ func (db *Dashboard) collectData() {
|
|||
deltaNetworkIngress = float64(curNetworkIngress - prevNetworkIngress)
|
||||
deltaNetworkEgress = float64(curNetworkEgress - prevNetworkEgress)
|
||||
deltaProcessCPUTime = curProcessCPUTime - prevProcessCPUTime
|
||||
deltaSystemCPUUsage = systemCPUUsage.Delta(prevSystemCPUUsage)
|
||||
deltaSystemCPUUsage = curSystemCPUUsage.Delta(prevSystemCPUUsage)
|
||||
deltaDiskRead = curDiskRead - prevDiskRead
|
||||
deltaDiskWrite = curDiskWrite - prevDiskWrite
|
||||
)
|
||||
|
|
@ -319,7 +308,6 @@ func (db *Dashboard) collectData() {
|
|||
|
||||
now := time.Now()
|
||||
|
||||
var mem runtime.MemStats
|
||||
runtime.ReadMemStats(&mem)
|
||||
activeMemory := &ChartEntry{
|
||||
Time: now,
|
||||
|
|
@ -363,7 +351,7 @@ func (db *Dashboard) collectData() {
|
|||
db.charts.DiskWrite = append(db.charts.DiskRead[1:], diskWrite)
|
||||
|
||||
db.sendToAll(&Message{
|
||||
Home: &HomeMessage{
|
||||
System: &SystemMessage{
|
||||
ActiveMemory: ChartEntries{activeMemory},
|
||||
VirtualMemory: ChartEntries{virtualMemory},
|
||||
NetworkIngress: ChartEntries{networkIngress},
|
||||
|
|
|
|||
|
|
@ -28,27 +28,20 @@ type Message struct {
|
|||
Logs *LogsMessage `json:"logs,omitempty"`
|
||||
}
|
||||
|
||||
type ChartEntries []*ChartEntry
|
||||
|
||||
type ChartEntry struct {
|
||||
Time time.Time `json:"time,omitempty"`
|
||||
Value float64 `json:"value,omitempty"`
|
||||
}
|
||||
|
||||
type GeneralMessage struct {
|
||||
Version string `json:"version,omitempty"`
|
||||
Commit string `json:"commit,omitempty"`
|
||||
}
|
||||
|
||||
type HomeMessage struct {
|
||||
ActiveMemory ChartEntries `json:"activeMemory,omitempty"`
|
||||
VirtualMemory ChartEntries `json:"virtualMemory,omitempty"`
|
||||
NetworkIngress ChartEntries `json:"networkIngress,omitempty"`
|
||||
NetworkEgress ChartEntries `json:"networkEgress,omitempty"`
|
||||
ProcessCPU ChartEntries `json:"processCPU,omitempty"`
|
||||
SystemCPU ChartEntries `json:"systemCPU,omitempty"`
|
||||
DiskRead ChartEntries `json:"diskRead,omitempty"`
|
||||
DiskWrite ChartEntries `json:"diskWrite,omitempty"`
|
||||
}
|
||||
|
||||
type ChartEntries []*ChartEntry
|
||||
|
||||
type ChartEntry struct {
|
||||
Time time.Time `json:"time,omitempty"`
|
||||
Value float64 `json:"value,omitempty"`
|
||||
/* TODO (kurkomisi) */
|
||||
}
|
||||
|
||||
type ChainMessage struct {
|
||||
|
|
@ -64,7 +57,14 @@ type NetworkMessage struct {
|
|||
}
|
||||
|
||||
type SystemMessage struct {
|
||||
/* TODO (kurkomisi) */
|
||||
ActiveMemory ChartEntries `json:"activeMemory,omitempty"`
|
||||
VirtualMemory ChartEntries `json:"virtualMemory,omitempty"`
|
||||
NetworkIngress ChartEntries `json:"networkIngress,omitempty"`
|
||||
NetworkEgress ChartEntries `json:"networkEgress,omitempty"`
|
||||
ProcessCPU ChartEntries `json:"processCPU,omitempty"`
|
||||
SystemCPU ChartEntries `json:"systemCPU,omitempty"`
|
||||
DiskRead ChartEntries `json:"diskRead,omitempty"`
|
||||
DiskWrite ChartEntries `json:"diskWrite,omitempty"`
|
||||
}
|
||||
|
||||
type LogsMessage struct {
|
||||
|
|
|
|||
Loading…
Reference in New Issue