fix(webapp): hold queue metric windows inside the plan query period

The queue-metric queries that go straight to ClickHouse (the queues list table
and the concurrency-keys endpoint) never applied the org's query-period limit,
so a hand-typed `?period=` could read further back than the plan allows. Every
query through executeQuery is already clipped this way; both of these now clip
with the same limit, capped at the 30 day retention.

A remembered period longer than the plan allows is clamped to the plan maximum,
and the picker now renders the resolved window rather than the raw search param,
so the label can no longer disagree with the data on screen.

The plan cap is resolved once per load and handed to the page, replacing the
copy each route derived from the client-side subscription.

Author: ericallam

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

@@ -0,0 +1,16 @@
+import { getLimit } from "~/services/platform.v3.server";
+import { QUEUE_METRICS_RETENTION_DAYS } from "./queueMetricsPeriod";
+
+/**
+ * The furthest back this org can query queue metrics: their plan's query period, capped at the
+ * 30 day retention. Same limit `executeQuery` enforces, so the queue-metric queries that bypass it
+ * and go straight to ClickHouse stay in step with the ones that don't.
+ */
+export async function queueMetricsMaxPeriodDays(organizationId: string): Promise<number> {
+  const planPeriodDays = await getLimit(
+    organizationId,
+    "queryPeriodDays",
+    QUEUE_METRICS_RETENTION_DAYS
+  );
+  return Math.min(planPeriodDays, QUEUE_METRICS_RETENTION_DAYS);
+}

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

@@ -19,7 +19,10 @@ const COOKIE_MAX_AGE_SECONDS = 60 * 60 * 24 * 365;
 const PERIOD_PATTERN = /^\d{1,4}[mhd]$/;
 
 /** Queue metrics are retained for 30 days, so a longer window can only ever render empty. */
