status-monitor/ui/src/pages/agent.tsx

import {
    type WebsocketStatus,
    ConnectionStatus,
} from "@/components/ConnectionStatus";
import type { StatusMessage } from "@/services/types";
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 {
    formatBytes,
    formatPercentage,
    breakdownMetrics,
} from "@/services/utils";
import { initializeConnection } from "@/services/websocket";
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";

export function AgentPage() {
    const { agent } = useParams();
    const [status, setStatus] = useState<WebsocketStatus>();
    const [message, setMessage] = useState<StatusMessage | null>(
        getLastMessage(),
    );

    useEffect(() => {
        if (!agent) return;

        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]);

    const { metrics } = message ?? {};
    const { cpuData, memoryData, networkData } = useChartData(message);

    const getMetricStatus = (percentage: number | undefined) => {
        if (!percentage) return "nil";

        if (percentage < 50) return "good";
        if (percentage < 80) return "warning";
        return "critical";
    };

    const {
        cpuThreads,
        cpuUsage,
        memoryUsage,
        memoryUsed,
        memoryTotal,
        diskUsage,
        diskFree,
        diskTotal,
        networkUp,
        networkDown,
    } = breakdownMetrics(message?.metrics);

    const networkUsage = networkUp + networkDown;

    return (
        <div>
            <Header
                props={{
                    title: "Status Monitor",
                    subtitle: agent!,
                    hasBackButton: true,
                    rightComponent: (
                        <ConnectionStatus
                            status={status ?? "disconnected"}
                            timestamp={message?.timestamp}
                        />
                    ),
                }}
            />
            <main className="max-w-7xl mx-auto py-8">
                <div className="mx-2">
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
                        <MetricCard
                            props={{
                                title: "CPU USAGE",
                                value: formatPercentage(cpuUsage),
                                status: getMetricStatus(cpuUsage),
                                subtitle: `${cpuThreads} threads`,
                            }}
                        >
                            <DonutChart
                                data={{
                                    labels: ["Usage", "Total"],
                                    values: [cpuUsage, 100 - cpuUsage],
                                    colors: ["#3b82f6", "#262626"],
                                }}
                                centerText={formatPercentage(cpuUsage)}
                                size="sm"
                            />
                        </MetricCard>

                        <MetricCard
                            props={{
                                title: "MEMORY USAGE",
                                value: formatPercentage(memoryUsage),
                                status: getMetricStatus(memoryUsage),
                                subtitle: `${formatBytes(memoryUsed)} / ${formatBytes(memoryTotal)}`,
                            }}
                        >
                            <DonutChart
                                data={{
                                    labels: ["Used", "Free"],
                                    values: [memoryUsage, 100 - memoryUsage],
                                    colors: ["#3b82f6", "#262626"],
                                }}
                                centerText={formatPercentage(memoryUsage)}
                                size="sm"
                            />
                        </MetricCard>

                        <MetricCard
                            props={{
                                title: "NETWORK ACTIVITY",
                                value: formatBytes(networkUsage),
                                status: "nil",
                                subtitle: `↑ ${formatBytes(networkUp)}/s ↓ ${formatBytes(networkDown)}/s`,
                            }}
                        >
                            <DonutChart
                                data={{
                                    labels: ["Upload", "Download"],
                                    values: [
                                        message ? networkUp : 1,
                                        message ? networkDown : 1,
                                    ],
                                    colors: ["#ef4444", "#3b82f6"],
                                }}
                                size="sm"
                            />
                        </MetricCard>
                    </div>

                    <MetricCard
                        props={{
                            title: "DISK USAGE",
                            value: formatPercentage(diskUsage),
                            status: getMetricStatus(diskUsage),
                            subtitle: `${formatBytes(diskFree)} free of ${formatBytes(diskTotal)}`,
                        }}
                    >
                        <div className="w-full bg-[#141414] rounded-full h-4">
                            <div
                                className={`h-4 rounded-full transition-all duration-500 ${
                                    getMetricStatus(diskUsage) == "good"
                                        ? "bg-green-500"
                                        : getMetricStatus(diskUsage) ==
                                            "warning"
                                          ? "bg-yellow-500"
                                          : "bg-red-500"
                                }`}
                                style={{ width: `${diskUsage}%` }}
                            />
                        </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}
                        />

                        <SysinfoCard sysinfo={metrics?.system_info} />
                    </div>
                </div>
            </main>
        </div>
    );
}