lepus 0.2.2 → 0.3.0

data/web/assets/js/model.js

@@ -0,0 +1,262 @@
+// Turns /api/topology into what the map draws: one band per exchange, one
+// row per queue bound to it (exchange -> queue -> consumer -> acknowledged),
+// with the queue's retry, error and delay queues folded into its row.
+// Delay queues are the ones Lepus declares for delayed publishing and
+// delay!: what waits in them is counted on the queue or the exchange it is
+// released to, never as backlog or retry.
+
+import { count, duration } from "./format.js";
+
+const ACTIVE = 0.01;
+const QUIET_AFTER_MS = 30_000;
+const ERRORS_SHOW_MS = 300_000;
+const ERROR_SHARE = 0.01;
+export const DEFAULT_BAND = "";
+
+const sum = (items, fn) => items.reduce((total, item) => total + (fn(item) || 0), 0);
+const byName = (a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0);
+const byDelay = (a, b) => (a.delay_ms || 0) - (b.delay_ms || 0) || byName(a, b);
+
+// "340 delayed, released after 1 min to emails.digest", or with several
+// delays "272 delayed, released to emails.digest after 1 min (136) or 1 h (136)".
+export function released(delay, target) {
+  const shown = delay.queues.filter((queue) => queue.messages > 0);
+  const queues = shown.length ? shown : delay.queues;
+  const head = `${count(delay.messages)} delayed`;
+  if (queues.length === 1) return `${head}, released after ${duration(queues[0].delay_ms)} to ${target}`;
+  const parts = queues.map((queue) => `${duration(queue.delay_ms)} (${count(queue.messages)})`);
+  return `${head}, released to ${target} after ${parts.slice(0, -1).join(", ")} or ${parts[parts.length - 1]}`;
+}
+
+// What waits in a set of delay queues: how many messages, how fast they
+// arrive and each queue with its delay, shortest first.
+export function waiting(delayQueues) {
+  const queues = [...delayQueues].sort(byDelay);
+  return { messages: sum(queues, (q) => q.messages), rate: sum(queues, (q) => q.publish_rate), queues };
+}
+
+export function isMain(queue, queues) {
+  if (queue.role === "main") return true;
+  if (queue.role === "delay") return false;
+  if (queue.parent_exchange) return false;
+  return !queues.has(queue.parent);
+}
+
+// Growing, or nobody is reading it.
+export const backingUp = (queue) => queue.ready > 0 && (queue.backlog_rate > 0.05 || queue.consumers === 0);
+
+export class Memory {
+  constructor() {
+    this.lastActive = new Map();
+    this.errored = new Map();
+  }
+
+  // Consumer counters only grow while a worker lives. When more than one in
+  // a hundred messages handled since the last report raised an error, the
+  // consumer stays red for a few minutes.
+  erroredRecently(consumer, now) {
+    const key = `${consumer.queue}|${consumer.class_name || consumer.connection_name}`;
+    const handled = consumer.processed + consumer.rejected + consumer.errored + (consumer.delayed || 0);
+    const seen = this.errored.get(key);
+    if (!seen) {
+      this.errored.set(key, { errored: consumer.errored, handled, changedAt: 0 });
+      return false;
+    }
+    const errors = consumer.errored - seen.errored;
+    const total = handled - seen.handled;
+    if (errors > 0 && total > 0 && errors / total >= ERROR_SHARE) seen.changedAt = now;
+    if (total !== 0) Object.assign(seen, { errored: consumer.errored, handled });
+    return now - seen.changedAt < ERRORS_SHOW_MS;
+  }
+
+  quiet(key, active, now) {
+    if (active) {
+      this.lastActive.set(key, now);
+      return false;
+    }
+    const last = this.lastActive.get(key);
+    return !last || now - last >= QUIET_AFTER_MS;
+  }
+}
+
+function consumerLabel(consumers) {
+  const named = consumers.filter((c) => c.channels || c.reporting);
+  if (!named.length) return null;
+  const first = named[0].class_name || named[0].connection_name || "Consumer";
+  return named.length > 1 ? `${first} +${named.length - 1}` : first;
+}
+
+function buildRow(queue, { keys, also, children, consumers, memory, now }) {
+  const kids = children.get(queue.name) || [];
+  const retry = kids.find((kid) => kid.role === "retry") || null;
+  const error = kids.find((kid) => kid.role === "error") || null;
+  const delay = waiting(kids.filter((kid) => kid.role === "delay"));
+  const mine = consumers.filter((consumer) => consumer.queue === queue.name);
+  const rates = {
+    in: queue.publish_rate,
+    out: queue.deliver_rate,
+    ack: queue.ack_rate,
+    retry: retry ? retry.publish_rate : 0,
+    error: error ? error.publish_rate : 0,
+    delay: delay.rate
+  };
+  const held = queue.messages + sum(kids, (kid) => kid.messages);
+  const active = held > 0 || Object.values(rates).some((value) => value >= ACTIVE);
+  const erroring = mine.map((consumer) => memory.erroredRecently(consumer, now)).some(Boolean);
+  const stopped = erroring || (rates.error >= 0.05 && rates.error >= rates.out * ERROR_SHARE);
+  return {
+    kind: "queue",
+    key: queue.name,
+    name: queue.name,
+    queue,
+    keys,
+    also,
+    retry,
+    error,
+    delayed: delay.messages,
+    delay,
+    consumers: mine,
+    consumerLabel: consumerLabel(mine),
+    rates,
+    backlog: queue.ready,
+    rising: backingUp(queue),
+    stopped,
+    quiet: memory.quiet(queue.name, active, now),
+    score: Math.log10(1 + queue.ready) * 2 + Math.log10(1 + rates.in + rates.out) + Math.log10(1 + delay.messages) + (stopped ? 6 : 0) + (error && error.messages ? 3 : 0)
+  };
+}
+
+function foldRows(rows, { expanded, limit, band }) {
+  const foldable = rows.filter((row) => row.kind === "queue");
+  const fixed = rows.filter((row) => row.kind !== "queue");
+  const active = foldable.filter((row) => !row.quiet);
+  if (expanded) {
+    const shown = [...fixed, ...foldable].sort(byName);
+    const canFold = active.length < foldable.length || foldable.length > limit;
+    return canFold ? [...shown, { kind: "less", key: `${band}|less`, band }] : shown;
+  }
+  const keep = active.length <= limit ? active : [...active].sort((a, b) => b.score - a.score).slice(0, limit);
+  const kept = new Set(keep);
+  const rest = foldable.filter((row) => !kept.has(row));
+  const shown = [...fixed, ...keep].sort(byName);
+  if (!rest.length) return shown;
+  const more = {
+    kind: "more",
+    key: `${band}|more`,
+    band,
+    count: rest.length,
+    quietCount: rest.filter((row) => row.quiet).length,
+    backlog: sum(rest, (row) => row.backlog),
+    errors: sum(rest, (row) => (row.error ? row.error.messages : 0)),
+    delayed: sum(rest, (row) => row.delayed),
+    rates: { in: sum(rest, (row) => row.rates.in), out: sum(rest, (row) => row.rates.out) },
+    names: rest.map((row) => row.name)
+  };
+  return [...shown, more];
+}
+
+export function buildModel(topology, memory, { now = Date.now(), expanded = new Set(), limit = 6 } = {}) {
+  const queues = new Map(topology.queues.map((queue) => [queue.name, queue]));
+  const exchanges = new Map(topology.exchanges.map((exchange) => [exchange.name, exchange]));
+  const children = new Map();
+  for (const queue of topology.queues) {
+    if (isMain(queue, queues)) continue;
+    if (!children.has(queue.parent)) children.set(queue.parent, []);
+    children.get(queue.parent).push(queue);
+  }
+
+  // "<exchange>.delayed" headers exchanges feed the delay queues that
+  // release into <exchange>; they draw no band of their own.
+  const delayFronts = new Set(topology.exchanges.filter((exchange) => exchange.role === "delay").map((exchange) => exchange.name));
+  const delayedByExchange = new Map();
+  for (const queue of topology.queues) {
+    if (queue.role !== "delay" || !queue.parent_exchange) continue;
+    if (!delayedByExchange.has(queue.parent_exchange)) delayedByExchange.set(queue.parent_exchange, []);
+    delayedByExchange.get(queue.parent_exchange).push(queue);
+  }
+
+  const sources = new Map();
+  for (const binding of topology.bindings) {
+    if (delayFronts.has(binding.source)) continue;
+    const target = binding.destination_type === "queue" ? queues.get(binding.destination) : null;
+    if (binding.destination_type === "queue" && (!target || !isMain(target, queues))) continue;
+    const key = `${binding.destination_type}:${binding.destination}`;
+    if (!sources.has(key)) sources.set(key, []);
+    sources.get(key).push(binding);
+  }
+
+  const bands = new Map();
+  const band = (name) => {
+    if (!bands.has(name)) {
+      const exchange = exchanges.get(name);
+      bands.set(name, {
+        key: name,
+        name: name === DEFAULT_BAND ? "Default exchange" : name,
+        type: exchange ? exchange.type || "" : "direct",
+        rate: exchange ? exchange.publish_in_rate : 0,
+        delayed: delayedByExchange.has(name) ? waiting(delayedByExchange.get(name)) : null,
+        rows: []
+      });
+    }
+    return bands.get(name);
+  };
+  const consumers = topology.consumers || [];
+
+  for (const [key, list] of sources) {
+    const sorted = [...list].sort((a, b) => (a.source < b.source ? -1 : a.source > b.source ? 1 : 0));
+    const primary = sorted[0];
+    const also = [...new Set(sorted.slice(1).map((binding) => binding.source))];
+    const keys = primary.routing_keys || [];
+    if (key.startsWith("exchange:")) {
+      const target = exchanges.get(primary.destination);
+      band(primary.source).rows.push({
+        kind: "exchange", key: key, name: primary.destination, keys, also,
+        rates: { in: target ? target.publish_in_rate : 0 }, quiet: !(target && target.publish_in_rate >= ACTIVE)
+      });
+    } else {
+      band(primary.source).rows.push(buildRow(queues.get(primary.destination), { keys, also, children, consumers, memory, now }));
+    }
+  }
+
+  for (const name of delayedByExchange.keys()) {
+    if (exchanges.has(name)) band(name);
+  }
+
+  const routed = new Set([...sources.keys()].filter((key) => key.startsWith("queue:")).map((key) => key.slice(6)));
+  for (const queue of topology.queues) {
+    if (!isMain(queue, queues) || routed.has(queue.name)) continue;
+    band(DEFAULT_BAND).rows.push(buildRow(queue, { keys: [], also: [], children, consumers, memory, now }));
+  }
+
+  const ordered = [...bands.values()].sort((a, b) => (a.key === DEFAULT_BAND) - (b.key === DEFAULT_BAND) || (a.name < b.name ? -1 : a.name > b.name ? 1 : 0));
+  for (const entry of ordered) {
+    entry.allRows = entry.rows;
+    entry.quiet = entry.rows.every((row) => row.quiet) && !(entry.rate >= ACTIVE);
+    entry.expanded = expanded.has(entry.key);
+    entry.rows = foldRows(entry.rows, { expanded: entry.expanded, limit, band: entry.key });
+  }
+
+  const unbound = topology.exchanges
+    .filter((exchange) => !(bands.has(exchange.name) && bands.get(exchange.name).rows.length) && !delayFronts.has(exchange.name))
+    .map((exchange) => exchange.name)
+    .sort();
+
+  const mainQueues = topology.queues.filter((queue) => isMain(queue, queues));
+  const roles = (role) => topology.queues.filter((queue) => queue.role === role && !isMain(queue, queues));
+  const drawnDelays = roles("delay").filter((queue) => queues.has(queue.parent) || bands.has(queue.parent_exchange));
+  return {
+    bands: ordered,
+    unbound,
+    totals: {
+      publish: sum(topology.exchanges, (e) => (delayFronts.has(e.name) ? 0 : e.publish_in_rate)) + sum(bands.get(DEFAULT_BAND)?.allRows || [], (row) => row.rates.in),
+      deliver: sum(mainQueues, (q) => q.deliver_rate),
+      ack: sum(mainQueues, (q) => q.ack_rate),
+      retry: sum(roles("retry"), (q) => q.publish_rate),
+      errors: sum(roles("error"), (q) => q.messages),
+      delayed: sum(drawnDelays, (q) => q.messages),
+      backingUp: mainQueues.filter(backingUp).length,
+      ready: sum(mainQueues, (q) => q.ready),
+      queues: mainQueues.length
+    }
+  };
+}

