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

* dashboard, p2p: visualize peers

* dashboard: change scale to green to red

.gitignore

@@ -42,6 +42,7 @@ profile.cov
 /dashboard/assets/node_modules
 /dashboard/assets/stats.json
 /dashboard/assets/bundle.js
+/dashboard/assets/bundle.js.map
 /dashboard/assets/package-lock.json
 
 **/yarn-error.log

dashboard/assets/.eslintignore

@@ -0,0 +1,3 @@
+node_modules/* #ignored by default
+flow-typed/*
+bundle.js

dashboard/assets/.eslintrc

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

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

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

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

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

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