forks/go-ethereum
1
0
Fork 1
mirror of https://github.com/ethereum/go-ethereum.git synced 2026-08-20 10:52:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

dashboard: update npm packages, improve UI, rebase

Browse source
This commit is contained in:
Kurkó Mihály 2019-05-27 23:51:33 +03:00
parent 6d6c0e69a8
commit 0f74ca792f
5 changed files with 11008 additions and 12534 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21830
dashboard/assets.go
View file

File diff suppressed because one or more lines are too long

297
dashboard/assets/components/Network.jsx
View file

@ -18,6 +18,7 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import withStyles from '@material-ui/core/styles/withStyles';
import Table from '@material-ui/core/Table'; import Table from '@material-ui/core/Table';
import TableHead from '@material-ui/core/TableHead'; import TableHead from '@material-ui/core/TableHead';
import TableBody from '@material-ui/core/TableBody'; import TableBody from '@material-ui/core/TableBody';
@ -27,10 +28,11 @@ import Grid from '@material-ui/core/Grid/Grid';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import {AreaChart, Area, Tooltip, YAxis} from 'recharts'; import {AreaChart, Area, Tooltip, YAxis} from 'recharts';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faCircle as fasCircle} from '@fortawesome/free-solid-svg-icons'; import {faCircle as fasCircle} from '@fortawesome/free-solid-svg-icons'; // More icons at fontawesome.com/icons
import {faCircle as farCircle} from '@fortawesome/free-regular-svg-icons'; import {faCircle as farCircle} from '@fortawesome/free-regular-svg-icons';
import {faClipboard as farClipboard} from '@fortawesome/free-regular-svg-icons';
import convert from 'color-convert'; import convert from 'color-convert';
import ScrollArea from 'react-scrollbar'; import {Scrollbars} from 'react-custom-scrollbars';
import CustomTooltip, {bytePlotter, multiplier} from 'CustomTooltip'; import CustomTooltip, {bytePlotter, multiplier} from 'CustomTooltip';
import type {Network as NetworkType, PeerEvent} from '../types/content'; import type {Network as NetworkType, PeerEvent} from '../types/content';
@ -386,7 +388,6 @@ const styles = {
marginLeft: 5, marginLeft: 5,
}, },
table: { table: {
background: '#212121',
borderCollapse: 'unset', borderCollapse: 'unset',
padding: 5, padding: 5,
}, },
@ -410,6 +411,16 @@ const styles = {
}, },
}; };
// themeStyles returns the styles generated from the theme for the component.
const themeStyles = theme => ({
title: {
color: theme.palette.common.white,
},
table: {
background: theme.palette.grey[900],
},
});
// limitedWidthStyle returns a style object which cuts the long text with three dots. // limitedWidthStyle returns a style object which cuts the long text with three dots.
const limitedWidthStyle = (width) => { const limitedWidthStyle = (width) => {
return { return {
@ -421,6 +432,7 @@ const limitedWidthStyle = (width) => {
}; };
export type Props = { export type Props = {
classes: Object, // injected by withStyles()
container: Object, container: Object,
content: NetworkType, content: NetworkType,
shouldUpdate: Object, shouldUpdate: Object,
@ -458,6 +470,49 @@ class Network extends Component<Props, State> {
}); });
}; };
lesList = () => {
const list = [];
Object.values(this.props.content.peers.bundles).forEach((bundle) => {
if (!bundle.knownPeers || Object.keys(bundle.knownPeers).length < 1) {
return;
}
Object.entries(bundle.knownPeers).forEach(([enode, peer]) => {
if (peer.les === '' || peer.eth !== '') {
return;
}
list.push({enode, name: peer.name, location: bundle.location, protocols: peer.protocols});
});
});
return list;
};
ethList = () => {
const list = [];
Object.values(this.props.content.peers.bundles).forEach((bundle) => {
if (!bundle.knownPeers || Object.keys(bundle.knownPeers).length < 1) {
return;
}
Object.entries(bundle.knownPeers).forEach(([enode, peer]) => {
if (peer.eth === '' && peer.les !== '') {
return;
}
list.push({enode, name: peer.name, location: bundle.location, protocols: peer.protocols});
});
});
return list;
};
attemptList = () => {
const list = [];
Object.entries(this.props.content.peers.bundles).forEach(([addr, bundle]) => {
if (!bundle.attempts) {
return;
}
list.push({addr, location: bundle.location, attempts: bundle.attempts});
});
return list;
};
knownPeerTableRow = (addr, enode, bundle, peer, showTraffic, proto) => { knownPeerTableRow = (addr, enode, bundle, peer, showTraffic, proto) => {
const ingressValues = peer.ingress.map(({value}) => ({ingress: value || 0.001})); const ingressValues = peer.ingress.map(({value}) => ({ingress: value || 0.001}));
const egressValues = peer.egress.map(({value}) => ({egress: -value || -0.001})); const egressValues = peer.egress.map(({value}) => ({egress: -value || -0.001}));
@ -500,95 +555,103 @@ class Network extends Component<Props, State> {
{bundle.shortLocation} {bundle.shortLocation}
</TableCell> </TableCell>
<TableCell style={styles.tableCell}> <TableCell style={styles.tableCell}>
<AreaChart {showTraffic ? (
width={trafficChartWidth} <>
height={trafficChartHeight} <AreaChart
data={ingressValues} width={trafficChartWidth}
margin={{top: 5, right: 5, bottom: 0, left: 5}} height={trafficChartHeight}
syncId={`peerIngress_${addr}_${enode}`} data={ingressValues}
> margin={{top: 5, right: 5, bottom: 0, left: 5}}
<defs> syncId={`peerIngress_${addr}_${enode}`}
<linearGradient id={`ingressGradient_${addr}_${enode}`} x1='0' y1='1' x2='0' y2='0'> >
{peer.ingressGradient <defs>
&& peer.ingressGradient.map(({offset, color}, i) => ( <linearGradient id={`ingressGradient_${addr}_${enode}`} x1='0' y1='1' x2='0' y2='0'>
<stop {peer.ingressGradient
key={`ingressStop_${addr}_${enode}_${i}`} && peer.ingressGradient.map(({offset, color}, i) => (
offset={`${offset}%`} <stop
stopColor={color} key={`ingressStop_${addr}_${enode}_${i}`}
/> offset={`${offset}%`}
))} stopColor={color}
</linearGradient> />
</defs> ))}
<Tooltip cursor={false} content={<CustomTooltip tooltip={bytePlotter('Download')} />} /> </linearGradient>
<YAxis hide scale='sqrt' domain={[0.001, dataMax => Math.max(dataMax, 0)]} /> </defs>
<Area <Tooltip cursor={false} content={<CustomTooltip tooltip={bytePlotter('Download')} />} />
dataKey='ingress' <YAxis hide scale='sqrt' domain={[0.001, dataMax => Math.max(dataMax, 0)]} />
isAnimationActive={false} <Area
type='monotone' dataKey='ingress'
fill={`url(#ingressGradient_${addr}_${enode})`} isAnimationActive={false}
stroke={peer.ingressGradient[peer.ingressGradient.length - 1].color} type='monotone'
strokeWidth={chartStrokeWidth} fill={`url(#ingressGradient_${addr}_${enode})`}
/> stroke={peer.ingressGradient[peer.ingressGradient.length - 1].color}
</AreaChart> strokeWidth={chartStrokeWidth}
<AreaChart />
width={trafficChartWidth} </AreaChart>
height={trafficChartHeight} <AreaChart
data={egressValues} width={trafficChartWidth}
margin={{top: 0, right: 5, bottom: 5, left: 5}} height={trafficChartHeight}
syncId={`peerIngress_${addr}_${enode}`} data={egressValues}
> margin={{top: 0, right: 5, bottom: 5, left: 5}}
<defs> syncId={`peerIngress_${addr}_${enode}`}
<linearGradient id={`egressGradient_${addr}_${enode}`} x1='0' y1='1' x2='0' y2='0'> >
{peer.egressGradient <defs>
&& peer.egressGradient.map(({offset, color}, i) => ( <linearGradient id={`egressGradient_${addr}_${enode}`} x1='0' y1='1' x2='0' y2='0'>
<stop {peer.egressGradient
key={`egressStop_${addr}_${enode}_${i}`} && peer.egressGradient.map(({offset, color}, i) => (
offset={`${offset}%`} <stop
stopColor={color} key={`egressStop_${addr}_${enode}_${i}`}
/> offset={`${offset}%`}
))} stopColor={color}
</linearGradient> />
</defs> ))}
<Tooltip cursor={false} content={<CustomTooltip tooltip={bytePlotter('Upload', multiplier(-1))} />} /> </linearGradient>
<YAxis hide scale='sqrt' domain={[dataMin => Math.min(dataMin, 0), -0.001]} /> </defs>
<Area <Tooltip cursor={false} content={<CustomTooltip tooltip={bytePlotter('Upload', multiplier(-1))} />} />
dataKey='egress' <YAxis hide scale='sqrt' domain={[dataMin => Math.min(dataMin, 0), -0.001]} />
isAnimationActive={false} <Area
type='monotone' dataKey='egress'
fill={`url(#egressGradient_${addr}_${enode})`} isAnimationActive={false}
stroke={peer.egressGradient[0].color} type='monotone'
strokeWidth={chartStrokeWidth} fill={`url(#egressGradient_${addr}_${enode})`}
/> stroke={peer.egressGradient[0].color}
</AreaChart> strokeWidth={chartStrokeWidth}
</TableCell> />
<TableCell </AreaChart>
style={{ </>
cursor: 'copy', ) : null}
...styles.tableCell,
...limitedWidthStyle(80),
}}
onClick={this.copyToClipboard(JSON.stringify(proto.head))}
>
{proto.head}
</TableCell>
<TableCell
style={{
cursor: 'copy',
...styles.tableCell,
}}
onClick={this.copyToClipboard(JSON.stringify(proto.difficulty))}
>
{proto.difficulty}
</TableCell>
<TableCell
style={{
cursor: 'copy',
...styles.tableCell,
}}
onClick={this.copyToClipboard(JSON.stringify(proto.version))}
>
{proto.version}
</TableCell> </TableCell>
{typeof proto === 'object' ? (
<>
<TableCell
style={{
cursor: 'copy',
...styles.tableCell,
...limitedWidthStyle(80),
}}
onClick={this.copyToClipboard(JSON.stringify(proto.head))}
>
{proto.head}
</TableCell>
<TableCell
style={{
cursor: 'copy',
...styles.tableCell,
}}
onClick={this.copyToClipboard(JSON.stringify(proto.difficulty))}
>
{proto.difficulty}
</TableCell>
<TableCell
style={{
cursor: 'copy',
...styles.tableCell,
}}
onClick={this.copyToClipboard(JSON.stringify(proto.version))}
>
{proto.version}
</TableCell>
</>
) : null }
</TableRow> </TableRow>
); );
}; };
@ -614,15 +677,21 @@ class Network extends Component<Props, State> {
); );
render() { render() {
const {classes} = this.props;
return ( return (
<Grid container direction='row' spacing={24}> <Grid container direction='row' spacing={3}>
<Grid item xs style={{width: '40%'}}> <Grid item style={{width: '40%'}}>
<div style={styles.table}> <div className={classes.table} style={styles.table}>
<Typography variant='subtitle1' gutterBottom style={styles.title}> <Typography variant='subtitle1' gutterBottom className={classes.title} style={styles.title}>
ETH peers ETH peers
<FontAwesomeIcon
icon={farClipboard}
onClick={this.copyToClipboard(JSON.stringify(this.ethList()))}
style={{float: 'right'}}
/>
</Typography> </Typography>
<ScrollArea speed={0.8} style={styles.content}> <Scrollbars style={styles.content}>
<Table style={styles.table}> <Table>
<TableHead style={styles.tableHead}> <TableHead style={styles.tableHead}>
<TableRow style={styles.tableRow}> <TableRow style={styles.tableRow}>
<TableCell style={styles.tableCell} /> <TableCell style={styles.tableCell} />
@ -668,16 +737,21 @@ class Network extends Component<Props, State> {
})} })}
</TableBody> </TableBody>
</Table> </Table>
</ScrollArea> </Scrollbars>
</div> </div>
</Grid> </Grid>
<Grid item xs style={{width: '40%'}}> <Grid item style={{width: '40%'}}>
<div style={styles.table}> <div className={classes.table} style={styles.table}>
<Typography variant='subtitle1' gutterBottom style={styles.title}> <Typography variant='subtitle1' gutterBottom className={classes.title} style={styles.title}>
LES peers LES peers
<FontAwesomeIcon
icon={farClipboard}
onClick={this.copyToClipboard(JSON.stringify(this.lesList()))}
style={{float: 'right'}}
/>
</Typography> </Typography>
<ScrollArea speed={0.8} style={styles.content}> <Scrollbars style={styles.content}>
<Table style={styles.table}> <Table>
<TableHead style={styles.tableHead}> <TableHead style={styles.tableHead}>
<TableRow style={styles.tableRow}> <TableRow style={styles.tableRow}>
<TableCell style={styles.tableCell} /> <TableCell style={styles.tableCell} />
@ -723,15 +797,20 @@ class Network extends Component<Props, State> {
})} })}
</TableBody> </TableBody>
</Table> </Table>
</ScrollArea> </Scrollbars>
</div> </div>
</Grid> </Grid>
<Grid item xs> <Grid item xs>
<div style={styles.table}> <div className={classes.table} style={styles.table}>
<Typography variant='subtitle1' gutterBottom style={styles.title}> <Typography variant='subtitle1' gutterBottom className={classes.title} style={styles.title}>
Connection attempts Connection attempts
<FontAwesomeIcon
icon={farClipboard}
onClick={this.copyToClipboard(JSON.stringify(this.attemptList()))}
style={{float: 'right'}}
/>
</Typography> </Typography>
<ScrollArea speed={0.8} style={styles.content}> <Scrollbars style={styles.content}>
<Table> <Table>
<TableHead style={styles.tableHead}> <TableHead style={styles.tableHead}>
<TableRow style={styles.tableRow}> <TableRow style={styles.tableRow}>
@ -757,7 +836,7 @@ class Network extends Component<Props, State> {
})} })}
</TableBody> </TableBody>
</Table> </Table>
</ScrollArea> </Scrollbars>
</div> </div>
</Grid> </Grid>
</Grid> </Grid>
@ -765,4 +844,4 @@ class Network extends Component<Props, State> {
} }
} }
export default Network; export default withStyles(themeStyles)(Network);

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

