finish ui

ui/src/pages/agent.tsx

@@ -1,51 +1,45 @@
-import {
-    type WebsocketStatus,
-    ConnectionStatus,
-} from "@/components/ConnectionStatus";
-import type { StatusMessage } from "@/services/types";
+import { ConnectionStatus } from "@/components/ConnectionStatus";
 import { Header } from "@/components/Header";
 import { DonutChart } from "@/components/DonutChart";
 import { LineChartCard } from "@/components/LineChartCard";
 import { MetricCard } from "@/components/MetricCard";
 import { SysinfoCard } from "@/components/SysinfoCard";
 import { useChartData } from "@/hooks/useChartData";
-import { getLastMessage, setLastMessage } from "@/services/store";
 import {
     formatBits,
     formatPercentage,
     calcPercentage,
     formatBytes,
 } from "@/services/utils";
-import { initializeConnection } from "@/services/websocket";
-import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
+import { useWebsocket } from "@/hooks/useWebsocket";
+import { getHistoricalData, TimePeriod } from "@/services/store";
+import { useEffect, useState } from "react";
+import { StatusMessage } from "@/services/types";
+import { TimePeriodSelector } from "@/components/TimePeriodSelector";
 
 export function AgentPage() {
     const { agent } = useParams();
-    const [status, setStatus] = useState<WebsocketStatus>();
-    const [message, setMessage] = useState<StatusMessage | null>(
-        getLastMessage(),
-    );
+    const { status, message } = useWebsocket(`ws://localhost:3000/ws/${agent}`);
+
+    const [period, setPeriod] = useState<TimePeriod | "realtime">("all");
+    const [history, setHistory] = useState<StatusMessage[] | null>(null);
 
     useEffect(() => {
-        if (!agent) return;
+        const fetchData = async () => {
+            const data = await getHistoricalData(
+                `http://localhost:3000/history/${agent}/${period}`,
+            );
+            setHistory(data);
+        };
 
-        initializeConnection(agent, {
-            onMessage: (data) => {
-                const parsed = JSON.parse(data);
-
-                setStatus("connected");
-                setMessage(parsed);
-                setLastMessage(parsed);
-            },
-            onOpen: () => setStatus("connecting"),
-            onClose: () => setStatus("disconnected"),
-            onError: () => setStatus("error"),
-        });
-    }, [agent]);
+        fetchData();
+    }, [agent, period]);
 
     const { metrics } = message ?? {};
-    const { cpuData, memoryData, networkData } = useChartData(message);
+    const { cpuData, memoryData, networkData } = useChartData(
+        period === "realtime" ? message! : history,
+    );
 
     const getMetricStatus = (percentage: number | undefined) => {
         if (!percentage) return "nil";
@@ -86,6 +80,8 @@ export function AgentPage() {
             />
             <main className="max-w-7xl mx-auto py-8">
                 <div className="mx-2">
+                    <h2 className="text-xl font-semibold mb-4">Overview</h2>
+
                     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
                         <MetricCard
                             props={{
@@ -170,15 +166,28 @@ export function AgentPage() {
                         </div>
                     </MetricCard>
 
-                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 my-8">
-                        <LineChartCard title="CPU Usage" data={cpuData} />
-                        <LineChartCard title="Memory Usage" data={memoryData} />
-                        <LineChartCard
-                            title="Network Activity"
-                            data={networkData}
-                        />
+                    <div className="flex flex-col my-10">
+                        <h2 className="text-xl font-semibold mb-4">Details</h2>
+                        <div className="mt-3">
+                            <TimePeriodSelector
+                                currentPeriod={period}
+                                onChange={setPeriod}
+                            />
+                        </div>
 
-                        <SysinfoCard sysinfo={metrics?.system_info} />
+                        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 my-8">
+                            <LineChartCard title="CPU Usage" data={cpuData} />
+                            <LineChartCard
+                                title="Memory Usage"
+                                data={memoryData}
+                            />
+                            <LineChartCard
+                                title="Network Activity"
+                                data={networkData}
+                            />
+
+                            <SysinfoCard sysinfo={metrics?.system_info} />
+                        </div>
                     </div>
                 </div>
             </main>