From 37343a4114474194da52fd1ed21245de7c418ab9 Mon Sep 17 00:00:00 2001 From: MacRimi Date: Thu, 23 Oct 2025 14:58:46 +0200 Subject: [PATCH] Update hardware.tsx --- AppImage/components/hardware.tsx | 1031 +++--------------------------- 1 file changed, 75 insertions(+), 956 deletions(-) diff --git a/AppImage/components/hardware.tsx b/AppImage/components/hardware.tsx index d62f9a6..bc5a437 100644 --- a/AppImage/components/hardware.tsx +++ b/AppImage/components/hardware.tsx @@ -2,22 +2,8 @@ import { Card } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" -import { Progress } from "@/components/ui/progress" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" -import { - Thermometer, - CpuIcon, - Zap, - HardDrive, - Network, - FanIcon, - PowerIcon, - Battery, - Cpu, - MemoryStick, - Cpu as Gpu, - Loader2, -} from "lucide-react" +import { Thermometer, CpuIcon, HardDrive, Cpu, MemoryStick, Cpu as Gpu } from "lucide-react" import useSWR from "swr" import { useState, useEffect } from "react" import { type HardwareData, type GPU, type PCIDevice, type StorageDevice, fetcher } from "../types/hardware" @@ -418,6 +404,54 @@ export default function Hardware() { )} + {/* Storage Summary - Clickable */} + {hardwareData?.storage_devices && hardwareData.storage_devices.length > 0 && ( + +
+ +

Storage Summary

+ + { + hardwareData.storage_devices.filter( + (device) => + device.type === "disk" && !device.name.startsWith("zd") && !device.name.startsWith("loop"), + ).length + }{" "} + devices + +
+ +
+ {hardwareData.storage_devices + .filter( + (device) => device.type === "disk" && !device.name.startsWith("zd") && !device.name.startsWith("loop"), + ) + .map((device, index) => ( +
setSelectedDisk(device)} + className="cursor-pointer rounded-lg border border-white/10 sm:border-border bg-white/5 sm:bg-card sm:hover:bg-white/5 p-3 transition-colors" + > +
+ {device.name} + + {device.type} + +
+ {device.size &&

{formatMemory(parseLsblkSize(device.size))}

} + {device.model && ( +

{device.model}

+ )} + {device.driver && ( +

Driver: {device.driver}

+ )} +
+ ))} +
+

Click on a device for detailed hardware information

+ + )} + {/* Thermal Monitoring */} {hardwareData?.temperatures && hardwareData.temperatures.length > 0 && ( @@ -750,281 +784,42 @@ export default function Hardware() { {findPCIDeviceForGPU(selectedGPU)?.driver || selectedGPU.pci_driver} {realtimeGPUData?.has_monitoring_tool === true && ( - - {realtimeGPUData?.driver_version ? `✓ v${realtimeGPUData.driver_version}` : "✓"} + + Monitoring Available )} )} - {(findPCIDeviceForGPU(selectedGPU)?.kernel_module || selectedGPU.pci_kernel_module) && ( -
- Kernel Module - - {findPCIDeviceForGPU(selectedGPU)?.kernel_module || selectedGPU.pci_kernel_module} - -
- )} - {detailsLoading ? ( -
- -

Loading real-time data...

+ {/* Real-Time Data */} + {realtimeGPUData && hasRealtimeData() && ( +
+

+ Real-Time Data +

+
+ {realtimeGPUData.data.map((data, index) => ( +
+ {data.name} + {data.value} +
+ ))} +
- ) : realtimeGPUData?.has_monitoring_tool === true ? ( - <> -
-
- Updating every 3 seconds -
+ )} -
-

- Real-Time Metrics -

-
- {realtimeGPUData.clock_graphics && ( -
- Graphics Clock - {formatClock(realtimeGPUData.clock_graphics)} -
- )} - {realtimeGPUData.clock_memory && ( -
- Memory Clock - {formatClock(realtimeGPUData.clock_memory)} -
- )} - {realtimeGPUData.power_draw && realtimeGPUData.power_draw !== "0.00 W" && ( -
- Power Draw - {realtimeGPUData.power_draw} -
- )} - {realtimeGPUData.temperature !== undefined && realtimeGPUData.temperature !== null && ( -
- Temperature - - {realtimeGPUData.temperature}°C - -
- )} -
-
- - {/* Engine Utilization (Intel/AMD) */} - {(realtimeGPUData.engine_render !== undefined || - realtimeGPUData.engine_blitter !== undefined || - realtimeGPUData.engine_video !== undefined || - realtimeGPUData.engine_video_enhance !== undefined) && ( -
-

- Engine Utilization (Total) -

-
- {realtimeGPUData.engine_render !== undefined && ( -
-
- Render/3D - - {typeof realtimeGPUData.engine_render === "number" - ? `${realtimeGPUData.engine_render.toFixed(1)}%` - : realtimeGPUData.engine_render} - -
- -
- )} - {realtimeGPUData.engine_video !== undefined && ( -
-
- Video - - {typeof realtimeGPUData.engine_video === "number" - ? `${realtimeGPUData.engine_video.toFixed(1)}%` - : realtimeGPUData.engine_video} - -
- -
- )} - {realtimeGPUData.engine_blitter !== undefined && ( -
-
- Blitter - - {typeof realtimeGPUData.engine_blitter === "number" - ? `${realtimeGPUData.engine_blitter.toFixed(1)}%` - : realtimeGPUData.engine_blitter} - -
- -
- )} - {realtimeGPUData.engine_video_enhance !== undefined && ( -
-
- VideoEnhance - - {typeof realtimeGPUData.engine_video_enhance === "number" - ? `${realtimeGPUData.engine_video_enhance.toFixed(1)}%` - : realtimeGPUData.engine_video_enhance} - -
- -
- )} -
-
- )} - - {/* CHANGE: Changed process name badge from blue to purple to match Intel/AMD */} - {realtimeGPUData.processes && realtimeGPUData.processes.length > 0 && ( -
-

- Active Processes ({realtimeGPUData.processes.length}) -

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

PID: {proc.pid}

-
- {proc.memory && ( - - {typeof proc.memory === "object" - ? formatMemory(proc.memory.resident / 1024) - : formatMemory(proc.memory)} - - )} -
- - {proc.engines && Object.keys(proc.engines).length > 0 && ( -
-

Engine Utilization:

- {Object.entries(proc.engines).map(([engineName, engineData]: [string, any]) => { - const utilization = - typeof engineData === "object" ? engineData.busy || 0 : engineData - const utilizationNum = - typeof utilization === "string" ? Number.parseFloat(utilization) : utilization - - if (utilizationNum === 0 || isNaN(utilizationNum)) return null - - return ( -
-
- {engineName} - {utilizationNum.toFixed(1)}% -
- -
- ) - })} -
- )} -
- ))} -
-
- )} - - {realtimeGPUData.processes && realtimeGPUData.processes.length === 0 && ( -
-

No active processes using the GPU

-
- )} - - {/* Memory Info (NVIDIA) */} - {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}% -
- -
- )} -
-
- )} - - ) : ( -
-
-
- - - -
-
-

Extended Monitoring Not Available

-

- {getMonitoringToolRecommendation(selectedGPU.vendor)} -

-
-
+ {/* Monitoring Tool Recommendation */} + {!hasRealtimeData() && ( +
+

+ Monitoring Tool Recommendation +

+

+ {getMonitoringToolRecommendation(selectedGPU.vendor)} +

)}
@@ -1032,682 +827,6 @@ export default function Hardware() { )} - - {/* PCI Devices - Changed to modal */} - {hardwareData?.pci_devices && hardwareData.pci_devices.length > 0 && ( - -
- -

PCI Devices

- - {hardwareData.pci_devices.length} devices - -
- -
- {hardwareData.pci_devices.map((device, index) => ( -
setSelectedPCIDevice(device)} - className="cursor-pointer rounded-lg border border-white/10 sm:border-border bg-white/5 sm:bg-card sm:hover:bg-white/5 p-3 transition-colors" - > -
- {device.type} - {device.slot} -
-

{device.device}

-

{device.vendor}

- {device.driver && ( -

Driver: {device.driver}

- )} -
- ))} -
- - )} - - {/* PCI Device Detail Modal */} - setSelectedPCIDevice(null)}> - - - {selectedPCIDevice?.device} - PCI Device Information - - - {selectedPCIDevice && ( -
-
- Device Type - {selectedPCIDevice.type} -
- -
- PCI Slot - {selectedPCIDevice.slot} -
- -
- Device Name - {selectedPCIDevice.device} -
- -
- Vendor - {selectedPCIDevice.vendor} -
- -
- Class - {selectedPCIDevice.class} -
- - {selectedPCIDevice.driver && ( -
- Driver - {selectedPCIDevice.driver} -
- )} - - {selectedPCIDevice.kernel_module && ( -
- Kernel Module - {selectedPCIDevice.kernel_module} -
- )} -
- )} - - - - {/* Power Consumption */} - {hardwareData?.power_meter && ( - -
- -

Power Consumption

-
- -
-
-
-

{hardwareData.power_meter.name}

- {hardwareData.power_meter.adapter && ( -

{hardwareData.power_meter.adapter}

- )} -
-
-

{hardwareData.power_meter.watts.toFixed(1)} W

-

Current Draw

-
-
-
- - )} - - {/* Power Supplies */} - {hardwareData?.power_supplies && hardwareData.power_supplies.length > 0 && ( - -
- -

Power Supplies

- - {hardwareData.power_supplies.length} PSUs - -
- -
- {hardwareData.power_supplies.map((psu, index) => ( -
-
- {psu.name} - {psu.status && ( - {psu.status} - )} -
-

{psu.watts} W

-

Current Output

-
- ))} -
- - )} - - {/* Fans */} - {hardwareData?.fans && hardwareData.fans.length > 0 && ( - -
- -

System Fans

- - {hardwareData.fans.length} fans - -
- -
- {hardwareData.fans.map((fan, index) => { - const isPercentage = fan.unit === "percent" || fan.unit === "%" - const percentage = isPercentage ? fan.speed : Math.min((fan.speed / 5000) * 100, 100) - - return ( -
-
- {fan.name} - - {isPercentage ? `${fan.speed.toFixed(0)} percent` : `${fan.speed.toFixed(0)} ${fan.unit}`} - -
-
-
-
- {fan.adapter && {fan.adapter}} -
- ) - })} -
- - )} - - {/* UPS */} - {hardwareData?.ups && Array.isArray(hardwareData.ups) && hardwareData.ups.length > 0 && ( - -
- -

UPS Status

- - {hardwareData.ups.length} UPS - -
- -
- {hardwareData.ups.map((ups: any, index: number) => { - const batteryCharge = - ups.battery_charge_raw || Number.parseFloat(ups.battery_charge?.replace("%", "") || "0") - const loadPercent = ups.load_percent_raw || Number.parseFloat(ups.load_percent?.replace("%", "") || "0") - - // Determine status badge color - const getStatusColor = (status: string) => { - if (!status) return "bg-gray-500/10 text-gray-500 border-gray-500/20" - const statusUpper = status.toUpperCase() - if (statusUpper.includes("OL")) return "bg-green-500/10 text-green-500 border-green-500/20" - if (statusUpper.includes("OB")) return "bg-yellow-500/10 text-yellow-500 border-yellow-500/20" - if (statusUpper.includes("LB")) return "bg-red-500/10 text-red-500 border-red-500/20" - return "bg-blue-500/10 text-blue-500 border-blue-500/20" - } - - return ( -
setSelectedUPS(ups)} - className="cursor-pointer rounded-lg border border-white/10 sm:border-border bg-white/5 sm:bg-card sm:hover:bg-white/5 p-4 transition-colors" - > -
-
- {ups.model || ups.name} - {ups.is_remote && Remote: {ups.host}} -
- {ups.status || "Unknown"} -
- -
- {ups.battery_charge && ( -
-
- Battery Charge - {ups.battery_charge} -
- -
- )} - - {ups.load_percent && ( -
-
- Load - {ups.load_percent} -
- -
- )} - - {ups.time_left && ( -
- Runtime -
- {ups.time_left} -
-
- )} - - {ups.input_voltage && ( -
- Input Voltage -
- {ups.input_voltage} -
-
- )} -
-
- ) - })} -
- - )} - - setSelectedUPS(null)}> - - {selectedUPS && ( - <> - - {selectedUPS.model || selectedUPS.name} - - UPS Detailed Information - {selectedUPS.is_remote && ` • Remote: ${selectedUPS.host}`} - - - -
- {/* Status Overview */} -
-

- Status Overview -

-
-
- Status - - {selectedUPS.status || "Unknown"} - -
-
- Connection - {selectedUPS.connection_type} -
- {selectedUPS.host && ( -
- Host - {selectedUPS.host} -
- )} -
-
- - {/* Battery Information */} -
-

- Battery Information -

-
- {selectedUPS.battery_charge && ( -
-
- Charge Level - {selectedUPS.battery_charge} -
- -
- )} - {selectedUPS.time_left && ( -
- Runtime Remaining - - {selectedUPS.time_left} - -
- )} - {selectedUPS.battery_voltage && ( -
- Battery Voltage - {selectedUPS.battery_voltage} -
- )} - {selectedUPS.battery_date && ( -
- Battery Date - {selectedUPS.battery_date} -
- )} -
-
- - {/* Input/Output Information */} -
-

- Power Information -

-
- {selectedUPS.input_voltage && ( -
- Input Voltage - {selectedUPS.input_voltage} -
- )} - {selectedUPS.output_voltage && ( -
- Output Voltage - {selectedUPS.output_voltage} -
- )} - {selectedUPS.input_frequency && ( -
- Input Frequency - {selectedUPS.input_frequency} -
- )} - {selectedUPS.output_frequency && ( -
- Output Frequency - {selectedUPS.output_frequency} -
- )} - {selectedUPS.load_percent && ( -
-
- Load - {selectedUPS.load_percent} -
- -
- )} - {selectedUPS.real_power && ( -
- Real Power - {selectedUPS.real_power} -
- )} - {selectedUPS.apparent_power && ( -
- Apparent Power - {selectedUPS.apparent_power} -
- )} -
-
- - {/* Device Information */} -
-

- Device Information -

-
- {selectedUPS.manufacturer && ( -
- Manufacturer - {selectedUPS.manufacturer} -
- )} - {selectedUPS.model && ( -
- Model - {selectedUPS.model} -
- )} - {selectedUPS.serial && ( -
- Serial Number - {selectedUPS.serial} -
- )} - {selectedUPS.firmware && ( -
- Firmware - {selectedUPS.firmware} -
- )} - {selectedUPS.driver && ( -
- Driver - {selectedUPS.driver} -
- )} -
-
-
- - )} - - - - {/* Network Summary - Clickable */} - {hardwareData?.pci_devices && - hardwareData.pci_devices.filter((d) => d.type.toLowerCase().includes("network")).length > 0 && ( - -
- -

Network Summary

- - {hardwareData.pci_devices.filter((d) => d.type.toLowerCase().includes("network")).length} interfaces - -
- -
- {hardwareData.pci_devices - .filter((d) => d.type.toLowerCase().includes("network")) - .map((device, index) => ( -
setSelectedNetwork(device)} - className="cursor-pointer rounded-lg border border-white/10 sm:border-border bg-white/5 sm:bg-card sm:hover:bg-white/5 p-3 transition-colors" - > -
- {device.device} - - Ethernet - -
-

{device.vendor}

- {device.driver && ( -

Driver: {device.driver}

- )} -
- ))} -
-

Click on an interface for detailed information

- - )} - - {/* Network Detail Modal */} - setSelectedNetwork(null)}> - - - {selectedNetwork?.device} - Network Interface Information - - - {selectedNetwork && ( -
-
- Device Type - {selectedNetwork.type} -
- -
- PCI Slot - {selectedNetwork.slot} -
- -
- Vendor - {selectedNetwork.vendor} -
- -
- Class - {selectedNetwork.class} -
- - {selectedNetwork.driver && ( -
- Driver - {selectedNetwork.driver} -
- )} - - {selectedNetwork.kernel_module && ( -
- Kernel Module - {selectedNetwork.kernel_module} -
- )} -
- )} - - - - {/* Storage Summary - Clickable */} - {hardwareData?.storage_devices && hardwareData.storage_devices.length > 0 && ( - -
- -

Storage Summary

- - {hardwareData.storage_devices.length} devices - -
- -
- {hardwareData.storage_devices.map((device, index) => ( -
setSelectedDisk(device)} - className="cursor-pointer rounded-lg border border-white/10 sm:border-border bg-white/5 sm:bg-card sm:hover:bg-white/5 p-3 transition-colors" - > -
- {device.name} - - {device.type} - -
- {device.size &&

{formatMemory(parseLsblkSize(device.size))}

} - {device.model && ( -

{device.model}

- )} - {device.driver && ( -

Driver: {device.driver}

- )} -
- ))} -
-

Click on a device for detailed hardware information

- - )} - - {/* Disk Detail Modal */} - setSelectedDisk(null)}> - - - {selectedDisk?.name} - Storage Device Hardware Information - - - {selectedDisk && ( -
-
- Device Name - {selectedDisk.name} -
- - {selectedDisk.type && ( -
- Type - {selectedDisk.type} -
- )} - - {selectedDisk.size && ( -
- Capacity - {formatMemory(parseLsblkSize(selectedDisk.size))} -
- )} - - {selectedDisk.model && ( -
- Model - {selectedDisk.model} -
- )} - - {selectedDisk.family && ( -
- Family - {selectedDisk.family} -
- )} - - {selectedDisk.serial && ( -
- Serial Number - {selectedDisk.serial} -
- )} - - {selectedDisk.firmware && ( -
- Firmware - {selectedDisk.firmware} -
- )} - - {selectedDisk.interface && ( -
- Interface - {selectedDisk.interface} -
- )} - - {selectedDisk.driver && ( -
- Driver - {selectedDisk.driver} -
- )} - - {selectedDisk.rotation_rate && ( -
- Rotation Rate - {selectedDisk.rotation_rate} -
- )} - - {selectedDisk.form_factor && ( -
- Form Factor - {selectedDisk.form_factor} -
- )} - - {selectedDisk.sata_version && ( -
- SATA Version - {selectedDisk.sata_version} -
- )} -
- )} - -
) }