data/web/assets/js/rates.js

@@ -0,0 +1,161 @@
+import { h, s, clear } from "./dom.js";
+import { hourMinute, perSecond, rate } from "./format.js";
+
+const SERIES = [
+  ["publish", "Published"],
+  ["deliver", "Delivered"],
+  ["ack", "Acknowledged"],
+  ["redeliver", "Redelivered"]
+];
+
+function niceTop(value) {
+  if (value <= 4) return 4;
+  const magnitude = 10 ** Math.floor(Math.log10(value));
+  for (const m of [1, 2, 2.5, 3, 4, 5, 6, 8, 10]) if (m * magnitude >= value) return m * magnitude;
+  return 10 * magnitude;
+}
+
+function ticks(start, end, px) {
+  const steps = [30, 60, 120, 300, 600, 900, 1800, 3600].map((seconds) => seconds * 1000);
+  const step = steps.find((ms) => (ms / (end - start)) * px >= 84) || steps[steps.length - 1];
+  const out = [];
+  for (let t = Math.ceil(start / step) * step; t <= end; t += step) out.push(t);
+  return out;
+}
+
+// Message rates across the broker over the chosen window, from the samples
+// the management API keeps: acknowledged as the filled area, published as
+// the ink line and delivered as the dashed amber one, redeliveries in violet.
+export class RateStrip {
+  constructor(host) {
+    this.host = host;
+    this.totals = h("dl", { class: "tp-totals" });
+    this.chart = h("div", { class: "tp-chart" });
+    this.readout = h("p", { class: "tp-readout", "aria-hidden": "true" });
+    this.tableBody = h("tbody");
+    this.caption = h("caption", { class: "visually-hidden" });
+    host.append(
+      this.totals,
+      this.chart,
+      h("div", { class: "tp-foot" },
+        this.readout,
+        h("details", { class: "data-table" },
+          h("summary", {}, "Show as table"),
+          h("div", { class: "data-scroll" },
+            h("table", {},
+              this.caption,
+              h("thead", {}, h("tr", {},
+                h("th", { scope: "col" }, "Until"),
+                SERIES.map(([, name]) => h("th", { scope: "col" }, `${name}/s`)))),
+              this.tableBody)))));
+    this.observer = new ResizeObserver(() => {
+      const width = Math.round(this.chart.clientWidth);
+      if (width && width !== this.width && this.data) this.draw();
+    });
+    this.observer.observe(this.chart);
+  }
+
+  destroy() {
+    this.observer.disconnect();
+  }
+
+  set(overview, range) {
+    const rows = (overview.history || []).map((row) => ({ ...row, t: Date.parse(row.t) }));
+    this.data = { rows, range, current: overview.rates || {} };
+    this.drawTotals();
+    this.draw();
+    this.drawTable();
+  }
+
+  drawTotals() {
+    const { current } = this.data;
+    clear(this.totals).append(...SERIES.map(([key, name]) =>
+      h("div", {}, h("dt", {}, h("i", { class: `k-${key}` }), name), h("dd", {}, perSecond(current[key])))));
+  }
+
+  drawTable() {
+    const { rows, range } = this.data;
+    this.caption.textContent = `Messages per second across the broker over ${range.phrase}`;
+    clear(this.tableBody);
+    for (const row of [...rows].reverse()) {
+      this.tableBody.append(h("tr", {},
+        h("th", { scope: "row" }, hourMinute(row.t)),
+        SERIES.map(([key]) => h("td", {}, rate(row[key])))));
+    }
+  }
+
+  draw() {
+    const { rows, range } = this.data;
+    const width = Math.max(280, Math.round(this.chart.clientWidth) || 800);
+    this.width = width;
+    if (rows.length < 2) {
+      clear(this.chart).append(h("p", { class: "tp-empty" }, "No rate samples yet. The management API keeps them once messages flow."));
+      this.readout.textContent = "";
+      return;
+    }
+    const narrow = width < 600;
+    const height = narrow ? 140 : 168;
+    const m = { top: 12, right: 4, bottom: 24, left: 40 };
+    const plotW = width - m.left - m.right;
+    const plotH = height - m.top - m.bottom;
+    const start = rows[0].t;
+    const end = rows[rows.length - 1].t;
+    const x = (time) => m.left + ((time - start) / Math.max(1, end - start)) * plotW;
+    const top = niceTop(Math.max(...rows.map((row) => Math.max(row.publish, row.deliver, row.ack, row.redeliver))));
+    const y = (value) => m.top + plotH - (Math.min(value, top) / top) * plotH;
+    const path = (key) => rows.map((row, index) => `${index ? "L" : "M"}${x(row.t).toFixed(1)} ${y(row[key]).toFixed(1)}`).join("");
+    const area = (key) => `${path(key)}L${x(end)} ${y(0)}L${x(start)} ${y(0)}Z`;
+    const peak = rows.reduce((best, row) => (row.publish > best.publish ? row : best), rows[0]);
+
+    const svg = s("svg", {
+      viewBox: `0 0 ${width} ${height}`, width, height, role: "img",
+      "aria-label": `Over ${range.phrase}: published peaked at ${perSecond(peak.publish)} around ${hourMinute(peak.t)}. ` +
+        `Now ${SERIES.map(([key, name]) => `${name.toLowerCase()} ${perSecond(this.data.current[key])}`).join(", ")}.`
+    });
+    for (const value of [0, top / 2, top]) {
+      const gy = Math.round(y(value)) + 0.5;
+      svg.append(
+        s("line", { class: value ? "p-grid" : "p-rule", x1: m.left, x2: width - m.right, y1: gy, y2: gy }),
+        s("text", { class: "p-axis", x: m.left - 8, y: gy + 4, "text-anchor": "end" }, value ? perSecond(value) : "0"));
+    }
+    svg.append(
+      s("path", { class: "p-ack", d: area("ack") }),
+      s("path", { class: "p-ack-edge", d: path("ack") }),
+      s("path", { class: "p-redeliver", d: area("redeliver") }),
+      s("path", { class: "p-publish", d: path("publish") }),
+      s("path", { class: "p-deliver", d: path("deliver") }));
+
+    for (const tick of ticks(start, end, plotW)) {
+      const text = hourMinute(tick);
+      const tx = x(tick);
+      if (tx - text.length * 3.4 < m.left - 6 || tx + text.length * 3.4 > width) continue;
+      svg.append(
+        s("line", { class: "p-tick", x1: tx, x2: tx, y1: y(0), y2: y(0) + 4 }),
+        s("text", { class: "p-axis", x: tx, y: height - 6, "text-anchor": "middle" }, text));
+    }
+
+    const cursor = s("line", { class: "p-cursor", x1: 0, x2: 0, y1: m.top, y2: y(0), visibility: "hidden" });
+    const hit = s("rect", { class: "p-hit", x: m.left, y: 0, width: plotW, height });
+    const show = (event) => {
+      const box = svg.getBoundingClientRect();
+      const px = ((event.clientX - box.left) / box.width) * width;
+      const time = start + ((px - m.left) / plotW) * (end - start);
+      const row = rows.reduce((best, candidate) => (Math.abs(candidate.t - time) < Math.abs(best.t - time) ? candidate : best), rows[0]);
+      cursor.setAttribute("x1", x(row.t));
+      cursor.setAttribute("x2", x(row.t));
+      cursor.setAttribute("visibility", "visible");
+      clear(this.readout).append(h("b", {}, `${hourMinute(row.t)}: `),
+        SERIES.map(([key, name]) => `${name.toLowerCase()} ${perSecond(row[key])}`).join(", "));
+    };
+    const hide = () => {
+      cursor.setAttribute("visibility", "hidden");
+      this.readout.textContent = "Point at the chart to read the rates at a moment.";
+    };
+    hit.addEventListener("pointermove", show);
+    hit.addEventListener("pointerdown", show);
+    hit.addEventListener("pointerleave", hide);
+    svg.append(cursor, hit);
+    hide();
+    clear(this.chart).append(svg);
+  }
+}

