From ed99c3c0c808f02c44282f6ef02a06a82f6edd06 Mon Sep 17 00:00:00 2001
From: Jaret Burkett <jaretburkett@gmail.com>
Date: Sat, 22 Feb 2025 12:43:20 -0700
Subject: [PATCH] Moved gpu to its own widget

---
 ui/src/components/GPUMonitor.tsx | 98 +-------------------------------
 ui/src/components/GPUWidget.tsx  | 95 +++++++++++++++++++++++++++++++
 2 files changed, 97 insertions(+), 96 deletions(-)
 create mode 100644 ui/src/components/GPUWidget.tsx

diff --git a/ui/src/components/GPUMonitor.tsx b/ui/src/components/GPUMonitor.tsx
index 9c06422f..f470acf0 100644
--- a/ui/src/components/GPUMonitor.tsx
+++ b/ui/src/components/GPUMonitor.tsx
@@ -2,6 +2,7 @@
 import React, { useState, useEffect } from 'react';
 import { GPUApiResponse } from '@/types';
 import Loading from '@/components/Loading';
+import GPUWidget from '@/components/GPUWidget';
 
 const GpuMonitor: React.FC = () => {
   const [gpuData, setGpuData] = useState<GPUApiResponse | null>(null);
@@ -39,35 +40,6 @@ const GpuMonitor: React.FC = () => {
     return () => clearInterval(intervalId);
   }, []);
 
-  // Helper to format memory values
-  const formatMemory = (mb: number): string => {
-    if (mb >= 1024) {
-      return `${(mb / 1024).toFixed(2)} GB`;
-    }
-    return `${mb} MB`;
-  };
-
-  // Helper to determine background color based on utilization
-  const getUtilizationColor = (percent: number): string => {
-    if (percent < 30) return 'bg-green-100';
-    if (percent < 70) return 'bg-yellow-100';
-    return 'bg-red-100';
-  };
-
-  // Helper to determine text color based on utilization
-  const getUtilizationTextColor = (percent: number): string => {
-    if (percent < 30) return 'text-green-800';
-    if (percent < 70) return 'text-yellow-800';
-    return 'text-red-800';
-  };
-
-  // Helper to determine temperature color
-  const getTemperatureColor = (temp: number): string => {
-    if (temp < 50) return 'text-green-600';
-    if (temp < 80) return 'text-yellow-600';
-    return 'text-red-600';
-  };
-
   if (loading) {
     return <Loading />;
   }
