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
.getBlockByNumber(blockNumber)
.then((block) => {
this._store.dispatch(statusCollection({ gasLimit: block.gasLimit }));
this._store.dispatch(statusCollection({
blockTimestamp: block.timestamp,
gasLimit: block.gasLimit
}));
})
.catch((error) => {
console.warn('status._subscribeBlockNumber', 'getBlockByNumber', error);

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -14,4 +14,4 @@
// You should have received a copy of the GNU General Public License
// 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
// 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
// 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: '';
}
.blockinfo {
font-size: 24px;
.blockInfo {
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,

View File

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

View File

@ -14,4 +14,4 @@
// You should have received a copy of the GNU General Public License
// 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
/* 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 Status from '../../components/Status';
import styles from './statusPage.css';
class StatusPage extends Component {
static propTypes = {
nodeStatus: PropTypes.object.isRequired,
@ -39,7 +41,7 @@ class StatusPage extends Component {
render () {
return (
<div>
<div className={ styles.body }>
<Status { ...this.props } />
<Debug { ...this.props } />
</div>

View File

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