grassrootseconomics/openethereum
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

UI interface completed, to be tested

Browse Source
This commit is contained in:
Jaco Greeff 2016-12-12 22:45:09 +01:00
parent a8ae9b02f9
commit f15671c74b
9 changed files with 186 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
js/src/modals/UpgradeParity/Info/index.js
View File

31
js/src/modals/UpgradeParity/Info/info.js
View File

@ -1,31 +0,0 @@
// Copyright 2015, 2016 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 { observer } from 'mobx-react';
import React, { Component, PropTypes } from 'react';
@observer
export default class Info extends Component {
static propTypes = {
store: PropTypes.object.isRequired
}
render () {
return (
<div>info</div>
);
}
}

17
js/src/modals/UpgradeParity/Updating/index.js
View File

@ -1,17 +0,0 @@
// Copyright 2015, 2016 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 './updating';

31
js/src/modals/UpgradeParity/Updating/updating.js
View File

@ -1,31 +0,0 @@
// Copyright 2015, 2016 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 { observer } from 'mobx-react';
import React, { Component, PropTypes } from 'react';
@observer
export default class Updating extends Component {
static propTypes = {
store: PropTypes.object.isRequired
}
render () {
return (
<div>hello</div>
);
}
}

26
js/src/modals/UpgradeParity/upgradeParity.css Normal file
View File

@ -0,0 +1,26 @@
/* Copyright 2015, 2016 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/>.
*/
.error {
padding-top: 1.5em;
}
.infoStep {
div+div {
padding-top: 1.5em;
}
}

125
js/src/modals/UpgradeParity/upgradeParity.js
View File

