cerc-io/lotus
16
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 27 Wiki Activity

Merge pull request #254 from filecoin-project/feat/pond-nodeinfo

Browse Source 
pond: Show basic node info in node index
This commit is contained in:
Łukasz Magiera 2019-10-01 17:59:59 +02:00 committed by GitHub
commit 9888bd5114
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 111 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
lotuspond/front/src/App.js
View File

@ -3,81 +3,7 @@ import './App.css';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Pond from "./Pond";
import SingleNode from "./SingleNode";
class Index extends React.Component {
constructor(props) {
super(props)
this.state = {rpcUrl: "ws://127.0.0.1:1234/rpc/v0", rpcToken: ''}
const initialState = JSON.parse(window.localStorage.getItem('saved-nodes'))
if (initialState) {
this.state.nodes = initialState
} else {
this.state.nodes = []
}
}
componentDidUpdate(prevProps, prevState, snapshot) {
window.localStorage.setItem('saved-nodes', JSON.stringify(this.state.nodes))
}
onAdd = () => {
this.setState({addingNode: true})
}
update = (name) => (e) => this.setState({ [name]: e.target.value })
tokenOk = () => {
let m = this.state.rpcToken.match(/\.(.+)\./)
// TODO: eww
if(m && atob(m[1]) === '{"Allow":["read","write","sign","admin"]}') {
return (
<span>-Token OK-
<div>
<button onClick={this.addNode}>Add Node</button>
</div>
</span>
)
}
return <span>-Expecting valid admin token-</span>
}
addNode = async () => {
this.setState(p => ({nodes: [...p.nodes, {addr: this.state.rpcUrl, token: this.state.rpcToken}], addingNode: true}))
}
render() {
return (
<div className="Index">
<div className="Index-nodes">
<div>
{
this.state.nodes.map((node, i) => <div className="Index-node">
<span>{i}. {node.addr} <Link to={`/app/node/${i}`}>[OPEN UI]</Link></span>
</div>)
}
</div>
<a hidden={this.state.addingNode} href='#' onClick={this.onAdd} className="Button">[Add Node]</a>
<div hidden={!this.state.addingNode}>
<div>---------------</div>
<div>
+ RPC:<input defaultValue={"ws://127.0.0.1:1234/rpc/v0"} onChange={this.update("rpcUrl")}/>
</div>
<div>
Token (<code>lotus auth create-admin-token</code>): <input onChange={this.update("rpcToken")}/>{this.tokenOk()}
</div>
</div>
</div>
<div className="Index-footer">
<div>
<Link to={"/app/pond"}>Open Pond</Link>
</div>
</div>
</div>
)
}
}
import Index from "./NodeIndex";
class App extends React.Component {
constructor(props) {

110
lotuspond/front/src/NodeIndex.js Normal file
View File

@ -0,0 +1,110 @@
import React from 'react';
import {Link} from "react-router-dom";
import {Client} from "rpc-websockets";
class Index extends React.Component {
constructor(props) {
super(props)
this.state = {rpcUrl: "ws://127.0.0.1:1234/rpc/v0", rpcToken: '', conns: {}, info: {}}
const initialState = JSON.parse(window.localStorage.getItem('saved-nodes'))
if (initialState) {
this.state.nodes = initialState
} else {
this.state.nodes = []
}
this.state.nodes.forEach((n, i) => this.connTo(i, n))
}
componentDidUpdate(prevProps, prevState, snapshot) {
window.localStorage.setItem('saved-nodes', JSON.stringify(this.state.nodes))
//this.state.nodes.filter(i => [i, this.state.conns[i]]).forEach(([i, n]) => this.connTo(i, n))
}
componentWillUnmount() {
Object.keys(this.state.conns).forEach(c => this.state.conns[c].close())
}
async updateInfo(n) {
const conn = this.state.conns[n]
const head = await conn.call('Filecoin.ChainHead', [])
const peers = await conn.call('Filecoin.NetPeers', [])
this.setState(p => ({info: {...p.info, [n]: {head, peers}}}))
}
connTo = async (n, node) => {
const client = new Client(`${node.addr}?token=${node.token}`)
client.on('open', async () => {
this.setState(p => ({conns: {...p.conns, [n]: client}}))
setInterval(() => this.updateInfo(n), 1333)
})
}
onAdd = () => {
this.setState({addingNode: true})
}
update = (name) => (e) => this.setState({ [name]: e.target.value })
tokenOk = () => {
let m = this.state.rpcToken.match(/\.(.+)\./)
// TODO: eww
if(m && atob(m[1]) === '{"Allow":["read","write","sign","admin"]}') {
return (
<span>-Token OK-
<div>
<button onClick={this.addNode}>Add Node</button>
</div>
</span>
)
}
return <span>-Expecting valid admin token-</span>
}
addNode = async () => {
this.setState(p => ({nodes: [...p.nodes, {addr: this.state.rpcUrl, token: this.state.rpcToken}], addingNode: true}))
}
render() {
return (
<div className="Index">
<div className="Index-nodes">
<div>
{
this.state.nodes.map((node, i) => {
let info = <span>[no conn]</span>
if (this.state.info[i]) {
const ni = this.state.info[i]
info = <span>H:{ni.head.Height}; Peers:{ni.peers.length}</span>
}
return <div className="Index-node">
<span>{i}. {node.addr} <Link to={`/app/node/${i}`}>[OPEN UI]</Link> {info}</span>
</div>}
)
}
</div>
<a hidden={this.state.addingNode} href='#' onClick={this.onAdd} className="Button">[Add Node]</a>
<div hidden={!this.state.addingNode}>
<div>---------------</div>
<div>
+ RPC:<input defaultValue={"ws://127.0.0.1:1234/rpc/v0"} onChange={this.update("rpcUrl")}/>
</div>
<div>
Token (<code>lotus auth create-admin-token</code>): <input onChange={this.update("rpcToken")}/>{this.tokenOk()}
</div>
</div>
</div>
<div className="Index-footer">
<div>
<Link to={"/app/pond"}>Open Pond</Link>
</div>
</div>
</div>
)
}
}
export default Index