root/nezha_dash
1
0
Fork 0
mirror of https://github.com/hamster1963/nezha-dash.git synced 2025-04-24 21:10:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add detail card

Browse Source
This commit is contained in:
hamster1963 2024-10-18 16:46:29 +08:00
parent 7ce2415d75
commit d7f36ce144
7 changed files with 369 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,62 +1,243 @@
"use client"; "use client";
import useSWR from "swr";
import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api"; import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
import { nezhaFetcher } from "@/lib/utils";
import getEnv from "@/lib/env-entry";
import { useRouter } from "next/navigation";
import { useLocale } from "next-intl";
import { BackIcon } from "@/components/Icon"; import { BackIcon } from "@/components/Icon";
import { Card, CardContent } from "@/components/ui/card"; 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 getEnv from "@/lib/env-entry";
import { cn, nezhaFetcher } from "@/lib/utils";
import { useLocale } from "next-intl";
import { useRouter } from "next/navigation";
import useSWR from "swr";
export default function ServerDetailClient({ server_id }: { server_id: number }) { export default function ServerDetailClient({
const router = useRouter(); server_id,
const locale = useLocale(); }: {
const { data, error } = useSWR<NezhaAPISafe>( server_id: number;
`/api/detail?server_id=${server_id}`, }) {
nezhaFetcher, const router = useRouter();
{ const locale = useLocale();
refreshInterval: const { data, error } = useSWR<NezhaAPISafe>(
Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 5000, `/api/detail?server_id=${server_id}`,
}, nezhaFetcher,
); {
refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 5000,
},
);
if (error) {
return ( return (
<div className="mx-auto grid w-full max-w-5xl gap-1"> <>
<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 />
HomeDash
</div>
<section className="flex flex-wrap gap-4 mt-2">
<Card className="rounded-[10px] flex flex-col justify-center">
<CardContent className="px-1.5 py-1">
<section className="flex items-center gap-2">
<p className="text-xs font-semibold">
ID
</p>
<div className="text-xs w-fit"> {server_id} </div>
</section>
</CardContent>
</Card>
<Card className="rounded-[10px]">
<CardContent className="px-1.5 py-1">
<section className="flex items-center gap-2">
<p className="text-xs font-semibold">
Tag
</p>
<Badge className="text-xs rounded-[6px] w-fit px-1 py-0" variant="secondary"> {data?.tag} </Badge>
</section>
</CardContent>
</Card>
</section>
</div> </div>
) </>
);
}
if (!data) return null;
return (
<div className="mx-auto grid w-full max-w-5xl gap-1">
<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-2">
<Card className="rounded-[10px]">
<CardContent className="px-1.5 py-1">
<section className="flex items-center gap-2">
<p className="text-xs font-semibold">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]">
<CardContent className="px-1.5 py-1">
<section className="flex items-center gap-2">
<p className="text-xs font-semibold">Uptime</p>
<Badge
className="text-xs rounded-[6px] w-fit px-1 py-0"
variant="secondary"
>
{" "}
{(data?.status.Uptime / 86400).toFixed(0)} Days{" "}
</Badge>
</section>
</CardContent>
</Card>
<Card className="rounded-[10px]">
<CardContent className="px-1.5 py-1">
<section className="flex items-center gap-2">
<p className="text-xs font-semibold">Tag</p>
<Badge
className="text-xs rounded-[6px] w-fit px-1 py-0"
variant="secondary"
>
{" "}
{data?.tag || "Unknown"}{" "}
</Badge>
</section>
</CardContent>
</Card>
<Card className="rounded-[10px]">
<CardContent className="px-1.5 py-1">
<section className="flex items-center gap-2">
<p className="text-xs font-semibold">Arch</p>
<Badge
className="text-xs rounded-[6px] w-fit px-1 py-0"
variant="secondary"
>
{" "}
{data?.host.Arch || "Unknown"}{" "}
</Badge>
</section>
</CardContent>
</Card>
<Card className="rounded-[10px]">
<CardContent className="px-1.5 py-1">
<section className="flex items-center gap-2">
<p className="text-xs font-semibold">Version</p>
<Badge
className="text-xs rounded-[6px] w-fit px-1 py-0"
variant="secondary"
>
{" "}
{data?.host.Version || "Unknown"}{" "}
</Badge>
</section>
</CardContent>
</Card>
</section>
<section className="flex flex-wrap gap-2 mt-1">
<Card className="rounded-[10px] flex flex-col justify-center">
<CardContent className="px-1.5 py-1">
<section className="flex items-center gap-2">
<p className="text-xs font-semibold">System</p>
{data?.host.Platform ? (
<div className="text-xs w-fit">
{" "}
{data?.host.Platform || "Unknown"} -{" "}
{data?.host.PlatformVersion}{" "}
</div>
) : (
<div className="text-xs w-fit"> Unknown </div>
)}
</section>
</CardContent>
</Card>
<Card className="rounded-[10px] flex flex-col justify-center">
<CardContent className="px-1.5 py-1">
<section className="flex items-center gap-2">
<p className="text-xs font-semibold">CPU</p>
{data?.host.CPU ? (
<div className="text-xs w-fit">
{" "}
{data?.host.CPU || "Unknown"}
</div>
) : (
<div className="text-xs w-fit"> Unknown </div>
)}
</section>
</CardContent>
</Card>
</section>
<section className="flex flex-wrap gap-2 mt-1">
<Card className="rounded-[10px]">
<CardContent className="px-1.5 py-1">
<section className="flex items-center gap-2">
<p className="text-xs font-semibold">CPU</p>
<p className="text-xs text-end w-10 font-medium">
{data?.status.CPU.toFixed(0)}%
</p>
<AnimatedCircularProgressBar
className="size-3 text-[0px]"
max={100}
min={0}
value={data?.status.CPU}
/>
</section>
</CardContent>
</Card>
<Card className="rounded-[10px]">
<CardContent className="px-1.5 py-1">
<section className="flex items-center gap-2">
<p className="text-xs font-semibold">Mem</p>
<p className="text-xs w-10 text-end font-medium">
{((data?.status.MemUsed / data?.host.MemTotal) * 100).toFixed(
0,
)}
%
</p>
<AnimatedCircularProgressBar
className="size-3 text-[0px]"
max={100}
min={0}
value={(data?.status.MemUsed / data?.host.MemTotal) * 100}
/>
</section>
</CardContent>
</Card>
<Card className="rounded-[10px]">
<CardContent className="px-1.5 py-1">
<section className="flex items-center gap-2">
<p className="text-xs font-semibold">Swap</p>
<p className="text-xs w-10 text-end font-medium">
{data?.status.SwapUsed
? (
(data?.status.SwapUsed / data?.host.SwapTotal) *
100
).toFixed(0)
: 0}
%
</p>
<AnimatedCircularProgressBar
className="size-3 text-[0px]"
max={100}
min={0}
value={(data?.status.SwapUsed / data?.host.SwapTotal) * 100}
/>
</section>
</CardContent>
</Card>
<Card className="rounded-[10px]">
<CardContent className="px-1.5 py-1">
<section className="flex items-center gap-2">
<p className="text-xs font-semibold">Disk</p>
<p className="text-xs w-10 text-end font-medium">
{((data?.status.DiskUsed / data?.host.DiskTotal) * 100).toFixed(
0,
)}
%
</p>
<AnimatedCircularProgressBar
className="size-3 text-[0px]"
max={100}
min={0}
value={(data?.status.DiskUsed / data?.host.DiskTotal) * 100}
/>
</section>
</CardContent>
</Card>
</section>
</div>
);
} }

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

