fix(webapp): stop rejecting long custom queue metric durations

The period pattern only accepted a count of up to four digits, so a custom
duration the picker allows (10000 minutes, a little under 7 days) was treated as
unusable and quietly replaced with the default. The count is now unbounded and
the retention bound is what rules a window out.

Resolution also clamps the period from the URL, not just the remembered default,
so a period wider than the plan's query period shows the window the data
actually covers instead of the one that was asked for.

The plan lookup reads through the limit cache and is skipped entirely on the
classic Queues page, which has no time filter: the page revalidates on an
interval, so an uncached platform call would repeat for the life of the tab.

Author: ericallam

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

@@ -1,16 +1,20 @@
-import { getLimit } from "~/services/platform.v3.server";
+import { getCachedLimit } 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.
+ *
+ * Read through the limit cache: the queues page revalidates on an interval, so this runs far more
+ * often than a one-off page load. Whole days keep the derived period string well formed.
  */
 export async function queueMetricsMaxPeriodDays(organizationId: string): Promise<number> {
-  const planPeriodDays = await getLimit(
+  const cached = await getCachedLimit(
     organizationId,
     "queryPeriodDays",
     QUEUE_METRICS_RETENTION_DAYS
   );
-  return Math.min(planPeriodDays, QUEUE_METRICS_RETENTION_DAYS);
+  const planPeriodDays = cached.val ?? QUEUE_METRICS_RETENTION_DAYS;
+  return Math.max(1, Math.min(Math.floor(planPeriodDays), QUEUE_METRICS_RETENTION_DAYS));
 }

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

@@ -15,8 +15,12 @@ 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]$/;
+/**
+ * The shape TimeFilter writes: a count plus a minute/hour/day unit. The count is unbounded here
+ * because the picker accepts any positive integer for a custom duration (`10000m` is a little under
+ * 7 days); the retention bound below is what rules a window out.
+ */
+const PERIOD_PATTERN = /^\d+[mhd]$/;
 
 /** Queue metrics are retained for 30 days, so a longer window can only ever render empty. */
 export const QUEUE_METRICS_RETENTION_DAYS = 30;
@@ -61,7 +65,8 @@ export function useRememberQueueMetricsPeriod(period: string | undefined) {
 /**
  * The window the page should show: a usable period in the URL wins, an absolute range means "no
  * period", and everything else (including a period the picker could never produce, e.g. a
- * hand-edited `?period=garbage`) falls back to the remembered default the loader resolved.
+ * hand-edited `?period=garbage`) falls back to the remembered default the loader resolved. The
+ * result is held inside the org's plan query period, since that is the window the data will cover.
  *
  * Both the loaders and the client-side chart queries resolve through here, so they can't disagree
  * about the window.
@@ -71,15 +76,17 @@ export function resolveQueueMetricsPeriod({
   from,
   to,
   defaultPeriod,
+  maxPeriodDays,
 }: {
   period: string | undefined;
   from: string | undefined;
   to: string | undefined;
   defaultPeriod: string;
+  maxPeriodDays: number;
 }): string | null {
-  if (isPeriod(period)) return period;
+  if (isPeriod(period)) return clampQueueMetricsPeriod(period, maxPeriodDays);
   if (from || to) return null;
-  return defaultPeriod;
+  return clampQueueMetricsPeriod(defaultPeriod, maxPeriodDays);
 }
 
 /**

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

@@ -104,6 +104,7 @@ import { canAccessQueueMetricsUi } from "~/v3/canAccessQueueMetricsUi.server";
 import { QueueAllocationPresenter } from "~/presenters/v3/QueueAllocationPresenter.server";
 import {
   QUEUE_METRICS_DEFAULT_PERIOD,
+  QUEUE_METRICS_RETENTION_DAYS,
   clampQueueMetricsPeriod,
   clipQueueMetricsWindow,
   queueMetricsPeriodFromRequest,
@@ -170,7 +171,9 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   // no metrics query fires.
   const queueMetricsUiEnabled = await canAccessQueueMetricsUi({ userId, organizationSlug });
 
-  const maxPeriodDays = await queueMetricsMaxPeriodDays(environment.organizationId);
+  const maxPeriodDays = queueMetricsUiEnabled
+    ? await queueMetricsMaxPeriodDays(environment.organizationId)
+    : QUEUE_METRICS_RETENTION_DAYS;
   const defaultPeriod = clampQueueMetricsPeriod(
     queueMetricsPeriodFromRequest(request),
     maxPeriodDays
@@ -209,7 +212,9 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
         );
         const timeRange = clipQueueMetricsWindow(
           timeFilterFromTo({
-            period: resolveQueueMetricsPeriod({ period, from, to, defaultPeriod }) ?? undefined,
+            period:
+              resolveQueueMetricsPeriod({ period, from, to, defaultPeriod, maxPeriodDays }) ??
+              undefined,
             from: parseFiniteInt(from),
             to: parseFiniteInt(to),
             defaultPeriod,
@@ -406,6 +411,7 @@ function QueuesWithMetricsView() {
       from: value("from"),
       to: value("to"),
       defaultPeriod,
+      maxPeriodDays,
     }),
     from: value("from") ?? null,
     to: value("to") ?? null,

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

@@ -230,6 +230,7 @@ export default function Page() {
       from: value("from"),
       to: value("to"),
       defaultPeriod,
+      maxPeriodDays,
     }),
     from: value("from") ?? null,
     to: value("to") ?? null,