cmd, dashboard: dashboard using React, Material-UI, Recharts (#15393)

* cmd, dashboard: dashboard using React, Material-UI, Recharts

* cmd, dashboard, metrics: initial proof of concept dashboard

* dashboard: delete blobs

* dashboard: gofmt -s -w .

* dashboard: minor text and code polishes

1 files changed, 109 insertions, 0 deletions

diff --git a/dashboard/assets/components/Main.jsx b/dashboard/assets/components/Main.jsx
new file mode 100644
index 000000000..b119d1ffd
--- /dev/null
+++ b/dashboard/assets/components/Main.jsx
@@ -0,0 +1,109 @@
+// Copyright 2017 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 PropTypes from 'prop-types';
+import classNames from 'classnames';
+import {withStyles} from 'material-ui/styles';
+
+import {TAGS, DRAWER_WIDTH} from "./Common.jsx";
+import Home from './Home.jsx';
+
+// ContentSwitch chooses and renders the proper page content.
+class ContentSwitch extends Component {
+    render() {
+        switch(this.props.active) {
+            case TAGS.home.id:
+                return <Home memory={this.props.memory} traffic={this.props.traffic} shouldUpdate={this.props.shouldUpdate} />;
+            case TAGS.chain.id:
+                return null;
+            case TAGS.transactions.id:
+                return null;
+            case TAGS.network.id:
+                // Only for testing.
+                return null;
+            case TAGS.system.id:
+                return null;
+            case TAGS.logs.id:
+                return <div>{this.props.logs.map((log, index) => <div key={index}>{log}</div>)}</div>;
+        }
+        return null;
+    }
+}
+
+ContentSwitch.propTypes = {
+    active:       PropTypes.string.isRequired,
+    shouldUpdate: PropTypes.object.isRequired,
+};
+
+// styles contains the styles for the Main component.
+const styles = theme => ({
+    content: {
+        width:           '100%',
+        marginLeft:      -DRAWER_WIDTH,
+        flexGrow:        1,
+        backgroundColor: theme.palette.background.default,
+        padding:         theme.spacing.unit * 3,
+        transition:      theme.transitions.create('margin', {
+            easing:   theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+        marginTop:                    56,
+        overflow:                     'auto',
+        [theme.breakpoints.up('sm')]: {
+            content: {
+                height:    'calc(100% - 64px)',
+                marginTop: 64,
+            },
+        },
+    },
+    contentShift: {
+        marginLeft: 0,
+        transition: theme.transitions.create('margin', {
+            easing:   theme.transitions.easing.easeOut,
+            duration: theme.transitions.duration.enteringScreen,
+        }),
+    },
+});
+
+// Main renders a component for the page content.
+class Main extends Component {
+    render() {
+        // The classes property is injected by withStyles().
+        const {classes} = this.props;
+
+        return (
+            <main className={classNames(classes.content, this.props.opened && classes.contentShift)}>
+                <ContentSwitch
+                    active={this.props.active}
+                    memory={this.props.memory}
+                    traffic={this.props.traffic}
+                    logs={this.props.logs}
+                    shouldUpdate={this.props.shouldUpdate}
+                />
+            </main>
+        );
+    }
+}
+
+Main.propTypes = {
+    classes:      PropTypes.object.isRequired,
+    opened:       PropTypes.bool.isRequired,
+    active:       PropTypes.string.isRequired,
+    shouldUpdate: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Main);