mirror of
https://github.com/MacRimi/ProxMenux.git
synced 2025-11-18 03:26:17 +00:00
Update AppImage
This commit is contained in:
MacRimi
@@ -17,7 +17,6 @@ import {
|
||||
MemoryStick,
|
||||
Cpu as Gpu,
|
||||
Loader2,
|
||||
Info,
|
||||
} from "lucide-react"
|
||||
import useSWR from "swr"
|
||||
import { useState, useEffect } from "react"
|
||||
@@ -98,7 +97,7 @@ const getMonitoringToolRecommendation = (vendor: string): string => {
|
||||
}
|
||||
|
||||
if (lowerVendor.includes("amd") || lowerVendor.includes("ati")) {
|
||||
return "To get extended GPU monitoring information, please install amdgpu_top package. Download from: https://github.com/Umio-Yasuno/amdgpu_top/releases"
|
||||
return "To get extended GPU monitoring information, please install radeontop package."
|
||||
}
|
||||
return "To get extended GPU monitoring information, please install the appropriate GPU monitoring tools for your hardware."
|
||||
}
|
||||
@@ -114,7 +113,6 @@ export default function Hardware() {
|
||||
const [selectedPCIDevice, setSelectedPCIDevice] = useState<PCIDevice | null>(null)
|
||||
const [selectedDisk, setSelectedDisk] = useState<StorageDevice | null>(null)
|
||||
const [selectedNetwork, setSelectedNetwork] = useState<PCIDevice | null>(null)
|
||||
const [selectedUPS, setSelectedUPS] = useState<any>(null) // Added state for UPS modal
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedGPU) return
|
||||
@@ -122,24 +120,14 @@ export default function Hardware() {
|
||||
const pciDevice = findPCIDeviceForGPU(selectedGPU)
|
||||
const fullSlot = pciDevice?.slot || selectedGPU.slot
|
||||
|
||||
if (!fullSlot) {
|
||||
setDetailsLoading(false)
|
||||
setRealtimeGPUData({ has_monitoring_tool: false })
|
||||
return
|
||||
}
|
||||
if (!fullSlot) return
|
||||
|
||||
const abortController = new AbortController()
|
||||
let timeoutId: NodeJS.Timeout
|
||||
|
||||
const fetchRealtimeData = async () => {
|
||||
try {
|
||||
const apiUrl = `http://${window.location.hostname}:8008/api/gpu/${fullSlot}/realtime`
|
||||
|
||||
// Set a timeout of 5 seconds
|
||||
timeoutId = setTimeout(() => {
|
||||
abortController.abort()
|
||||
}, 5000)
|
||||
|
||||
const response = await fetch(apiUrl, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
@@ -148,8 +136,6 @@ export default function Hardware() {
|
||||
signal: abortController.signal,
|
||||
})
|
||||
|
||||
clearTimeout(timeoutId)
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`)
|
||||
}
|
||||
@@ -175,31 +161,9 @@ export default function Hardware() {
|
||||
|
||||
return () => {
|
||||
clearInterval(interval)
|
||||
clearTimeout(timeoutId)
|
||||
abortController.abort()
|
||||
}
|
||||
}, [selectedGPU, hardwareData?.pci_devices])
|
||||
|
||||
if (!hardwareData && !error) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
<div className="text-center">
|
||||
<Loader2 className="h-8 w-8 animate-spin mx-auto mb-2 text-primary" />
|
||||
<p className="text-sm text-muted-foreground">Loading hardware information...</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
<div className="text-center">
|
||||
<p className="text-sm text-destructive">Error loading hardware information</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}, [selectedGPU])
|
||||
|
||||
const handleGPUClick = async (gpu: GPU) => {
|
||||
setSelectedGPU(gpu)
|
||||
@@ -382,7 +346,7 @@ export default function Hardware() {
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Thermal Monitoring - Organized by Category */}
|
||||
{/* Thermal Monitoring */}
|
||||
{hardwareData?.temperatures && hardwareData.temperatures.length > 0 && (
|
||||
<Card className="border-border/50 bg-card/50 p-6">
|
||||
<div className="mb-4 flex items-center gap-2">
|
||||
@@ -393,84 +357,33 @@ export default function Hardware() {
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{(() => {
|
||||
// Group temperatures by category
|
||||
const tempsByCategory: Record<string, typeof hardwareData.temperatures> = {}
|
||||
hardwareData.temperatures.forEach((temp) => {
|
||||
const category = (temp as any).category || "Other"
|
||||
if (!tempsByCategory[category]) {
|
||||
tempsByCategory[category] = []
|
||||
}
|
||||
tempsByCategory[category].push(temp)
|
||||
})
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
{hardwareData.temperatures.map((temp, index) => {
|
||||
const percentage = temp.critical > 0 ? (temp.current / temp.critical) * 100 : (temp.current / 100) * 100
|
||||
const isHot = temp.current > (temp.high || 80)
|
||||
const isCritical = temp.current > (temp.critical || 90)
|
||||
|
||||
// Define category order and icons
|
||||
const categoryOrder = ["CPU", "GPU", "NVMe", "Storage", "Motherboard", "Chipset", "PCI", "Other"]
|
||||
const categoryIcons: Record<string, any> = {
|
||||
CPU: CpuIcon,
|
||||
GPU: Gpu,
|
||||
NVMe: HardDrive,
|
||||
Storage: HardDrive,
|
||||
Motherboard: Cpu,
|
||||
Chipset: Cpu,
|
||||
PCI: Network,
|
||||
Other: Thermometer,
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{categoryOrder.map((category) => {
|
||||
const temps = tempsByCategory[category]
|
||||
if (!temps || temps.length === 0) return null
|
||||
|
||||
const CategoryIcon = categoryIcons[category] || Thermometer
|
||||
|
||||
return (
|
||||
<div key={category}>
|
||||
<div className="mb-3 flex items-center gap-2">
|
||||
<CategoryIcon className="h-4 w-4 text-muted-foreground" />
|
||||
<h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
|
||||
{category}
|
||||
</h3>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{temps.length}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
{temps.map((temp, index) => {
|
||||
const percentage =
|
||||
temp.critical > 0 ? (temp.current / temp.critical) * 100 : (temp.current / 100) * 100
|
||||
const isHot = temp.current > (temp.high || 80)
|
||||
const isCritical = temp.current > (temp.critical || 90)
|
||||
|
||||
return (
|
||||
<div key={index} className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium">{temp.name}</span>
|
||||
<span
|
||||
className={`text-sm font-semibold ${isCritical ? "text-red-500" : isHot ? "text-orange-500" : "text-green-500"}`}
|
||||
>
|
||||
{temp.current.toFixed(1)}°C
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 w-full overflow-hidden rounded-full bg-secondary">
|
||||
<div
|
||||
className={`h-full transition-all ${isCritical ? "bg-red-500" : isHot ? "bg-orange-500" : "bg-blue-500"}`}
|
||||
style={{ width: `${Math.min(percentage, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
{temp.adapter && <span className="text-xs text-muted-foreground">{temp.adapter}</span>}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
return (
|
||||
<div key={index} className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium">{temp.name}</span>
|
||||
<span
|
||||
className={`text-sm font-semibold ${isCritical ? "text-red-500" : isHot ? "text-orange-500" : "text-green-500"}`}
|
||||
>
|
||||
{temp.current.toFixed(1)}°C
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 w-full overflow-hidden rounded-full bg-secondary">
|
||||
<div
|
||||
className="h-full bg-blue-500 transition-all"
|
||||
style={{ width: `${Math.min(percentage, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
{temp.adapter && <span className="text-xs text-muted-foreground">{temp.adapter}</span>}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
@@ -1040,7 +953,7 @@ export default function Hardware() {
|
||||
{/* Power Supplies */}
|
||||
{/* This section was moved to be grouped with Power Consumption */}
|
||||
|
||||
{/* UPS - Enhanced with detailed modal */}
|
||||
{/* UPS */}
|
||||
{hardwareData?.ups && Object.keys(hardwareData.ups).length > 0 && hardwareData.ups.model && (
|
||||
<Card className="border-border/50 bg-card/50 p-6">
|
||||
<div className="mb-4 flex items-center gap-2">
|
||||
@@ -1051,16 +964,7 @@ export default function Hardware() {
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-lg border border-border/30 bg-background/50 p-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium">{hardwareData.ups.model}</span>
|
||||
<button
|
||||
onClick={() => setSelectedUPS(hardwareData.ups)}
|
||||
className="p-1 rounded-md hover:bg-accent transition-colors"
|
||||
title="View detailed UPS information"
|
||||
>
|
||||
<Info className="h-4 w-4 text-muted-foreground hover:text-primary" />
|
||||
</button>
|
||||
</div>
|
||||
<span className="text-sm font-medium">{hardwareData.ups.model}</span>
|
||||
<Badge
|
||||
variant={hardwareData.ups.status === "OL" ? "default" : "destructive"}
|
||||
className={
|
||||
@@ -1125,367 +1029,6 @@ export default function Hardware() {
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Dialog open={selectedUPS !== null} onOpenChange={() => setSelectedUPS(null)}>
|
||||
<DialogContent className="max-w-4xl max-h-[85vh] overflow-y-auto">
|
||||
{selectedUPS && (
|
||||
<>
|
||||
<DialogHeader className="pb-4 border-b border-border">
|
||||
<DialogTitle>{selectedUPS.model || selectedUPS.name}</DialogTitle>
|
||||
<DialogDescription>Comprehensive UPS Information</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-6 py-4">
|
||||
{/* Device Information */}
|
||||
{(selectedUPS.model || selectedUPS.manufacturer || selectedUPS.serial || selectedUPS.device_type) && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
|
||||
Device Information
|
||||
</h3>
|
||||
<div className="grid gap-2">
|
||||
{selectedUPS.model && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Model</span>
|
||||
<span className="text-sm font-medium text-right">{selectedUPS.model}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.manufacturer && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Manufacturer</span>
|
||||
<span className="text-sm font-medium">{selectedUPS.manufacturer}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.serial && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Serial Number</span>
|
||||
<span className="font-mono text-sm">{selectedUPS.serial}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.device_type && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Device Type</span>
|
||||
<span className="text-sm font-medium">{selectedUPS.device_type}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.firmware && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Firmware</span>
|
||||
<span className="font-mono text-sm">{selectedUPS.firmware}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Status */}
|
||||
{(selectedUPS.status || selectedUPS.beeper_status || selectedUPS.test_result) && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">Status</h3>
|
||||
<div className="grid gap-2">
|
||||
{selectedUPS.status && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">UPS Status</span>
|
||||
<Badge
|
||||
variant={selectedUPS.status === "OL" ? "default" : "destructive"}
|
||||
className={
|
||||
selectedUPS.status === "OL" ? "bg-green-500/10 text-green-500 border-green-500/20" : ""
|
||||
}
|
||||
>
|
||||
{selectedUPS.status}
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.beeper_status && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Beeper Status</span>
|
||||
<span className="text-sm font-medium">{selectedUPS.beeper_status}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.test_result && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Test Result</span>
|
||||
<span className="text-sm font-medium">{selectedUPS.test_result}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Battery */}
|
||||
{(selectedUPS.battery_charge ||
|
||||
selectedUPS.time_left ||
|
||||
selectedUPS.battery_voltage ||
|
||||
selectedUPS.battery_type) && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
|
||||
Battery
|
||||
</h3>
|
||||
<div className="grid gap-2">
|
||||
{selectedUPS.battery_charge && (
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-muted-foreground">Charge Level</span>
|
||||
<span className="text-sm font-medium">{selectedUPS.battery_charge}</span>
|
||||
</div>
|
||||
<Progress
|
||||
value={Number.parseInt(selectedUPS.battery_charge.replace("%", ""))}
|
||||
className="h-2 [&>div]:bg-blue-500"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.battery_charge_low && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Low Battery Threshold</span>
|
||||
<span className="text-sm font-medium">{selectedUPS.battery_charge_low}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.time_left && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Runtime Remaining</span>
|
||||
<span className="text-sm font-medium text-green-500">{selectedUPS.time_left}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.battery_runtime_low && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Low Runtime Threshold</span>
|
||||
<span className="text-sm font-medium">{selectedUPS.battery_runtime_low}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.battery_voltage && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Battery Voltage</span>
|
||||
<span className="text-sm font-medium">{selectedUPS.battery_voltage}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.battery_voltage_nominal && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Nominal Voltage</span>
|
||||
<span className="text-sm font-medium">{selectedUPS.battery_voltage_nominal}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.battery_type && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Battery Type</span>
|
||||
<span className="text-sm font-medium">{selectedUPS.battery_type}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.battery_mfr_date && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Battery Manufacture Date</span>
|
||||
<span className="text-sm font-medium">{selectedUPS.battery_mfr_date}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Power */}
|
||||
{(selectedUPS.load_percent || selectedUPS.real_power || selectedUPS.apparent_power) && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">Power</h3>
|
||||
<div className="grid gap-2">
|
||||
{selectedUPS.load_percent && (
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-muted-foreground">Load</span>
|
||||
<span className="text-sm font-medium">{selectedUPS.load_percent}</span>
|
||||
</div>
|
||||
<Progress
|
||||
value={Number.parseInt(selectedUPS.load_percent.replace("%", ""))}
|
||||
className="h-2 [&>div]:bg-blue-500"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.real_power && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Real Power</span>
|
||||
<span className="text-sm font-medium text-blue-500">{selectedUPS.real_power}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.realpower_nominal && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Nominal Real Power</span>
|
||||
<span className="text-sm font-medium">{selectedUPS.realpower_nominal}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.apparent_power && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Apparent Power</span>
|
||||
<span className="text-sm font-medium">{selectedUPS.apparent_power}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.power_nominal && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Nominal Apparent Power</span>
|
||||
<span className="text-sm font-medium">{selectedUPS.power_nominal}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Input/Output */}
|
||||
{(selectedUPS.input_voltage || selectedUPS.output_voltage || selectedUPS.input_frequency) && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
|
||||
Input / Output
|
||||
</h3>
|
||||
<div className="grid gap-2 md:grid-cols-2">
|
||||
{selectedUPS.input_voltage && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Input Voltage</span>
|
||||
<span className="text-sm font-medium text-green-500">{selectedUPS.input_voltage}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.input_voltage_nominal && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Nominal Input Voltage</span>
|
||||
<span className="text-sm font-medium">{selectedUPS.input_voltage_nominal}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.input_frequency && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Input Frequency</span>
|
||||
<span className="text-sm font-medium">{selectedUPS.input_frequency}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.input_transfer_high && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Transfer High</span>
|
||||
<span className="text-sm font-medium">{selectedUPS.input_transfer_high}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.input_transfer_low && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Transfer Low</span>
|
||||
<span className="text-sm font-medium">{selectedUPS.input_transfer_low}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.transfer_reason && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Last Transfer Reason</span>
|
||||
<span className="text-sm font-medium">{selectedUPS.transfer_reason}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.output_voltage && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Output Voltage</span>
|
||||
<span className="text-sm font-medium">{selectedUPS.output_voltage}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.output_voltage_nominal && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Nominal Output Voltage</span>
|
||||
<span className="text-sm font-medium">{selectedUPS.output_voltage_nominal}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.output_frequency && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Output Frequency</span>
|
||||
<span className="text-sm font-medium">{selectedUPS.output_frequency}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Driver */}
|
||||
{(selectedUPS.driver_name || selectedUPS.driver_version) && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">Driver</h3>
|
||||
<div className="grid gap-2">
|
||||
{selectedUPS.driver_name && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Driver Name</span>
|
||||
<span className="font-mono text-sm text-green-500">{selectedUPS.driver_name}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.driver_version && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Driver Version</span>
|
||||
<span className="font-mono text-sm">{selectedUPS.driver_version}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.driver_version_internal && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Internal Version</span>
|
||||
<span className="font-mono text-sm">{selectedUPS.driver_version_internal}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.driver_poll_freq && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Poll Frequency</span>
|
||||
<span className="text-sm font-medium">{selectedUPS.driver_poll_freq}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.driver_poll_interval && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Poll Interval</span>
|
||||
<span className="text-sm font-medium">{selectedUPS.driver_poll_interval}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Configuration */}
|
||||
{(selectedUPS.delay_shutdown || selectedUPS.delay_start || selectedUPS.timer_shutdown) && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
|
||||
Configuration
|
||||
</h3>
|
||||
<div className="grid gap-2">
|
||||
{selectedUPS.delay_shutdown && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Shutdown Delay</span>
|
||||
<span className="text-sm font-medium">{selectedUPS.delay_shutdown}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.delay_start && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Start Delay</span>
|
||||
<span className="text-sm font-medium">{selectedUPS.delay_start}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.timer_shutdown && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Shutdown Timer</span>
|
||||
<span className="text-sm font-medium">{selectedUPS.timer_shutdown}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedUPS.timer_reboot && (
|
||||
<div className="flex justify-between border-b border-border/50 pb-2">
|
||||
<span className="text-sm text-muted-foreground">Reboot Timer</span>
|
||||
<span className="text-sm font-medium">{selectedUPS.timer_reboot}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Raw Variables - Collapsible section with all UPS variables */}
|
||||
{selectedUPS.raw_variables && Object.keys(selectedUPS.raw_variables).length > 0 && (
|
||||
<details className="rounded-lg border border-border/30 bg-background/50">
|
||||
<summary className="cursor-pointer p-4 font-medium text-sm hover:bg-accent/50 transition-colors">
|
||||
All UPS Variables ({Object.keys(selectedUPS.raw_variables).length})
|
||||
</summary>
|
||||
<div className="p-4 pt-0 max-h-[300px] overflow-y-auto">
|
||||
<div className="grid gap-1">
|
||||
{Object.entries(selectedUPS.raw_variables).map(([key, value]) => (
|
||||
<div key={key} className="flex justify-between border-b border-border/50 pb-1 text-xs">
|
||||
<span className="font-mono text-muted-foreground">{key}</span>
|
||||
<span className="font-mono">{value as string}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Network Summary - Clickable */}
|
||||
{hardwareData?.pci_devices &&
|
||||
hardwareData.pci_devices.filter((d) => d.type.toLowerCase().includes("network")).length > 0 && (
|
||||
|
||||
@@ -4,19 +4,7 @@ import { useState, useEffect } from "react"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
|
||||
import { Progress } from "./ui/progress"
|
||||
import { Badge } from "./ui/badge"
|
||||
import { Button } from "./ui/button"
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./ui/dialog"
|
||||
import {
|
||||
HardDrive,
|
||||
Database,
|
||||
Archive,
|
||||
AlertTriangle,
|
||||
CheckCircle,
|
||||
Activity,
|
||||
AlertCircle,
|
||||
Thermometer,
|
||||
Info,
|
||||
} from "lucide-react"
|
||||
import { HardDrive, Database, Archive, AlertTriangle, CheckCircle, Activity, AlertCircle } from "lucide-react"
|
||||
|
||||
interface StorageData {
|
||||
total: number
|
||||
@@ -35,70 +23,11 @@ interface DiskInfo {
|
||||
usage_percent: number
|
||||
health: string
|
||||
temperature: number
|
||||
disk_type?: string
|
||||
model?: string
|
||||
serial?: string
|
||||
smart_status?: string
|
||||
power_on_hours?: number
|
||||
power_cycles?: number
|
||||
reallocated_sectors?: number
|
||||
pending_sectors?: number
|
||||
crc_errors?: number
|
||||
percentage_used?: number // NVMe
|
||||
ssd_life_left?: number // SSD
|
||||
wear_leveling_count?: number // SSD
|
||||
media_wearout_indicator?: number // SSD
|
||||
total_lbas_written?: number // Both
|
||||
}
|
||||
|
||||
const TEMP_THRESHOLDS = {
|
||||
HDD: { safe: 45, warning: 55 },
|
||||
SSD: { safe: 55, warning: 65 },
|
||||
NVMe: { safe: 60, warning: 70 },
|
||||
}
|
||||
|
||||
const getTempStatus = (temp: number, diskType: string): "safe" | "warning" | "critical" => {
|
||||
const thresholds = TEMP_THRESHOLDS[diskType as keyof typeof TEMP_THRESHOLDS] || TEMP_THRESHOLDS.HDD
|
||||
if (temp <= thresholds.safe) return "safe"
|
||||
if (temp <= thresholds.warning) return "warning"
|
||||
return "critical"
|
||||
}
|
||||
|
||||
const getTempColor = (status: "safe" | "warning" | "critical"): string => {
|
||||
switch (status) {
|
||||
case "safe":
|
||||
return "text-green-500"
|
||||
case "warning":
|
||||
return "text-yellow-500"
|
||||
case "critical":
|
||||
return "text-red-500"
|
||||
default:
|
||||
return "text-muted-foreground"
|
||||
}
|
||||
}
|
||||
|
||||
const getDiskTypeBadgeColor = (diskType: string): string => {
|
||||
switch (diskType) {
|
||||
case "HDD":
|
||||
return "bg-blue-500/10 text-blue-500 border-blue-500/20"
|
||||
case "SSD":
|
||||
return "bg-purple-500/10 text-purple-500 border-purple-500/20"
|
||||
case "NVMe":
|
||||
return "bg-orange-500/10 text-orange-500 border-orange-500/20"
|
||||
default:
|
||||
return "bg-gray-500/10 text-gray-500 border-gray-500/20"
|
||||
}
|
||||
}
|
||||
|
||||
const getWearStatus = (lifeLeft: number): { status: string; color: string } => {
|
||||
if (lifeLeft >= 80) return { status: "Excellent", color: "text-green-500" }
|
||||
if (lifeLeft >= 50) return { status: "Good", color: "text-yellow-500" }
|
||||
if (lifeLeft >= 20) return { status: "Fair", color: "text-orange-500" }
|
||||
return { status: "Poor", color: "text-red-500" }
|
||||
}
|
||||
|
||||
const fetchStorageData = async (): Promise<StorageData | null> => {
|
||||
try {
|
||||
console.log("[v0] Fetching storage data from Flask server...")
|
||||
const response = await fetch("/api/storage", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
@@ -112,9 +41,10 @@ const fetchStorageData = async (): Promise<StorageData | null> => {
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
console.log("[v0] Successfully fetched storage data from Flask:", data)
|
||||
return data
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch storage data from Flask server:", error)
|
||||
console.error("[v0] Failed to fetch storage data from Flask server:", error)
|
||||
return null
|
||||
}
|
||||
}
|
||||
@@ -123,9 +53,6 @@ export function StorageMetrics() {
|
||||
const [storageData, setStorageData] = useState<StorageData | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [selectedDisk, setSelectedDisk] = useState<DiskInfo | null>(null)
|
||||
const [showDiskDetails, setShowDiskDetails] = useState(false)
|
||||
const [showTempInfo, setShowTempInfo] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
@@ -179,26 +106,6 @@ export function StorageMetrics() {
|
||||
|
||||
const usagePercent = storageData.total > 0 ? (storageData.used / storageData.total) * 100 : 0
|
||||
|
||||
const disksByType = storageData.disks.reduce(
|
||||
(acc, disk) => {
|
||||
const type = disk.disk_type || "Unknown"
|
||||
if (!acc[type]) {
|
||||
acc[type] = []
|
||||
}
|
||||
acc[type].push(disk)
|
||||
return acc
|
||||
},
|
||||
{} as Record<string, DiskInfo[]>,
|
||||
)
|
||||
|
||||
const tempByType = Object.entries(disksByType)
|
||||
.map(([type, disks]) => {
|
||||
const avgTemp = disks.reduce((sum, disk) => sum + disk.temperature, 0) / disks.length
|
||||
const status = getTempStatus(avgTemp, type)
|
||||
return { type, avgTemp: Math.round(avgTemp), status, count: disks.length }
|
||||
})
|
||||
.filter((item) => item.type !== "Unknown")
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Storage Overview Cards */}
|
||||
@@ -266,54 +173,6 @@ export function StorageMetrics() {
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Temperature cards by disk type */}
|
||||
{tempByType.length > 0 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{tempByType.map(({ type, avgTemp, status, count }) => {
|
||||
return (
|
||||
<Card key={type} className="bg-card border-border">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-foreground flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<Thermometer className="h-5 w-5 mr-2" />
|
||||
Avg Temperature
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className={getDiskTypeBadgeColor(type)}>
|
||||
{type}
|
||||
</Badge>
|
||||
<Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setShowTempInfo(true)}>
|
||||
<Info className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className={`text-3xl font-bold ${getTempColor(status)}`}>{avgTemp}°C</div>
|
||||
<p className="text-xs text-muted-foreground mt-2">
|
||||
{count} {type} disk{count > 1 ? "s" : ""}
|
||||
</p>
|
||||
<div className="mt-3">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={
|
||||
status === "safe"
|
||||
? "bg-green-500/10 text-green-500 border-green-500/20"
|
||||
: status === "warning"
|
||||
? "bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
|
||||
: "bg-red-500/10 text-red-500 border-red-500/20"
|
||||
}
|
||||
>
|
||||
{status === "safe" ? "Optimal" : status === "warning" ? "Warning" : "Critical"}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* Disk Details */}
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader>
|
||||
@@ -324,326 +183,55 @@ export function StorageMetrics() {
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{storageData.disks.map((disk, index) => {
|
||||
const diskType = disk.disk_type || "HDD"
|
||||
const tempStatus = getTempStatus(disk.temperature, diskType)
|
||||
|
||||
let lifeLeft: number | null = null
|
||||
let wearLabel = ""
|
||||
|
||||
if (diskType === "NVMe" && disk.percentage_used !== undefined && disk.percentage_used !== null) {
|
||||
lifeLeft = 100 - disk.percentage_used
|
||||
wearLabel = "Life Left"
|
||||
} else if (diskType === "SSD") {
|
||||
if (disk.ssd_life_left !== undefined && disk.ssd_life_left !== null) {
|
||||
lifeLeft = disk.ssd_life_left
|
||||
wearLabel = "Life Left"
|
||||
} else if (disk.media_wearout_indicator !== undefined && disk.media_wearout_indicator !== null) {
|
||||
lifeLeft = disk.media_wearout_indicator
|
||||
wearLabel = "Health"
|
||||
} else if (disk.wear_leveling_count !== undefined && disk.wear_leveling_count !== null) {
|
||||
lifeLeft = disk.wear_leveling_count
|
||||
wearLabel = "Wear Level"
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center justify-between p-4 rounded-lg border border-border bg-card/50 cursor-pointer hover:bg-card/80 transition-colors"
|
||||
onClick={() => {
|
||||
setSelectedDisk(disk)
|
||||
setShowDiskDetails(true)
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center space-x-4">
|
||||
<HardDrive className="h-5 w-5 text-muted-foreground" />
|
||||
<div>
|
||||
<div className="font-medium text-foreground flex items-center gap-2">
|
||||
{disk.name}
|
||||
{disk.disk_type && (
|
||||
<Badge variant="outline" className={getDiskTypeBadgeColor(disk.disk_type)}>
|
||||
{disk.disk_type}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{disk.fstype} • {disk.mountpoint}
|
||||
</div>
|
||||
{storageData.disks.map((disk, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center justify-between p-4 rounded-lg border border-border bg-card/50"
|
||||
>
|
||||
<div className="flex items-center space-x-4">
|
||||
<HardDrive className="h-5 w-5 text-muted-foreground" />
|
||||
<div>
|
||||
<div className="font-medium text-foreground">{disk.name}</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{disk.fstype} • {disk.mountpoint}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-6">
|
||||
<div className="text-right">
|
||||
<div className="text-sm font-medium text-foreground">
|
||||
{disk.used.toFixed(1)} GB / {disk.total.toFixed(1)} GB
|
||||
</div>
|
||||
<Progress value={disk.usage_percent} className="w-24 mt-1" />
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="text-sm text-muted-foreground">Temp</div>
|
||||
<div className={`text-sm font-medium ${getTempColor(tempStatus)}`}>{disk.temperature}°C</div>
|
||||
</div>
|
||||
|
||||
{lifeLeft !== null && (diskType === "SSD" || diskType === "NVMe") && (
|
||||
<div className="text-center">
|
||||
<div className="text-sm text-muted-foreground">{wearLabel}</div>
|
||||
<div className={`text-sm font-medium ${getWearStatus(lifeLeft).color}`}>
|
||||
{lifeLeft.toFixed(0)}%
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={
|
||||
disk.health === "healthy"
|
||||
? "bg-green-500/10 text-green-500 border-green-500/20"
|
||||
: "bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
|
||||
}
|
||||
>
|
||||
{disk.health === "healthy" ? (
|
||||
<CheckCircle className="h-3 w-3 mr-1" />
|
||||
) : (
|
||||
<AlertTriangle className="h-3 w-3 mr-1" />
|
||||
)}
|
||||
{disk.health}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
<div className="flex items-center space-x-6">
|
||||
<div className="text-right">
|
||||
<div className="text-sm font-medium text-foreground">
|
||||
{disk.used.toFixed(1)} GB / {disk.total.toFixed(1)} GB
|
||||
</div>
|
||||
<Progress value={disk.usage_percent} className="w-24 mt-1" />
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="text-sm text-muted-foreground">Temp</div>
|
||||
<div className="text-sm font-medium text-foreground">{disk.temperature}°C</div>
|
||||
</div>
|
||||
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={
|
||||
disk.health === "healthy"
|
||||
? "bg-green-500/10 text-green-500 border-green-500/20"
|
||||
: "bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
|
||||
}
|
||||
>
|
||||
{disk.health === "healthy" ? (
|
||||
<CheckCircle className="h-3 w-3 mr-1" />
|
||||
) : (
|
||||
<AlertTriangle className="h-3 w-3 mr-1" />
|
||||
)}
|
||||
{disk.health}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Dialog open={showTempInfo} onOpenChange={setShowTempInfo}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Temperature Thresholds by Disk Type</DialogTitle>
|
||||
<DialogDescription>
|
||||
Recommended operating temperature ranges for different storage devices
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-border">
|
||||
<th className="text-left p-3 font-semibold">Disk Type</th>
|
||||
<th className="text-left p-3 font-semibold">Safe Zone</th>
|
||||
<th className="text-left p-3 font-semibold">Warning Zone</th>
|
||||
<th className="text-left p-3 font-semibold">Critical Zone</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="border-b border-border">
|
||||
<td className="p-3">
|
||||
<Badge variant="outline" className={getDiskTypeBadgeColor("HDD")}>
|
||||
HDD
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="p-3 text-green-500">≤ 45°C</td>
|
||||
<td className="p-3 text-yellow-500">46 – 55°C</td>
|
||||
<td className="p-3 text-red-500">> 55°C</td>
|
||||
</tr>
|
||||
<tr className="border-b border-border">
|
||||
<td className="p-3">
|
||||
<Badge variant="outline" className={getDiskTypeBadgeColor("SSD")}>
|
||||
SSD
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="p-3 text-green-500">≤ 55°C</td>
|
||||
<td className="p-3 text-yellow-500">56 – 65°C</td>
|
||||
<td className="p-3 text-red-500">> 65°C</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="p-3">
|
||||
<Badge variant="outline" className={getDiskTypeBadgeColor("NVMe")}>
|
||||
NVMe
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="p-3 text-green-500">≤ 60°C</td>
|
||||
<td className="p-3 text-yellow-500">61 – 70°C</td>
|
||||
<td className="p-3 text-red-500">> 70°C</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
These thresholds are based on industry standards and manufacturer recommendations. Operating within the
|
||||
safe zone ensures optimal performance and longevity.
|
||||
</p>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog open={showDiskDetails} onOpenChange={setShowDiskDetails}>
|
||||
<DialogContent className="max-w-3xl">
|
||||
{selectedDisk && (
|
||||
<>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<HardDrive className="h-5 w-5" />
|
||||
Disk Details: {selectedDisk.name}
|
||||
</DialogTitle>
|
||||
<DialogDescription>Complete SMART information and health status</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-6">
|
||||
{/* Basic Info */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground">Model</div>
|
||||
<div className="font-medium">{selectedDisk.model || "Unknown"}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground">Serial Number</div>
|
||||
<div className="font-medium">{selectedDisk.serial || "Unknown"}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground">Capacity</div>
|
||||
<div className="font-medium">{selectedDisk.total.toFixed(1)}G</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground">Health Status</div>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={
|
||||
selectedDisk.health === "healthy"
|
||||
? "bg-green-500/10 text-green-500 border-green-500/20"
|
||||
: "bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
|
||||
}
|
||||
>
|
||||
{selectedDisk.health === "healthy" ? "Healthy" : "Warning"}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(selectedDisk.disk_type === "SSD" || selectedDisk.disk_type === "NVMe") && (
|
||||
<div className="border-t border-border pt-4">
|
||||
<h3 className="font-semibold mb-3">Wear & Life Indicators</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{selectedDisk.disk_type === "NVMe" &&
|
||||
selectedDisk.percentage_used !== undefined &&
|
||||
selectedDisk.percentage_used !== null && (
|
||||
<>
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground">Percentage Used</div>
|
||||
<div
|
||||
className={`text-lg font-bold ${getWearStatus(100 - selectedDisk.percentage_used).color}`}
|
||||
>
|
||||
{selectedDisk.percentage_used}%
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground">Life Remaining</div>
|
||||
<div
|
||||
className={`text-lg font-bold ${getWearStatus(100 - selectedDisk.percentage_used).color}`}
|
||||
>
|
||||
{(100 - selectedDisk.percentage_used).toFixed(0)}%
|
||||
</div>
|
||||
<Progress value={100 - selectedDisk.percentage_used} className="mt-2" />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{selectedDisk.disk_type === "SSD" && (
|
||||
<>
|
||||
{selectedDisk.ssd_life_left !== undefined && selectedDisk.ssd_life_left !== null && (
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground">SSD Life Left</div>
|
||||
<div className={`text-lg font-bold ${getWearStatus(selectedDisk.ssd_life_left).color}`}>
|
||||
{selectedDisk.ssd_life_left}%
|
||||
</div>
|
||||
<Progress value={selectedDisk.ssd_life_left} className="mt-2" />
|
||||
</div>
|
||||
)}
|
||||
{selectedDisk.wear_leveling_count !== undefined &&
|
||||
selectedDisk.wear_leveling_count !== null && (
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground">Wear Leveling Count</div>
|
||||
<div
|
||||
className={`text-lg font-bold ${getWearStatus(selectedDisk.wear_leveling_count).color}`}
|
||||
>
|
||||
{selectedDisk.wear_leveling_count}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{selectedDisk.media_wearout_indicator !== undefined &&
|
||||
selectedDisk.media_wearout_indicator !== null && (
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground">Media Wearout Indicator</div>
|
||||
<div
|
||||
className={`text-lg font-bold ${getWearStatus(selectedDisk.media_wearout_indicator).color}`}
|
||||
>
|
||||
{selectedDisk.media_wearout_indicator}%
|
||||
</div>
|
||||
<Progress value={selectedDisk.media_wearout_indicator} className="mt-2" />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{selectedDisk.total_lbas_written !== undefined && selectedDisk.total_lbas_written !== null && (
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground">Total Data Written</div>
|
||||
<div className="font-medium">{(selectedDisk.total_lbas_written / 1000000).toFixed(2)} TB</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* SMART Attributes */}
|
||||
<div className="border-t border-border pt-4">
|
||||
<h3 className="font-semibold mb-3">SMART Attributes</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground">Temperature</div>
|
||||
<div
|
||||
className={`font-medium ${getTempColor(getTempStatus(selectedDisk.temperature, selectedDisk.disk_type || "HDD"))}`}
|
||||
>
|
||||
{selectedDisk.temperature}°C
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground">Power On Hours</div>
|
||||
<div className="font-medium">
|
||||
{selectedDisk.power_on_hours
|
||||
? `${selectedDisk.power_on_hours}h (${Math.floor(selectedDisk.power_on_hours / 24)}d)`
|
||||
: "N/A"}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground">Rotation Rate</div>
|
||||
<div className="font-medium">{selectedDisk.disk_type || "Unknown"}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground">Power Cycles</div>
|
||||
<div className="font-medium">{selectedDisk.power_cycles || 0}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground">SMART Status</div>
|
||||
<div className="font-medium">{selectedDisk.smart_status === "passed" ? "Passed" : "Unknown"}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground">Reallocated Sectors</div>
|
||||
<div className="font-medium">{selectedDisk.reallocated_sectors || 0}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground">Pending Sectors</div>
|
||||
<div className="font-medium">{selectedDisk.pending_sectors || 0}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground">CRC Errors</div>
|
||||
<div className="font-medium">{selectedDisk.crc_errors || 0}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user