dashboard: upgrade JS libraries, optimize webpack and eslint

dashboard/assets/.eslintignore

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

dashboard/assets/.eslintrc

@@ -16,71 +16,74 @@
 
 // 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",
+        "prettier",
+        "prettier/flowtype",
+        "prettier/react"
     ],
-    '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",
+        "prettier"
+    ],
+    "rules": {
+        "no-tabs":                "off",
+        "indent":                 ["error", "tab"],
+        "react/jsx-indent":       ["error", "tab"],
+        "react/jsx-indent-props": ["error", "tab"],
+        "react/prefer-stateless-function": "off",
+        //"react/jsx-one-expression-per-line": ["error", {"allow": "single-child"}], // buggy
+        "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",
+        "prettier/prettier": ["error", {
+            "singleQuote": true,
+            "useTabs": true,
+        }]
     },
-    'settings': {
-        'flowtype': {
-            'onlyFilesWithFlowAnnotation': true,
+    "settings": {
+        "import/resolver": {
+            "node":    {
+                "paths": ["components"] // import './components/Component' -> import 'Component'
             }
         },
+        "flowtype": {
+            "onlyFilesWithFlowAnnotation": true
+        }
+    }
 }

dashboard/assets/.flowconfig

@@ -7,3 +7,4 @@ node_modules/jss/flow-typed
 
 [options]
 include_warnings=true
+module.name_mapper='\(.*\)$' -> '<PROJECT_ROOT>/\1'

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,7 +18,7 @@
 
 import React, {Component} from 'react';
 
-import Typography from 'material-ui/Typography';
+import Typography from '@material-ui/core/Typography';
 import {styles} from '../common';
 
 // multiplier multiplies a number by another.
@@ -70,7 +70,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

@@ -18,14 +18,14 @@
 
 import React, {Component} from 'react';
 
-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, SAME} from './Logs';
-import {inserter as peerInserter} from './Network';
 
 // 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
@@ -38,7 +38,6 @@ import {inserter as peerInserter} from './Network';
 // 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') {

dashboard/assets/components/Footer.jsx

@@ -18,13 +18,16 @@
 
 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 Tooltip from 'recharts/es6/component/Tooltip';
 
-import ChartRow from './ChartRow';
-import CustomTooltip, {bytePlotter, bytePerSecPlotter, percentPlotter, multiplier} from './CustomTooltip';
+import ChartRow from 'ChartRow';
+import CustomTooltip, {bytePlotter, bytePerSecPlotter, percentPlotter, multiplier} from 'CustomTooltip';
 import {styles as commonStyles} from '../common';
 import type {General, System} from '../types/content';
 
@@ -53,6 +56,10 @@ const styles = {
 		height: '100%',
 		width:  '99%',
 	},
+	link: {
+		color:          'inherit',
+		textDecoration: 'none',
+	},
 };
 
 // themeStyles returns the styles generated from the theme for the component.
@@ -73,9 +80,11 @@ 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';
 	}
 
