feat(webapp,clickhouse): standard time filter for queue metrics pages

The queues list and queue detail pages now use the shared TimeFilter (any preset period or a custom date range) and everything on the page follows it: header tiles, per queue metric columns, charts, and stats. The custom period buttons, hand rolled chart cards, and duplicated metric fetch loops are replaced by the ChartCard and Chart primitives, UsageSparkline, and a shared useMetricResourceQuery hook. The ClickHouse list queries take an explicit end bound so fixed ranges query only their window.

Author: ericallam

apps/webapp/app/hooks/useMetricResourceQuery.ts

@@ -0,0 +1,109 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useInterval } from "./useInterval";
+
+export type MetricResourceRow = Record<string, number | string | null>;
+
+type MetricResourceResponse =
+  | { success: true; data: { rows: MetricResourceRow[] } }
+  | { success: false; error: string };
+
+export type MetricResourceTimeRange = {
+  period: string | null;
+  from: string | null;
+  to: string | null;
+};
+
+export type MetricResourceQueryOptions = {
+  organizationId: string;
+  projectId: string;
+  environmentId: string;
+  timeRange: MetricResourceTimeRange;
+  defaultPeriod: string;
+  queues?: string[];
+  fillGaps?: boolean;
+  refreshIntervalMs?: number;
+};
+
+/**
+ * Client-fetch a TRQL query from the metric resource route (like the dashboard
+ * widgets): own loading state, interval + on-focus refresh, abort on change/unmount.
+ */
+export function useMetricResourceQuery(query: string, opts: MetricResourceQueryOptions) {
+  const [rows, setRows] = useState<MetricResourceRow[] | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [failed, setFailed] = useState(false);
+  const abortRef = useRef<AbortController | null>(null);
+
+  const {
+    organizationId,
+    projectId,
+    environmentId,
+    defaultPeriod,
+    fillGaps,
+    refreshIntervalMs = 60_000,
+  } = opts;
+  const { period, from, to } = opts.timeRange;
+  const queuesKey = opts.queues && opts.queues.length > 0 ? opts.queues.join(",") : undefined;
+
+  const load = useCallback(() => {
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
+    setIsLoading(true);
+    fetch("/resources/metric", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        query,
+        scope: "environment",
+        period: period ?? (from || to ? null : defaultPeriod),
+        from,
+        to,
+        fillGaps: !!fillGaps,
+        organizationId,
+        projectId,
+        environmentId,
+        ...(queuesKey !== undefined ? { queues: queuesKey.split(",") } : {}),
+      }),
+      signal: controller.signal,
+    })
+      .then((res) => res.json() as Promise<MetricResourceResponse>)
+      .then((data) => {
+        if (controller.signal.aborted) return;
+        if (data.success) {
+          setRows(data.data.rows);
+          setFailed(false);
+        } else {
+          setFailed(true);
+        }
+        setIsLoading(false);
+      })
+      .catch((error) => {
+        if (error instanceof DOMException && error.name === "AbortError") return;
+        if (!controller.signal.aborted) {
+          setFailed(true);
+          setIsLoading(false);
+        }
+      });
+  }, [
+    query,
+    period,
+    from,
+    to,
+    defaultPeriod,
+    fillGaps,
+    organizationId,
+    projectId,
+    environmentId,
+    queuesKey,
+  ]);
+
+  useEffect(() => {
+    load();
+    return () => abortRef.current?.abort();
+  }, [load]);
+
+  useInterval({ interval: refreshIntervalMs, onLoad: false, onFocus: true, callback: load });
+
+  return { rows: rows ?? [], isLoading, showLoading: isLoading && !rows, failed };
+}

apps/webapp/app/presenters/v3/QueueMetricsPresenter.server.ts

@@ -2,18 +2,6 @@ import { type AuthenticatedEnvironment } from "~/services/apiAuth.server";
 import { clickhouseFactory } from "~/services/clickhouse/clickhouseFactoryInstance.server";
 import { logger } from "~/services/logger.server";
 
-export const QUEUE_METRICS_WINDOWS = {
-  "1h": 3600,
-  "6h": 21600,
-  "24h": 86400,
-} as const;
-
-export type QueueMetricsWindow = keyof typeof QUEUE_METRICS_WINDOWS;
-
-export function isQueueMetricsWindow(value: unknown): value is QueueMetricsWindow {
-  return typeof value === "string" && value in QUEUE_METRICS_WINDOWS;
-}
-
 export type QueueListMetric = {
   p50WaitMs: number | null;
   p95WaitMs: number | null;
@@ -23,7 +11,6 @@ export type QueueListMetric = {
 };
 
 export type QueueListMetrics = {
-  window: QueueMetricsWindow;
   bucketStartMs: number;
   bucketIntervalMs: number;
   byQueue: Map<string, QueueListMetric>;
@@ -41,30 +28,30 @@ function finiteOrNull(value: number): number | null {
 
 export class QueueMetricsPresenter {
   /**
-   * Recent per-queue metrics for a fixed set of queues (the visible list page),
+   * Per-queue metrics over a time range for a fixed set of queues (the visible list page),
    * scoped to one ClickHouse query window so cost is independent of total queue count.
    * Degrades to an empty map if ClickHouse is unavailable so the live list still renders.
    */
   public async getQueueListMetrics({
     environment,
     queueNames,
-    window,
+    from,
+    to,
   }: {
     environment: AuthenticatedEnvironment;
     queueNames: string[];
-    window: QueueMetricsWindow;
+    from: Date;
+    to: Date;
   }): Promise<QueueListMetrics> {
-    const windowSeconds = QUEUE_METRICS_WINDOWS[window];
-    const bucketSeconds = Math.max(60, Math.round(windowSeconds / SPARKLINE_POINTS));
-    const numBuckets = Math.ceil(windowSeconds / bucketSeconds);
-    const nowSeconds = Math.floor(Date.now() / 1000);
+    const rangeSeconds = Math.max(60, Math.round((to.getTime() - from.getTime()) / 1000));
+    const bucketSeconds = Math.max(60, Math.round(rangeSeconds / SPARKLINE_POINTS));
+    const numBuckets = Math.max(1, Math.ceil(rangeSeconds / bucketSeconds));
     const gridStartSeconds =
-      Math.floor((nowSeconds - windowSeconds) / bucketSeconds) * bucketSeconds;
+      Math.floor(Math.floor(from.getTime() / 1000) / bucketSeconds) * bucketSeconds;
     const bucketStartMs = gridStartSeconds * 1000;
     const bucketIntervalMs = bucketSeconds * 1000;
 
     const empty: QueueListMetrics = {
-      window,
       bucketStartMs,
       bucketIntervalMs,
       byQueue: new Map(),
@@ -86,6 +73,7 @@ export class QueueMetricsPresenter {
         environmentId: environment.id,
         queueNames,
         startTime: formatClickhouseDateTime(new Date(bucketStartMs)),
+        endTime: formatClickhouseDateTime(to),
       };
 
       const [summaryResult, sparklineResult] = await Promise.all([
@@ -137,7 +125,7 @@ export class QueueMetricsPresenter {
         });
       }
 
-      return { window, bucketStartMs, bucketIntervalMs, byQueue };
+      return { bucketStartMs, bucketIntervalMs, byQueue };
     } catch (error) {
       logger.warn("QueueMetricsPresenter: failed to load queue metrics", {
         error: error instanceof Error ? error.message : String(error),