88 lines
2.9 KiB
JavaScript
88 lines
2.9 KiB
JavaScript
import React from 'react';
|
|
import './App.css';
|
|
|
|
function colForH(besth, height) {
|
|
const diff = besth - height
|
|
if(diff === 0) return '#6f6'
|
|
if(diff === 1) return '#df4'
|
|
if(diff < 4) return '#ff0'
|
|
if(diff < 10) return '#f60'
|
|
return '#f00'
|
|
}
|
|
|
|
function colLag(lag) {
|
|
if(lag < 100) return '#6f6'
|
|
if(lag < 400) return '#df4'
|
|
if(lag < 1000) return '#ff0'
|
|
if(lag < 4000) return '#f60'
|
|
return '#f00'
|
|
}
|
|
|
|
function lagCol(lag, good) {
|
|
return <span>
|
|
<span style={{color: colLag(lag)}}>{lag}</span>
|
|
<span style={{color: good ? '#f0f0f0' : '#f60'}}>ms</span>
|
|
</span>
|
|
}
|
|
|
|
class App extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
let ws = new WebSocket("ws://" + window.location.host + "/sub")
|
|
//let ws = new WebSocket("ws://127.0.0.1:2975/sub")
|
|
|
|
ws.onmessage = (ev) => {
|
|
console.log(ev)
|
|
let update = JSON.parse(ev.data)
|
|
|
|
update.Update.Weight = Number(update.Update.Weight)
|
|
|
|
let wdiff = update.Update.Weight - (this.state[update.From] || {Weight: update.Update.Weight}).Weight
|
|
wdiff = <span style={{color: wdiff < 0 ? '#f00' : '#f0f0f0'}}>{wdiff}</span>
|
|
|
|
let utDiff = update.Time - (this.state[update.From] || {utime: update.Time}).utime
|
|
utDiff = <span style={{color: utDiff < 0 ? '#f00' : '#f0f0f0'}}>{utDiff}ms</span>
|
|
|
|
this.setState( prev => ({
|
|
...prev, [update.From]: {...update.Update, utime: update.Time, wdiff: wdiff, utDiff: utDiff},
|
|
}))
|
|
}
|
|
|
|
ws.onclose = () => {
|
|
this.setState({disconnected: true})
|
|
}
|
|
|
|
this.state = {}
|
|
}
|
|
|
|
render() {
|
|
if(this.state.disconnected) {
|
|
return <span>Error: disconnected</span>
|
|
}
|
|
|
|
let besth = Object.keys(this.state).map(k => this.state[k]).reduce((p, n) => p > n.Height ? p : n.Height, -1)
|
|
let bestw = Object.keys(this.state).map(k => this.state[k]).reduce((p, n) => p > n.Weight ? p : n.Weight, -1)
|
|
|
|
return <table>
|
|
<tr><td>PeerID</td><td>Nickname</td><td>Lag</td><td>Weight(best, prev)</td><td>Height</td><td>Blocks</td></tr>
|
|
{Object.keys(this.state).map(k => [k, this.state[k]]).map(([k, v]) => {
|
|
let mnrs = v.Blocks.map(b => <td> m:{b.Miner}({lagCol(v.Time ? v.Time - (b.Timestamp*1000) : v.utime - (b.Timestamp*1000), v.Time)})</td>)
|
|
let l = [
|
|
<td>{k}</td>,
|
|
<td>{v.NodeName}</td>,
|
|
<td>{v.Time ? lagCol(v.utime - v.Time, true) : ""}(Δ{v.utDiff})</td>,
|
|
<td style={{color: bestw !== v.Weight ? '#f00' : '#afa'}}>{v.Weight}({bestw - v.Weight}, {v.wdiff})</td>,
|
|
<td style={{color: colForH(besth, v.Height)}}>{v.Height}({besth - v.Height})</td>,
|
|
...mnrs,
|
|
]
|
|
|
|
l = <tr>{l}</tr>
|
|
return l
|
|
})
|
|
}
|
|
</table>
|
|
}
|
|
}
|
|
export default App;
|