feat(webapp): default the queue metrics period to 1 hour and remember it

The Queues list and queue detail pages opened on a 1 day window and reset to
it on every navigation. They now default to 1 hour, and the last period picked
is kept in a cookie the loaders read, so the first render is already on the
remembered window instead of painting the default and re-fetching.

Both pages resolve the period once (URL param, then absolute range, then the
remembered default) and pass it down, so the picker and every chart query
agree on one value. Absolute from/to ranges are not remembered.

Author: ericallam

.server-changes/queue-metrics-remember-period.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+The Queues pages now open on the last hour instead of the last day, and remember the time period you picked when you navigate between queues or reload the page.

apps/webapp/app/components/queues/QueueMetricCards.tsx

@@ -15,6 +15,7 @@ import { Header3 } from "~/components/primitives/Headers";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { InfoIconTooltip } from "~/components/primitives/Tooltip";
 import { useSearchParams } from "~/hooks/useSearchParam";
+import { QUEUE_METRICS_DEFAULT_PERIOD } from "~/components/queues/queueMetricsPeriod";
 import { cn } from "~/utils/cn";
 import { formatNumberCompact } from "~/utils/numberFormatter";
 
@@ -34,8 +35,6 @@ export const QUEUE_METRIC_COLORS = {
   ckWait: "#F59E0B",
 };
 
