Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Basic single node UI #208

Merged
merged 3 commits into from
Sep 19, 2019
Merged

Basic single node UI #208

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
96859b0
Basic single node UI
magik6k Sep 18, 2019
3ae0cc3
pond: Some styles
magik6k Sep 19, 2019
6d71929
pond: More dark CSS
magik6k Sep 19, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions cli/auth.go
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
package cli

import (
"fmt"

"gopkg.in/urfave/cli.v2"

"github.com/filecoin-project/go-lotus/api"
)

var authCmd = &cli.Command{
Name: "auth",
Usage: "Manage RPC permissions",
Subcommands: []*cli.Command{
authCreateAdminToken,
},
}

var authCreateAdminToken = &cli.Command{
Name: "create-admin-token",
Usage: "Create admin token",
Action: func(cctx *cli.Context) error {
napi, err := GetFullNodeAPI(cctx)
if err != nil {
return err
}
ctx := ReqContext(cctx)

// TODO: Probably tell the user how powerful this token is
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yolo, right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So the correct approach is probably to not relay on tokens like that, and instead have a more 'two-factor' approach:

  • User initializes some transaction
  • UI calls node, gets a random challenge string (think UUID), shows that to the user
  • User calls lotus auth approve [uuid]
    • Lotus shows some transaction details to the user
  • If user agrees, the transaction proceeds
$ lotus auth approve 73050e44-17fd-4425-b447-a615cfaf899b
Approving transaction:

From:      t3-5ou1i8e1-h850b-id6h5t-... # added '-'s for readability 
To:        t2-uideuid3-itohb-ue4odi-...
Amount:    12.000 000 001 FIL

Method:    multisig.Approve(123)
Gas:       1235
Gas price: 0.000 02
Gas cost:  0.000 024 70 FIL

Approve [y/N]:

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

parity solves this by having separate webui just for it, when it wants you to approve something it opens a new tab to it.


token, err := napi.AuthNew(ctx, api.AllPermissions)
if err != nil {
return err
}

// TODO: Log in audit log when it is implemented

fmt.Println(string(token))
return nil
},
}
1 change: 1 addition & 0 deletions cli/cmd.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ func ReqContext(cctx *cli.Context) context.Context {
}

var Commands = []*cli.Command{
authCmd,
chainCmd,
clientCmd,
createMinerCmd,
Expand Down
102 changes: 102 additions & 0 deletions lotuspond/front/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions lotuspond/front/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
"react": "^16.8.6",
"react-cristal": "^0.0.12",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.1",
"rpc-websockets": "^4.5.1",
"styled-components": "^3.3.3",
Expand Down
93 changes: 66 additions & 27 deletions lotuspond/front/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,53 +1,92 @@
import React from 'react';
import './App.css';
import { Client } from 'rpc-websockets'
import NodeList from "./NodeList";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Pond from "./Pond";
import SingleNode from "./SingleNode";


class App extends React.Component {
class Index extends React.Component {
constructor(props) {
super(props)

const client = new Client('ws://127.0.0.1:2222/rpc/v0')
client.on('open', () => {
this.setState(() => ({client: client}))
})
this.state = {rpcUrl: "ws://127.0.0.1:1234/rpc/v0", rpcToken: ''}

this.state = {
windows: {},
nextWindow: 0,
const initialState = JSON.parse(window.localStorage.getItem('saved-nodes'))
if (initialState) {
this.state.nodes = initialState
} else {
this.state.nodes = []
}

this.mountWindow = this.mountWindow.bind(this)
}

mountWindow(cb) {
const id = this.state.nextWindow
this.setState({nextWindow: id + 1})

const window = cb(() => {
this.setState(prev => ({windows: {...prev.windows, [id]: undefined}}))
})
componentDidUpdate(prevProps, prevState, snapshot) {
window.localStorage.setItem('saved-nodes', JSON.stringify(this.state.nodes))
}

this.setState(prev => ({windows: {...prev.windows, [id]: window}}))
onAdd = () => {
this.setState({addingNode: true})
}

render() {
if (this.state.client === undefined) {
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>
Connecting to RPC
<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="App">
<NodeList client={this.state.client} mountWindow={this.mountWindow}/>
<div>
<div><Link to={"/app/pond"}>Open Pond</Link></div>
<div>----------------</div>
<div>
<div>Managed Nodes:</div>
{
this.state.nodes.map((node, i) => <div>
<span>{i}. {node.addr} <Link to={`/app/node/${i}`}>[OPEN UI]</Link></span>
</div>)
}
</div>
<a hidden={this.state.addingNode} href='#' onClick={this.onAdd}>[Add]</a>
<div hidden={!this.state.addingNode}>
<div>---------------</div>
<div>
{Object.keys(this.state.windows).map((w, i) => <div key={i}>{this.state.windows[w]}</div>)}
+ RPC:<input value={"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>
)
}
}

class App extends React.Component {
constructor(props) {
super(props)
}

render() {
return (
<Router>
<Route path="/" exact component={Index} />
<Route path="/app/pond/" component={Pond} />
<Route path="/app/node/:node" component={SingleNode} />
</Router>
)
}
}
Expand Down
4 changes: 2 additions & 2 deletions lotuspond/front/src/App.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Pond from './Pond';

it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.render(<Pond />, div);
ReactDOM.unmountComponentAtNode(div);
});
4 changes: 2 additions & 2 deletions lotuspond/front/src/Client.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ class Client extends React.Component {
let ppb = Math.round(this.state.total / this.state.blocks * 100) / 100
let ppmbb = Math.round(ppb / (this.state.kbs / 1000) * 100) / 100

let dealMaker = <div>
let dealMaker = <div hidden={!this.props.pondClient}>
<span>Make Deal: </span>
<select><option>t0101</option></select>
<abbr title="Data length">L:</abbr> <input placeholder="KBs" defaultValue={1} onChange={this.update("kbs")}/>
Expand All @@ -94,7 +94,7 @@ class Client extends React.Component {

</div>)

return <Cristal title={"Client - Node " + this.props.node.ID}>
return <Cristal title={"Client - Node " + this.props.node.ID} onClose={this.props.onClose}>
<div className="Client">
<div>{dealMaker}</div>
<div>{deals}</div>
Expand Down
9 changes: 6 additions & 3 deletions lotuspond/front/src/FullNode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ class FullNode extends React.Component {
miners = this.state.minerList.map((a, k) => <div key={k}><Address miner={true} client={this.props.client} addr={a} mountWindow={this.props.mountWindow}/></div>)
}

let storageMine = <a href="#" onClick={this.startStorageMiner}>[Spawn Storage Miner]</a>
let storageMine = <a href="#" onClick={this.startStorageMiner} hidden={!this.props.spawnStorageNode}>[Spawn Storage Miner]</a>

let addresses = this.state.addrs.map((addr) => {
let line = <Address client={this.props.client} add1k={this.add1k} add10k={true} nonce={true} addr={addr} mountWindow={this.props.mountWindow}/>
Expand Down Expand Up @@ -167,10 +167,13 @@ class FullNode extends React.Component {
)
}

let nodeID = this.props.node.ID ? this.props.node.ID : ''
let nodePos = this.props.node.ID ? {x: this.props.node.ID*30, y: this.props.node.ID * 30} : undefined

return (
<Cristal
title={"Node " + this.props.node.ID}
initialPosition={{x: this.props.node.ID*30, y: this.props.node.ID * 30}}
title={"Node " + nodeID}
initialPosition={nodePos}
initialSize={{width: 690, height: 300}}
onClose={this.stop} >
<div className="CristalScroll">
Expand Down
Loading