-
Notifications
You must be signed in to change notification settings - Fork 21.9k
cmd, dashboard: dashboard using React, Material-UI, Recharts #15393
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
karalabe
merged 5 commits into
ethereum:master
from
kurkomisi:dashboard_react_mui_recharts
Nov 14, 2017
Merged
Changes from all commits
Commits
Show all changes
5 commits
Select commit
Hold shift + click to select a range
523ff69
cmd, dashboard: dashboard using React, Material-UI, Recharts
kurkomisi c48c55f
cmd, dashboard, metrics: initial proof of concept dashboard
kurkomisi ba8fa4d
dashboard: delete blobs
kurkomisi 5c4c879
dashboard: gofmt -s -w .
kurkomisi a77f486
dashboard: minor text and code polishes
karalabe File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| ## Go Ethereum Dashboard | ||
|
|
||
| The dashboard is a data visualizer integrated into geth, intended to collect and visualize useful information of an Ethereum node. It consists of two parts: | ||
|
|
||
| * The client visualizes the collected data. | ||
| * The server collects the data, and updates the clients. | ||
|
|
||
| The client's UI uses [React][React] with JSX syntax, which is validated by the [ESLint][ESLint] linter mostly according to the [Airbnb React/JSX Style Guide][Airbnb]. The style is defined in the `.eslintrc` configuration file. The resources are bundled into a single `bundle.js` file using [Webpack][Webpack], which relies on the `webpack.config.js`. The bundled file is referenced from `dashboard.html` and takes part in the `assets.go` too. The necessary dependencies for the module bundler are gathered by [Node.js][Node.js]. | ||
|
|
||
| ### Development and bundling | ||
|
|
||
| As the dashboard depends on certain NPM packages (which are not included in the go-ethereum repo), these need to be installed first: | ||
|
|
||
| ``` | ||
| $ (cd dashboard/assets && npm install) | ||
| ``` | ||
|
|
||
| Normally the dashboard assets are bundled into Geth via `go-bindata` to avoid external dependencies. Rebuilding Geth after each UI modification however is not feasible from a developer perspective. Instead, we can run `webpack` in watch mode to automatically rebundle the UI, and ask `geth` to use external assets to not rely on compiled resources: | ||
|
|
||
| ``` | ||
| $ (cd dashboard/assets && ./node_modules/.bin/webpack --watch) | ||
| $ geth --dashboard --dashboard.assets=dashboard/assets/public --vmodule=dashboard=5 | ||
| ``` | ||
|
|
||
| To bundle up the final UI into Geth, run `webpack` and `go generate`: | ||
|
|
||
| ``` | ||
| $ (cd dashboard/assets && ./node_modules/.bin/webpack) | ||
| $ go generate ./dashboard | ||
| ``` | ||
|
|
||
| ### Have fun | ||
|
|
||
| [Webpack][Webpack] offers handy tools for visualizing the bundle's dependency tree and space usage. | ||
|
|
||
| * Generate the bundle's profile running `webpack --profile --json > stats.json` | ||
| * For the _dependency tree_ go to [Webpack Analyze][WA], and import `stats.json` | ||
| * For the _space usage_ go to [Webpack Visualizer][WV], and import `stats.json` | ||
|
|
||
| [React]: https://reactjs.org/ | ||
| [ESLint]: https://eslint.org/ | ||
| [Airbnb]: https://github.com/airbnb/javascript/tree/master/react | ||
| [Webpack]: https://webpack.github.io/ | ||
| [WA]: http://webpack.github.io/analyse/ | ||
| [WV]: http://chrisbateman.github.io/webpack-visualizer/ | ||
| [Node.js]: https://nodejs.org/en/ |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| // 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/>. | ||
|
|
||
| // React syntax style mostly according to https://github.com/airbnb/javascript/tree/master/react | ||
| { | ||
| "plugins": [ | ||
| "react" | ||
| ], | ||
| "parser": "babel-eslint", | ||
| "parserOptions": { | ||
| "ecmaFeatures": { | ||
| "jsx": true, | ||
| "modules": true | ||
| } | ||
| }, | ||
| "rules": { | ||
| "react/prefer-es6-class": 2, | ||
| "react/prefer-stateless-function": 2, | ||
| "react/jsx-pascal-case": 2, | ||
| "react/jsx-closing-bracket-location": [1, {"selfClosing": "tag-aligned", "nonEmpty": "tag-aligned"}], | ||
| "react/jsx-closing-tag-location": 1, | ||
| "jsx-quotes": ["error", "prefer-double"], | ||
| "no-multi-spaces": "error", | ||
| "react/jsx-tag-spacing": 2, | ||
| "react/jsx-curly-spacing": [2, {"when": "never", "children": true}], | ||
| "react/jsx-boolean-value": 2, | ||
| "react/no-string-refs": 2, | ||
| "react/jsx-wrap-multilines": 2, | ||
| "react/self-closing-comp": 2, | ||
| "react/jsx-no-bind": 2, | ||
| "react/require-render-return": 2, | ||
| "react/no-is-mounted": 2, | ||
| "key-spacing": ["error", {"align": { | ||
| "beforeColon": false, | ||
| "afterColon": true, | ||
| "on": "value" | ||
| }}] | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| // 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/>. | ||
|
|
||
| // isNullOrUndefined returns true if the given variable is null or undefined. | ||
| export const isNullOrUndefined = variable => variable === null || typeof variable === 'undefined'; | ||
|
|
||
| export const LIMIT = { | ||
| memory: 200, // Maximum number of memory data samples. | ||
| traffic: 200, // Maximum number of traffic data samples. | ||
| log: 200, // Maximum number of logs. | ||
| }; | ||
| // The sidebar menu and the main content are rendered based on these elements. | ||
| export const TAGS = (() => { | ||
| const T = { | ||
| home: { title: "Home", }, | ||
| chain: { title: "Chain", }, | ||
| transactions: { title: "Transactions", }, | ||
| network: { title: "Network", }, | ||
| system: { title: "System", }, | ||
| logs: { title: "Logs", }, | ||
| }; | ||
| // Using the key is circumstantial in some cases, so it is better to insert it also as a value. | ||
| // This way the mistyping is prevented. | ||
| for(let key in T) { | ||
| T[key]['id'] = key; | ||
| } | ||
| return T; | ||
| })(); | ||
|
|
||
| export const DATA_KEYS = (() => { | ||
| const DK = {}; | ||
| ["memory", "traffic", "logs"].map(key => { | ||
| DK[key] = key; | ||
| }); | ||
| return DK; | ||
| })(); | ||
|
|
||
| // Temporary - taken from Material-UI | ||
| export const DRAWER_WIDTH = 240; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please fix all your files so they have a newline at the end.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also skip the bundle.js, since it's an intermediate build step between source jsx and the final assets.go