diff --git a/testbed/front/package-lock.json b/testbed/front/package-lock.json index 63420868c..4f9189a0b 100644 --- a/testbed/front/package-lock.json +++ b/testbed/front/package-lock.json @@ -2789,6 +2789,11 @@ "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==" }, + "camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=" + }, "caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -3798,6 +3803,11 @@ "postcss": "^7.0.5" } }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=" + }, "css-color-names": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", @@ -3887,6 +3897,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "css-to-react-native": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.1.tgz", + "integrity": "sha512-yO+oEx1Lf+hDKasqQRVrAvzMCz825Huh1VMlEEDlRWyAhFb/FWb6I0KpEF1PkyKQ7NEdcx9d5M2ZEWgJAsgPvQ==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^3.3.0" + } + }, "css-tree": { "version": "1.0.0-alpha.33", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.33.tgz", @@ -4444,6 +4464,14 @@ "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" }, + "encoding": { + "version": "0.1.12", + "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz", + "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=", + "requires": { + "iconv-lite": "~0.4.13" + } + }, "end-of-stream": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz", @@ -5287,6 +5315,35 @@ "bser": "^2.0.0" } }, + "fbjs": { + "version": "0.8.17", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz", + "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=", + "requires": { + "core-js": "^1.0.0", + "isomorphic-fetch": "^2.1.1", + "loose-envify": "^1.0.0", + "object-assign": "^4.1.0", + "promise": "^7.1.1", + "setimmediate": "^1.0.5", + "ua-parser-js": "^0.7.18" + }, + "dependencies": { + "core-js": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", + "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=" + }, + "promise": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", + "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "requires": { + "asap": "~2.0.3" + } + } + } + }, "figgy-pudding": { "version": "3.5.1", "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz", @@ -5846,6 +5903,11 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "hoist-non-react-statics": { + "version": "2.5.5", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz", + "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==" + }, "hosted-git-info": { "version": "2.7.1", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz", @@ -6454,6 +6516,15 @@ "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=" }, + "isomorphic-fetch": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz", + "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=", + "requires": { + "node-fetch": "^1.0.1", + "whatwg-fetch": ">=0.10.0" + } + }, "isomorphic-ws": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-4.0.1.tgz", @@ -8404,6 +8475,15 @@ "lower-case": "^1.1.1" } }, + "node-fetch": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", + "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==", + "requires": { + "encoding": "^0.1.11", + "is-stream": "^1.0.1" + } + }, "node-forge": { "version": "0.7.5", "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz", @@ -10177,6 +10257,11 @@ } } }, + "react-cristal": { + "version": "0.0.12", + "resolved": "https://registry.npmjs.org/react-cristal/-/react-cristal-0.0.12.tgz", + "integrity": "sha512-1aerLtjDv+59omo4BC7z6gxBpN4+4H2/2/Q1tDObLNwJcWCO5/Gq12IjVQ4FjYh1BLBtuBZe0HalIbVAFVPzqg==" + }, "react-dev-utils": { "version": "9.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-9.0.1.tgz", @@ -11597,6 +11682,46 @@ "schema-utils": "^1.0.0" } }, + "styled-components": { + "version": "3.4.10", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-3.4.10.tgz", + "integrity": "sha512-TA8ip8LoILgmSAFd3r326pKtXytUUGu5YWuqZcOQVwVVwB6XqUMn4MHW2IuYJ/HAD81jLrdQed8YWfLSG1LX4Q==", + "requires": { + "buffer": "^5.0.3", + "css-to-react-native": "^2.0.3", + "fbjs": "^0.8.16", + "hoist-non-react-statics": "^2.5.0", + "prop-types": "^15.5.4", + "react-is": "^16.3.1", + "stylis": "^3.5.0", + "stylis-rule-sheet": "^0.0.10", + "supports-color": "^3.2.3" + }, + "dependencies": { + "buffer": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.2.1.tgz", + "integrity": "sha512-c+Ko0loDaFfuPWiL02ls9Xd3GO3cPVmUobQ6t3rXNUk304u6hGq+8N/kFi+QEIKhzK3uwolVhLzszmfLmMLnqg==", + "requires": { + "base64-js": "^1.0.2", + "ieee754": "^1.1.4" + } + }, + "has-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz", + "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=" + }, + "supports-color": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz", + "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=", + "requires": { + "has-flag": "^1.0.0" + } + } + } + }, "stylehacks": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz", @@ -11619,6 +11744,16 @@ } } }, + "stylis": { + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz", + "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==" + }, + "stylis-rule-sheet": { + "version": "0.0.10", + "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", + "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==" + }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -11936,6 +12071,11 @@ "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" }, + "ua-parser-js": { + "version": "0.7.20", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.20.tgz", + "integrity": "sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw==" + }, "uglify-js": { "version": "3.4.10", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz", diff --git a/testbed/front/package.json b/testbed/front/package.json index 259006d63..d17349054 100644 --- a/testbed/front/package.json +++ b/testbed/front/package.json @@ -5,9 +5,11 @@ "dependencies": { "jsonrpc-websocket-client": "^0.5.0", "react": "^16.8.6", + "react-cristal": "^0.0.12", "react-dom": "^16.8.6", "react-scripts": "3.0.1", - "rpc-websockets": "^4.5.1" + "rpc-websockets": "^4.5.1", + "styled-components": "^3.3.3" }, "scripts": { "start": "react-scripts start", diff --git a/testbed/front/src/App.css b/testbed/front/src/App.css index f9399f333..163d97e00 100644 --- a/testbed/front/src/App.css +++ b/testbed/front/src/App.css @@ -8,4 +8,5 @@ background: #f9be77; margin-bottom: 5px; padding: 5px; + user-select: text; } \ No newline at end of file diff --git a/testbed/front/src/ConnMgr.js b/testbed/front/src/ConnMgr.js new file mode 100644 index 000000000..4093d3023 --- /dev/null +++ b/testbed/front/src/ConnMgr.js @@ -0,0 +1,14 @@ +import React from 'react'; +import Cristal from 'react-cristal' + +class ConnMgr extends React.Component { + render() { + return( + + Cmgr + + ) + } +} + +export default ConnMgr \ No newline at end of file diff --git a/testbed/front/src/FullNode.js b/testbed/front/src/FullNode.js index c7806ed86..dd0f28434 100644 --- a/testbed/front/src/FullNode.js +++ b/testbed/front/src/FullNode.js @@ -1,5 +1,6 @@ import React from 'react'; import { Client } from 'rpc-websockets' +import Cristal from 'react-cristal' const stateConnected = 'connected' const stateConnecting = 'connecting' @@ -10,7 +11,8 @@ class FullNode extends React.Component { super(props) this.state = { - state: stateGettingToken + state: stateGettingToken, + id: "~" } this.loadInfo = this.loadInfo.bind(this); @@ -63,16 +65,21 @@ class FullNode extends React.Component { runtime = (
v{this.state.version.Version}, {this.state.id.substr(-8)}, {this.state.peers} peers
- +
{this.props.node.Repo}
) } return ( -
-
{this.props.node.ID} - {this.state.state}
- {runtime} -
+ + +
+
{this.props.node.ID} - {this.state.state}
+ {runtime} +
+ ) } } diff --git a/testbed/front/src/NodeList.js b/testbed/front/src/NodeList.js index 29c853b90..6524bfbb0 100644 --- a/testbed/front/src/NodeList.js +++ b/testbed/front/src/NodeList.js @@ -1,16 +1,20 @@ import React from 'react'; import FullNode from "./FullNode"; +import ConnMgr from "./ConnMgr"; class NodeList extends React.Component { constructor(props) { - super(props); + super(props) this.state = { existingLoaded: false, - nodes: [] - }; + nodes: [], + + showConnMgr: false, + } // This binding is necessary to make `this` work in the callback - this.spawnNode = this.spawnNode.bind(this); + this.spawnNode = this.spawnNode.bind(this) + this.connMgr = this.connMgr.bind(this) this.props.client.call('Pond.Nodes').then(nodes => this.setState({existingLoaded: true, nodes: nodes})) } @@ -21,16 +25,31 @@ class NodeList extends React.Component { this.setState(state => ({nodes: state.nodes.concat(node)})) } + connMgr() { + this.setState({showConnMgr: true}) + } + render() { + let connMgr + if (this.state.showConnMgr) { + connMgr = () + } + return (
+
{ - this.state.nodes.map(node => ) + this.state.nodes.map((node, i) => { + return () + }) } + {connMgr}
);