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:
parent
08a47ea2d4
commit
173a88804a
@ -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);
|
||||
|
@ -19,6 +19,7 @@ import { handleActions } from 'redux-actions';
|
||||
|
||||
const initialState = {
|
||||
blockNumber: new BigNumber(0),
|
||||
blockTimestamp: new Date(),
|
||||
devLogs: [],
|
||||
devLogsLevels: null,
|
||||
devLogsEnabled: false,
|
||||
|
@ -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
|
||||
|
@ -18,7 +18,7 @@
|
||||
.layout {
|
||||
padding: 0.25em 0.25em 1em 0.25em;
|
||||
|
||||
> * {
|
||||
&>div {
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
}
|
||||
|
@ -16,22 +16,39 @@
|
||||
|
||||
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>
|
||||
{ actionbar }
|
||||
<div className={ classes }>
|
||||
{ children }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -23,8 +23,7 @@ export default class Signer extends Component {
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
<Actionbar
|
||||
title='Trusted Signer' />
|
||||
<Actionbar title='Trusted Signer' />
|
||||
<RequestsPage />
|
||||
</div>
|
||||
);
|
||||
|
@ -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)
|
||||
|
@ -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 = {
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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,
|
@ -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.col12 }>
|
||||
<div className={ styles.blockByline }>
|
||||
{ moment().calendar(nodeStatus.blockTimestamp) }
|
||||
</div>
|
||||
</div>
|
||||
<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 className={ styles.col12 }>
|
||||
</div>
|
||||
<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 }>
|
@ -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';
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
@ -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>
|
@ -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>
|
||||
<Page title='status'>
|
||||
<StatusPage />
|
||||
</Page>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user