+
Health
{degraded ? "Degraded" : "Running normally"}
+
+
+
{summary?.problems.length ? (
@@ -112,8 +127,12 @@ export function HealthOverview() {
}
/>
- Flow activity (24h)
+ Flow activity ({range.label})
{/* The name anchors the left, the numbers read down their own
centre, and the trend closes the row on the right. */}
@@ -197,7 +216,7 @@ export function HealthOverview() {
colSpan={6}
className="py-6 text-center text-muted-foreground"
>
- No flow has run in the last day.
+ No flow has run in the last {range.label}.
) : null}
diff --git a/frontend/src/components/Health/queries.ts b/frontend/src/components/Health/queries.ts
index 56430e2..7f970c4 100644
--- a/frontend/src/components/Health/queries.ts
+++ b/frontend/src/components/Health/queries.ts
@@ -1,7 +1,5 @@
import { ObservabilityService } from "@/client"
-
-/** The live view; anything older is the collector's rollups. */
-export const HOURS = 24
+import { type Range, rangeStart } from "@/components/Common/RangePicker"
/** Another tab can change things, and the engine fails flows on its own. */
const REFRESH = 30_000
@@ -11,11 +9,14 @@ const REFRESH = 30_000
*
* Deeper than they are shown: hovering a minute on a chart previews these rows
* client-side, and a list holding only the newest handful would have nothing
- * to show for any minute but the current one. Pinning asks the server for the
- * minute instead, which is what reaches past this depth.
+ * to show for any minute but the current one.
+ *
+ * Both lists are bound to the selected range, so the depth buys coverage of
+ * whatever window is on screen — narrowing the range is what makes the same
+ * rows reach the whole of it. Pinning asks the server for the minute, which
+ * reaches past this depth at any range. 200 is the cap `/runs` enforces.
*/
-const RUN_DEPTH = 200
-const EVENT_DEPTH = 100
+const LIST_DEPTH = 200
export const healthKeys = {
all: ["observability"] as const,
@@ -32,49 +33,81 @@ export const summaryQueryOptions = () => ({
refetchInterval: 10_000,
})
-export const timeseriesQueryOptions = () => ({
- queryKey: ["observability", "timeseries", HOURS] as const,
- queryFn: () => ObservabilityService.readTimeseries({ hours: HOURS }),
+export const timeseriesQueryOptions = (range: Range) => ({
+ queryKey: ["observability", "timeseries", range.hours] as const,
+ queryFn: () =>
+ ObservabilityService.readTimeseries({
+ hours: range.hours,
+ bucketS: range.bucketS,
+ }),
refetchInterval: REFRESH,
})
-export const flowRollupsQueryOptions = () => ({
- queryKey: ["observability", "flows", HOURS] as const,
- queryFn: () => ObservabilityService.readFlowRollups({ hours: HOURS }),
+export const flowRollupsQueryOptions = (range: Range) => ({
+ queryKey: ["observability", "flows", range.hours] as const,
+ queryFn: () => ObservabilityService.readFlowRollups({ hours: range.hours }),
refetchInterval: REFRESH,
})
-export const runsQueryOptions = () => ({
- queryKey: ["observability", "runs"] as const,
- queryFn: () => ObservabilityService.readRuns({ limit: RUN_DEPTH }),
+export const runsQueryOptions = (range: Range) => ({
+ queryKey: ["observability", "runs", "recent", range.hours] as const,
+ queryFn: () =>
+ ObservabilityService.readRuns({
+ since: rangeStart(range),
+ limit: LIST_DEPTH,
+ }),
refetchInterval: REFRESH,
})
+export const failuresQueryOptions = (range: Range) => ({
+ queryKey: [...healthKeys.events, "failure", "recent", range.hours] as const,
+ queryFn: () =>
+ ObservabilityService.readEvents({
+ kind: "failure",
+ since: rangeStart(range),
+ limit: LIST_DEPTH,
+ }),
+ refetchInterval: REFRESH,
+})
+
+/** One minute, as the bounds both history endpoints take. */
+const minuteWindow = (at: number | null) => ({
+ since: new Date((at ?? 0) * 1000).toISOString(),
+ until: new Date(((at ?? 0) + 60) * 1000).toISOString(),
+})
+
/**
- * The runs of one minute, wherever it sits in the day.
+ * The runs of one minute, wherever it sits in the range.
*
* A busy engine writes more runs per minute than the recent list is deep, so a
* pinned moment is asked for rather than filtered out of what is already held.
* `at` is a minute start, and the window is that minute.
*/
export const minuteRunsQueryOptions = (at: number | null) => ({
- queryKey: ["observability", "runs", at] as const,
+ queryKey: ["observability", "runs", "minute", at] as const,
queryFn: () =>
- ObservabilityService.readRuns({
- since: new Date((at ?? 0) * 1000).toISOString(),
- until: new Date(((at ?? 0) + 60) * 1000).toISOString(),
- limit: RUN_DEPTH,
- }),
+ ObservabilityService.readRuns({ ...minuteWindow(at), limit: LIST_DEPTH }),
// A minute that has passed does not change, and the current one is refreshed
// by the unpinned list anyway.
enabled: at !== null,
})
-export const failuresQueryOptions = () => ({
- queryKey: [...healthKeys.events, "failure"] as const,
+/**
+ * The failures of one minute — the same escape hatch the runs have.
+ *
+ * Without it the list could only ever answer for the minutes its newest rows
+ * happen to span, which on a failing engine is a fraction of the range the
+ * chart beside it draws.
+ */
+export const minuteFailuresQueryOptions = (at: number | null) => ({
+ queryKey: [...healthKeys.events, "failure", "minute", at] as const,
queryFn: () =>
- ObservabilityService.readEvents({ kind: "failure", limit: EVENT_DEPTH }),
- refetchInterval: REFRESH,
+ ObservabilityService.readEvents({
+ kind: "failure",
+ ...minuteWindow(at),
+ limit: LIST_DEPTH,
+ }),
+ enabled: at !== null,
})
export const auditQueryOptions = () => ({
diff --git a/frontend/src/routes/_layout/index.tsx b/frontend/src/routes/_layout/index.tsx
index af2a21b..fbc85e3 100644
--- a/frontend/src/routes/_layout/index.tsx
+++ b/frontend/src/routes/_layout/index.tsx
@@ -1,8 +1,10 @@
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
import { createFileRoute, Link } from "@tanstack/react-router"
import { AlertCircle, Workflow } from "lucide-react"
+import { useState } from "react"
import { type FlowSummary, FlowsService } from "@/client"
+import { DEFAULT_RANGE } from "@/components/Common/RangePicker"
import { BrainView } from "@/components/Flow/BrainView"
import { flowKeys, flowsQueryOptions } from "@/components/Flow/queries"
import { HealthActivity } from "@/components/Health/HealthActivity"
@@ -100,6 +102,9 @@ function FlowRow({ flow }: { flow: FlowSummary }) {
*/
function Dashboard() {
const { user: currentUser } = useAuth()
+ // The health block's window: one choice, read by the tiles, the flow table,
+ // the charts and the lists under them.
+ const [range, setRange] = useState(DEFAULT_RANGE)
const { data, isPending } = useQuery({
...flowsQueryOptions(),
refetchInterval: REFRESH_INTERVAL,
@@ -146,8 +151,8 @@ function Dashboard() {
)}
-
-
+
+
)
}