feat: add ServerDetailSummary component for enhanced server usage display

2026-05-06 13:58:43 +00:00 · 2025-12-28 16:30:16 +08:00
parent c989a67265
commit 5a0c873dc8
2 changed files with 102 additions and 0 deletions
@@ -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 (
+    <div className="mb-2 flex flex-wrap items-center gap-4">
+      <section className="flex w-24 flex-col justify-center gap-1 px-1.5 py-1">
+        <section className="flex items-center justify-between">
+          <span className="text-[10px] text-muted-foreground">CPU</span>
+          <span className="font-medium text-[10px]">{cpu.toFixed(2)}%</span>
+        </section>
+        <UsageBar value={cpu} />
+      </section>
+      <section className="flex w-24 flex-col justify-center gap-1 px-1.5 py-1">
+        <section className="flex items-center justify-between">
+          <span className="text-[10px] text-muted-foreground">Mem</span>
+          <span className="font-medium text-[10px]">{mem.toFixed(2)}%</span>
+        </section>
+        <UsageBar value={mem} />
+      </section>
+      <section className="flex w-24 flex-col justify-center gap-1 px-1.5 py-1">
+        <section className="flex items-center justify-between">
+          <span className="text-[10px] text-muted-foreground">Disk</span>
+          <span className="font-medium text-[10px]">{disk.toFixed(2)}%</span>
+        </section>
+        <UsageBar value={disk} />
+      </section>
+      <section className="flex min-w-[85px] flex-col justify-center px-1.5 py-1">
+        <section className="flex items-center justify-between gap-4">
+          <span className="text-[10px] text-muted-foreground">Process</span>
+          <span className="font-medium text-[10px]">{process}</span>
+        </section>
+      </section>
+      <section className="flex min-w-[70px] flex-col justify-center gap-0.5 px-1.5 py-1">
+        <section className="flex items-center justify-between gap-4">
+          <span className="text-[10px] text-muted-foreground">TCP</span>
+          <span className="font-medium text-[10px]">{tcp}</span>
+        </section>
+        <section className="flex items-center justify-between gap-4">
+          <span className="text-[10px] text-muted-foreground">UDP</span>
+          <span className="font-medium text-[10px]">{udp}</span>
+        </section>
+      </section>
+      <section className="flex min-w-[120px] flex-col justify-center gap-0.5 px-1.5 py-1">
+        <section className="flex items-center justify-between gap-4">
+          <span className="text-[10px] text-muted-foreground">Upload</span>
+          <span className="font-medium text-[10px]">{up.toFixed(2)}M/s</span>
+        </section>
+        <section className="flex items-center justify-between gap-4">
+          <span className="text-[10px] text-muted-foreground">Download</span>
+          <span className="font-medium text-[10px]">{down.toFixed(2)}M/s</span>
+        </section>
+      </section>
+    </div>
+  )
+}
+
+type UsageBarProps = {
+  value: number
+}
+
+function UsageBar({ value }: UsageBarProps) {
+  return (
+    <Progress
+      aria-label={"Server Usage Bar"}
+      aria-labelledby={"Server Usage Bar"}
+      value={value}
+      indicatorClassName={value > 90 ? "bg-red-500" : value > 70 ? "bg-orange-400" : "bg-green-500"}
+      className={"h-[3px] rounded-sm bg-stone-200 dark:bg-stone-800"}
+    />
+  )
+}