Rename Status/Status -> Status/NodeStatus (#5332)
This commit is contained in:
Jaco Greeff
GitHub
17
js/src/views/Status/NodeStatus/index.js
Normal file
17
js/src/views/Status/NodeStatus/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
// 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/>.
|
||||
|
||||
export default from './nodeStatus';
|
||||
76
js/src/views/Status/NodeStatus/nodeStatus.css
Normal file
76
js/src/views/Status/NodeStatus/nodeStatus.css
Normal file
@@ -0,0 +1,76 @@
|
||||
/* 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/>.
|
||||
*/
|
||||
.container {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin: 0 -1em;
|
||||
|
||||
&::after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.blockInfo {
|
||||
color: #aaa;
|
||||
font-size: 1.5em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.blockByline {
|
||||
color: #aaa;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
.padBottom {
|
||||
padding-bottom: 1.25em !important;
|
||||
}
|
||||
|
||||
.col,
|
||||
.col3, .col4_5, .col6, .col12 {
|
||||
float: left;
|
||||
padding: 0 1em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.col3 {
|
||||
width: 25%;
|
||||
width: -webkit-calc(100% / 12 * 3);
|
||||
width: -moz-calc(100% / 12 * 3);
|
||||
width: calc(100% / 12 * 3);
|
||||
}
|
||||
|
||||
.col4_5 {
|
||||
width: 37.5%;
|
||||
width: -webkit-calc(100% / 12 * 4.5);
|
||||
width: -moz-calc(100% / 12 * 4.5);
|
||||
width: calc(100% / 12 * 4.5);
|
||||
}
|
||||
|
||||
.col6 {
|
||||
width: 50%;
|
||||
width: -webkit-calc(100% / 12 * 6);
|
||||
width: -moz-calc(100% / 12 * 6);
|
||||
width: calc(100% / 12 * 6);
|
||||
}
|
||||
|
||||
.col12 {
|
||||
width: 100%;
|
||||
}
|
||||
301
js/src/views/Status/NodeStatus/nodeStatus.js
Normal file
301
js/src/views/Status/NodeStatus/nodeStatus.js
Normal file
@@ -0,0 +1,301 @@
|
||||
// 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 bytes from 'bytes';
|
||||
import moment from 'moment';
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { Container, ContainerTitle, Input } from '~/ui';
|
||||
|
||||
import MiningSettings from '../MiningSettings';
|
||||
import StatusStore from './store';
|
||||
|
||||
import styles from './nodeStatus.css';
|
||||
|
||||
class NodeStatus extends Component {
|
||||
static contextTypes = {
|
||||
api: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
blockNumber: PropTypes.object,
|
||||
blockTimestamp: PropTypes.object,
|
||||
netChain: PropTypes.string,
|
||||
netPeers: PropTypes.object
|
||||
};
|
||||
|
||||
statusStore = new StatusStore(this.context.api);
|
||||
|
||||
componentWillMount () {
|
||||
this.statusStore.startPolling();
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
this.statusStore.stopPolling();
|
||||
}
|
||||
|
||||
render () {
|
||||
const { blockNumber, blockTimestamp, netPeers } = this.props;
|
||||
const { hashrate } = this.statusStore;
|
||||
|
||||
if (!netPeers || !blockNumber) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const hashrateValue = bytes(hashrate.toNumber()) || 0;
|
||||
const peers = `${netPeers.active}/${netPeers.connected}/${netPeers.max}`;
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<div className={ styles.container }>
|
||||
<div className={ styles.row }>
|
||||
<div className={ styles.col3 }>
|
||||
<div className={ `${styles.col12} ${styles.padBottom}` }>
|
||||
<ContainerTitle
|
||||
title={
|
||||
<FormattedMessage
|
||||
id='status.status.title.bestBlock'
|
||||
defaultMessage='best block'
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<div className={ styles.blockInfo }>
|
||||
#{ blockNumber.toFormat() }
|
||||
</div>
|
||||
<div className={ styles.blockByline }>
|
||||
{ moment(blockTimestamp).calendar() }
|
||||
</div>
|
||||
</div>
|
||||
<div className={ `${styles.col12} ${styles.padBottom}` }>
|
||||
<ContainerTitle
|
||||
title={
|
||||
<FormattedMessage
|
||||
id='status.status.title.peers'
|
||||
defaultMessage='peers'
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<div className={ styles.blockInfo }>
|
||||
{ peers }
|
||||
</div>
|
||||
</div>
|
||||
<div className={ `${styles.col12} ${styles.padBottom}` }>
|
||||
<ContainerTitle
|
||||
title={
|
||||
<FormattedMessage
|
||||
id='status.status.title.hashRate'
|
||||
defaultMessage='hash rate'
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<div className={ styles.blockInfo }>
|
||||
<FormattedMessage
|
||||
id='status.status.hashrate'
|
||||
defaultMessage='{hashrate} H/s'
|
||||
values={ {
|
||||
hashrate: hashrateValue
|
||||
} }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={ styles.col4_5 }>
|
||||
{ this.renderMiningSettings() }
|
||||
</div>
|
||||
<div className={ styles.col4_5 }>
|
||||
{ this.renderSettings() }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
renderMiningSettings () {
|
||||
const { coinbase, defaultExtraData, extraData, gasFloorTarget, minGasPrice } = this.statusStore;
|
||||
|
||||
return (
|
||||
<MiningSettings
|
||||
coinbase={ coinbase }
|
||||
defaultExtraData={ defaultExtraData }
|
||||
extraData={ extraData }
|
||||
gasFloorTarget={ gasFloorTarget }
|
||||
minGasPrice={ minGasPrice }
|
||||
onUpdateSetting={ this.statusStore.handleUpdateSetting }
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
renderNodeName () {
|
||||
const { nodeName } = this.statusStore;
|
||||
|
||||
return (
|
||||
<span>
|
||||
{ nodeName || (
|
||||
<FormattedMessage
|
||||
id='status.status.title.node'
|
||||
defaultMessage='Node'
|
||||
/>)
|
||||
}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
renderSettings () {
|
||||
const { netChain } = this.props;
|
||||
const { enode, rpcSettings, netPort = '' } = this.statusStore;
|
||||
|
||||
if (!rpcSettings) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const rpcPort = rpcSettings.port || '';
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ContainerTitle
|
||||
title={
|
||||
<FormattedMessage
|
||||
id='status.status.title.network'
|
||||
defaultMessage='network settings'
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Input
|
||||
allowCopy
|
||||
readOnly
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='status.status.input.chain'
|
||||
defaultMessage='chain'
|
||||
/>
|
||||
}
|
||||
value={ netChain }
|
||||
/>
|
||||
<div className={ styles.row }>
|
||||
<div className={ styles.col6 }>
|
||||
<Input
|
||||
allowCopy
|
||||
readOnly
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='status.status.input.rpcEnabled'
|
||||
defaultMessage='rpc enabled'
|
||||
/>
|
||||
}
|
||||
value={
|
||||
rpcSettings.enabled
|
||||
? (
|
||||
<FormattedMessage
|
||||
id='status.status.input.yes'
|
||||
defaultMessage='yes'
|
||||
/>
|
||||
)
|
||||
: (
|
||||
<FormattedMessage
|
||||
id='status.status.input.no'
|
||||
defaultMessage='no'
|
||||
/>
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className={ styles.col6 }>
|
||||
<Input
|
||||
allowCopy
|
||||
readOnly
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='status.status.input.port'
|
||||
defaultMessage='network port'
|
||||
/>
|
||||
}
|
||||
value={ netPort.toString() }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={ styles.row }>
|
||||
<div className={ styles.col6 }>
|
||||
<Input
|
||||
allowCopy
|
||||
readOnly
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='status.status.input.rpcInterface'
|
||||
defaultMessage='rpc interface'
|
||||
/>
|
||||
}
|
||||
value={ rpcSettings.interface }
|
||||
/>
|
||||
</div>
|
||||
<div className={ styles.col6 }>
|
||||
<Input
|
||||
allowCopy
|
||||
readOnly
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='status.status.input.rpcPort'
|
||||
defaultMessage='rpc port'
|
||||
/>
|
||||
}
|
||||
value={ rpcPort.toString() }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={ styles.row }>
|
||||
<div className={ styles.col12 }>
|
||||
<Input
|
||||
allowCopy
|
||||
readOnly
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='status.status.input.enode'
|
||||
defaultMessage='enode'
|
||||
/>
|
||||
}
|
||||
value={ enode }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const {
|
||||
blockNumber,
|
||||
blockTimestamp,
|
||||
netChain,
|
||||
netPeers
|
||||
} = state.nodeStatus;
|
||||
|
||||
return {
|
||||
blockNumber,
|
||||
blockTimestamp,
|
||||
netChain,
|
||||
netPeers
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
null
|
||||
)(NodeStatus);
|
||||
160
js/src/views/Status/NodeStatus/store.js
Normal file
160
js/src/views/Status/NodeStatus/store.js
Normal file
@@ -0,0 +1,160 @@
|
||||
// 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 BigNumber from 'bignumber.js';
|
||||
import { action, observable, transaction } from 'mobx';
|
||||
|
||||
export default class StatusStore {
|
||||
@observable defaultExtraData = '';
|
||||
@observable enode = '';
|
||||
@observable hashrate = new BigNumber(0);
|
||||
@observable netPort = new BigNumber(0);
|
||||
@observable nodeName = '';
|
||||
@observable rpcSettings = {};
|
||||
|
||||
@observable coinbase = '';
|
||||
@observable extraData = '';
|
||||
@observable gasFloorTarget = new BigNumber(0);
|
||||
@observable minGasPrice = new BigNumber(0);
|
||||
|
||||
api = null;
|
||||
_timeoutIds = {};
|
||||
|
||||
constructor (api) {
|
||||
this.api = api;
|
||||
}
|
||||
|
||||
@action setLongStatus ({ defaultExtraData, enode, netPort, rpcSettings }) {
|
||||
transaction(() => {
|
||||
this.defaultExtraData = defaultExtraData;
|
||||
this.enode = enode;
|
||||
this.netPort = netPort;
|
||||
this.rpcSettings = rpcSettings;
|
||||
});
|
||||
}
|
||||
|
||||
@action setStatus ({ hashrate }) {
|
||||
transaction(() => {
|
||||
this.hashrate = hashrate;
|
||||
});
|
||||
}
|
||||
|
||||
@action setMinerSettings ({ coinbase, extraData, gasFloorTarget, minGasPrice }) {
|
||||
transaction(() => {
|
||||
this.coinbase = coinbase;
|
||||
this.extraData = extraData;
|
||||
this.gasFloorTarget = gasFloorTarget;
|
||||
this.minGasPrice = minGasPrice;
|
||||
});
|
||||
}
|
||||
|
||||
startPolling () {
|
||||
this._pollStatus();
|
||||
this._pollLongStatus();
|
||||
}
|
||||
|
||||
stopPolling () {
|
||||
Object.keys(this._timeoutIds).forEach((key) => clearTimeout(this._timeoutIds[key]));
|
||||
}
|
||||
|
||||
/**
|
||||
* Miner settings should never changes unless
|
||||
* Parity is restarted, or if the values are changed
|
||||
* from the UI
|
||||
*/
|
||||
_pollMinerSettings () {
|
||||
return Promise
|
||||
.all([
|
||||
this.api.eth.coinbase(),
|
||||
this.api.parity.extraData(),
|
||||
this.api.parity.gasFloorTarget(),
|
||||
this.api.parity.minGasPrice()
|
||||
])
|
||||
.then(([
|
||||
coinbase, extraData, gasFloorTarget, minGasPrice
|
||||
]) => {
|
||||
const minerSettings = {
|
||||
coinbase,
|
||||
extraData,
|
||||
gasFloorTarget,
|
||||
minGasPrice
|
||||
};
|
||||
|
||||
this.setMinerSettings(minerSettings);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('_pollMinerSettings', error);
|
||||
});
|
||||
}
|
||||
|
||||
_pollStatus () {
|
||||
const nextTimeout = (timeout = 1000) => {
|
||||
clearTimeout(this._timeoutIds.short);
|
||||
this._timeoutIds.short = setTimeout(() => this._pollStatus(), timeout);
|
||||
};
|
||||
|
||||
return Promise
|
||||
.all([
|
||||
this.api.eth.hashrate()
|
||||
])
|
||||
.then(([
|
||||
hashrate
|
||||
]) => {
|
||||
this.setStatus({
|
||||
hashrate
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('_pollStatus', error);
|
||||
})
|
||||
.then(() => {
|
||||
nextTimeout();
|
||||
});
|
||||
}
|
||||
|
||||
_pollLongStatus () {
|
||||
const nextTimeout = (timeout = 30000) => {
|
||||
clearTimeout(this._timeoutIds.long);
|
||||
this._timeoutIds.long = setTimeout(() => this._pollLongStatus(), timeout);
|
||||
};
|
||||
|
||||
this._pollMinerSettings();
|
||||
return Promise
|
||||
.all([
|
||||
this.api.parity.defaultExtraData(),
|
||||
this.api.parity.enode().then((enode) => enode).catch(() => '-'),
|
||||
this.api.parity.netPort(),
|
||||
this.api.parity.rpcSettings()
|
||||
])
|
||||
.then(([
|
||||
defaultExtraData, enode, netPort, rpcSettings
|
||||
]) => {
|
||||
this.setLongStatus({
|
||||
defaultExtraData, enode, netPort, rpcSettings
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('_pollLongStatus', error);
|
||||
})
|
||||
.then(() => {
|
||||
nextTimeout();
|
||||
});
|
||||
}
|
||||
|
||||
handleUpdateSetting = () => {
|
||||
return this._pollMinerSettings();
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user