forked from ethereum/go-ethereum
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
cmd, dashboard: dashboard using React, Material-UI, Recharts (ethereu…
…m#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
- Loading branch information
Showing
21 changed files
with
1,512 additions
and
8 deletions.
There are no files selected for viewing
This file contains 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 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 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 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 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 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 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 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.