-export const QUEUE_METRICS_DEFAULT_PERIOD = "1d";
-
 export type QueueMetricIds = {
   organizationId: string;
   projectId: string;

apps/webapp/app/components/queues/queueMetricsPeriod.ts

@@ -0,0 +1,70 @@
+import { useEffect } from "react";
+
+/**
+ * The time window the queue-metrics pages (queues list + queue detail) use when the URL carries
+ * no explicit period, and the memory that makes the user's last pick stick.
+ *
+ * The last period picked is stored in a cookie rather than localStorage so the loaders can read it
+ * and the first render already uses the remembered window (with localStorage the page would paint
+ * the default and then re-fetch). Absolute from/to ranges are never remembered: they'd pin later
+ * visits to a window that goes stale.
+ */
+export const QUEUE_METRICS_DEFAULT_PERIOD = "1h";
+
+const COOKIE_NAME = "queueMetricsPeriod";
+const COOKIE_MAX_AGE_SECONDS = 60 * 60 * 24 * 365;
+
+/** The shape TimeFilter writes: a count plus a minute/hour/day unit (presets and custom durations). */
+const PERIOD_PATTERN = /^\d{1,4}[mhd]$/;
+
+function isPeriod(value: string | undefined | null): value is string {
+  return typeof value === "string" && PERIOD_PATTERN.test(value);
+}
+
+/** Loader side: the remembered period, falling back to the default when nothing usable is stored. */
+export function queueMetricsPeriodFromRequest(request: Request): string {
+  const header = request.headers.get("cookie");
+  if (!header) return QUEUE_METRICS_DEFAULT_PERIOD;
+
+  for (const part of header.split(";")) {
+    const separator = part.indexOf("=");
+    if (separator === -1) continue;
+    if (part.slice(0, separator).trim() !== COOKIE_NAME) continue;
+    const value = part.slice(separator + 1).trim();
+    return isPeriod(value) ? value : QUEUE_METRICS_DEFAULT_PERIOD;
+  }
+
+  return QUEUE_METRICS_DEFAULT_PERIOD;
+}
+
+/**
+ * Remember the period currently in the URL so the next visit to a queue-metrics page opens on it.
+ * Pass the raw `period` search param: an absent one (the page is on its default) or an absolute
+ * from/to range leaves the stored value alone.
+ */
+export function useRememberQueueMetricsPeriod(period: string | undefined) {
+  useEffect(() => {
+    if (!isPeriod(period)) return;
+    document.cookie = `${COOKIE_NAME}=${period}; path=/; max-age=${COOKIE_MAX_AGE_SECONDS}; samesite=lax`;
+  }, [period]);
+}
+
+/**
+ * The window the page should show: an explicit period wins, an absolute range means "no period",
+ * and everything else falls back to the remembered default the loader resolved.
+ */
+export function resolveQueueMetricsPeriod({
+  period,
+  from,
+  to,
+  defaultPeriod,
+}: {
+  period: string | undefined;
+  from: string | undefined;
+  to: string | undefined;
+  defaultPeriod: string;
+}): string | null {
+  if (period) return period;
+  if (from || to) return null;
+  return defaultPeriod;
+}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx

@@ -102,6 +102,12 @@ import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
 import { BigNumber } from "~/components/metrics/BigNumber";
 import { canAccessQueueMetricsUi } from "~/v3/canAccessQueueMetricsUi.server";
 import { QueueAllocationPresenter } from "~/presenters/v3/QueueAllocationPresenter.server";
+import {
+  QUEUE_METRICS_DEFAULT_PERIOD,
+  queueMetricsPeriodFromRequest,
+  resolveQueueMetricsPeriod,
+  useRememberQueueMetricsPeriod,
+} from "~/components/queues/queueMetricsPeriod";
 
 const SearchParamsSchema = z.object({
   query: z.string().optional(),
@@ -112,8 +118,6 @@ const SearchParamsSchema = z.object({
   sort: z.enum(["busiest", "queued", "name"]).optional(),
 });
 
-const QUEUE_METRICS_DEFAULT_PERIOD = "1d";
-
 // The live "Queued" / "Running" header blocks poll ClickHouse on a short cadence so they stay
 // current after first paint. They read the env-wide gauges from env_metrics (the env-level rollup
 // of queue_metrics, cheapest for a dimension-free query), always over a fixed 15m window regardless
@@ -143,6 +147,8 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     Object.fromEntries(url.searchParams)
   );
 
+  const defaultPeriod = queueMetricsPeriodFromRequest(request);
+
   const project = await findProjectBySlug(organizationSlug, projectParam, userId);
   if (!project) {
     throw new Response(undefined, {
@@ -198,7 +204,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
           period,
           from: parseFiniteInt(from),
           to: parseFiniteInt(to),
-          defaultPeriod: QUEUE_METRICS_DEFAULT_PERIOD,
+          defaultPeriod,
         });
         const queueMetrics =
           queueNames.length > 0
@@ -239,6 +245,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
       metrics,
       allocation,
       queueMetricsUiEnabled,
+      defaultPeriod,
     });
   } catch (error) {
     console.error(error);
@@ -362,6 +369,7 @@ function QueuesWithMetricsView() {
     autoReloadPollIntervalMs,
     metrics,
     allocation,
+    defaultPeriod,
   } = useTypedLoaderData<typeof loader>();
 
   const metricsByQueue = metrics?.byQueue ?? {};
@@ -385,10 +393,16 @@ function QueuesWithMetricsView() {
   // The header tiles fetch client-side with the same period/from/to the TimeFilter writes.
   const { value } = useSearchParams();
   const timeRange = {
-    period: value("period") ?? null,
+    period: resolveQueueMetricsPeriod({
+      period: value("period"),
+      from: value("from"),
+      to: value("to"),
+      defaultPeriod,
+    }),
     from: value("from") ?? null,
     to: value("to") ?? null,
   };
+  useRememberQueueMetricsPeriod(value("period"));
 
   useAutoRevalidate({ interval: autoReloadPollIntervalMs, onFocus: true });
 
@@ -473,7 +487,7 @@ function QueuesWithMetricsView() {
             </div>
             <div className="flex items-center gap-1.5">
               <TimeFilter
-                defaultPeriod={QUEUE_METRICS_DEFAULT_PERIOD}
+                defaultPeriod={defaultPeriod}
                 labelName="Period"
                 maxPeriodDays={maxPeriodDays}
                 shortcut={{ key: "d" }}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues_.$queueParam/route.tsx

@@ -22,7 +22,6 @@ import { ChartSyncProvider } from "~/components/primitives/charts/ChartSyncConte
 import { useZoomToTimeFilter } from "~/hooks/useZoomToTimeFilter";
 import {
   QUEUE_METRIC_COLORS as COLORS,
-  QUEUE_METRICS_DEFAULT_PERIOD,
   QueueMetricChartCard as QueueDetailChartCard,
   type QueueMetricIds as Ids,
   type QueueMetricTimeRange as TimeRangeParams,
@@ -67,6 +66,11 @@ import {
   QueueOverrideConcurrencyButton,
   QueuePauseResumeButton,
 } from "~/components/queues/QueueControls";
+import {
+  queueMetricsPeriodFromRequest,
+  resolveQueueMetricsPeriod,
+  useRememberQueueMetricsPeriod,
+} from "~/components/queues/queueMetricsPeriod";
 import { LinkButton } from "~/components/primitives/Buttons";
 import { RunsIcon } from "~/assets/icons/RunsIcon";
 import { InfoPanel } from "~/components/primitives/InfoPanel";
@@ -134,6 +138,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     oldestQueuedAt: oldestQueuedAt ?? null,
     loadedAt: Date.now(),
     backPath: url.pathname.replace(/\/[^/]+$/, ""),
+    defaultPeriod: queueMetricsPeriodFromRequest(request),
     ids: {
       organizationId: environment.organizationId,
       projectId: environment.projectId,
@@ -210,6 +215,7 @@ export default function Page() {
     loadedAt,
     backPath,
     ids,
+    defaultPeriod,
   } = useTypedLoaderData<typeof loader>();
   const plan = useCurrentPlan();
   // Queue metrics are retained for 30 days in ClickHouse, so cap the picker there even for
@@ -219,10 +225,16 @@ export default function Page() {
 
   const { value, replace } = useSearchParams();
   const timeRange: TimeRangeParams = {
-    period: value("period") ?? null,
+    period: resolveQueueMetricsPeriod({
+      period: value("period"),
+      from: value("from"),
+      to: value("to"),
+      defaultPeriod,
+    }),
     from: value("from") ?? null,
     to: value("to") ?? null,
   };
+  useRememberQueueMetricsPeriod(value("period"));
 
   // The Concurrency keys tab exists only for queues with key activity: live keys in the
   // ckIndex, or nonzero CK history in the selected range (one cached scalar query decides).
@@ -283,7 +295,7 @@ export default function Page() {
               />
             ) : null}
             <TimeFilter
-              defaultPeriod={QUEUE_METRICS_DEFAULT_PERIOD}
+              defaultPeriod={defaultPeriod}
               labelName="Period"
               maxPeriodDays={maxPeriodDays}
               shortcut={{ key: "d" }}

apps/webapp/app/routes/resources.queues.concurrency-keys.ts

@@ -1,6 +1,7 @@
 import { type ActionFunctionArgs, json } from "@remix-run/server-runtime";
 import { z } from "zod";
 import { timeFilterFromTo } from "~/components/runs/v3/SharedFilters";
+import { QUEUE_METRICS_DEFAULT_PERIOD } from "~/components/queues/queueMetricsPeriod";
 import { clickhouseFactory } from "~/services/clickhouse/clickhouseFactoryInstance.server";
 import { findEnvironmentById, hasAccessToEnvironment } from "~/models/runtimeEnvironment.server";
 import { requireUserId } from "~/services/session.server";
@@ -13,8 +14,7 @@ import { engine } from "~/v3/runEngine.server";
 // Redis (O(page), independent of total key cardinality). This replaces the old top-50 cap.
 export const CONCURRENCY_KEYS_PER_PAGE = 25;
 
-// Matches QUEUE_METRICS_DEFAULT_PERIOD (the detail page's TimeFilter default).
-const DEFAULT_PERIOD = "1d";
+const DEFAULT_PERIOD = QUEUE_METRICS_DEFAULT_PERIOD;
 
 const Body = z.object({
   organizationId: z.string(),