milestone 26: upstream health answers for the selected period

admin/src/lib/queries.ts

@@ -23,7 +23,7 @@ export const queryKeys = {
 	stats: (period: Period) => ["stats", period] as const,
 	timeseries: (period: Period) => ["stats", "timeseries", period] as const,
 	queriesInfinite: (filter: QueriesFilter) => ["queries", "infinite", filter] as const,
-	upstreamHealth: ["upstream-health"] as const,
+	upstreamHealth: (period: Period) => ["upstream-health", period] as const,
 	lookup: (domain: string, groupId?: number) => ["lookup", domain, groupId ?? null] as const,
 	/** Prefix of every `lookup` entry; the invalidation target after any verdict input changes. */
 	lookupAll: ["lookup"] as const,
@@ -69,8 +69,15 @@ export const queriesInfiniteQuery = (filter: QueriesFilter = {}) =>
 		placeholderData: keepPreviousData,
 	});
 
-export const upstreamHealthQuery = () =>
-	queryOptions({ queryKey: queryKeys.upstreamHealth, queryFn: api.getUpstreamHealth, refetchInterval: 30_000 });
+// The period is part of the key: the upstream aggregates are ranged like the
+// stats ones, so the picker has to refetch them rather than reuse a cached
+// window under a new label.
+export const upstreamHealthQuery = (period: Period = "24h") =>
+	queryOptions({
+		queryKey: queryKeys.upstreamHealth(period),
+		queryFn: () => api.getUpstreamHealth(period),
+		refetchInterval: 30_000,
+	});
 
 export const lookupQuery = (domain: string, groupId?: number) =>
 	queryOptions({ queryKey: queryKeys.lookup(domain, groupId), queryFn: () => api.getLookup(domain, groupId) });