@tsplc/debug 0.2.16 → 0.2.18

package/src/ui/requests.ts

@@ -1,4 +1,4 @@
-import { type View, empty, h } from "./dom.ts";
+import { type View, empty, h, table } from "./dom.ts";
 import { formatClock, formatDuration } from "./format.ts";
 import { requestJobLink, requestStatus } from "./jobs.ts";
 import type { Store } from "./store.ts";
@@ -6,76 +6,72 @@ import type { Store } from "./store.ts";
 const LIMIT = 500;
 
 export const requestsView = (store: Store, params: URLSearchParams): View => {
-  const highlighted = Number(params.get("seq") ?? Number.NaN);
-  const body = h("div");
-  const render = () => {
-    const requests = store.timeline
-      .flatMap((entry) => (entry.kind === "request" ? [entry.request] : []))
-      .sort((a, b) => b.seq - a.seq)
-      .slice(0, LIMIT);
-    body.replaceChildren(
-      requests.length
-        ? h(
-            "table",
-            { class: "grid" },
-            h(
-              "thead",
-              {},
-              h(
-                "tr",
-                {},
-                ...["#", "Started", "Service", "Status", "Duration", "Job", "Error"].map((label) =>
-                  h("th", {}, label),
-                ),
-              ),
-            ),
-            h(
-              "tbody",
-              {},
-              ...requests.map((request) =>
-                h(
-                  "tr",
-                  { class: request.seq === highlighted ? "highlight" : undefined },
-                  h("td", { class: "mono num" }, String(request.seq)),
-                  h("td", { class: "mono" }, formatClock(request.startedAt)),
-                  h("td", { class: "mono" }, request.service),
-                  h("td", {}, requestStatus(request)),
-                  h(
-                    "td",
-                    { class: "mono num" },
-                    request.durationMs === undefined ? "—" : formatDuration(request.durationMs),
-                  ),
-                  h(
-                    "td",
-                    {},
-                    request.job === undefined
-                      ? h("span", { class: "dim" }, "not from a job")
-                      : requestJobLink(store, request.job, request.sequence),
-                  ),
-                  h("td", { class: "err" }, request.error ?? ""),
-                ),
-              ),
-            ),
-          )
-        : empty("No service requests recorded yet."),
-    );
-  };
-  render();
-  store.show();
-  return {
-    element: h(
-      "div",
-      { class: "page" },
-      h("h1", {}, "Requests"),
-      h(
-        "p",
-        { class: "hint" },
-        `Service calls the app server traced, newest first (at most ${LIMIT}).`,
-      ),
-      body,
-    ),
-    update(topics) {
-      if (topics.has("timeline")) render();
-    },
-  };
+	const highlighted = Number(params.get("seq") ?? Number.NaN);
+	const body = h("div");
+	const render = () => {
+		const requests = store.timeline
+			.flatMap((entry) => (entry.kind === "request" ? [entry.request] : []))
+			.sort((a, b) => b.seq - a.seq)
+			.slice(0, LIMIT);
+		body.replaceChildren(
+			requests.length
+				? table(
+						{ class: "grid" },
+						["#", "Started", "Service", "Status", "Duration", "Job", "Error"],
+						h(
+							"tbody",
+							{},
+							...requests.map((request) =>
+								h(
+									"tr",
+									{
+										class:
+											request.seq === highlighted ? "highlight" : undefined,
+									},
+									h("td", { class: "mono num" }, String(request.seq)),
+									h("td", { class: "mono" }, formatClock(request.startedAt)),
+									h("td", { class: "mono" }, request.service),
+									h("td", {}, requestStatus(request)),
+									h(
+										"td",
+										{ class: "mono num" },
+										request.durationMs === undefined
+											? "—"
+											: formatDuration(request.durationMs),
+									),
+									h(
+										"td",
+										{},
+										request.job === undefined
+											? h("span", { class: "dim" }, "not from a job")
+											: requestJobLink(store, request.job, request.sequence),
+									),
+									h("td", { class: "err" }, request.error ?? ""),
+								),
+							),
+						),
+					)
+				: empty("No service requests recorded yet."),
+		);
+	};
+	render();
+	store.show();
+	return {
+		element: h(
+			"div",
+			{ class: "page" },
+			h("h1", {}, "Requests"),
+			h(
+				"p",
+				{ class: "hint" },
+				`Service calls the app server traced, newest first (at most ${LIMIT}).`,
+			),
+			body,
+		),
+		update(topics) {
+			if (topics.has("timeline")) {
+				render();
+			}
+		},
+	};
 };

