pond: Simple Consensus viewer

lotuspond/front/src/App.css

@@ -16,4 +16,8 @@
   min-width: 100%;
   height: 100%;
   overflow: auto;
+}
+
+.Consensus {
+  font-family: monospace;
 }

lotuspond/front/src/Consensus.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import {Cristal} from "react-cristal";
+
+function styleForHDiff(max, act) {
+  switch (max - act) {
+    case 0:
+      return {background: '#00aa00'}
+    case 1:
+      return {background: '#aaaa00'}
+    default:
+      return {background: '#aa0000'}
+  }
+}
+
+class Consensus extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      maxH: -1,
+      tipsets: []
+    }
+
+    this.updateNodes = this.updateNodes.bind(this)
+
+    setInterval(this.updateNodes, 333)
+  }
+
+  async updateNodes() {
+    const nodes = this.props.nodes
+    let keys = Object.keys(nodes)
+
+    const tipsets = await keys.map(async k => {
+      const tipset = await nodes[k].conn.call("Filecoin.ChainHead", [])
+      return [k, tipset]
+    }).reduce(async(p, i) => ([...await p, await i]), Promise.resolve([]))
+
+    const maxH = tipsets.reduce((p, [_, i]) => Math.max(p, i.Height), -1)
+
+    this.setState({maxH, tipsets})
+  }
+
+  render() {
+    return (<Cristal title={`Consensus`}>
+      <div className='Consensus'>
+        <div>Max Height: {this.state.maxH}</div>
+        <div>
+          <table cellSpacing={0}>
+            <thead>
+              <tr><td>Node</td><td>Height</td><td>TipSet</td></tr>
+            </thead>
+            <tbody>
+              {this.state.tipsets.map(([k, ts]) => {
+                return (
+                  <tr style={styleForHDiff(this.state.maxH, ts.Height)}>
+                    <td>{k}</td><td>{ts.Height}</td><td>{ts.Cids.map(c => <abbr title={c['/']}>{c['/'].substr(-8)}</abbr>)}</td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </Cristal>)
+  }
+}
+
+export default Consensus

lotuspond/front/src/FullNode.js

@@ -107,13 +107,17 @@ class FullNode extends React.Component {
       let chainInfo = <div></div>
       if (this.state.tipset !== undefined) {
         chainInfo = (
-          <div>Head: {this.state.tipset.Cids.map(c => c['/'].substr(-8))} H:{this.state.tipset.Height}</div>
+          <div>
+            Head: {
+            this.state.tipset.Cids.map(c => <abbr title={c['/']}>{c['/'].substr(-8)}</abbr>)
+          } H:{this.state.tipset.Height}
+          </div>
         )
       }
 
-      let mine = <a href="#" disabled={this.state.mining} onClick={this.startMining}>Mine</a>
+      let mine = <a href="#" disabled={this.state.mining} onClick={this.startMining}>[Mine]</a>
       if (this.state.mining) {
-        mine = "Mining"
+        mine = "[Mining]"
       }
 
       let balances = this.state.balances.map(([addr, balance]) => {
@@ -126,7 +130,7 @@ class FullNode extends React.Component {
 
       runtime = (
         <div>
-          <div>v{this.state.version.Version}, {this.state.id.substr(-8)}, {this.state.peers} peers</div>
+          <div>v{this.state.version.Version}, <abbr title={this.state.id}>{this.state.id.substr(-8)}</abbr>, {this.state.peers} peers</div>
           <div>Repo: LOTUS_PATH={this.props.node.Repo}</div>
           {chainInfo}
           {mine}

lotuspond/front/src/NodeList.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import FullNode from "./FullNode";
 import ConnMgr from "./ConnMgr";
+import Consensus from "./Consensus";
 
 class NodeList extends React.Component {
   constructor(props) {
@@ -10,11 +11,13 @@ class NodeList extends React.Component {
       nodes: {},
 
       showConnMgr: false,
+      showConsensus: false,
     }
 
     // This binding is necessary to make `this` work in the callback
     this.spawnNode = this.spawnNode.bind(this)
     this.connMgr = this.connMgr.bind(this)
+    this.consensus = this.consensus.bind(this)
 
     this.getNodes()
   }
@@ -36,17 +39,27 @@ class NodeList extends React.Component {
     this.setState({showConnMgr: true})
   }
 
+  consensus() {
+    this.setState({showConsensus: true})
+  }
+
   render() {
     let connMgr
     if (this.state.showConnMgr) {
       connMgr = (<ConnMgr nodes={this.state.nodes}/>)
     }
 
+    let consensus
+    if (this.state.showConsensus) {
+      consensus = (<Consensus nodes={this.state.nodes}/>)
+    }
+
     return (
       <div>
         <div>
           <button onClick={this.spawnNode} disabled={!this.state.existingLoaded}>Spawn Node</button>
           <button onClick={this.connMgr} disabled={!this.state.existingLoaded && !this.state.showConnMgr}>Connections</button>
+          <button onClick={this.consensus} disabled={!this.state.existingLoaded && !this.state.showConsensus}>Consensus</button>
         </div>
         <div>
           {
@@ -60,6 +73,7 @@ class NodeList extends React.Component {
             })
           }
           {connMgr}
+          {consensus}
         </div>
       </div>
     );