@ -47,10 +47,11 @@ const themeStyles = theme => ({
background: theme.palette.grey[900], background: theme.palette.grey[900],
}, },
listItem: { listItem: {
minWidth: theme.spacing.unit * 7, minWidth: theme.spacing(7),
color: theme.palette.common.white,
}, },
icon: { icon: {
fontSize: theme.spacing.unit * 3, fontSize: theme.spacing(3),
overflow: 'unset', overflow: 'unset',
}, },
}); });

61
dashboard/assets/package.json
View file

@ -1,55 +1,56 @@
{ {
"private": true, "private": true,
"dependencies": { "dependencies": {
"@babel/core": "7.3.4", "@babel/core": "7.4.5",
"@babel/plugin-proposal-class-properties": "7.3.4", "@babel/plugin-proposal-class-properties": "7.4.4",
"@babel/plugin-proposal-function-bind": "7.2.0", "@babel/plugin-proposal-function-bind": "7.2.0",
"@babel/plugin-transform-flow-strip-types": "7.3.4", "@babel/plugin-transform-flow-strip-types": "7.4.4",
"@babel/preset-env": "7.3.4", "@babel/preset-env": "7.4.5",
"@babel/preset-react": "^7.0.0", "@babel/preset-react": "^7.0.0",
"@babel/preset-stage-0": "^7.0.0", "@babel/preset-stage-0": "^7.0.0",
"@fortawesome/fontawesome-free-regular": "^5.0.13", "@fortawesome/fontawesome-free-regular": "^5.0.13",
"@fortawesome/fontawesome-svg-core": "^1.2.15", "@fortawesome/fontawesome-svg-core": "1.2.18",
"@fortawesome/free-regular-svg-icons": "^5.7.2", "@fortawesome/free-regular-svg-icons": "5.8.2",
"@fortawesome/free-solid-svg-icons": "^5.7.2", "@fortawesome/free-solid-svg-icons": "5.8.2",
"@fortawesome/react-fontawesome": "^0.1.4", "@fortawesome/react-fontawesome": "^0.1.4",
"@material-ui/core": "3.9.2", "@material-ui/core": "4.0.1",
"@material-ui/icons": "3.0.2", "@material-ui/icons": "4.0.1",
"babel-eslint": "10.0.1", "babel-eslint": "10.0.1",
"babel-loader": "8.0.5", "babel-loader": "8.0.6",
"classnames": "^2.2.6", "classnames": "^2.2.6",
"color-convert": "^2.0.0", "color-convert": "^2.0.0",
"css-loader": "2.1.1", "css-loader": "2.1.1",
"escape-html": "^1.0.3", "escape-html": "^1.0.3",
"eslint": "5.15.1", "eslint": "5.16.0",
"eslint-config-airbnb": "^17.0.0", "eslint-config-airbnb": "^17.0.0",
"eslint-loader": "2.1.2", "eslint-loader": "2.1.2",
"eslint-plugin-flowtype": "3.4.2", "eslint-plugin-flowtype": "3.9.1",
"eslint-plugin-import": "2.16.0", "eslint-plugin-import": "2.17.3",
"eslint-plugin-jsx-a11y": "6.2.1", "eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-node": "8.0.1", "eslint-plugin-node": "9.1.0",
"eslint-plugin-promise": "4.0.1", "eslint-plugin-promise": "4.1.1",
"eslint-plugin-react": "7.12.4", "eslint-plugin-react": "7.13.0",
"file-loader": "3.0.1", "file-loader": "3.0.1",
"flow-bin": "0.94.0", "flow-bin": "0.98.1",
"flow-bin-loader": "^1.0.3", "flow-bin-loader": "^1.0.3",
"flow-typed": "^2.5.1", "flow-typed": "2.5.2",
"js-beautify": "1.9.0", "js-beautify": "1.10.0",
"path": "^0.12.7", "path": "^0.12.7",
"react": "16.8.4", "react": "16.8.6",
"react-dom": "16.8.4", "react-custom-scrollbars": "^4.2.1",
"react-hot-loader": "4.8.0", "react-dom": "16.8.6",
"react-scrollbar": "^0.5.6", "react-hot-loader": "4.8.8",
"react-transition-group": "2.6.1", "react-scrollbar": "0.5.6",
"recharts": "1.5.0", "react-transition-group": "4.0.1",
"recharts": "1.6.2",
"style-loader": "0.23.1", "style-loader": "0.23.1",
"terser-webpack-plugin": "^1.2.3", "terser-webpack-plugin": "1.3.0",
"url": "^0.11.0", "url": "^0.11.0",
"url-loader": "1.1.2", "url-loader": "1.1.2",
"webpack": "4.29.6", "webpack": "4.32.2",
"webpack-cli": "3.2.3", "webpack-cli": "3.3.2",
"webpack-dashboard": "3.0.0", "webpack-dashboard": "3.0.7",
"webpack-dev-server": "3.2.1", "webpack-dev-server": "3.4.1",
"webpack-merge": "4.2.1" "webpack-merge": "4.2.1"
}, },
"scripts": { "scripts": {

1349
dashboard/assets/yarn.lock
View file

File diff suppressed because it is too large Load diff