@antelopejs/dms 0.7.7 → 0.7.8

package/frontend-vue/tests/live-hold-banner.test.ts

@@ -0,0 +1,37 @@
+// @vitest-environment jsdom
+/**
+ * The strip of a held table: "N new · Show", Show reading the rows again.
+ */
+import { createApp, h, type App } from "vue";
+import { afterEach, expect, it, vi } from "vitest";
+
+let app: App | undefined;
+
+afterEach(() => {
+  app?.unmount();
+  vi.unstubAllGlobals();
+});
+
+it("draws the banner and reads the rows on Show", async () => {
+  vi.stubGlobal("useI18n", () => ({
+    t: (key: string, params?: { count?: number }) =>
+      params ? `${key}:${params.count}` : key,
+  }));
+  const { default: LiveHoldBanner } = await import(
+    "../layers/dms-ui/app/build/components/table-view/LiveHoldBanner.vue"
+  );
+  const onShow = vi.fn();
+  const host = document.createElement("div");
+  app = createApp({
+    render: () => h(LiveHoldBanner, { count: 3, onShow }),
+  });
+  app.component("UIcon", () => h("i"));
+  app.component("UButton", (props: { label: string }, { attrs }) =>
+    h("button", attrs, props.label),
+  );
+  app.mount(host);
+
+  expect(host.textContent).toContain("dms.live.new_rows:3");
+  host.querySelector("button")?.click();
+  expect(onShow).toHaveBeenCalledTimes(1);
+});

package/frontend-vue/tests/live-toggle.test.ts