@@ -165,7 +174,12 @@ class Footer extends Component<Props> {
 					{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

@@ -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 Icon from '@material-ui/core/Icon';
+import MenuIcon from '@material-ui/icons/Menu';
+import Typography from '@material-ui/core/Typography';
 
 // styles contains the constant styles of the component.
 const styles = {

dashboard/assets/components/Logs.jsx

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

@@ -18,12 +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 Network from './Network';
-import Logs from './Logs';
-import Footer from './Footer';
 import type {Content} from '../types/content';
 
 // styles contains the constant styles of the component.
@@ -55,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);
@@ -82,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,

dashboard/assets/components/Network.jsx

@@ -18,11 +18,14 @@
 
 import React, {Component} from 'react';
 
-import Table, {TableHead, TableBody, TableRow, TableCell} from 'material-ui/Table';
+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 type {Network as NetworkType, PeerBundle, Peer} from '../types/content';
 
-// 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.
+// inserter is a state updater function for the main component, which handles the peers.
 export const inserter = (update: {[string]: PeerBundle}, prev: {[string]: PeerBundle}) => {
 	Object.keys(update).forEach((ip) => {
 		if (!update[ip]) {
@@ -95,6 +98,8 @@ export type Props = {
     shouldUpdate: Object,
 };
 
+type State = {};
+
 // Network renders the network page.
 class Network extends Component<Props, State> {
 	formatTime = (t) => {

dashboard/assets/components/SideBar.jsx

@@ -18,9 +18,12 @@
 
 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';
 
@@ -57,9 +60,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;
 	}
 

dashboard/assets/fa-only-woff-loader.js

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

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

@@ -19,8 +19,8 @@
 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';
 

dashboard/assets/package.json

@@ -1,48 +1,61 @@
 {
     "dependencies": {
-        "babel-core": "^6.26.0",
-        "babel-eslint": "^8.2.1",
-        "babel-loader": "^7.1.2",
+        "@material-ui/core": "^1.4.3",
+        "@material-ui/icons": "^2.0.1",
+        "babel-core": "^6.26.3",
+        "babel-eslint": "^8.2.6",
+        "babel-loader": "^7.1.5",
         "babel-plugin-transform-class-properties": "^6.24.1",
-        "babel-plugin-transform-decorators-legacy": "^1.3.4",
+        "babel-plugin-transform-decorators-legacy": "^1.3.5",
         "babel-plugin-transform-flow-strip-types": "^6.22.0",
         "babel-plugin-transform-runtime": "^6.23.0",
-        "babel-preset-env": "^1.6.1",
+        "babel-preset-env": "^1.7.0",
         "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",
+        "classnames": "^2.2.6",
+        "css-loader": "^1.0.0",
         "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": "^4.19.1",
+        "eslint-config-airbnb": "^17.0.0",
+        "eslint-config-prettier": "^2.9.0",
+        "eslint-loader": "^2.1.0",
+        "eslint-plugin-flowtype": "^2.50.0",
+        "eslint-plugin-import": "^2.13.0",
+        "eslint-plugin-jsx-a11y": "^6.1.1",
+        "eslint-plugin-node": "^7.0.1",
+        "eslint-plugin-prettier": "^2.6.2",
+        "eslint-plugin-promise": "^3.8.0",
+        "eslint-plugin-react": "^7.10.0",
+        "file-loader": "^1.1.11",
+        "flow-bin": "^0.78.0",
+        "flow-bin-loader": "^1.0.3",
+        "flow-typed": "^2.5.1",
         "path": "^0.12.7",
-        "react": "^16.2.0",
-        "react-dom": "^16.2.0",
+        "prettier": "^1.14.2",
+        "prettier-eslint": "^8.8.2",
+        "react": "^16.4.2",
+        "react-dom": "^16.4.2",
         "react-fa": "^5.0.0",
-        "react-transition-group": "^2.2.1",
-        "recharts": "^1.0.0-beta.9",
-        "style-loader": "^0.19.1",
+        "react-transition-group": "^2.4.0",
+        "recharts": "^1.1.0",
+        "style-loader": "^0.22.1",
+        "uglifyjs-webpack-plugin": "^1.2.7",
         "url": "^0.11.0",
-        "url-loader": "^0.6.2",
-        "webpack": "^3.10.0",
-        "webpack-dev-server": "^2.11.1"
+        "url-loader": "^1.0.1",
+        "webpack": "^4.16.5",
+        "webpack-cli": "^3.1.0",
+        "webpack-dev-server": "^3.1.5"
     },
     "scripts": {
         "build": "NODE_ENV=production webpack",
         "stats": "webpack --profile --json > stats.json",
-        "dev": "webpack-dev-server --port 8081",
-        "flow": "flow-typed install"
-    }
+        "dev": "webpack-dev-server",
+        "install-flow": "flow-typed install",
+        "flow": "flow status --show-all-errors",
+        "eslint": "eslint **/*",
+        "lint": "yarn eslint && yarn flow",
+        "eslint-check": "eslint --print-config .eslintrc | eslint-config-prettier-check"
+    },
+    "license": "LGPL-3.0-or-later"
 }

dashboard/assets/webpack.config.js

@@ -15,23 +15,48 @@
 // along with the go-ethereum library. If not, see <http://www.gnu.org/licenses/>.
 
 const webpack = require('webpack');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const path = require('path');
 
 module.exports = {
+	mode:   'development',
+	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'
+		],
+		// alias: {
+		// 	root: path.resolve(__dirname, ''),
+		// },
 		extensions: ['.js', '.jsx'],
 	},
-	entry:  './index',
+	// devtool:      'source-map',
+	optimization: {
+		minimize:     true,
+		namedModules: true, // Module names instead of numbers - resolves the large diff problem.
+		minimizer:    [
+			new UglifyJsPlugin({
+				uglifyOptions: {
+					compress: true,
 					output:   {
-		path:     path.resolve(__dirname, ''),
-		filename: 'bundle.js',
+						comments: false,
+						beautify: true,
+					},
+				},
+				// sourceMap: true,
+			}),
+		],
 	},
 	plugins: [
-		new webpack.optimize.UglifyJsPlugin({
-			comments: false,
-			mangle:   false,
-			beautify: true,
-		}),
 		new webpack.DefinePlugin({
 			PROD: process.env.NODE_ENV === 'production',
 		}),
@@ -61,17 +86,32 @@ module.exports = {
 				],
 			},
 			{
-				test: /font-awesome\.css$/,
+				test:  /\.css$/,
+				oneOf: [
+					{
+						test: /font-awesome/,
 						use:  [
 							'style-loader',
 							'css-loader',
 							path.resolve(__dirname, './fa-only-woff-loader.js'),
 						],
 					},
+					{
+						use: [
+							'style-loader',
+							'css-loader',
+						],
+					},
+				],
+			},
 			{
 				test: /\.woff2?$/, // font-awesome icons
 				use:  'url-loader',
 			},
 		],
 	},
+	devServer: {
+		port:     8081,
+		compress: true,
+	},
 };