diff --git a/js/src/api/format/output.js b/js/src/api/format/output.js index 6f785ed9b..8461df20f 100644 --- a/js/src/api/format/output.js +++ b/js/src/api/format/output.js @@ -166,7 +166,7 @@ export function outSyncing (syncing) { break; case 'blockGap': - syncing[key] = syncing[key].map(outNumber); + syncing[key] = syncing[key] ? syncing[key].map(outNumber) : syncing[key]; break; } }); diff --git a/js/src/ui/BlockStatus/blockStatus.css b/js/src/ui/BlockStatus/blockStatus.css new file mode 100644 index 000000000..ed86646f0 --- /dev/null +++ b/js/src/ui/BlockStatus/blockStatus.css @@ -0,0 +1,22 @@ +/* Copyright 2015, 2016 Ethcore (UK) Ltd. +/* This file is part of Parity. +/* +/* Parity is free software: you can redistribute it and/or modify +/* it under the terms of the GNU General Public License as published by +/* the Free Software Foundation, either version 3 of the License, or +/* (at your option) any later version. +/* +/* Parity is distributed in the hope that it will be useful, +/* but WITHOUT ANY WARRANTY; without even the implied warranty of +/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +/* GNU General Public License for more details. +/* +/* You should have received a copy of the GNU General Public License +/* along with Parity. If not, see . +*/ + +.blockNumber { +} + +.syncStatus { +} diff --git a/js/src/ui/BlockStatus/blockStatus.js b/js/src/ui/BlockStatus/blockStatus.js new file mode 100644 index 000000000..98e10f504 --- /dev/null +++ b/js/src/ui/BlockStatus/blockStatus.js @@ -0,0 +1,90 @@ +// Copyright 2015, 2016 Ethcore (UK) Ltd. +// This file is part of Parity. + +// Parity is free software: you can redistribute it and/or modify +// it under the terms of the GNU General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. + +// Parity is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU General Public License for more details. + +// You should have received a copy of the GNU General Public License +// along with Parity. If not, see . + +import React, { Component, PropTypes } from 'react'; +import { connect } from 'react-redux'; +import { bindActionCreators } from 'redux'; + +import styles from './blockStatus.css'; + +class BlockStatus extends Component { + static propTypes = { + blockNumber: PropTypes.object, + syncing: PropTypes.oneOfType([ + PropTypes.bool, + PropTypes.object + ]) + } + + render () { + const { blockNumber, syncing } = this.props; + + if (!blockNumber) { + return null; + } + + if (!syncing) { + return ( +
+ { blockNumber.toFormat() } best block +
+ ); + } + + if (!syncing.warpChunksAmount.eq(syncing.warpChunksProcessed)) { + return ( +
+ { syncing.warpChunksProcessed.mul(100).div(syncing.warpChunksAmount).toFormat(2) }% warp restore +
+ ); + } + + let warpStatus = null; + + if (syncing.blockGap) { + const [first, last] = syncing.blockGap; + + warpStatus = ( + , { first.mul(100).div(last).toFormat(2) }% historic + ); + } + + return ( +
+ { syncing.currentBlock.toFormat() }/{ syncing.highestBlock.toFormat() } syncing + { warpStatus } +
+ ); + } +} + +function mapStateToProps (state) { + const { blockNumber, syncing } = state.nodeStatus; + + return { + blockNumber, + syncing + }; +} + +function mapDispatchToProps (dispatch) { + return bindActionCreators({}, dispatch); +} + +export default connect( + mapStateToProps, + mapDispatchToProps +)(BlockStatus); diff --git a/js/src/ui/BlockStatus/index.js b/js/src/ui/BlockStatus/index.js new file mode 100644 index 000000000..af5761fad --- /dev/null +++ b/js/src/ui/BlockStatus/index.js @@ -0,0 +1,17 @@ +// Copyright 2015, 2016 Ethcore (UK) Ltd. +// This file is part of Parity. + +// Parity is free software: you can redistribute it and/or modify +// it under the terms of the GNU General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. + +// Parity is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU General Public License for more details. + +// You should have received a copy of the GNU General Public License +// along with Parity. If not, see . + +export default from './blockStatus'; diff --git a/js/src/ui/index.js b/js/src/ui/index.js index b766df9c3..808dec64a 100644 --- a/js/src/ui/index.js +++ b/js/src/ui/index.js @@ -20,6 +20,7 @@ import ActionbarSearch from './Actionbar/Search'; import ActionbarSort from './Actionbar/Sort'; import Badge from './Badge'; import Balance from './Balance'; +import BlockStatus from './BlockStatus'; import Button from './Button'; import ConfirmDialog from './ConfirmDialog'; import Container, { Title as ContainerTitle } from './Container'; @@ -46,6 +47,7 @@ export { AddressSelect, Badge, Balance, + BlockStatus, Button, ConfirmDialog, Container, diff --git a/js/src/views/Application/Status/status.css b/js/src/views/Application/Status/status.css index 9bab1b0cb..974c3e990 100644 --- a/js/src/views/Application/Status/status.css +++ b/js/src/views/Application/Status/status.css @@ -62,3 +62,6 @@ .version { } + +.syncing { +} diff --git a/js/src/views/Application/Status/status.js b/js/src/views/Application/Status/status.js index 10f4b18b5..5b1da779d 100644 --- a/js/src/views/Application/Status/status.js +++ b/js/src/views/Application/Status/status.js @@ -18,11 +18,13 @@ import React, { Component, PropTypes } from 'react'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; +import { BlockStatus } from '../../../ui'; + import styles from './status.css'; class Status extends Component { static propTypes = { - blockNumber: PropTypes.object, + blockNumber: PropTypes.object.isRequired, clientVersion: PropTypes.string, netPeers: PropTypes.object, netChain: PropTypes.string, @@ -30,7 +32,7 @@ class Status extends Component { } render () { - const { clientVersion, blockNumber, netChain, netPeers, isTest } = this.props; + const { blockNumber, clientVersion, netChain, netPeers, isTest } = this.props; const netStyle = `${styles.network} ${styles[isTest ? 'networktest' : 'networklive']}`; if (!blockNumber) { @@ -44,9 +46,7 @@ class Status extends Component {
-
- { blockNumber.toFormat() } blocks -
+
{ netPeers.active.toFormat() }/{ netPeers.connected.toFormat() }/{ netPeers.max.toFormat() } peers