From 3d4bd79ad51716e71a8d76e2dec9784371056ede Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Mon, 2 Dec 2024 11:47:48 +0800
Subject: [PATCH] feat: gpu info

---
 src/components/NetworkChart.tsx         | 43 ++++++++++++-------------
 src/components/ServerDetailOverview.tsx | 16 +++++++--
 src/types/nezha-api.ts                  |  1 +
 3 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/src/components/NetworkChart.tsx b/src/components/NetworkChart.tsx
index 2049add..0af6b21 100644
--- a/src/components/NetworkChart.tsx
+++ b/src/components/NetworkChart.tsx
@@ -111,28 +111,27 @@ export const NetworkChartClient = React.memo(function NetworkChart({
 
   const defaultChart = "All";
 
-  const [activeCharts, setActiveCharts] = React.useState<string[]>([defaultChart]);
+  const [activeCharts, setActiveCharts] = React.useState<string[]>([
+    defaultChart,
+  ]);
 
-  const handleButtonClick = useCallback(
-    (chart: string) => {
-      setActiveCharts((prev) => {
-        if (chart === defaultChart) {
-          return [defaultChart];
-        }
-        
-        const newCharts = prev.filter(c => c !== defaultChart);
-        const chartIndex = newCharts.indexOf(chart);
-        
-        if (chartIndex === -1) {
-          return newCharts.length === 0 ? [chart] : [...newCharts, chart];
-        } else {
-          const result = newCharts.filter(c => c !== chart);
-          return result.length === 0 ? [defaultChart] : result;
-        }
-      });
-    },
-    [],
-  );
+  const handleButtonClick = useCallback((chart: string) => {
+    setActiveCharts((prev) => {
+      if (chart === defaultChart) {
+        return [defaultChart];
+      }
+
+      const newCharts = prev.filter((c) => c !== defaultChart);
+      const chartIndex = newCharts.indexOf(chart);
+
+      if (chartIndex === -1) {
+        return newCharts.length === 0 ? [chart] : [...newCharts, chart];
+      } else {
+        const result = newCharts.filter((c) => c !== chart);
+        return result.length === 0 ? [defaultChart] : result;
+      }
+    });
+  }, []);
 
   const getColorByIndex = useCallback(
     (chart: string) => {
@@ -177,7 +176,7 @@ export const NetworkChartClient = React.memo(function NetworkChart({
         />
       ));
     }
-    
+
     return activeCharts.map((chart) => (
       <Line
         key={chart}
diff --git a/src/components/ServerDetailOverview.tsx b/src/components/ServerDetailOverview.tsx
index 7316cdc..33aab61 100644
--- a/src/components/ServerDetailOverview.tsx
+++ b/src/components/ServerDetailOverview.tsx
@@ -179,8 +179,20 @@ export default function ServerDetailOverview({
           <CardContent className="px-1.5 py-1">
             <section className="flex flex-col items-start gap-0.5">
               <p className="text-xs text-muted-foreground">{"CPU"}</p>
-              {server.host.cpu ? (
-                <div className="text-xs"> {server.host.cpu}</div>
+              {server.host.cpu.length > 0 ? (
+                <div className="text-xs"> {server.host.cpu.join(", ")}</div>
+              ) : (
+                <div className="text-xs"> {t("serverDetail.unknown")}</div>
+              )}
+            </section>
+          </CardContent>
+        </Card>
+        <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">{"GPU"}</p>
+              {server.host.gpu.length > 0 ? (
+                <div className="text-xs">{server.host.gpu.join(", ")}</div>
               ) : (
                 <div className="text-xs"> {t("serverDetail.unknown")}</div>
               )}
diff --git a/src/types/nezha-api.ts b/src/types/nezha-api.ts
index 5f15971..48cb38a 100644
--- a/src/types/nezha-api.ts
+++ b/src/types/nezha-api.ts
@@ -16,6 +16,7 @@ export interface NezhaServerHost {
   platform: string;
   platform_version: string;
   cpu: string[];
+  gpu: string[];
   mem_total: number;
   disk_total: number;
   swap_total: number;