dashboard: reload new version

1 files changed, 19 insertions, 2 deletions

diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index 11e53d2..a5181ca 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -113,6 +113,9 @@
 </main>
 <script>
 "use strict";
+// Which page this is (the node fills it in); a snapshot naming another came from
+// another build: reloaded then, to get its page.
+const PAGE_VERSION = "__PAGE_VERSION__";
 // The state as the node published it, and when it did (the last event).
 let state = null;
 let stateAt = 0;
@@ -167,11 +170,18 @@ function age(secs) {
 
 // What is in focus, its figures shown: a node's ID, or a link's pair key (`pairKey`,
 // two IDs). null: this node's (`/admin/stats`).
-let focused = null;
+let focused = (() => {
+  try { return decodeURIComponent(location.hash.slice(1)) || null; } catch { return null; }
+})();
 const pairKey = (a, b) => a < b ? a + " " + b : b + " " + a;
 const isPair = key => key !== null && key.includes(" ");
 function focus(id) {
   focused = id === null || id === state.node.id ? null : id;
+  // In the URL too, so a reload (a new version) keeps it.
+  try {
+    history.replaceState(null, "", focused === null ? location.pathname
+      : "#" + encodeURIComponent(focused));
+  } catch { /* not where history works */ }
   render();
 }
 
@@ -536,7 +546,14 @@ let events = null;
 function connect() {
   events = new EventSource("dashboard/events");
   events.addEventListener("snapshot", event => {
-    state = JSON.parse(event.data); stateAt = Date.now(); live = true;
+    const snapshot = JSON.parse(event.data);
+    if (snapshot.page !== PAGE_VERSION) {
+      events.close();
+      status("new version; reloading…", false);
+      location.reload();
+      return;
+    }
+    state = snapshot; stateAt = Date.now(); live = true;
     status("live", true); render();
   });
   events.addEventListener("patch", event => {