dashboard: integrate Flow, sketch message API (#15713)

* dashboard: minor design change

* dashboard: Flow integration, message API

* dashboard: minor polishes, exclude misspell linter

1 files changed, 45 insertions, 62 deletions

diff --git a/dashboard/assets/components/Home.jsx b/dashboard/assets/components/Home.jsx
index f67bac555..d3e1004f9 100644
--- a/dashboard/assets/components/Home.jsx
+++ b/dashboard/assets/components/Home.jsx
@@ -1,3 +1,5 @@
+// @flow
+
 // Copyright 2017 The go-ethereum Authors
 // This file is part of the go-ethereum library.
 //
@@ -15,75 +17,56 @@
 // along with the go-ethereum library. If not, see <http://www.gnu.org/licenses/>.
 
 import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import Grid from 'material-ui/Grid';
-import {LineChart, AreaChart, Area, YAxis, CartesianGrid, Line, ResponsiveContainer} from 'recharts';
-import {withTheme} from 'material-ui/styles';
 
-import {isNullOrUndefined, DATA_KEYS} from "./Common.jsx";
+import withTheme from 'material-ui/styles/withTheme';
+import {LineChart, AreaChart, Area, YAxis, CartesianGrid, Line} from 'recharts';
 
-// ChartGrid renders a grid container for responsive charts.
-// The children are Recharts components extended with the Material-UI's xs property.
-class ChartGrid extends Component {
-    render() {
-        return (
-            <Grid container spacing={this.props.spacing}>
-                {
-                    React.Children.map(this.props.children, child => (
-                        <Grid item xs={child.props.xs}>
-                            <ResponsiveContainer width="100%" height={child.props.height}>
-                                {React.cloneElement(child, {data: child.props.values.map(value => ({value: value}))})}
-                            </ResponsiveContainer>
-                        </Grid>
-                    ))
-                }
-            </Grid>
-        );
-    }
-}
+import ChartGrid from './ChartGrid';
+import type {ChartEntry} from '../types/message';
 
-ChartGrid.propTypes = {
-    spacing: PropTypes.number.isRequired,
+export type Props = {
+    theme: Object,
+    memory: Array<ChartEntry>,
+    traffic: Array<ChartEntry>,
+    shouldUpdate: Object,
 };
+// Home renders the home content.
+class Home extends Component<Props> {
+	constructor(props: Props) {
+		super(props);
+		const {theme} = props; // The theme property is injected by withTheme().
+		this.memoryColor = theme.palette.primary[300];
+		this.trafficColor = theme.palette.secondary[300];
+	}
 
-// Home renders the home component.
-class Home extends Component {
-    shouldComponentUpdate(nextProps) {
-        return !isNullOrUndefined(nextProps.shouldUpdate[DATA_KEYS.memory]) ||
-            !isNullOrUndefined(nextProps.shouldUpdate[DATA_KEYS.traffic]);
-    }
+	shouldComponentUpdate(nextProps) {
+		return nextProps.shouldUpdate.has('memory') || nextProps.shouldUpdate.has('traffic');
+	}
 
-    render() {
-        const {theme} = this.props;
-        const memoryColor = theme.palette.primary[300];
-        const trafficColor = theme.palette.secondary[300];
+	render() {
+		const {memory, traffic} = this.props;
 
-        return (
-            <ChartGrid spacing={24}>
-                <AreaChart xs={6} height={300} values={this.props.memory}>
-                    <YAxis />
-                    <Area type="monotone" dataKey="value" stroke={memoryColor} fill={memoryColor} />
-                </AreaChart>
-                <LineChart xs={6} height={300} values={this.props.traffic}>
-                    <Line type="monotone" dataKey="value" stroke={trafficColor} dot={false} />
-                </LineChart>
-                <LineChart xs={6} height={300} values={this.props.memory}>
-                    <YAxis />
-                    <CartesianGrid stroke="#eee" strokeDasharray="5 5" />
-                    <Line type="monotone" dataKey="value" stroke={memoryColor} dot={false} />
-                </LineChart>
-                <AreaChart xs={6} height={300} values={this.props.traffic}>
-                    <CartesianGrid stroke="#eee" strokeDasharray="5 5" vertical={false} />
-                    <Area type="monotone" dataKey="value" stroke={trafficColor} fill={trafficColor} />
-                </AreaChart>
-            </ChartGrid>
-        );
-    }
+		return (
+			<ChartGrid spacing={24}>
+				<AreaChart xs={6} height={300} values={memory}>
+					<YAxis />
+					<Area type="monotone" dataKey="value" stroke={this.memoryColor} fill={this.memoryColor} />
+				</AreaChart>
+				<LineChart xs={6} height={300} values={traffic}>
+					<Line type="monotone" dataKey="value" stroke={this.trafficColor} dot={false} />
+				</LineChart>
+				<LineChart xs={6} height={300} values={memory}>
+					<YAxis />
+					<CartesianGrid stroke="#eee" strokeDasharray="5 5" />
+					<Line type="monotone" dataKey="value" stroke={this.memoryColor} dot={false} />
+				</LineChart>
+				<AreaChart xs={6} height={300} values={traffic}>
+					<CartesianGrid stroke="#eee" strokeDasharray="5 5" vertical={false} />
+					<Area type="monotone" dataKey="value" stroke={this.trafficColor} fill={this.trafficColor} />
+				</AreaChart>
+			</ChartGrid>
+		);
+	}
 }
 
-Home.propTypes = {
-    theme:        PropTypes.object.isRequired,
-    shouldUpdate: PropTypes.object.isRequired,
-};
-
 export default withTheme()(Home);