data/web/assets/js/theme.js

@@ -0,0 +1,8 @@
+(function () {
+  try {
+    var theme = window.localStorage.getItem("lepus:theme");
+    if (theme === "light" || theme === "dark") document.documentElement.setAttribute("data-theme", theme);
+  } catch (error) {
+    document.documentElement.removeAttribute("data-theme");
+  }
+})();

data/web/assets/js/views/connections.js

@@ -0,0 +1,61 @@
+import { h, refill } from "../dom.js";
+import { ago, count, plural } from "../format.js";
+
+const SHOWN = 12;
+const SELF = "(web-aggregator)";
+
+const label = (connection) => (connection.client_properties && connection.client_properties.connection_name) || connection.name;
+
+// The broker's client connections, kept quiet below the map.
+export class ConnectionTable {
+  constructor(host) {
+    this.all = false;
+    this.note = h("p", { class: "section-note" });
+    this.body = h("tbody");
+    this.more = h("button", { type: "button", class: "btn btn-quiet btn-small", hidden: true, onclick: () => { this.all = !this.all; this.draw(); } });
+    host.append(
+      this.note,
+      h("table", { class: "rows is-quiet" },
+        h("caption", { class: "visually-hidden" }, "Connections"),
+        h("thead", {}, h("tr", {},
+          h("th", { scope: "col" }, "Connection"),
+          h("th", { scope: "col" }, "User"),
+          h("th", { scope: "col" }, "Channels"),
+          h("th", { scope: "col" }, "State"),
+          h("th", { scope: "col" }, "Connected"))),
+        this.body),
+      h("div", { class: "list-foot" }, this.more));
+    this.connections = [];
+  }
+
+  set(connections) {
+    this.connections = [...connections].sort((a, b) => label(a).localeCompare(label(b)));
+    const channels = this.connections.reduce((sum, c) => sum + (c.channels || 0), 0);
+    const users = new Set(this.connections.map((c) => c.user));
+    this.note.textContent = this.connections.length
+      ? `${plural(this.connections.length, "connection")} with ${plural(channels, "channel")} from ${plural(users.size, "user")}.`
+      : "";
+    this.draw();
+  }
+
+  draw() {
+    const now = Date.now();
+    const list = this.all ? this.connections : this.connections.slice(0, SHOWN);
+    this.more.hidden = this.connections.length <= SHOWN;
+    this.more.textContent = this.all ? "Show fewer" : `Show all ${count(this.connections.length)}`;
+    if (!list.length) {
+      refill(this.body, h("tr", {}, h("td", { colspan: 5, class: "empty" }, "No connections reported. They appear once the management API answers.")));
+      return;
+    }
+    refill(this.body, list.map((connection) => {
+      const name = label(connection);
+      const state = connection.state || "unknown";
+      return h("tr", {},
+        h("td", {}, name, name.endsWith(SELF) ? h("span", { class: "c-self" }, "this dashboard") : null),
+        h("td", { "data-label": "User" }, connection.user || ""),
+        h("td", { "data-label": "Channels" }, count(connection.channels)),
+        h("td", { "data-label": "State", class: `c-state is-${state}` }, state),
+        h("td", { "data-label": "Connected" }, connection.connected_at ? ago(connection.connected_at, now) : ""));
+    }));
+  }
+}