dashboard: allow delayed links

1 files changed, 18 insertions, 1 deletions

diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index 3236973..d8b8f6c 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -193,7 +193,8 @@
 <main>
   <section id="map">
     <h2>Swarm <button id="legend-toggle" class="toggle">hide legend</button>
-      <button id="rtt-toggle" class="toggle">layout: static</button></h2>
+      <button id="rtt-toggle" class="toggle">layout: static</button>
+      <button id="links-toggle" class="toggle">links: live</button></h2>
     <div id="legends">
       <div class="legend">
         <span class="node self">this node</span>
@@ -1301,6 +1302,7 @@ function render(ages = false) {
   const skew = state.stats.clock;
   document.getElementById("clock-warning").textContent = skew && skew.off
     ? "clock " + seconds(skew.offsetMs) + " off its peers'" : "";
+  showLinksToggle();
   held = false;
   const boxes = [["peers-box", renderPeers], ["figures-box", renderStats]];
   // Its ages are in tooltips only: drawn on events, not every second.
@@ -1328,6 +1330,21 @@ legendToggle.addEventListener("click", () => {
   legendToggle.textContent = legends.hidden ? "show legend" : "hide legend";
   if (state) renderGraph();
 });
+// The members' links subscribed to (`live`: each tells of a change as it happens), or
+// only asked for every 30 s; the node's choice, for every page (`POST
+// /admin/dashboard/links`), shown as the state has it.
+const linksToggle = document.getElementById("links-toggle");
+function showLinksToggle() {
+  const live = !state || state.graph.live !== false;
+  linksToggle.textContent = live ? "links: live" : "links: every 30 s";
+  linksToggle.title = live
+    ? "The members tell of their links' changes as they happen. Click to only ask them every 30 s (fewer messages; for every page on this node)"
+    : "The members are asked for their links every 30 s. Click to have them tell of changes as they happen (for every page on this node)";
+}
+linksToggle.addEventListener("click", () => {
+  const live = !state || state.graph.live !== false;
+  fetch("dashboard/links?live=" + !live, { method: "POST" }).catch(() => {});
+});
 // Links as long as their round trips, and back.
 const rttToggle = document.getElementById("rtt-toggle");
 function showRttToggle() {