UI 2 Status dapp fixes (#5531)
* Stateless components * Adjust borders * Stateless for status
This commit is contained in:
parent
4781d2e15a
commit
fa243cdf89
45
js/src/ui/Container/Title/Byline/byline.js
Normal file
45
js/src/ui/Container/Title/Byline/byline.js
Normal file
@ -0,0 +1,45 @@
|
||||
// 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 from 'react';
|
||||
|
||||
import { nodeOrStringProptype } from '~/util/proptypes';
|
||||
|
||||
import styles from '../title.css';
|
||||
|
||||
export default function Byline ({ byline }) {
|
||||
if (!byline) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ styles.byline }>
|
||||
{
|
||||
typeof byline === 'string'
|
||||
? (
|
||||
<span title={ byline }>
|
||||
{ byline }
|
||||
</span>
|
||||
)
|
||||
: byline
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Byline.propTypes = {
|
||||
byline: nodeOrStringProptype()
|
||||
};
|
@ -14,4 +14,4 @@
|
||||
// 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';
|
||||
export default from './byline';
|
45
js/src/ui/Container/Title/Description/description.js
Normal file
45
js/src/ui/Container/Title/Description/description.js
Normal file
@ -0,0 +1,45 @@
|
||||
// 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 from 'react';
|
||||
|
||||
import { nodeOrStringProptype } from '~/util/proptypes';
|
||||
|
||||
import styles from '../title.css';
|
||||
|
||||
export default function Description ({ description }) {
|
||||
if (!description) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ styles.description }>
|
||||
{
|
||||
typeof description === 'string'
|
||||
? (
|
||||
<span title={ description }>
|
||||
{ description }
|
||||
</span>
|
||||
)
|
||||
: description
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Description.propTypes = {
|
||||
description: nodeOrStringProptype()
|
||||
};
|
17
js/src/ui/Container/Title/Description/index.js
Normal file
17
js/src/ui/Container/Title/Description/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 './description';
|
@ -14,75 +14,30 @@
|
||||
// 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, PropTypes } from 'react';
|
||||
import React, { PropTypes } from 'react';
|
||||
|
||||
import { nodeOrStringProptype } from '~/util/proptypes';
|
||||
|
||||
import Byline from './Byline';
|
||||
import Description from './Description';
|
||||
|
||||
import styles from './title.css';
|
||||
|
||||
export default class Title extends Component {
|
||||
static propTypes = {
|
||||
byline: nodeOrStringProptype(),
|
||||
className: PropTypes.string,
|
||||
description: nodeOrStringProptype(),
|
||||
title: nodeOrStringProptype()
|
||||
}
|
||||
|
||||
render () {
|
||||
const { className, title } = this.props;
|
||||
|
||||
export default function Title ({ byline, className, description, title }) {
|
||||
return (
|
||||
<div className={ className }>
|
||||
<h3 className={ styles.title }>
|
||||
{ title }
|
||||
</h3>
|
||||
{ this.renderByline() }
|
||||
{ this.renderDescription() }
|
||||
<Byline byline={ byline } />
|
||||
<Description description={ description } />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderByline () {
|
||||
const { byline } = this.props;
|
||||
|
||||
if (!byline) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ styles.byline }>
|
||||
{
|
||||
typeof byline === 'string'
|
||||
? (
|
||||
<span title={ byline }>
|
||||
{ byline }
|
||||
</span>
|
||||
)
|
||||
: byline
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderDescription () {
|
||||
const { description } = this.props;
|
||||
|
||||
if (!description) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ styles.description }>
|
||||
{
|
||||
typeof description === 'string'
|
||||
? (
|
||||
<span title={ description }>
|
||||
{ description }
|
||||
</span>
|
||||
)
|
||||
: description
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Title.propTypes = {
|
||||
byline: nodeOrStringProptype(),
|
||||
className: PropTypes.string,
|
||||
description: nodeOrStringProptype(),
|
||||
title: nodeOrStringProptype()
|
||||
};
|
||||
|
@ -15,9 +15,10 @@
|
||||
/* along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
$background: rgba(255, 255, 255, 0.85);
|
||||
$backgroundHover: rgba(249, 249, 249, 1);
|
||||
$background: rgba(254, 254, 254, 1);
|
||||
$backgroundHover: rgba(250, 250, 250, 1);
|
||||
$backgroundLight: rgba(18, 18, 18, 0.5);
|
||||
$borderColor: rgba(242, 242, 242, 1);
|
||||
|
||||
.container {
|
||||
background: $background;
|
||||
@ -48,7 +49,7 @@ $backgroundLight: rgba(18, 18, 18, 0.5);
|
||||
|
||||
.hoverOverlay {
|
||||
background: $backgroundHover !important;
|
||||
border: 1px solid whitesmoke;
|
||||
border: 1px solid $borderColor;
|
||||
border-top: 1px solid transparent;
|
||||
box-shadow: none !important;
|
||||
display: block;
|
||||
@ -61,7 +62,7 @@ $backgroundLight: rgba(18, 18, 18, 0.5);
|
||||
.padded {
|
||||
background-color: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: 1px solid whitesmoke;
|
||||
border: 1px solid $borderColor;
|
||||
box-shadow: none !important;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
@ -60,7 +60,7 @@ export const PrintIcon = () => <Icon name='print' />;
|
||||
export const QrIcon = () => <Icon name='qrcode' />;
|
||||
export const RefreshIcon = () => <Icon name='refresh' />;
|
||||
export const RemoveIcon = () => <Icon name='remove' />;
|
||||
export const ReorderIcon = <Icon name='align justify' />;
|
||||
export const ReorderIcon = () => <Icon name='align justify' />;
|
||||
export const ReplayIcon = () => <Icon name='retweet' />;
|
||||
export const SaveIcon = () => <Icon name='save' />;
|
||||
export const SearchIcon = () => <Icon name='search' />;
|
||||
|
17
js/src/ui/Title/Steps/index.js
Normal file
17
js/src/ui/Title/Steps/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 './steps';
|
49
js/src/ui/Title/Steps/steps.js
Normal file
49
js/src/ui/Title/Steps/steps.js
Normal file
@ -0,0 +1,49 @@
|
||||
// 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, { PropTypes } from 'react';
|
||||
import { Step, Stepper, StepLabel } from 'material-ui/Stepper';
|
||||
|
||||
import styles from '../title.css';
|
||||
|
||||
export default function Steps ({ activeStep, steps }) {
|
||||
if (!steps || steps.length < 2) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ styles.steps }>
|
||||
<Stepper activeStep={ activeStep }>
|
||||
{
|
||||
steps.map((label, index) => {
|
||||
return (
|
||||
<Step key={ label.key || index }>
|
||||
<StepLabel>
|
||||
{ label }
|
||||
</StepLabel>
|
||||
</Step>
|
||||
);
|
||||
})
|
||||
}
|
||||
</Stepper>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Steps.propTypes = {
|
||||
activeStep: PropTypes.number,
|
||||
steps: PropTypes.array
|
||||
};
|
17
js/src/ui/Title/Waiting/index.js
Normal file
17
js/src/ui/Title/Waiting/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 './waiting';
|
41
js/src/ui/Title/Waiting/waiting.js
Normal file
41
js/src/ui/Title/Waiting/waiting.js
Normal file
@ -0,0 +1,41 @@
|
||||
// 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, { PropTypes } from 'react';
|
||||
|
||||
import Progress from '~/ui/Progress';
|
||||
|
||||
import styles from '../title.css';
|
||||
|
||||
export default function Waiting ({ activeStep, busy, busySteps }) {
|
||||
const isWaiting = busy || (busySteps || []).includes(activeStep);
|
||||
|
||||
if (!isWaiting) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ styles.waiting }>
|
||||
<Progress />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Waiting.propTypes = {
|
||||
activeStep: PropTypes.number,
|
||||
busy: PropTypes.bool,
|
||||
busySteps: PropTypes.array
|
||||
};
|
@ -14,35 +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/>.
|
||||
|
||||
import { Step, Stepper, StepLabel } from 'material-ui/Stepper';
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import React, { PropTypes } from 'react';
|
||||
|
||||
// TODO: It would make sense (going forward) to replace all uses of
|
||||
// ContainerTitle with this component. In that case the styles for the
|
||||
// h3 (title) can be pulled from there. (As it stands the duplication
|
||||
// between the 2 has been removed, but as a short-term DRY only)
|
||||
import { Title as ContainerTitle } from '~/ui/Container';
|
||||
import Progress from '~/ui/Progress';
|
||||
import { nodeOrStringProptype } from '~/util/proptypes';
|
||||
|
||||
import Steps from './Steps';
|
||||
import Waiting from './Waiting';
|
||||
|
||||
import styles from './title.css';
|
||||
|
||||
export default class Title extends Component {
|
||||
static propTypes = {
|
||||
activeStep: PropTypes.number,
|
||||
description: nodeOrStringProptype(),
|
||||
busy: PropTypes.bool,
|
||||
busySteps: PropTypes.array,
|
||||
byline: nodeOrStringProptype(),
|
||||
className: PropTypes.string,
|
||||
isSubTitle: PropTypes.bool,
|
||||
steps: PropTypes.array,
|
||||
title: nodeOrStringProptype()
|
||||
}
|
||||
|
||||
render () {
|
||||
const { activeStep, byline, className, description, isSubTitle, steps, title } = this.props;
|
||||
|
||||
export default function Title ({ activeStep, busy, busySteps, byline, className, description, isSubTitle, steps, title }) {
|
||||
if (!title && !steps) {
|
||||
return null;
|
||||
}
|
||||
@ -67,54 +49,27 @@ export default class Title extends Component {
|
||||
: title
|
||||
}
|
||||
/>
|
||||
{ this.renderSteps() }
|
||||
{ this.renderWaiting() }
|
||||
<Steps
|
||||
activeStep={ activeStep }
|
||||
steps={ steps }
|
||||
/>
|
||||
<Waiting
|
||||
activeStep={ activeStep }
|
||||
busy={ busy }
|
||||
busySteps={ busySteps }
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderSteps () {
|
||||
const { activeStep, steps } = this.props;
|
||||
|
||||
if (!steps || steps.length < 2) {
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ styles.steps }>
|
||||
<Stepper activeStep={ activeStep }>
|
||||
{ this.renderTimeline() }
|
||||
</Stepper>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderTimeline () {
|
||||
const { steps } = this.props;
|
||||
|
||||
return steps.map((label, index) => {
|
||||
return (
|
||||
<Step key={ label.key || index }>
|
||||
<StepLabel>
|
||||
{ label }
|
||||
</StepLabel>
|
||||
</Step>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
renderWaiting () {
|
||||
const { activeStep, busy, busySteps } = this.props;
|
||||
const isWaiting = busy || (busySteps || []).includes(activeStep);
|
||||
|
||||
if (!isWaiting) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ styles.waiting }>
|
||||
<Progress />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Title.propTypes = {
|
||||
activeStep: PropTypes.number,
|
||||
description: nodeOrStringProptype(),
|
||||
busy: PropTypes.bool,
|
||||
busySteps: PropTypes.array,
|
||||
byline: nodeOrStringProptype(),
|
||||
className: PropTypes.string,
|
||||
isSubTitle: PropTypes.bool,
|
||||
steps: PropTypes.array,
|
||||
title: nodeOrStringProptype()
|
||||
};
|
||||
|
17
js/src/views/Status/Debug/Logs/index.js
Normal file
17
js/src/views/Status/Debug/Logs/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 './logs';
|
46
js/src/views/Status/Debug/Logs/logs.js
Normal file
46
js/src/views/Status/Debug/Logs/logs.js
Normal file
@ -0,0 +1,46 @@
|
||||
// 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 from 'react';
|
||||
|
||||
import { arrayOrObjectProptype } from '~/util/proptypes';
|
||||
|
||||
import styles from '../debug.css';
|
||||
|
||||
export default function Logs ({ logs }) {
|
||||
if (!logs || logs.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ styles.logs }>
|
||||
{
|
||||
logs.map((log, index) => {
|
||||
return (
|
||||
<p key={ index } className={ styles.log }>
|
||||
<span className={ styles.logDate }>[{ log.date.toLocaleString() }]</span>
|
||||
<span className={ styles.logText }>{ log.log }</span>
|
||||
</p>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Logs.propTypes = {
|
||||
logs: arrayOrObjectProptype()
|
||||
};
|
17
js/src/views/Status/Debug/Toggle/index.js
Normal file
17
js/src/views/Status/Debug/Toggle/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 './toggle';
|
39
js/src/views/Status/Debug/Toggle/toggle.js
Normal file
39
js/src/views/Status/Debug/Toggle/toggle.js
Normal file
@ -0,0 +1,39 @@
|
||||
// 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, { PropTypes } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import styles from '../debug.css';
|
||||
|
||||
export default function Toggle ({ logsEnabled }) {
|
||||
if (logsEnabled) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ styles.stopped }>
|
||||
<FormattedMessage
|
||||
id='status.debug.stopped'
|
||||
defaultMessage='Refresh and display of logs from Parity is currently stopped via the UI, start it to see the latest updates.'
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Toggle.propTypes = {
|
||||
logsEnabled: PropTypes.bool
|
||||
};
|
@ -21,6 +21,8 @@ import { FormattedMessage } from 'react-intl';
|
||||
import { Container } from '~/ui';
|
||||
import { PauseIcon, PlayIcon, ReorderIcon, ReplayIcon } from '~/ui/Icons';
|
||||
|
||||
import Logs from './Logs';
|
||||
import Toggle from './Toggle';
|
||||
import DebugStore from './store';
|
||||
import styles from './debug.css';
|
||||
|
||||
@ -37,7 +39,7 @@ export default class Debug extends Component {
|
||||
}
|
||||
|
||||
render () {
|
||||
const { logsLevels } = this.debugStore;
|
||||
const { logs, logsEnabled, logsLevels } = this.debugStore;
|
||||
|
||||
return (
|
||||
<Container
|
||||
@ -48,67 +50,17 @@ export default class Debug extends Component {
|
||||
/>
|
||||
}
|
||||
>
|
||||
{ this.renderActions() }
|
||||
<h2 className={ styles.subheader }>
|
||||
{ logsLevels || '-' }
|
||||
</h2>
|
||||
{ this.renderToggle() }
|
||||
{ this.renderLogs() }
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
renderToggle () {
|
||||
const { logsEnabled } = this.debugStore;
|
||||
|
||||
if (logsEnabled) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ styles.stopped }>
|
||||
<FormattedMessage
|
||||
id='status.debug.stopped'
|
||||
defaultMessage='Refresh and display of logs from Parity is currently stopped via the UI, start it to see the latest updates.'
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderLogs () {
|
||||
const { logs } = this.debugStore;
|
||||
|
||||
if (logs.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const text = logs
|
||||
.map((log, index) => {
|
||||
return (
|
||||
<p key={ index } className={ styles.log }>
|
||||
<span className={ styles.logDate }>[{ log.date.toLocaleString() }]</span>
|
||||
<span className={ styles.logText }>{ log.log }</span>
|
||||
</p>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={ styles.logs }>
|
||||
{ text }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderActions () {
|
||||
const { logsEnabled } = this.debugStore;
|
||||
const toggleButton = logsEnabled
|
||||
? <PauseIcon />
|
||||
: <PlayIcon />;
|
||||
|
||||
return (
|
||||
<div className={ styles.actions }>
|
||||
<a onClick={ this.toggle }>{ toggleButton }</a>
|
||||
<a onClick={ this.clear }><ReplayIcon /></a>
|
||||
<a onClick={ this.toggle }>
|
||||
{
|
||||
logsEnabled
|
||||
? <PauseIcon />
|
||||
: <PlayIcon />
|
||||
}
|
||||
</a>
|
||||
<a onClick={ this.clear }>
|
||||
<ReplayIcon />
|
||||
</a>
|
||||
<a
|
||||
onClick={ this.reverse }
|
||||
title={
|
||||
@ -121,6 +73,12 @@ export default class Debug extends Component {
|
||||
<ReorderIcon />
|
||||
</a>
|
||||
</div>
|
||||
<h2 className={ styles.subheader }>
|
||||
{ logsLevels || '-' }
|
||||
</h2>
|
||||
<Toggle logsEnabled={ logsEnabled } />
|
||||
<Logs logs={ logs } />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
|
17
js/src/views/Status/Node/index.js
Normal file
17
js/src/views/Status/Node/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 './node';
|
@ -14,6 +14,7 @@
|
||||
/* 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;
|
||||
}
|
@ -25,9 +25,9 @@ import { Container, ContainerTitle, Input } from '~/ui';
|
||||
import MiningSettings from '../MiningSettings';
|
||||
import StatusStore from './store';
|
||||
|
||||
import styles from './nodeStatus.css';
|
||||
import styles from './node.css';
|
||||
|
||||
class NodeStatus extends Component {
|
||||
class Node extends Component {
|
||||
static contextTypes = {
|
||||
api: PropTypes.object.isRequired
|
||||
};
|
||||
@ -298,4 +298,4 @@ function mapStateToProps (state) {
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
null
|
||||
)(NodeStatus);
|
||||
)(Node);
|
17
js/src/views/Status/Peers/Peer/index.js
Normal file
17
js/src/views/Status/Peers/Peer/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 './peer';
|
71
js/src/views/Status/Peers/Peer/peer.js
Normal file
71
js/src/views/Status/Peers/Peer/peer.js
Normal file
@ -0,0 +1,71 @@
|
||||
// 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, { PropTypes } from 'react';
|
||||
|
||||
import { ScrollableText, ShortenedHash } from '~/ui';
|
||||
|
||||
import styles from '../peers.css';
|
||||
|
||||
export default function Peer ({ index, peer }) {
|
||||
const { caps, id, name, network, protocols } = peer;
|
||||
|
||||
return (
|
||||
<tr
|
||||
className={ styles.peer }
|
||||
key={ id }
|
||||
>
|
||||
<td>
|
||||
{ index + 1 }
|
||||
</td>
|
||||
<td>
|
||||
<ScrollableText small text={ id } />
|
||||
</td>
|
||||
<td>
|
||||
{ network.remoteAddress }
|
||||
</td>
|
||||
<td>
|
||||
{ name }
|
||||
</td>
|
||||
<td>
|
||||
{
|
||||
protocols.eth
|
||||
? <ShortenedHash data={ protocols.eth.head } />
|
||||
: null
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
{
|
||||
protocols.eth && protocols.eth.difficulty.gt(0)
|
||||
? protocols.eth.difficulty.toExponential(16)
|
||||
: null
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
{
|
||||
caps && caps.length > 0
|
||||
? caps.join(' - ')
|
||||
: null
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
Peer.propTypes = {
|
||||
peer: PropTypes.object,
|
||||
index: PropTypes.number
|
||||
};
|
@ -14,32 +14,26 @@
|
||||
// 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, PropTypes } from 'react';
|
||||
import React, { PropTypes } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { Container, ContainerTitle, ScrollableText, ShortenedHash } from '~/ui';
|
||||
import { Container } from '~/ui';
|
||||
|
||||
import Peer from './peer';
|
||||
|
||||
import styles from './peers.css';
|
||||
|
||||
class Peers extends Component {
|
||||
static propTypes = {
|
||||
peers: PropTypes.array.isRequired
|
||||
};
|
||||
|
||||
render () {
|
||||
const { peers } = this.props;
|
||||
|
||||
function Peers ({ peers }) {
|
||||
return (
|
||||
<Container>
|
||||
<ContainerTitle
|
||||
<Container
|
||||
title={
|
||||
<FormattedMessage
|
||||
id='status.peers.title'
|
||||
defaultMessage='network peers'
|
||||
/>
|
||||
}
|
||||
/>
|
||||
>
|
||||
<div className={ styles.peers }>
|
||||
<table>
|
||||
<thead>
|
||||
@ -84,64 +78,28 @@ class Peers extends Component {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{ this.renderPeers(peers) }
|
||||
{
|
||||
peers.map((peer, index) => {
|
||||
return (
|
||||
<Peer
|
||||
index={ index }
|
||||
key={ index }
|
||||
peer={ peer }
|
||||
/>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
renderPeers (peers) {
|
||||
return peers.map((peer, index) => this.renderPeer(peer, index));
|
||||
}
|
||||
|
||||
renderPeer (peer, index) {
|
||||
const { caps, id, name, network, protocols } = peer;
|
||||
|
||||
return (
|
||||
<tr
|
||||
className={ styles.peer }
|
||||
key={ id }
|
||||
>
|
||||
<td>
|
||||
{ index + 1 }
|
||||
</td>
|
||||
<td>
|
||||
<ScrollableText small text={ id } />
|
||||
</td>
|
||||
<td>
|
||||
{ network.remoteAddress }
|
||||
</td>
|
||||
<td>
|
||||
{ name }
|
||||
</td>
|
||||
<td>
|
||||
{
|
||||
protocols.eth
|
||||
? <ShortenedHash data={ protocols.eth.head } />
|
||||
: null
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
{
|
||||
protocols.eth && protocols.eth.difficulty.gt(0)
|
||||
? protocols.eth.difficulty.toExponential(16)
|
||||
: null
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
{
|
||||
caps && caps.length > 0
|
||||
? caps.join(' - ')
|
||||
: null
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Peers.propTypes = {
|
||||
peers: PropTypes.array.isRequired
|
||||
};
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const handshakeRegex = /handshake/i;
|
||||
|
||||
@ -160,4 +118,7 @@ function mapStateToProps (state) {
|
||||
return { peers: realPeers };
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(Peers);
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
null
|
||||
)(Peers);
|
||||
|
@ -20,8 +20,8 @@ import { FormattedMessage } from 'react-intl';
|
||||
import { Page } from '~/ui';
|
||||
|
||||
import Debug from './Debug';
|
||||
import Node from './Node';
|
||||
import Peers from './Peers';
|
||||
import NodeStatus from './NodeStatus';
|
||||
|
||||
import styles from './status.css';
|
||||
|
||||
@ -36,7 +36,7 @@ export default function Status () {
|
||||
}
|
||||
>
|
||||
<div className={ styles.body }>
|
||||
<NodeStatus />
|
||||
<Node />
|
||||
<Peers />
|
||||
<Debug />
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user