fix: disable chart when offline

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

View File

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

View File

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

View File

@ -7,7 +7,9 @@ export function cn(...inputs: ClassValue[]) {
}
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 {
...serverInfo,
cpu: serverInfo.state.cpu || 0,