@@ -116,73 +88,7 @@ const GpuMonitor: React.FC = () => {
 
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
         {gpuData.gpus.map(gpu => (
-          <div
-            key={gpu.index}
-            className="bg-gray-900 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 px-2 py-2"
-          >
-            <div className="bg-gray-800 text-white px-2 py-1 flex justify-between items-center">
-              <h2 className="font-bold text-sm truncate">{gpu.name}</h2>
-              <span className="text-xs bg-gray-700 rounded px-1 py-0.5">GPU #{gpu.index}</span>
-            </div>
-
-            <div className="p-2">
-              <div className="mb-2 flex items-center">
-                <p className="text-xs text-gray-500 mr-1">Temperature:</p>
-                <p className={`text-sm font-bold ${getTemperatureColor(gpu.temperature)}`}>{gpu.temperature}°C</p>
-              </div>
-
-              <div className="">
-                <p className="text-xs text-gray-600 mb-0.5">GPU Utilization</p>
-                <div className="w-full bg-gray-500 rounded-full h-1.5">
-                  <div
-                    className={`h-1.5 rounded-full ${gpu.utilization.gpu < 30 ? 'bg-green-500' : gpu.utilization.gpu < 70 ? 'bg-yellow-500' : 'bg-red-500'}`}
-                    style={{ width: `${gpu.utilization.gpu}%` }}
-                  ></div>
-                </div>
-                <p className="text-right text-xs mt-0.5">{gpu.utilization.gpu}%</p>
-              </div>
-
-              <div className="mb-2">
-                <p className="text-xs text-gray-600 mb-0.5">Memory Utilization</p>
-                <div className="w-full bg-gray-500 rounded-full h-1.5">
-                  <div
-                    className="h-1.5 rounded-full bg-blue-500"
-                    style={{ width: `${(gpu.memory.used / gpu.memory.total) * 100}%` }}
-                  ></div>
-                </div>
-                <div className="flex justify-between text-xs mt-0.5">
-                  <span>
-                    {formatMemory(gpu.memory.used)} / {formatMemory(gpu.memory.total)}
-                  </span>
-                  <span>{((gpu.memory.used / gpu.memory.total) * 100).toFixed(1)}%</span>
-                </div>
-              </div>
-
-              <div className="grid grid-cols-2 gap-2 mb-2">
-                <div>
-                  <p className="text-xs text-gray-500 mb-0.5">Power</p>
-                  <p className="text-sm font-medium">
-                    {gpu.power.draw.toFixed(1)}W / {gpu.power.limit.toFixed(1)}W
-                  </p>
-                </div>
-                <div>
-                  <p className="text-xs text-gray-500 mb-0.5">Memory Clock</p>
-                  <p className="text-sm font-medium">{gpu.clocks.memory} MHz</p>
-                </div>
-              </div>
-
-              <div className="mt-1 pt-1 border-t border-gray-600 grid grid-cols-2 gap-2">
-                <div>
-                  <p className="text-xs text-gray-500 mb-0.5">Graphics Clock</p>
-                  <p className="text-sm font-medium">{gpu.clocks.graphics} MHz</p>
-                </div>
-                <div className="">
-                  <p className="text-xs text-gray-500 mb-0.5">Driver Version</p>
-                  <p className="text-sm font-medium">{gpu.driverVersion}</p>
-                </div>
-              </div>
-            </div>
-          </div>
+          <GPUWidget key={gpu.index} gpu={gpu} />
         ))}
       </div>
     </div>
diff --git a/ui/src/components/GPUWidget.tsx b/ui/src/components/GPUWidget.tsx
new file mode 100644
index 00000000..f6496c6e
--- /dev/null
+++ b/ui/src/components/GPUWidget.tsx
@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import { GpuInfo } from '@/types';
+
+interface GPUWidgetProps {
+  gpu: GpuInfo;
+}
+
+export default function GPUWidget({ gpu }: GPUWidgetProps) {
+  // Helper to format memory values
+  const formatMemory = (mb: number): string => {
+    if (mb >= 1024) {
+      return `${(mb / 1024).toFixed(2)} GB`;
+    }
+    return `${mb} MB`;
+  };
+
+  // Helper to determine temperature color
+  const getTemperatureColor = (temp: number): string => {
+    if (temp < 50) return 'text-green-600';
+    if (temp < 80) return 'text-yellow-600';
+    return 'text-red-600';
+  };
+
+  return (
+    <>
+      <div
+        key={gpu.index}
+        className="bg-gray-900 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 px-2 py-2"
+      >
+        <div className="bg-gray-800 text-white px-2 py-1 flex justify-between items-center">
+          <h2 className="font-bold text-sm truncate">{gpu.name}</h2>
+          <span className="text-xs bg-gray-700 rounded px-1 py-0.5">GPU #{gpu.index}</span>
+        </div>
+
+        <div className="p-2">
+          <div className="mb-2 flex items-center">
+            <p className="text-xs text-gray-500 mr-1">Temperature:</p>
+            <p className={`text-sm font-bold ${getTemperatureColor(gpu.temperature)}`}>{gpu.temperature}°C</p>
+          </div>
+
+          <div className="">
+            <p className="text-xs text-gray-600 mb-0.5">GPU Utilization</p>
+            <div className="w-full bg-gray-500 rounded-full h-1.5">
+              <div
+                className={`h-1.5 rounded-full ${gpu.utilization.gpu < 30 ? 'bg-green-500' : gpu.utilization.gpu < 70 ? 'bg-yellow-500' : 'bg-red-500'}`}
+                style={{ width: `${gpu.utilization.gpu}%` }}
+              ></div>
+            </div>
+            <p className="text-right text-xs mt-0.5">{gpu.utilization.gpu}%</p>
+          </div>
+
+          <div className="mb-2">
+            <p className="text-xs text-gray-600 mb-0.5">Memory Utilization</p>
+            <div className="w-full bg-gray-500 rounded-full h-1.5">
+              <div
+                className="h-1.5 rounded-full bg-blue-500"
+                style={{ width: `${(gpu.memory.used / gpu.memory.total) * 100}%` }}
+              ></div>
+            </div>
+            <div className="flex justify-between text-xs mt-0.5">
+              <span>
+                {formatMemory(gpu.memory.used)} / {formatMemory(gpu.memory.total)}
+              </span>
+              <span>{((gpu.memory.used / gpu.memory.total) * 100).toFixed(1)}%</span>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-2 mb-2">
+            <div>
+              <p className="text-xs text-gray-500 mb-0.5">Power</p>
+              <p className="text-sm font-medium">
+                {gpu.power.draw.toFixed(1)}W / {gpu.power.limit.toFixed(1)}W
+              </p>
+            </div>
+            <div>
+              <p className="text-xs text-gray-500 mb-0.5">Memory Clock</p>
+              <p className="text-sm font-medium">{gpu.clocks.memory} MHz</p>
+            </div>
+          </div>
+
+          <div className="mt-1 pt-1 border-t border-gray-600 grid grid-cols-2 gap-2">
+            <div>
+              <p className="text-xs text-gray-500 mb-0.5">Graphics Clock</p>
+              <p className="text-sm font-medium">{gpu.clocks.graphics} MHz</p>
+            </div>
+            <div className="">
+              <p className="text-xs text-gray-500 mb-0.5">Driver Version</p>
+              <p className="text-sm font-medium">{gpu.driverVersion}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}