dashboard: click on live/reconnecting triggers

1 files changed, 21 insertions, 2 deletions

diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index b3f8986..c9aaf4c 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -965,7 +965,11 @@ function status(text, live) {
 // While not live, what is shown stays as it was last (ages don't count on).
 let live = false;
 let events = null;
+// The next attempt, while one is waited for: a connect now replaces it.
+let retry = null;
 function connect() {
+  clearTimeout(retry);
+  retry = null;
   events = new EventSource("dashboard/events");
   events.addEventListener("snapshot", event => {
     const snapshot = JSON.parse(event.data);
@@ -989,7 +993,7 @@ function connect() {
   events.addEventListener("offline", () => {
     events.close(); live = false;
     status("node stopped; reconnecting…", false);
-    setTimeout(connect, 3000);
+    retry = setTimeout(connect, 3000);
   });
   events.addEventListener("error", () => {
     // Each attempt that failed: a breath too, so it shows it keeps trying.
@@ -998,7 +1002,7 @@ function connect() {
     if (events.readyState === EventSource.CLOSED) {
       // Given up (an HTTP error, e.g. the node is up but not serving the page yet).
       status("disconnected; retrying…", false);
-      setTimeout(connect, 5000);
+      retry = setTimeout(connect, 5000);
     } else {
       // EventSource reconnects by itself; the node sends a snapshot first again.
       status("reconnecting…", false);
@@ -1006,6 +1010,21 @@ function connect() {
   });
 }
 connect();
+// A click on the status: live, everything now (a tick on the node, the members asked
+// again, what's open of the document read again); otherwise, reconnecting now.
+connection.title = "Click to refresh now";
+connection.style.cursor = "pointer";
+connection.addEventListener("click", () => {
+  pulse();
+  if (live) {
+    fetch("dashboard/refresh", { method: "POST" }).catch(() => {});
+    documentChanged({ all: true });
+  } else {
+    if (events) events.close();
+    status("reconnecting…", false);
+    connect();
+  }
+});
 // Ages count on between events; nothing else changes without one.
 setInterval(() => { if (live) render(true); }, 1000);
 window.addEventListener("resize", () => { lastShape = ""; render(); });