lepus 0.2.2 → 0.3.0

data/web/assets/js/views/overview.js

@@ -0,0 +1,229 @@
+import { api } from "../api.js";
+import { h, s, clear, reducedMotion } from "../dom.js";
+import { every, pollMs } from "../live.js";
+import { TopologyMap } from "../map.js";
+import { Memory, buildModel } from "../model.js";
+import { RateStrip } from "../rates.js";
+import { compact, count, rate } from "../format.js";
+import { ProcessList } from "./processes.js";
+import { QueueTable } from "./queues.js";
+import { ConnectionTable } from "./connections.js";
+
+const RANGE_KEY = "lepus:range";
+const RANGES = [
+  { key: "10m", age: 600, short: "10 min", phrase: "the last 10 minutes" },
+  { key: "1h", age: 3600, short: "1 h", phrase: "the last hour" }
+];
+const EXPANDED_KEY = "lepus:expanded";
+
+function symbol(kind) {
+  const svg = s("svg", { viewBox: "0 0 20 20", "aria-hidden": "true" });
+  if (kind === "move") svg.append(s("rect", { class: "sym-token", x: 1, y: 5, width: 18, height: 10, rx: 5 }));
+  if (kind === "idle") svg.append(s("rect", { class: "sym-idle", x: 2, y: 5.5, width: 16, height: 9, rx: 4.5 }));
+  if (kind === "stop") svg.append(s("rect", { class: "sym-stop", x: 7, y: 0, width: 6, height: 20, rx: 2 }));
+  if (kind === "back") svg.append(s("rect", { class: "sym-back", x: 1, y: 5, width: 18, height: 10, rx: 5 }));
+  if (kind === "wait") svg.append(s("g", { class: "sym-wait" }, s("circle", { cx: 10, cy: 10, r: 7.5 }), s("path", { d: "M10 5.5V10h3.6" })));
+  return h("span", { class: "sym" }, svg);
+}
+
+// A compact number for the eye and the exact one for screen readers.
+function amount(shown, exact) {
+  if (shown === exact) return h("span", { class: "n" }, shown);
+  return h("span", { class: "n", title: exact }, h("span", { "aria-hidden": "true" }, shown), h("span", { class: "visually-hidden" }, exact));
+}
+
+function load(key, fallback) {
+  try { return JSON.parse(localStorage.getItem(key)) ?? fallback; } catch { return fallback; }
+}
+
+function store(key, value) {
+  try { localStorage.setItem(key, JSON.stringify(value)); } catch {}
+}
+
+function section(id, title, ...children) {
+  return h("section", { id, class: "page-section", "aria-labelledby": `${id}-title` },
+    h("h2", { class: "section-title", id: `${id}-title` }, title),
+    ...children);
+}
+
+export function overview(root, { meta }) {
+  let range = RANGES.find((candidate) => candidate.key === load(RANGE_KEY, "10m")) || RANGES[0];
+  const expanded = new Set(load(EXPANDED_KEY, []));
+  const memory = new Memory();
+  let topology = null;
+  let model = null;
+  let destroyed = false;
+
+  const headline = h("h1", { class: "headline", id: "map" }, h("span", { class: "quiet" }, "Reading the broker"));
+  const legend = h("ul", { class: "legend", "aria-label": "How to read the map" },
+    ...[
+      ["move", "Flowing", "messages on the move, more tokens on busier lines"],
+      ["idle", "Backing up", "a backlog waiting in its queue"],
+      ["back", "Retrying", "loops beneath a line"],
+      ["wait", "Delayed", "held on purpose until they are released"],
+      ["stop", "Errors", "messages parked in error queues"]
+    ].map(([kind, name, words]) => h("li", {}, symbol(kind), h("span", {}, h("b", {}, name), " ", words))));
+  const legendHint = h("p", { class: "legend-hint" },
+    "Each band is an exchange routing to its queues, then on to their consumers and acknowledgement. Point at a queue for exact numbers, select it to find it in the table.");
+  const status = h("p", { class: "status-note", role: "status", hidden: true });
+  const mapHost = h("div", { class: "map" });
+  const mapNote = h("p", { class: "map-note" });
+  const empty = h("p", { class: "map-empty", hidden: true });
+  const rangeButtons = RANGES.map((candidate) => h("button", {
+    type: "button",
+    "aria-pressed": String(candidate === range),
+    onclick: () => pickRange(candidate)
+  }, candidate.short));
+  const ratesNote = h("p", { class: "section-note" });
+  const ratesHost = h("div", { class: "tp" });
+  const processesHost = h("div");
+  const queuesHost = h("div");
+  const connectionsHost = h("div");
+
+  root.append(
+    h("header", { class: "intro" }, headline, legend, legendHint),
+    status,
+    empty,
+    mapHost,
+    h("div", { class: "map-foot" }, mapNote),
+    h("section", { class: "through", "aria-labelledby": "rates-title" },
+      h("div", { class: "through-head" },
+        h("div", {},
+          h("h2", { class: "section-title", id: "rates-title" }, "Message rates"),
+          ratesNote),
+        h("div", { class: "range-row" },
+          h("span", { class: "range-label", id: "range-label" }, "Window"),
+          h("div", { class: "seg", role: "group", "aria-labelledby": "range-label" }, rangeButtons))),
+      ratesHost),
+    section("queues", "Queues", queuesHost),
+    section("processes", "Processes", processesHost),
+    section("connections", "Connections", connectionsHost));
+
+  const queueTable = new QueueTable(queuesHost, { onShow: (name) => showOnMap(name) });
+  const map = new TopologyMap(mapHost, {
+    label: "Exchanges, their queues and consumers",
+    onPick: (name) => queueTable.pick(name),
+    onToggle: (band) => {
+      if (expanded.has(band)) expanded.delete(band);
+      else expanded.add(band);
+      store(EXPANDED_KEY, [...expanded]);
+      drawMap();
+      const key = expanded.has(band) ? `${band}|less` : `${band}|more`;
+      mapHost.querySelector(`[data-key="${CSS.escape(key)}"]`)?.focus({ preventScroll: true });
+    }
+  });
+  const strip = new RateStrip(ratesHost);
+  const processList = new ProcessList(processesHost, meta);
+  const connectionTable = new ConnectionTable(connectionsHost);
+
+  const describeRange = () => {
+    ratesNote.textContent = `Messages per second across the broker over ${range.phrase}, as sampled by RabbitMQ.`;
+  };
+  describeRange();
+
+  function pickRange(next) {
+    if (next === range) return;
+    range = next;
+    store(RANGE_KEY, range.key);
+    rangeButtons.forEach((button, index) => button.setAttribute("aria-pressed", String(RANGES[index] === range)));
+    describeRange();
+    refreshRates().catch(() => {});
+  }
+
+  function renderHeadline(totals) {
+    const parts = [];
+    const add = (kind, shown, exact, words) => parts.push(h("span", { class: "part" }, symbol(kind), amount(shown, exact), " ", words));
+    add("move", `${rate(totals.deliver)} msg/s`, `${count(totals.deliver)} messages a second`, "flowing");
+    if (totals.backingUp) add("idle", `${count(totals.backingUp)}`, `${count(totals.backingUp)}`, totals.backingUp === 1 ? "queue backing up" : "queues backing up");
+    if (totals.retry >= 0.01) add("back", `${rate(totals.retry)} msg/s`, `${count(totals.retry)} messages a second`, "retrying");
+    if (totals.delayed) add("wait", compact(totals.delayed), count(totals.delayed), "delayed");
+    add("stop", compact(totals.errors), count(totals.errors), totals.errors === 1 ? "message in error queues" : "messages in error queues");
+    clear(headline);
+    parts.forEach((part, index) => {
+      const last = index > 0 && index === parts.length - 1;
+      if (index > 0) headline.append(last ? " " : ", ");
+      if (last) part.prepend("and ");
+      headline.append(part);
+    });
+    headline.append(".");
+  }
+
+  // Finds a queue's station, unfolding its band when the queue is folded
+  // away, and moves focus there so its numbers show.
+  function showOnMap(name) {
+    const band = model && model.bands.find((candidate) => candidate.allRows.some((row) => row.kind === "queue" && row.name === name));
+    if (band && !band.rows.some((row) => row.name === name)) {
+      expanded.add(band.key);
+      store(EXPANDED_KEY, [...expanded]);
+      drawMap();
+    }
+    const station = map.find(name);
+    if (!station) return;
+    const svgTop = station.ownerSVGElement.getBoundingClientRect().top + window.scrollY;
+    const bandTop = map.bandTop(name) ?? 0;
+    window.scrollTo({ top: Math.max(0, svgTop + bandTop - 24), behavior: reducedMotion.matches ? "auto" : "smooth" });
+    station.focus({ preventScroll: true });
+    map.flash(name);
+  }
+
+  function drawMap() {
+    if (!topology) return;
+    const bands = new Set(topology.bindings.map((binding) => binding.source)).size;
+    const limit = mapHost.clientWidth < 700 || bands > 6 ? 4 : 6;
+    model = buildModel(topology, memory, { expanded, limit });
+    const hasRows = model.bands.some((band) => band.rows.length);
+    empty.hidden = hasRows;
+    mapHost.hidden = !hasRows;
+    if (!hasRows) {
+      empty.textContent = topology.management
+        ? "No exchange routes to a queue yet. Lines appear as soon as consumers declare and bind their queues."
+        : "Nothing to draw until the management API answers or a worker sends a heartbeat.";
+    }
+    map.set(model);
+    renderHeadline(model.totals);
+    const notes = [];
+    if (model.unbound.length) {
+      const waits = new Map(model.bands.filter((band) => band.delayed && band.delayed.messages).map((band) => [band.key, band.delayed.messages]));
+      const names = model.unbound.map((name) => (waits.has(name) ? `${name} (${compact(waits.get(name))} delayed)` : name));
+      notes.push(`${names.length === 1 ? "Exchange" : "Exchanges"} with no queue bound: ${names.join(", ")}.`);
+    }
+    notes.push("The queues table below lists every queue with exact numbers.");
+    mapNote.textContent = notes.join(" ");
+  }
+
+  async function refresh() {
+    const [topologyData, processes, connections] = await Promise.allSettled([api.topology(), api.processes(), api.connections()]);
+    if (destroyed) return;
+    if (topologyData.status === "fulfilled") {
+      topology = topologyData.value;
+      status.hidden = topology.management;
+      if (!topology.management) {
+        status.textContent = `${topology.management_error || "The RabbitMQ management API did not answer"}. Queues and rates are missing; the map shows what worker heartbeats report.`;
+      }
+      drawMap();
+      queueTable.set(topology, model.bands);
+    } else {
+      status.hidden = false;
+      status.textContent = topologyData.reason.message;
+    }
+    if (processes.status === "fulfilled") processList.set(processes.value);
+    if (connections.status === "fulfilled") connectionTable.set(connections.value);
+  }
+
+  async function refreshRates() {
+    const asked = range;
+    const overviewData = await api.overview(asked.age);
+    if (destroyed || asked !== range) return;
+    strip.set(overviewData, asked);
+  }
+
+  const stops = [every(pollMs, refresh), every(() => Math.max(pollMs(), 10_000), refreshRates)];
+  return {
+    destroy() {
+      destroyed = true;
+      stops.forEach((stop) => stop());
+      map.destroy();
+      strip.destroy();
+    }
+  };
+}