@@ -0,0 +1,162 @@
+// @vitest-environment jsdom
+/**
+ * The LiveToggle block: Direct / Pause as a two-segment toggle, "updated N s
+ * ago" counted every second in the browser, L switching the page outside a
+ * text field, and nothing at all on a page without `live`.
+ */
+import { createApp, h, nextTick, type App } from "vue";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { defineShortcuts } from "@nuxt/ui/runtime/composables/defineShortcuts.js";
+import {
+  createPageLiveController,
+  type PageLiveController,
+} from "../layers/dms-ui/app/build/composables/live/pageLiveController";
+import { setCurrentPageLive } from "../layers/dms-ui/app/build/composables/live/currentPageLive";
+import { formatElapsed } from "../layers/dms-ui/app/build/composables/live/formatElapsed";
+
+let app: App | undefined;
+let host: HTMLDivElement;
+let live: PageLiveController | undefined;
+
+const t = (key: string, params?: { count?: number }) =>
+  params?.count === undefined ? key : `${key}:${params.count}`;
+
+async function createToggle(
+  target: HTMLElement,
+  props: Record<string, unknown> = {},
+): Promise<App> {
+  const { default: LiveToggleBlock } = await import(
+    "../layers/dms-ui/app/components/blocks/LiveToggleBlock.vue"
+  );
+  const toggle = createApp({
+    render: () =>
+      h(LiveToggleBlock, { componentId: "live", pageId: "api.logs", ...props }),
+  });
+  toggle.component("UIcon", () => h("i"));
+  toggle.mount(target);
+  await nextTick();
+  return toggle;
+}
+
+async function mountToggle(props: Record<string, unknown> = {}) {
+  app = await createToggle(host, props);
+}
+
+const segment = (value: string) =>
+  host.querySelector<HTMLButtonElement>(
+    `[role="radio"][data-value="${value}"]`,
+  ) ??
+  [...host.querySelectorAll<HTMLButtonElement>('[role="radio"]')].find(
+    (button) => button.textContent?.includes(`dms.live.${value}`),
+  );
+
+const pressL = (target: EventTarget = document) =>
+  target.dispatchEvent(
+    new KeyboardEvent("keydown", { key: "l", bubbles: true }),
+  );
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  vi.stubGlobal("useI18n", () => ({ t }));
+  vi.stubGlobal("defineShortcuts", defineShortcuts);
+  host = document.createElement("div");
+  document.body.append(host);
+  window.localStorage.clear();
+});
+
+afterEach(() => {
+  app?.unmount();
+  app = undefined;
+  host.remove();
+  live?.dispose();
+  live = undefined;
+  setCurrentPageLive(null);
+  vi.unstubAllGlobals();
+  vi.useRealTimers();
+});
+
+function installLive() {
+  live = createPageLiveController("api.logs", { maxRate: 2 });
+  setCurrentPageLive(live);
+  return live;
+}
+
+it("renders nothing on a page without live", async () => {
+  await mountToggle();
+  expect(host.querySelector(".dms-live-toggle")).toBeNull();
+});
+
+it("shows the page's state and switches it", async () => {
+  const controller = installLive();
+  await mountToggle();
+  expect(segment("direct")?.getAttribute("aria-checked")).toBe("true");
+
+  segment("pause")?.click();
+  await nextTick();
+  expect(controller.isPaused.value).toBe(true);
+  expect(segment("pause")?.getAttribute("aria-checked")).toBe("true");
+
+  segment("direct")?.click();
+  await nextTick();
+  expect(controller.isPaused.value).toBe(false);
+});
+
+it("counts the seconds since the last update, every second", async () => {
+  installLive();
+  await mountToggle();
+  expect(host.textContent).toContain("dms.live.updated_seconds:0");
+
+  vi.advanceTimersByTime(3000);
+  await nextTick();
+  expect(host.textContent).toContain("dms.live.updated_seconds:3");
+
+  vi.advanceTimersByTime(60_000);
+  await nextTick();
+  expect(host.textContent).toContain("dms.live.updated_minutes:1");
+});
+
+it("hides the time when asked to", async () => {
+  installLive();
+  await mountToggle({ showUpdatedAt: false });
+  expect(host.textContent).not.toContain("dms.live.updated");
+});
+
+it("switches on L, but not while typing", async () => {
+  const controller = installLive();
+  await mountToggle();
+
+  pressL();
+  expect(controller.isPaused.value).toBe(true);
+  pressL();
+  expect(controller.isPaused.value).toBe(false);
+
+  const field = document.createElement("input");
+  document.body.append(field);
+  field.focus();
+  await nextTick();
+  pressL(field);
+  expect(controller.isPaused.value).toBe(false);
+  field.remove();
+});
+
+it("reads elapsed times in seconds, minutes, then hours", () => {
+  expect(formatElapsed(-5)).toEqual({ unit: "seconds", count: 0 });
+  expect(formatElapsed(59_999)).toEqual({ unit: "seconds", count: 59 });
+  expect(formatElapsed(60_000)).toEqual({ unit: "minutes", count: 1 });
+  expect(formatElapsed(2 * 3_600_000 + 1)).toEqual({ unit: "hours", count: 2 });
+});
+
+it("switches once per L with two toggles on the page", async () => {
+  const controller = installLive();
+  await mountToggle();
+  const second = await createToggle(document.createElement("div"));
+
+  pressL();
+  expect(controller.isPaused.value).toBe(true);
+
+  app?.unmount();
+  app = undefined;
+  pressL();
+  expect(controller.isPaused.value).toBe(false);
+  second.unmount();
+});

package/frontend-vue/tests/page-live-gate.test.ts

