Ui 2 pubsub components (#6152)

* Remove Application.orig from merge

* Disable i18n extraction for development

* Retrieve blockNumber via pubsub

* Chain via pubsub

* StatusIndicator with health

* WIP

* WIP

* s/BlockStatus/BlockNumber/

* Adjust BlockNumber display

* Cleanup debug

* Fix statusbar indicator

* NetPeers component

* Add BlockTimestamp

* Export statics on observer

* Cleanup debug logs

* Update references

js/src/Status/status.css

@@ -17,8 +17,6 @@
 
 $backgroundColor: rgba(0, 0, 0, 0.8);
 $textColor: #ccc;
-$networkLiveColor: rgb(0, 136, 0);
-$networkTestColor: rgb(136, 0, 0);
 
 .status {
   align-items: center;
@@ -44,21 +42,6 @@ $networkTestColor: rgb(136, 0, 0);
   }
 }
 
-.network {
-  border-radius: 0.4em;
-  line-height: 1.2;
-  padding: 0.25em 0.5em;
-  text-transform: uppercase;
-
-  &.live {
-    background: $networkLiveColor;
-  }
-
-  &.test {
-    background: $networkTestColor;
-  }
-}
-
 .upgrade {
   div {
     display: inline-block;

js/src/Status/status.js

@@ -17,45 +17,44 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { connect } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
 
-import { BlockStatus, StatusIndicator } from '@parity/ui';
+import { BlockNumber, ClientVersion, NetChain, NetPeers, StatusIndicator } from '@parity/ui';
 
 import Consensus from './Consensus';
 import Upgrade from './Upgrade';
-import Store from './store';
 
 import styles from './status.css';
 
-function Status ({ health, upgradeStore }, { api }) {
-  const store = Store.get(api);
-  const [ clientName, , versionString, , ] = (store.clientVersion || '').split('/');
-  const [ versionNumber, versionType, , versionDate ] = (versionString || '').split('-');
-  const { connected, max } = store.netPeers;
-
+function Status ({ className = '', upgradeStore }, { api }) {
   return (
-    <div className={ styles.status }>
-      <div className={ styles.version }>
-        { clientName } { versionNumber }-{ versionDate } { versionType }
-      </div>
+    <div className={ [styles.status, className].join(' ') }>
+      <ClientVersion className={ styles.version } />
       <div className={ styles.upgrade }>
         <Consensus upgradeStore={ upgradeStore } />
         <Upgrade upgradeStore={ upgradeStore } />
       </div>
       <div className={ styles.netinfo }>
-        <StatusIndicator
-          type='signal'
-          id='application.status.health'
-          status={ health.overall.status }
-          title={ health.overall.message }
+        <StatusIndicator id='application.status.health' />
+        <BlockNumber
+          className={ styles.blockNumber }
+          message={
+            <FormattedMessage
+              id='ui.blockStatus.bestBlock'
+              defaultMessage=' best block'
+            />
+          }
         />
-        <BlockStatus />
-        <div className={ styles.peers }>
-          { connected ? connected.toFormat() : '0' }/{ max ? max.toFormat() : '0' } peers
-        </div>
-        <div className={ `${styles.network} ${styles[store.isTest ? 'test' : 'live']}` }>
-          { store.netChain }
-        </div>
+        <NetPeers
+          className={ styles.peers }
+          message={
+            <FormattedMessage
+              id='ui.netPeers.peers'
+              defaultMessage=' peers'
+            />
+          }
+        />
+        <NetChain />
       </div>
     </div>
   );
@@ -66,19 +65,8 @@ Status.contextTypes = {
 };
 
 Status.propTypes = {
-  health: PropTypes.object.isRequired,
+  className: PropTypes.string,
   upgradeStore: PropTypes.object.isRequired
 };
 
-function mapStateToProps (state) {
-  const { health } = state.nodeStatus;
-
-  return {
-    health
-  };
-}
-
-export default connect(
-  mapStateToProps,
-  null
-)(observer(Status));
+export default observer(Status);

js/src/Status/store.js

@@ -1,87 +0,0 @@
-// Copyright 2015-2017 Parity Technologies (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 { action, computed, observable } from 'mobx';
-
-import { isTestnet } from '@parity/shared/util/testnet';
-
-export default class Store {
-  @observable clientVersion = '';
-  @observable netChain = '';
-  @observable netPeers = {};
-  @observable netVersion = 1;
-
-  constructor (api) {
-    this._api = api;
-    this._api.on('connected', this.setupSubscriptions, this);
-
-    if (this._api.isConnected) {
-      this.setupSubscriptions();
-    }
-  }
-
-  setupSubscriptions = () => {
-    this._api.pubsub.parity.netChain((error, netChain) => {
-      if (!error) {
-        this.setNetChain(netChain);
-      }
-    });
-
-    this._api.pubsub.parity.netPeers((error, netPeers) => {
-      if (!error) {
-        this.setNetPeers(netPeers);
-      }
-    });
-
-    this._api.net
-      .version()
-      .then(this.setNetVersion);
-
-    this._api.web3
-      .clientVersion()
-      .then(this.setClientVersion);
-  }
-
-  @computed get isTest () {
-    return isTestnet(this.netVersion);
-  }
-
-  @action setClientVersion = (clientVersion) => {
-    this.clientVersion = clientVersion;
-  }
-
-  @action setNetChain = (netChain) => {
-    this.netChain = netChain;
-  }
-
-  @action setNetPeers = (netPeers) => {
-    this.netPeers = netPeers;
-  }
-
-  @action setNetVersion = (netVersion) => {
-    this.netVersion = netVersion;
-  }
-
-  static instance = null;
-
-  static get (api) {
-    if (!Store.instance) {
-      Store.instance = new Store(api);
-    }
-
-    return Store.instance;
-  }
-}