wood/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/woodchen-ink/nezha-dash-v1.git synced 2025-07-18 17:41:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add chart detail

Browse Source
This commit is contained in:
hamster1963 2024-12-01 16:54:39 +08:00
parent 90b87ee0b4
commit 88b264be69
3 changed files with 40 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/ServerDetailChart.tsx
View File

@ -16,6 +16,7 @@ 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";
type cpuChartData = {
timeStamp: string;
@ -317,7 +318,7 @@ function MemChart({ now, data }: { now: number; data: NezhaServer }) {
<Card>
<CardContent className="px-6 py-3">
<section className="flex flex-col gap-1">
<div className="flex items-center">
<div className="flex items-center justify-between">
<section className="flex items-center gap-4">
<div className="flex flex-col">
<p className=" text-xs text-muted-foreground">
@ -350,6 +351,15 @@ function MemChart({ now, data }: { now: number; data: NezhaServer }) {
</div>
</div>
</section>
<section className="flex flex-col items-end gap-0.5">
<div className="flex text-[11px] font-medium items-center gap-2">
{formatBytes(data.state.mem_used)} /{" "}
{formatBytes(data.state.mem_total)}
</div>
<div className="flex text-[11px] font-medium items-center gap-2">
swap: {formatBytes(data.state.swap_used)}
</div>
</section>
</div>
<ChartContainer
config={chartConfig}
@ -443,17 +453,23 @@ function DiskChart({ now, data }: { now: number; data: NezhaServer }) {
<section className="flex flex-col gap-1">
<div className="flex items-center justify-between">
<p className="text-md font-medium">{t("serverDetailChart.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 className="flex flex-col items-end gap-0.5">
<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 className="flex text-[11px] font-medium items-center gap-2">
{formatBytes(data.state.disk_used)} /{" "}
{formatBytes(data.state.disk_total)}
</div>
</section>
</div>
<ChartContainer

14
src/components/ServerDetailOverview.tsx
View File

@ -189,7 +189,7 @@ export default function ServerDetailOverview({
</Card>
</section>
<section className="flex flex-wrap gap-2 mt-1">
<Card className="rounded-[10px] bg-transparent border-none shadow-none">
<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">{"Load"}</p>
@ -198,7 +198,9 @@ export default function ServerDetailOverview({
{server.state.load_1} / {server.state.load_5} /{" "}
{server.state.load_15}
</div>
) : null}
) : (
<div className="text-xs"> {t("serverDetail.unknown")}</div>
)}
</section>
</CardContent>
</Card>
@ -213,7 +215,9 @@ export default function ServerDetailOverview({
{" "}
{formatBytes(server.state.net_out_transfer)}{" "}
</div>
) : null}
) : (
<div className="text-xs"> {t("serverDetail.unknown")}</div>
)}
</section>
</CardContent>
</Card>
@ -228,7 +232,9 @@ export default function ServerDetailOverview({
{" "}
{formatBytes(server.state.net_in_transfer)}{" "}
</div>
) : null}
) : (
<div className="text-xs"> {t("serverDetail.unknown")}</div>
)}
</section>
</CardContent>
</Card>

2
src/types/nezha-api.ts
View File

@ -28,8 +28,10 @@ export interface NezhaServerHost {
export interface NezhaServerStatus {
cpu: number;
mem_used: number;
mem_total: number;
swap_used: number;
disk_used: number;
disk_total: number;
net_in_transfer: number;
net_out_transfer: number;
net_in_speed: number;