feat: add ServerDetailSummary component for enhanced server usage display

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 (
+    <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"}
+    />
+  )
+}

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() {
         </div>
         <Separator className="flex-1" />
       </section>
+
+      <section>
+        <ServerDetailSummary server_id={Number(server_id)} />
+      </section>
+
       <div style={{ display: currentTab === tabs[0] ? "block" : "none" }}>
         <ServerDetailChart server_id={server_id} />
       </div>