package/src/ui/store.ts

@@ -1,29 +1,39 @@
 import type {
-  DeviceState,
-  Interest,
-  JobState,
-  Sample,
-  Session,
-  StreamEvents,
-  TimelineEntry,
-  WatchGroups,
+	DeviceState,
+	Interest,
+	JobState,
+	Sample,
+	Session,
+	StreamEvents,
+	TimelineEntry,
+	WatchGroups,
 } from "../api.ts";
+import { errorMessage } from "../errors.ts";
 import type { DebugManifest } from "../manifest.ts";
 import { apiUrl, getJson, putJson } from "./client.ts";
 import { type ValueState, valueState } from "./format.ts";
 import { createPaths, type Paths } from "../paths.ts";
+import { insertInTimeOrder } from "../timeline.ts";
 import { ManifestTree } from "./tree.ts";
 
 export type Topic =
-  "session" | "samples" | "jobs" | "devices" | "timeline" | "watch" | "stream" | "error" | "clock";
+	| "session"
+	| "samples"
+	| "jobs"
+	| "devices"
+	| "timeline"
+	| "watch"
+	| "stream"
+	| "error"
+	| "clock";
 
 /** The browser's EventSource state, apart from the controller connection the host reports. */
 type StreamState = "connecting" | "open" | "reconnecting";
 
 interface LiveSample {
-  sample: Sample | undefined;
-  ageMs: number | undefined;
-  state: ValueState;
+	sample: Sample | undefined;
+	ageMs: number | undefined;
+	state: ValueState;
 }
 
 const TIMELINE_LIMIT = 5000;
