homeio

1import { useEffect, useState } from "react";
2import type { ContainerStats, DockerStatsPayload } from "@/lib/shared/contracts/docker";
3
4/**
5 * Hook to subscribe to real-time Docker container stats via SSE.
6 * Exposes `daemonAvailable` so the UI can distinguish "no containers" from
7 * "Docker daemon is unreachable".
8 */
9export function useDockerStats() {
10  const [stats, setStats] = useState<ContainerStats[]>([]);
11  const [daemonAvailable, setDaemonAvailable] = useState<boolean | null>(null);
12  const [isConnected, setIsConnected] = useState(false);
13  const [error, setError] = useState<string | null>(null);
14
15  useEffect(() => {
16    let eventSource: EventSource | null = null;
17    let reconnectTimeout: NodeJS.Timeout | null = null;
18
19    const connect = () => {
20      try {
21        eventSource = new EventSource("/api/v1/docker/stats/stream");
22
23        eventSource.addEventListener("stats.updated", (event) => {
24          try {
25            const payload = JSON.parse(event.data) as DockerStatsPayload;
26            setStats(payload.containers);
27            setDaemonAvailable(payload.daemonAvailable);
28            setError(null);
29          } catch {
30            setError("Failed to parse stats data");
31          }
32        });
33
34        eventSource.addEventListener("heartbeat", () => {
35          // Keep connection alive
36        });
37
38        eventSource.onopen = () => {
39          setIsConnected(true);
40          setError(null);
41        };
42
43        eventSource.onerror = () => {
44          setIsConnected(false);
45          setDaemonAvailable(null); // Reset — connection lost, state unknown
46          eventSource?.close();
47
48          // Reconnect after 5 seconds
49          reconnectTimeout = setTimeout(() => {
50            connect();
51          }, 5000);
52        };
53      } catch (err) {
54        setError(err instanceof Error ? err.message : "Connection failed");
55        setIsConnected(false);
56      }
57    };
58
59    connect();
60
61    return () => {
62      if (eventSource) {
63        eventSource.close();
64      }
65      if (reconnectTimeout) {
66        clearTimeout(reconnectTimeout);
67      }
68    };
69  }, []);
70
71  return {
72    stats,
73    daemonAvailable,
74    isConnected,
75    error,
76  };
77}
78
79/**
80 * Hook to fetch Docker stats once (non-streaming)
81 */
82export function useDockerStatsSnapshot() {
83  const [stats, setStats] = useState<ContainerStats[]>([]);
84  const [daemonAvailable, setDaemonAvailable] = useState<boolean | null>(null);
85  const [isLoading, setIsLoading] = useState(true);
86  const [error, setError] = useState<string | null>(null);
87
88  useEffect(() => {
89    const fetchStats = async () => {
90      try {
91        setIsLoading(true);
92        const response = await fetch("/api/v1/docker/stats");
93
94        if (!response.ok) {
95          throw new Error(`HTTP ${response.status}`);
96        }
97
98        const json = (await response.json()) as { data: DockerStatsPayload };
99        setStats(json.data.containers);
100        setDaemonAvailable(json.data.daemonAvailable);
101        setError(null);
102      } catch (err) {
103        setError(err instanceof Error ? err.message : "Failed to fetch stats");
104      } finally {
105        setIsLoading(false);
106      }
107    };
108
109    void fetchStats();
110  }, []);
111
112  return {
113    stats,
114    daemonAvailable,
115    isLoading,
116    error,
117  };
118}
119