dashboard: add clocks

1 files changed, 21 insertions, 2 deletions

diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index 03fa177..153d7cb 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -25,6 +25,7 @@
     border-bottom: 1px solid var(--line); flex-wrap: wrap; }
   header h1 { font-size: 16px; margin: 0; }
   #connection { margin-left: auto; color: var(--muted); }
+  #clock-warning, #peers .clock-off { color: var(--warn); }
   #connection.live { color: var(--ok); }
   #connection.down { color: var(--bad); }
   /* A dot in the status's colour that breathes once with every event. */
@@ -137,6 +138,7 @@
 <header>
   <h1>continuum</h1>
   <span id="node" class="id"></span>
+  <span id="clock-warning"></span>
   <span id="connection"><span id="dot"></span><span id="connection-text">connecting…</span></span>
 </header>
 <main>
@@ -220,6 +222,13 @@ function name(id) {
   const member = state.graph.members[id];
   return (member && member.alias) || (state.peers.peers[id] || {}).alias || short(id);
 }
+// Milliseconds as signed seconds: "+5.0 s".
+const seconds = ms => (ms < 0 ? "−" : "+") + (Math.abs(ms) / 1000).toFixed(1) + " s";
+// Whether `clock` (a peer's, `/peers`) differs from this node's beyond the limit for sure.
+function clockOff(clock) {
+  const limit = (state.stats.clock || {}).limitMs || 0;
+  return !!clock && limit > 0 && Math.abs(clock.offsetMs) > clock.withinMs + limit;
+}
 function age(secs) {
   if (secs === null || secs === undefined) return "";
   if (secs < 120) return secs + " s";
@@ -248,7 +257,8 @@ function focus(id) {
 // --- Peers ---
 function renderPeers() {
   const table = document.getElementById("peers");
-  const rows = [el("tr", {}, ...["peer", "status", "seen", "via", "rtt", "neighbour", "same epoch"]
+  const rows = [el("tr", {}, ...["peer", "status", "seen", "via", "rtt", "clock", "neighbour",
+    "same epoch"]
     .map(h => el("th", {}, h)))];
   for (const [id, peer] of Object.entries(state.peers.peers)) {
     const destination = peer.destination;
@@ -265,6 +275,10 @@ function renderPeers() {
       el("td", {}, age(aged("lastSeenSecsAgo", peer.lastSeenSecsAgo))),
       el("td", { class: "id" }, via),
       el("td", {}, rtt),
+      // Its clock against this node's, flagged beyond the limit (`--clock-skew-warn`).
+      el("td", { class: clockOff(peer.clock) ? "clock-off" : "", title: peer.clock
+        ? "ahead of this node's by " + peer.clock.offsetMs + " ms, give or take " +
+          peer.clock.withinMs + " ms" : "" }, peer.clock ? seconds(peer.clock.offsetMs) : ""),
       el("td", {}, peer.neighbour ? "yes" : ""),
       el("td", {}, peer.sameEpoch === null || peer.sameEpoch === undefined
         ? "" : peer.sameEpoch ? "yes" : "no"));
@@ -641,8 +655,10 @@ function renderGraph() {
       fill: member.self ? "var(--self)" : reported ? "var(--fg)" : "var(--panel)",
       stroke: member.self ? "var(--self)" : dormant ? "var(--bad)" : "var(--fg)",
       "stroke-width": dormant ? 2.5 : 1.5 }, pressed);
+    const clock = (state.peers.peers[id] || {}).clock;
     tooltip(circle, id + (reported ? "" : " (no links reported)") +
-      (dormant ? " (dormant)" : ""));
+      (dormant ? " (dormant)" : "") +
+      (clockOff(clock) ? " (clock " + seconds(clock.offsetMs) + " off this node's)" : ""));
     const label = drawing("name " + id, "text", upright({ x: p.x + 10, y: p.y + 4,
       "font-size": 12, fill: "var(--fg)", cursor: "pointer" }), pressed);
     text(label, name(id));
@@ -994,6 +1010,9 @@ function render(ages = false) {
   if (!state) return;
   document.getElementById("node").textContent =
     (state.node.alias ? state.node.alias + " · " : "") + state.node.id;
+  const skew = state.stats.clock;
+  document.getElementById("clock-warning").textContent = skew && skew.off
+    ? "clock " + seconds(skew.offsetMs) + " off its peers'" : "";
   held = false;
   const boxes = [["peers-box", renderPeers], ["figures-box", renderStats]];
   // Its ages are in tooltips only: drawn on events, not every second.