-const MAX_PERIOD_MS = 30 * 24 * 60 * 60 * 1000;
+export const QUEUE_METRICS_RETENTION_DAYS = 30;
+
+const DAY_MS = 24 * 60 * 60 * 1000;
+const MAX_PERIOD_MS = QUEUE_METRICS_RETENTION_DAYS * DAY_MS;
 
 function isPeriod(value: string | undefined | null): value is string {
   if (typeof value !== "string" || !PERIOD_PATTERN.test(value)) return false;
@@ -78,3 +81,27 @@ export function resolveQueueMetricsPeriod({
   if (from || to) return null;
   return defaultPeriod;
 }
+
+/**
+ * Hold a period inside a day budget (the org's plan query period). A remembered period longer than
+ * the plan allows becomes the plan's maximum, so the picker shows the window the data covers.
+ */
+export function clampQueueMetricsPeriod(period: string, maxPeriodDays: number): string {
+  const ms = parse(period);
+  if (typeof ms === "number" && ms > 0 && ms <= maxPeriodDays * DAY_MS) return period;
+  return `${maxPeriodDays}d`;
+}
+
+/**
+ * Pull a window forward to the earliest time the org's plan can query, the same clip `executeQuery`
+ * applies to every metric query. Queue-metric queries that go straight to ClickHouse (the queues
+ * list table, the concurrency-keys endpoint) have to apply it themselves, otherwise a hand-typed
+ * `?period=` reaches further back than the plan allows.
+ */
+export function clipQueueMetricsWindow(
+  window: { from: Date; to: Date },
+  maxPeriodDays: number
+): { from: Date; to: Date } {
+  const earliest = new Date(Date.now() - maxPeriodDays * DAY_MS);
+  return { from: window.from < earliest ? earliest : window.from, to: window.to };
+}

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

@@ -104,10 +104,13 @@ import { canAccessQueueMetricsUi } from "~/v3/canAccessQueueMetricsUi.server";
 import { QueueAllocationPresenter } from "~/presenters/v3/QueueAllocationPresenter.server";
 import {
   QUEUE_METRICS_DEFAULT_PERIOD,
+  clampQueueMetricsPeriod,
+  clipQueueMetricsWindow,
   queueMetricsPeriodFromRequest,
   resolveQueueMetricsPeriod,
   useRememberQueueMetricsPeriod,
 } from "~/components/queues/queueMetricsPeriod";
+import { queueMetricsMaxPeriodDays } from "~/components/queues/queueMetricsPeriod.server";
 
 const SearchParamsSchema = z.object({
   query: z.string().optional(),
@@ -147,8 +150,6 @@ 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, {
@@ -169,6 +170,12 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   // no metrics query fires.
   const queueMetricsUiEnabled = await canAccessQueueMetricsUi({ userId, organizationSlug });
 
+  const maxPeriodDays = await queueMetricsMaxPeriodDays(environment.organizationId);
+  const defaultPeriod = clampQueueMetricsPeriod(
+    queueMetricsPeriodFromRequest(request),
+    maxPeriodDays
+  );
+
   try {
     const queueListPresenter = new QueueListPresenter();
     const queues = await queueListPresenter.call({
@@ -200,12 +207,15 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
         const queueNames = queues.queues.map((q) =>
           q.type === "task" ? `task/${q.name}` : q.name
         );
-        const timeRange = timeFilterFromTo({
-          period: resolveQueueMetricsPeriod({ period, from, to, defaultPeriod }) ?? undefined,
-          from: parseFiniteInt(from),
-          to: parseFiniteInt(to),
-          defaultPeriod,
-        });
+        const timeRange = clipQueueMetricsWindow(
+          timeFilterFromTo({
+            period: resolveQueueMetricsPeriod({ period, from, to, defaultPeriod }) ?? undefined,
+            from: parseFiniteInt(from),
+            to: parseFiniteInt(to),
+            defaultPeriod,
+          }),
+          maxPeriodDays
+        );
         const queueMetrics =
           queueNames.length > 0
             ? await presenter.getQueueListMetrics({
@@ -246,6 +256,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
       allocation,
       queueMetricsUiEnabled,
       defaultPeriod,
+      maxPeriodDays,
     });
   } catch (error) {
     console.error(error);
@@ -370,6 +381,7 @@ function QueuesWithMetricsView() {
     metrics,
     allocation,
     defaultPeriod,
+    maxPeriodDays,
   } = useTypedLoaderData<typeof loader>();
 
   const metricsByQueue = metrics?.byQueue ?? {};
@@ -385,10 +397,6 @@ function QueuesWithMetricsView() {
   const project = useProject();
   const env = useEnvironment();
   const plan = useCurrentPlan();
-  // Queue metrics are retained for 30 days in ClickHouse, so cap the picker there even for
-  // plans whose query-period limit was raised above it — a longer window would render empty.
-  const planPeriodDays = plan?.v3Subscription?.plan?.limits?.queryPeriodDays?.number;
-  const maxPeriodDays = Math.min(planPeriodDays ?? 30, 30);
 
   // The header tiles fetch client-side with the same period/from/to the TimeFilter writes.
   const { value } = useSearchParams();
@@ -487,6 +495,7 @@ function QueuesWithMetricsView() {
             </div>
             <div className="flex items-center gap-1.5">
               <TimeFilter
+                period={timeRange.period ?? undefined}
                 defaultPeriod={defaultPeriod}
                 labelName="Period"
                 maxPeriodDays={maxPeriodDays}

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

@@ -54,7 +54,6 @@ import type {
   ConcurrencyKeyRow,
   ConcurrencyKeysResponse,
 } from "~/routes/resources.queues.concurrency-keys";
-import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
 import { canAccessQueueMetricsUi } from "~/v3/canAccessQueueMetricsUi.server";
 import { requireUserId } from "~/services/session.server";
 import { docsPath, EnvironmentParamSchema, v3RunsPath } from "~/utils/pathBuilder";
@@ -67,10 +66,12 @@ import {
   QueuePauseResumeButton,
 } from "~/components/queues/QueueControls";
 import {
+  clampQueueMetricsPeriod,
   queueMetricsPeriodFromRequest,
   resolveQueueMetricsPeriod,
   useRememberQueueMetricsPeriod,
 } from "~/components/queues/queueMetricsPeriod";
+import { queueMetricsMaxPeriodDays } from "~/components/queues/queueMetricsPeriod.server";
 import { LinkButton } from "~/components/primitives/Buttons";
 import { RunsIcon } from "~/assets/icons/RunsIcon";
 import { InfoPanel } from "~/components/primitives/InfoPanel";
@@ -110,6 +111,8 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const queue = retrieve.queue;
   const fullName = queue.type === "task" ? `task/${queue.name}` : queue.name;
 
+  const maxPeriodDays = await queueMetricsMaxPeriodDays(environment.organizationId);
+
   const [ckBreakdown, oldestQueuedAt] = await Promise.all([
     engine.concurrencyKeyBreakdown(environment, fullName, { limit: CK_LIVE_LIMIT }),
     // Enqueue time of the oldest run still waiting in the queue right now (any queue, keyed or
@@ -138,7 +141,8 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     oldestQueuedAt: oldestQueuedAt ?? null,
     loadedAt: Date.now(),
     backPath: url.pathname.replace(/\/[^/]+$/, ""),
-    defaultPeriod: queueMetricsPeriodFromRequest(request),
+    defaultPeriod: clampQueueMetricsPeriod(queueMetricsPeriodFromRequest(request), maxPeriodDays),
+    maxPeriodDays,
     ids: {
       organizationId: environment.organizationId,
       projectId: environment.projectId,
@@ -216,12 +220,8 @@ export default function Page() {
     backPath,
     ids,
     defaultPeriod,
+    maxPeriodDays,
   } = useTypedLoaderData<typeof loader>();
-  const plan = useCurrentPlan();
-  // Queue metrics are retained for 30 days in ClickHouse, so cap the picker there even for
-  // plans whose query-period limit was raised above it — a longer window would render empty.
-  const planPeriodDays = plan?.v3Subscription?.plan?.limits?.queryPeriodDays?.number;
-  const maxPeriodDays = Math.min(planPeriodDays ?? 30, 30);
 
   const { value, replace } = useSearchParams();
   const timeRange: TimeRangeParams = {
@@ -295,6 +295,7 @@ export default function Page() {
               />
             ) : null}
             <TimeFilter
+              period={timeRange.period ?? undefined}
               defaultPeriod={defaultPeriod}
               labelName="Period"
               maxPeriodDays={maxPeriodDays}

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

@@ -1,7 +1,11 @@
 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 {
+  QUEUE_METRICS_DEFAULT_PERIOD,
+  clipQueueMetricsWindow,
+} from "~/components/queues/queueMetricsPeriod";
+import { queueMetricsMaxPeriodDays } from "~/components/queues/queueMetricsPeriod.server";
 import { clickhouseFactory } from "~/services/clickhouse/clickhouseFactoryInstance.server";
 import { findEnvironmentById, hasAccessToEnvironment } from "~/models/runtimeEnvironment.server";
 import { requireUserId } from "~/services/session.server";
@@ -110,12 +114,15 @@ export const action = async ({ request }: ActionFunctionArgs) => {
     return json<ConcurrencyKeysResponse>({ success: false, error: "Not found" }, { status: 404 });
   }
 
-  const range = timeFilterFromTo({
-    period: period ?? undefined,
-    from: from ?? undefined,
-    to: to ?? undefined,
-    defaultPeriod: DEFAULT_PERIOD,
-  });
+  const range = clipQueueMetricsWindow(
+    timeFilterFromTo({
+      period: period ?? undefined,
+      from: from ?? undefined,
+      to: to ?? undefined,
+      defaultPeriod: DEFAULT_PERIOD,
+    }),
+    await queueMetricsMaxPeriodDays(organizationId)
+  );
   const startTime = formatClickhouseDateTime(new Date(floorToMinute(range.from.getTime())));
   const endTime = formatClickhouseDateTime(new Date(ceilToMinute(range.to.getTime())));