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

18
src/components/ServerDetailChart.tsx
View File

@ -16,6 +16,7 @@ import { ServerDetailChartLoading } from "./loading/ServerDetailLoading";
import AnimatedCircularProgressBar from "./ui/animated-circular-progress-bar"; import AnimatedCircularProgressBar from "./ui/animated-circular-progress-bar";
import { useWebSocketContext } from "@/hooks/use-websocket-context"; import { useWebSocketContext } from "@/hooks/use-websocket-context";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { formatBytes } from "@/lib/format";
type cpuChartData = { type cpuChartData = {
timeStamp: string; timeStamp: string;
@ -317,7 +318,7 @@ function MemChart({ now, data }: { now: number; data: NezhaServer }) {
<Card> <Card>
<CardContent className="px-6 py-3"> <CardContent className="px-6 py-3">
<section className="flex flex-col gap-1"> <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"> <section className="flex items-center gap-4">
<div className="flex flex-col"> <div className="flex flex-col">
<p className=" text-xs text-muted-foreground"> <p className=" text-xs text-muted-foreground">
@ -350,6 +351,15 @@ function MemChart({ now, data }: { now: number; data: NezhaServer }) {
</div> </div>
</div> </div>
</section> </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> </div>
<ChartContainer <ChartContainer
config={chartConfig} config={chartConfig}
@ -443,6 +453,7 @@ function DiskChart({ now, data }: { now: number; data: NezhaServer }) {
<section className="flex flex-col gap-1"> <section className="flex flex-col gap-1">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<p className="text-md font-medium">{t("serverDetailChart.disk")}</p> <p className="text-md font-medium">{t("serverDetailChart.disk")}</p>
<section className="flex flex-col items-end gap-0.5">
<section className="flex items-center gap-2"> <section className="flex items-center gap-2">
<p className="text-xs text-end w-10 font-medium"> <p className="text-xs text-end w-10 font-medium">
{disk.toFixed(0)}% {disk.toFixed(0)}%
@ -455,6 +466,11 @@ function DiskChart({ now, data }: { now: number; data: NezhaServer }) {
primaryColor="hsl(var(--chart-5))" primaryColor="hsl(var(--chart-5))"
/> />
</section> </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> </div>
<ChartContainer <ChartContainer
config={chartConfig} config={chartConfig}

12
src/components/ServerDetailOverview.tsx
View File

@ -198,7 +198,9 @@ export default function ServerDetailOverview({
{server.state.load_1} / {server.state.load_5} /{" "} {server.state.load_1} / {server.state.load_5} /{" "}
{server.state.load_15} {server.state.load_15}
</div> </div>
) : null} ) : (
<div className="text-xs"> {t("serverDetail.unknown")}</div>
)}
</section> </section>
</CardContent> </CardContent>
</Card> </Card>
@ -213,7 +215,9 @@ export default function ServerDetailOverview({
{" "} {" "}
{formatBytes(server.state.net_out_transfer)}{" "} {formatBytes(server.state.net_out_transfer)}{" "}
</div> </div>
) : null} ) : (
<div className="text-xs"> {t("serverDetail.unknown")}</div>
)}
</section> </section>
</CardContent> </CardContent>
</Card> </Card>
@ -228,7 +232,9 @@ export default function ServerDetailOverview({
{" "} {" "}
{formatBytes(server.state.net_in_transfer)}{" "} {formatBytes(server.state.net_in_transfer)}{" "}
</div> </div>
) : null} ) : (
<div className="text-xs"> {t("serverDetail.unknown")}</div>
)}
</section> </section>
</CardContent> </CardContent>
</Card> </Card>

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

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