roysc/plugeth
1
0
Fork 0
forked from cerc-io/plugeth
Code Pull Requests Activity

dashboard, p2p, vendor: visualize peers (#19247)

Browse Source 
* dashboard, p2p: visualize peers

* dashboard: change scale to green to red
This commit is contained in:
Kurkó Mihály
2019-03-13 14:53:52 +02:00
committed by Péter Szilágyi
parent 1591b63306
commit 1a29bf0ee2
66 changed files with 48806 additions and 42924 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/assets/.eslintignore
+3
View File
@@ -0,0 +1,3 @@
node_modules/* #ignored by default
flow-typed/*
bundle.js
dashboard/assets/.eslintrc
+51 -56
View File
@@ -16,71 +16,66 @@
// React syntax style mostly according to https://github.com/airbnb/javascript/tree/master/react
{
'env': {
'browser': true,
'node': true,
'es6': true,
"env": {
"browser": true,
"node": true,
"es6": true
},
'parser': 'babel-eslint',
'parserOptions': {
'sourceType': 'module',
'ecmaVersion': 6,
'ecmaFeatures': {
'jsx': true,
"parser": "babel-eslint",
"parserOptions": {
"sourceType": "module",
"ecmaVersion": 6,
"ecmaFeatures": {
"jsx": true
}
},
'extends': 'airbnb',
'plugins': [
'flowtype',
'react',
"extends": [
"eslint:recommended",
"airbnb",
"plugin:flowtype/recommended",
"plugin:react/recommended"
],
'rules': {
'no-tabs': 'off',
'indent': ['error', 'tab'],
'react/jsx-indent': ['error', 'tab'],
'react/jsx-indent-props': ['error', 'tab'],
'react/prefer-stateless-function': 'off',
'jsx-quotes': ['error', 'prefer-single'],
'no-plusplus': 'off',
'no-console': ['error', { allow: ['error'] }],
"plugins": [
"flowtype",
"react"
],
"rules": {
"no-tabs": "off",
"indent": ["error", "tab"],
"react/jsx-indent": ["error", "tab"],
"react/jsx-indent-props": ["error", "tab"],
"react/prefer-stateless-function": "off",
"react/destructuring-assignment": ["error", "always", {"ignoreClassFields": true}],
"jsx-quotes": ["error", "prefer-single"],
"no-plusplus": "off",
"no-console": ["error", { "allow": ["error"] }],
// Specifies the maximum length of a line.
'max-len': ['warn', 120, 2, {
'ignoreUrls': true,
'ignoreComments': false,
'ignoreRegExpLiterals': true,
'ignoreStrings': true,
'ignoreTemplateLiterals': true,
"max-len": ["warn", 120, 2, {
"ignoreUrls": true,
"ignoreComments": false,
"ignoreRegExpLiterals": true,
"ignoreStrings": true,
"ignoreTemplateLiterals": true
}],
// Enforces consistent spacing between keys and values in object literal properties.
'key-spacing': ['error', {'align': {
'beforeColon': false,
'afterColon': true,
'on': 'value'
"key-spacing": ["error", {"align": {
"beforeColon": false,
"afterColon": true,
"on": "value"
}}],
// Prohibits padding inside curly braces.
'object-curly-spacing': ['error', 'never'],
'no-use-before-define': 'off', // messageAPI
'default-case': 'off',
'flowtype/boolean-style': ['error', 'boolean'],
'flowtype/define-flow-type': 'warn',
'flowtype/generic-spacing': ['error', 'never'],
'flowtype/no-primitive-constructor-types': 'error',
'flowtype/no-weak-types': 'error',
'flowtype/object-type-delimiter': ['error', 'comma'],
'flowtype/require-valid-file-annotation': 'error',
'flowtype/semi': ['error', 'always'],
'flowtype/space-after-type-colon': ['error', 'always'],
'flowtype/space-before-generic-bracket': ['error', 'never'],
'flowtype/space-before-type-colon': ['error', 'never'],
'flowtype/union-intersection-spacing': ['error', 'always'],
'flowtype/use-flow-type': 'warn',
'flowtype/valid-syntax': 'warn',
"object-curly-spacing": ["error", "never"],
"no-use-before-define": "off", // message types
"default-case": "off"
},
'settings': {
'flowtype': {
'onlyFilesWithFlowAnnotation': true,
"settings": {
"import/resolver": {
"node": {
"paths": ["components"] // import './components/Component' -> import 'Component'
}
},
"flowtype": {
"onlyFilesWithFlowAnnotation": true
}
},
}
}
dashboard/assets/.flowconfig
+2
View File
@@ -7,3 +7,5 @@ node_modules/jss/flow-typed
[options]
include_warnings=true
module.system.node.resolve_dirname=node_modules
module.system.node.resolve_dirname=components
dashboard/assets/common.jsx
+27 -6
View File
@@ -16,43 +16,46 @@
// 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 {faHome, faLink, faGlobeEurope, faTachometerAlt, faList} from '@fortawesome/free-solid-svg-icons';
import {faCreditCard} from '@fortawesome/free-regular-svg-icons';
type ProvidedMenuProp = {|title: string, icon: string|};
const menuSkeletons: Array<{|id: string, menu: ProvidedMenuProp|}> = [
{
id: 'home',
menu: {
title: 'Home',
icon: 'home',
icon: faHome,
},
}, {
id: 'chain',
menu: {
title: 'Chain',
icon: 'link',
icon: faLink,
},
}, {
id: 'txpool',
menu: {
title: 'TxPool',
icon: 'credit-card',
icon: faCreditCard,
},
}, {
id: 'network',
menu: {
title: 'Network',
icon: 'globe',
icon: faGlobeEurope,
},
}, {
id: 'system',
menu: {
title: 'System',
icon: 'tachometer',
icon: faTachometerAlt,
},
}, {
id: 'logs',
menu: {
title: 'Logs',
icon: 'list',
icon: faList,
},
},
];
@@ -64,8 +67,26 @@ export const MENU: Map<string, {...MenuProp}> = new Map(menuSkeletons.map(({id,
export const DURATION = 200;
export const chartStrokeWidth = 0.2;
export const styles = {
light: {
color: 'rgba(255, 255, 255, 0.54)',
},
};
// unit contains the units for the bytePlotter.
export const unit = ['', 'Ki', 'Mi', 'Gi', 'Ti', 'Pi', 'Ei', 'Zi', 'Yi'];
// simplifyBytes returns the simplified version of the given value followed by the unit.
export const simplifyBytes = (x: number) => {
let i = 0;
for (; x > 1024 && i < 8; i++) {
x /= 1024;
}
return x.toFixed(2).toString().concat(' ', unit[i], 'B');
};
// hues contains predefined colors for gradient stop colors.
export const hues = ['#00FF00', '#FFFF00', '#FF7F00', '#FF0000'];
export const hueScale = [0, 2048, 102400, 2097152];
dashboard/assets/components/ChartRow.jsx
+2 -2
View File
@@ -19,7 +19,7 @@
import React, {Component} from 'react';
import type {ChildrenArray} from 'react';
import Grid from 'material-ui/Grid';
import Grid from '@material-ui/core/Grid';
// styles contains the constant styles of the component.
const styles = {
@@ -33,7 +33,7 @@ const styles = {
flex: 1,
padding: 0,
},
}
};
export type Props = {
children: ChildrenArray<React$Element<any>>,
dashboard/assets/components/CustomTooltip.jsx
+4 -15
View File
@@ -18,8 +18,8 @@
import React, {Component} from 'react';
import Typography from 'material-ui/Typography';
import {styles} from '../common';
import Typography from '@material-ui/core/Typography';
import {styles, simplifyBytes} from '../common';
// multiplier multiplies a number by another.
export const multiplier = <T>(by: number = 1) => (x: number) => x * by;
@@ -37,18 +37,6 @@ export const percentPlotter = <T>(text: string, mapper: (T => T) = multiplier(1)
);
};
// unit contains the units for the bytePlotter.
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 < 8; i++) {
x /= 1024;
}
return x.toFixed(2).toString().concat(' ', unit[i], 'B');
};
// bytePlotter renders a tooltip, which displays the payload as a byte value.
export const bytePlotter = <T>(text: string, mapper: (T => T) = multiplier(1)) => (payload: T) => {
const p = mapper(payload);
@@ -70,7 +58,8 @@ export const bytePerSecPlotter = <T>(text: string, mapper: (T => T) = multiplier
}
return (
<Typography type='caption' color='inherit'>
<span style={styles.light}>{text}</span> {simplifyBytes(p)}/s
<span style={styles.light}>{text}</span>
{simplifyBytes(p)}/s
</Typography>
);
};
dashboard/assets/components/Dashboard.jsx
+19 -13
View File
@@ -17,14 +17,16 @@
// along with the go-ethereum library. If not, see <http://www.gnu.org/licenses/>.
import React, {Component} from 'react';
import {hot} from 'react-hot-loader';
import withStyles from 'material-ui/styles/withStyles';
import withStyles from '@material-ui/core/styles/withStyles';
import Header from './Header';
import Body from './Body';
import Header from 'Header';
import Body from 'Body';
import {inserter as logInserter, SAME} from 'Logs';
import {inserter as peerInserter} from 'Network';
import {MENU} from '../common';
import type {Content} from '../types/content';
import {inserter as logInserter} from './Logs';
// deepUpdate updates an object corresponding to the given update data, which has
// the shape of the same structure as the original object. updater also has the same
@@ -37,7 +39,6 @@ import {inserter as logInserter} from './Logs';
// of the update.
const deepUpdate = (updater: Object, update: Object, prev: Object): $Shape<Content> => {
if (typeof update === 'undefined') {
// TODO (kurkomisi): originally this was deep copy, investigate it.
return prev;
}
if (typeof updater === 'function') {
@@ -88,8 +89,13 @@ const defaultContent: () => Content = () => ({
home: {},
chain: {},
txpool: {},
network: {},
system: {
network: {
peers: {
bundles: {},
},
diff: [],
},
system: {
activeMemory: [],
virtualMemory: [],
networkIngress: [],
@@ -103,8 +109,8 @@ const defaultContent: () => Content = () => ({
chunks: [],
endTop: false,
endBottom: true,
topChanged: 0,
bottomChanged: 0,
topChanged: SAME,
bottomChanged: SAME,
},
});
@@ -119,7 +125,7 @@ const updaters = {
home: null,
chain: null,
txpool: null,
network: null,
network: peerInserter(200),
system: {
activeMemory: appender(200),
virtualMemory: appender(200),
@@ -186,8 +192,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 = () => {
// PROD is defined by webpack.
const server = new WebSocket(`${((window.location.protocol === 'https:') ? 'wss://' : 'ws://')}${PROD ? window.location.host : 'localhost:8080'}/api`);
const host = process.env.NODE_ENV === 'production' ? window.location.host : 'localhost:8080';
const server = new WebSocket(`${((window.location.protocol === 'https:') ? 'wss://' : 'ws://')}${host}/api`);
server.onopen = () => {
this.setState({content: defaultContent(), shouldUpdate: {}, server});
};
@@ -249,4 +255,4 @@ class Dashboard extends Component<Props, State> {
}
}
export default withStyles(themeStyles)(Dashboard);
export default hot(module)(withStyles(themeStyles)(Dashboard));
dashboard/assets/components/Footer.jsx
+54 -22
View File
@@ -18,14 +18,19 @@
import React, {Component} from 'react';
import withStyles from 'material-ui/styles/withStyles';
import Typography from 'material-ui/Typography';
import Grid from 'material-ui/Grid';
import {ResponsiveContainer, AreaChart, Area, Tooltip} from 'recharts';
import withStyles from '@material-ui/core/styles/withStyles';
import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';
import ResponsiveContainer from 'recharts/es6/component/ResponsiveContainer';
import AreaChart from 'recharts/es6/chart/AreaChart';
import Area from 'recharts/es6/cartesian/Area';
import ReferenceLine from 'recharts/es6/cartesian/ReferenceLine';
import Label from 'recharts/es6/component/Label';
import Tooltip from 'recharts/es6/component/Tooltip';
import ChartRow from './ChartRow';
import CustomTooltip, {bytePlotter, bytePerSecPlotter, percentPlotter, multiplier} from './CustomTooltip';
import {styles as commonStyles} from '../common';
import ChartRow from 'ChartRow';
import CustomTooltip, {bytePlotter, bytePerSecPlotter, percentPlotter, multiplier} from 'CustomTooltip';
import {chartStrokeWidth, styles as commonStyles} from '../common';
import type {General, System} from '../types/content';
const FOOTER_SYNC_ID = 'footerSyncId';
@@ -38,6 +43,15 @@ const TRAFFIC = 'traffic';
const TOP = 'Top';
const BOTTOM = 'Bottom';
const cpuLabelTop = 'Process load';
const cpuLabelBottom = 'System load';
const memoryLabelTop = 'Active memory';
const memoryLabelBottom = 'Virtual memory';
const diskLabelTop = 'Disk read';
const diskLabelBottom = 'Disk write';
const trafficLabelTop = 'Download';
const trafficLabelBottom = 'Upload';
// styles contains the constant styles of the component.
const styles = {
footer: {
@@ -53,6 +67,10 @@ const styles = {
height: '100%',
width: '99%',
},
link: {
color: 'inherit',
textDecoration: 'none',
},
};
// themeStyles returns the styles generated from the theme for the component.
@@ -73,18 +91,23 @@ export type Props = {
shouldUpdate: Object,
};
type State = {};
// Footer renders the footer of the dashboard.
class Footer extends Component<Props> {
shouldComponentUpdate(nextProps) {
class Footer extends Component<Props, State> {
shouldComponentUpdate(nextProps: Readonly<Props>, nextState: Readonly<State>, nextContext: any) {
return typeof nextProps.shouldUpdate.general !== 'undefined' || typeof nextProps.shouldUpdate.system !== 'undefined';
}
// halfHeightChart renders an area chart with half of the height of its parent.
halfHeightChart = (chartProps, tooltip, areaProps) => (
halfHeightChart = (chartProps, tooltip, areaProps, label, position) => (
<ResponsiveContainer width='100%' height='50%'>
<AreaChart {...chartProps} >
<AreaChart {...chartProps}>
{!tooltip || (<Tooltip cursor={false} content={<CustomTooltip tooltip={tooltip} />} />)}
<Area isAnimationActive={false} type='monotone' {...areaProps} />
<Area isAnimationActive={false} strokeWidth={chartStrokeWidth} type='monotone' {...areaProps} />
<ReferenceLine x={0} strokeWidth={0}>
<Label fill={areaProps.fill} value={label} position={position} />
</ReferenceLine>
</AreaChart>
</ResponsiveContainer>
);
@@ -111,6 +134,8 @@ class Footer extends Component<Props> {
},
topChart.tooltip,
{dataKey: topKey, stroke: topColor, fill: topColor},
topChart.label,
'insideBottomLeft',
)}
{this.halfHeightChart(
{
@@ -120,6 +145,8 @@ class Footer extends Component<Props> {
},
bottomChart.tooltip,
{dataKey: bottomKey, stroke: bottomColor, fill: bottomColor},
bottomChart.label,
'insideTopLeft',
)}
</div>
);
@@ -135,37 +162,42 @@ class Footer extends Component<Props> {
{this.doubleChart(
FOOTER_SYNC_ID,
CPU,
{data: system.processCPU, tooltip: percentPlotter('Process load')},
{data: system.systemCPU, tooltip: percentPlotter('System load', multiplier(-1))},
{data: system.processCPU, tooltip: percentPlotter(cpuLabelTop), label: cpuLabelTop},
{data: system.systemCPU, tooltip: percentPlotter(cpuLabelBottom, multiplier(-1)), label: cpuLabelBottom},
)}
{this.doubleChart(
FOOTER_SYNC_ID,
MEMORY,
{data: system.activeMemory, tooltip: bytePlotter('Active memory')},
{data: system.virtualMemory, tooltip: bytePlotter('Virtual memory', multiplier(-1))},
{data: system.activeMemory, tooltip: bytePlotter(memoryLabelTop), label: memoryLabelTop},
{data: system.virtualMemory, tooltip: bytePlotter(memoryLabelBottom, multiplier(-1)), label: memoryLabelBottom},
)}
{this.doubleChart(
FOOTER_SYNC_ID,
DISK,
{data: system.diskRead, tooltip: bytePerSecPlotter('Disk read')},
{data: system.diskWrite, tooltip: bytePerSecPlotter('Disk write', multiplier(-1))},
{data: system.diskRead, tooltip: bytePerSecPlotter(diskLabelTop), label: diskLabelTop},
{data: system.diskWrite, tooltip: bytePerSecPlotter(diskLabelBottom, multiplier(-1)), label: diskLabelBottom},
)}
{this.doubleChart(
FOOTER_SYNC_ID,
TRAFFIC,
{data: system.networkIngress, tooltip: bytePerSecPlotter('Download')},
{data: system.networkEgress, tooltip: bytePerSecPlotter('Upload', multiplier(-1))},
{data: system.networkIngress, tooltip: bytePerSecPlotter(trafficLabelTop), label: trafficLabelTop},
{data: system.networkEgress, tooltip: bytePerSecPlotter(trafficLabelBottom, multiplier(-1)), label: trafficLabelBottom},
)}
</ChartRow>
</Grid>
<Grid item >
<Grid item>
<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'}} >
<a
href={`https://github.com/ethereum/go-ethereum/commit/${general.commit}`}
target='_blank'
rel='noopener noreferrer'
style={styles.link}
>
{general.commit.substring(0, 8)}
</a>
</Typography>
dashboard/assets/components/Header.jsx
+8 -10
View File
@@ -18,13 +18,13 @@
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 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 withStyles from '@material-ui/core/styles/withStyles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faBars} from '@fortawesome/free-solid-svg-icons';
import Typography from '@material-ui/core/Typography';
// styles contains the constant styles of the component.
const styles = {
@@ -67,9 +67,7 @@ class Header extends Component<Props> {
<AppBar position='static' className={classes.header} style={styles.header}>
<Toolbar className={classes.toolbar} style={styles.toolbar}>
<IconButton onClick={this.props.switchSideBar}>
<Icon>
<MenuIcon />
</Icon>
<FontAwesomeIcon icon={faBars} />
</IconButton>
<Typography type='title' color='inherit' noWrap className={classes.title}>
Go Ethereum Dashboard
dashboard/assets/components/Logs.jsx
+9 -8
View File
@@ -18,7 +18,8 @@
import React, {Component} from 'react';
import List, {ListItem} from 'material-ui/List';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import escapeHtml from 'escape-html';
import type {Record, Content, LogsMessage, Logs as LogsType} from '../types/content';
@@ -104,9 +105,9 @@ const createChunk = (records: Array<Record>) => {
// ADDED, SAME and REMOVED are used to track the change of the log chunk array.
// The scroll position is set using these values.
const ADDED = 1;
const SAME = 0;
const REMOVED = -1;
export const ADDED = 1;
export const SAME = 0;
export const REMOVED = -1;
// inserter is a state updater function for the main component, which inserts the new log chunk into the chunk array.
// limit is the maximum length of the chunk array, used in order to prevent the browser from OOM.
@@ -166,7 +167,7 @@ export const inserter = (limit: number) => (update: LogsMessage, prev: LogsType)
// styles contains the constant styles of the component.
const styles = {
logListItem: {
padding: 0,
padding: 0,
lineHeight: 1.231,
},
logChunk: {
@@ -251,15 +252,15 @@ class Logs extends Component<Props, State> {
// atBottom checks if the scroll position it at the bottom of the container.
atBottom = () => {
const {container} = this.props;
return container.scrollHeight - container.scrollTop <=
container.clientHeight + container.scrollHeight * requestBand;
return container.scrollHeight - container.scrollTop
<= container.clientHeight + container.scrollHeight * requestBand;
};
// beforeUpdate is called by the parent component, saves the previous scroll position
// and the height of the first log chunk, which can be deleted during the insertion.
beforeUpdate = () => {
let firstHeight = 0;
let chunkList = this.content.children[1];
const chunkList = this.content.children[1];
if (chunkList && chunkList.children[0]) {
firstHeight = chunkList.children[0].clientHeight;
}
dashboard/assets/components/Main.jsx
+26 -12
View File
@@ -18,11 +18,12 @@
import React, {Component} from 'react';
import withStyles from 'material-ui/styles/withStyles';
import withStyles from '@material-ui/core/styles/withStyles';
import Network from 'Network';
import Logs from 'Logs';
import Footer from 'Footer';
import {MENU} from '../common';
import Logs from './Logs';
import Footer from './Footer';
import type {Content} from '../types/content';
// styles contains the constant styles of the component.
@@ -33,7 +34,7 @@ const styles = {
width: '100%',
},
content: {
flex: 1,
flex: 1,
overflow: 'auto',
},
};
@@ -54,21 +55,16 @@ export type Props = {
send: string => void,
};
type State = {};
// Main renders the chosen content.
class Main extends Component<Props> {
class Main extends Component<Props, State> {
constructor(props) {
super(props);
this.container = React.createRef();
this.content = React.createRef();
}
getSnapshotBeforeUpdate() {
if (this.content && typeof this.content.beforeUpdate === 'function') {
return this.content.beforeUpdate();
}
return null;
}
componentDidUpdate(prevProps, prevState, snapshot) {
if (this.content && typeof this.content.didUpdate === 'function') {
this.content.didUpdate(prevProps, prevState, snapshot);
@@ -81,6 +77,13 @@ class Main extends Component<Props> {
}
};
getSnapshotBeforeUpdate(prevProps: Readonly<P>, prevState: Readonly<S>) {
if (this.content && typeof this.content.beforeUpdate === 'function') {
return this.content.beforeUpdate();
}
return null;
}
render() {
const {
classes, active, content, shouldUpdate,
@@ -89,9 +92,20 @@ class Main extends Component<Props> {
let children = null;
switch (active) {
case MENU.get('home').id:
children = <div>Work in progress.</div>;
break;
case MENU.get('chain').id:
children = <div>Work in progress.</div>;
break;
case MENU.get('txpool').id:
children = <div>Work in progress.</div>;
break;
case MENU.get('network').id:
children = <Network
content={this.props.content.network}
container={this.container}
/>;
break;
case MENU.get('system').id:
children = <div>Work in progress.</div>;
break;
dashboard/assets/components/Network.jsx
+529
View File
@@ -0,0 +1,529 @@
// @flow
// Copyright 2018 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 Table from '@material-ui/core/Table';
import TableHead from '@material-ui/core/TableHead';
import TableBody from '@material-ui/core/TableBody';
import TableRow from '@material-ui/core/TableRow';
import TableCell from '@material-ui/core/TableCell';
import Grid from '@material-ui/core/Grid/Grid';
import Typography from '@material-ui/core/Typography';
import {AreaChart, Area, Tooltip, YAxis} from 'recharts';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faCircle as fasCircle} from '@fortawesome/free-solid-svg-icons';
import {faCircle as farCircle} from '@fortawesome/free-regular-svg-icons';
import convert from 'color-convert';
import CustomTooltip, {bytePlotter, multiplier} from 'CustomTooltip';
import type {Network as NetworkType, PeerEvent} from '../types/content';
import {styles as commonStyles, chartStrokeWidth, hues, hueScale} from '../common';
// Peer chart dimensions.
const trafficChartHeight = 18;
const trafficChartWidth = 400;
// setMaxIngress adjusts the peer chart's gradient values based on the given value.
const setMaxIngress = (peer, value) => {
peer.maxIngress = value;
peer.ingressGradient = [];
peer.ingressGradient.push({offset: hueScale[0], color: hues[0]});
let i = 1;
for (; i < hues.length && value > hueScale[i]; i++) {
peer.ingressGradient.push({offset: Math.floor(hueScale[i] * 100 / value), color: hues[i]});
}
i--;
if (i < hues.length - 1) {
// Usually the maximum value gets between two points on the predefined
// color scale (e.g. 123KB is somewhere between 100KB (#FFFF00) and
// 1MB (#FF0000)), and the charts need to be comparable by the colors,
// so we have to calculate the last hue using the maximum value and the
// surrounding hues in order to avoid the uniformity of the top colors
// on the charts. For this reason the two hues are translated into the
// CIELAB color space, and the top color will be their weighted average
// (CIELAB is perceptually uniform, meaning that any point on the line
// between two pure color points is also a pure color, so the weighted
// average will not lose from the saturation).
//
// In case the maximum value is greater than the biggest predefined
// scale value, the top of the chart will have uniform color.
const lastHue = convert.hex.lab(hues[i]);
const proportion = (value - hueScale[i]) * 100 / (hueScale[i + 1] - hueScale[i]);
convert.hex.lab(hues[i + 1]).forEach((val, j) => {
lastHue[j] = (lastHue[j] * proportion + val * (100 - proportion)) / 100;
});
peer.ingressGradient.push({offset: 100, color: `#${convert.lab.hex(lastHue)}`});
}
};
// setMaxEgress adjusts the peer chart's gradient values based on the given value.
// In case of the egress the chart is upside down, so the gradients need to be
// calculated inversely compared to the ingress.
const setMaxEgress = (peer, value) => {
peer.maxEgress = value;
peer.egressGradient = [];
peer.egressGradient.push({offset: 100 - hueScale[0], color: hues[0]});
let i = 1;
for (; i < hues.length && value > hueScale[i]; i++) {
peer.egressGradient.unshift({offset: 100 - Math.floor(hueScale[i] * 100 / value), color: hues[i]});
}
i--;
if (i < hues.length - 1) {
// Calculate the last hue.
const lastHue = convert.hex.lab(hues[i]);
const proportion = (value - hueScale[i]) * 100 / (hueScale[i + 1] - hueScale[i]);
convert.hex.lab(hues[i + 1]).forEach((val, j) => {
lastHue[j] = (lastHue[j] * proportion + val * (100 - proportion)) / 100;
});
peer.egressGradient.unshift({offset: 0, color: `#${convert.lab.hex(lastHue)}`});
}
};
// setIngressChartAttributes searches for the maximum value of the ingress
// samples, and adjusts the peer chart's gradient values accordingly.
const setIngressChartAttributes = (peer) => {
let max = 0;
peer.ingress.forEach(({value}) => {
if (value > max) {
max = value;
}
});
setMaxIngress(peer, max);
};
// setEgressChartAttributes searches for the maximum value of the egress
// samples, and adjusts the peer chart's gradient values accordingly.
const setEgressChartAttributes = (peer) => {
let max = 0;
peer.egress.forEach(({value}) => {
if (value > max) {
max = value;
}
});
setMaxEgress(peer, max);
};
// inserter is a state updater function for the main component, which handles the peers.
export const inserter = (sampleLimit: number) => (update: NetworkType, prev: NetworkType) => {
// The first message contains the metered peer history.
if (update.peers && update.peers.bundles) {
prev.peers = update.peers;
Object.values(prev.peers.bundles).forEach((bundle) => {
if (bundle.knownPeers) {
Object.values(bundle.knownPeers).forEach((peer) => {
if (!peer.maxIngress) {
setIngressChartAttributes(peer);
}
if (!peer.maxEgress) {
setEgressChartAttributes(peer);
}
});
}
});
}
if (Array.isArray(update.diff)) {
update.diff.forEach((event: PeerEvent) => {
if (!event.ip) {
console.error('Peer event without IP', event);
return;
}
switch (event.remove) {
case 'bundle': {
delete prev.peers.bundles[event.ip];
return;
}
case 'known': {
if (!event.id) {
console.error('Remove known peer event without ID', event.ip);
return;
}
const bundle = prev.peers.bundles[event.ip];
if (!bundle || !bundle.knownPeers || !bundle.knownPeers[event.id]) {
console.error('No known peer to remove', event.ip, event.id);
return;
}
delete bundle.knownPeers[event.id];
return;
}
case 'attempt': {
const bundle = prev.peers.bundles[event.ip];
if (!bundle || !Array.isArray(bundle.attempts) || bundle.attempts.length < 1) {
console.error('No unknown peer to remove', event.ip);
return;
}
bundle.attempts.splice(0, 1);
return;
}
}
if (!prev.peers.bundles[event.ip]) {
prev.peers.bundles[event.ip] = {
location: {
country: '',
city: '',
latitude: 0,
longitude: 0,
},
knownPeers: {},
attempts: [],
};
}
const bundle = prev.peers.bundles[event.ip];
if (event.location) {
bundle.location = event.location;
return;
}
if (!event.id) {
if (!bundle.attempts) {
bundle.attempts = [];
}
bundle.attempts.push({
connected: event.connected,
disconnected: event.disconnected,
});
return;
}
if (!bundle.knownPeers) {
bundle.knownPeers = {};
}
if (!bundle.knownPeers[event.id]) {
bundle.knownPeers[event.id] = {
connected: [],
disconnected: [],
ingress: [],
egress: [],
active: false,
};
}
const peer = bundle.knownPeers[event.id];
if (!peer.maxIngress) {
setIngressChartAttributes(peer);
}
if (!peer.maxEgress) {
setEgressChartAttributes(peer);
}
if (event.connected) {
if (!peer.connected) {
console.warn('peer.connected should exist');
peer.connected = [];
}
peer.connected.push(event.connected);
}
if (event.disconnected) {
if (!peer.disconnected) {
console.warn('peer.disconnected should exist');
peer.disconnected = [];
}
peer.disconnected.push(event.disconnected);
}
switch (event.activity) {
case 'active':
peer.active = true;
break;
case 'inactive':
peer.active = false;
break;
}
if (Array.isArray(event.ingress) && Array.isArray(event.egress)) {
if (event.ingress.length !== event.egress.length) {
console.error('Different traffic sample length', event);
return;
}
// Check if there is a new maximum value, and reset the colors in case.
let maxIngress = peer.maxIngress;
event.ingress.forEach(({value}) => {
if (value > maxIngress) {
maxIngress = value;
}
});
if (maxIngress > peer.maxIngress) {
setMaxIngress(peer, maxIngress);
}
// Push the new values.
peer.ingress.splice(peer.ingress.length, 0, ...event.ingress);
const ingressDiff = peer.ingress.length - sampleLimit;
if (ingressDiff > 0) {
// Check if the maximum value is in the beginning.
let i = 0;
while (i < ingressDiff && peer.ingress[i].value < peer.maxIngress) {
i++;
}
// Remove the old values from the beginning.
peer.ingress.splice(0, ingressDiff);
if (i < ingressDiff) {
// Reset the colors if the maximum value leaves the chart.
setIngressChartAttributes(peer);
}
}
// Check if there is a new maximum value, and reset the colors in case.
let maxEgress = peer.maxEgress;
event.egress.forEach(({value}) => {
if (value > maxEgress) {
maxEgress = value;
}
});
if (maxEgress > peer.maxEgress) {
setMaxEgress(peer, maxEgress);
}
// Push the new values.
peer.egress.splice(peer.egress.length, 0, ...event.egress);
const egressDiff = peer.egress.length - sampleLimit;
if (egressDiff > 0) {
// Check if the maximum value is in the beginning.
let i = 0;
while (i < egressDiff && peer.egress[i].value < peer.maxEgress) {
i++;
}
// Remove the old values from the beginning.
peer.egress.splice(0, egressDiff);
if (i < egressDiff) {
// Reset the colors if the maximum value leaves the chart.
setEgressChartAttributes(peer);
}
}
}
});
}
return prev;
};
// styles contains the constant styles of the component.
const styles = {
tableHead: {
height: 'auto',
},
tableRow: {
height: 'auto',
},
tableCell: {
paddingTop: 0,
paddingRight: 5,
paddingBottom: 0,
paddingLeft: 5,
border: 'none',
},
};
export type Props = {
container: Object,
content: NetworkType,
shouldUpdate: Object,
};
type State = {};
// Network renders the network page.
class Network extends Component<Props, State> {
componentDidMount() {
const {container} = this.props;
if (typeof container === 'undefined') {
return;
}
container.scrollTop = 0;
}
formatTime = (t: string) => {
const time = new Date(t);
if (isNaN(time)) {
return '';
}
const month = `0${time.getMonth() + 1}`.slice(-2);
const date = `0${time.getDate()}`.slice(-2);
const hours = `0${time.getHours()}`.slice(-2);
const minutes = `0${time.getMinutes()}`.slice(-2);
const seconds = `0${time.getSeconds()}`.slice(-2);
return `${month}/${date}/${hours}:${minutes}:${seconds}`;
};
copyToClipboard = (id) => (event) => {
event.preventDefault();
navigator.clipboard.writeText(id).then(() => {}, () => {
console.error("Failed to copy node id", id);
});
};
peerTableRow = (ip, id, bundle, peer) => {
const ingressValues = peer.ingress.map(({value}) => ({ingress: value || 0.001}));
const egressValues = peer.egress.map(({value}) => ({egress: -value || -0.001}));
return (
<TableRow key={`known_${ip}_${id}`} style={styles.tableRow}>
<TableCell style={styles.tableCell}>
{peer.active
? <FontAwesomeIcon icon={fasCircle} color='green' />
: <FontAwesomeIcon icon={farCircle} style={commonStyles.light} />
}
</TableCell>
<TableCell style={{fontFamily: 'monospace', cursor: 'copy', ...styles.tableCell, ...commonStyles.light}} onClick={this.copyToClipboard(id)}>
{id.substring(0, 10)}
</TableCell>
<TableCell style={styles.tableCell}>
{bundle.location ? (() => {
const l = bundle.location;
return `${l.country ? l.country : ''}${l.city ? `/${l.city}` : ''}`;
})() : ''}
</TableCell>
<TableCell style={styles.tableCell}>
<AreaChart
width={trafficChartWidth}
height={trafficChartHeight}
data={ingressValues}
margin={{top: 5, right: 5, bottom: 0, left: 5}}
syncId={`peerIngress_${ip}_${id}`}
>
<defs>
<linearGradient id={`ingressGradient_${ip}_${id}`} x1='0' y1='1' x2='0' y2='0'>
{peer.ingressGradient
&& peer.ingressGradient.map(({offset, color}, i) => (
<stop
key={`ingressStop_${ip}_${id}_${i}`}
offset={`${offset}%`}
stopColor={color}
/>
))}
</linearGradient>
</defs>
<Tooltip cursor={false} content={<CustomTooltip tooltip={bytePlotter('Download')} />} />
<YAxis hide scale='sqrt' domain={[0.001, dataMax => Math.max(dataMax, 0)]} />
<Area
dataKey='ingress'
isAnimationActive={false}
type='monotone'
fill={`url(#ingressGradient_${ip}_${id})`}
stroke={peer.ingressGradient[peer.ingressGradient.length - 1].color}
strokeWidth={chartStrokeWidth}
/>
</AreaChart>
<AreaChart
width={trafficChartWidth}
height={trafficChartHeight}
data={egressValues}
margin={{top: 0, right: 5, bottom: 5, left: 5}}
syncId={`peerIngress_${ip}_${id}`}
>
<defs>
<linearGradient id={`egressGradient_${ip}_${id}`} x1='0' y1='1' x2='0' y2='0'>
{peer.egressGradient
&& peer.egressGradient.map(({offset, color}, i) => (
<stop
key={`egressStop_${ip}_${id}_${i}`}
offset={`${offset}%`}
stopColor={color}
/>
))}
</linearGradient>
</defs>
<Tooltip cursor={false} content={<CustomTooltip tooltip={bytePlotter('Upload', multiplier(-1))} />} />
<YAxis hide scale='sqrt' domain={[dataMin => Math.min(dataMin, 0), -0.001]} />
<Area
dataKey='egress'
isAnimationActive={false}
type='monotone'
fill={`url(#egressGradient_${ip}_${id})`}
stroke={peer.egressGradient[0].color}
strokeWidth={chartStrokeWidth}
/>
</AreaChart>
</TableCell>
</TableRow>
);
};
render() {
return (
<Grid container direction='row' justify='space-between'>
<Grid item>
<Table>
<TableHead style={styles.tableHead}>
<TableRow style={styles.tableRow}>
<TableCell style={styles.tableCell} />
<TableCell style={styles.tableCell}>Node ID</TableCell>
<TableCell style={styles.tableCell}>Location</TableCell>
<TableCell style={styles.tableCell}>Traffic</TableCell>
</TableRow>
</TableHead>
<TableBody>
{Object.entries(this.props.content.peers.bundles).map(([ip, bundle]) => {
if (!bundle.knownPeers || Object.keys(bundle.knownPeers).length < 1) {
return null;
}
return Object.entries(bundle.knownPeers).map(([id, peer]) => {
if (peer.active === false) {
return null;
}
return this.peerTableRow(ip, id, bundle, peer);
});
})}
</TableBody>
<TableBody>
{Object.entries(this.props.content.peers.bundles).map(([ip, bundle]) => {
if (!bundle.knownPeers || Object.keys(bundle.knownPeers).length < 1) {
return null;
}
return Object.entries(bundle.knownPeers).map(([id, peer]) => {
if (peer.active === true) {
return null;
}
return this.peerTableRow(ip, id, bundle, peer);
});
})}
</TableBody>
</Table>
</Grid>
<Grid item>
<Typography variant='subtitle1' gutterBottom>
Connection attempts
</Typography>
<Table>
<TableHead style={styles.tableHead}>
<TableRow style={styles.tableRow}>
<TableCell style={styles.tableCell}>IP</TableCell>
<TableCell style={styles.tableCell}>Location</TableCell>
<TableCell style={styles.tableCell}>Nr</TableCell>
</TableRow>
</TableHead>
<TableBody>
{Object.entries(this.props.content.peers.bundles).map(([ip, bundle]) => {
if (!bundle.attempts || bundle.attempts.length < 1) {
return null;
}
return (
<TableRow key={`attempt_${ip}`} style={styles.tableRow}>
<TableCell style={styles.tableCell}>{ip}</TableCell>
<TableCell style={styles.tableCell}>
{bundle.location ? (() => {
const l = bundle.location;
return `${l.country ? l.country : ''}${l.city ? `/${l.city}` : ''}`;
})() : ''}
</TableCell>
<TableCell style={styles.tableCell}>
{Object.values(bundle.attempts).length}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</Grid>
</Grid>
);
}
}
export default Network;
dashboard/assets/components/SideBar.jsx
+13 -7
View File
@@ -18,11 +18,14 @@
import React, {Component} from 'react';
import withStyles from 'material-ui/styles/withStyles';
import List, {ListItem, ListItemIcon, ListItemText} from 'material-ui/List';
import Icon from 'material-ui/Icon';
import withStyles from '@material-ui/core/styles/withStyles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import Icon from '@material-ui/core/Icon';
import Transition from 'react-transition-group/Transition';
import {Icon as FontAwesome} from 'react-fa';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {MENU, DURATION} from '../common';
@@ -48,6 +51,7 @@ const themeStyles = theme => ({
},
icon: {
fontSize: theme.spacing.unit * 3,
overflow: 'unset',
},
});
@@ -57,9 +61,11 @@ export type Props = {
changeContent: string => void,
};
type State = {}
// SideBar renders the sidebar of the dashboard.
class SideBar extends Component<Props> {
shouldComponentUpdate(nextProps) {
class SideBar extends Component<Props, State> {
shouldComponentUpdate(nextProps: Readonly<Props>, nextState: Readonly<State>, nextContext: any) {
return nextProps.opened !== this.props.opened;
}
@@ -78,7 +84,7 @@ class SideBar extends Component<Props> {
<ListItem button key={menu.id} onClick={this.clickOn(menu.id)} className={classes.listItem}>
<ListItemIcon>
<Icon className={classes.icon}>
<FontAwesome name={menu.icon} />
<FontAwesomeIcon icon={menu.icon} />
</Icon>
</ListItemIcon>
<ListItemText
dashboard/assets/fa-only-woff-loader.js
+5 -7
View File
@@ -16,10 +16,8 @@
// fa-only-woff-loader removes the .eot, .ttf, .svg dependencies of the FontAwesome library,
// because they produce unused extra blobs.
module.exports = function(content) {
return content
.replace(/src.*url(?!.*url.*(\.eot)).*(\.eot)[^;]*;/,'')
.replace(/url(?!.*url.*(\.eot)).*(\.eot)[^,]*,/,'')
.replace(/url(?!.*url.*(\.ttf)).*(\.ttf)[^,]*,/,'')
.replace(/,[^,]*url(?!.*url.*(\.svg)).*(\.svg)[^;]*;/,';');
};
module.exports = content => content
.replace(/src.*url(?!.*url.*(\.eot)).*(\.eot)[^;]*;/, '')
.replace(/url(?!.*url.*(\.eot)).*(\.eot)[^,]*,/, '')
.replace(/url(?!.*url.*(\.ttf)).*(\.ttf)[^,]*,/, '')
.replace(/,[^,]*url(?!.*url.*(\.svg)).*(\.svg)[^;]*;/, ';');
dashboard/assets/index.html
+1 -1
View File
@@ -21,6 +21,6 @@
</head>
<body style="height: 100%; margin: 0">
<div id="dashboard" style="height: 100%"></div>
<script src="bundle.js"></script>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
dashboard/assets/index.jsx
+5 -2
View File
@@ -19,12 +19,15 @@
import React from 'react';
import {render} from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import createMuiTheme from 'material-ui/styles/createMuiTheme';
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
import Dashboard from './components/Dashboard';
const theme: Object = createMuiTheme({
// typography: {
// useNextVariants: true,
// },
palette: {
type: 'dark',
},
dashboard/assets/package.json
+57 -40
View File
@@ -1,48 +1,65 @@
{
"private": true,
"dependencies": {
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.1",
"babel-loader": "^7.1.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-flow-strip-types": "^6.22.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-runtime": "^6.26.0",
"classnames": "^2.2.5",
"css-loader": "^0.28.9",
"@babel/core": "7.3.4",
"@babel/plugin-proposal-class-properties": "7.3.4",
"@babel/plugin-proposal-function-bind": "7.2.0",
"@babel/plugin-transform-flow-strip-types": "7.3.4",
"@babel/preset-env": "7.3.4",
"@babel/preset-react": "^7.0.0",
"@babel/preset-stage-0": "^7.0.0",
"@fortawesome/fontawesome-free-regular": "^5.0.13",
"@fortawesome/fontawesome-svg-core": "^1.2.15",
"@fortawesome/free-regular-svg-icons": "^5.7.2",
"@fortawesome/free-solid-svg-icons": "^5.7.2",
"@fortawesome/react-fontawesome": "^0.1.4",
"@material-ui/core": "3.9.2",
"@material-ui/icons": "3.0.2",
"babel-eslint": "10.0.1",
"babel-loader": "8.0.5",
"classnames": "^2.2.6",
"color-convert": "^2.0.0",
"css-loader": "2.1.1",
"escape-html": "^1.0.3",
"eslint": "^4.16.0",
"eslint-config-airbnb": "^16.1.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",
"file-loader": "^1.1.6",
"flow-bin": "^0.63.1",
"flow-bin-loader": "^1.0.2",
"flow-typed": "^2.2.3",
"material-ui": "^1.0.0-beta.30",
"material-ui-icons": "^1.0.0-beta.17",
"eslint": "5.15.1",
"eslint-config-airbnb": "^17.0.0",
"eslint-loader": "2.1.2",
"eslint-plugin-flowtype": "3.4.2",
"eslint-plugin-import": "2.16.0",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-node": "8.0.1",
"eslint-plugin-promise": "4.0.1",
"eslint-plugin-react": "7.12.4",
"file-loader": "3.0.1",
"flow-bin": "0.94.0",
"flow-bin-loader": "^1.0.3",
"flow-typed": "^2.5.1",
"js-beautify": "1.9.0",
"path": "^0.12.7",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-fa": "^5.0.0",
"react-transition-group": "^2.2.1",
"recharts": "^1.0.0-beta.9",
"style-loader": "^0.19.1",
"react": "16.8.4",
"react-dom": "16.8.4",
"react-hot-loader": "4.8.0",
"react-transition-group": "2.6.0",
"recharts": "1.5.0",
"style-loader": "0.23.1",
"terser-webpack-plugin": "^1.2.3",
"url": "^0.11.0",
"url-loader": "^0.6.2",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.11.1"
"url-loader": "1.1.2",
"webpack": "4.29.6",
"webpack-cli": "3.2.3",
"webpack-dashboard": "3.0.0",
"webpack-dev-server": "3.2.1",
"webpack-merge": "4.2.1"
},
"scripts": {
"build": "NODE_ENV=production webpack",
"stats": "webpack --profile --json > stats.json",
"dev": "webpack-dev-server --port 8081",
"flow": "flow-typed install"
}
"build": "webpack --config webpack.config.prod.js",
"stats": "webpack --config webpack.config.prod.js --profile --json > stats.json",
"dev": "webpack-dev-server --open --config webpack.config.dev.js",
"dash": "webpack-dashboard -- yarn dev",
"install-flow": "flow-typed install",
"flow": "flow status --show-all-errors",
"eslint": "eslint **/*"
},
"sideEffects": false,
"license": "LGPL-3.0-or-later"
}
dashboard/assets/types/content.jsx
+44 -2
View File
@@ -29,7 +29,6 @@ export type Content = {
export type ChartEntries = Array<ChartEntry>;
export type ChartEntry = {
time: Date,
value: number,
};
@@ -51,7 +50,50 @@ export type TxPool = {
};
export type Network = {
/* TODO (kurkomisi) */
peers: Peers,
diff: Array<PeerEvent>
};
export type PeerEvent = {
ip: string,
id: string,
remove: string,
location: GeoLocation,
connected: Date,
disconnected: Date,
ingress: ChartEntries,
egress: ChartEntries,
activity: string,
};
export type Peers = {
bundles: {[string]: PeerBundle},
};
export type PeerBundle = {
location: GeoLocation,
knownPeers: {[string]: KnownPeer},
attempts: Array<UnknownPeer>,
};
export type KnownPeer = {
connected: Array<Date>,
disconnected: Array<Date>,
ingress: Array<ChartEntries>,
egress: Array<ChartEntries>,
active: boolean,
};
export type UnknownPeer = {
connected: Date,
disconnected: Date,
};
export type GeoLocation = {
country: string,
city: string,
latitude: number,
longitude: number,
};
export type System = {
dashboard/assets/webpack.config.js → dashboard/assets/webpack.config.common.js
+39 -31
View File
@@ -1,4 +1,4 @@
// Copyright 2017 The go-ethereum Authors
// Copyright 2018 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
@@ -14,28 +14,25 @@
// 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 webpack = require('webpack');
const path = require('path');
module.exports = {
target: 'web',
entry: {
bundle: './index',
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, ''),
sourceMapFilename: '[file].map',
},
resolve: {
modules: [
'node_modules',
path.resolve(__dirname, 'components'), // import './components/Component' -> import 'Component'
],
extensions: ['.js', '.jsx'],
},
entry: './index',
output: {
path: path.resolve(__dirname, ''),
filename: 'bundle.js',
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
comments: false,
mangle: false,
beautify: true,
}),
new webpack.DefinePlugin({
PROD: process.env.NODE_ENV === 'production',
}),
],
module: {
rules: [
{
@@ -45,27 +42,38 @@ module.exports = {
{
loader: 'babel-loader',
options: {
plugins: [ // order: from top to bottom
// 'transform-decorators-legacy', // @withStyles, @withTheme
'transform-class-properties', // static defaultProps
'transform-flow-strip-types',
],
presets: [ // order: from bottom to top
'env',
'react',
'stage-0',
'@babel/env',
'@babel/react',
],
plugins: [ // order: from top to bottom
'@babel/proposal-function-bind', // instead of stage 0
'@babel/proposal-class-properties', // static defaultProps
'@babel/transform-flow-strip-types',
'react-hot-loader/babel',
],
},
},
// 'eslint-loader', // show errors not only in the editor, but also in the console
// 'eslint-loader', // show errors in the console
],
},
{
test: /font-awesome\.css$/,
use: [
'style-loader',
'css-loader',
path.resolve(__dirname, './fa-only-woff-loader.js'),
test: /\.css$/,
oneOf: [
{
test: /font-awesome/,
use: [
'style-loader',
'css-loader',
path.resolve(__dirname, './fa-only-woff-loader.js'),
],
},
{
use: [
'style-loader',
'css-loader',
],
},
],
},
{
dashboard/assets/webpack.config.dev.js
+35
View File
@@ -0,0 +1,35 @@
// Copyright 2018 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 webpack = require('webpack');
const merge = require('webpack-merge');
const WebpackDashboard = require('webpack-dashboard/plugin');
const common = require('./webpack.config.common.js');
module.exports = merge(common, {
mode: 'development',
plugins: [
new WebpackDashboard(),
new webpack.HotModuleReplacementPlugin(),
],
// devtool: 'eval',
devtool: 'source-map',
devServer: {
port: 8081,
hot: true,
compress: true,
},
});
dashboard/assets/webpack.config.prod.js
+41
View File
@@ -0,0 +1,41 @@
// Copyright 2018 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 TerserPlugin = require('terser-webpack-plugin');
const merge = require('webpack-merge');
const common = require('./webpack.config.common.js');
module.exports = merge(common, {
mode: 'production',
devtool: 'source-map',
optimization: {
minimize: true,
namedModules: true, // Module names instead of numbers - resolves the large diff problem.
minimizer: [
new TerserPlugin({
cache: true,
parallel: true,
sourceMap: true,
terserOptions: {
output: {
comments: false,
beautify: true,
},
},
}),
],
},
});
dashboard/assets/yarn.lock
+3295 -2553
View File
File diff suppressed because it is too large Load Diff