townhall: Display more timing info

chain/metrics/consensus.go

@@ -102,7 +102,7 @@ func sendHeadNotifs(ctx context.Context, ps *pubsub.PubSub, topic string, chain
 				Height:   n.Val.Height(),
 				Weight:   w,
 				NodeName: nickname,
-				Time: uint64(time.Now().Unix()),
+				Time:     uint64(time.Now().UnixNano() / 1000_000),
 			}
 
 			b, err := json.Marshal(m)

cmd/lotus-townhall/main.go

@@ -5,20 +5,21 @@ import (
 	"context"
 	"encoding/json"
 	"fmt"
-	"github.com/filecoin-project/lotus/build"
-	"github.com/ipfs/go-car"
-	"github.com/ipfs/go-datastore"
-	blockstore "github.com/ipfs/go-ipfs-blockstore"
 	"net/http"
 	"strings"
+	"time"
 
 	rice "github.com/GeertJohan/go.rice"
 	"github.com/gorilla/websocket"
+	"github.com/ipfs/go-car"
+	"github.com/ipfs/go-datastore"
+	blockstore "github.com/ipfs/go-ipfs-blockstore"
 	"github.com/libp2p/go-libp2p"
 	"github.com/libp2p/go-libp2p-core/peer"
 	pnet "github.com/libp2p/go-libp2p-pnet"
 	pubsub "github.com/libp2p/go-libp2p-pubsub"
 
+	"github.com/filecoin-project/lotus/build"
 	"github.com/filecoin-project/lotus/node/modules/lp2p"
 )
 
@@ -90,6 +91,7 @@ func main() {
 type update struct {
 	From   peer.ID
 	Update json.RawMessage
+	Time   uint64
 }
 
 func handler(ps *pubsub.PubSub) func(w http.ResponseWriter, r *http.Request) {
@@ -109,17 +111,20 @@ func handler(ps *pubsub.PubSub) func(w http.ResponseWriter, r *http.Request) {
 			return
 		}
 
+		fmt.Println("new conn")
+
 		for {
 			msg, err := sub.Next(r.Context())
 			if err != nil {
 				return
 			}
 
-			fmt.Println(msg)
+			//fmt.Println(msg)
 
 			if err := conn.WriteJSON(update{
 				From:   peer.ID(msg.From),
 				Update: msg.Data,
+				Time:   uint64(time.Now().UnixNano() / 1000_000),
 			}); err != nil {
 				return
 			}

cmd/lotus-townhall/townhall/src/App.js

@@ -10,6 +10,21 @@ function colForH(besth, height) {
     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);
@@ -22,30 +37,43 @@ class App extends React.Component {
             let update = JSON.parse(ev.data)
 
             this.setState( prev => ({
-                ...prev, [update.From]: update.Update,
+                ...prev, [update.From]: {...update.Update, utime: update.Time},
             }))
         }
 
+        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>{Object.keys(this.state).map(k => [k, this.state[k]]).map(([k, v]) => {
-
-            let mnrs = v.Blocks.map(b => <span>&nbsp;m:{b.Miner}</span>)
-            let l = [<td>{k}</td>,
+        return <table>
+            <tr><td>PeerID</td><td>Nickname</td><td>Lag</td><td>Weight</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>&nbsp;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) : ""}</td>,
               <td style={{color: bestw !== v.Weight ? '#f00' : '#afa'}}>{v.Weight}({bestw - v.Weight})</td>,
               <td style={{color: colForH(besth, v.Height)}}>{v.Height}({besth - v.Height})</td>,
-                <td>{mnrs}</td>]
-                l = <tr>{l}</tr>
+              ...mnrs,
+            ]
 
+                l = <tr>{l}</tr>
             return l
         })
-        }</table>
+        }
+        </table>
     }
 }
 export default App;