homeio

1"use client";
2
3import { useEffect, useState } from "react";
4import { keepPreviousData, useQuery } from "@tanstack/react-query";
5import { appendLivePoint } from "@/lib/client/metrics-history";
6import { METRICS_HISTORY_RANGE_MS } from "@/lib/shared/metrics-history";
7import type {
8  MetricsHistory,
9  MetricsHistoryPoint,
10  MetricsHistoryRange,
11} from "@/lib/shared/contracts/system";
12import { queryKeys } from "@/lib/shared/query-keys";
13
14async function fetchMetricsHistory(range: MetricsHistoryRange): Promise<MetricsHistory> {
15  const response = await fetch(`/api/v1/system/metrics/history?range=${range}`, {
16    cache: "no-store",
17  });
18
19  if (!response.ok) {
20    throw new Error(`Failed to load the metrics history (${response.status})`);
21  }
22
23  const json = (await response.json()) as { data: MetricsHistory };
24  return json.data;
25}
26
27/**
28 * The server keeps the history, so opening or refreshing the Monitor shows the
29 * last 15 minutes, hour or day straight away. The 15 min and 1 h views then
30 * grow from the live metrics stream; the 24 h view, made of one-minute
31 * averages, refetches.
32 */
33export function useMetricsHistory(
34  range: MetricsHistoryRange,
35  livePoint: MetricsHistoryPoint | null,
36) {
37  const query = useQuery({
38    queryKey: queryKeys.systemMetricsHistory(range),
39    queryFn: () => fetchMetricsHistory(range),
40    refetchInterval: range === "24h" ? 60_000 : 5 * 60_000,
41    refetchOnWindowFocus: false,
42    // On a range switch, keep the current chart on screen until the new range
43    // arrives, rather than blanking it or drawing one live dot on its own.
44    placeholderData: keepPreviousData,
45  });
46  const loaded = query.data !== undefined && !query.isPlaceholderData;
47
48  const [points, setPoints] = useState<MetricsHistoryPoint[]>([]);
49
50  useEffect(() => {
51    if (loaded) setPoints(query.data.points);
52  }, [loaded, query.data]);
53
54  useEffect(() => {
55    if (range === "24h" || !livePoint || !loaded) return;
56    setPoints((current) => appendLivePoint(current, livePoint, METRICS_HISTORY_RANGE_MS[range]));
57  }, [livePoint, range, loaded]);
58
59  return {
60    points,
61    intervalSeconds: query.data?.intervalSeconds ?? (range === "24h" ? 60 : 5),
62    isLoading: query.isLoading,
63    error: query.error,
64  };
65}
66