diff --git a/lotuspond/front/src/Block.js b/lotuspond/front/src/Block.js new file mode 100644 index 000000000..8cc2e9dd1 --- /dev/null +++ b/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 =
Loading Block Info
+ if (this.state.header) { + let head = this.state.header + + content = ( +
+
Height: {head.Height}
+
Parents:
+
Weight: {head.ParentWeight}
+
Messages: {head.Messages['/']} {/*TODO: link to message explorer */}
+
Receipts: {head.MessageReceipts['/']}
+
State Root: {head.StateRoot['/']}
+ + +
+ ) + } + + return ( + {content} + ) + } +} + +export default Block \ No newline at end of file diff --git a/lotuspond/front/src/BlockLink.js b/lotuspond/front/src/BlockLink.js new file mode 100644 index 000000000..785db03b2 --- /dev/null +++ b/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 => ) + } +} + +class BlockLink extends React.Component { + constructor(props) { + super(props) + + this.openBlockViewer = this.openBlockViewer.bind(this) + } + + openBlockViewer() { + this.props.mountWindow((onClose) => ) + } + + render() { + return {this.props.cid['/'].substr(-8)} + } +} + +export default BlockLink \ No newline at end of file diff --git a/lotuspond/front/src/Consensus.js b/lotuspond/front/src/Consensus.js index 08a935d2f..9fb4ed6b0 100644 --- a/lotuspond/front/src/Consensus.js +++ b/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 ( - {k}{ts.Height}{ts.Cids.map(c => {c['/'].substr(-8)})} + {k}{ts.Height} ) })} diff --git a/lotuspond/front/src/FullNode.js b/lotuspond/front/src/FullNode.js index 37115669e..552308214 100644 --- a/lotuspond/front/src/FullNode.js +++ b/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 = (
Head: { - this.state.tipset.Cids.map(c => {c['/'].substr(-8)}) + } H:{this.state.tipset.Height}
) diff --git a/lotuspond/front/src/NodeList.js b/lotuspond/front/src/NodeList.js index c6066443e..bd775d7cd 100644 --- a/lotuspond/front/src/NodeList.js +++ b/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 = () } return ( @@ -69,12 +84,16 @@ class NodeList extends React.Component { return ( 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} +
+ {Object.keys(this.state.windows).map((w, i) =>
{this.state.windows[w]}
)} +
); }