@tsplc/debug 0.2.17 → 0.2.18

package/src/ui/overview.ts

@@ -1,4 +1,13 @@
-import { type Health, type View, deviceHealth, empty, h, healthBadge } from "./dom.ts";
+import {
+	type Health,
+	type View,
+	deviceHealth,
+	deviceHref,
+	devicesWithHealth,
+	empty,
+	h,
+	healthBadge,
+} from "./dom.ts";
 import { formatAge, formatClock, formatInterval } from "./format.ts";
 import { isActive, jobRow, jobTable } from "./jobs.ts";
 import { recentEntry } from "./recent.ts";
@@ -8,116 +17,151 @@ const HEALTH_ORDER: Health[] = ["fault", "stale", "unknown", "ok"];
 const RECENT_EVENTS = 12;
 
 export const overviewView = (store: Store): View => {
-  const connection = h("section", { class: "panel" });
-  const devices = h("section", { class: "panel" });
-  const jobs = h("section", { class: "panel wide" });
-  const events = h("section", { class: "panel wide" });
+	const connection = h("section", { class: "panel" });
+	const devices = h("section", { class: "panel" });
+	const jobs = h("section", { class: "panel wide" });
+	const events = h("section", { class: "panel wide" });
 
-  const renderConnection = () => {
-    const { session } = store;
-    connection.replaceChildren(
-      h("h2", {}, "Connection"),
-      h(
-        "dl",
-        { class: "facts" },
-        h("dt", {}, "Values"),
-        h(
-          "dd",
-          {},
-          h("span", { class: `st st-${session.connection.state}` }, session.connection.state),
-          ` since ${formatClock(session.connection.since)} (${formatAge(store.ageOf(session.connection.since))})`,
-        ),
-        h("dt", {}, "Endpoint"),
-        h("dd", { class: "mono" }, session.connection.endpoint),
-        session.connection.error && h("dt", {}, "Error"),
-        session.connection.error && h("dd", { class: "err" }, session.connection.error),
-        h("dt", {}, "Debugger host"),
-        h("dd", {}, store.stream === "open" ? "streaming" : `${store.stream}…`),
-        h("dt", {}, "Reading"),
-        h(
-          "dd",
-          {},
-          `${session.reading.method}, every ${formatInterval(session.reading.intervalMs)}; values older than ${formatInterval(3 * session.reading.intervalMs)} are marked stale`,
-        ),
-      ),
-    );
-  };
+	const renderConnection = () => {
+		const { session } = store;
+		connection.replaceChildren(
+			h("h2", {}, "Connection"),
+			h(
+				"dl",
+				{ class: "facts" },
+				h("dt", {}, "Values"),
+				h(
+					"dd",
+					{},
+					h(
+						"span",
+						{ class: `st st-${session.connection.state}` },
+						session.connection.state,
+					),
+					` since ${formatClock(session.connection.since)} (${formatAge(store.ageOf(session.connection.since))})`,
+				),
+				h("dt", {}, "Endpoint"),
+				h("dd", { class: "mono" }, session.connection.endpoint),
+				session.connection.error && h("dt", {}, "Error"),
+				session.connection.error &&
+					h("dd", { class: "err" }, session.connection.error),
+				h("dt", {}, "Debugger host"),
+				h("dd", {}, store.stream === "open" ? "streaming" : `${store.stream}…`),
+				h("dt", {}, "Reading"),
+				h(
+					"dd",
+					{},
+					`${session.reading.method}, every ${formatInterval(session.reading.intervalMs)}; values older than ${formatInterval(3 * session.reading.intervalMs)} are marked stale`,
+				),
+			),
+		);
+	};
 
-  const renderDevices = () => {
-    const healths = store.manifest.devices.map((device) => ({
-      device,
-      health: deviceHealth(store, device),
-    }));
-    const attention = healths.filter(({ health }) => health.health !== "ok");
-    devices.replaceChildren(
-      h("h2", {}, h("a", { href: "#/hardware" }, "Devices")),
-      h(
-        "div",
-        { class: "counts" },
-        ...HEALTH_ORDER.map((health) =>
-          h(
-            "div",
-            { class: `count-box h-${health}` },
-            h("b", {}, String(healths.filter((entry) => entry.health.health === health).length)),
-            h("span", {}, health),
-          ),
-        ),
-      ),
-      ...attention.map(({ device, health }) =>
-        h(
-          "div",
-          { class: "device-line" },
-          healthBadge(health),
-          " ",
-          h("a", { href: `#/hardware/${encodeURIComponent(device.id)}`, class: "mono" }, device.id),
-          h("span", { class: "dim" }, ` ${health.detail}`),
-        ),
-      ),
-    );
-  };
+	const renderDevices = () => {
+		const healths = store.manifest.devices.map((device) => ({
+			device,
+			health: deviceHealth(store, device),
+		}));
+		const attention = healths.filter(({ health }) => health.health !== "ok");
+		devices.replaceChildren(
+			h("h2", {}, h("a", { href: "#/hardware" }, "Devices")),
+			h(
+				"div",
+				{ class: "counts" },
+				...HEALTH_ORDER.map((health) =>
+					h(
+						"div",
+						{ class: `count-box h-${health}` },
+						h(
+							"b",
+							{},
+							String(
+								healths.filter((entry) => entry.health.health === health)
+									.length,
+							),
+						),
+						h("span", {}, health),
+					),
+				),
+			),
+			...attention.map(({ device, health }) =>
+				h(
+					"div",
+					{ class: "device-line" },
+					healthBadge(health),
+					" ",
+					h(
+						"a",
+						{
+							href: deviceHref(device.id),
+							class: "mono",
+						},
+						device.id,
+					),
+					h("span", { class: "dim" }, ` ${health.detail}`),
+				),
+			),
+		);
+	};
 
-  // The jobs this page reads: the program's own, as the Jobs page shows them by default.
-  const shown = new Set(store.manifest.jobs.filter((job) => !job.generated).map(({ id }) => id));
-  const renderJobs = () => {
-    const active = [...store.jobs.values()].filter((job) => shown.has(job.id) && isActive(job));
-    jobs.replaceChildren(
-      h("h2", {}, h("a", { href: "#/jobs" }, "Active jobs")),
-      h("p", { class: "hint" }, "Busy, or failed since they last started."),
-      active.length
-        ? jobTable(active.map((job) => jobRow(store, job)))
-        : empty("No job is busy or failed."),
-    );
-  };
+	// The jobs this page reads: the program's own, as the Jobs page shows them by default.
+	const shown = new Set(
+		store.manifest.jobs.filter((job) => !job.generated).map(({ id }) => id),
+	);
+	const renderJobs = () => {
+		const active = [...store.jobs.values()].filter(
+			(job) => shown.has(job.id) && isActive(job),
+		);
+		jobs.replaceChildren(
+			h("h2", {}, h("a", { href: "#/jobs" }, "Active jobs")),
+			h("p", { class: "hint" }, "Busy, or failed since they last started."),
+			active.length
+				? jobTable(active.map((job) => jobRow(store, job)))
+				: empty("No job is busy or failed."),
+		);
+	};
 
-  const renderEvents = () => {
-    const recent = store.timeline
-      .filter((entry) => entry.kind === "app" || entry.kind === "trace")
-      .slice(-RECENT_EVENTS)
-      .reverse();
-    events.replaceChildren(
-      h("h2", {}, h("a", { href: "#/recent" }, "Recent events")),
-      ...(recent.length
-        ? recent.map((entry) => recentEntry(store, entry))
-        : [empty("The program has reported nothing recently.")]),
-    );
-  };
+	const renderEvents = () => {
+		const recent = store.timeline
+			.filter((entry) => entry.kind === "app" || entry.kind === "trace")
+			.slice(-RECENT_EVENTS)
+			.reverse();
+		events.replaceChildren(
+			h("h2", {}, h("a", { href: "#/recent" }, "Recent events")),
+			...(recent.length
+				? recent.map((entry) => recentEntry(store, entry))
+				: [empty("The program has reported nothing recently.")]),
+		);
+	};
 
-  renderConnection();
-  renderDevices();
-  renderJobs();
-  renderEvents();
-  store.show({
-    health: store.manifest.devices.filter((device) => device.health).map(({ id }) => id),
-    jobs: [...shown],
-  });
-  return {
-    element: h("div", { class: "page overview" }, connection, devices, jobs, events),
-    update(topics) {
-      const live = topics.has("session") || topics.has("stream");
-      if (live || topics.has("clock")) renderConnection();
-      if (live || topics.has("devices")) renderDevices();
-      if (live || topics.has("jobs") || topics.has("timeline")) renderJobs();
-      if (topics.has("timeline")) renderEvents();
-    },
-  };
+	renderConnection();
+	renderDevices();
+	renderJobs();
+	renderEvents();
+	store.show({ health: devicesWithHealth(store), jobs: [...shown] });
+	return {
+		element: h(
+			"div",
+			{ class: "page overview" },
+			connection,
+			devices,
+			jobs,
+			events,
+		),
+		update(topics) {
+			const live = topics.has("session") || topics.has("stream");
+			if (live || topics.has("clock")) {
+				renderConnection();
+			}
+			if (live || topics.has("devices")) {
+				renderDevices();
+			}
+			if (live || topics.has("jobs") || topics.has("timeline")) {
+				renderJobs();
+			}
+			if (topics.has("timeline")) {
+				renderEvents();
+			}
+		},
+	};
 };