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

fix: disable chart when offline

Browse Source
This commit is contained in:
hamster1963 2024-12-06 10:34:06 +08:00
parent b80af34a45
commit d746411f79
3 changed files with 82 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/ServerDetailChart.tsx
View File

@ -76,6 +76,12 @@ export default function ServerDetailChart({
return <ServerDetailChartLoading />; return <ServerDetailChartLoading />;
} }
const { online } = formatNezhaInfo(nezhaWsData.now, server);
if (!online) {
return <ServerDetailChartLoading />;
}
return ( return (
<section className="grid md:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-3"> <section className="grid md:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-3">
<CpuChart now={nezhaWsData.now} data={server} /> <CpuChart now={nezhaWsData.now} data={server} />

140
src/components/ServerDetailOverview.tsx
View File

@ -91,19 +91,19 @@ export default function ServerDetailOverview({
</Card> </Card>
{online && ( {online && (
<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"> <CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5"> <section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
{t("serverDetail.uptime")} {t("serverDetail.uptime")}
</p> </p>
<div className="text-xs"> <div className="text-xs">
{" "} {" "}
{online ? (uptime / 86400).toFixed(0) : "N/A"}{" "} {online ? (uptime / 86400).toFixed(0) : "N/A"}{" "}
{t("serverDetail.days")} {t("serverDetail.days")}
</div> </div>
</section> </section>
</CardContent> </CardContent>
</Card> </Card>
)} )}
{version && ( {version && (
<Card className="rounded-[10px] bg-transparent border-none shadow-none"> <Card className="rounded-[10px] bg-transparent border-none shadow-none">
@ -130,34 +130,32 @@ export default function ServerDetailOverview({
</Card> </Card>
)} )}
{mem_total ? (
<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">
{t("serverDetail.mem")}
</p>
<div className="text-xs">{formatBytes(mem_total)}</div>
</section>
</CardContent>
</Card>
) : null}
{disk_total ? (
<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">
{t("serverDetail.disk")}
</p>
<div className="text-xs">{formatBytes(disk_total)}</div>
</section>
</CardContent>
</Card>
) : null}
{mem_total ? (<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">
{t("serverDetail.mem")}
</p>
<div className="text-xs">{formatBytes(mem_total)}</div>
</section>
</CardContent>
</Card>) : null}
{disk_total ? (<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">
{t("serverDetail.disk")}
</p>
<div className="text-xs">{formatBytes(disk_total)}</div>
</section>
</CardContent>
</Card>) : null}
{country_code && ( {country_code && (
<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"> <CardContent className="px-1.5 py-1">
@ -231,34 +229,42 @@ export default function ServerDetailOverview({
</Card> </Card>
{net_out_transfer ? ( {net_out_transfer ? (
<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"> <CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5"> <section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
{t("serverDetail.upload")} {t("serverDetail.upload")}
</p> </p>
{net_out_transfer ? ( {net_out_transfer ? (
<div className="text-xs"> {formatBytes(net_out_transfer)} </div> <div className="text-xs">
) : ( {" "}
<div className="text-xs"> {t("serverDetail.unknown")}</div> {formatBytes(net_out_transfer)}{" "}
)} </div>
</section> ) : (
</CardContent> <div className="text-xs"> {t("serverDetail.unknown")}</div>
</Card> )}
): null} </section>
{net_in_transfer ? (<Card className="rounded-[10px] bg-transparent border-none shadow-none"> </CardContent>
<CardContent className="px-1.5 py-1"> </Card>
<section className="flex flex-col items-start gap-0.5"> ) : null}
<p className="text-xs text-muted-foreground"> {net_in_transfer ? (
{t("serverDetail.download")} <Card className="rounded-[10px] bg-transparent border-none shadow-none">
</p> <CardContent className="px-1.5 py-1">
{net_in_transfer ? ( <section className="flex flex-col items-start gap-0.5">
<div className="text-xs"> {formatBytes(net_in_transfer)} </div> <p className="text-xs text-muted-foreground">
) : ( {t("serverDetail.download")}
<div className="text-xs"> {t("serverDetail.unknown")}</div> </p>
)} {net_in_transfer ? (
</section> <div className="text-xs">
</CardContent> {" "}
</Card>): null} {formatBytes(net_in_transfer)}{" "}
</div>
) : (
<div className="text-xs"> {t("serverDetail.unknown")}</div>
)}
</section>
</CardContent>
</Card>
) : null}
</section> </section>
{server?.state.temperatures && server?.state.temperatures.length > 0 && ( {server?.state.temperatures && server?.state.temperatures.length > 0 && (
<section className="flex flex-wrap gap-2 mt-1"> <section className="flex flex-wrap gap-2 mt-1">

4
src/lib/utils.ts
View File

@ -7,7 +7,9 @@ export function cn(...inputs: ClassValue[]) {
} }
export function formatNezhaInfo(now: number, serverInfo: NezhaServer) { export function formatNezhaInfo(now: number, serverInfo: NezhaServer) {
const lastActiveTime = serverInfo.last_active.startsWith("000") ? 0 : parseISOTimestamp(serverInfo.last_active); const lastActiveTime = serverInfo.last_active.startsWith("000")
? 0
: parseISOTimestamp(serverInfo.last_active);
return { return {
...serverInfo, ...serverInfo,
cpu: serverInfo.state.cpu || 0, cpu: serverInfo.state.cpu || 0,