Warp sync status display (#3045)

* Warp sync status display

* Add BlockStatus component (re-usable)

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;
       }
     });

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 <http://www.gnu.org/licenses/>.
+*/
+
+.blockNumber {
+}
+
+.syncStatus {
+}

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 <http://www.gnu.org/licenses/>.
+
+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 (
+        <div className={ styles.blockNumber }>
+          { blockNumber.toFormat() } best block
+        </div>
+      );
+    }
+
+    if (!syncing.warpChunksAmount.eq(syncing.warpChunksProcessed)) {
+      return (
+        <div className={ styles.syncStatus }>
+          { syncing.warpChunksProcessed.mul(100).div(syncing.warpChunksAmount).toFormat(2) }% warp restore
+        </div>
+      );
+    }
+
+    let warpStatus = null;
+
+    if (syncing.blockGap) {
+      const [first, last] = syncing.blockGap;
+
+      warpStatus = (
+        <span>, { first.mul(100).div(last).toFormat(2) }% historic</span>
+      );
+    }
+
+    return (
+      <div className={ styles.syncStatus }>
+        <span>{ syncing.currentBlock.toFormat() }/{ syncing.highestBlock.toFormat() } syncing</span>
+        { warpStatus }
+      </div>
+    );
+  }
+}
+
+function mapStateToProps (state) {
+  const { blockNumber, syncing } = state.nodeStatus;
+
+  return {
+    blockNumber,
+    syncing
+  };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(BlockStatus);

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 <http://www.gnu.org/licenses/>.
+
+export default from './blockStatus';

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,

js/src/views/Application/Status/status.css

@@ -62,3 +62,6 @@
 
 .version {
 }
+
+.syncing {
+}

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 {
         </div>
         <div className={ styles.netinfo }>
           <div>
-            <div className={ styles.block }>
-              { blockNumber.toFormat() } blocks
-            </div>
+            <BlockStatus />
             <div className={ styles.peers }>
               { netPeers.active.toFormat() }/{ netPeers.connected.toFormat() }/{ netPeers.max.toFormat() } peers
             </div>