From d746411f79f8cc2388bb61a3201331e2bef5826a Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Fri, 6 Dec 2024 10:34:06 +0800
Subject: [PATCH] fix: disable chart when offline

---
 src/components/ServerDetailChart.tsx    |   6 +
 src/components/ServerDetailOverview.tsx | 140 ++++++++++++------------
 src/lib/utils.ts                        |   4 +-
 3 files changed, 82 insertions(+), 68 deletions(-)

diff --git a/src/components/ServerDetailChart.tsx b/src/components/ServerDetailChart.tsx
index 8d10873..9f9630b 100644
--- a/src/components/ServerDetailChart.tsx
+++ b/src/components/ServerDetailChart.tsx
@@ -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} />
diff --git a/src/components/ServerDetailOverview.tsx b/src/components/ServerDetailOverview.tsx
index a3c706c..82ebf60 100644
--- a/src/components/ServerDetailOverview.tsx
+++ b/src/components/ServerDetailOverview.tsx
@@ -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">
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 6e42e7a..a77e9a8 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -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,