@@ -0,0 +1,241 @@
+// @vitest-environment jsdom
+/**
+ * The Direct / Pause valve of a page declared with `live`: in Direct a block
+ * refetches on its events at most once per `maxRate` (the last event of a
+ * burst included), paused it requests nothing and counts what it missed, and
+ * resuming refetches once each block that missed something. The choice is
+ * kept per page in the browser, and a page without `live` is untouched.
+ */
+import { createApp, defineComponent, h } from "vue";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import type { RealtimeTopicHandler } from "../layers/dms-core/app/composables/realtime/useUserRealtime";
+import {
+  refreshLivePageBlocks,
+  refreshPageBlocks,
+} from "../layers/dms-ui/app/utils/blockRefresh";
+import {
+  createPageLiveController,
+  type PageLiveController,
+} from "../layers/dms-ui/app/build/composables/live/pageLiveController";
+import { setCurrentPageLive } from "../layers/dms-ui/app/build/composables/live/currentPageLive";
+import { usePageLive } from "../layers/dms-ui/app/composables/live/usePageLive";
+
+const topicHandlers = new Map<string, RealtimeTopicHandler[]>();
+
+vi.mock("../layers/dms-core/app/composables/realtime/useRealtimeTopic", () => ({
+  useRealtimeTopic: (topic: string, handler: RealtimeTopicHandler) => {
+    topicHandlers.set(topic, [...(topicHandlers.get(topic) ?? []), handler]);
+  },
+}));
+
+const { useRefreshTriggers } = await import(
+  "../layers/dms-ui/app/build/composables/blocks/useRefreshTriggers"
+);
+
+const PAGE = "monitoring.logs";
+const TOPIC = "api:requests";
+const MAX_RATE_SECONDS = 5;
+const MAX_RATE_MS = MAX_RATE_SECONDS * 1000;
+const mounted: Array<{ unmount: () => void }> = [];
+const controllers: PageLiveController[] = [];
+
+function publish(topic = TOPIC) {
+  const event = { topic, type: "request", ts: Date.now() };
+  for (const handler of topicHandlers.get(topic) ?? []) handler(event);
+}
+
+function mountBlock(topic: string | undefined = TOPIC) {
+  const onRefresh = vi.fn();
+  const app = createApp(
+    defineComponent({
+      setup() {
+        useRefreshTriggers(topic, onRefresh);
+        return () => h("div");
+      },
+    }),
+  );
+  app.mount(document.createElement("div"));
+  mounted.push(app);
+  return onRefresh;
+}
+
+function installLive(maxRate?: number): PageLiveController {
+  const controller = createPageLiveController(PAGE, { maxRate });
+  controllers.push(controller);
+  setCurrentPageLive(controller);
+  return controller;
+}
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  topicHandlers.clear();
+  window.localStorage.clear();
+});
+
+afterEach(() => {
+  mounted.splice(0).forEach((app) => app.unmount());
+  controllers.splice(0).forEach((controller) => controller.dispose());
+  setCurrentPageLive(null);
+  vi.useRealTimers();
+});
+
+it("leaves a page without live as it was: every event refetches", () => {
+  const onRefresh = mountBlock();
+  publish();
+  publish();
+  refreshPageBlocks();
+  refreshLivePageBlocks();
+  expect(onRefresh).toHaveBeenCalledTimes(4);
+  expect(usePageLive().isEnabled.value).toBe(false);
+  expect(usePageLive().isLive.value).toBe(true);
+});
+
+it("refetches on each event in Direct when no maxRate is set", () => {
+  installLive();
+  const onRefresh = mountBlock();
+  publish();
+  publish();
+  expect(onRefresh).toHaveBeenCalledTimes(2);
+});
+
+it("in Direct, refetches at most once per maxRate, the last event trailing", () => {
+  installLive(MAX_RATE_SECONDS);
+  const onRefresh = mountBlock();
+
+  publish();
+  expect(onRefresh).toHaveBeenCalledTimes(1);
+
+  vi.advanceTimersByTime(1000);
+  publish();
+  vi.advanceTimersByTime(1000);
+  publish();
+  expect(onRefresh).toHaveBeenCalledTimes(1);
+
+  vi.advanceTimersByTime(MAX_RATE_MS - 2000);
+  expect(onRefresh).toHaveBeenCalledTimes(2);
+
+  vi.advanceTimersByTime(MAX_RATE_MS * 2);
+  expect(onRefresh).toHaveBeenCalledTimes(2);
+});
+
+it("caps each block on its own", () => {
+  installLive(MAX_RATE_SECONDS);
+  const first = mountBlock();
+  const second = mountBlock("api:routes");
+  publish();
+  publish("api:routes");
+  expect(first).toHaveBeenCalledTimes(1);
+  expect(second).toHaveBeenCalledTimes(1);
+});
+
+it("in Pause, requests nothing and counts the events per block", () => {
+  const live = installLive();
+  const logs = mountBlock();
+  const chart = mountBlock();
+  const routes = mountBlock("api:routes");
+  live.pause();
+
+  publish();
+  publish();
+  refreshLivePageBlocks();
+  vi.advanceTimersByTime(60_000);
+
+  expect(logs).not.toHaveBeenCalled();
+  expect(chart).not.toHaveBeenCalled();
+  expect(routes).not.toHaveBeenCalled();
+  // Two events and a live refresh, each counted once for the page although
+  // two blocks (three for the refresh) received them.
+  expect(live.missedCount.value).toBe(3);
+  expect(usePageLive().isPaused.value).toBe(true);
+});
+
+it("refreshes on a user's refreshPageBlocks even while paused", () => {
+  const live = installLive(MAX_RATE_SECONDS);
+  const onRefresh = mountBlock();
+  live.pause();
+  publish();
+  expect(live.missedCount.value).toBe(1);
+
+  refreshPageBlocks();
+  expect(onRefresh).toHaveBeenCalledTimes(1);
+  expect(live.isPaused.value).toBe(true);
+
+  // Read by the user, the block has nothing left to read on resume.
+  live.resume();
+  expect(onRefresh).toHaveBeenCalledTimes(1);
+});
+
+it("caps a live refresh like a realtime event in Direct", () => {
+  installLive(MAX_RATE_SECONDS);
+  const onRefresh = mountBlock(undefined);
+  refreshLivePageBlocks();
+  refreshLivePageBlocks();
+  expect(onRefresh).toHaveBeenCalledTimes(1);
+  vi.advanceTimersByTime(MAX_RATE_MS);
+  expect(onRefresh).toHaveBeenCalledTimes(2);
+});
+
+it("on resume, refetches once each block that missed an event", () => {
+  const live = installLive(MAX_RATE_SECONDS);
+  const logs = mountBlock();
+  const routes = mountBlock("api:routes");
+  publish("api:routes");
+  routes.mockClear();
+  live.pause();
+
+  publish();
+  publish();
+  publish();
+  live.resume();
+
+  expect(logs).toHaveBeenCalledTimes(1);
+  expect(routes).not.toHaveBeenCalled();
+  expect(live.missedCount.value).toBe(0);
+  vi.advanceTimersByTime(MAX_RATE_MS);
+  expect(logs).toHaveBeenCalledTimes(1);
+});
+
+it("keeps a trailing refetch the pause interrupted for the resume", () => {
+  const live = installLive(MAX_RATE_SECONDS);
+  const onRefresh = mountBlock();
+  publish();
+  publish();
+  live.pause();
+  vi.advanceTimersByTime(MAX_RATE_MS);
+  expect(onRefresh).toHaveBeenCalledTimes(1);
+  expect(live.missedCount.value).toBe(1);
+
+  live.resume();
+  expect(onRefresh).toHaveBeenCalledTimes(2);
+});
+
+it("dates the page's last update from its refetches", () => {
+  const live = installLive();
+  mountBlock();
+  const before = live.lastUpdatedAt.value;
+  vi.advanceTimersByTime(4000);
+  publish();
+  expect(live.lastUpdatedAt.value).toBe(before + 4000);
+});
+
+it("remembers the choice per page in the browser", () => {
+  installLive().pause();
+  expect(createPageLiveController(PAGE, {}).isPaused.value).toBe(true);
+  expect(createPageLiveController("monitoring.routes", {}).isPaused.value).toBe(
+    false,
+  );
+
+  createPageLiveController(PAGE, {}).resume();
+  expect(createPageLiveController(PAGE, {}).isPaused.value).toBe(false);
+});
+
+it("follows the page through usePageLive", () => {
+  installLive();
+  const state = usePageLive();
+  expect(state.isEnabled.value).toBe(true);
+  state.pause();
+  expect(state.isPaused.value).toBe(true);
+  expect(state.isLive.value).toBe(false);
+  state.toggle();
+  expect(state.isPaused.value).toBe(false);
+});

