fix(webapp): keep live metric timestamps monotonic

Author: carderne

apps/webapp/app/hooks/useMetricResourceQuery.ts

@@ -29,7 +29,12 @@ export function useIsMetricResponseFresh(
     return () => clearTimeout(timeout);
   }, [expiresAt]);
 
-  return expiresAt !== null && expiredAt !== expiresAt;
+  return (
+    expiresAt !== null &&
+    responseReceivedAt !== null &&
+    responseReceivedAt < expiresAt &&
+    expiredAt !== expiresAt
+  );
 }
 
 export type MetricResourceQueryOptions = {
@@ -122,6 +127,7 @@ export function useMetricResourceQuery(query: string, opts: MetricResourceQueryO
   const [isLoading, setIsLoading] = useState(true);
   const [failed, setFailed] = useState(false);
   const [responseReceivedAt, setResponseReceivedAt] = useState<number | null>(null);
+  const [lastSuccessfulResponseAt, setLastSuccessfulResponseAt] = useState<number | null>(null);
   const abortRef = useRef<AbortController | null>(null);
   const loadedKeyRef = useRef<string | null>(null);
 
@@ -132,6 +138,7 @@ export function useMetricResourceQuery(query: string, opts: MetricResourceQueryO
       setRows(null);
       setFailed(false);
       setResponseReceivedAt(null);
+      setLastSuccessfulResponseAt(null);
       setIsLoading(false);
       return;
     }
@@ -147,6 +154,7 @@ export function useMetricResourceQuery(query: string, opts: MetricResourceQueryO
       setRows(responseCache.get(cacheKey) ?? null);
       setFailed(false);
       setResponseReceivedAt(null);
+      setLastSuccessfulResponseAt(null);
     }
     setIsLoading(true);
     fetch("/resources/metric", {
@@ -172,9 +180,11 @@ export function useMetricResourceQuery(query: string, opts: MetricResourceQueryO
         if (controller.signal.aborted) return;
         if (data.success) {
           cacheSet(cacheKey, data.data.rows);
+          const receivedAt = Date.now();
           setRows(data.data.rows);
           setFailed(false);
-          setResponseReceivedAt(Date.now());
+          setResponseReceivedAt(receivedAt);
+          setLastSuccessfulResponseAt(receivedAt);
         } else {
           setFailed(true);
           setResponseReceivedAt(null);
@@ -222,5 +232,6 @@ export function useMetricResourceQuery(query: string, opts: MetricResourceQueryO
     showLoading: isLoading && !rows,
     failed,
     responseReceivedAt,
+    lastSuccessfulResponseAt,
   };
 }

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx

@@ -1307,7 +1307,11 @@ function WaitingInQueueBlock({
 }) {
   // Latest gauges from ClickHouse (as on the queue page), polled so the blocks keep ticking. Trust
   // the newest bucket only while fresh; otherwise fall back to the loader's live values.
-  const { rows: liveRows, responseReceivedAt } = useQueueMetric(
+  const {
+    rows: liveRows,
+    responseReceivedAt,
+    lastSuccessfulResponseAt,
+  } = useQueueMetric(
     `SELECT timeBucket() AS t, max(max_running) AS running, max(max_queued) AS queued, max(max_limit) AS q_limit\nFROM queue_metrics\nGROUP BY t\nORDER BY t`,
     {
       ids: waiting.ids,
@@ -1319,7 +1323,7 @@ function WaitingInQueueBlock({
   );
   const latest = liveRows.length > 0 ? liveRows[liveRows.length - 1] : undefined;
   const latestBucketMs = latest ? clickhouseTimeToMs(latest.t) : NaN;
-  const now = responseReceivedAt ?? loadedAt;
+  const now = Math.max(loadedAt, lastSuccessfulResponseAt ?? loadedAt);
   const liveFresh = useIsMetricResponseFresh(
     responseReceivedAt,
     latestBucketMs,