dashboard: fix UI crash bug, separate nodes from the same IP, format source map

dashboard/assets/components/Network.jsx

@@ -32,6 +32,8 @@ import type {Network as NetworkType, PeerEvent} from '../types/content';
 
 // 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,
+	// which has a valid peer state JSON format per se.
 	if (update.peers && update.peers.bundles) {
 		prev.peers = update.peers;
 	}
@@ -86,6 +88,9 @@ export const inserter = (sampleLimit: number) => (update: NetworkType, prev: Net
 				return;
 			}
 			if (!event.id) {
+				if (!bundle.attempts) {
+					bundle.attempts = [];
+				}
 				bundle.attempts.push({
 					connected:    event.connected,
 					disconnected: event.disconnected,
@@ -169,10 +174,10 @@ class Network extends Component<Props, State> {
 								if (!bundle.knownPeers || Object.keys(bundle.knownPeers).length < 1) {
 									return null;
 								}
-								return (
+								return Object.entries(bundle.knownPeers).map(([id, peer]) => (
-									<TableRow key={`known_${ip}`}>
+									<TableRow key={`known_${ip}_${id}`}>
 										<TableCell>
-											{Object.keys(bundle.knownPeers).map(id => id.substring(0, 10)).join(' ')}
+											{id.substring(0, 10)}
 										</TableCell>
 										<TableCell>
 											{bundle.location ? (() => {
@@ -181,12 +186,10 @@ class Network extends Component<Props, State> {
 											})() : ''}
 										</TableCell>
 										<TableCell>
-											{Object.values(bundle.knownPeers).map(({ingress, egress}) => (
-												<div>
 											<AreaChart
 												width={200} height={18}
 												syncId={'footerSyncId'}
-														data={egress.map(({value}) => ({egress: value || 0}))}
+												data={peer.egress.map(({value}) => ({egress: value || 0}))}
 												margin={{top: 5, right: 5, bottom: 0, left: 5}}
 											>
 												<Tooltip cursor={false} content={<CustomTooltip tooltip={bytePlotter('Download')} />} />
@@ -195,17 +198,15 @@ class Network extends Component<Props, State> {
 											<AreaChart
 												width={200} height={18}
 												syncId={'footerSyncId'}
-														data={ingress.map(({value}) => ({ingress: -value || 0}))}
+												data={peer.ingress.map(({value}) => ({ingress: -value || 0}))}
 												margin={{top: 0, right: 5, bottom: 5, left: 5}}
 											>
 												<Tooltip cursor={false} content={<CustomTooltip tooltip={bytePlotter('Upload', multiplier(-1))} />} />
 												<Area isAnimationActive={false} type='monotone' dataKey='ingress' stroke='#82ca9d' fill='#82ca9d' />
 											</AreaChart>
-												</div>
-											))}
 										</TableCell>
 									</TableRow>
-								);
+								));
 							})}
 						</TableBody>
 					</Table>

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

@@ -21,4 +21,3 @@ module.exports = content => content
 	.replace(/url(?!.*url.*(\.eot)).*(\.eot)[^,]*,/, '')
 	.replace(/url(?!.*url.*(\.ttf)).*(\.ttf)[^,]*,/, '')
 	.replace(/,[^,]*url(?!.*url.*(\.svg)).*(\.svg)[^;]*;/, ';');
-

dashboard/assets/package.json

@@ -8,46 +8,49 @@
         "@babel/preset-env": "7.2.3",
         "@babel/preset-react": "^7.0.0",
         "@babel/preset-stage-0": "^7.0.0",
-        "@material-ui/core": "3.8.1",
+        "@material-ui/core": "3.9.0",
-        "@material-ui/icons": "^3.0.1",
+        "@material-ui/icons": "3.0.2",
         "babel-eslint": "10.0.1",
         "babel-loader": "8.0.5",
         "classnames": "^2.2.6",
         "css-loader": "2.1.0",
         "escape-html": "^1.0.3",
-        "eslint": "5.11.1",
+        "eslint": "5.12.0",
         "eslint-config-airbnb": "^17.0.0",
         "eslint-loader": "2.1.1",
-        "eslint-plugin-flowtype": "3.2.0",
+        "eslint-plugin-flowtype": "3.2.1",
         "eslint-plugin-import": "^2.13.0",
         "eslint-plugin-jsx-a11y": "6.1.2",
-        "eslint-plugin-node": "8.0.0",
+        "eslint-plugin-node": "8.0.1",
         "eslint-plugin-promise": "4.0.1",
-        "eslint-plugin-react": "7.12.2",
+        "eslint-plugin-react": "7.12.3",
         "file-loader": "3.0.1",
-        "flow-bin": "0.89.0",
+        "flow-bin": "0.90.0",
         "flow-bin-loader": "^1.0.3",
         "flow-typed": "^2.5.1",
+        "js-beautify": "^1.8.9",
         "path": "^0.12.7",
         "react": "16.7.0",
         "react-dom": "16.7.0",
         "react-fa": "^5.0.0",
         "react-hot-loader": "4.6.3",
-        "react-transition-group": "2.5.2",
+        "react-transition-group": "2.5.3",
         "recharts": "1.4.2",
         "style-loader": "0.23.1",
         "uglifyjs-webpack-plugin": "2.1.1",
         "url": "^0.11.0",
         "url-loader": "1.1.2",
-        "webpack": "4.28.3",
+        "webpack": "4.28.4",
-        "webpack-cli": "3.2.0",
+        "webpack-cli": "3.2.1",
+        "webpack-dashboard": "^2.0.0",
         "webpack-dev-server": "3.1.14",
-        "webpack-merge": "4.1.5"
+        "webpack-merge": "4.2.1"
     },
     "scripts": {
         "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 **/*"

dashboard/assets/webpack.config.dev.js

@@ -16,11 +16,13 @@
 
 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',

dashboard/assets/webpack.config.prod.js

@@ -20,7 +20,7 @@ const common = require('./webpack.config.common.js');
 
 module.exports = merge(common, {
 	mode:         'production',
-	devtool:      'nosources-source-map',
+	devtool:      'source-map',
 	optimization: {
 		minimize:     true,
 		namedModules: true, // Module names instead of numbers - resolves the large diff problem.

dashboard/dashboard.go

@@ -18,6 +18,7 @@ package dashboard
 
 //go:generate yarn --cwd ./assets install
 //go:generate yarn --cwd ./assets build
+//go:generate yarn --cwd ./assets js-beautify -f bundle.js.map -r -w 1
 //go:generate go-bindata -nometadata -o assets.go -prefix assets -nocompress -pkg dashboard assets/index.html assets/bundle.js assets/bundle.js.map
 //go:generate sh -c "sed 's#var _bundleJs#//nolint:misspell\\\n&#' assets.go > assets.go.tmp && mv assets.go.tmp assets.go"
 //go:generate sh -c "sed 's#var _bundleJsMap#//nolint:misspell\\\n&#' assets.go > assets.go.tmp && mv assets.go.tmp assets.go"