diff --git a/AppImage/components/hardware.tsx b/AppImage/components/hardware.tsx index 25e5744..8ef936d 100644 --- a/AppImage/components/hardware.tsx +++ b/AppImage/components/hardware.tsx @@ -61,45 +61,55 @@ export default function Hardware() { const [selectedGPU, setSelectedGPU] = useState(null) const [realtimeGPUData, setRealtimeGPUData] = useState(null) - const [loadingGPUData, setLoadingGPUData] = useState(false) + const [detailsLoading, setDetailsLoading] = useState(false) const [selectedPCIDevice, setSelectedPCIDevice] = useState(null) const [selectedDisk, setSelectedDisk] = useState(null) const [selectedNetwork, setSelectedNetwork] = useState(null) const handleGPUClick = async (gpu: GPU) => { - setLoadingGPUData(true) - setSelectedGPU(gpu) - setRealtimeGPUData(null) + console.log("[v0] GPU clicked:", gpu.name) + console.log("[v0] GPU slot:", gpu.slot) const pciDevice = findPCIDeviceForGPU(gpu) const fullSlot = pciDevice?.slot || gpu.slot - // Validar que el slot no esté vacío + console.log("[v0] Full PCI slot:", fullSlot) + + setSelectedGPU(gpu) + setDetailsLoading(true) + setRealtimeGPUData(null) + + console.log("[v0] Modal opened, fetching realtime data...") + if (!fullSlot) { - console.error("[v0] GPU slot is empty, cannot fetch real-time data") - setRealtimeGPUData({ has_monitoring_tool: false }) - setLoadingGPUData(false) + console.log("[v0] No slot found, showing basic info only") + setDetailsLoading(false) return } try { - console.log("[v0] Fetching real-time GPU data for slot:", fullSlot) const response = await fetch(`http://localhost:8008/api/gpu/${fullSlot}/realtime`, { - signal: AbortSignal.timeout(6000), + method: "GET", + headers: { + "Content-Type": "application/json", + }, + signal: AbortSignal.timeout(10000), }) - if (response.ok) { - const data = await response.json() - console.log("[v0] Real-time GPU data received:", data) - setRealtimeGPUData(data) - } else { - console.log("[v0] Failed to fetch real-time GPU data:", response.status) - setRealtimeGPUData({ has_monitoring_tool: false }) + + if (!response.ok) { + console.log("[v0] API response not OK:", response.status) + throw new Error(`HTTP error! status: ${response.status}`) } + + const data = await response.json() + console.log("[v0] Realtime GPU data received:", data) + setRealtimeGPUData(data) } catch (error) { - console.error("[v0] Error fetching real-time GPU data:", error) + console.error("[v0] Error fetching GPU realtime data:", error) setRealtimeGPUData({ has_monitoring_tool: false }) } finally { - setLoadingGPUData(false) + setDetailsLoading(false) + console.log("[v0] Finished loading GPU data") } } @@ -380,32 +390,9 @@ export default function Hardware() { )} + {/* GPU Detail Modal - Shows immediately with basic info, then loads real-time data */} { - // Prevent closing while loading - if (!loadingGPUData) { - setSelectedGPU(null) - setRealtimeGPUData(null) - } - }} - > - - - - - Loading GPU Data - - Fetching real-time monitoring information... - -
- -
- - - - { setSelectedGPU(null) setRealtimeGPUData(null) @@ -414,328 +401,265 @@ export default function Hardware() { {selectedGPU && ( <> - {hasRealtimeData() - ? // Advanced modal with real-time data - (() => { - const pciDevice = findPCIDeviceForGPU(selectedGPU) + + {selectedGPU.name} + + {detailsLoading ? "Loading real-time monitoring data..." : "GPU Information"} + + - return ( - <> - - {selectedGPU.name} - Real-Time GPU Monitoring - +
+
+

+ Basic Information +

+
+
+ Vendor + {selectedGPU.vendor} +
+
+ Type + {selectedGPU.type} +
+
+ PCI Slot + + {findPCIDeviceForGPU(selectedGPU)?.slot || selectedGPU.slot} + +
+ {(findPCIDeviceForGPU(selectedGPU)?.driver || selectedGPU.pci_driver) && ( +
+ Driver + + {findPCIDeviceForGPU(selectedGPU)?.driver || selectedGPU.pci_driver} + +
+ )} + {(findPCIDeviceForGPU(selectedGPU)?.kernel_module || selectedGPU.pci_kernel_module) && ( +
+ Kernel Module + + {findPCIDeviceForGPU(selectedGPU)?.kernel_module || selectedGPU.pci_kernel_module} + +
+ )} +
+
-
- {/* Basic Information */} -
-

Basic Information

-
-
- Vendor - {selectedGPU.vendor} -
-
- Type - {selectedGPU.type} -
-
- PCI Slot - {pciDevice?.slot || selectedGPU.slot} -
- {(pciDevice?.driver || selectedGPU.pci_driver) && ( -
- Driver - - {pciDevice?.driver || selectedGPU.pci_driver} - -
- )} - {(pciDevice?.kernel_module || selectedGPU.pci_kernel_module) && ( -
- Kernel Module - - {pciDevice?.kernel_module || selectedGPU.pci_kernel_module} - -
- )} + {detailsLoading ? ( +
+ +

Loading real-time monitoring data...

+
+ ) : realtimeGPUData?.has_monitoring_tool === true ? ( + <> +
+

+ Real-Time Metrics +

+
+ {realtimeGPUData.temperature !== undefined && realtimeGPUData.temperature !== null ? ( +
+
+ Temperature + + {realtimeGPUData.temperature}°C +
+
+ ) : ( +
+ Temperature + N/A +
+ )} - {/* Real-Time Metrics */} -
-

Real-Time Metrics

-
- {realtimeGPUData.temperature !== undefined && realtimeGPUData.temperature !== null ? ( -
-
- Temperature - - {realtimeGPUData.temperature}°C - -
- -
- ) : ( -
- Temperature - N/A -
- )} - - {realtimeGPUData.utilization_gpu !== undefined && - realtimeGPUData.utilization_gpu !== null ? ( -
-
- GPU Utilization - - {typeof realtimeGPUData.utilization_gpu === "string" - ? realtimeGPUData.utilization_gpu - : `${realtimeGPUData.utilization_gpu}%`} - -
- -
- ) : ( -
-
- GPU Utilization - 0.0% -
- -
- )} - - {realtimeGPUData.clock_graphics && ( -
- Graphics Clock - {realtimeGPUData.clock_graphics} -
- )} - {realtimeGPUData.clock_memory && ( -
- Memory Clock - {realtimeGPUData.clock_memory} -
- )} - {realtimeGPUData.power_draw && realtimeGPUData.power_draw !== "N/A" && ( -
- Power Draw - {realtimeGPUData.power_draw} -
- )} - {realtimeGPUData.power_limit && ( -
- Power Limit - {realtimeGPUData.power_limit} -
- )} + {realtimeGPUData.utilization_gpu !== undefined && realtimeGPUData.utilization_gpu !== null ? ( +
+
+ GPU Utilization + + {typeof realtimeGPUData.utilization_gpu === "string" + ? realtimeGPUData.utilization_gpu + : `${realtimeGPUData.utilization_gpu}%`} +
+
+ ) : ( +
+
+ GPU Utilization + 0.0% +
+ +
+ )} - {/* Engine Utilization (Intel/AMD) */} - {(realtimeGPUData.engine_render !== undefined || - realtimeGPUData.engine_blitter !== undefined || - realtimeGPUData.engine_video !== undefined || - realtimeGPUData.engine_video_enhance !== undefined) && ( -
-

Engine Utilization

-
- {realtimeGPUData.engine_render !== undefined && ( -
-
- Render/3D - - {realtimeGPUData.engine_render.toFixed(2)}% - -
- -
- )} - {realtimeGPUData.engine_blitter !== undefined && ( -
-
- Blitter - - {realtimeGPUData.engine_blitter.toFixed(2)}% - -
- -
- )} - {realtimeGPUData.engine_video !== undefined && ( -
-
- Video - - {realtimeGPUData.engine_video.toFixed(2)}% - -
- -
- )} - {realtimeGPUData.engine_video_enhance !== undefined && ( -
-
- VideoEnhance - - {realtimeGPUData.engine_video_enhance.toFixed(2)}% - -
- -
- )} + {realtimeGPUData.clock_graphics && ( +
+ Graphics Clock + {realtimeGPUData.clock_graphics} +
+ )} + {realtimeGPUData.clock_memory && ( +
+ Memory Clock + {realtimeGPUData.clock_memory} +
+ )} + {realtimeGPUData.power_draw && realtimeGPUData.power_draw !== "N/A" && ( +
+ Power Draw + {realtimeGPUData.power_draw} +
+ )} + {realtimeGPUData.power_limit && ( +
+ Power Limit + {realtimeGPUData.power_limit} +
+ )} +
+
+ + {/* Engine Utilization (Intel/AMD) */} + {(realtimeGPUData.engine_render !== undefined || + realtimeGPUData.engine_blitter !== undefined || + realtimeGPUData.engine_video !== undefined || + realtimeGPUData.engine_video_enhance !== undefined) && ( +
+

+ Engine Utilization +

+
+ {realtimeGPUData.engine_render !== undefined && ( +
+
+ Render/3D + {realtimeGPUData.engine_render.toFixed(2)}%
+
)} - - {/* Memory Info */} - {realtimeGPUData.memory_total && ( -
-

Memory

-
-
- Total - {realtimeGPUData.memory_total} -
-
- Used - {realtimeGPUData.memory_used} -
-
- Free - {realtimeGPUData.memory_free} -
- {realtimeGPUData.utilization_memory !== undefined && ( -
-
- Memory Utilization - {realtimeGPUData.utilization_memory}% -
- -
- )} + {realtimeGPUData.engine_blitter !== undefined && ( +
+
+ Blitter + + {realtimeGPUData.engine_blitter.toFixed(2)}% +
+
)} - - {/* Running Processes (NVIDIA) */} - {realtimeGPUData.processes && realtimeGPUData.processes.length > 0 && ( -
-

Running Processes

-
- {realtimeGPUData.processes.map((proc: any, idx: number) => ( -
-
- PID: {proc.pid} - {proc.memory} -
-

{proc.name}

-
- ))} + {realtimeGPUData.engine_video !== undefined && ( +
+
+ Video + {realtimeGPUData.engine_video.toFixed(2)}%
+ +
+ )} + {realtimeGPUData.engine_video_enhance !== undefined && ( +
+
+ VideoEnhance + + {realtimeGPUData.engine_video_enhance.toFixed(2)}% + +
+
)}
- - ) - })() - : // Basic modal without real-time data - (() => { - const pciDevice = findPCIDeviceForGPU(selectedGPU) +
+ )} - return ( - <> - - {selectedGPU.name} - PCI Device Information - - -
+ {/* Memory Info */} + {realtimeGPUData.memory_total && ( +
+

+ Memory +

+
- Device Type - Graphics Card + Total + {realtimeGPUData.memory_total}
-
- PCI Slot - {pciDevice?.slot || selectedGPU.slot} + Used + {realtimeGPUData.memory_used}
-
- Device Name - {selectedGPU.name} + Free + {realtimeGPUData.memory_free}
- -
- Vendor - {selectedGPU.vendor} -
- - {(pciDevice?.class || selectedGPU.pci_class) && ( -
- Class - {pciDevice?.class || selectedGPU.pci_class} -
- )} - - {(pciDevice?.driver || selectedGPU.pci_driver) && ( -
- Driver - - {pciDevice?.driver || selectedGPU.pci_driver} - -
- )} - - {(pciDevice?.kernel_module || selectedGPU.pci_kernel_module) && ( -
- Kernel Module - - {pciDevice?.kernel_module || selectedGPU.pci_kernel_module} - -
- )} - -
- Type - {selectedGPU.type} -
- - {realtimeGPUData?.has_monitoring_tool === false && ( -
-
-
- - - -
-
-

- Extended Monitoring Not Available -

-

- {getMonitoringToolRecommendation(selectedGPU.vendor)} -

-
+ {realtimeGPUData.utilization_memory !== undefined && ( +
+
+ Memory Utilization + {realtimeGPUData.utilization_memory}%
+
)}
- - ) - })()} +
+ )} + + {/* Running Processes (NVIDIA) */} + {realtimeGPUData.processes && realtimeGPUData.processes.length > 0 && ( +
+

+ Running Processes +

+
+ {realtimeGPUData.processes.map((proc: any, idx: number) => ( +
+
+ PID: {proc.pid} + {proc.memory} +
+

{proc.name}

+
+ ))} +
+
+ )} + + ) : ( +
+
+
+ + + +
+
+

Extended Monitoring Not Available

+

+ {getMonitoringToolRecommendation(selectedGPU.vendor)} +

+
+
+
+ )} +
)}