From 6996214121200b209816af7ae630efa4e8384625 Mon Sep 17 00:00:00 2001
From: LukeGus <bugattiguy527@gmail.com>
Date: Wed, 31 Dec 2025 01:52:21 -0600
Subject: [PATCH] feat: turned disk uage into graph and fixed issue with
 termina console

---
 .../docker/components/ConsoleTerminal.tsx     |   4 +-
 .../features/server-stats/ServerStats.tsx     |   8 +-
 .../server-stats/widgets/CpuWidget.tsx        |   5 +-
 .../server-stats/widgets/DiskWidget.tsx       | 135 ++++++++++--------
 .../server-stats/widgets/MemoryWidget.tsx     |   5 +-
 5 files changed, 89 insertions(+), 68 deletions(-)

diff --git a/src/ui/desktop/apps/features/docker/components/ConsoleTerminal.tsx b/src/ui/desktop/apps/features/docker/components/ConsoleTerminal.tsx
index 59ba9b4f..c12977de 100644
--- a/src/ui/desktop/apps/features/docker/components/ConsoleTerminal.tsx
+++ b/src/ui/desktop/apps/features/docker/components/ConsoleTerminal.tsx
@@ -64,11 +64,11 @@ export function ConsoleTerminal({
         "http://127.0.0.1:30001";
       const wsProtocol = baseUrl.startsWith("https://") ? "wss://" : "ws://";
       const wsHost = baseUrl.replace(/^https?:\/\//, "");
-      return `${wsProtocol}${wsHost}/docker/console`;
+      return `${wsProtocol}${wsHost}/docker/console/`;
     }
 
     const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-    return `${protocol}//${window.location.host}/docker/console`;
+    return `${protocol}//${window.location.host}/docker/console/`;
   }, []);
 
   React.useEffect(() => {
diff --git a/src/ui/desktop/apps/features/server-stats/ServerStats.tsx b/src/ui/desktop/apps/features/server-stats/ServerStats.tsx
index 7aeb7ef3..7f1d68ff 100644
--- a/src/ui/desktop/apps/features/server-stats/ServerStats.tsx
+++ b/src/ui/desktop/apps/features/server-stats/ServerStats.tsx
@@ -388,18 +388,18 @@ export function ServerStats({
         let retryCount = 0;
         let data = null;
         const maxRetries = 15;
-        const initialDelay = totpVerified ? 3000 : 5000;
         const retryDelay = 2000;
 
-        await new Promise((resolve) => setTimeout(resolve, initialDelay));
-
         while (retryCount < maxRetries && !cancelled) {
           try {
             data = await getServerMetricsById(currentHostConfig.id);
             break;
           } catch (error: any) {
             retryCount++;
-            if (retryCount < maxRetries && !cancelled) {
+            if (retryCount === 1) {
+              const initialDelay = totpVerified ? 3000 : 5000;
+              await new Promise((resolve) => setTimeout(resolve, initialDelay));
+            } else if (retryCount < maxRetries && !cancelled) {
               await new Promise((resolve) => setTimeout(resolve, retryDelay));
             } else {
               throw error;
diff --git a/src/ui/desktop/apps/features/server-stats/widgets/CpuWidget.tsx b/src/ui/desktop/apps/features/server-stats/widgets/CpuWidget.tsx
index acf27a7e..151e6a53 100644
--- a/src/ui/desktop/apps/features/server-stats/widgets/CpuWidget.tsx
+++ b/src/ui/desktop/apps/features/server-stats/widgets/CpuWidget.tsx
@@ -62,7 +62,10 @@ export function CpuWidget({ metrics, metricsHistory }: CpuWidgetProps) {
         </div>
         <div className="flex-1 min-h-0">
           <ResponsiveContainer width="100%" height="100%">
-            <LineChart data={chartData}>
+            <LineChart
+              data={chartData}
+              margin={{ top: 5, right: 5, left: -25, bottom: 5 }}
+            >
               <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
               <XAxis
                 dataKey="index"
diff --git a/src/ui/desktop/apps/features/server-stats/widgets/DiskWidget.tsx b/src/ui/desktop/apps/features/server-stats/widgets/DiskWidget.tsx
index a67efa72..f929bfe1 100644
--- a/src/ui/desktop/apps/features/server-stats/widgets/DiskWidget.tsx
+++ b/src/ui/desktop/apps/features/server-stats/widgets/DiskWidget.tsx
@@ -4,27 +4,30 @@ import { useTranslation } from "react-i18next";
 import type { ServerMetrics } from "@/ui/main-axios.ts";
 import { RechartsPrimitive } from "@/components/ui/chart.tsx";
 
-const { RadialBarChart, RadialBar, PolarAngleAxis, ResponsiveContainer } =
-  RechartsPrimitive;
+const {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} = RechartsPrimitive;
 
 interface DiskWidgetProps {
   metrics: ServerMetrics | null;
   metricsHistory: ServerMetrics[];
 }
 
-export function DiskWidget({ metrics }: DiskWidgetProps) {
+export function DiskWidget({ metrics, metricsHistory }: DiskWidgetProps) {
   const { t } = useTranslation();
 
-  const radialData = React.useMemo(() => {
-    const percent = metrics?.disk?.percent || 0;
-    return [
-      {
-        name: "Disk",
-        value: percent,
-        fill: "#fb923c",
-      },
-    ];
-  }, [metrics]);
+  const chartData = React.useMemo(() => {
+    return metricsHistory.map((m, index) => ({
+      index,
+      disk: m.disk?.percent || 0,
+    }));
+  }, [metricsHistory]);
 
   return (
     <div className="h-full w-full p-4 rounded-lg bg-elevated border border-edge/50 hover:bg-elevated/70 flex flex-col overflow-hidden">
@@ -35,45 +38,13 @@ export function DiskWidget({ metrics }: DiskWidgetProps) {
         </h3>
       </div>
 
-      <div className="flex flex-col flex-1 min-h-0">
-        <div className="flex-1 min-h-0 flex items-center justify-center">
-          <ResponsiveContainer width="100%" height="100%">
-            <RadialBarChart
-              cx="50%"
-              cy="50%"
-              innerRadius="60%"
-              outerRadius="90%"
-              data={radialData}
-              startAngle={90}
-              endAngle={-270}
-            >
-              <PolarAngleAxis
-                type="number"
-                domain={[0, 100]}
-                angleAxisId={0}
-                tick={false}
-              />
-              <RadialBar
-                background
-                dataKey="value"
-                cornerRadius={10}
-                fill="#fb923c"
-              />
-              <text
-                x="50%"
-                y="50%"
-                textAnchor="middle"
-                dominantBaseline="middle"
-                className="text-2xl font-bold fill-orange-400"
-              >
-                {typeof metrics?.disk?.percent === "number"
-                  ? `${metrics.disk.percent}%`
-                  : "N/A"}
-              </text>
-            </RadialBarChart>
-          </ResponsiveContainer>
-        </div>
-        <div className="flex-shrink-0 space-y-1 text-center pb-2">
+      <div className="flex flex-col flex-1 min-h-0 gap-2">
+        <div className="flex items-baseline gap-3 flex-shrink-0">
+          <div className="text-2xl font-bold text-orange-400">
+            {typeof metrics?.disk?.percent === "number"
+              ? `${metrics.disk.percent}%`
+              : "N/A"}
+          </div>
           <div className="text-xs text-muted-foreground">
             {(() => {
               const used = metrics?.disk?.usedHuman;
@@ -84,14 +55,58 @@ export function DiskWidget({ metrics }: DiskWidgetProps) {
               return "N/A";
             })()}
           </div>
-          <div className="text-xs text-foreground-subtle">
-            {(() => {
-              const available = metrics?.disk?.availableHuman;
-              return available
-                ? `${t("serverStats.available")}: ${available}`
-                : `${t("serverStats.available")}: N/A`;
-            })()}
-          </div>
+        </div>
+        <div className="text-xs text-foreground-subtle flex-shrink-0">
+          {(() => {
+            const available = metrics?.disk?.availableHuman;
+            return available
+              ? `${t("serverStats.available")}: ${available}`
+              : `${t("serverStats.available")}: N/A`;
+          })()}
+        </div>
+        <div className="flex-1 min-h-0">
+          <ResponsiveContainer width="100%" height="100%">
+            <AreaChart
+              data={chartData}
+              margin={{ top: 5, right: 5, left: -25, bottom: 5 }}
+            >
+              <defs>
+                <linearGradient id="diskGradient" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor="#fb923c" stopOpacity={0.8} />
+                  <stop offset="95%" stopColor="#fb923c" stopOpacity={0.1} />
+                </linearGradient>
+              </defs>
+              <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
+              <XAxis
+                dataKey="index"
+                stroke="#9ca3af"
+                tick={{ fill: "#9ca3af" }}
+                hide
+              />
+              <YAxis
+                domain={[0, 100]}
+                stroke="#9ca3af"
+                tick={{ fill: "#9ca3af" }}
+              />
+              <Tooltip
+                contentStyle={{
+                  backgroundColor: "#1f2937",
+                  border: "1px solid #374151",
+                  borderRadius: "6px",
+                  color: "#fff",
+                }}
+                formatter={(value: number) => [`${value.toFixed(1)}%`, "Disk"]}
+              />
+              <Area
+                type="monotone"
+                dataKey="disk"
+                stroke="#fb923c"
+                strokeWidth={2}
+                fill="url(#diskGradient)"
+                animationDuration={300}
+              />
+            </AreaChart>
+          </ResponsiveContainer>
         </div>
       </div>
     </div>
diff --git a/src/ui/desktop/apps/features/server-stats/widgets/MemoryWidget.tsx b/src/ui/desktop/apps/features/server-stats/widgets/MemoryWidget.tsx
index e022555b..b9161e62 100644
--- a/src/ui/desktop/apps/features/server-stats/widgets/MemoryWidget.tsx
+++ b/src/ui/desktop/apps/features/server-stats/widgets/MemoryWidget.tsx
@@ -69,7 +69,10 @@ export function MemoryWidget({ metrics, metricsHistory }: MemoryWidgetProps) {
         </div>
         <div className="flex-1 min-h-0">
           <ResponsiveContainer width="100%" height="100%">
-            <AreaChart data={chartData}>
+            <AreaChart
+              data={chartData}
+              margin={{ top: 5, right: 5, left: -25, bottom: 5 }}
+            >
               <defs>
                 <linearGradient id="memoryGradient" x1="0" y1="0" x2="0" y2="1">
                   <stop offset="5%" stopColor="#34d399" stopOpacity={0.8} />