diff options
| -rw-r--r-- | src/api/dashboard/dashboard.html | 19 |
1 files changed, 16 insertions, 3 deletions
diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html index 5ab5ac8..3b0f8fa 100644 --- a/src/api/dashboard/dashboard.html +++ b/src/api/dashboard/dashboard.html @@ -77,6 +77,7 @@ border-radius: 50%; background: var(--fg); } .legend .node.silent::before { background: var(--panel); } .legend .node.self::before { border-color: var(--self); background: var(--self); } + .legend .node.dormant-node::before { border: 2.5px solid var(--bad); } .legend .node.focus::before { width: 14px; height: 14px; background: none; border: 2px solid var(--self); opacity: .5; } .scroll { overflow: auto; min-height: 0; } @@ -130,6 +131,7 @@ <span class="node self">this node</span> <span class="node">reports its links</span> <span class="node silent">reports none (no LINKS_REPLY)</span> + <span class="node dormant-node">dormant (to this node)</span> <span class="node focus">in focus (click a node)</span> </div> <div class="legend" id="legend"></div> @@ -373,10 +375,17 @@ function edges() { const knownTimed = known && typeof known.link.rttMs === "number"; if (!known || (timed && !knownTimed) || (timed === knownTimed && report.secsAgo < known.secsAgo)) { - measured.set(key, { a, b: link.peer, link, secsAgo: report.secsAgo }); + measured.set(key, { a, b: link.peer, link, secsAgo: report.secsAgo, + dormant: link.dormant || (known && known.dormant) }); + } else if (link.dormant) { + known.dormant = true; } } } + // Dormant if either end holds the other so, whichever report is drawn. + for (const edge of measured.values()) { + if (edge.dormant && !edge.link.dormant) edge.link = { ...edge.link, dormant: true }; + } return { intended, measured }; } @@ -548,11 +557,15 @@ function renderGraph() { children.push(svg("circle", { cx: p.x, cy: p.y, r: 13, fill: "none", stroke: "var(--self)", "stroke-width": 2, "stroke-opacity": .5 })); } + // Dormant as this node sees it (`/peers`): a red outline. + const dormant = (state.peers.peers[id] || {}).status === "dormant"; const circle = svg("circle", { cx: p.x, cy: p.y, r: member.self ? 8 : 6, fill: member.self ? "var(--self)" : reported ? "var(--fg)" : "var(--panel)", - stroke: member.self ? "var(--self)" : "var(--fg)", "stroke-width": 1.5 }); + stroke: member.self ? "var(--self)" : dormant ? "var(--bad)" : "var(--fg)", + "stroke-width": dormant ? 2.5 : 1.5 }); const title = svg("title"); - title.textContent = id + (reported ? "" : " (no links reported)"); + title.textContent = id + (reported ? "" : " (no links reported)") + + (dormant ? " (dormant)" : ""); circle.append(title); circle.addEventListener("click", event => { event.stopPropagation(); focus(id); }); hoverable(circle, id); |