Merge pull request #68 from hamster1963/detail-page

feat:detail page

README.md

@@ -37,7 +37,9 @@
 | 英语     | en   | 是           |
 | 日语     | ja   | 是           |
 
-![screen-shot-one](/.github/shot-1.png)
+![screen](/.github/shot-1.png)
-![screen-shot-two](/.github/shot-2.png)
+![screen](/.github/shot-2.png)
-![screen-shot-three](/.github/shot-3.png)
+![screen](/.github/shot-3.png)
-![screen-shot-four](/.github/shot-4.png)
+![screen](/.github/shot-1-dark.png)
+![screen](/.github/shot-2-dark.png)
+![screen](/.github/shot-3-dark.png)

app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx

@@ -0,0 +1,703 @@
+"use client";
+
+import AnimatedCircularProgressBar from "@/components/ui/animated-circular-progress-bar";
+import { Card, CardContent } from "@/components/ui/card";
+import { ChartConfig, ChartContainer } from "@/components/ui/chart";
+import getEnv from "@/lib/env-entry";
+import { formatNezhaInfo, formatRelativeTime, nezhaFetcher } from "@/lib/utils";
+import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  Line,
+  LineChart,
+  XAxis,
+  YAxis,
+} from "recharts";
+import useSWR from "swr";
+
+import { NezhaAPISafe } from "../../types/nezha-api";
+
+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 ServerDetailChartClient({
+  server_id,
+}: {
+  server_id: number;
+}) {
+  const t = useTranslations("ServerDetailChartClient");
+
+  const { data, error } = useSWR<NezhaAPISafe>(
+    `/api/detail?server_id=${server_id}`,
+    nezhaFetcher,
+    {
+      refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 5000,
+    },
+  );
+
+  if (error) {
+    return (
+      <>
+        <div className="flex flex-col items-center justify-center">
+          <p className="text-sm font-medium opacity-40">{error.message}</p>
+          <p className="text-sm font-medium opacity-40">
+            {t("chart_fetch_error_message")}
+          </p>
+        </div>
+      </>
+    );
+  }
+  if (!data) return null;
+
+  return (
+    <section className="grid md:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-3">
+      <CpuChart data={data} />
+      <ProcessChart data={data} />
+      <DiskChart data={data} />
+      <MemChart data={data} />
+      <NetworkChart data={data} />
+      <ConnectChart data={data} />
+    </section>
+  );
+}
+
+function CpuChart({ data }: { data: NezhaAPISafe }) {
+  const [cpuChartData, setCpuChartData] = useState([] as cpuChartData[]);
+
+  const { cpu } = formatNezhaInfo(data);
+
+  useEffect(() => {
+    if (data) {
+      const timestamp = Date.now().toString();
+      const newData = [...cpuChartData, { timeStamp: timestamp, cpu: cpu }];
+      if (newData.length > 30) {
+        newData.shift();
+      }
+      setCpuChartData(newData);
+    }
+  }, [data]);
+
+  const chartConfig = {
+    cpu: {
+      label: "CPU",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Card className=" rounded-sm">
+      <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: NezhaAPISafe }) {
+  const t = useTranslations("ServerDetailChartClient");
+
+  const [processChartData, setProcessChartData] = useState(
+    [] as processChartData[],
+  );
+
+  const { process } = formatNezhaInfo(data);
+
+  useEffect(() => {
+    if (data) {
+      const timestamp = Date.now().toString();
+      const newData = [
+        ...processChartData,
+        { timeStamp: timestamp, process: process },
+      ];
+      if (newData.length > 30) {
+        newData.shift();
+      }
+      setProcessChartData(newData);
+    }
+  }, [data]);
+
+  const chartConfig = {
+    process: {
+      label: "Process",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Card className=" rounded-sm">
+      <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">{t("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: NezhaAPISafe }) {
+  const t = useTranslations("ServerDetailChartClient");
+
+  const [memChartData, setMemChartData] = useState([] as memChartData[]);
+
+  const { mem, swap } = formatNezhaInfo(data);
+
+  useEffect(() => {
+    if (data) {
+      const timestamp = Date.now().toString();
+      const 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 className=" rounded-sm">
+      <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">{t("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">{t("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: NezhaAPISafe }) {
+  const t = useTranslations("ServerDetailChartClient");
+
+  const [diskChartData, setDiskChartData] = useState([] as diskChartData[]);
+
+  const { disk } = formatNezhaInfo(data);
+
+  useEffect(() => {
+    if (data) {
+      const timestamp = Date.now().toString();
+      const newData = [...diskChartData, { timeStamp: timestamp, disk: disk }];
+      if (newData.length > 30) {
+        newData.shift();
+      }
+      setDiskChartData(newData);
+    }
+  }, [data]);
+
+  const chartConfig = {
+    disk: {
+      label: "Disk",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Card className="rounded-sm">
+      <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">{t("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: NezhaAPISafe }) {
+  const t = useTranslations("ServerDetailChartClient");
+
+  const [networkChartData, setNetworkChartData] = useState(
+    [] as networkChartData[],
+  );
+
+  const { up, down } = formatNezhaInfo(data);
+
+  useEffect(() => {
+    if (data) {
+      const timestamp = Date.now().toString();
+      const 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 className=" rounded-sm">
+      <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">{t("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">
+                  {t("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: NezhaAPISafe }) {
+  const [connectChartData, setConnectChartData] = useState(
+    [] as connectChartData[],
+  );
+
+  const { tcp, udp } = formatNezhaInfo(data);
+
+  useEffect(() => {
+    if (data) {
+      const timestamp = Date.now().toString();
+      const 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 className="rounded-sm">
+      <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>
+  );
+}

app/[locale]/(main)/ClientComponents/ServerDetailClient.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
+import { BackIcon } from "@/components/Icon";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import getEnv from "@/lib/env-entry";
+import { cn, formatBytes, nezhaFetcher } from "@/lib/utils";
+import { useLocale, useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+import useSWR from "swr";
+
+import ServerDetailLoading from "./ServerDetailLoading";
+
+export default function ServerDetailClient({
+  server_id,
+}: {
+  server_id: number;
+}) {
+  const t = useTranslations("ServerDetailClient");
+  const router = useRouter();
+  const locale = useLocale();
+  const { data, error } = useSWR<NezhaAPISafe>(
+    `/api/detail?server_id=${server_id}`,
+    nezhaFetcher,
+    {
+      refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 5000,
+    },
+  );
+
+  if (error) {
+    return (
+      <>
+        <div className="flex flex-col items-center justify-center">
+          <p className="text-sm font-medium opacity-40">{error.message}</p>
+          <p className="text-sm font-medium opacity-40">
+            {t("detail_fetch_error_message")}
+          </p>
+        </div>
+      </>
+    );
+  }
+
+  if (!data) return <ServerDetailLoading />;
+
+  return (
+    <div>
+      <div
+        onClick={() => {
+          router.push(`/${locale}/`);
+        }}
+        className="flex flex-none cursor-pointer font-semibold leading-none items-center break-all tracking-tight gap-0.5 text-xl"
+      >
+        <BackIcon />
+        {data?.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">{t("status")}</p>
+              <Badge
+                className={cn(
+                  "text-[10px] rounded-[6px] w-fit px-1 py-0 dark:text-white",
+                  {
+                    " bg-green-800": data?.online_status,
+                    " bg-red-600": !data?.online_status,
+                  },
+                )}
+              >
+                {data?.online_status ? t("Online") : t("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">{t("Uptime")}</p>
+              <div className="text-xs">
+                {" "}
+                {(data?.status.Uptime / 86400).toFixed(0)} {t("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">{t("Version")}</p>
+              <div className="text-xs">{data?.host.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">{t("Arch")}</p>
+              <div className="text-xs">{data?.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">{t("Mem")}</p>
+              <div className="text-xs">{formatBytes(data?.host.MemTotal)}</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">{t("Disk")}</p>
+              <div className="text-xs">{formatBytes(data?.host.DiskTotal)}</div>
+            </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">{t("System")}</p>
+              {data?.host.Platform ? (
+                <div className="text-xs">
+                  {" "}
+                  {data?.host.Platform || "Unknown"} -{" "}
+                  {data?.host.PlatformVersion}{" "}
+                </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">{t("CPU")}</p>
+              {data?.host.CPU ? (
+                <div className="text-xs"> {data?.host.CPU}</div>
+              ) : (
+                <div className="text-xs">Unknown</div>
+              )}
+            </section>
+          </CardContent>
+        </Card>
+      </section>
+    </div>
+  );
+}

app/[locale]/(main)/ClientComponents/ServerDetailLoading.tsx

@@ -0,0 +1,33 @@
+import { BackIcon } from "@/components/Icon";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useLocale } from "next-intl";
+import { useRouter } from "next/navigation";
+
+export default function ServerDetailLoading() {
+  const router = useRouter();
+  const locale = useLocale();
+  return (
+    <div>
+      <div
+        onClick={() => {
+          router.push(`/${locale}/`);
+        }}
+        className="flex flex-none cursor-pointer font-semibold leading-none items-center break-all tracking-tight gap-0.5 text-xl"
+      >
+        <BackIcon />
+        <Skeleton className="h-[20px] w-24 rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+      </div>
+      <Skeleton className="flex flex-wrap gap-2 h-[100px] w-1/2 mt-3 rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+      <Separator className="my-4" />
+      <section className="grid md:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-3">
+        <Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+        <Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+        <Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+        <Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+        <Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+        <Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+      </section>
+    </div>
+  );
+}

app/[locale]/(main)/ClientComponents/ServerOverviewClient.tsx

@@ -15,7 +15,7 @@ export default function ServerOverviewClient() {
   const { data } = useSWR<ServerApi>("/api/server", nezhaFetcher);
   const disableCartoon = getEnv("NEXT_PUBLIC_DisableCartoon") === "true";
   return (
-    <section className="grid grid-cols-2 gap-4 md:grid-cols-4">
+    <section className="grid grid-cols-2 gap-4 lg:grid-cols-4">
       <Card>
         <CardContent className="px-6 py-3">
           <section className="flex flex-col gap-1">
@@ -94,9 +94,14 @@ export default function ServerOverviewClient() {
               {t("p_3463-3530_Totalbandwidth")}
             </p>
             {data ? (
-              <p className="text-lg font-semibold">
+              <section className="flex pt-[4px] items-center gap-2">
-                {formatBytes(data?.total_bandwidth)}
+                <p className="text-[14px]  font-semibold">
+                  ↑{formatBytes(data?.total_out_bandwidth)}
                 </p>
+                <p className="text-[14px]  font-semibold">
+                  ↓{formatBytes(data?.total_in_bandwidth)}
+                </p>
+              </section>
             ) : (
               <div className="flex h-7 items-center">
                 <Loader visible={true} />

app/[locale]/(main)/detail/[id]/page.tsx

@@ -0,0 +1,13 @@
+import ServerDetailChartClient from "@/app/[locale]/(main)/ClientComponents/ServerDetailChartClient";
+import ServerDetailClient from "@/app/[locale]/(main)/ClientComponents/ServerDetailClient";
+import { Separator } from "@/components/ui/separator";
+
+export default function Page({ params }: { params: { id: string } }) {
+  return (
+    <div className="mx-auto grid w-full max-w-5xl gap-2">
+      <ServerDetailClient server_id={Number(params.id)} />
+      <Separator className="mt-1 mb-2" />
+      <ServerDetailChartClient server_id={Number(params.id)} />
+    </div>
+  );
+}

app/[locale]/types/nezha-api.ts

@@ -1,7 +1,8 @@
 export type ServerApi = {
   live_servers: number;
   offline_servers: number;
-  total_bandwidth: number;
+  total_out_bandwidth: number;
+  total_in_bandwidth: number;
   result: NezhaAPISafe[];
 };
 

app/api/detail/route.ts

@@ -0,0 +1,29 @@
+import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
+import { GetServerDetail } from "@/lib/serverFetch";
+import { NextResponse } from "next/server";
+
+export const dynamic = "force-dynamic";
+
+interface NezhaDataResponse {
+  error?: string;
+  data?: NezhaAPISafe;
+}
+
+export async function GET(req: Request) {
+  const { searchParams } = new URL(req.url);
+  const server_id = searchParams.get("server_id");
+  if (!server_id) {
+    return NextResponse.json(
+      { error: "server_id is required" },
+      { status: 400 },
+    );
+  }
+  const response = (await GetServerDetail({
+    server_id: parseInt(server_id),
+  })) as NezhaDataResponse;
+  if (response.error) {
+    console.log(response.error);
+    return NextResponse.json({ error: response.error }, { status: 400 });
+  }
+  return NextResponse.json(response, { status: 200 });
+}

bunfig.toml

@@ -0,0 +1,2 @@
+[install]
+registry = "https://registry.npmmirror.com/"

components/ServerCard.tsx

@@ -36,11 +36,12 @@ export default function ServerCard({
         "flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row"
       }
     >
-      <Popover>
-        <PopoverTrigger asChild>
       <section
-            className="grid items-center gap-2 lg:w-28"
+        className="grid items-center gap-2 lg:w-28 cursor-pointer"
         style={{ gridTemplateColumns: "auto auto 1fr" }}
+        onClick={() => {
+          router.push(`/${locale}/detail/${id}`);
+        }}
       >
         <span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
         <div
@@ -60,14 +61,9 @@ export default function ServerCard({
           {name}
         </p>
       </section>
-        </PopoverTrigger>
-        <PopoverContent side="top">
-          <ServerCardPopover status={props.status} host={props.host} />
-        </PopoverContent>
-      </Popover>
       <div
         onClick={() => {
-          router.push(`/${locale}/${id}`);
+          router.push(`/${locale}/network/${id}`);
         }}
         className="flex flex-col gap-2 cursor-pointer"
       >
@@ -109,7 +105,7 @@ export default function ServerCard({
         {showNetTransfer && (
           <section
             onClick={() => {
-              router.push(`/${locale}/${id}`);
+              router.push(`/${locale}/network/${id}`);
             }}
             className={"flex items-center justify-between gap-1"}
           >

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>
+  );
+}

components/ui/badge.tsx

@@ -3,7 +3,7 @@ import { type VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
 
 const badgeVariants = cva(
-  "inline-flex items-center text-nowarp 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",
+  "inline-flex items-center text-nowarp rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors pointer-events-none focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {

lib/serverFetch.tsx

@@ -36,7 +36,8 @@ export async function GetNezhaData() {
     const data: ServerApi = {
       live_servers: 0,
       offline_servers: 0,
-      total_bandwidth: 0,
+      total_out_bandwidth: 0,
+      total_in_bandwidth: 0,
       result: [],
     };
 
@@ -61,7 +62,8 @@ export async function GetNezhaData() {
           data.live_servers += 1;
           element.online_status = true;
         }
-        data.total_bandwidth += element.status.NetOutTransfer;
+        data.total_out_bandwidth += element.status.NetOutTransfer;
+        data.total_in_bandwidth += element.status.NetInTransfer;
 
         delete element.ipv4;
         delete element.ipv6;
@@ -112,3 +114,55 @@ export async function GetServerMonitor({ server_id }: { server_id: number }) {
     return error;
   }
 }
+
+export async function GetServerDetail({ server_id }: { server_id: number }) {
+  var nezhaBaseUrl = getEnv("NezhaBaseUrl");
+  if (!nezhaBaseUrl) {
+    console.log("NezhaBaseUrl is not set");
+    return { error: "NezhaBaseUrl is not set" };
+  }
+
+  // Remove trailing slash
+  if (nezhaBaseUrl[nezhaBaseUrl.length - 1] === "/") {
+    nezhaBaseUrl = nezhaBaseUrl.slice(0, -1);
+  }
+
+  try {
+    const response = await fetch(
+      nezhaBaseUrl + `/api/v1/server/details?id=${server_id}`,
+      {
+        headers: {
+          Authorization: getEnv("NezhaAuth") as string,
+        },
+        next: {
+          revalidate: 0,
+        },
+      },
+    );
+    const resData = await response.json();
+    const detailDataList = resData.result;
+    if (!detailDataList) {
+      console.log(resData);
+      return { error: "MonitorData fetch failed" };
+    }
+
+    const timestamp = Date.now() / 1000;
+    const detailData = detailDataList.map(
+      (element: MakeOptional<NezhaAPI, "ipv4" | "ipv6" | "valid_ip">) => {
+        if (timestamp - element.last_active > 300) {
+          element.online_status = false;
+        } else {
+          element.online_status = true;
+        }
+        delete element.ipv4;
+        delete element.ipv6;
+        delete element.valid_ip;
+        return element;
+      },
+    )[0];
+
+    return detailData;
+  } catch (error) {
+    return error;
+  }
+}

lib/utils.ts

@@ -10,10 +10,15 @@ export function formatNezhaInfo(serverInfo: NezhaAPISafe) {
   return {
     ...serverInfo,
     cpu: serverInfo.status.CPU,
+    process: serverInfo.status.ProcessCount,
     up: serverInfo.status.NetOutSpeed / 1024 / 1024,
     down: serverInfo.status.NetInSpeed / 1024 / 1024,
     online: serverInfo.online_status,
+    tcp: serverInfo.status.TcpConnCount,
+    udp: serverInfo.status.UdpConnCount,
     mem: (serverInfo.status.MemUsed / serverInfo.host.MemTotal) * 100,
+    swap: (serverInfo.status.SwapUsed / serverInfo.host.SwapTotal) * 100,
+    disk: (serverInfo.status.DiskUsed / serverInfo.host.DiskTotal) * 100,
     stg: (serverInfo.status.DiskUsed / serverInfo.host.DiskTotal) * 100,
     country_code: serverInfo.host.CountryCode,
   };

messages/en.json

@@ -35,6 +35,29 @@
   "NetworkChart": {
     "ServerMonitorCount": "Services"
   },
+  "ServerDetailClient": {
+    "detail_fetch_error_message": "Please check your environment variables and review the server console",
+    "status": "Status",
+    "Online": "Online",
+    "Offline": "Offline",
+    "Uptime": "Uptime",
+    "Days": "Days",
+    "Version": "Version",
+    "Arch": "Arch",
+    "Mem": "Mem",
+    "Disk": "Disk",
+    "System": "System",
+    "CPU": "CPU"
+  },
+  "ServerDetailChartClient": {
+    "chart_fetch_error_message": "Please check your environment variables and review the server console",
+    "Process": "Process",
+    "Disk": "Disk",
+    "Mem": "Mem",
+    "Swap": "Swap",
+    "Upload": "Upload",
+    "Download": "Download"
+  },
   "ThemeSwitcher": {
     "Light": "Light",
     "Dark": "Dark",

messages/ja.json

@@ -35,6 +35,29 @@
   "NetworkChart": {
     "ServerMonitorCount": "サービス"
   },
+  "ServerDetailClient": {
+    "detail_fetch_error_message": "環境変数を確認し、サーバーコンソールを確認してください",
+    "status": "ステータス",
+    "Online": "オンライン",
+    "Offline": "オフライン",
+    "Uptime": "稼働時間",
+    "Days": "日",
+    "Version": "バージョン",
+    "Arch": "アーキテクチャ",
+    "Mem": "メモリ",
+    "Disk": "ディスク",
+    "System": "システム",
+    "CPU": "CPU"
+  },
+  "ServerDetailChartClient": {
+    "chart_fetch_error_message": "環境変数を確認し、サーバーコンソールを確認してください",
+    "Process": "進捗状況",
+    "Disk": "ディスク",
+    "Mem": "メモリ",
+    "Swap": "スワップ",
+    "Upload": "アップロード",
+    "Download": "ダウンロード"
+  },
   "ThemeSwitcher": {
     "Light": "ライト",
     "Dark": "ダーク",

messages/zh-t.json

@@ -35,6 +35,29 @@
   "NetworkChart": {
     "ServerMonitorCount": "個監測服務"
   },
+  "ServerDetailClient": {
+    "detail_fetch_error_message": "獲取伺服器詳情失敗,請檢查您的環境變數並檢查伺服器控制台",
+    "status": "狀態",
+    "Online": "在線",
+    "Offline": "離線",
+    "Uptime": "稼働時間",
+    "Days": "天",
+    "Version": "版本",
+    "Arch": "架構",
+    "Mem": "記憶體",
+    "Disk": "磁碟",
+    "System": "系統",
+    "CPU": "CPU"
+  },
+  "ServerDetailChartClient": {
+    "chart_fetch_error_message": "獲取伺服器詳情失敗,請檢查您的環境變數並檢查伺服器控制台",
+    "Process": "進程",
+    "Disk": "磁碟",
+    "Mem": "記憶體",
+    "Swap": "虛擬記憶體",
+    "Upload": "上傳",
+    "Download": "下載"
+  },
   "ThemeSwitcher": {
     "Light": "亮色",
     "Dark": "暗色",

messages/zh.json

@@ -35,6 +35,29 @@
   "NetworkChart": {
     "ServerMonitorCount": "个监控服务"
   },
+  "ServerDetailClient": {
+    "detail_fetch_error_message": "获取服务器详情失败,请检查您的环境变量并检查服务器控制台",
+    "status": "状态",
+    "Online": "在线",
+    "Offline": "离线",
+    "Uptime": "运行时间",
+    "Days": "天",
+    "Version": "版本",
+    "Arch": "架构",
+    "Mem": "内存",
+    "Disk": "磁盘",
+    "System": "系统",
+    "CPU": "CPU"
+  },
+  "ServerDetailChartClient": {
+    "chart_fetch_error_message": "获取服务器详情失败,请检查您的环境变量并检查服务器控制台",
+    "Process": "进程",
+    "Disk": "磁盘",
+    "Mem": "内存",
+    "Swap": "虚拟内存",
+    "Upload": "上传",
+    "Download": "下载"
+  },
   "ThemeSwitcher": {
     "Light": "亮色",
     "Dark": "暗色",

prettier.config.js

@@ -3,6 +3,7 @@ module.exports = {
   importOrder: ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
   importOrderSeparation: true,
   importOrderSortSpecifiers: true,
+  endOfLine: "auto",
   plugins: [
     "prettier-plugin-tailwindcss",
     "@trivago/prettier-plugin-sort-imports",