diff --git a/js/src/ui/Container/Title/Byline/byline.js b/js/src/ui/Container/Title/Byline/byline.js
new file mode 100644
index 000000000..62d22570d
--- /dev/null
+++ b/js/src/ui/Container/Title/Byline/byline.js
@@ -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 .
+
+import React from 'react';
+
+import { nodeOrStringProptype } from '~/util/proptypes';
+
+import styles from '../title.css';
+
+export default function Byline ({ byline }) {
+ if (!byline) {
+ return null;
+ }
+
+ return (
+
+ {
+ typeof byline === 'string'
+ ? (
+
+ { byline }
+
+ )
+ : byline
+ }
+
+ );
+}
+
+Byline.propTypes = {
+ byline: nodeOrStringProptype()
+};
diff --git a/js/src/views/Status/NodeStatus/index.js b/js/src/ui/Container/Title/Byline/index.js
similarity index 95%
rename from js/src/views/Status/NodeStatus/index.js
rename to js/src/ui/Container/Title/Byline/index.js
index 2fccb4903..ccae5f9f6 100644
--- a/js/src/views/Status/NodeStatus/index.js
+++ b/js/src/ui/Container/Title/Byline/index.js
@@ -14,4 +14,4 @@
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see .
-export default from './nodeStatus';
+export default from './byline';
diff --git a/js/src/ui/Container/Title/Description/description.js b/js/src/ui/Container/Title/Description/description.js
new file mode 100644
index 000000000..27aca973a
--- /dev/null
+++ b/js/src/ui/Container/Title/Description/description.js
@@ -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 .
+
+import React from 'react';
+
+import { nodeOrStringProptype } from '~/util/proptypes';
+
+import styles from '../title.css';
+
+export default function Description ({ description }) {
+ if (!description) {
+ return null;
+ }
+
+ return (
+
+ {
+ typeof description === 'string'
+ ? (
+
+ { description }
+
+ )
+ : description
+ }
+
+ );
+}
+
+Description.propTypes = {
+ description: nodeOrStringProptype()
+};
diff --git a/js/src/ui/Container/Title/Description/index.js b/js/src/ui/Container/Title/Description/index.js
new file mode 100644
index 000000000..28923184b
--- /dev/null
+++ b/js/src/ui/Container/Title/Description/index.js
@@ -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 .
+
+export default from './description';
diff --git a/js/src/ui/Container/Title/title.js b/js/src/ui/Container/Title/title.js
index 217ad13bf..415796129 100644
--- a/js/src/ui/Container/Title/title.js
+++ b/js/src/ui/Container/Title/title.js
@@ -14,75 +14,30 @@
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see .
-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;
-
- return (
-
-
- { title }
-
- { this.renderByline() }
- { this.renderDescription() }
-
- );
- }
-
- renderByline () {
- const { byline } = this.props;
-
- if (!byline) {
- return null;
- }
-
- return (
-
- {
- typeof byline === 'string'
- ? (
-
- { byline }
-
- )
- : byline
- }
-
- );
- }
-
- renderDescription () {
- const { description } = this.props;
-
- if (!description) {
- return null;
- }
-
- return (
-
- {
- typeof description === 'string'
- ? (
-
- { description }
-
- )
- : description
- }
-
- );
- }
+export default function Title ({ byline, className, description, title }) {
+ return (
+
+
+ { title }
+
+
+
+
+ );
}
+
+Title.propTypes = {
+ byline: nodeOrStringProptype(),
+ className: PropTypes.string,
+ description: nodeOrStringProptype(),
+ title: nodeOrStringProptype()
+};
diff --git a/js/src/ui/Container/container.css b/js/src/ui/Container/container.css
index a4ab2f0c5..540b29b2d 100644
--- a/js/src/ui/Container/container.css
+++ b/js/src/ui/Container/container.css
@@ -15,9 +15,10 @@
/* along with Parity. If not, see .
*/
-$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;
diff --git a/js/src/ui/Icons/index.js b/js/src/ui/Icons/index.js
index 25f2a3b6d..0d05f0ce6 100644
--- a/js/src/ui/Icons/index.js
+++ b/js/src/ui/Icons/index.js
@@ -60,7 +60,7 @@ export const PrintIcon = () => ;
export const QrIcon = () => ;
export const RefreshIcon = () => ;
export const RemoveIcon = () => ;
-export const ReorderIcon = ;
+export const ReorderIcon = () => ;
export const ReplayIcon = () => ;
export const SaveIcon = () => ;
export const SearchIcon = () => ;
diff --git a/js/src/ui/Title/Steps/index.js b/js/src/ui/Title/Steps/index.js
new file mode 100644
index 000000000..5ef5faa71
--- /dev/null
+++ b/js/src/ui/Title/Steps/index.js
@@ -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 .
+
+export default from './steps';
diff --git a/js/src/ui/Title/Steps/steps.js b/js/src/ui/Title/Steps/steps.js
new file mode 100644
index 000000000..8d3047b6a
--- /dev/null
+++ b/js/src/ui/Title/Steps/steps.js
@@ -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 .
+
+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 (
+
+
+ {
+ steps.map((label, index) => {
+ return (
+
+
+ { label }
+
+
+ );
+ })
+ }
+
+
+ );
+}
+
+Steps.propTypes = {
+ activeStep: PropTypes.number,
+ steps: PropTypes.array
+};
diff --git a/js/src/ui/Title/Waiting/index.js b/js/src/ui/Title/Waiting/index.js
new file mode 100644
index 000000000..c9894c2b3
--- /dev/null
+++ b/js/src/ui/Title/Waiting/index.js
@@ -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 .
+
+export default from './waiting';
diff --git a/js/src/ui/Title/Waiting/waiting.js b/js/src/ui/Title/Waiting/waiting.js
new file mode 100644
index 000000000..34d0cef7b
--- /dev/null
+++ b/js/src/ui/Title/Waiting/waiting.js
@@ -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 .
+
+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 (
+
+ );
+}
+
+Waiting.propTypes = {
+ activeStep: PropTypes.number,
+ busy: PropTypes.bool,
+ busySteps: PropTypes.array
+};
diff --git a/js/src/ui/Title/title.js b/js/src/ui/Title/title.js
index 306cbcbaa..49e607c34 100644
--- a/js/src/ui/Title/title.js
+++ b/js/src/ui/Title/title.js
@@ -14,107 +14,62 @@
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see .
-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()
+export default function Title ({ activeStep, busy, busySteps, byline, className, description, isSubTitle, steps, title }) {
+ if (!title && !steps) {
+ return null;
}
- render () {
- const { activeStep, byline, className, description, isSubTitle, steps, title } = this.props;
-
- if (!title && !steps) {
- return null;
- }
-
- return (
-
+
-
- { this.renderSteps() }
- { this.renderWaiting() }
-
- );
- }
-
- renderSteps () {
- const { activeStep, steps } = this.props;
-
- if (!steps || steps.length < 2) {
- return;
- }
-
- return (
-
-
- { this.renderTimeline() }
-
-
- );
- }
-
- renderTimeline () {
- const { steps } = this.props;
-
- return steps.map((label, index) => {
- return (
-
-
- { label }
-
-
- );
- });
- }
-
- renderWaiting () {
- const { activeStep, busy, busySteps } = this.props;
- const isWaiting = busy || (busySteps || []).includes(activeStep);
-
- if (!isWaiting) {
- return null;
- }
-
- return (
-
- );
- }
+ />
+
+
+
+ );
}
+
+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()
+};
diff --git a/js/src/views/Status/Debug/Logs/index.js b/js/src/views/Status/Debug/Logs/index.js
new file mode 100644
index 000000000..25cb05328
--- /dev/null
+++ b/js/src/views/Status/Debug/Logs/index.js
@@ -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 .
+
+export default from './logs';
diff --git a/js/src/views/Status/Debug/Logs/logs.js b/js/src/views/Status/Debug/Logs/logs.js
new file mode 100644
index 000000000..420756dea
--- /dev/null
+++ b/js/src/views/Status/Debug/Logs/logs.js
@@ -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 .
+
+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 (
+
+ {
+ logs.map((log, index) => {
+ return (
+
+ [{ log.date.toLocaleString() }]
+ { log.log }
+
+ );
+ })
+ }
+
+
+
+ );
+}
+
+Toggle.propTypes = {
+ logsEnabled: PropTypes.bool
+};
diff --git a/js/src/views/Status/Debug/debug.js b/js/src/views/Status/Debug/debug.js
index a0b91a3f2..895b4f043 100644
--- a/js/src/views/Status/Debug/debug.js
+++ b/js/src/views/Status/Debug/debug.js
@@ -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 (
}
>
- { this.renderActions() }
+
{ logsLevels || '-' }
- { this.renderToggle() }
- { this.renderLogs() }
+
+
);
}
- renderToggle () {
- const { logsEnabled } = this.debugStore;
-
- if (logsEnabled) {
- return null;
- }
-
- return (
-
-
-
- );
- }
-
- renderLogs () {
- const { logs } = this.debugStore;
-
- if (logs.length === 0) {
- return null;
- }
-
- const text = logs
- .map((log, index) => {
- return (
-
- [{ log.date.toLocaleString() }]
- { log.log }
-
- );
- });
-
- return (
-
- { text }
-
- );
- }
-
- renderActions () {
- const { logsEnabled } = this.debugStore;
- const toggleButton = logsEnabled
- ?
- : ;
-
- return (
-
- );
- }
-
clear = () => {
this.debugStore.clearLogs();
};
diff --git a/js/src/views/Status/Node/index.js b/js/src/views/Status/Node/index.js
new file mode 100644
index 000000000..cc01337ff
--- /dev/null
+++ b/js/src/views/Status/Node/index.js
@@ -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 .
+
+export default from './node';
diff --git a/js/src/views/Status/NodeStatus/nodeStatus.css b/js/src/views/Status/Node/node.css
similarity index 99%
rename from js/src/views/Status/NodeStatus/nodeStatus.css
rename to js/src/views/Status/Node/node.css
index e96e3bc04..f057de6eb 100644
--- a/js/src/views/Status/NodeStatus/nodeStatus.css
+++ b/js/src/views/Status/Node/node.css
@@ -14,6 +14,7 @@
/* You should have received a copy of the GNU General Public License
/* along with Parity. If not, see .
*/
+
.container {
padding-bottom: 1em;
}
diff --git a/js/src/views/Status/NodeStatus/nodeStatus.js b/js/src/views/Status/Node/node.js
similarity index 98%
rename from js/src/views/Status/NodeStatus/nodeStatus.js
rename to js/src/views/Status/Node/node.js
index 7e2e0679e..51eeae4df 100644
--- a/js/src/views/Status/NodeStatus/nodeStatus.js
+++ b/js/src/views/Status/Node/node.js
@@ -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);
diff --git a/js/src/views/Status/NodeStatus/store.js b/js/src/views/Status/Node/store.js
similarity index 100%
rename from js/src/views/Status/NodeStatus/store.js
rename to js/src/views/Status/Node/store.js
diff --git a/js/src/views/Status/Peers/Peer/index.js b/js/src/views/Status/Peers/Peer/index.js
new file mode 100644
index 000000000..66fe3ded4
--- /dev/null
+++ b/js/src/views/Status/Peers/Peer/index.js
@@ -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 .
+
+export default from './peer';
diff --git a/js/src/views/Status/Peers/Peer/peer.js b/js/src/views/Status/Peers/Peer/peer.js
new file mode 100644
index 000000000..c6d037662
--- /dev/null
+++ b/js/src/views/Status/Peers/Peer/peer.js
@@ -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 .
+
+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 (
+
+ |
+ { index + 1 }
+ |
+
+
+ |
+
+ { network.remoteAddress }
+ |
+
+ { name }
+ |
+
+ {
+ protocols.eth
+ ?
+ : null
+ }
+ |
+
+ {
+ protocols.eth && protocols.eth.difficulty.gt(0)
+ ? protocols.eth.difficulty.toExponential(16)
+ : null
+ }
+ |
+
+ {
+ caps && caps.length > 0
+ ? caps.join(' - ')
+ : null
+ }
+ |
+
+ );
+}
+
+Peer.propTypes = {
+ peer: PropTypes.object,
+ index: PropTypes.number
+};
diff --git a/js/src/views/Status/Peers/peers.js b/js/src/views/Status/Peers/peers.js
index 43fcbff30..8ea36e087 100644
--- a/js/src/views/Status/Peers/peers.js
+++ b/js/src/views/Status/Peers/peers.js
@@ -14,134 +14,92 @@
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see .
-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;
-
- return (
-
-
- }
+function Peers ({ peers }) {
+ return (
+
-
+
+ );
}
+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);
diff --git a/js/src/views/Status/status.js b/js/src/views/Status/status.js
index 45e736b3a..a96a76f77 100644
--- a/js/src/views/Status/status.js
+++ b/js/src/views/Status/status.js
@@ -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 () {
}
>