UI interface completed, to be tested

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

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

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';

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

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

View File

@ -18,14 +18,13 @@ import { observer } from 'mobx-react';
import React, { Component, PropTypes } from 'react'; import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { Button, Modal } from '~/ui'; import { Button } from '~/ui';
import { CancelIcon, DoneIcon, NextIcon, SnoozeIcon } from '~/ui/Icons'; import { CancelIcon, DoneIcon, NextIcon, SnoozeIcon } from '~/ui/Icons';
import Modal, { Busy, Completed } from '~/ui/Modal';
import Info from './Info';
import Updating from './Updating';
import ModalStore, { STEP_COMPLETED, STEP_ERROR, STEP_INFO, STEP_UPDATING } from './modalStore'; import ModalStore, { STEP_COMPLETED, STEP_ERROR, STEP_INFO, STEP_UPDATING } from './modalStore';
import UpgradeStore from './upgradeStore'; import UpgradeStore from './upgradeStore';
import styles from './upgradeParity.css';
@observer @observer
export default class UpgradeParity extends Component { export default class UpgradeParity extends Component {
@ -43,6 +42,22 @@ export default class UpgradeParity extends Component {
return ( return (
<Modal <Modal
actions={ this.renderActions() } 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> visible>
{ this.renderStep() } { this.renderStep() }
</Modal> </Modal>
@ -105,12 +120,110 @@ export default class UpgradeParity extends Component {
} }
renderStep () { 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) { switch (this.store.step) {
case STEP_INFO: 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: 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}`;
}
} }

View File

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

View File

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

View File

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