From 5a0c873dc8c7020c0ffe888fa66d272aa5d38bf5 Mon Sep 17 00:00:00 2001 From: hamster1963 <1410514192@qq.com> Date: Sun, 28 Dec 2025 16:30:16 +0800 Subject: [PATCH] feat: add ServerDetailSummary component for enhanced server usage display --- src/components/ServerDetailSummary.tsx | 96 ++++++++++++++++++++++++++ src/pages/ServerDetail.tsx | 6 ++ 2 files changed, 102 insertions(+) create mode 100644 src/components/ServerDetailSummary.tsx diff --git a/src/components/ServerDetailSummary.tsx b/src/components/ServerDetailSummary.tsx new file mode 100644 index 0000000..82653ae --- /dev/null +++ b/src/components/ServerDetailSummary.tsx @@ -0,0 +1,96 @@ +"use client" + +import { Progress } from "@/components/ui/progress" +import { useWebSocketContext } from "@/hooks/use-websocket-context" +import { formatNezhaInfo } from "@/lib/utils" +import { NezhaWebsocketResponse } from "@/types/nezha-api" + +export default function ServerDetailSummary({ server_id }: { server_id: number }) { + const { lastMessage, connected } = useWebSocketContext() + + if (!connected && !lastMessage) { + return null + } + + const nezhaWsData = lastMessage ? (JSON.parse(lastMessage.data) as NezhaWebsocketResponse) : null + + if (!nezhaWsData) { + return null + } + + const server = nezhaWsData.servers.find((s) => s.id === Number(server_id)) + + if (!server) { + return null + } + + const { cpu, mem, disk, up, down, tcp, udp, process } = formatNezhaInfo(nezhaWsData.now, server) + + return ( +
+
+
+ CPU + {cpu.toFixed(2)}% +
+ +
+
+
+ Mem + {mem.toFixed(2)}% +
+ +
+
+
+ Disk + {disk.toFixed(2)}% +
+ +
+
+
+ Process + {process} +
+
+
+
+ TCP + {tcp} +
+
+ UDP + {udp} +
+
+
+
+ Upload + {up.toFixed(2)}M/s +
+
+ Download + {down.toFixed(2)}M/s +
+
+
+ ) +} + +type UsageBarProps = { + value: number +} + +function UsageBar({ value }: UsageBarProps) { + return ( + 90 ? "bg-red-500" : value > 70 ? "bg-orange-400" : "bg-green-500"} + className={"h-[3px] rounded-sm bg-stone-200 dark:bg-stone-800"} + /> + ) +} diff --git a/src/pages/ServerDetail.tsx b/src/pages/ServerDetail.tsx index 20dca88..e7aebe1 100644 --- a/src/pages/ServerDetail.tsx +++ b/src/pages/ServerDetail.tsx @@ -1,6 +1,7 @@ import { NetworkChart } from "@/components/NetworkChart" import ServerDetailChart from "@/components/ServerDetailChart" import ServerDetailOverview from "@/components/ServerDetailOverview" +import ServerDetailSummary from "@/components/ServerDetailSummary" import TabSwitch from "@/components/TabSwitch" import { Separator } from "@/components/ui/separator" import { useEffect, useState } from "react" @@ -33,6 +34,11 @@ export default function ServerDetail() { + +
+ +
+