feat(web): hydrate dashboard tiles independently

apps/web/src/server/routes/dashboard.test.ts

@@ -1,11 +1,14 @@
-import { describe, expect, test } from "vitest";
+import { describe, expect, test, vi } from "vitest";
 import { dimensionLabDashboardFixture } from "$lib/dashboard-seed/dimensionlab";
-import { loadDashboardResponse } from "./dashboard";
+import { loadDashboardResponse, loadDashboardTileResponse } from "./dashboard";
 
 describe("dashboard API route", () => {
-  test("returns ready dashboard runtime state from the existing model loader", async () => {
+  test("returns the ready dashboard shell without hydrating live datasources", async () => {
+    const fetch = vi.spyOn(globalThis, "fetch").mockRejectedValue(
+      new Error("live datasource fetch should not run for the shell response"),
+    );
+
     const response = await loadDashboardResponse({
-      disableLiveDatasources: true,
       refreshSeedDocument: true,
       seedIfEmpty: true,
     });
@@ -15,5 +18,105 @@ describe("dashboard API route", () => {
     expect(response.document.metadata.title).toBe(
       dimensionLabDashboardFixture.metadata.title,
     );
+    expect(fetch).not.toHaveBeenCalled();
+
+    fetch.mockRestore();
+  });
+
+  test("reports when client-side live hydration is disabled", async () => {
+    const previous = process.env.DISABLE_LIVE_DATASOURCES;
+    process.env.DISABLE_LIVE_DATASOURCES = "1";
+
+    try {
+      const response = await loadDashboardResponse({
+        refreshSeedDocument: true,
+        seedIfEmpty: true,
+      });
+
+      expect(response.state).toBe("ready");
+      if (response.state !== "ready") throw new Error("expected ready dashboard");
+      expect(response.liveDatasourceHydration).toEqual({ enabled: false });
+    } finally {
+      if (previous === undefined) {
+        delete process.env.DISABLE_LIVE_DATASOURCES;
+      } else {
+        process.env.DISABLE_LIVE_DATASOURCES = previous;
+      }
+    }
+  });
+
+  test("hydrates a telemetry tile independently from the dashboard shell", async () => {
+    const fetch = vi.fn(async (input: RequestInfo | URL) => {
+      const url = String(input);
+
+      if (url.startsWith("https://prometheus.example/api/v1/query_range")) {
+        return jsonResponse({
+          status: "success",
+          data: {
+            result: [
+              {
+                metric: { host: "linux-infra" },
+                values: [
+                  [1771430000, "10"],
+                  [1771430060, "20"],
+                  [1771430120, "42"],
+                ],
+              },
+            ],
+          },
+        });
+      }
+
+      if (url.startsWith("https://prometheus.example/api/v1/query")) {
+        return jsonResponse({
+          status: "success",
+          data: {
+            result: [
+              {
+                metric: { host: "linux-infra" },
+                value: [1771430400, "42"],
+              },
+            ],
+          },
+        });
+      }
+
+      throw new Error(`Unhandled test request: ${url}`);
+    });
+
+    const response = await loadDashboardTileResponse(
+      { kind: "telemetry", id: "infra-ram" },
+      {
+        fetch,
+        prometheusBaseUrl: "https://prometheus.example",
+        refreshSeedDocument: true,
+        seedIfEmpty: true,
+      },
+    );
+
+    expect(response.state).toBe("ready");
+    if (response.state !== "ready") throw new Error("expected ready tile");
+    expect(response.tile).toEqual({ kind: "telemetry", id: "infra-ram" });
+    expect(response.item).toMatchObject({
+      id: "infra-ram",
+      value: { kind: "percent", value: 42 },
+      severity: "ok",
+      detail: "linux-infra",
+      sparkline: [10, 20, 42],
+    });
+    expect(fetch).toHaveBeenCalledWith(
+      expect.stringContaining("/api/v1/query?"),
+      expect.objectContaining({ cache: "no-store" }),
+    );
+    expect(fetch).toHaveBeenCalledWith(
+      expect.stringContaining("/api/v1/query_range?"),
+      expect.objectContaining({ cache: "no-store" }),
+    );
   });
 });
+
+function jsonResponse(payload: unknown): Response {
+  return new Response(JSON.stringify(payload), {
+    headers: { "content-type": "application/json" },
+  });
+}

apps/web/src/server/routes/dashboard.ts

@@ -3,19 +3,30 @@ import {
   type DashboardRuntimeOptions,
   type DashboardRuntimeState,
 } from "$lib/server/dashboard";
-import { resolveDashboardDatasources } from "$lib/server/datasources";
+import {
+  resolveDashboardDatasources,
+  resolveDashboardTile,
+  type DashboardTileReference,
+  type DashboardTileResolution,
+  type DatasourceResolutionOptions,
+} from "$lib/server/datasources";
 
 export interface LoadDashboardResponseOptions
   extends Pick<
     DashboardRuntimeOptions,
     "refreshSeedDocument" | "seedIfEmpty" | "seedDocument"
-  > {
+  >,
+    DatasourceResolutionOptions {
   disableLiveDatasources?: boolean;
+  hydrateLiveDatasources?: boolean;
 }
 
 export async function loadDashboardResponse(
   options: LoadDashboardResponseOptions = {},
 ): Promise<DashboardRuntimeState> {
+  const liveHydrationEnabled =
+    !options.disableLiveDatasources &&
+    process.env.DISABLE_LIVE_DATASOURCES !== "1";
   const dashboard = loadDashboardRuntime(undefined, {
     refreshSeedDocument: options.refreshSeedDocument ?? true,
     seedIfEmpty: options.seedIfEmpty ?? true,
@@ -26,16 +37,87 @@ export async function loadDashboardResponse(
     return dashboard;
   }
 
-  if (options.disableLiveDatasources || process.env.DISABLE_LIVE_DATASOURCES === "1") {
-    return dashboard;
+  if (
+    !options.hydrateLiveDatasources ||
+    options.disableLiveDatasources ||
+    process.env.DISABLE_LIVE_DATASOURCES === "1"
+  ) {
+    return {
+      ...dashboard,
+      liveDatasourceHydration: {
+        enabled: liveHydrationEnabled,
+      },
+    };
   }
 
   return {
     ...dashboard,
-    document: await resolveDashboardDatasources(dashboard.document),
+    document: await resolveDashboardDatasources(dashboard.document, options),
+    liveDatasourceHydration: {
+      enabled: false,
+    },
   };
 }
 
+export async function loadDashboardTileResponse(
+  tile: DashboardTileReference,
+  options: LoadDashboardResponseOptions = {},
+): Promise<DashboardTileResolution> {
+  const dashboard = loadDashboardRuntime(undefined, {
+    refreshSeedDocument: options.refreshSeedDocument ?? true,
+    seedIfEmpty: options.seedIfEmpty ?? true,
+    seedDocument: options.seedDocument,
+  });
+
+  if (dashboard.state !== "ready") {
+    return {
+      state: "not_found",
+      tile,
+      message: `Dashboard is not ready: ${dashboard.state}`,
+    };
+  }
+
+  return resolveDashboardTile(dashboard.document, tile, options);
+}
+
 export async function handleDashboardRoute(): Promise<Response> {
   return Response.json(await loadDashboardResponse());
 }
+
+export async function handleDashboardTileRoute(pathname: string): Promise<Response> {
+  const tile = parseDashboardTilePath(pathname);
+  if (!tile) {
+    return Response.json(
+      { ok: false, message: "Invalid dashboard tile route" },
+      { status: 404 },
+    );
+  }
+
+  const response = await loadDashboardTileResponse(tile);
+  return Response.json(response, {
+    status: response.state === "ready" ? 200 : 404,
+  });
+}
+
+function parseDashboardTilePath(pathname: string): DashboardTileReference | null {
+  const parts = pathname.split("/").filter(Boolean);
+  const [, dashboard, tileRoot, kind, firstId, secondId] = parts;
+  if (dashboard !== "dashboard" || tileRoot !== "tile" || !kind || !firstId) {
+    return null;
+  }
+
+  const id = decodeURIComponent(firstId);
+  if (kind === "telemetry" || kind === "service" || kind === "module") {
+    return { kind, id };
+  }
+
+  if (kind === "status" && secondId) {
+    return {
+      kind,
+      stripId: id,
+      id: decodeURIComponent(secondId),
+    };
+  }
+
+  return null;
+}