@@ -31,16 +41,16 @@ const REOPEN_DEBOUNCE_MS = 250;
 
 // A restarted PLC numbers its records from the start again, so the time tells them apart.
 const timelineKey = (entry: TimelineEntry) => {
-  switch (entry.kind) {
-    case "app":
-      return `app:${entry.task}:${entry.sequence}:${entry.at}`;
-    case "trace":
-      return `trace:${entry.trace.task}:${entry.trace.sequence}:${entry.at}`;
-    case "request":
-      return `request:${entry.request.seq}`;
-    default:
-      return `${entry.kind}:${entry.source}:${entry.at}`;
-  }
+	switch (entry.kind) {
+		case "app":
+			return `app:${entry.task}:${entry.sequence}:${entry.at}`;
+		case "trace":
+			return `trace:${entry.trace.task}:${entry.trace.sequence}:${entry.at}`;
+		case "request":
+			return `request:${entry.request.seq}`;
+		default:
+			return `${entry.kind}:${entry.source}:${entry.at}`;
+	}
 };
 
 /**
@@ -48,180 +58,208 @@ const timelineKey = (entry: TimelineEntry) => {
  * and handed to `onChange` by topic.
  */
 export class Store {
-  readonly tree: ManifestTree;
-  readonly paths: Paths;
-  stream: StreamState = "connecting";
-  error: string | undefined;
-  samples = new Map<string, Sample>();
-  jobs = new Map<number, JobState>();
-  devices = new Map<string, DeviceState>();
-  /** Oldest first, by `at`. */
-  timeline: TimelineEntry[] = [];
-  watch: WatchGroups = { groups: {} };
-
-  private readonly timelineByKey = new Map<string, TimelineEntry>();
-  /** Browser clock minus host clock, from the fastest sample delivery seen. */
-  private hostSkewMs = Infinity;
-  private source: EventSource | undefined;
-  private showing: string | undefined;
-  private params: Record<string, string> = {};
-  private reopenTimer: ReturnType<typeof setTimeout> | undefined;
-  private pending = new Set<Topic>();
-
-  constructor(
-    readonly manifest: DebugManifest,
-    public session: Session,
-    private readonly onChange: (topics: Set<Topic>) => void,
-  ) {
-    this.tree = new ManifestTree(manifest);
-    this.paths = createPaths(manifest);
-    setInterval(() => this.notify("clock"), 1000);
-  }
-
-  notify(topic: Topic) {
-    if (this.pending.size === 0) requestAnimationFrame(() => this.flush());
-    this.pending.add(topic);
-  }
-
-  private flush() {
-    const topics = this.pending;
-    this.pending = new Set();
-    this.onChange(topics);
-  }
-
-  reportError(error: unknown) {
-    this.error = error instanceof Error ? error.message : String(error);
-    this.notify("error");
-  }
-
-  /** Host time now, so ages of host timestamps do not depend on the browser's clock. */
-  hostNow() {
-    return Date.now() - (Number.isFinite(this.hostSkewMs) ? this.hostSkewMs : 0);
-  }
-
-  ageOf(iso: string) {
-    return Math.max(0, this.hostNow() - Date.parse(iso));
-  }
-
-  get connected() {
-    return this.stream === "open" && this.session.connection.state === "connected";
-  }
-
-  live(path: string): LiveSample {
-    const sample = this.samples.get(path);
-    if (!sample) return { sample, ageMs: undefined, state: "unavailable" };
-    const ageMs = this.ageOf(sample.receivedAt);
-    const state = valueState(sample.quality, ageMs, {
-      connected: this.connected,
-      intervalMs: this.session.reading.intervalMs,
-    });
-    return { sample, ageMs, state };
-  }
-
-  /**
-   * Streams exactly what the page shows, reopening the stream once it settles: the host reads
-   * only these paths, jobs and devices.
-   */
-  show(interest: Partial<Interest> = {}) {
-    const params = Object.fromEntries(
-      Object.entries(interest).flatMap(([name, values]) => {
-        const list = [...new Set(values.map(String))].sort().join(",");
-        return list ? [[name, list]] : [];
-      }),
-    );
-    const showing = JSON.stringify(Object.entries(params).sort());
-    if (showing === this.showing) return;
-    this.showing = showing;
-    this.params = params;
-    clearTimeout(this.reopenTimer);
-    this.reopenTimer = setTimeout(() => this.open(), this.source ? REOPEN_DEBOUNCE_MS : 0);
-  }
-
-  private open() {
-    this.source?.close();
-    const source = new EventSource(apiUrl("stream", this.params));
-    this.source = source;
-    source.onopen = () => {
-      this.stream = "open";
-      this.notify("stream");
-      void this.resync();
-    };
-    source.onerror = () => {
-      this.stream = "reconnecting";
-      this.notify("stream");
-      // The browser retries on its own unless the host refused the stream outright.
-      if (source.readyState === EventSource.CLOSED && this.source === source)
-        this.reopenTimer = setTimeout(() => this.open(), 3000);
-    };
-    const on = <K extends keyof StreamEvents>(name: K, handle: (data: StreamEvents[K]) => void) =>
-      source.addEventListener(name, (event) => handle(JSON.parse(event.data)));
-    on("session", (session) => {
-      this.session = session;
-      this.notify("session");
-    });
-    on("sample", (sample) => {
-      this.hostSkewMs = Math.min(this.hostSkewMs, Date.now() - Date.parse(sample.receivedAt));
-      this.samples.set(sample.path, sample);
-      this.notify("samples");
-    });
-    on("job", (job) => {
-      this.jobs.set(job.id, job);
-      this.notify("jobs");
-    });
-    on("device", (device) => {
-      this.devices.set(device.id, device);
-      this.notify("devices");
-    });
-    on("timeline", (entry) => this.addTimeline([entry]));
-  }
-
-  /** Catch up on what the stream does not replay: every (re)open may follow a gap. */
-  private async resync() {
-    try {
-      const since = this.timeline.at(-1)?.at;
-      const [session, jobs, devices, timeline, watch] = await Promise.all([
-        getJson("session"),
-        getJson("jobs"),
-        getJson("hardware"),
-        getJson("timeline", since ? { since } : {}),
-        getJson("watch"),
-      ]);
-      this.session = session;
-      this.jobs = new Map(jobs.map((job) => [job.id, job]));
-      this.devices = new Map(devices.map((device) => [device.id, device]));
-      this.watch = watch;
-      this.addTimeline(timeline);
-      for (const topic of ["session", "jobs", "devices", "watch"] as const) this.notify(topic);
-    } catch (error) {
-      this.reportError(error);
-    }
-  }
-
-  private addTimeline(entries: TimelineEntry[]) {
-    for (const entry of entries) {
-      const key = timelineKey(entry);
-      const existing = this.timelineByKey.get(key);
-      this.timelineByKey.set(key, entry);
-      if (existing) {
-        this.timeline[this.timeline.indexOf(existing)] = entry;
-        continue;
-      }
-      const at = Date.parse(entry.at);
-      let index = this.timeline.length;
-      while (index > 0 && Date.parse(this.timeline[index - 1]!.at) > at) index--;
-      this.timeline.splice(index, 0, entry);
-    }
-    for (const dropped of this.timeline.splice(0, this.timeline.length - TIMELINE_LIMIT))
-      this.timelineByKey.delete(timelineKey(dropped));
-    this.notify("timeline");
-  }
-
-  async saveWatch(groups: Record<string, string[]>) {
-    try {
-      this.watch = await putJson("watch", { groups });
-      this.notify("watch");
-    } catch (error) {
-      this.reportError(error);
-    }
-  }
+	readonly tree: ManifestTree;
+	readonly paths: Paths;
+	stream: StreamState = "connecting";
+	error: string | undefined;
+	samples = new Map<string, Sample>();
+	jobs = new Map<number, JobState>();
+	devices = new Map<string, DeviceState>();
+	/** Oldest first, by `at`. */
+	timeline: TimelineEntry[] = [];
+	watch: WatchGroups = { groups: {} };
+
+	private readonly timelineByKey = new Map<string, TimelineEntry>();
+	/** Browser clock minus host clock, from the fastest sample delivery seen. */
+	private hostSkewMs = Infinity;
+	private source: EventSource | undefined;
+	private showing: string | undefined;
+	private params: Record<string, string> = {};
+	private reopenTimer: ReturnType<typeof setTimeout> | undefined;
+	private pending = new Set<Topic>();
+
+	constructor(
+		readonly manifest: DebugManifest,
+		public session: Session,
+		private readonly onChange: (topics: Set<Topic>) => void,
+	) {
+		this.tree = new ManifestTree(manifest);
+		this.paths = createPaths(manifest);
+		setInterval(() => this.notify("clock"), 1000);
+	}
+
+	notify(topic: Topic) {
+		if (this.pending.size === 0) {
+			requestAnimationFrame(() => this.flush());
+		}
+		this.pending.add(topic);
+	}
+
+	private flush() {
+		const topics = this.pending;
+		this.pending = new Set();
+		this.onChange(topics);
+	}
+
+	reportError(error: unknown) {
+		this.error = errorMessage(error);
+		this.notify("error");
+	}
+
+	clearError() {
+		this.error = undefined;
+		this.notify("error");
+	}
+
+	/** Host time now, so ages of host timestamps do not depend on the browser's clock. */
+	hostNow() {
+		return (
+			Date.now() - (Number.isFinite(this.hostSkewMs) ? this.hostSkewMs : 0)
+		);
+	}
+
+	ageOf(iso: string) {
+		return Math.max(0, this.hostNow() - Date.parse(iso));
+	}
+
+	get connected() {
+		return (
+			this.stream === "open" && this.session.connection.state === "connected"
+		);
+	}
+
+	live(path: string): LiveSample {
+		const sample = this.samples.get(path);
+		if (!sample) {
+			return { sample, ageMs: undefined, state: "unavailable" };
+		}
+		const ageMs = this.ageOf(sample.receivedAt);
+		const state = valueState(sample.quality, ageMs, {
+			connected: this.connected,
+			intervalMs: this.session.reading.intervalMs,
+		});
+		return { sample, ageMs, state };
+	}
+
+	/**
+	 * Streams exactly what the page shows, reopening the stream once it settles: the host reads
+	 * only these paths, jobs and devices.
+	 */
+	show(interest: Partial<Interest> = {}) {
+		const params = Object.fromEntries(
+			Object.entries(interest).flatMap(([name, values]) => {
+				const list = [...new Set(values.map(String))].sort().join(",");
+				return list ? [[name, list]] : [];
+			}),
+		);
+		const showing = JSON.stringify(Object.entries(params).sort());
+		if (showing === this.showing) {
+			return;
+		}
+		this.showing = showing;
+		this.params = params;
+		clearTimeout(this.reopenTimer);
+		this.reopenTimer = setTimeout(
+			() => this.open(),
+			this.source ? REOPEN_DEBOUNCE_MS : 0,
+		);
+	}
+
+	private open() {
+		this.source?.close();
+		const source = new EventSource(apiUrl("stream", this.params));
+		this.source = source;
+		source.onopen = () => {
+			this.stream = "open";
+			this.notify("stream");
+			void this.resync();
+		};
+		source.onerror = () => {
+			this.stream = "reconnecting";
+			this.notify("stream");
+			// The browser retries on its own unless the host refused the stream outright.
+			if (source.readyState === EventSource.CLOSED && this.source === source) {
+				this.reopenTimer = setTimeout(() => this.open(), 3000);
+			}
+		};
+		const on = <K extends keyof StreamEvents>(
+			name: K,
+			handle: (data: StreamEvents[K]) => void,
+		) =>
+			source.addEventListener(name, (event) => handle(JSON.parse(event.data)));
+		on("session", (session) => {
+			this.session = session;
+			this.notify("session");
+		});
+		on("sample", (sample) => {
+			this.hostSkewMs = Math.min(
+				this.hostSkewMs,
+				Date.now() - Date.parse(sample.receivedAt),
+			);
+			this.samples.set(sample.path, sample);
+			this.notify("samples");
+		});
+		on("job", (job) => {
+			this.jobs.set(job.id, job);
+			this.notify("jobs");
+		});
+		on("device", (device) => {
+			this.devices.set(device.id, device);
+			this.notify("devices");
+		});
+		on("timeline", (entry) => this.addTimeline([entry]));
+	}
+
+	/** Catch up on what the stream does not replay: every (re)open may follow a gap. */
+	private async resync() {
+		try {
+			const since = this.timeline.at(-1)?.at;
+			const [session, jobs, devices, timeline, watch] = await Promise.all([
+				getJson("session"),
+				getJson("jobs"),
+				getJson("hardware"),
+				getJson("timeline", since ? { since } : {}),
+				getJson("watch"),
+			]);
+			this.session = session;
+			this.jobs = new Map(jobs.map((job) => [job.id, job]));
+			this.devices = new Map(devices.map((device) => [device.id, device]));
+			this.watch = watch;
+			this.addTimeline(timeline);
+			for (const topic of ["session", "jobs", "devices", "watch"] as const) {
+				this.notify(topic);
+			}
+		} catch (error) {
+			this.reportError(error);
+		}
+	}
+
+	private addTimeline(entries: TimelineEntry[]) {
+		for (const entry of entries) {
+			const key = timelineKey(entry);
+			const existing = this.timelineByKey.get(key);
+			this.timelineByKey.set(key, entry);
+			if (existing) {
+				this.timeline[this.timeline.indexOf(existing)] = entry;
+				continue;
+			}
+			insertInTimeOrder(this.timeline, entry);
+		}
+		for (const dropped of this.timeline.splice(
+			0,
+			this.timeline.length - TIMELINE_LIMIT,
+		)) {
+			this.timelineByKey.delete(timelineKey(dropped));
+		}
+		this.notify("timeline");
+	}
+
+	async saveWatch(groups: Record<string, string[]>) {
+		try {
+			this.watch = await putJson("watch", { groups });
+			this.notify("watch");
+		} catch (error) {
+			this.reportError(error);
+		}
+	}
 }