mirror of
https://github.com/hamster1963/nezha-dash.git
synced 2025-04-24 21:10:45 +08:00
feat: add detail charts
This commit is contained in:
hamster1963
parent
b83219bbf2
commit
aa07d49166
File diff suppressed because it is too large
Load Diff
@ -2,7 +2,6 @@
|
|||||||
|
|
||||||
import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
|
import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
|
||||||
import { BackIcon } from "@/components/Icon";
|
import { BackIcon } from "@/components/Icon";
|
||||||
import AnimatedCircularProgressBar from "@/components/ui/animated-circular-progress-bar";
|
|
||||||
import { Badge } from "@/components/ui/badge";
|
import { Badge } from "@/components/ui/badge";
|
||||||
import { Card, CardContent } from "@/components/ui/card";
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
import getEnv from "@/lib/env-entry";
|
import getEnv from "@/lib/env-entry";
|
||||||
@ -12,142 +11,137 @@ import { useRouter } from "next/navigation";
|
|||||||
import useSWR from "swr";
|
import useSWR from "swr";
|
||||||
|
|
||||||
export default function ServerDetailClient({
|
export default function ServerDetailClient({
|
||||||
server_id,
|
server_id,
|
||||||
}: {
|
}: {
|
||||||
server_id: number;
|
server_id: number;
|
||||||
}) {
|
}) {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const locale = useLocale();
|
const locale = useLocale();
|
||||||
const { data, error } = useSWR<NezhaAPISafe>(
|
const { data, error } = useSWR<NezhaAPISafe>(
|
||||||
`/api/detail?server_id=${server_id}`,
|
`/api/detail?server_id=${server_id}`,
|
||||||
nezhaFetcher,
|
nezhaFetcher,
|
||||||
{
|
{
|
||||||
refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 5000,
|
refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 5000,
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
if (error) {
|
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")} */}
|
|
||||||
fetch_error_message
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (!data) return null;
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<>
|
||||||
<div
|
<div className="flex flex-col items-center justify-center">
|
||||||
onClick={() => {
|
<p className="text-sm font-medium opacity-40">{error.message}</p>
|
||||||
router.push(`/${locale}/`);
|
<p className="text-sm font-medium opacity-40">
|
||||||
}}
|
{/* {t("chart_fetch_error_message")} */}
|
||||||
className="flex flex-none cursor-pointer font-semibold leading-none items-center break-all tracking-tight gap-0.5 text-xl"
|
fetch_error_message
|
||||||
>
|
</p>
|
||||||
<BackIcon />
|
|
||||||
{data?.name}
|
|
||||||
</div>
|
|
||||||
<section className="flex flex-wrap gap-2 mt-2">
|
|
||||||
<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",
|
|
||||||
{
|
|
||||||
" bg-green-800": data?.online_status,
|
|
||||||
" bg-red-600": !data?.online_status,
|
|
||||||
},
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{data?.online_status ? "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">
|
|
||||||
{" "}
|
|
||||||
{(data?.status.Uptime / 86400).toFixed(0)} 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">
|
|
||||||
{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">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">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">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">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">CPU</p>
|
|
||||||
{data?.host.CPU ? (
|
|
||||||
<div className="text-xs">
|
|
||||||
{" "}
|
|
||||||
{data?.host.CPU}
|
|
||||||
</div>) : <div className="text-xs">Unknown</div>}
|
|
||||||
</section>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</section>
|
|
||||||
</div>
|
</div>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
|
}
|
||||||
|
if (!data) return null;
|
||||||
|
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">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 ? "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">
|
||||||
|
{" "}
|
||||||
|
{(data?.status.Uptime / 86400).toFixed(0)} 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">{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">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">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">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">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">CPU</p>
|
||||||
|
{data?.host.CPU ? (
|
||||||
|
<div className="text-xs"> {data?.host.CPU}</div>
|
||||||
|
) : (
|
||||||
|
<div className="text-xs">Unknown</div>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,12 +1,13 @@
|
|||||||
import ServerDetailClient from "@/app/[locale]/(main)/ClientComponents/ServerDetailClient";
|
|
||||||
import ServerDetailChartClient from "@/app/[locale]/(main)/ClientComponents/ServerDetailChartClient";
|
import ServerDetailChartClient from "@/app/[locale]/(main)/ClientComponents/ServerDetailChartClient";
|
||||||
|
import ServerDetailClient from "@/app/[locale]/(main)/ClientComponents/ServerDetailClient";
|
||||||
import { Separator } from "@/components/ui/separator";
|
import { Separator } from "@/components/ui/separator";
|
||||||
|
|
||||||
export default function Page({ params }: { params: { id: string } }) {
|
export default function Page({ params }: { params: { id: string } }) {
|
||||||
return <div className="mx-auto grid w-full max-w-5xl gap-2">
|
return (
|
||||||
<ServerDetailClient server_id={Number(params.id)} />
|
<div className="mx-auto grid w-full max-w-5xl gap-2">
|
||||||
<Separator className="mt-1 mb-2" />
|
<ServerDetailClient server_id={Number(params.id)} />
|
||||||
<ServerDetailChartClient server_id={Number(params.id)} />
|
<Separator className="mt-1 mb-2" />
|
||||||
</div>
|
<ServerDetailChartClient server_id={Number(params.id)} />
|
||||||
;
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -10,11 +10,15 @@ export function formatNezhaInfo(serverInfo: NezhaAPISafe) {
|
|||||||
return {
|
return {
|
||||||
...serverInfo,
|
...serverInfo,
|
||||||
cpu: serverInfo.status.CPU,
|
cpu: serverInfo.status.CPU,
|
||||||
|
process: serverInfo.status.ProcessCount,
|
||||||
up: serverInfo.status.NetOutSpeed / 1024 / 1024,
|
up: serverInfo.status.NetOutSpeed / 1024 / 1024,
|
||||||
down: serverInfo.status.NetInSpeed / 1024 / 1024,
|
down: serverInfo.status.NetInSpeed / 1024 / 1024,
|
||||||
online: serverInfo.online_status,
|
online: serverInfo.online_status,
|
||||||
|
tcp: serverInfo.status.TcpConnCount,
|
||||||
|
udp: serverInfo.status.UdpConnCount,
|
||||||
mem: (serverInfo.status.MemUsed / serverInfo.host.MemTotal) * 100,
|
mem: (serverInfo.status.MemUsed / serverInfo.host.MemTotal) * 100,
|
||||||
swap: (serverInfo.status.SwapUsed / serverInfo.host.SwapTotal) * 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,
|
stg: (serverInfo.status.DiskUsed / serverInfo.host.DiskTotal) * 100,
|
||||||
country_code: serverInfo.host.CountryCode,
|
country_code: serverInfo.host.CountryCode,
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user