package/frontend-vue/tests/period-live-pause.test.ts

@@ -0,0 +1,120 @@
+// @vitest-environment jsdom
+/**
+ * A rolling period (`last-hour`, `last-24h`) slides every minute, and every
+ * block reading it refetches. On a paused live page the period holds still,
+ * so nothing refetches on the clock; a period the user picks still applies at
+ * once, and resuming catches the skipped minutes up in one read.
+ */
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { createApp, defineComponent, h, ref } from "vue";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { createPageLiveController } from "../layers/dms-ui/app/build/composables/live/pageLiveController";
+import { setCurrentPageLive } from "../layers/dms-ui/app/build/composables/live/currentPageLive";
+import { usePageLive } from "../layers/dms-ui/app/composables/live/usePageLive";
+import {
+  usePeriod,
+  type UsePeriodReturn,
+} from "../layers/dms-core/app/composables/period/usePeriod";
+import { registerPeriodScope } from "../layers/dms-core/app/composables/period/usePeriodScope";
+
+const requests: string[] = [];
+
+vi.stubGlobal("useAuthFetch", () => ({
+  $authFetch: async (url: string) => {
+    requests.push(url);
+    return { value: requests.length };
+  },
+}));
+vi.stubGlobal("useDmsRoute", () => ({ query: {} }));
+vi.stubGlobal("ref", ref);
+
+const { useChartFetch } = await import(
+  "../layers/dms-ui/app/composables/chart/useChartFetch"
+);
+
+const SCOPE = "live-period";
+const MINUTE_MS = 60_000;
+const apps: Array<() => void> = [];
+
+function mountPageWithChart(): UsePeriodReturn {
+  let period: UsePeriodReturn | undefined;
+  const app = createApp(
+    defineComponent({
+      setup() {
+        const { isPaused } = usePageLive();
+        // As the PeriodSelector wires it.
+        period = usePeriod({
+          defaultPreset: "last-hour",
+          holdClock: () => isPaused.value,
+        });
+        registerPeriodScope(SCOPE, period.state);
+        useChartFetch({ fetchUrl: "/api/chart", periodScope: SCOPE });
+        return () => h("div");
+      },
+    }),
+  );
+  app.mount(document.createElement("div"));
+  apps.push(() => app.unmount());
+  return period!;
+}
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  requests.length = 0;
+  window.localStorage.clear();
+});
+
+afterEach(() => {
+  apps.splice(0).forEach((unmount) => unmount());
+  setCurrentPageLive(null);
+  vi.useRealTimers();
+});
+
+it("slides and refetches every minute in Direct", async () => {
+  setCurrentPageLive(createPageLiveController("api.overview", {}));
+  mountPageWithChart();
+  await vi.advanceTimersByTimeAsync(1000);
+  expect(requests).toHaveLength(1);
+
+  await vi.advanceTimersByTimeAsync(2 * MINUTE_MS);
+  expect(requests).toHaveLength(3);
+});
+
+it("holds the period while paused, but follows the user's pick", async () => {
+  const live = createPageLiveController("api.overview", {});
+  setCurrentPageLive(live);
+  const period = mountPageWithChart();
+  await vi.advanceTimersByTimeAsync(1000);
+  expect(requests).toHaveLength(1);
+
+  live.pause();
+  const heldKey = period.state.value.key;
+  await vi.advanceTimersByTimeAsync(3 * MINUTE_MS);
+  expect(requests).toHaveLength(1);
+  expect(period.state.value.key).toBe(heldKey);
+
+  period.setPreset("last-24h");
+  await vi.advanceTimersByTimeAsync(1000);
+  expect(requests).toHaveLength(2);
+  expect(requests[1]).toContain("preset=last-24h");
+
+  await vi.advanceTimersByTimeAsync(2 * MINUTE_MS);
+  expect(requests).toHaveLength(2);
+
+  live.resume();
+  await vi.advanceTimersByTimeAsync(1000);
+  expect(requests).toHaveLength(3);
+  expect(period.state.value.key).not.toBe(heldKey);
+});
+
+it("holds the selector's period on the page's pause", () => {
+  const source = readFileSync(
+    resolve(
+      __dirname,
+      "../layers/dms-ui/app/components/period/PeriodSelector.vue",
+    ),
+    "utf8",
+  );
+  expect(source).toContain("holdClock: () => isPagePaused.value,");
+});