feat: add detail charts

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

@@ -1,32 +1,66 @@
-"use client"
+"use client";
 
 import AnimatedCircularProgressBar from "@/components/ui/animated-circular-progress-bar";
 import { Card, CardContent } from "@/components/ui/card";
-import useSWR from "swr";
-import { NezhaAPISafe } from "../../types/nezha-api";
-import { formatNezhaInfo, formatRelativeTime, formatTime, nezhaFetcher } from "@/lib/utils";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
 import getEnv from "@/lib/env-entry";
-import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
-import { Area, AreaChart, CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
+import {
+  formatNezhaInfo,
+  formatRelativeTime,
+  formatTime,
+  nezhaFetcher,
+} from "@/lib/utils";
 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,
@@ -59,10 +93,13 @@ export default function ServerDetailChartClient({
   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 }) {
@@ -73,10 +110,7 @@ function CpuChart({ data }: { data: NezhaAPISafe }) {
   useEffect(() => {
     if (data) {
       const timestamp = Date.now().toString();
-            const newData = [
-                ...cpuChartData,
-                { timeStamp: timestamp, cpu: cpu },
-            ];
+      const newData = [...cpuChartData, { timeStamp: timestamp, cpu: cpu }];
       if (newData.length > 30) {
         newData.shift();
       }
@@ -88,16 +122,14 @@ function CpuChart({ data }: { data: NezhaAPISafe }) {
     cpu: {
       label: "CPU",
     },
-    } satisfies ChartConfig
+  } 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>
+            <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)}%
@@ -111,7 +143,10 @@ function CpuChart({ data }: { data: NezhaAPISafe }) {
               />
             </section>
           </div>
-                    <ChartContainer config={chartConfig} className="aspect-auto h-[130px] w-full">
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-[130px] w-full"
+          >
             <AreaChart
               accessibilityLayer
               data={cpuChartData}
@@ -152,7 +187,89 @@ function CpuChart({ data }: { data: NezhaAPISafe }) {
         </section>
       </CardContent>
     </Card>
-    )
+  );
+}
+
+function ProcessChart({ data }: { data: NezhaAPISafe }) {
+  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">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 }) {
@@ -181,7 +298,7 @@ function MemChart({ data }: { data: NezhaAPISafe }) {
     swap: {
       label: "Swap",
     },
-    } satisfies ChartConfig
+  } satisfies ChartConfig;
 
   return (
     <Card className=" rounded-sm">
@@ -197,11 +314,9 @@ function MemChart({ data }: { data: NezhaAPISafe }) {
                     max={100}
                     min={0}
                     value={mem}
-                                        primaryColor="hsl(var(--chart-1))"
+                    primaryColor="hsl(var(--chart-8))"
                   />
-                                    <p className="text-xs font-medium">
-                                        {mem.toFixed(0)}%
-                                    </p>
+                  <p className="text-xs font-medium">{mem.toFixed(0)}%</p>
                 </div>
               </div>
               <div className="flex flex-col">
@@ -212,17 +327,17 @@ function MemChart({ data }: { data: NezhaAPISafe }) {
                     max={100}
                     min={0}
                     value={swap}
-                                        primaryColor="hsl(var(--chart-4))"
+                    primaryColor="hsl(var(--chart-10))"
                   />
-                                    <p className="text-xs font-medium">
-                                        {swap.toFixed(0)}%
-                                    </p>
+                  <p className="text-xs font-medium">{swap.toFixed(0)}%</p>
                 </div>
               </div>
-
             </section>
           </div>
-                    <ChartContainer config={chartConfig} className="aspect-auto h-[130px] w-full">
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-[130px] w-full"
+          >
             <AreaChart
               accessibilityLayer
               data={memChartData}
@@ -254,30 +369,118 @@ function MemChart({ data }: { data: NezhaAPISafe }) {
                 isAnimationActive={false}
                 dataKey="mem"
                 type="step"
-                                fill="hsl(var(--chart-1))"
+                fill="hsl(var(--chart-8))"
                 fillOpacity={0.3}
-                                stroke="hsl(var(--chart-1))"
+                stroke="hsl(var(--chart-8))"
               />
               <Area
                 isAnimationActive={false}
                 dataKey="swap"
                 type="step"
-                                fill="hsl(var(--chart-4))"
+                fill="hsl(var(--chart-10))"
                 fillOpacity={0.3}
-                                stroke="hsl(var(--chart-4))"
+                stroke="hsl(var(--chart-10))"
               />
             </AreaChart>
           </ChartContainer>
         </section>
       </CardContent>
     </Card>
-    )
-
+  );
 }
 
+function DiskChart({ data }: { data: NezhaAPISafe }) {
+  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">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 [networkChartData, setNetworkChartData] = useState([] as networkChartData[]);
+  const [networkChartData, setNetworkChartData] = useState(
+    [] as networkChartData[],
+  );
 
   const { up, down } = formatNezhaInfo(data);
 
@@ -308,7 +511,7 @@ function NetworkChart({ data }: { data: NezhaAPISafe }) {
     download: {
       label: "Download",
     },
-    } satisfies ChartConfig
+  } satisfies ChartConfig;
 
   return (
     <Card className=" rounded-sm">
@@ -320,24 +523,22 @@ function NetworkChart({ data }: { data: NezhaAPISafe }) {
                 <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>
+                  <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>
+                  <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">
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-[130px] w-full"
+          >
             <LineChart
               accessibilityLayer
               data={networkChartData}
@@ -389,5 +590,112 @@ function NetworkChart({ data }: { data: NezhaAPISafe }) {
         </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

@@ -2,7 +2,6 @@
 
 import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
 import { BackIcon } from "@/components/Icon";
-import AnimatedCircularProgressBar from "@/components/ui/animated-circular-progress-bar";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent } from "@/components/ui/card";
 import getEnv from "@/lib/env-entry";
@@ -50,14 +49,14 @@ export default function ServerDetailClient({
         <BackIcon />
         {data?.name}
       </div>
-            <section className="flex flex-wrap gap-2 mt-2">
+      <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-xs rounded-[6px] w-fit px-1 py-0 dark:text-white",
+                  "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,
@@ -84,9 +83,7 @@ export default function ServerDetailClient({
           <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">
-                                {data?.host.Version || "Unknown"}{" "}
-                            </div>
+              <div className="text-xs">{data?.host.Version || "Unknown"} </div>
             </section>
           </CardContent>
         </Card>
@@ -94,9 +91,7 @@ export default function ServerDetailClient({
           <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">
-                                {data?.host.Arch || "Unknown"}{" "}
-                            </div>
+              <div className="text-xs">{data?.host.Arch || "Unknown"} </div>
             </section>
           </CardContent>
         </Card>
@@ -104,9 +99,7 @@ export default function ServerDetailClient({
           <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(data?.host.MemTotal)}
-                            </div>
+              <div className="text-xs">{formatBytes(data?.host.MemTotal)}</div>
             </section>
           </CardContent>
         </Card>
@@ -114,9 +107,7 @@ export default function ServerDetailClient({
           <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(data?.host.DiskTotal)}
-                            </div>
+              <div className="text-xs">{formatBytes(data?.host.DiskTotal)}</div>
             </section>
           </CardContent>
         </Card>
@@ -131,7 +122,10 @@ export default function ServerDetailClient({
                   {" "}
                   {data?.host.Platform || "Unknown"} -{" "}
                   {data?.host.PlatformVersion}{" "}
-                                </div>) : <div className="text-xs">Unknown</div>}
+                </div>
+              ) : (
+                <div className="text-xs">Unknown</div>
+              )}
             </section>
           </CardContent>
         </Card>
@@ -140,10 +134,10 @@ export default function ServerDetailClient({
             <section className="flex flex-col items-start gap-0.5">
               <p className="text-xs text-muted-foreground">CPU</p>
               {data?.host.CPU ? (
-                                <div className="text-xs">
-                                    {" "}
-                                    {data?.host.CPU}
-                                </div>) : <div className="text-xs">Unknown</div>}
+                <div className="text-xs"> {data?.host.CPU}</div>
+              ) : (
+                <div className="text-xs">Unknown</div>
+              )}
             </section>
           </CardContent>
         </Card>

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

@@ -1,12 +1,13 @@
-import ServerDetailClient from "@/app/[locale]/(main)/ClientComponents/ServerDetailClient";
 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">
+  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>
-    ;
+  );
 }

lib/utils.ts

@@ -10,11 +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,
   };