@ -1,7 +1,5 @@
import ServerDetailClient from "@/app/[locale]/(main)/ClientComponents/ServerDetailClient"; import ServerDetailClient from "@/app/[locale]/(main)/ClientComponents/ServerDetailClient";
export default function Page({ params }: { params: { id: string } }) { export default function Page({ params }: { params: { id: string } }) {
return ( return <ServerDetailClient server_id={Number(params.id)} />;
<ServerDetailClient server_id={Number(params.id)} />
);
} }

33
app/api/detail/route.ts
View File

@ -10,21 +10,20 @@ interface NezhaDataResponse {
} }
export async function GET(req: Request) { export async function GET(req: Request) {
const { searchParams } = new URL(req.url); const { searchParams } = new URL(req.url);
const server_id = searchParams.get("server_id"); const server_id = searchParams.get("server_id");
if (!server_id) { if (!server_id) {
return NextResponse.json( return NextResponse.json(
{ error: "server_id is required" }, { error: "server_id is required" },
{ status: 400 }, { 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 });
} }
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 });
}

102
components/ui/animated-circular-progress-bar.tsx Normal file
View File

@ -0,0 +1,102 @@
import { cn } from "@/lib/utils";
interface Props {
max: number;
value: number;
min: number;
className?: string;
}
export default function AnimatedCircularProgressBar({
max = 100,
min = 0,
value = 0,
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="opacity-100 stroke-current"
style={
{
"--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>
);
}

2
components/ui/badge.tsx
View File

@ -3,7 +3,7 @@ import { type VariantProps, cva } from "class-variance-authority";
import * as React from "react"; import * as React from "react";
const badgeVariants = cva( 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: { variants: {
variant: { variant: {

24
lib/serverFetch.tsx
View File

@ -145,17 +145,19 @@ export async function GetServerDetail({ server_id }: { server_id: number }) {
} }
const timestamp = Date.now() / 1000; const timestamp = Date.now() / 1000;
const detailData = detailDataList.map((element: MakeOptional<NezhaAPI, "ipv4" | "ipv6" | "valid_ip">) => { const detailData = detailDataList.map(
if (timestamp - element.last_active > 300) { (element: MakeOptional<NezhaAPI, "ipv4" | "ipv6" | "valid_ip">) => {
element.online_status = false; if (timestamp - element.last_active > 300) {
} else { element.online_status = false;
element.online_status = true; } else {
} element.online_status = true;
delete element.ipv4; }
delete element.ipv6; delete element.ipv4;
delete element.valid_ip; delete element.ipv6;
return element; delete element.valid_ip;
})[0]; return element;
},
)[0];
return detailData; return detailData;
} catch (error) { } catch (error) {

1
prettier.config.js
View File

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