data/web/assets/js/views/processes.js

@@ -0,0 +1,101 @@
+import { h, refill } from "../dom.js";
+import { ago, bytes, compact, count, duration, plural, toTime } from "../format.js";
+
+const WORKERS_SHOWN = 8;
+const CONSUMERS_SHOWN = 3;
+
+const byName = (a, b) => String(a.application || a.name).localeCompare(String(b.application || b.name));
+
+function health(process, meta, now) {
+  const age = now - (toTime(process.last_heartbeat_at) || 0);
+  const interval = (meta.heartbeat_interval || 60) * 1000;
+  if (age <= interval * 1.5) return "ok";
+  if (age <= (meta.alive_threshold || 300) * 1000) return "late";
+  return "stale";
+}
+
+function counter(n, word, cls) {
+  const shown = compact(n);
+  return h("span", { class: n ? cls : null, title: `${count(n)} ${word}` },
+    h("span", { "aria-hidden": "true" }, `${shown} ${word}`),
+    h("span", { class: "visually-hidden" }, `${count(n)} ${word}`));
+}
+
+// Workers older than delay! report neither delays nor a delayed count.
+function consumerItem(consumer) {
+  const delays = consumer.delays && consumer.delays.length ? `, delay! after ${consumer.delays.map(duration).join(" or ")}` : "";
+  return h("li", { class: "con" },
+    h("span", { class: "con-name" },
+      h("b", {}, consumer.class_name),
+      h("span", {}, ` on ${consumer.queue}, ${plural(consumer.threads || 0, "thread")}${delays}`)),
+    h("span", { class: "con-counts" },
+      counter(consumer.processed, "processed", null),
+      consumer.delayed || delays ? counter(consumer.delayed || 0, "delayed", "is-delayed") : null,
+      counter(consumer.rejected, "rejected", "is-rejected"),
+      counter(consumer.errored, "errored", "is-errored")));
+}
+
+function workerItem(worker, meta, now, open) {
+  const state = health(worker, meta, now);
+  const beat = h("span", { class: state === "ok" ? null : `is-${state}` },
+    state === "ok" ? `heartbeat ${ago(worker.last_heartbeat_at, now)}` : `last heartbeat ${ago(worker.last_heartbeat_at, now)}`);
+  const consumers = [...(worker.consumers || [])].sort((a, b) => String(a.class_name).localeCompare(String(b.class_name)));
+  return h("li", { class: state === "ok" ? "worker" : `worker is-${state}` },
+    h("div", { class: "worker-head" },
+      h("span", { class: "worker-name" }, worker.name),
+      h("span", { class: "worker-meta" },
+        `pid ${worker.pid}, ${bytes(worker.rss_memory)}, ${plural(worker.connections || 0, "connection")}, `, beat)),
+    consumers.length ? h("ul", { class: "cons" }, consumers.slice(0, CONSUMERS_SHOWN).map(consumerItem)) : null,
+    consumers.length > CONSUMERS_SHOWN
+      ? h("details", { class: "con-more", open: open.has(worker.id), ontoggle: (event) => { if (event.target.open) open.add(worker.id); else open.delete(worker.id); } },
+        h("summary", { "data-focus-key": `${worker.id}|more` }, `${plural(consumers.length - CONSUMERS_SHOWN, "more consumer")}`),
+        h("ul", { class: "cons" }, consumers.slice(CONSUMERS_SHOWN).map(consumerItem)))
+      : null);
+}
+
+// Supervisors with their workers and each worker's consumers, as the
+// heartbeats last reported them.
+export class ProcessList {
+  constructor(host, meta) {
+    this.meta = meta;
+    this.note = h("p", { class: "section-note" });
+    this.list = h("ul", { class: "procs" });
+    this.all = false;
+    this.open = new Set();
+    this.more = h("button", { type: "button", class: "btn btn-quiet btn-small", hidden: true, onclick: () => { this.all = !this.all; this.set(this.processes); } });
+    host.append(this.note, this.list, h("div", { class: "list-foot" }, this.more));
+  }
+
+  set(processes) {
+    this.processes = processes;
+    const now = Date.now();
+    const supervisors = processes.filter((p) => p.kind === "Supervisor").sort(byName);
+    const workers = processes.filter((p) => p.kind !== "Supervisor").sort(byName);
+    const known = new Set(supervisors.map((p) => p.id));
+    const hosts = new Set(processes.map((p) => p.hostname));
+    const interval = this.meta.heartbeat_interval || 60;
+    this.note.textContent = processes.length
+      ? `${plural(supervisors.length, "supervisor")} running ${plural(workers.length, "worker")} on ${plural(hosts.size, "host")}. Workers report every ${interval} s; counts run from each worker's start, and a message handed back with delay! counts as delayed, not processed.`
+      : "";
+    if (!processes.length) {
+      refill(this.list, h("li", { class: "empty" }, "No Lepus process has sent a heartbeat. Workers started with lepus start show up here within one heartbeat."));
+      return;
+    }
+    const groups = supervisors.map((supervisor) => ({ supervisor, workers: workers.filter((w) => w.supervisor_id === supervisor.id).sort((a, b) => a.name.localeCompare(b.name)) }));
+    const orphans = workers.filter((w) => !known.has(w.supervisor_id));
+    if (orphans.length) groups.push({ supervisor: null, workers: orphans });
+    this.more.hidden = workers.length <= WORKERS_SHOWN;
+    this.more.textContent = this.all ? "Show fewer" : `Show all ${count(workers.length)} workers`;
+    let budget = this.all ? Infinity : WORKERS_SHOWN;
+    for (const group of groups) {
+      group.hidden = Math.max(0, group.workers.length - budget);
+      group.workers = group.workers.slice(0, Math.max(0, budget));
+      budget -= group.workers.length;
+    }
+    refill(this.list, groups.filter((group) => group.workers.length || !group.hidden).map(({ supervisor, workers: own, hidden }) => h("li", {},
+      h("div", { class: "sup" },
+        h("span", { class: "sup-name" }, supervisor ? supervisor.application || supervisor.name : "Without a supervisor"),
+        supervisor ? h("span", { class: "sup-meta" }, `${supervisor.hostname}, pid ${supervisor.pid}, ${plural(own.length + hidden, "worker")}`) : null),
+      own.length ? h("ul", { class: "workers" }, own.map((worker) => workerItem(worker, this.meta, now, this.open))) : null)));
+  }
+}