feat: add chart detail

nezhahq · Dec 1, 2024 · 88b264b · 88b264b
1 parent 90b87ee
commit 88b264b
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 16 deletions.
diff --git a/src/components/ServerDetailChart.tsx b/src/components/ServerDetailChart.tsx
@@ -16,6 +16,7 @@ import { ServerDetailChartLoading } from "./loading/ServerDetailLoading";
 import AnimatedCircularProgressBar from "./ui/animated-circular-progress-bar";
 import { useWebSocketContext } from "@/hooks/use-websocket-context";
 import { useTranslation } from "react-i18next";
+import { formatBytes } from "@/lib/format";
 
 type cpuChartData = {
   timeStamp: string;
@@ -317,7 +318,7 @@ function MemChart({ now, data }: { now: number; data: NezhaServer }) {
     <Card>
       <CardContent className="px-6 py-3">
         <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">
               <div className="flex flex-col">
                 <p className=" text-xs text-muted-foreground">
@@ -350,6 +351,15 @@ function MemChart({ now, data }: { now: number; data: NezhaServer }) {
                 </div>
               </div>
             </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>
           <ChartContainer
             config={chartConfig}
@@ -443,17 +453,23 @@ function DiskChart({ now, data }: { now: number; data: NezhaServer }) {
         <section className="flex flex-col gap-1">
           <div className="flex items-center justify-between">
             <p className="text-md font-medium">{t("serverDetailChart.disk")}</p>
-            <section className="flex items-center gap-2">
-              <p className="text-xs text-end w-10 font-medium">
-                {disk.toFixed(0)}%
-              </p>
-              <AnimatedCircularProgressBar
-                className="size-3 text-[0px]"
-                max={100}
-                min={0}
-                value={disk}
-                primaryColor="hsl(var(--chart-5))"
-              />
+            <section className="flex flex-col items-end gap-0.5">
+              <section className="flex items-center gap-2">
+                <p className="text-xs text-end w-10 font-medium">
+                  {disk.toFixed(0)}%
+                </p>
+                <AnimatedCircularProgressBar
+                  className="size-3 text-[0px]"
+                  max={100}
+                  min={0}
+                  value={disk}
+                  primaryColor="hsl(var(--chart-5))"
+                />
+              </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>
           <ChartContainer

diff --git a/src/components/ServerDetailOverview.tsx b/src/components/ServerDetailOverview.tsx
@@ -189,7 +189,7 @@ export default function ServerDetailOverview({
         </Card>
       </section>
       <section className="flex flex-wrap gap-2 mt-1">
-      <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">
             <section className="flex flex-col items-start gap-0.5">
               <p className="text-xs text-muted-foreground">{"Load"}</p>
@@ -198,7 +198,9 @@ export default function ServerDetailOverview({
                   {server.state.load_1} / {server.state.load_5} /{" "}
                   {server.state.load_15}
                 </div>
-              ) : null}
+              ) : (
+                <div className="text-xs"> {t("serverDetail.unknown")}</div>
+              )}
             </section>
           </CardContent>
         </Card>
@@ -213,7 +215,9 @@ export default function ServerDetailOverview({
                   {" "}
                   {formatBytes(server.state.net_out_transfer)}{" "}
                 </div>
-              ) : null}
+              ) : (
+                <div className="text-xs"> {t("serverDetail.unknown")}</div>
+              )}
             </section>
           </CardContent>
         </Card>
@@ -228,7 +232,9 @@ export default function ServerDetailOverview({
                   {" "}
                   {formatBytes(server.state.net_in_transfer)}{" "}
                 </div>
-              ) : null}
+              ) : (
+                <div className="text-xs"> {t("serverDetail.unknown")}</div>
+              )}
             </section>
           </CardContent>
         </Card>

diff --git a/src/types/nezha-api.ts b/src/types/nezha-api.ts
@@ -28,8 +28,10 @@ export interface NezhaServerHost {
 export interface NezhaServerStatus {
   cpu: number;
   mem_used: number;
+  mem_total: number;
   swap_used: number;
   disk_used: number;
+  disk_total: number;
   net_in_transfer: number;
   net_out_transfer: number;
   net_in_speed: number;