pond: Basic block inspection

lotuspond/front/src/Block.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import {Cristal} from "react-cristal";
+import {BlockLinks} from "./BlockLink";
+
+class Block extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {}
+
+    this.loadHeader()
+  }
+
+  async loadHeader() {
+    const header = await this.props.conn.call('Filecoin.ChainGetBlock', [this.props.cid])
+    this.setState({header: header})
+  }
+
+  render() {
+    let content = <div>Loading Block Info</div>
+    if (this.state.header) {
+      let head = this.state.header
+
+      content = (
+        <div>
+          <div>Height: {head.Height}</div>
+          <div>Parents: <BlockLinks cids={head.Parents} conn={this.props.conn} mountWindow={this.props.mountWindow}/></div>
+          <div>Weight: {head.ParentWeight}</div>
+          <div>Messages: {head.Messages['/']} {/*TODO: link to message explorer */}</div>
+          <div>Receipts: {head.MessageReceipts['/']}</div>
+          <div>State Root: {head.StateRoot['/']}</div>
+
+
+        </div>
+      )
+    }
+
+    return (<Cristal onClose={this.props.onClose} title={`Block ${this.props.cid['/']}`}>
+      {content}
+    </Cristal>)
+  }
+}
+
+export default Block

lotuspond/front/src/BlockLink.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import Block from "./Block";
+
+
+export class BlockLinks extends React.Component {
+  render() {
+    return this.props.cids.map(c => <BlockLink conn={this.props.conn} cid={c} mountWindow={this.props.mountWindow}/>)
+  }
+}
+
+class BlockLink extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.openBlockViewer = this.openBlockViewer.bind(this)
+  }
+
+  openBlockViewer() {
+    this.props.mountWindow((onClose) => <Block cid={this.props.cid} conn={this.props.conn} onClose={onClose} mountWindow={this.props.mountWindow}/>)
+  }
+
+  render() {
+    return <a href="#" onClick={this.openBlockViewer}><abbr title={this.props.cid['/']}>{this.props.cid['/'].substr(-8)}</abbr></a>
+  }
+}
+
+export default BlockLink

lotuspond/front/src/Consensus.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import {Cristal} from "react-cristal";
+import {BlockLinks} from "./BlockLink";
 
 function styleForHDiff(max, act) {
   switch (max - act) {
@@ -53,7 +54,7 @@ class Consensus extends React.Component {
               {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>
+                    <td>{k}</td><td>{ts.Height}</td><td><BlockLinks cids={ts.Cids} conn={this.props.nodes[k].conn} mountWindow={this.props.mountWindow}/></td>
                   </tr>
                 )
               })}

lotuspond/front/src/FullNode.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Client } from 'rpc-websockets'
 import Cristal from 'react-cristal'
+import { BlockLinks } from "./BlockLink";
 
 const stateConnected = 'connected'
 const stateConnecting = 'connecting'
@@ -109,7 +110,7 @@ class FullNode extends React.Component {
         chainInfo = (
           <div>
             Head: {
-            this.state.tipset.Cids.map(c => <abbr title={c['/']}>{c['/'].substr(-8)}</abbr>)
+            <BlockLinks cids={this.state.tipset.Cids} conn={this.state.client} mountWindow={this.props.mountWindow} />
           } H:{this.state.tipset.Height}
           </div>
         )

lotuspond/front/src/NodeList.js

@@ -12,12 +12,16 @@ class NodeList extends React.Component {
 
       showConnMgr: false,
       showConsensus: false,
+
+      windows: {},
+      nextWindow: 0,
     }
 
     // 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.mountWindow = this.mountWindow.bind(this)
 
     this.getNodes()
   }
@@ -43,6 +47,17 @@ class NodeList extends React.Component {
     this.setState({showConsensus: true})
   }
 
+  mountWindow(cb) {
+    const id = this.state.nextWindow
+    this.setState({nextWindow: id + 1})
+
+    const window = cb(() => {
+      console.log("umount wnd todo")
+    })
+
+    this.setState(prev => ({windows: {...prev.windows, [id]: window}}))
+  }
+
   render() {
     let connMgr
     if (this.state.showConnMgr) {
@@ -51,7 +66,7 @@ class NodeList extends React.Component {
 
     let consensus
     if (this.state.showConsensus) {
-      consensus = (<Consensus nodes={this.state.nodes}/>)
+      consensus = (<Consensus nodes={this.state.nodes} mountWindow={this.mountWindow}/>)
     }
 
     return (
@@ -69,12 +84,16 @@ class NodeList extends React.Component {
               return (<FullNode key={node.ID}
                                 node={{...node}}
                                 pondClient={this.props.client}
-                                onConnect={(conn, id) => this.setState(prev => ({nodes: {...prev.nodes, [n]: {...node, conn: conn, peerid: id}}}))}/>)
+                                onConnect={(conn, id) => this.setState(prev => ({nodes: {...prev.nodes, [n]: {...node, conn: conn, peerid: id}}}))}
+                                mountWindow={this.mountWindow}/>)
             })
           }
           {connMgr}
           {consensus}
         </div>
+        <div>
+          {Object.keys(this.state.windows).map((w, i) => <div key={i}>{this.state.windows[w]}</div>)}
+        </div>
       </div>
     );
   }