mirror of
https://github.com/ethereum/go-ethereum.git
synced 2026-08-19 10:22:23 +00:00
dashboard: upgrade JS libraries, optimize webpack and eslint
This commit is contained in:
parent
b784aa949c
commit
66756cd2d6
18 changed files with 1890 additions and 2082 deletions
3
dashboard/assets/.eslintignore
Normal file
3
dashboard/assets/.eslintignore
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
node_modules/* #ignored by default
|
||||||
|
flow-typed/*
|
||||||
|
bundle.js
|
||||||
|
|
@ -16,71 +16,74 @@
|
||||||
|
|
||||||
// React syntax style mostly according to https://github.com/airbnb/javascript/tree/master/react
|
// React syntax style mostly according to https://github.com/airbnb/javascript/tree/master/react
|
||||||
{
|
{
|
||||||
'env': {
|
"env": {
|
||||||
'browser': true,
|
"browser": true,
|
||||||
'node': true,
|
"node": true,
|
||||||
'es6': true,
|
"es6": true
|
||||||
},
|
},
|
||||||
'parser': 'babel-eslint',
|
"parser": "babel-eslint",
|
||||||
'parserOptions': {
|
"parserOptions": {
|
||||||
'sourceType': 'module',
|
"sourceType": "module",
|
||||||
'ecmaVersion': 6,
|
"ecmaVersion": 6,
|
||||||
'ecmaFeatures': {
|
"ecmaFeatures": {
|
||||||
'jsx': true,
|
"jsx": true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
'extends': 'airbnb',
|
"extends": [
|
||||||
'plugins': [
|
"eslint:recommended",
|
||||||
'flowtype',
|
"airbnb",
|
||||||
'react',
|
"plugin:flowtype/recommended",
|
||||||
|
"plugin:react/recommended",
|
||||||
|
"prettier",
|
||||||
|
"prettier/flowtype",
|
||||||
|
"prettier/react"
|
||||||
],
|
],
|
||||||
'rules': {
|
"plugins": [
|
||||||
'no-tabs': 'off',
|
"flowtype",
|
||||||
'indent': ['error', 'tab'],
|
"react",
|
||||||
'react/jsx-indent': ['error', 'tab'],
|
"prettier"
|
||||||
'react/jsx-indent-props': ['error', 'tab'],
|
],
|
||||||
'react/prefer-stateless-function': 'off',
|
"rules": {
|
||||||
'jsx-quotes': ['error', 'prefer-single'],
|
"no-tabs": "off",
|
||||||
'no-plusplus': 'off',
|
"indent": ["error", "tab"],
|
||||||
'no-console': ['error', { allow: ['error'] }],
|
"react/jsx-indent": ["error", "tab"],
|
||||||
|
"react/jsx-indent-props": ["error", "tab"],
|
||||||
|
"react/prefer-stateless-function": "off",
|
||||||
|
//"react/jsx-one-expression-per-line": ["error", {"allow": "single-child"}], // buggy
|
||||||
|
"jsx-quotes": ["error", "prefer-single"],
|
||||||
|
"no-plusplus": "off",
|
||||||
|
"no-console": ["error", { "allow": ["error"] }],
|
||||||
// Specifies the maximum length of a line.
|
// Specifies the maximum length of a line.
|
||||||
'max-len': ['warn', 120, 2, {
|
"max-len": ["warn", 120, 2, {
|
||||||
'ignoreUrls': true,
|
"ignoreUrls": true,
|
||||||
'ignoreComments': false,
|
"ignoreComments": false,
|
||||||
'ignoreRegExpLiterals': true,
|
"ignoreRegExpLiterals": true,
|
||||||
'ignoreStrings': true,
|
"ignoreStrings": true,
|
||||||
'ignoreTemplateLiterals': true,
|
"ignoreTemplateLiterals": true
|
||||||
}],
|
}],
|
||||||
// Enforces consistent spacing between keys and values in object literal properties.
|
// Enforces consistent spacing between keys and values in object literal properties.
|
||||||
'key-spacing': ['error', {'align': {
|
"key-spacing": ["error", {"align": {
|
||||||
'beforeColon': false,
|
"beforeColon": false,
|
||||||
'afterColon': true,
|
"afterColon": true,
|
||||||
'on': 'value'
|
"on": "value"
|
||||||
}}],
|
}}],
|
||||||
// Prohibits padding inside curly braces.
|
// Prohibits padding inside curly braces.
|
||||||
'object-curly-spacing': ['error', 'never'],
|
"object-curly-spacing": ["error", "never"],
|
||||||
'no-use-before-define': 'off', // messageAPI
|
"no-use-before-define": "off", // message types
|
||||||
'default-case': 'off',
|
"default-case": "off",
|
||||||
|
"prettier/prettier": ["error", {
|
||||||
'flowtype/boolean-style': ['error', 'boolean'],
|
"singleQuote": true,
|
||||||
'flowtype/define-flow-type': 'warn',
|
"useTabs": true,
|
||||||
'flowtype/generic-spacing': ['error', 'never'],
|
}]
|
||||||
'flowtype/no-primitive-constructor-types': 'error',
|
|
||||||
'flowtype/no-weak-types': 'error',
|
|
||||||
'flowtype/object-type-delimiter': ['error', 'comma'],
|
|
||||||
'flowtype/require-valid-file-annotation': 'error',
|
|
||||||
'flowtype/semi': ['error', 'always'],
|
|
||||||
'flowtype/space-after-type-colon': ['error', 'always'],
|
|
||||||
'flowtype/space-before-generic-bracket': ['error', 'never'],
|
|
||||||
'flowtype/space-before-type-colon': ['error', 'never'],
|
|
||||||
'flowtype/union-intersection-spacing': ['error', 'always'],
|
|
||||||
'flowtype/use-flow-type': 'warn',
|
|
||||||
'flowtype/valid-syntax': 'warn',
|
|
||||||
},
|
},
|
||||||
'settings': {
|
"settings": {
|
||||||
'flowtype': {
|
"import/resolver": {
|
||||||
'onlyFilesWithFlowAnnotation': true,
|
"node": {
|
||||||
|
"paths": ["components"] // import './components/Component' -> import 'Component'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"flowtype": {
|
||||||
|
"onlyFilesWithFlowAnnotation": true
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,3 +7,4 @@ node_modules/jss/flow-typed
|
||||||
|
|
||||||
[options]
|
[options]
|
||||||
include_warnings=true
|
include_warnings=true
|
||||||
|
module.name_mapper='\(.*\)$' -> '<PROJECT_ROOT>/\1'
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@
|
||||||
import React, {Component} from 'react';
|
import React, {Component} from 'react';
|
||||||
import type {ChildrenArray} from 'react';
|
import type {ChildrenArray} from 'react';
|
||||||
|
|
||||||
import Grid from 'material-ui/Grid';
|
import Grid from '@material-ui/core/Grid';
|
||||||
|
|
||||||
// styles contains the constant styles of the component.
|
// styles contains the constant styles of the component.
|
||||||
const styles = {
|
const styles = {
|
||||||
|
|
@ -33,7 +33,7 @@ const styles = {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
padding: 0,
|
padding: 0,
|
||||||
},
|
},
|
||||||
}
|
};
|
||||||
|
|
||||||
export type Props = {
|
export type Props = {
|
||||||
children: ChildrenArray<React$Element<any>>,
|
children: ChildrenArray<React$Element<any>>,
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
|
|
||||||
import React, {Component} from 'react';
|
import React, {Component} from 'react';
|
||||||
|
|
||||||
import Typography from 'material-ui/Typography';
|
import Typography from '@material-ui/core/Typography';
|
||||||
import {styles} from '../common';
|
import {styles} from '../common';
|
||||||
|
|
||||||
// multiplier multiplies a number by another.
|
// multiplier multiplies a number by another.
|
||||||
|
|
@ -70,7 +70,8 @@ export const bytePerSecPlotter = <T>(text: string, mapper: (T => T) = multiplier
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<Typography type='caption' color='inherit'>
|
<Typography type='caption' color='inherit'>
|
||||||
<span style={styles.light}>{text}</span> {simplifyBytes(p)}/s
|
<span style={styles.light}>{text}</span>
|
||||||
|
{simplifyBytes(p)}/s
|
||||||
</Typography>
|
</Typography>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -18,14 +18,14 @@
|
||||||
|
|
||||||
import React, {Component} from 'react';
|
import React, {Component} from 'react';
|
||||||
|
|
||||||
import withStyles from 'material-ui/styles/withStyles';
|
import withStyles from '@material-ui/core/styles/withStyles';
|
||||||
|
|
||||||
import Header from './Header';
|
import Header from 'Header';
|
||||||
import Body from './Body';
|
import Body from 'Body';
|
||||||
|
import {inserter as logInserter, SAME} from 'Logs';
|
||||||
|
import {inserter as peerInserter} from 'Network';
|
||||||
import {MENU} from '../common';
|
import {MENU} from '../common';
|
||||||
import type {Content} from '../types/content';
|
import type {Content} from '../types/content';
|
||||||
import {inserter as logInserter, SAME} from './Logs';
|
|
||||||
import {inserter as peerInserter} from './Network';
|
|
||||||
|
|
||||||
// deepUpdate updates an object corresponding to the given update data, which has
|
// deepUpdate updates an object corresponding to the given update data, which has
|
||||||
// the shape of the same structure as the original object. updater also has the same
|
// the shape of the same structure as the original object. updater also has the same
|
||||||
|
|
@ -38,7 +38,6 @@ import {inserter as peerInserter} from './Network';
|
||||||
// of the update.
|
// of the update.
|
||||||
const deepUpdate = (updater: Object, update: Object, prev: Object): $Shape<Content> => {
|
const deepUpdate = (updater: Object, update: Object, prev: Object): $Shape<Content> => {
|
||||||
if (typeof update === 'undefined') {
|
if (typeof update === 'undefined') {
|
||||||
// TODO (kurkomisi): originally this was deep copy, investigate it.
|
|
||||||
return prev;
|
return prev;
|
||||||
}
|
}
|
||||||
if (typeof updater === 'function') {
|
if (typeof updater === 'function') {
|
||||||
|
|
|
||||||
|
|
@ -18,13 +18,16 @@
|
||||||
|
|
||||||
import React, {Component} from 'react';
|
import React, {Component} from 'react';
|
||||||
|
|
||||||
import withStyles from 'material-ui/styles/withStyles';
|
import withStyles from '@material-ui/core/styles/withStyles';
|
||||||
import Typography from 'material-ui/Typography';
|
import Typography from '@material-ui/core/Typography';
|
||||||
import Grid from 'material-ui/Grid';
|
import Grid from '@material-ui/core/Grid';
|
||||||
import {ResponsiveContainer, AreaChart, Area, Tooltip} from 'recharts';
|
import ResponsiveContainer from 'recharts/es6/component/ResponsiveContainer';
|
||||||
|
import AreaChart from 'recharts/es6/chart/AreaChart';
|
||||||
|
import Area from 'recharts/es6/cartesian/Area';
|
||||||
|
import Tooltip from 'recharts/es6/component/Tooltip';
|
||||||
|
|
||||||
import ChartRow from './ChartRow';
|
import ChartRow from 'ChartRow';
|
||||||
import CustomTooltip, {bytePlotter, bytePerSecPlotter, percentPlotter, multiplier} from './CustomTooltip';
|
import CustomTooltip, {bytePlotter, bytePerSecPlotter, percentPlotter, multiplier} from 'CustomTooltip';
|
||||||
import {styles as commonStyles} from '../common';
|
import {styles as commonStyles} from '../common';
|
||||||
import type {General, System} from '../types/content';
|
import type {General, System} from '../types/content';
|
||||||
|
|
||||||
|
|
@ -53,6 +56,10 @@ const styles = {
|
||||||
height: '100%',
|
height: '100%',
|
||||||
width: '99%',
|
width: '99%',
|
||||||
},
|
},
|
||||||
|
link: {
|
||||||
|
color: 'inherit',
|
||||||
|
textDecoration: 'none',
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
// themeStyles returns the styles generated from the theme for the component.
|
// themeStyles returns the styles generated from the theme for the component.
|
||||||
|
|
@ -73,9 +80,11 @@ export type Props = {
|
||||||
shouldUpdate: Object,
|
shouldUpdate: Object,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
type State = {};
|
||||||
|
|
||||||
// Footer renders the footer of the dashboard.
|
// Footer renders the footer of the dashboard.
|
||||||
class Footer extends Component<Props> {
|
class Footer extends Component<Props, State> {
|
||||||
shouldComponentUpdate(nextProps) {
|
shouldComponentUpdate(nextProps: Readonly<Props>, nextState: Readonly<State>, nextContext: any) {
|
||||||
return typeof nextProps.shouldUpdate.general !== 'undefined' || typeof nextProps.shouldUpdate.system !== 'undefined';
|
return typeof nextProps.shouldUpdate.general !== 'undefined' || typeof nextProps.shouldUpdate.system !== 'undefined';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -165,7 +174,12 @@ class Footer extends Component<Props> {
|
||||||
{general.commit && (
|
{general.commit && (
|
||||||
<Typography type='caption' color='inherit'>
|
<Typography type='caption' color='inherit'>
|
||||||
<span style={commonStyles.light}>{'Commit '}</span>
|
<span style={commonStyles.light}>{'Commit '}</span>
|
||||||
<a href={`https://github.com/ethereum/go-ethereum/commit/${general.commit}`} target='_blank' style={{color: 'inherit', textDecoration: 'none'}} >
|
<a
|
||||||
|
href={`https://github.com/ethereum/go-ethereum/commit/${general.commit}`}
|
||||||
|
target='_blank'
|
||||||
|
rel='noopener noreferrer'
|
||||||
|
style={styles.link}
|
||||||
|
>
|
||||||
{general.commit.substring(0, 8)}
|
{general.commit.substring(0, 8)}
|
||||||
</a>
|
</a>
|
||||||
</Typography>
|
</Typography>
|
||||||
|
|
|
||||||
|
|
@ -18,13 +18,13 @@
|
||||||
|
|
||||||
import React, {Component} from 'react';
|
import React, {Component} from 'react';
|
||||||
|
|
||||||
import withStyles from 'material-ui/styles/withStyles';
|
import withStyles from '@material-ui/core/styles/withStyles';
|
||||||
import AppBar from 'material-ui/AppBar';
|
import AppBar from '@material-ui/core/AppBar';
|
||||||
import Toolbar from 'material-ui/Toolbar';
|
import Toolbar from '@material-ui/core/Toolbar';
|
||||||
import IconButton from 'material-ui/IconButton';
|
import IconButton from '@material-ui/core/IconButton';
|
||||||
import Icon from 'material-ui/Icon';
|
import Icon from '@material-ui/core/Icon';
|
||||||
import MenuIcon from 'material-ui-icons/Menu';
|
import MenuIcon from '@material-ui/icons/Menu';
|
||||||
import Typography from 'material-ui/Typography';
|
import Typography from '@material-ui/core/Typography';
|
||||||
|
|
||||||
// styles contains the constant styles of the component.
|
// styles contains the constant styles of the component.
|
||||||
const styles = {
|
const styles = {
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,8 @@
|
||||||
|
|
||||||
import React, {Component} from 'react';
|
import React, {Component} from 'react';
|
||||||
|
|
||||||
import List, {ListItem} from 'material-ui/List';
|
import List from '@material-ui/core/List';
|
||||||
|
import ListItem from '@material-ui/core/ListItem';
|
||||||
import escapeHtml from 'escape-html';
|
import escapeHtml from 'escape-html';
|
||||||
import type {Record, Content, LogsMessage, Logs as LogsType} from '../types/content';
|
import type {Record, Content, LogsMessage, Logs as LogsType} from '../types/content';
|
||||||
|
|
||||||
|
|
@ -251,15 +252,15 @@ class Logs extends Component<Props, State> {
|
||||||
// atBottom checks if the scroll position it at the bottom of the container.
|
// atBottom checks if the scroll position it at the bottom of the container.
|
||||||
atBottom = () => {
|
atBottom = () => {
|
||||||
const {container} = this.props;
|
const {container} = this.props;
|
||||||
return container.scrollHeight - container.scrollTop <=
|
return container.scrollHeight - container.scrollTop
|
||||||
container.clientHeight + container.scrollHeight * requestBand;
|
<= container.clientHeight + container.scrollHeight * requestBand;
|
||||||
};
|
};
|
||||||
|
|
||||||
// beforeUpdate is called by the parent component, saves the previous scroll position
|
// beforeUpdate is called by the parent component, saves the previous scroll position
|
||||||
// and the height of the first log chunk, which can be deleted during the insertion.
|
// and the height of the first log chunk, which can be deleted during the insertion.
|
||||||
beforeUpdate = () => {
|
beforeUpdate = () => {
|
||||||
let firstHeight = 0;
|
let firstHeight = 0;
|
||||||
let chunkList = this.content.children[1];
|
const chunkList = this.content.children[1];
|
||||||
if (chunkList && chunkList.children[0]) {
|
if (chunkList && chunkList.children[0]) {
|
||||||
firstHeight = chunkList.children[0].clientHeight;
|
firstHeight = chunkList.children[0].clientHeight;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -18,12 +18,12 @@
|
||||||
|
|
||||||
import React, {Component} from 'react';
|
import React, {Component} from 'react';
|
||||||
|
|
||||||
import withStyles from 'material-ui/styles/withStyles';
|
import withStyles from '@material-ui/core/styles/withStyles';
|
||||||
|
|
||||||
|
import Network from 'Network';
|
||||||
|
import Logs from 'Logs';
|
||||||
|
import Footer from 'Footer';
|
||||||
import {MENU} from '../common';
|
import {MENU} from '../common';
|
||||||
import Network from './Network';
|
|
||||||
import Logs from './Logs';
|
|
||||||
import Footer from './Footer';
|
|
||||||
import type {Content} from '../types/content';
|
import type {Content} from '../types/content';
|
||||||
|
|
||||||
// styles contains the constant styles of the component.
|
// styles contains the constant styles of the component.
|
||||||
|
|
@ -55,21 +55,16 @@ export type Props = {
|
||||||
send: string => void,
|
send: string => void,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
type State = {};
|
||||||
|
|
||||||
// Main renders the chosen content.
|
// Main renders the chosen content.
|
||||||
class Main extends Component<Props> {
|
class Main extends Component<Props, State> {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.container = React.createRef();
|
this.container = React.createRef();
|
||||||
this.content = React.createRef();
|
this.content = React.createRef();
|
||||||
}
|
}
|
||||||
|
|
||||||
getSnapshotBeforeUpdate() {
|
|
||||||
if (this.content && typeof this.content.beforeUpdate === 'function') {
|
|
||||||
return this.content.beforeUpdate();
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidUpdate(prevProps, prevState, snapshot) {
|
componentDidUpdate(prevProps, prevState, snapshot) {
|
||||||
if (this.content && typeof this.content.didUpdate === 'function') {
|
if (this.content && typeof this.content.didUpdate === 'function') {
|
||||||
this.content.didUpdate(prevProps, prevState, snapshot);
|
this.content.didUpdate(prevProps, prevState, snapshot);
|
||||||
|
|
@ -82,6 +77,13 @@ class Main extends Component<Props> {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
getSnapshotBeforeUpdate(prevProps: Readonly<P>, prevState: Readonly<S>) {
|
||||||
|
if (this.content && typeof this.content.beforeUpdate === 'function') {
|
||||||
|
return this.content.beforeUpdate();
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
classes, active, content, shouldUpdate,
|
classes, active, content, shouldUpdate,
|
||||||
|
|
|
||||||
|
|
@ -18,11 +18,14 @@
|
||||||
|
|
||||||
import React, {Component} from 'react';
|
import React, {Component} from 'react';
|
||||||
|
|
||||||
import Table, {TableHead, TableBody, TableRow, TableCell} from 'material-ui/Table';
|
import Table from '@material-ui/core/Table';
|
||||||
|
import TableHead from '@material-ui/core/TableHead';
|
||||||
|
import TableBody from '@material-ui/core/TableBody';
|
||||||
|
import TableRow from '@material-ui/core/TableRow';
|
||||||
|
import TableCell from '@material-ui/core/TableCell';
|
||||||
import type {Network as NetworkType, PeerBundle, Peer} from '../types/content';
|
import type {Network as NetworkType, PeerBundle, Peer} from '../types/content';
|
||||||
|
|
||||||
// inserter is a state updater function for the main component, which inserts the new log chunk into the chunk array.
|
// inserter is a state updater function for the main component, which handles the peers.
|
||||||
// limit is the maximum length of the chunk array, used in order to prevent the browser from OOM.
|
|
||||||
export const inserter = (update: {[string]: PeerBundle}, prev: {[string]: PeerBundle}) => {
|
export const inserter = (update: {[string]: PeerBundle}, prev: {[string]: PeerBundle}) => {
|
||||||
Object.keys(update).forEach((ip) => {
|
Object.keys(update).forEach((ip) => {
|
||||||
if (!update[ip]) {
|
if (!update[ip]) {
|
||||||
|
|
@ -95,6 +98,8 @@ export type Props = {
|
||||||
shouldUpdate: Object,
|
shouldUpdate: Object,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
type State = {};
|
||||||
|
|
||||||
// Network renders the network page.
|
// Network renders the network page.
|
||||||
class Network extends Component<Props, State> {
|
class Network extends Component<Props, State> {
|
||||||
formatTime = (t) => {
|
formatTime = (t) => {
|
||||||
|
|
|
||||||
|
|
@ -18,9 +18,12 @@
|
||||||
|
|
||||||
import React, {Component} from 'react';
|
import React, {Component} from 'react';
|
||||||
|
|
||||||
import withStyles from 'material-ui/styles/withStyles';
|
import withStyles from '@material-ui/core/styles/withStyles';
|
||||||
import List, {ListItem, ListItemIcon, ListItemText} from 'material-ui/List';
|
import List from '@material-ui/core/List';
|
||||||
import Icon from 'material-ui/Icon';
|
import ListItem from '@material-ui/core/ListItem';
|
||||||
|
import ListItemIcon from '@material-ui/core/ListItemIcon';
|
||||||
|
import ListItemText from '@material-ui/core/ListItemText';
|
||||||
|
import Icon from '@material-ui/core/Icon';
|
||||||
import Transition from 'react-transition-group/Transition';
|
import Transition from 'react-transition-group/Transition';
|
||||||
import {Icon as FontAwesome} from 'react-fa';
|
import {Icon as FontAwesome} from 'react-fa';
|
||||||
|
|
||||||
|
|
@ -57,9 +60,11 @@ export type Props = {
|
||||||
changeContent: string => void,
|
changeContent: string => void,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
type State = {}
|
||||||
|
|
||||||
// SideBar renders the sidebar of the dashboard.
|
// SideBar renders the sidebar of the dashboard.
|
||||||
class SideBar extends Component<Props> {
|
class SideBar extends Component<Props, State> {
|
||||||
shouldComponentUpdate(nextProps) {
|
shouldComponentUpdate(nextProps: Readonly<Props>, nextState: Readonly<State>, nextContext: any) {
|
||||||
return nextProps.opened !== this.props.opened;
|
return nextProps.opened !== this.props.opened;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -16,10 +16,8 @@
|
||||||
|
|
||||||
// fa-only-woff-loader removes the .eot, .ttf, .svg dependencies of the FontAwesome library,
|
// fa-only-woff-loader removes the .eot, .ttf, .svg dependencies of the FontAwesome library,
|
||||||
// because they produce unused extra blobs.
|
// because they produce unused extra blobs.
|
||||||
module.exports = function(content) {
|
module.exports = content => content
|
||||||
return content
|
|
||||||
.replace(/src.*url(?!.*url.*(\.eot)).*(\.eot)[^;]*;/, '')
|
.replace(/src.*url(?!.*url.*(\.eot)).*(\.eot)[^;]*;/, '')
|
||||||
.replace(/url(?!.*url.*(\.eot)).*(\.eot)[^,]*,/, '')
|
.replace(/url(?!.*url.*(\.eot)).*(\.eot)[^,]*,/, '')
|
||||||
.replace(/url(?!.*url.*(\.ttf)).*(\.ttf)[^,]*,/, '')
|
.replace(/url(?!.*url.*(\.ttf)).*(\.ttf)[^,]*,/, '')
|
||||||
.replace(/,[^,]*url(?!.*url.*(\.svg)).*(\.svg)[^;]*;/, ';');
|
.replace(/,[^,]*url(?!.*url.*(\.svg)).*(\.svg)[^;]*;/, ';');
|
||||||
};
|
|
||||||
|
|
|
||||||
|
|
@ -21,6 +21,6 @@
|
||||||
</head>
|
</head>
|
||||||
<body style="height: 100%; margin: 0">
|
<body style="height: 100%; margin: 0">
|
||||||
<div id="dashboard" style="height: 100%"></div>
|
<div id="dashboard" style="height: 100%"></div>
|
||||||
<script src="bundle.js"></script>
|
<script type="text/javascript" src="bundle.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -19,8 +19,8 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {render} from 'react-dom';
|
import {render} from 'react-dom';
|
||||||
|
|
||||||
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
|
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
|
||||||
import createMuiTheme from 'material-ui/styles/createMuiTheme';
|
import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
|
||||||
|
|
||||||
import Dashboard from './components/Dashboard';
|
import Dashboard from './components/Dashboard';
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,48 +1,61 @@
|
||||||
{
|
{
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"babel-core": "^6.26.0",
|
"@material-ui/core": "^1.4.3",
|
||||||
"babel-eslint": "^8.2.1",
|
"@material-ui/icons": "^2.0.1",
|
||||||
"babel-loader": "^7.1.2",
|
"babel-core": "^6.26.3",
|
||||||
|
"babel-eslint": "^8.2.6",
|
||||||
|
"babel-loader": "^7.1.5",
|
||||||
"babel-plugin-transform-class-properties": "^6.24.1",
|
"babel-plugin-transform-class-properties": "^6.24.1",
|
||||||
"babel-plugin-transform-decorators-legacy": "^1.3.4",
|
"babel-plugin-transform-decorators-legacy": "^1.3.5",
|
||||||
"babel-plugin-transform-flow-strip-types": "^6.22.0",
|
"babel-plugin-transform-flow-strip-types": "^6.22.0",
|
||||||
"babel-plugin-transform-runtime": "^6.23.0",
|
"babel-plugin-transform-runtime": "^6.23.0",
|
||||||
"babel-preset-env": "^1.6.1",
|
"babel-preset-env": "^1.7.0",
|
||||||
"babel-preset-react": "^6.24.1",
|
"babel-preset-react": "^6.24.1",
|
||||||
"babel-preset-stage-0": "^6.24.1",
|
"babel-preset-stage-0": "^6.24.1",
|
||||||
"babel-runtime": "^6.26.0",
|
"babel-runtime": "^6.26.0",
|
||||||
"classnames": "^2.2.5",
|
"classnames": "^2.2.6",
|
||||||
"css-loader": "^0.28.9",
|
"css-loader": "^1.0.0",
|
||||||
"escape-html": "^1.0.3",
|
"escape-html": "^1.0.3",
|
||||||
"eslint": "^4.16.0",
|
"eslint": "^4.19.1",
|
||||||
"eslint-config-airbnb": "^16.1.0",
|
"eslint-config-airbnb": "^17.0.0",
|
||||||
"eslint-loader": "^2.0.0",
|
"eslint-config-prettier": "^2.9.0",
|
||||||
"eslint-plugin-flowtype": "^2.41.0",
|
"eslint-loader": "^2.1.0",
|
||||||
"eslint-plugin-import": "^2.8.0",
|
"eslint-plugin-flowtype": "^2.50.0",
|
||||||
"eslint-plugin-jsx-a11y": "^6.0.3",
|
"eslint-plugin-import": "^2.13.0",
|
||||||
"eslint-plugin-react": "^7.5.1",
|
"eslint-plugin-jsx-a11y": "^6.1.1",
|
||||||
"file-loader": "^1.1.6",
|
"eslint-plugin-node": "^7.0.1",
|
||||||
"flow-bin": "^0.63.1",
|
"eslint-plugin-prettier": "^2.6.2",
|
||||||
"flow-bin-loader": "^1.0.2",
|
"eslint-plugin-promise": "^3.8.0",
|
||||||
"flow-typed": "^2.2.3",
|
"eslint-plugin-react": "^7.10.0",
|
||||||
"material-ui": "^1.0.0-beta.30",
|
"file-loader": "^1.1.11",
|
||||||
"material-ui-icons": "^1.0.0-beta.17",
|
"flow-bin": "^0.78.0",
|
||||||
|
"flow-bin-loader": "^1.0.3",
|
||||||
|
"flow-typed": "^2.5.1",
|
||||||
"path": "^0.12.7",
|
"path": "^0.12.7",
|
||||||
"react": "^16.2.0",
|
"prettier": "^1.14.2",
|
||||||
"react-dom": "^16.2.0",
|
"prettier-eslint": "^8.8.2",
|
||||||
|
"react": "^16.4.2",
|
||||||
|
"react-dom": "^16.4.2",
|
||||||
"react-fa": "^5.0.0",
|
"react-fa": "^5.0.0",
|
||||||
"react-transition-group": "^2.2.1",
|
"react-transition-group": "^2.4.0",
|
||||||
"recharts": "^1.0.0-beta.9",
|
"recharts": "^1.1.0",
|
||||||
"style-loader": "^0.19.1",
|
"style-loader": "^0.22.1",
|
||||||
|
"uglifyjs-webpack-plugin": "^1.2.7",
|
||||||
"url": "^0.11.0",
|
"url": "^0.11.0",
|
||||||
"url-loader": "^0.6.2",
|
"url-loader": "^1.0.1",
|
||||||
"webpack": "^3.10.0",
|
"webpack": "^4.16.5",
|
||||||
"webpack-dev-server": "^2.11.1"
|
"webpack-cli": "^3.1.0",
|
||||||
|
"webpack-dev-server": "^3.1.5"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "NODE_ENV=production webpack",
|
"build": "NODE_ENV=production webpack",
|
||||||
"stats": "webpack --profile --json > stats.json",
|
"stats": "webpack --profile --json > stats.json",
|
||||||
"dev": "webpack-dev-server --port 8081",
|
"dev": "webpack-dev-server",
|
||||||
"flow": "flow-typed install"
|
"install-flow": "flow-typed install",
|
||||||
}
|
"flow": "flow status --show-all-errors",
|
||||||
|
"eslint": "eslint **/*",
|
||||||
|
"lint": "yarn eslint && yarn flow",
|
||||||
|
"eslint-check": "eslint --print-config .eslintrc | eslint-config-prettier-check"
|
||||||
|
},
|
||||||
|
"license": "LGPL-3.0-or-later"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -15,23 +15,48 @@
|
||||||
// along with the go-ethereum library. If not, see <http://www.gnu.org/licenses/>.
|
// along with the go-ethereum library. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
|
||||||
const webpack = require('webpack');
|
const webpack = require('webpack');
|
||||||
|
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
mode: 'development',
|
||||||
|
target: 'web',
|
||||||
|
entry: {
|
||||||
|
bundle: './index',
|
||||||
|
},
|
||||||
|
output: {
|
||||||
|
filename: '[name].js',
|
||||||
|
path: path.resolve(__dirname, ''),
|
||||||
|
// sourceMapFilename: '[file].map',
|
||||||
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
|
modules: [
|
||||||
|
'node_modules',
|
||||||
|
path.resolve(__dirname, 'components'), // import './components/Component' -> import 'Component'
|
||||||
|
],
|
||||||
|
// alias: {
|
||||||
|
// root: path.resolve(__dirname, ''),
|
||||||
|
// },
|
||||||
extensions: ['.js', '.jsx'],
|
extensions: ['.js', '.jsx'],
|
||||||
},
|
},
|
||||||
entry: './index',
|
// devtool: 'source-map',
|
||||||
|
optimization: {
|
||||||
|
minimize: true,
|
||||||
|
namedModules: true, // Module names instead of numbers - resolves the large diff problem.
|
||||||
|
minimizer: [
|
||||||
|
new UglifyJsPlugin({
|
||||||
|
uglifyOptions: {
|
||||||
|
compress: true,
|
||||||
output: {
|
output: {
|
||||||
path: path.resolve(__dirname, ''),
|
comments: false,
|
||||||
filename: 'bundle.js',
|
beautify: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// sourceMap: true,
|
||||||
|
}),
|
||||||
|
],
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
new webpack.optimize.UglifyJsPlugin({
|
|
||||||
comments: false,
|
|
||||||
mangle: false,
|
|
||||||
beautify: true,
|
|
||||||
}),
|
|
||||||
new webpack.DefinePlugin({
|
new webpack.DefinePlugin({
|
||||||
PROD: process.env.NODE_ENV === 'production',
|
PROD: process.env.NODE_ENV === 'production',
|
||||||
}),
|
}),
|
||||||
|
|
@ -61,17 +86,32 @@ module.exports = {
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /font-awesome\.css$/,
|
test: /\.css$/,
|
||||||
|
oneOf: [
|
||||||
|
{
|
||||||
|
test: /font-awesome/,
|
||||||
use: [
|
use: [
|
||||||
'style-loader',
|
'style-loader',
|
||||||
'css-loader',
|
'css-loader',
|
||||||
path.resolve(__dirname, './fa-only-woff-loader.js'),
|
path.resolve(__dirname, './fa-only-woff-loader.js'),
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
use: [
|
||||||
|
'style-loader',
|
||||||
|
'css-loader',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
{
|
{
|
||||||
test: /\.woff2?$/, // font-awesome icons
|
test: /\.woff2?$/, // font-awesome icons
|
||||||
use: 'url-loader',
|
use: 'url-loader',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
devServer: {
|
||||||
|
port: 8081,
|
||||||
|
compress: true,
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue