feat: detail chart

eslint.config.js

@@ -23,6 +23,7 @@ export default tseslint.config(
         "warn",
         { allowConstantExport: true },
       ],
+      "react-hooks/exhaustive-deps": "off",
     },
   },
 );

package.json

@@ -27,12 +27,13 @@
     "clsx": "^2.1.1",
     "country-flag-icons": "^1.5.13",
     "framer-motion": "^11.11.17",
-    "lucide-react": "^0.453.0",
+    "lucide-react": "^0.460.0",
     "luxon": "^3.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.28.0",
     "react-use-websocket": "^4.11.1",
+    "recharts": "^2.13.3",
     "sonner": "^1.7.0",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7"

src/components/ServerDetailChart.tsx

@@ -0,0 +1,742 @@
+"use client";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { ChartConfig, ChartContainer } from "@/components/ui/chart";
+import { formatNezhaInfo, formatRelativeTime } from "@/lib/utils";
+import { NezhaAPI, NezhaAPIResponse } from "@/types/nezha-api";
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import useWebSocket from "react-use-websocket";
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  Line,
+  LineChart,
+  XAxis,
+  YAxis,
+} from "recharts";
+import { ServerDetailChartLoading } from "./loading/ServerDetailLoading";
+import AnimatedCircularProgressBar from "./ui/animated-circular-progress-bar";
+
+type cpuChartData = {
+  timeStamp: string;
+  cpu: number;
+};
+
+type processChartData = {
+  timeStamp: string;
+  process: number;
+};
+
+type diskChartData = {
+  timeStamp: string;
+  disk: number;
+};
+
+type memChartData = {
+  timeStamp: string;
+  mem: number;
+  swap: number;
+};
+
+type networkChartData = {
+  timeStamp: string;
+  upload: number;
+  download: number;
+};
+
+type connectChartData = {
+  timeStamp: string;
+  tcp: number;
+  udp: number;
+};
+
+export default function ServerDetailChart() {
+  const { id } = useParams();
+  const { lastMessage, readyState } = useWebSocket("/api/v1/ws/server", {
+    shouldReconnect: () => true,
+    reconnectInterval: 3000,
+  });
+
+  // 检查连接状态
+  if (readyState !== 1) {
+    return (
+      <div className="flex flex-col items-center justify-center">
+        <p className="font-semibold text-sm">connecting...</p>
+      </div>
+    );
+  }
+
+  // 解析消息
+  const nezhaWsData = lastMessage
+    ? (JSON.parse(lastMessage.data) as NezhaAPIResponse)
+    : null;
+
+  if (!nezhaWsData) {
+    return <ServerDetailChartLoading />;
+  }
+
+  const server = nezhaWsData.servers.find((s) => s.id === Number(id));
+
+  if (!server) {
+    return <ServerDetailChartLoading />;
+  }
+
+  return (
+    <section className="grid md:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-3">
+      <CpuChart data={server} />
+      <ProcessChart data={server} />
+      <DiskChart data={server} />
+      <MemChart data={server} />
+      <NetworkChart data={server} />
+      <ConnectChart data={server} />
+    </section>
+  );
+}
+
+function CpuChart({ data }: { data: NezhaAPI }) {
+  const [cpuChartData, setCpuChartData] = useState([] as cpuChartData[]);
+
+  const { cpu } = formatNezhaInfo(data);
+
+  useEffect(() => {
+    if (data) {
+      const timestamp = Date.now().toString();
+      let newData = [] as cpuChartData[];
+      if (cpuChartData.length === 0) {
+        newData = [
+          { timeStamp: timestamp, cpu: cpu },
+          { timeStamp: timestamp, cpu: cpu },
+        ];
+      } else {
+        newData = [...cpuChartData, { timeStamp: timestamp, cpu: cpu }];
+      }
+      if (newData.length > 30) {
+        newData.shift();
+      }
+      setCpuChartData(newData);
+    }
+  }, [data]);
+
+  const chartConfig = {
+    cpu: {
+      label: "CPU",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Card>
+      <CardContent className="px-6 py-3">
+        <section className="flex flex-col gap-1">
+          <div className="flex items-center justify-between">
+            <p className="text-md font-medium">CPU</p>
+            <section className="flex items-center gap-2">
+              <p className="text-xs text-end w-10 font-medium">
+                {cpu.toFixed(0)}%
+              </p>
+              <AnimatedCircularProgressBar
+                className="size-3 text-[0px]"
+                max={100}
+                min={0}
+                value={cpu}
+                primaryColor="hsl(var(--chart-1))"
+              />
+            </section>
+          </div>
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-[130px] w-full"
+          >
+            <AreaChart
+              accessibilityLayer
+              data={cpuChartData}
+              margin={{
+                top: 12,
+                left: 12,
+                right: 12,
+              }}
+            >
+              <CartesianGrid vertical={false} />
+              <XAxis
+                dataKey="timeStamp"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                minTickGap={200}
+                interval="preserveStartEnd"
+                tickFormatter={(value) => formatRelativeTime(value)}
+              />
+              <YAxis
+                tickLine={false}
+                axisLine={false}
+                mirror={true}
+                tickMargin={-15}
+                domain={[0, 100]}
+                tickFormatter={(value) => `${value}%`}
+              />
+              <Area
+                isAnimationActive={false}
+                dataKey="cpu"
+                type="step"
+                fill="hsl(var(--chart-1))"
+                fillOpacity={0.3}
+                stroke="hsl(var(--chart-1))"
+              />
+            </AreaChart>
+          </ChartContainer>
+        </section>
+      </CardContent>
+    </Card>
+  );
+}
+
+function ProcessChart({ data }: { data: NezhaAPI }) {
+  const [processChartData, setProcessChartData] = useState(
+    [] as processChartData[],
+  );
+
+  const { process } = formatNezhaInfo(data);
+
+  useEffect(() => {
+    if (data) {
+      const timestamp = Date.now().toString();
+      let newData = [] as processChartData[];
+      if (processChartData.length === 0) {
+        newData = [
+          { timeStamp: timestamp, process: process },
+          { timeStamp: timestamp, process: process },
+        ];
+      } else {
+        newData = [
+          ...processChartData,
+          { timeStamp: timestamp, process: process },
+        ];
+      }
+      if (newData.length > 30) {
+        newData.shift();
+      }
+      setProcessChartData(newData);
+    }
+  }, [data]);
+
+  const chartConfig = {
+    process: {
+      label: "Process",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Card>
+      <CardContent className="px-6 py-3">
+        <section className="flex flex-col gap-1">
+          <div className="flex items-center justify-between">
+            <p className="text-md font-medium">{"Process"}</p>
+            <section className="flex items-center gap-2">
+              <p className="text-xs text-end w-10 font-medium">{process}</p>
+            </section>
+          </div>
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-[130px] w-full"
+          >
+            <AreaChart
+              accessibilityLayer
+              data={processChartData}
+              margin={{
+                top: 12,
+                left: 12,
+                right: 12,
+              }}
+            >
+              <CartesianGrid vertical={false} />
+              <XAxis
+                dataKey="timeStamp"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                minTickGap={200}
+                interval="preserveStartEnd"
+                tickFormatter={(value) => formatRelativeTime(value)}
+              />
+              <YAxis
+                tickLine={false}
+                axisLine={false}
+                mirror={true}
+                tickMargin={-15}
+              />
+              <Area
+                isAnimationActive={false}
+                dataKey="process"
+                type="step"
+                fill="hsl(var(--chart-2))"
+                fillOpacity={0.3}
+                stroke="hsl(var(--chart-2))"
+              />
+            </AreaChart>
+          </ChartContainer>
+        </section>
+      </CardContent>
+    </Card>
+  );
+}
+
+function MemChart({ data }: { data: NezhaAPI }) {
+  const [memChartData, setMemChartData] = useState([] as memChartData[]);
+
+  const { mem, swap } = formatNezhaInfo(data);
+
+  useEffect(() => {
+    if (data) {
+      const timestamp = Date.now().toString();
+      let newData = [] as memChartData[];
+      if (memChartData.length === 0) {
+        newData = [
+          { timeStamp: timestamp, mem: mem, swap: swap },
+          { timeStamp: timestamp, mem: mem, swap: swap },
+        ];
+      } else {
+        newData = [
+          ...memChartData,
+          { timeStamp: timestamp, mem: mem, swap: swap },
+        ];
+      }
+      if (newData.length > 30) {
+        newData.shift();
+      }
+      setMemChartData(newData);
+    }
+  }, [data]);
+
+  const chartConfig = {
+    mem: {
+      label: "Mem",
+    },
+    swap: {
+      label: "Swap",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Card>
+      <CardContent className="px-6 py-3">
+        <section className="flex flex-col gap-1">
+          <div className="flex items-center">
+            <section className="flex items-center gap-4">
+              <div className="flex flex-col">
+                <p className=" text-xs text-muted-foreground">{"Mem"}</p>
+                <div className="flex items-center gap-2">
+                  <AnimatedCircularProgressBar
+                    className="size-3 text-[0px]"
+                    max={100}
+                    min={0}
+                    value={mem}
+                    primaryColor="hsl(var(--chart-8))"
+                  />
+                  <p className="text-xs font-medium">{mem.toFixed(0)}%</p>
+                </div>
+              </div>
+              <div className="flex flex-col">
+                <p className=" text-xs text-muted-foreground">{"Swap"}</p>
+                <div className="flex items-center gap-2">
+                  <AnimatedCircularProgressBar
+                    className="size-3 text-[0px]"
+                    max={100}
+                    min={0}
+                    value={swap}
+                    primaryColor="hsl(var(--chart-10))"
+                  />
+                  <p className="text-xs font-medium">{swap.toFixed(0)}%</p>
+                </div>
+              </div>
+            </section>
+          </div>
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-[130px] w-full"
+          >
+            <AreaChart
+              accessibilityLayer
+              data={memChartData}
+              margin={{
+                top: 12,
+                left: 12,
+                right: 12,
+              }}
+            >
+              <CartesianGrid vertical={false} />
+              <XAxis
+                dataKey="timeStamp"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                minTickGap={200}
+                interval="preserveStartEnd"
+                tickFormatter={(value) => formatRelativeTime(value)}
+              />
+              <YAxis
+                tickLine={false}
+                axisLine={false}
+                mirror={true}
+                tickMargin={-15}
+                domain={[0, 100]}
+                tickFormatter={(value) => `${value}%`}
+              />
+              <Area
+                isAnimationActive={false}
+                dataKey="mem"
+                type="step"
+                fill="hsl(var(--chart-8))"
+                fillOpacity={0.3}
+                stroke="hsl(var(--chart-8))"
+              />
+              <Area
+                isAnimationActive={false}
+                dataKey="swap"
+                type="step"
+                fill="hsl(var(--chart-10))"
+                fillOpacity={0.3}
+                stroke="hsl(var(--chart-10))"
+              />
+            </AreaChart>
+          </ChartContainer>
+        </section>
+      </CardContent>
+    </Card>
+  );
+}
+
+function DiskChart({ data }: { data: NezhaAPI }) {
+  const [diskChartData, setDiskChartData] = useState([] as diskChartData[]);
+
+  const { disk } = formatNezhaInfo(data);
+
+  useEffect(() => {
+    if (data) {
+      const timestamp = Date.now().toString();
+      let newData = [] as diskChartData[];
+      if (diskChartData.length === 0) {
+        newData = [
+          { timeStamp: timestamp, disk: disk },
+          { timeStamp: timestamp, disk: disk },
+        ];
+      } else {
+        newData = [...diskChartData, { timeStamp: timestamp, disk: disk }];
+      }
+      if (newData.length > 30) {
+        newData.shift();
+      }
+      setDiskChartData(newData);
+    }
+  }, [data]);
+
+  const chartConfig = {
+    disk: {
+      label: "Disk",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Card>
+      <CardContent className="px-6 py-3">
+        <section className="flex flex-col gap-1">
+          <div className="flex items-center justify-between">
+            <p className="text-md font-medium">{"Disk"}</p>
+            <section className="flex items-center gap-2">
+              <p className="text-xs text-end w-10 font-medium">
+                {disk.toFixed(0)}%
+              </p>
+              <AnimatedCircularProgressBar
+                className="size-3 text-[0px]"
+                max={100}
+                min={0}
+                value={disk}
+                primaryColor="hsl(var(--chart-5))"
+              />
+            </section>
+          </div>
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-[130px] w-full"
+          >
+            <AreaChart
+              accessibilityLayer
+              data={diskChartData}
+              margin={{
+                top: 12,
+                left: 12,
+                right: 12,
+              }}
+            >
+              <CartesianGrid vertical={false} />
+              <XAxis
+                dataKey="timeStamp"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                minTickGap={200}
+                interval="preserveStartEnd"
+                tickFormatter={(value) => formatRelativeTime(value)}
+              />
+              <YAxis
+                tickLine={false}
+                axisLine={false}
+                mirror={true}
+                tickMargin={-15}
+                domain={[0, 100]}
+                tickFormatter={(value) => `${value}%`}
+              />
+              <Area
+                isAnimationActive={false}
+                dataKey="disk"
+                type="step"
+                fill="hsl(var(--chart-5))"
+                fillOpacity={0.3}
+                stroke="hsl(var(--chart-5))"
+              />
+            </AreaChart>
+          </ChartContainer>
+        </section>
+      </CardContent>
+    </Card>
+  );
+}
+
+function NetworkChart({ data }: { data: NezhaAPI }) {
+  const [networkChartData, setNetworkChartData] = useState(
+    [] as networkChartData[],
+  );
+
+  const { up, down } = formatNezhaInfo(data);
+
+  useEffect(() => {
+    if (data) {
+      const timestamp = Date.now().toString();
+      let newData = [] as networkChartData[];
+      if (networkChartData.length === 0) {
+        newData = [
+          { timeStamp: timestamp, upload: up, download: down },
+          { timeStamp: timestamp, upload: up, download: down },
+        ];
+      } else {
+        newData = [
+          ...networkChartData,
+          { timeStamp: timestamp, upload: up, download: down },
+        ];
+      }
+      if (newData.length > 30) {
+        newData.shift();
+      }
+      setNetworkChartData(newData);
+    }
+  }, [data]);
+
+  let maxDownload = Math.max(...networkChartData.map((item) => item.download));
+  maxDownload = Math.ceil(maxDownload);
+  if (maxDownload < 1) {
+    maxDownload = 1;
+  }
+
+  const chartConfig = {
+    upload: {
+      label: "Upload",
+    },
+    download: {
+      label: "Download",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Card>
+      <CardContent className="px-6 py-3">
+        <section className="flex flex-col gap-1">
+          <div className="flex items-center">
+            <section className="flex items-center gap-4">
+              <div className="flex flex-col w-20">
+                <p className="text-xs text-muted-foreground">{"Upload"}</p>
+                <div className="flex items-center gap-1">
+                  <span className="relative inline-flex  size-1.5 rounded-full bg-[hsl(var(--chart-1))]"></span>
+                  <p className="text-xs font-medium">{up.toFixed(2)} M/s</p>
+                </div>
+              </div>
+              <div className="flex flex-col w-20">
+                <p className=" text-xs text-muted-foreground">{"Download"}</p>
+                <div className="flex items-center gap-1">
+                  <span className="relative inline-flex  size-1.5 rounded-full bg-[hsl(var(--chart-4))]"></span>
+                  <p className="text-xs font-medium">{down.toFixed(2)} M/s</p>
+                </div>
+              </div>
+            </section>
+          </div>
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-[130px] w-full"
+          >
+            <LineChart
+              accessibilityLayer
+              data={networkChartData}
+              margin={{
+                top: 12,
+                left: 12,
+                right: 12,
+              }}
+            >
+              <CartesianGrid vertical={false} />
+              <XAxis
+                dataKey="timeStamp"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                minTickGap={200}
+                interval="preserveStartEnd"
+                tickFormatter={(value) => formatRelativeTime(value)}
+              />
+              <YAxis
+                tickLine={false}
+                axisLine={false}
+                mirror={true}
+                tickMargin={-15}
+                type="number"
+                minTickGap={50}
+                interval="preserveStartEnd"
+                domain={[1, maxDownload]}
+                tickFormatter={(value) => `${value.toFixed(0)}M/s`}
+              />
+              <Line
+                isAnimationActive={false}
+                dataKey="upload"
+                type="linear"
+                stroke="hsl(var(--chart-1))"
+                strokeWidth={1}
+                dot={false}
+              />
+              <Line
+                isAnimationActive={false}
+                dataKey="download"
+                type="linear"
+                stroke="hsl(var(--chart-4))"
+                strokeWidth={1}
+                dot={false}
+              />
+            </LineChart>
+          </ChartContainer>
+        </section>
+      </CardContent>
+    </Card>
+  );
+}
+
+function ConnectChart({ data }: { data: NezhaAPI }) {
+  const [connectChartData, setConnectChartData] = useState(
+    [] as connectChartData[],
+  );
+
+  const { tcp, udp } = formatNezhaInfo(data);
+
+  useEffect(() => {
+    if (data) {
+      const timestamp = Date.now().toString();
+      let newData = [] as connectChartData[];
+      if (connectChartData.length === 0) {
+        newData = [
+          { timeStamp: timestamp, tcp: tcp, udp: udp },
+          { timeStamp: timestamp, tcp: tcp, udp: udp },
+        ];
+      } else {
+        newData = [
+          ...connectChartData,
+          { timeStamp: timestamp, tcp: tcp, udp: udp },
+        ];
+      }
+      if (newData.length > 30) {
+        newData.shift();
+      }
+      setConnectChartData(newData);
+    }
+  }, [data]);
+
+  const chartConfig = {
+    tcp: {
+      label: "TCP",
+    },
+    udp: {
+      label: "UDP",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Card>
+      <CardContent className="px-6 py-3">
+        <section className="flex flex-col gap-1">
+          <div className="flex items-center">
+            <section className="flex items-center gap-4">
+              <div className="flex flex-col w-12">
+                <p className="text-xs text-muted-foreground">TCP</p>
+                <div className="flex items-center gap-1">
+                  <span className="relative inline-flex  size-1.5 rounded-full bg-[hsl(var(--chart-1))]"></span>
+                  <p className="text-xs font-medium">{tcp}</p>
+                </div>
+              </div>
+              <div className="flex flex-col w-12">
+                <p className=" text-xs text-muted-foreground">UDP</p>
+                <div className="flex items-center gap-1">
+                  <span className="relative inline-flex  size-1.5 rounded-full bg-[hsl(var(--chart-4))]"></span>
+                  <p className="text-xs font-medium">{udp}</p>
+                </div>
+              </div>
+            </section>
+          </div>
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-[130px] w-full"
+          >
+            <LineChart
+              accessibilityLayer
+              data={connectChartData}
+              margin={{
+                top: 12,
+                left: 12,
+                right: 12,
+              }}
+            >
+              <CartesianGrid vertical={false} />
+              <XAxis
+                dataKey="timeStamp"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                minTickGap={200}
+                interval="preserveStartEnd"
+                tickFormatter={(value) => formatRelativeTime(value)}
+              />
+              <YAxis
+                tickLine={false}
+                axisLine={false}
+                mirror={true}
+                tickMargin={-15}
+                type="number"
+                interval="preserveStartEnd"
+              />
+              <Line
+                isAnimationActive={false}
+                dataKey="tcp"
+                type="linear"
+                stroke="hsl(var(--chart-1))"
+                strokeWidth={1}
+                dot={false}
+              />
+              <Line
+                isAnimationActive={false}
+                dataKey="udp"
+                type="linear"
+                stroke="hsl(var(--chart-4))"
+                strokeWidth={1}
+                dot={false}
+              />
+            </LineChart>
+          </ChartContainer>
+        </section>
+      </CardContent>
+    </Card>
+  );
+}

src/components/ServerDetailOverview.tsx

@@ -0,0 +1,171 @@
+import { BackIcon } from "@/components/Icon";
+import { ServerDetailLoading } from "@/components/loading/ServerDetailLoading";
+import ServerFlag from "@/components/ServerFlag";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils";
+import { NezhaAPIResponse } from "@/types/nezha-api";
+import { useNavigate, useParams } from "react-router-dom";
+import useWebSocket from "react-use-websocket";
+
+export default function ServerDetailOverview() {
+  const navigate = useNavigate();
+  const { id } = useParams();
+  const { lastMessage, readyState } = useWebSocket("/api/v1/ws/server", {
+    shouldReconnect: () => true,
+    reconnectInterval: 3000,
+  });
+
+  // 检查连接状态
+  if (readyState !== 1) {
+    return (
+      <div className="flex flex-col items-center justify-center">
+        <p className="font-semibold text-sm">connecting...</p>
+      </div>
+    );
+  }
+
+  // 解析消息
+  const nezhaWsData = lastMessage
+    ? (JSON.parse(lastMessage.data) as NezhaAPIResponse)
+    : null;
+
+  if (!nezhaWsData) {
+    return <ServerDetailLoading />;
+  }
+
+  const server = nezhaWsData.servers.find((s) => s.id === Number(id));
+
+  if (!server) {
+    return <ServerDetailLoading />;
+  }
+
+  const { name, online, uptime, version } = formatNezhaInfo(server);
+
+  return (
+    <div>
+      <div
+        onClick={() => navigate("/")}
+        className="flex flex-none cursor-pointer font-semibold leading-none items-center break-all tracking-tight gap-0.5 text-xl"
+      >
+        <BackIcon />
+        {name}
+      </div>
+      <section className="flex flex-wrap gap-2 mt-3">
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{"Status"}</p>
+              <Badge
+                className={cn(
+                  "text-[9px] rounded-[6px] w-fit px-1 py-0 -mt-[0.3px] dark:text-white",
+                  {
+                    " bg-green-800": online,
+                    " bg-red-600": !online,
+                  },
+                )}
+              >
+                {online ? "Online" : "Offline"}
+              </Badge>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{"Uptime"}</p>
+              <div className="text-xs">
+                {" "}
+                {online ? (uptime / 86400).toFixed(0) : "N/A"} {"Days"}{" "}
+              </div>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{"Version"}</p>
+              <div className="text-xs">{version || "Unknown"} </div>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{"Arch"}</p>
+              <div className="text-xs">{server.host.arch || "Unknown"} </div>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{"Mem"}</p>
+              <div className="text-xs">
+                {formatBytes(server.host.mem_total)}
+              </div>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{"Disk"}</p>
+              <div className="text-xs">
+                {formatBytes(server.host.disk_total)}
+              </div>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{"Region"}</p>
+              <section className="flex items-start gap-1">
+                <div className="text-xs text-start">
+                  {server.host.country_code?.toUpperCase() || "Unknown"}
+                </div>
+                {server.host.country_code && (
+                  <ServerFlag
+                    className="text-[11px] -mt-[1px]"
+                    country_code={server.host.country_code}
+                  />
+                )}
+              </section>
+            </section>
+          </CardContent>
+        </Card>
+      </section>
+      <section className="flex flex-wrap gap-2 mt-1">
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{"System"}</p>
+              {server.host.platform ? (
+                <div className="text-xs">
+                  {" "}
+                  {server.host.platform || "Unknown"} -{" "}
+                  {server.host.platform_version}{" "}
+                </div>
+              ) : (
+                <div className="text-xs">Unknown</div>
+              )}
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{"CPU"}</p>
+              {server.host.cpu ? (
+                <div className="text-xs"> {server.host.cpu}</div>
+              ) : (
+                <div className="text-xs">Unknown</div>
+              )}
+            </section>
+          </CardContent>
+        </Card>
+      </section>
+    </div>
+  );
+}

src/components/loading/ServerDetailLoading.tsx

@@ -1,4 +1,3 @@
-
 import { Skeleton } from "@/components/ui/skeleton";
 import { BackIcon } from "../Icon";
 import { useNavigate } from "react-router-dom";

src/components/ui/animated-circular-progress-bar.tsx

@@ -0,0 +1,107 @@
+import { cn } from "@/lib/utils";
+
+interface Props {
+  max: number;
+  value: number;
+  min: number;
+  className?: string;
+  primaryColor?: string;
+}
+
+export default function AnimatedCircularProgressBar({
+  max = 100,
+  min = 0,
+  value = 0,
+  primaryColor,
+  className,
+}: Props) {
+  const circumference = 2 * Math.PI * 45;
+  const percentPx = circumference / 100;
+  const currentPercent = ((value - min) / (max - min)) * 100;
+
+  return (
+    <div
+      className={cn("relative size-40 text-2xl font-semibold", className)}
+      style={
+        {
+          "--circle-size": "100px",
+          "--circumference": circumference,
+          "--percent-to-px": `${percentPx}px`,
+          "--gap-percent": "5",
+          "--offset-factor": "0",
+          "--transition-length": "1s",
+          "--transition-step": "200ms",
+          "--delay": "0s",
+          "--percent-to-deg": "3.6deg",
+          transform: "translateZ(0)",
+        } as React.CSSProperties
+      }
+    >
+      <svg
+        fill="none"
+        className="size-full"
+        strokeWidth="2"
+        viewBox="0 0 100 100"
+      >
+        {currentPercent <= 90 && currentPercent >= 0 && (
+          <circle
+            cx="50"
+            cy="50"
+            r="45"
+            strokeWidth="10"
+            strokeDashoffset="0"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="opacity-100 stroke-muted"
+            style={
+              {
+                "--stroke-percent": 90 - currentPercent,
+                "--offset-factor-secondary": "calc(1 - var(--offset-factor))",
+                strokeDasharray:
+                  "calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)",
+                transform:
+                  "rotate(calc(1turn - 90deg - (var(--gap-percent) * var(--percent-to-deg) * var(--offset-factor-secondary)))) scaleY(-1)",
+                transition: "all var(--transition-length) ease var(--delay)",
+                transformOrigin:
+                  "calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)",
+              } as React.CSSProperties
+            }
+          />
+        )}
+        <circle
+          cx="50"
+          cy="50"
+          r="45"
+          strokeWidth="10"
+          strokeDashoffset="0"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className={cn("opacity-100 stroke-current", {
+            "stroke-[var(--stroke-primary-color)]": primaryColor,
+          })}
+          style={
+            {
+              "--stroke-primary-color": primaryColor,
+              "--stroke-percent": currentPercent,
+              strokeDasharray:
+                "calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)",
+              transition:
+                "var(--transition-length) ease var(--delay),stroke var(--transition-length) ease var(--delay)",
+              transitionProperty: "stroke-dasharray,transform",
+              transform:
+                "rotate(calc(-90deg + var(--gap-percent) * var(--offset-factor) * var(--percent-to-deg)))",
+              transformOrigin:
+                "calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)",
+            } as React.CSSProperties
+          }
+        />
+      </svg>
+      <span
+        data-current-value={currentPercent}
+        className="duration-[var(--transition-length)] delay-[var(--delay)] absolute inset-0 m-auto size-fit ease-linear animate-in fade-in"
+      >
+        {currentPercent}
+      </span>
+    </div>
+  );
+}

src/components/ui/badge.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
@@ -20,8 +20,8 @@ const badgeVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
@@ -30,7 +30,7 @@ export interface BadgeProps
 function Badge({ className, variant, ...props }: BadgeProps) {
   return (
     <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };

src/components/ui/chart.tsx

@@ -0,0 +1,363 @@
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+import { cn } from "@/lib/utils";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  );
+};
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+
+  return context;
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig;
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >["children"];
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+});
+ChartContainer.displayName = "Chart";
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([_, config]) => config.theme || config.color,
+  );
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join("\n")}
+}
+`,
+          )
+          .join("\n"),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<"div"> & {
+      hideLabel?: boolean;
+      hideIndicator?: boolean;
+      indicator?: "line" | "dot" | "dashed";
+      nameKey?: string;
+      labelKey?: string;
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref,
+  ) => {
+    const { config } = useChart();
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null;
+      }
+
+      const [item] = payload;
+      const key = `${labelKey || item.dataKey || item.name || "value"}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
+      const value =
+        !labelKey && typeof label === "string"
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label;
+
+      if (labelFormatter) {
+        return (
+          <div className={cn("font-medium", labelClassName)}>
+            {labelFormatter(value, payload)}
+          </div>
+        );
+      }
+
+      if (!value) {
+        return null;
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey,
+    ]);
+
+    if (!active || !payload?.length) {
+      return null;
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className,
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor = color || item.payload.fill || item.color;
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center",
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            },
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center",
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value && (
+                        <span className="font-mono font-medium tabular-nums text-foreground">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  },
+);
+ChartTooltipContent.displayName = "ChartTooltip";
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean;
+      nameKey?: string;
+    }
+>(
+  (
+    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+    ref,
+  ) => {
+    const { config } = useChart();
+
+    if (!payload?.length) {
+      return null;
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex items-center justify-center gap-4",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
+          className,
+        )}
+      >
+        {payload.map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          );
+        })}
+      </div>
+    );
+  },
+);
+ChartLegendContent.displayName = "ChartLegend";
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string,
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string;
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config];
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+};

src/pages/ServerDetail.tsx

@@ -1,173 +1,11 @@
-
-import { BackIcon } from "@/components/Icon";
-import { ServerDetailLoading } from "@/components/loading/ServerDetailLoading";
-import ServerFlag from "@/components/ServerFlag";
-import { Badge } from "@/components/ui/badge";
-import { Card, CardContent } from "@/components/ui/card";
-import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils";
-import { NezhaAPIResponse } from "@/types/nezha-api";
-import { useNavigate, useParams } from "react-router-dom";
-import useWebSocket from "react-use-websocket";
-
+import ServerDetailChart from "@/components/ServerDetailChart";
+import ServerDetailOverview from "@/components/ServerDetailOverview";
 
 export default function ServerDetail() {
-  const navigate = useNavigate();
-  const { id } = useParams();
-  const { lastMessage, readyState } = useWebSocket("/api/v1/ws/server", {
-    shouldReconnect: () => true,
-    reconnectInterval: 3000,
-  });
-
-
-  // 检查连接状态
-  if (readyState !== 1) {
   return (
-      <div className="flex flex-col items-center justify-center">
-        <p className="font-semibold text-sm">connecting...</p>
-      </div>
-    );
-  }
-
-  // 解析消息
-  const nezhaWsData = lastMessage
-    ? (JSON.parse(lastMessage.data) as NezhaAPIResponse)
-    : null;
-
-  if (!nezhaWsData) {
-    return <ServerDetailLoading />;
-  }
-
-  const server = nezhaWsData.servers.find((s) => s.id === Number(id));
-
-  if (!server) {
-    return <ServerDetailLoading />;
-  }
-
-  const { name, online,uptime,version } =
-    formatNezhaInfo(server);
-  
-
-
-  return (
-    <div className="mx-auto w-full max-w-5xl px-0">
-      <div
-        onClick={() => navigate("/")}
-        className="flex flex-none cursor-pointer font-semibold leading-none items-center break-all tracking-tight gap-0.5 text-xl"
-      >
-        <BackIcon />
-        {name}
-      </div>
-      <section className="flex flex-wrap gap-2 mt-3">
-        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-xs text-muted-foreground">{"Status"}</p>
-              <Badge
-                className={cn(
-                  "text-[9px] rounded-[6px] w-fit px-1 py-0 -mt-[0.3px] dark:text-white",
-                  {
-                    " bg-green-800": online,
-                    " bg-red-600": !online,
-                  },
-                )}
-              >
-                {online ? "Online" : "Offline"}
-              </Badge>
-            </section>
-          </CardContent>
-        </Card>
-        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-xs text-muted-foreground">{"Uptime"}</p>
-              <div className="text-xs">
-                {" "}
-                {online ? (uptime / 86400).toFixed(0) : "N/A"}{" "}
-                {"Days"}{" "}
-              </div>
-            </section>
-          </CardContent>
-        </Card>
-        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-xs text-muted-foreground">{"Version"}</p>
-              <div className="text-xs">{version || "Unknown"} </div>
-            </section>
-          </CardContent>
-        </Card>
-        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-xs text-muted-foreground">{"Arch"}</p>
-              <div className="text-xs">{server.host.arch || "Unknown"} </div>
-            </section>
-          </CardContent>
-        </Card>
-        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-xs text-muted-foreground">{"Mem"}</p>
-              <div className="text-xs">{formatBytes(server.host.mem_total)}</div>
-            </section>
-          </CardContent>
-        </Card>
-        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-xs text-muted-foreground">{"Disk"}</p>
-              <div className="text-xs">{formatBytes(server.host.disk_total)}</div>
-            </section>
-          </CardContent>
-        </Card>
-        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-xs text-muted-foreground">{"Region"}</p>
-              <section className="flex items-start gap-1">
-                <div className="text-xs text-start">
-                  {server.host.country_code?.toUpperCase() || "Unknown"}
-                </div>
-                {server.host.country_code && (<ServerFlag
-                  className="text-[11px] -mt-[1px]"
-                  country_code={server.host.country_code}
-                />)}
-                
-              </section>
-            </section>
-          </CardContent>
-        </Card>
-      </section>
-      <section className="flex flex-wrap gap-2 mt-1">
-        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-xs text-muted-foreground">{"System"}</p>
-              {server.host.platform ? (
-                <div className="text-xs">
-                  {" "}
-                  {server.host.platform || "Unknown"} -{" "}
-                  {server.host.platform_version}{" "}
-                </div>
-              ) : (
-                <div className="text-xs">Unknown</div>
-              )}
-            </section>
-          </CardContent>
-        </Card>
-        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-xs text-muted-foreground">{"CPU"}</p>
-              {server.host.cpu ? (
-                <div className="text-xs"> {server.host.cpu}</div>
-              ) : (
-                <div className="text-xs">Unknown</div>
-              )}
-            </section>
-          </CardContent>
-        </Card>
-      </section>
+    <div className="mx-auto w-full max-w-5xl px-0 flex flex-col gap-4">
+      <ServerDetailOverview />
+      <ServerDetailChart />
     </div>
   );
 }