@ -18,14 +18,13 @@ import { observer } from 'mobx-react';
import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import { Button, Modal } from '~/ui';
import { Button } from '~/ui';
import { CancelIcon, DoneIcon, NextIcon, SnoozeIcon } from '~/ui/Icons';
import Info from './Info';
import Updating from './Updating';
import Modal, { Busy, Completed } from '~/ui/Modal';
import ModalStore, { STEP_COMPLETED, STEP_ERROR, STEP_INFO, STEP_UPDATING } from './modalStore';
import UpgradeStore from './upgradeStore';
import styles from './upgradeParity.css';
@observer
export default class UpgradeParity extends Component {
@ -43,6 +42,22 @@ export default class UpgradeParity extends Component {
return (
<Modal
actions={ this.renderActions() }
current={ this.store.step }
steps={ [
<FormattedMessage
id='upgradeParity.step.info'
defaultMessage='upgrade available' />,
<FormattedMessage
id='upgradeParity.step.updating'
defaultMessage='upgrading parity' />,
this.store.step === STEP_ERROR
? <FormattedMessage
id='upgradeParity.step.completed'
defaultMessage='upgrade completed' />
: <FormattedMessage
id='upgradeParity.step.error'
defaultMessage='error' />
] }
visible>
{ this.renderStep() }
</Modal>
@ -105,12 +120,110 @@ export default class UpgradeParity extends Component {
}
renderStep () {
const { available, consensusCapability, error, upgrading, version } = this.store.upgrade;
const currentversion = this.renderVersion(version);
const newversion = upgrading
? this.renderVersion(upgrading.version)
: this.renderVersion(available.version);
switch (this.store.step) {
case STEP_INFO:
return <Info store={ this.store } />;
let consensusInfo = null;
if (consensusCapability === 'capable') {
consensusInfo = (
<div>
<FormattedMessage
id='upgradeParity.consensus.capable'
defaultMessage='Your current Parity version is capable of handling the nework requirements.' />
</div>
);
} else if (consensusCapability.capableUntil) {
consensusInfo = (
<div>
<FormattedMessage
id='upgradeParity.consensus.capableUntil'
defaultMessage='Your current Parity version is capable of handling the nework requirements until block {blockNumber}'
values={ {
blockNumber: consensusCapability.capableUntil
} } />
</div>
);
} else if (consensusCapability.incapableSince) {
consensusInfo = (
<div>
<FormattedMessage
id='upgradeParity.consensus.incapableSince'
defaultMessage='Your current Parity version is incapable of handling the nework requirements since block {blockNumber}'
values={ {
blockNumber: consensusCapability.incapableSince
} } />
</div>
);
}
return (
<div className={ styles.infoStep }>
<div>
<FormattedMessage
id='upgradeParity.info.upgrade'
defaultMessage='A new version of Parity, version {newversion} is available as an upgrade from your current version {currentversion}'
values={ {
currentversion,
newversion
} } />
</div>
{ consensusInfo }
</div>
);
case STEP_UPDATING:
return <Updating store={ this.store } />;
return (
<Busy
title={
<FormattedMessage
id='upgradeParity.busy'
defaultMessage='Your upgrade to Parity {newversion} is currently in progress'
values={ {
newversion
} } />
} />
);
case STEP_COMPLETED:
return (
<Completed>
<FormattedMessage
id='upgradeParity.completed'
defaultMessage='Your upgrade to Parity {newversion} has been successfully completed.'
values={ {
newversion
} } />
</Completed>
);
case STEP_ERROR:
return (
<Completed>
<div>
<FormattedMessage
id='upgradeParity.failed'
defaultMessage='Your upgrade to Parity {newversion} has failed with an error.'
values={ {
newversion
} } />
</div>
<div className={ styles.error }>
{ error.message }
</div>
</Completed>
);
}
}
renderVersion (versionInfo) {
const { track, version } = versionInfo;
return `${version.major}.${version.minor}.${version.patch}-${track}`;
}
}

22
js/src/modals/UpgradeParity/upgradeStore.js
View File

@ -21,6 +21,8 @@ const CHECK_INTERVAL = 1 * 60 * 1000;
export default class UpgradeStore {
@observable available = null;
@observable consensusCapability = null;
@observable upgrading = null;
@observable version = null;
constructor (api) {
this._api = api;
@ -29,22 +31,28 @@ export default class UpgradeStore {
setInterval(this.checkUpgrade, CHECK_INTERVAL);
}
@action setAvailableUpgrade (available, consensusCapability) {
@action setUpgrading () {
this.upgrading = this.available;
}
@action setVersions (available, version, consensusCapability) {
transaction(() => {
this.available = available;
this.consensusCapability = consensusCapability;
this.version = version;
});
}
checkUpgrade = () => {
return Promise
Promise
.all([
this._api.parity.upgradeReady(),
this._api.parity.consensusCapability()
this._api.parity.consensusCapability(),
this._api.parity.versionInfo()
])
.then(([available, consensusCapability]) => {
console.log('[checkUpgrade]', 'available:', available, 'consensusCapability:', consensusCapability);
this.setAvailableUpgrade(available, consensusCapability);
.then(([available, consensusCapability, version]) => {
console.log('[checkUpgrade]', 'available:', available, 'version:', version, 'consensusCapability:', consensusCapability);
this.setVersions(available, version, consensusCapability);
})
.catch((error) => {
console.warn('checkUpgrade', error);
@ -52,6 +60,8 @@ export default class UpgradeStore {
}
executeUpgrade = () => {
this.setUpgrading();
return this._api.parity.executeUpgrade();
}
}

10
js/src/ui/Modal/Busy/busy.js
View File

@ -16,17 +16,19 @@
import React, { Component, PropTypes } from 'react';
import { nodeOrStringProptype } from '~/util/proptypes';
import styles from './busy.css';
export default class Busy extends Component {
static propTypes = {
title: PropTypes.string,
state: PropTypes.string,
children: PropTypes.node
children: PropTypes.node,
state: nodeOrStringProptype(),
title: nodeOrStringProptype()
}
render () {
const { children, title, state } = this.props;
const { children, state, title } = this.props;
return (
<div className={ styles.center }>

37
js/src/ui/Modal/modal.css
View File

@ -14,16 +14,17 @@
/* You should have received a copy of the GNU General Public License
/* along with Parity. If not, see <http://www.gnu.org/licenses/>.
*/
.actions {
background: rgba(0, 0, 0, 0.25) !important;
}
.actions button:not([disabled]) {
color: white !important;
}
button:not([disabled]) {
color: white !important;
.actions button:not([disabled]) svg {
fill: white !important;
svg {
fill: white !important;
}
}
}
.body {
@ -36,26 +37,26 @@
.content {
transform: translate(0px, 0px) !important;
transition: none !important;
}
.content>div {
background: rgba(0, 0, 0, 0.5) !important;
transition: none !important;
&>div {
background: rgba(0, 0, 0, 0.5) !important;
transition: none !important;
}
}
.title {
background: rgba(0, 0, 0, 0.25) !important;
padding: 1em;
margin-bottom: 0;
background: rgba(0, 0, 0, 0.25) !important;
}
.title h3 {
margin: 0;
text-transform: uppercase;
}
h3 {
margin: 0;
text-transform: uppercase;
}
.title .steps {
margin-bottom: -1em;
.steps {
margin-bottom: -1em;
}
}
.waiting {