Status page updates (#3774)

* Allow Page to create optional Actionbar

* Typo

* Display last block.timestamp

* Remove unnneeded console.log

* Re-do git mv

* git mv

* Force build changes

* Resolving case sensitivity issues

* Swapped to margin at bottom
This commit is contained in:
Jaco Greeff 2016-12-10 22:21:32 +01:00 committed by GitHub
parent 08a47ea2d4
commit 173a88804a
19 changed files with 82 additions and 46 deletions

View File

@ -54,7 +54,10 @@ export default class Status {
this._api.eth this._api.eth
.getBlockByNumber(blockNumber) .getBlockByNumber(blockNumber)
.then((block) => { .then((block) => {
this._store.dispatch(statusCollection({ gasLimit: block.gasLimit })); this._store.dispatch(statusCollection({
blockTimestamp: block.timestamp,
gasLimit: block.gasLimit
}));
}) })
.catch((error) => { .catch((error) => {
console.warn('status._subscribeBlockNumber', 'getBlockByNumber', error); console.warn('status._subscribeBlockNumber', 'getBlockByNumber', error);

View File

@ -19,6 +19,7 @@ import { handleActions } from 'redux-actions';
const initialState = { const initialState = {
blockNumber: new BigNumber(0), blockNumber: new BigNumber(0),
blockTimestamp: new Date(),
devLogs: [], devLogs: [],
devLogsLevels: null, devLogsLevels: null,
devLogsEnabled: false, devLogsEnabled: false,

View File

@ -17,11 +17,13 @@
import React, { Component, PropTypes } from 'react'; import React, { Component, PropTypes } from 'react';
import { Toolbar, ToolbarGroup } from 'material-ui/Toolbar'; import { Toolbar, ToolbarGroup } from 'material-ui/Toolbar';
import { nodeOrStringProptype } from '~/util/proptypes';
import styles from './actionbar.css'; import styles from './actionbar.css';
export default class Actionbar extends Component { export default class Actionbar extends Component {
static propTypes = { static propTypes = {
title: PropTypes.string, title: nodeOrStringProptype(),
buttons: PropTypes.array, buttons: PropTypes.array,
children: PropTypes.node, children: PropTypes.node,
className: PropTypes.string className: PropTypes.string

View File

@ -18,7 +18,7 @@
.layout { .layout {
padding: 0.25em 0.25em 1em 0.25em; padding: 0.25em 0.25em 1em 0.25em;
> * { &>div {
margin-bottom: 0.75em; margin-bottom: 0.75em;
} }
} }

View File

@ -16,22 +16,39 @@
import React, { Component, PropTypes } from 'react'; import React, { Component, PropTypes } from 'react';
import Actionbar from '../Actionbar';
import { nodeOrStringProptype } from '~/util/proptypes';
import styles from './page.css'; import styles from './page.css';
export default class Page extends Component { export default class Page extends Component {
static propTypes = { static propTypes = {
buttons: PropTypes.array,
className: PropTypes.string, className: PropTypes.string,
children: PropTypes.node children: PropTypes.node,
title: nodeOrStringProptype()
}; };
render () { render () {
const { className, children } = this.props; const { buttons, className, children, title } = this.props;
const classes = `${styles.layout} ${className}`; const classes = `${styles.layout} ${className}`;
let actionbar = null;
if (title || buttons) {
actionbar = (
<Actionbar
buttons={ buttons }
title={ title } />
);
}
return ( return (
<div>
{ actionbar }
<div className={ classes }> <div className={ classes }>
{ children } { children }
</div> </div>
</div>
); );
} }
} }

View File

@ -23,8 +23,7 @@ export default class Signer extends Component {
render () { render () {
return ( return (
<div> <div>
<Actionbar <Actionbar title='Trusted Signer' />
title='Trusted Signer' />
<RequestsPage /> <RequestsPage />
</div> </div>
); );

View File

@ -30,12 +30,6 @@ export default class Store {
} }
} }
@action unsubscribe () {
if (this._timeoutId) {
clearTimeout(this._timeoutId);
}
}
@action setBalance = (address, balance) => { @action setBalance = (address, balance) => {
this.setBalances({ [address]: balance }); this.setBalances({ [address]: balance });
} }
@ -50,6 +44,12 @@ export default class Store {
} }
} }
@action unsubscribe () {
if (this._timeoutId) {
clearTimeout(this._timeoutId);
}
}
fetchBalance (address) { fetchBalance (address) {
this._api.eth this._api.eth
.getBalance(address) .getBalance(address)

View File

@ -22,7 +22,7 @@ import ReorderIcon from 'material-ui/svg-icons/action/reorder';
import { Container } from '~/ui'; import { Container } from '~/ui';
import styles from './Debug.css'; import styles from './debug.css';
export default class Debug extends Component { export default class Debug extends Component {
static propTypes = { static propTypes = {

View File

@ -14,4 +14,4 @@
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
export default from './Debug'; export default from './debug';

View File

@ -14,4 +14,4 @@
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
export default from './MiningSettings'; export default from './miningSettings';

View File

@ -14,4 +14,4 @@
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
export default from './Status'; export default from './status';

View File

@ -28,10 +28,19 @@
content: ''; content: '';
} }
.blockinfo { .blockInfo {
font-size: 24px;
color: #aaa; color: #aaa;
line-height: 24px; font-size: 1.5em;
line-height: 1.5em;
}
.blockByline {
color: #aaa;
font-size: 0.75em;
}
.padBottom {
padding-bottom: 1.25em !important;
} }
.col, .col,

View File

@ -14,14 +14,16 @@
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import bytes from 'bytes'; import bytes from 'bytes';
import moment from 'moment';
import React, { Component, PropTypes } from 'react';
import { Container, ContainerTitle, Input } from '~/ui'; import { Container, ContainerTitle, Input } from '~/ui';
import styles from './Status.css';
import MiningSettings from '../MiningSettings'; import MiningSettings from '../MiningSettings';
import styles from './status.css';
export default class Status extends Component { export default class Status extends Component {
static propTypes = { static propTypes = {
nodeStatus: PropTypes.object.isRequired, nodeStatus: PropTypes.object.isRequired,
@ -44,23 +46,26 @@ export default class Status extends Component {
<div className={ styles.container }> <div className={ styles.container }>
<div className={ styles.row }> <div className={ styles.row }>
<div className={ styles.col3 }> <div className={ styles.col3 }>
<div className={ styles.col12 }> <div className={ `${styles.col12} ${styles.padBottom}` }>
<ContainerTitle title='best block' /> <ContainerTitle title='best block' />
<h2 { ...this._test('best-block') } className={ styles.blockinfo }> <div { ...this._test('best-block') } className={ styles.blockInfo }>
#{ nodeStatus.blockNumber.toFormat() } #{ nodeStatus.blockNumber.toFormat() }
</h2>
</div> </div>
<div className={ styles.col12 }> <div className={ styles.blockByline }>
{ moment().calendar(nodeStatus.blockTimestamp) }
</div>
</div>
<div className={ `${styles.col12} ${styles.padBottom}` }>
<ContainerTitle title='peers' /> <ContainerTitle title='peers' />
<h2 { ...this._test('peers') } className={ styles.blockinfo }> <div { ...this._test('peers') } className={ styles.blockInfo }>
{ peers } { peers }
</h2>
</div> </div>
<div className={ styles.col12 }> </div>
<div className={ `${styles.col12} ${styles.padBottom}` }>
<ContainerTitle title='hash rate' /> <ContainerTitle title='hash rate' />
<h2 { ...this._test('hashrate') } className={ styles.blockinfo }> <div { ...this._test('hashrate') } className={ styles.blockInfo }>
{ `${hashrate} H/s` } { `${hashrate} H/s` }
</h2> </div>
</div> </div>
</div> </div>
<div className={ styles.col5 }> <div className={ styles.col5 }>

View File

@ -14,4 +14,4 @@
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
export default from './StatusPage'; export default from './statusPage';

View File

@ -14,5 +14,9 @@
/* You should have received a copy of the GNU General Public License /* You should have received a copy of the GNU General Public License
/* along with Parity. If not, see <http://www.gnu.org/licenses/>. /* along with Parity. If not, see <http://www.gnu.org/licenses/>.
*/ */
.container {
.body {
&>div {
margin-bottom: 0.25em;
}
} }

View File

@ -23,6 +23,8 @@ import { clearStatusLogs, toggleStatusLogs, toggleStatusRefresh } from '~/redux/
import Debug from '../../components/Debug'; import Debug from '../../components/Debug';
import Status from '../../components/Status'; import Status from '../../components/Status';
import styles from './statusPage.css';
class StatusPage extends Component { class StatusPage extends Component {
static propTypes = { static propTypes = {
nodeStatus: PropTypes.object.isRequired, nodeStatus: PropTypes.object.isRequired,
@ -39,7 +41,7 @@ class StatusPage extends Component {
render () { render () {
return ( return (
<div> <div className={ styles.body }>
<Status { ...this.props } /> <Status { ...this.props } />
<Debug { ...this.props } /> <Debug { ...this.props } />
</div> </div>

View File

@ -16,22 +16,16 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Actionbar, Page } from '~/ui'; import { Page } from '~/ui';
import StatusPage from './containers/StatusPage'; import StatusPage from './containers/StatusPage';
import styles from './status.css';
export default class Status extends Component { export default class Status extends Component {
render () { render () {
return ( return (
<div className={ styles.container }> <Page title='status'>
<Actionbar
title='status' />
<Page>
<StatusPage /> <StatusPage />
</Page> </Page>
</div>
); );
} }
} }