pond: Utility connect modes in ConnMgr

lotuspond/front/src/ConnMgr.js

@@ -6,6 +6,11 @@ class ConnMgr extends React.Component {
     super(props)
 
     this.connect = this.connect.bind(this)
+    this.connectAll = this.connectAll.bind(this)
+    this.connect1 = this.connect1.bind(this)
+    this.connectChain = this.connectChain.bind(this)
+
+    this.state = {conns: {}}
   }
 
   async connect(action, from, to) {
@@ -15,9 +20,39 @@ class ConnMgr extends React.Component {
 
       const toPeerInfo = await toNd.conn.call('Filecoin.NetAddrsListen', [])
 
-      console.log("conn")
       await fromNd.conn.call('Filecoin.NetConnect', [toPeerInfo])
     }
+
+    this.setState(prev => ({conns: {...prev.conns, [`${from},${to}`]: action}}))
+  }
+
+  connectAll() {
+    const nodes = this.props.nodes
+    let keys = Object.keys(nodes)
+
+    keys.filter((_, i) => i > 0).forEach((k, i) => {
+      keys.filter((_, j) => i >= j).forEach((kt, i) => {
+        this.connect(true, k, kt)
+      })
+    })
+  }
+
+  connect1() {
+    const nodes = this.props.nodes
+    let keys = Object.keys(nodes)
+
+    keys.filter((_, i) => i > 0).forEach((k, i) => {
+      this.connect(true, k, keys[0])
+    })
+  }
+
+  connectChain() {
+    const nodes = this.props.nodes
+    let keys = Object.keys(nodes)
+
+    keys.filter((_, i) => i > 0).forEach((k, i) => {
+      this.connect(true, k, keys[i])
+    })
   }
 
   render() {
@@ -26,19 +61,26 @@ class ConnMgr extends React.Component {
 
     const rows = keys.filter((_, i) => i > 0).map((k, i) => {
       const cols = keys.filter((_, j) => i >= j).map((kt, i) => {
-        return (<td><input key={k + "-" + kt} type="checkbox" onChange={e => this.connect(e.target.checked, k, kt)}/></td>)
+        const checked = this.state.conns[`${k},${kt}`] === true
+
+        return (<td key={k + "," + kt}><input checked={checked} type="checkbox" onChange={e => this.connect(e.target.checked, k, kt)}/></td>)
       })
       return (
-          <tr><td>{k}</td>{cols}</tr>
+          <tr key={k}><td>{k}</td>{cols}</tr>
       )
     })
 
     return(
       <Cristal title="Connection Manager">
         <table>
-          <thead><tr><td></td>{keys.slice(0, -1).map((i) => (<td>{i}</td>))}</tr></thead>
+          <thead><tr><td></td>{keys.slice(0, -1).map((i) => (<td key={i}>{i}</td>))}</tr></thead>
           <tbody>{rows}</tbody>
         </table>
+        <div>
+          <button onClick={this.connectAll}>ConnAll</button>
+          <button onClick={this.connect1}>Conn1</button>
+          <button onClick={this.connectChain}>ConnChain</button>
+        </div>
       </Cristal>
     )
   }