improve ui

2025-08-08 18:06:14 +02:00 · 2025-07-10 03:00:11 +02:00
parent 76098532ea
commit aa6b171614
13 changed files with 344 additions and 18 deletions
--- a/ui/src/pages/agent.tsx
+++ b/ui/src/pages/agent.tsx
@@ -0,0 +1,140 @@
+import {
+    ConnectionStatus,
+    WebsocketStatus,
+} from "@/components/ConnectionStatus";
+import { Header } from "@/components/Header";
+import { MetricCard } from "@/components/MetricCard";
+import { getLastMessage, setLastMessage } from "@/services/store";
+import { StatusMessage } from "@/services/types";
+import {
+    formatBytes,
+    calcPercentage,
+    formatPercentage,
+} 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 getMetricsStatus = (percentage: number | undefined) => {
+        if (!percentage) return "nil";
+
+        if (percentage < 50) return "good";
+        if (percentage < 80) return "warning";
+        return "critical";
+    };
+
+    const cpuUsage = metrics?.cpu.usage ?? 0;
+    const memoryUsage = calcPercentage(
+        metrics?.memory.used,
+        metrics?.memory.total,
+    );
+    const diskUsage = calcPercentage(
+        (metrics?.disk.total ?? 0) - (metrics?.disk.free ?? 0),
+        metrics?.disk.total,
+    );
+    const networkUsage =
+        (metrics?.network.up ?? 0) + (metrics?.network.down ?? 0);
+
+    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="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: getMetricsStatus(cpuUsage),
+                            subtitle: `${metrics?.cpu.threads ?? 0} threads`,
+                        }}
+                    >
+                        <h1>cpu chart</h1>
+                    </MetricCard>
+
+                    <MetricCard
+                        props={{
+                            title: "MEMORY USAGE",
+                            value: formatPercentage(memoryUsage),
+                            status: getMetricsStatus(memoryUsage),
+                            subtitle: `${formatBytes(metrics?.memory.used)} / ${formatBytes(metrics?.memory.total)}`,
+                        }}
+                    >
+                        <h1>memory chart</h1>
+                    </MetricCard>
+
+                    <MetricCard
+                        props={{
+                            title: "NETWORK ACTIVITY",
+                            value: formatBytes(networkUsage),
+                            status: getMetricsStatus(networkUsage),
+                            subtitle: `↑ ${formatBytes(metrics?.network.up)}/s ↓ ${formatBytes(metrics?.network.down)}/s`,
+                        }}
+                    >
+                        <h1>network chart</h1>
+                    </MetricCard>
+                </div>
+
+                <MetricCard
+                    props={{
+                        title: "DISK USAGE",
+                        value: formatPercentage(diskUsage),
+                        status: getMetricsStatus(diskUsage),
+                        subtitle: `${formatBytes(metrics?.disk.free)} free of ${formatBytes(metrics?.disk.total)}`,
+                    }}
+                >
+                    <div className="w-full bg-[#141414] rounded-full h-4">
+                        <div
+                            className={`h-4 rounded-full transition-all duration-500 ${
+                                getMetricsStatus(diskUsage) == "good"
+                                    ? "bg-green-500"
+                                    : getMetricsStatus(diskUsage) == "warning"
+                                      ? "bg-yellow-500"
+                                      : "bg-red-500"
+                            }`}
+                            style={{ width: `${diskUsage}%` }}
+                        />
+                    </div>
+                </MetricCard>
+            </main>
+        </div>
+    );
+}