gaspersic/go-ethereum
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

dashboard: CPU, memory, diskIO and traffic on the footer (#15950)

Browse Source 
* dashboard: footer, deep state update

* dashboard: resolve asset path

* dashboard: prevent state update on every reconnection

* dashboard: fix linter issue

* dashboard, cmd: minor UI fix, include commit hash

* dashboard: gitCommit renamed to commit

* dashboard: move the geth version to the right, make commit optional

* dashboard: memory, traffic and CPU on footer

* dashboard: fix merge

* dashboard: CPU, diskIO on footer

* dashboard: rename variables, use group declaration

* dashboard: docs
This commit is contained in:
Kurkó Mihály
2018-01-23 22:51:04 +02:00
committed by Péter Szilágyi
parent ec96216d16
commit 05ade19302
111 changed files with 13162 additions and 3158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
dashboard/assets/components/Header.jsx
View File

@ -26,18 +26,22 @@ import IconButton from 'material-ui/IconButton';
import Typography from 'material-ui/Typography';
import ChevronLeftIcon from 'material-ui-icons/ChevronLeft';
import {DURATION} from './Common';
import {DURATION} from '../common';
// arrowDefault is the default style of the arrow button.
const arrowDefault = {
transition: `transform ${DURATION}ms`,
// styles contains the constant styles of the component.
const styles = {
arrow: {
default: {
transition: `transform ${DURATION}ms`,
},
transition: {
entered: {transform: 'rotate(180deg)'},
},
},
};
// arrowTransition is the additional style of the arrow button corresponding to the transition's state.
const arrowTransition = {
entered: {transform: 'rotate(180deg)'},
};
// Styles for the Header component.
const styles = theme => ({
// themeStyles returns the styles generated from the theme for the component.
const themeStyles = (theme: Object) => ({
header: {
backgroundColor: theme.palette.background.appBar,
color: theme.palette.getContrastText(theme.palette.background.appBar),
@ -47,53 +51,45 @@ const styles = theme => ({
paddingLeft: theme.spacing.unit,
paddingRight: theme.spacing.unit,
},
mainText: {
title: {
paddingLeft: theme.spacing.unit,
},
});
export type Props = {
classes: Object,
classes: Object, // injected by withStyles()
opened: boolean,
openSideBar: () => {},
closeSideBar: () => {},
switchSideBar: () => void,
};
// Header renders the header of the dashboard.
class Header extends Component<Props> {
shouldComponentUpdate(nextProps) {
return nextProps.opened !== this.props.opened;
}
// changeSideBar opens or closes the sidebar corresponding to the previous state.
changeSideBar = () => {
if (this.props.opened) {
this.props.closeSideBar();
} else {
this.props.openSideBar();
}
};
// arrowButton is connected to the sidebar; changes its state.
arrowButton = (transitionState: string) => (
<IconButton onClick={this.changeSideBar}>
// arrow renders a button, which changes the sidebar's state.
arrow = (transitionState: string) => (
<IconButton onClick={this.props.switchSideBar}>
<ChevronLeftIcon
style={{
...arrowDefault,
...arrowTransition[transitionState],
...styles.arrow.default,
...styles.arrow.transition[transitionState],
}}
/>
</IconButton>
);
render() {
const {classes, opened} = this.props; // The classes property is injected by withStyles().
const {classes, opened} = this.props;
return (
<AppBar position="static" className={classes.header}>
<AppBar position='static' className={classes.header}>
<Toolbar className={classes.toolbar}>
<Transition mountOnEnter in={opened} timeout={{enter: DURATION}}>
{this.arrowButton}
{this.arrow}
</Transition>
<Typography type="title" color="inherit" noWrap className={classes.mainText}>
<Typography type='title' color='inherit' noWrap className={classes.title}>
Go Ethereum Dashboard
</Typography>
</Toolbar>
@ -102,4 +98,4 @@ class Header extends Component<Props> {
}
}
export default withStyles(styles)(Header);
export default withStyles(themeStyles)(Header);