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
This commit is contained in:
Jaco Greeff
GitHub
@@ -1,155 +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 React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { BlockStatus, StatusIndicator } from '@parity/ui';
|
||||
|
||||
import styles from './status.css';
|
||||
|
||||
class Status extends Component {
|
||||
static propTypes = {
|
||||
clientVersion: PropTypes.string,
|
||||
isTest: PropTypes.bool,
|
||||
netChain: PropTypes.string,
|
||||
netPeers: PropTypes.object,
|
||||
health: PropTypes.object,
|
||||
upgradeStore: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
render () {
|
||||
const { clientVersion, isTest, netChain, netPeers, health } = this.props;
|
||||
|
||||
return (
|
||||
<div className={ styles.status }>
|
||||
<div className={ styles.version }>
|
||||
{ clientVersion }
|
||||
</div>
|
||||
<div className={ styles.upgrade }>
|
||||
{ this.renderConsensus() }
|
||||
{ this.renderUpgradeButton() }
|
||||
</div>
|
||||
<div className={ styles.netinfo }>
|
||||
<div>
|
||||
<StatusIndicator
|
||||
type='signal'
|
||||
id='application.status.health'
|
||||
status={ health.overall.status }
|
||||
title={ health.overall.message }
|
||||
/>
|
||||
</div>
|
||||
<span title={ `${netPeers.connected.toFormat()}/${netPeers.max.toFormat()} peers` }>
|
||||
<BlockStatus />
|
||||
</span>
|
||||
<div className={ `${styles.network} ${styles[isTest ? 'test' : 'live']}` }>
|
||||
{ netChain }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderConsensus () {
|
||||
const { upgradeStore } = this.props;
|
||||
|
||||
if (!upgradeStore || !upgradeStore.consensusCapability) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (upgradeStore.consensusCapability === 'capable') {
|
||||
return (
|
||||
<div>
|
||||
<FormattedMessage
|
||||
id='application.status.consensus.capable'
|
||||
defaultMessage='Upgrade not required.'
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (upgradeStore.consensusCapability.capableUntil) {
|
||||
return (
|
||||
<div>
|
||||
<FormattedMessage
|
||||
id='application.status.consensus.capableUntil'
|
||||
defaultMessage='Upgrade required before #{blockNumber}'
|
||||
values={ {
|
||||
blockNumber: upgradeStore.consensusCapability.capableUntil
|
||||
} }
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (upgradeStore.consensusCapability.incapableSince) {
|
||||
return (
|
||||
<div>
|
||||
<FormattedMessage
|
||||
id='application.status.consensus.incapableSince'
|
||||
defaultMessage='Upgrade required since #{blockNumber}'
|
||||
values={ {
|
||||
blockNumber: upgradeStore.consensusCapability.incapableSince
|
||||
} }
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
renderUpgradeButton () {
|
||||
const { upgradeStore } = this.props;
|
||||
|
||||
if (!upgradeStore.available) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<a
|
||||
href='javascript:void(0)'
|
||||
onClick={ upgradeStore.openModal }
|
||||
>
|
||||
<FormattedMessage
|
||||
id='application.status.upgrade'
|
||||
defaultMessage='Upgrade'
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const { clientVersion, health, netPeers, netChain, isTest } = state.nodeStatus;
|
||||
|
||||
return {
|
||||
clientVersion,
|
||||
health,
|
||||
netPeers,
|
||||
netChain,
|
||||
isTest
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
null
|
||||
)(Status);
|
||||
@@ -1,100 +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/>.
|
||||
*/
|
||||
|
||||
.toolbar {
|
||||
background: none !important;
|
||||
height: 72px !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
& > * {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.tabLink {
|
||||
display: flex;
|
||||
|
||||
> * {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.4) !important;
|
||||
}
|
||||
|
||||
&.tabactive, &.tabactive:hover {
|
||||
background: rgba(0, 0, 0, 0.25) !important;
|
||||
border-radius: 4px 4px 0 0;
|
||||
|
||||
* {
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabLink,
|
||||
.settings,
|
||||
.first,
|
||||
.last {
|
||||
background: rgba(0, 0, 0, 0.5) !important; /* rgba(0, 0, 0, 0.25) !important; */
|
||||
}
|
||||
|
||||
.tabbarTooltip {
|
||||
left: 3em;
|
||||
top: 4em;
|
||||
}
|
||||
|
||||
.label {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.labelBubble {
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
right: -12px;
|
||||
}
|
||||
|
||||
.first,
|
||||
.last {
|
||||
margin: 0;
|
||||
padding: 36px 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.indicatorTab {
|
||||
font-size: 1.5rem;
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
padding: 20px 12px 0;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.first {
|
||||
margin-left: -24px;
|
||||
}
|
||||
|
||||
.last {
|
||||
margin-right: -24px;
|
||||
}
|
||||
@@ -1,153 +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 React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
import { Link } from 'react-router';
|
||||
import { Toolbar, ToolbarGroup } from 'material-ui/Toolbar';
|
||||
import { isEqual } from 'lodash';
|
||||
|
||||
import { Tooltip, StatusIndicator } from '@parity/ui';
|
||||
|
||||
import Tab from './Tab';
|
||||
import styles from './tabBar.css';
|
||||
|
||||
class TabBar extends Component {
|
||||
static contextTypes = {
|
||||
router: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
pending: PropTypes.array,
|
||||
health: PropTypes.object.isRequired,
|
||||
views: PropTypes.array.isRequired
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
pending: []
|
||||
};
|
||||
|
||||
render () {
|
||||
const { health } = this.props;
|
||||
|
||||
return (
|
||||
<Toolbar className={ styles.toolbar }>
|
||||
<ToolbarGroup className={ styles.first }>
|
||||
<div />
|
||||
</ToolbarGroup>
|
||||
<div className={ styles.tabs }>
|
||||
<Link
|
||||
activeClassName={ styles.tabactive }
|
||||
className={ `${styles.tabLink} ${styles.indicatorTab}` }
|
||||
key='status'
|
||||
to='/status'
|
||||
>
|
||||
<div className={ styles.indicator }>
|
||||
<StatusIndicator
|
||||
type='signal'
|
||||
id='topbar.health'
|
||||
status={ health.overall.status }
|
||||
title={ health.overall.message }
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
{ this.renderTabItems() }
|
||||
<Tooltip
|
||||
className={ styles.tabbarTooltip }
|
||||
text={
|
||||
<FormattedMessage
|
||||
id='tabBar.tooltip.overview'
|
||||
defaultMessage='navigate between the different parts and views of the application, switching between an account view, token view and decentralized application view'
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<ToolbarGroup className={ styles.last }>
|
||||
<div />
|
||||
</ToolbarGroup>
|
||||
</Toolbar>
|
||||
);
|
||||
}
|
||||
|
||||
renderTabItems () {
|
||||
const { views, pending } = this.props;
|
||||
|
||||
return views.map((view, index) => {
|
||||
return (
|
||||
<Link
|
||||
activeClassName={ styles.tabactive }
|
||||
className={ styles.tabLink }
|
||||
key={ view.id }
|
||||
to={ view.route }
|
||||
>
|
||||
<Tab
|
||||
pendings={ pending.length }
|
||||
view={ view }
|
||||
/>
|
||||
</Link>
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps (initState) {
|
||||
const { views } = initState.settings;
|
||||
|
||||
let filteredViewIds = Object
|
||||
.keys(views)
|
||||
.filter((id) => views[id].fixed || views[id].active);
|
||||
|
||||
let filteredViews = filteredViewIds.map((id) => ({
|
||||
...views[id],
|
||||
id
|
||||
}));
|
||||
|
||||
return (state) => {
|
||||
const { availability = 'unknown' } = state.nodeStatus.nodeKind || {};
|
||||
const { views } = state.settings;
|
||||
const { health } = state.nodeStatus;
|
||||
|
||||
const viewIds = Object
|
||||
.keys(views)
|
||||
.filter((id) => {
|
||||
const view = views[id];
|
||||
|
||||
const isEnabled = view.fixed || view.active;
|
||||
const isAllowed = !view.onlyPersonal || availability === 'personal';
|
||||
|
||||
return isEnabled && isAllowed;
|
||||
});
|
||||
|
||||
if (isEqual(viewIds, filteredViewIds)) {
|
||||
return { views: filteredViews, health };
|
||||
}
|
||||
|
||||
filteredViewIds = viewIds;
|
||||
filteredViews = viewIds.map((id) => ({
|
||||
...views[id],
|
||||
id
|
||||
}));
|
||||
|
||||
return { views: filteredViews, health };
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
null
|
||||
)(TabBar);
|
||||
@@ -53,8 +53,7 @@ class ParityBar extends Component {
|
||||
static propTypes = {
|
||||
dapp: PropTypes.bool,
|
||||
externalLink: PropTypes.string,
|
||||
pending: PropTypes.array,
|
||||
health: PropTypes.object
|
||||
pending: PropTypes.array
|
||||
};
|
||||
|
||||
state = {
|
||||
@@ -214,7 +213,7 @@ class ParityBar extends Component {
|
||||
}
|
||||
|
||||
renderBar () {
|
||||
const { dapp, health } = this.props;
|
||||
const { dapp } = this.props;
|
||||
|
||||
if (!dapp) {
|
||||
return null;
|
||||
@@ -223,10 +222,7 @@ class ParityBar extends Component {
|
||||
return (
|
||||
<div className={ styles.cornercolor }>
|
||||
<StatusIndicator
|
||||
type='signal'
|
||||
id='paritybar.health'
|
||||
status={ health.overall.status }
|
||||
title={ health.overall.message }
|
||||
tooltipPlacement='right'
|
||||
/>
|
||||
<Button
|
||||
@@ -710,11 +706,9 @@ class ParityBar extends Component {
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const { pending } = state.signer;
|
||||
const { health } = state.nodeStatus;
|
||||
|
||||
return {
|
||||
pending,
|
||||
health
|
||||
pending
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user