Buriburizaemon/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/Buriburizaem0n/nezha-dash-v1.git synced 2026-05-06 13:58:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: use biome

Browse Source
This commit is contained in:
hamster1963
2025-12-28 18:05:02 +08:00
parent 3bfd4ef4d2
commit 29e349505d
115 changed files with 9924 additions and 8381 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ServerDetailSummary.tsx
+96 -81
View File
@@ -1,96 +1,111 @@
"use client"
"use client";
import { Progress } from "@/components/ui/progress"
import { useWebSocketContext } from "@/hooks/use-websocket-context"
import { formatNezhaInfo } from "@/lib/utils"
import { NezhaWebsocketResponse } from "@/types/nezha-api"
import { Progress } from "@/components/ui/progress";
import { useWebSocketContext } from "@/hooks/use-websocket-context";
import { formatNezhaInfo } from "@/lib/utils";
import type { NezhaWebsocketResponse } from "@/types/nezha-api";
export default function ServerDetailSummary({ server_id }: { server_id: number }) {
const { lastMessage, connected } = useWebSocketContext()
export default function ServerDetailSummary({
server_id,
}: {
server_id: number;
}) {
const { lastMessage, connected } = useWebSocketContext();
if (!connected && !lastMessage) {
return null
}
if (!connected && !lastMessage) {
return null;
}
const nezhaWsData = lastMessage ? (JSON.parse(lastMessage.data) as NezhaWebsocketResponse) : null
const nezhaWsData = lastMessage
? (JSON.parse(lastMessage.data) as NezhaWebsocketResponse)
: null;
if (!nezhaWsData) {
return null
}
if (!nezhaWsData) {
return null;
}
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 null
}
if (!server) {
return null;
}
const { cpu, mem, disk, up, down, tcp, udp, process } = formatNezhaInfo(nezhaWsData.now, server)
const { cpu, mem, disk, up, down, tcp, udp, process } = formatNezhaInfo(
nezhaWsData.now,
server,
);
return (
<div className="mb-2 flex flex-wrap items-center gap-4">
<section className="flex w-24 flex-col justify-center gap-1 px-1.5 py-1">
<section className="flex items-center justify-between">
<span className="text-[10px] text-muted-foreground">CPU</span>
<span className="font-medium text-[10px]">{cpu.toFixed(2)}%</span>
</section>
<UsageBar value={cpu} />
</section>
<section className="flex w-24 flex-col justify-center gap-1 px-1.5 py-1">
<section className="flex items-center justify-between">
<span className="text-[10px] text-muted-foreground">Mem</span>
<span className="font-medium text-[10px]">{mem.toFixed(2)}%</span>
</section>
<UsageBar value={mem} />
</section>
<section className="flex w-24 flex-col justify-center gap-1 px-1.5 py-1">
<section className="flex items-center justify-between">
<span className="text-[10px] text-muted-foreground">Disk</span>
<span className="font-medium text-[10px]">{disk.toFixed(2)}%</span>
</section>
<UsageBar value={disk} />
</section>
<section className="flex min-w-[85px] flex-col justify-center px-1.5 py-1">
<section className="flex items-center justify-between gap-4">
<span className="text-[10px] text-muted-foreground">Process</span>
<span className="font-medium text-[10px]">{process}</span>
</section>
</section>
<section className="flex min-w-[70px] flex-col justify-center gap-0.5 px-1.5 py-1">
<section className="flex items-center justify-between gap-4">
<span className="text-[10px] text-muted-foreground">TCP</span>
<span className="font-medium text-[10px]">{tcp}</span>
</section>
<section className="flex items-center justify-between gap-4">
<span className="text-[10px] text-muted-foreground">UDP</span>
<span className="font-medium text-[10px]">{udp}</span>
</section>
</section>
<section className="flex min-w-[120px] flex-col justify-center gap-0.5 px-1.5 py-1">
<section className="flex items-center justify-between gap-4">
<span className="text-[10px] text-muted-foreground">Upload</span>
<span className="font-medium text-[10px]">{up.toFixed(2)}M/s</span>
</section>
<section className="flex items-center justify-between gap-4">
<span className="text-[10px] text-muted-foreground">Download</span>
<span className="font-medium text-[10px]">{down.toFixed(2)}M/s</span>
</section>
</section>
</div>
)
return (
<div className="mb-2 flex flex-wrap items-center gap-4">
<section className="flex w-24 flex-col justify-center gap-1 px-1.5 py-1">
<section className="flex items-center justify-between">
<span className="text-[10px] text-muted-foreground">CPU</span>
<span className="font-medium text-[10px]">{cpu.toFixed(2)}%</span>
</section>
<UsageBar value={cpu} />
</section>
<section className="flex w-24 flex-col justify-center gap-1 px-1.5 py-1">
<section className="flex items-center justify-between">
<span className="text-[10px] text-muted-foreground">Mem</span>
<span className="font-medium text-[10px]">{mem.toFixed(2)}%</span>
</section>
<UsageBar value={mem} />
</section>
<section className="flex w-24 flex-col justify-center gap-1 px-1.5 py-1">
<section className="flex items-center justify-between">
<span className="text-[10px] text-muted-foreground">Disk</span>
<span className="font-medium text-[10px]">{disk.toFixed(2)}%</span>
</section>
<UsageBar value={disk} />
</section>
<section className="flex min-w-[85px] flex-col justify-center px-1.5 py-1">
<section className="flex items-center justify-between gap-4">
<span className="text-[10px] text-muted-foreground">Process</span>
<span className="font-medium text-[10px]">{process}</span>
</section>
</section>
<section className="flex min-w-[70px] flex-col justify-center gap-0.5 px-1.5 py-1">
<section className="flex items-center justify-between gap-4">
<span className="text-[10px] text-muted-foreground">TCP</span>
<span className="font-medium text-[10px]">{tcp}</span>
</section>
<section className="flex items-center justify-between gap-4">
<span className="text-[10px] text-muted-foreground">UDP</span>
<span className="font-medium text-[10px]">{udp}</span>
</section>
</section>
<section className="flex min-w-[120px] flex-col justify-center gap-0.5 px-1.5 py-1">
<section className="flex items-center justify-between gap-4">
<span className="text-[10px] text-muted-foreground">Upload</span>
<span className="font-medium text-[10px]">{up.toFixed(2)}M/s</span>
</section>
<section className="flex items-center justify-between gap-4">
<span className="text-[10px] text-muted-foreground">Download</span>
<span className="font-medium text-[10px]">{down.toFixed(2)}M/s</span>
</section>
</section>
</div>
);
}
type UsageBarProps = {
value: number
}
value: number;
};
function UsageBar({ value }: UsageBarProps) {
return (
<Progress
aria-label={"Server Usage Bar"}
aria-labelledby={"Server Usage Bar"}
value={value}
indicatorClassName={value > 90 ? "bg-red-500" : value > 70 ? "bg-orange-400" : "bg-green-500"}
className={"h-[3px] rounded-sm bg-stone-200 dark:bg-stone-800"}
/>
)
return (
<Progress
aria-label={"Server Usage Bar"}
aria-labelledby={"Server Usage Bar"}
value={value}
indicatorClassName={
value > 90
? "bg-red-500"
: value > 70
? "bg-orange-400"
: "bg-green-500"
}
className={"h-[3px] rounded-sm bg-stone-200 dark:bg-stone-800"}
/>
);
}