fix(webapp): fall back to the default window for unusable queue metric periods

A hand-edited `?period=garbage` or `?period=9999d` was passed straight to the
metric queries, so the charts and the SSR'd table could end up on different
windows. Period resolution now rejects anything the picker could not produce
(including windows past the 30 day retention), and the queues list loader
resolves through the same path the client queries use.

Author: ericallam

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

@@ -1,3 +1,4 @@
+import parse from "parse-duration";
 import { useEffect } from "react";
 
 /**
@@ -17,8 +18,13 @@ 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]$/;
 
+/** 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;
+
 function isPeriod(value: string | undefined | null): value is string {
-  return typeof value === "string" && PERIOD_PATTERN.test(value);
+  if (typeof value !== "string" || !PERIOD_PATTERN.test(value)) return false;
+  const ms = parse(value);
+  return typeof ms === "number" && ms > 0 && ms <= MAX_PERIOD_MS;
 }
 
 /** Loader side: the remembered period, falling back to the default when nothing usable is stored. */
@@ -50,8 +56,12 @@ export function useRememberQueueMetricsPeriod(period: string | undefined) {
 }
 
 /**
- * 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.
+ * 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.
+ *
+ * Both the loaders and the client-side chart queries resolve through here, so they can't disagree
+ * about the window.
  */
 export function resolveQueueMetricsPeriod({
   period,
@@ -64,7 +74,7 @@ export function resolveQueueMetricsPeriod({
   to: string | undefined;
   defaultPeriod: string;
 }): string | null {
-  if (period) return period;
+  if (isPeriod(period)) return period;
   if (from || to) return null;
   return defaultPeriod;
 }

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

@@ -201,7 +201,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
           q.type === "task" ? `task/${q.name}` : q.name
         );
         const timeRange = timeFilterFromTo({
-          period,
+          period: resolveQueueMetricsPeriod({ period, from, to, defaultPeriod }) ?? undefined,
           from: parseFiniteInt(from),
           to: parseFiniteInt(to),
           defaultPeriod,