+
{platform.includes("Windows") ? (
@@ -126,81 +108,53 @@ export default function ServerCardInline({
)}
-
- {t("serverCard.system")}
-
+
{t("serverCard.system")}
- {platform.includes("Windows")
- ? "Windows"
- : GetOsName(platform)}
+ {platform.includes("Windows") ? "Windows" : GetOsName(platform)}
-
- {t("serverCard.uptime")}
-
+
{t("serverCard.uptime")}
{(uptime / 86400).toFixed(0)} {t("serverCard.days")}
{"CPU"}
-
- {cpu.toFixed(2)}%
-
+
{cpu.toFixed(2)}%
-
- {t("serverCard.mem")}
-
-
- {mem.toFixed(2)}%
-
+
{t("serverCard.mem")}
+
{mem.toFixed(2)}%
-
- {t("serverCard.stg")}
-
-
- {stg.toFixed(2)}%
-
+
{t("serverCard.stg")}
+
{stg.toFixed(2)}%
-
- {t("serverCard.upload")}
-
+
{t("serverCard.upload")}
- {up >= 1024
- ? `${(up / 1024).toFixed(2)}G/s`
- : `${up.toFixed(2)}M/s`}
+ {up >= 1024 ? `${(up / 1024).toFixed(2)}G/s` : `${up.toFixed(2)}M/s`}
-
- {t("serverCard.download")}
-
+
{t("serverCard.download")}
- {down >= 1024
- ? `${(down / 1024).toFixed(2)}G/s`
- : `${down.toFixed(2)}M/s`}
+ {down >= 1024 ? `${(down / 1024).toFixed(2)}G/s` : `${down.toFixed(2)}M/s`}
-
- {t("serverCard.totalUpload")}
-
+
{t("serverCard.totalUpload")}
{formatBytes(net_out_transfer)}
-
- {t("serverCard.totalDownload")}
-
+
{t("serverCard.totalDownload")}
{formatBytes(net_in_transfer)}
@@ -222,10 +176,7 @@ export default function ServerCardInline({
>
{showFlag ? : null}
@@ -241,5 +192,5 @@ export default function ServerCardInline({
- );
+ )
}
diff --git a/src/components/ServerDetailChart.tsx b/src/components/ServerDetailChart.tsx
index 6de61c7..2e14352 100644
--- a/src/components/ServerDetailChart.tsx
+++ b/src/components/ServerDetailChart.tsx
@@ -1,115 +1,92 @@
-import { Card, CardContent } from "@/components/ui/card";
-import { ChartConfig, ChartContainer } from "@/components/ui/chart";
-import { formatNezhaInfo, formatRelativeTime } from "@/lib/utils";
-import { NezhaServer, NezhaWebsocketResponse } from "@/types/nezha-api";
-import { useEffect, useState } from "react";
-import {
- Area,
- AreaChart,
- CartesianGrid,
- Line,
- LineChart,
- XAxis,
- YAxis,
-} from "recharts";
-import { ServerDetailChartLoading } from "./loading/ServerDetailLoading";
-import AnimatedCircularProgressBar from "./ui/animated-circular-progress-bar";
-import { useWebSocketContext } from "@/hooks/use-websocket-context";
-import { useTranslation } from "react-i18next";
-import { formatBytes } from "@/lib/format";
+import { Card, CardContent } from "@/components/ui/card"
+import { ChartConfig, ChartContainer } from "@/components/ui/chart"
+import { useWebSocketContext } from "@/hooks/use-websocket-context"
+import { formatBytes } from "@/lib/format"
+import { formatNezhaInfo, formatRelativeTime } from "@/lib/utils"
+import { NezhaServer, NezhaWebsocketResponse } from "@/types/nezha-api"
+import { useEffect, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { Area, AreaChart, CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"
+
+import { ServerDetailChartLoading } from "./loading/ServerDetailLoading"
+import AnimatedCircularProgressBar from "./ui/animated-circular-progress-bar"
type gpuChartData = {
- timeStamp: string;
- gpu: number;
-};
+ timeStamp: string
+ gpu: number
+}
type cpuChartData = {
- timeStamp: string;
- cpu: number;
-};
+ timeStamp: string
+ cpu: number
+}
type processChartData = {
- timeStamp: string;
- process: number;
-};
+ timeStamp: string
+ process: number
+}
type diskChartData = {
- timeStamp: string;
- disk: number;
-};
+ timeStamp: string
+ disk: number
+}
type memChartData = {
- timeStamp: string;
- mem: number;
- swap: number;
-};
+ timeStamp: string
+ mem: number
+ swap: number
+}
type networkChartData = {
- timeStamp: string;
- upload: number;
- download: number;
-};
+ timeStamp: string
+ upload: number
+ download: number
+}
type connectChartData = {
- timeStamp: string;
- tcp: number;
- udp: number;
-};
+ timeStamp: string
+ tcp: number
+ udp: number
+}
-export default function ServerDetailChart({
- server_id,
-}: {
- server_id: string;
-}) {
- const { lastMessage, connected } = useWebSocketContext();
+export default function ServerDetailChart({ server_id }: { server_id: string }) {
+ const { lastMessage, connected } = useWebSocketContext()
if (!connected) {
- return
;
+ return
}
- const nezhaWsData = lastMessage
- ? (JSON.parse(lastMessage.data) as NezhaWebsocketResponse)
- : null;
+ const nezhaWsData = lastMessage ? (JSON.parse(lastMessage.data) as NezhaWebsocketResponse) : null
if (!nezhaWsData) {
- return
;
+ return
}
- const server = nezhaWsData.servers.find((s) => s.id === Number(server_id));
+ const server = nezhaWsData.servers.find((s) => s.id === Number(server_id))
if (!server) {
- return
;
+ return
}
- const { online } = formatNezhaInfo(nezhaWsData.now, server);
+ const { online } = formatNezhaInfo(nezhaWsData.now, server)
if (!online) {
- return
;
+ return
}
- const gpuStats = server.state.gpu || [];
- const gpuList = server.host.gpu || [];
+ const gpuStats = server.state.gpu || []
+ const gpuList = server.host.gpu || []
return (
{gpuStats.length >= 1 && gpuList.length === gpuStats.length ? (
gpuList.map((gpu, index) => (
-
+
))
) : gpuStats.length > 0 ? (
gpuStats.map((gpu, index) => (
-
+
))
) : (
<>
@@ -120,44 +97,36 @@ export default function ServerDetailChart({
- );
+ )
}
-function GpuChart({
- now,
- gpuStat,
- gpuName,
-}: {
- now: number;
- gpuStat: number;
- gpuName?: string;
-}) {
- const [gpuChartData, setGpuChartData] = useState([] as gpuChartData[]);
+function GpuChart({ now, gpuStat, gpuName }: { now: number; gpuStat: number; gpuName?: string }) {
+ const [gpuChartData, setGpuChartData] = useState([] as gpuChartData[])
useEffect(() => {
if (gpuStat) {
- const timestamp = Date.now().toString();
- let newData = [] as gpuChartData[];
+ const timestamp = Date.now().toString()
+ let newData = [] as gpuChartData[]
if (gpuChartData.length === 0) {
newData = [
{ timeStamp: timestamp, gpu: gpuStat },
{ timeStamp: timestamp, gpu: gpuStat },
- ];
+ ]
} else {
- newData = [...gpuChartData, { timeStamp: timestamp, gpu: gpuStat }];
+ newData = [...gpuChartData, { timeStamp: timestamp, gpu: gpuStat }]
}
if (newData.length > 30) {
- newData.shift();
+ newData.shift()
}
- setGpuChartData(newData);
+ setGpuChartData(newData)
}
- }, [now, gpuStat]);
+ }, [now, gpuStat])
const chartConfig = {
gpu: {
label: "GPU",
},
- } satisfies ChartConfig;
+ } satisfies ChartConfig
return (
@@ -169,9 +138,7 @@ function GpuChart({
{gpuName && GPU: {gpuName}
}
-
- {gpuStat.toFixed(0)}%
-
+ {gpuStat.toFixed(0)}%