mirror of
https://github.com/MacRimi/ProxMenux.git
synced 2025-11-18 11:36:17 +00:00
Update AppImage
This commit is contained in:
MacRimi
@@ -4,8 +4,6 @@ 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, DialogTrigger } from "./ui/dialog"
|
||||
import {
|
||||
HardDrive,
|
||||
Database,
|
||||
@@ -14,7 +12,6 @@ import {
|
||||
CheckCircle,
|
||||
Activity,
|
||||
AlertCircle,
|
||||
Info,
|
||||
Thermometer,
|
||||
} from "lucide-react"
|
||||
|
||||
@@ -36,19 +33,45 @@ interface DiskInfo {
|
||||
health: string
|
||||
temperature: number
|
||||
disk_type?: string
|
||||
percentage_used?: number
|
||||
ssd_life_left?: number
|
||||
wear_leveling_count?: number
|
||||
media_wearout_indicator?: number
|
||||
model?: string
|
||||
serial?: string
|
||||
power_on_hours?: number
|
||||
power_cycles?: number
|
||||
smart_status?: string
|
||||
reallocated_sectors?: number
|
||||
pending_sectors?: number
|
||||
crc_errors?: number
|
||||
rotation_rate?: number
|
||||
}
|
||||
|
||||
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 fetchStorageData = async (): Promise<StorageData | null> => {
|
||||
@@ -73,329 +96,6 @@ const fetchStorageData = async (): Promise<StorageData | null> => {
|
||||
}
|
||||
}
|
||||
|
||||
const getTempStatus = (temp: number, diskType: string): "safe" | "warning" | "critical" => {
|
||||
if (diskType === "HDD") {
|
||||
if (temp > 55) return "critical"
|
||||
if (temp > 45) return "warning"
|
||||
return "safe"
|
||||
} else if (diskType === "SSD") {
|
||||
if (temp > 65) return "critical"
|
||||
if (temp > 55) return "warning"
|
||||
return "safe"
|
||||
} else if (diskType === "NVMe") {
|
||||
if (temp > 70) return "critical"
|
||||
if (temp > 60) return "warning"
|
||||
return "safe"
|
||||
}
|
||||
// Umbral genérico
|
||||
if (temp > 70) return "critical"
|
||||
if (temp > 60) return "warning"
|
||||
return "safe"
|
||||
}
|
||||
|
||||
const groupDisksByType = (disks: DiskInfo[]): DiskGroup[] => {
|
||||
const groups: { [key: string]: DiskInfo[] } = {}
|
||||
|
||||
disks.forEach((disk) => {
|
||||
const type = disk.disk_type || "Unknown"
|
||||
if (!groups[type]) {
|
||||
groups[type] = []
|
||||
}
|
||||
groups[type].push(disk)
|
||||
})
|
||||
|
||||
const result = Object.entries(groups).map(([type, disks]) => {
|
||||
const temps = disks.map((d) => d.temperature).filter((t) => t > 0)
|
||||
const avgTemp = temps.length > 0 ? Math.round(temps.reduce((a, b) => a + b, 0) / temps.length) : 0
|
||||
|
||||
// Determinar el estado más crítico del grupo
|
||||
let status: "safe" | "warning" | "critical" = "safe"
|
||||
disks.forEach((disk) => {
|
||||
const diskStatus = getTempStatus(disk.temperature, type)
|
||||
if (diskStatus === "critical") status = "critical"
|
||||
else if (diskStatus === "warning" && status !== "critical") status = "warning"
|
||||
})
|
||||
|
||||
return { type, disks, avgTemp, status }
|
||||
})
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
interface DiskGroup {
|
||||
type: string
|
||||
disks: DiskInfo[]
|
||||
avgTemp: number
|
||||
status: "safe" | "warning" | "critical"
|
||||
}
|
||||
|
||||
function DiskDetailsModal({ disk }: { disk: DiskInfo }) {
|
||||
const getHealthColor = (health: string) => {
|
||||
if (health === "healthy") return "bg-green-500/10 text-green-500 border-green-500/20"
|
||||
if (health === "warning") return "bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
|
||||
return "bg-red-500/10 text-red-500 border-red-500/20"
|
||||
}
|
||||
|
||||
const getLifeColor = (life: number) => {
|
||||
if (life >= 80) return "text-green-500"
|
||||
if (life >= 50) return "text-yellow-500"
|
||||
return "text-red-500"
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="ghost" size="sm">
|
||||
Ver detalles
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-3xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<HardDrive className="h-5 w-5" />
|
||||
Disk Details: {disk.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 mb-1">Model</div>
|
||||
<div className="font-medium">{disk.model || "Unknown"}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground mb-1">Serial Number</div>
|
||||
<div className="font-medium">{disk.serial || "Unknown"}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground mb-1">Capacity</div>
|
||||
<div className="font-medium">{disk.total?.toFixed(1) || "N/A"}G</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground mb-1">Health Status</div>
|
||||
<Badge variant="outline" className={getHealthColor(disk.health)}>
|
||||
{disk.health === "healthy" ? "Healthy" : disk.health}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* SSD/NVMe Wear Indicators */}
|
||||
{(disk.disk_type === "SSD" || disk.disk_type === "NVMe") && (
|
||||
<div className="border border-border rounded-lg p-4 bg-card/50">
|
||||
<h3 className="font-semibold mb-3 flex items-center gap-2">
|
||||
<Activity className="h-4 w-4" />
|
||||
Indicadores de desgaste y salud
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{disk.ssd_life_left !== undefined && (
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground mb-1">Vida útil restante</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Progress value={disk.ssd_life_left} className="flex-1" />
|
||||
<span className={`font-bold ${getLifeColor(disk.ssd_life_left)}`}>{disk.ssd_life_left}%</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{disk.disk_type === "NVMe" && disk.percentage_used !== undefined && (
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground mb-1">Percentage Used</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Progress value={disk.percentage_used} className="flex-1" />
|
||||
<span className={`font-bold ${getLifeColor(100 - disk.percentage_used)}`}>
|
||||
{disk.percentage_used}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{disk.wear_leveling_count !== undefined && disk.wear_leveling_count > 0 && (
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground mb-1">Wear Leveling Count</div>
|
||||
<div className={`font-bold ${getLifeColor(disk.wear_leveling_count)}`}>
|
||||
{disk.wear_leveling_count}%
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{disk.media_wearout_indicator !== undefined && disk.media_wearout_indicator > 0 && (
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground mb-1">Media Wearout Indicator</div>
|
||||
<div className={`font-bold ${getLifeColor(disk.media_wearout_indicator)}`}>
|
||||
{disk.media_wearout_indicator}%
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* SMART Attributes */}
|
||||
<div>
|
||||
<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 mb-1">Temperature</div>
|
||||
<div
|
||||
className={`font-bold ${
|
||||
getTempStatus(disk.temperature, disk.disk_type || "Unknown") === "safe"
|
||||
? "text-green-500"
|
||||
: getTempStatus(disk.temperature, disk.disk_type || "Unknown") === "warning"
|
||||
? "text-yellow-500"
|
||||
: "text-red-500"
|
||||
}`}
|
||||
>
|
||||
{disk.temperature}°C
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground mb-1">Power On Hours</div>
|
||||
<div className="font-medium">
|
||||
{disk.power_on_hours ? `${disk.power_on_hours}h (${Math.floor(disk.power_on_hours / 24)}d)` : "N/A"}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground mb-1">Rotation Rate</div>
|
||||
<div className="font-medium">
|
||||
{disk.rotation_rate === 0 || disk.disk_type === "SSD" || disk.disk_type === "NVMe"
|
||||
? "SSD"
|
||||
: disk.rotation_rate
|
||||
? `${disk.rotation_rate} RPM`
|
||||
: "N/A"}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground mb-1">Power Cycles</div>
|
||||
<div className="font-medium">{disk.power_cycles || "N/A"}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground mb-1">SMART Status</div>
|
||||
<div className="font-medium">
|
||||
{disk.smart_status === "passed" ? "Passed" : disk.smart_status || "Unknown"}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground mb-1">Reallocated Sectors</div>
|
||||
<div
|
||||
className={`font-medium ${disk.reallocated_sectors && disk.reallocated_sectors > 0 ? "text-red-500" : ""}`}
|
||||
>
|
||||
{disk.reallocated_sectors || 0}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground mb-1">Pending Sectors</div>
|
||||
<div
|
||||
className={`font-medium ${disk.pending_sectors && disk.pending_sectors > 0 ? "text-yellow-500" : ""}`}
|
||||
>
|
||||
{disk.pending_sectors || 0}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground mb-1">CRC Errors</div>
|
||||
<div className={`font-medium ${disk.crc_errors && disk.crc_errors > 0 ? "text-yellow-500" : ""}`}>
|
||||
{disk.crc_errors || 0}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
function TemperatureThresholdsModal() {
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline" size="sm" className="gap-2 bg-transparent">
|
||||
<Info className="h-4 w-4" />
|
||||
Umbrales de temperatura
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-3xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Umbrales de temperatura por tipo de disco</DialogTitle>
|
||||
<DialogDescription>
|
||||
Rangos de temperatura recomendados para cada tipo de dispositivo de almacenamiento
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<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">Tipo de disco</th>
|
||||
<th className="text-left p-3 font-semibold">Temperatura de operación</th>
|
||||
<th className="text-left p-3 font-semibold">Zona segura</th>
|
||||
<th className="text-left p-3 font-semibold">Zona de advertencia</th>
|
||||
<th className="text-left p-3 font-semibold">Zona crítica</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="border-b border-border">
|
||||
<td className="p-3 font-medium">HDD</td>
|
||||
<td className="p-3">0°C – 60°C (común: 5–55°C)</td>
|
||||
<td className="p-3">
|
||||
<Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
|
||||
≤ 45°C
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="p-3">
|
||||
<Badge variant="outline" className="bg-yellow-500/10 text-yellow-500 border-yellow-500/20">
|
||||
46 – 55°C
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="p-3">
|
||||
<Badge variant="outline" className="bg-red-500/10 text-red-500 border-red-500/20">
|
||||
> 55°C
|
||||
</Badge>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="border-b border-border">
|
||||
<td className="p-3 font-medium">SSD</td>
|
||||
<td className="p-3">0°C – 70°C</td>
|
||||
<td className="p-3">
|
||||
<Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
|
||||
≤ 55°C
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="p-3">
|
||||
<Badge variant="outline" className="bg-yellow-500/10 text-yellow-500 border-yellow-500/20">
|
||||
56 – 65°C
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="p-3">
|
||||
<Badge variant="outline" className="bg-red-500/10 text-red-500 border-red-500/20">
|
||||
> 65°C
|
||||
</Badge>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="p-3 font-medium">NVMe</td>
|
||||
<td className="p-3">0°C – 70°C</td>
|
||||
<td className="p-3">
|
||||
<Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
|
||||
≤ 60°C
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="p-3">
|
||||
<Badge variant="outline" className="bg-yellow-500/10 text-yellow-500 border-yellow-500/20">
|
||||
61 – 70°C
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="p-3">
|
||||
<Badge variant="outline" className="bg-red-500/10 text-red-500 border-red-500/20">
|
||||
> 70°C
|
||||
</Badge>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
export function StorageMetrics() {
|
||||
const [storageData, setStorageData] = useState<StorageData | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
@@ -452,7 +152,26 @@ export function StorageMetrics() {
|
||||
}
|
||||
|
||||
const usagePercent = storageData.total > 0 ? (storageData.used / storageData.total) * 100 : 0
|
||||
const diskGroups = groupDisksByType(storageData.disks)
|
||||
|
||||
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") // Filter out unknown types
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
@@ -521,72 +240,43 @@ export function StorageMetrics() {
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{diskGroups.length > 0 && (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-foreground">Temperatura por tipo de disco</h3>
|
||||
<TemperatureThresholdsModal />
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{diskGroups.map((group) => (
|
||||
<Card key={group.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" />
|
||||
{group.type} Temperature
|
||||
</div>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={
|
||||
group.status === "safe"
|
||||
? "bg-green-500/10 text-green-500 border-green-500/20"
|
||||
: group.status === "warning"
|
||||
? "bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
|
||||
: "bg-red-500/10 text-red-500 border-red-500/20"
|
||||
}
|
||||
>
|
||||
{group.status === "safe" ? "Seguro" : group.status === "warning" ? "Advertencia" : "Crítico"}
|
||||
</Badge>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div
|
||||
className={`text-3xl font-bold ${
|
||||
group.status === "safe"
|
||||
? "text-green-500"
|
||||
: group.status === "warning"
|
||||
? "text-yellow-500"
|
||||
: "text-red-500"
|
||||
}`}
|
||||
{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 }) => (
|
||||
<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>
|
||||
<Badge variant="outline" className={getDiskTypeBadgeColor(type)}>
|
||||
{type}
|
||||
</Badge>
|
||||
</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"
|
||||
}
|
||||
>
|
||||
{group.avgTemp}°C
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mt-2">
|
||||
Promedio de {group.disks.length} disco{group.disks.length > 1 ? "s" : ""}
|
||||
</p>
|
||||
<div className="mt-3 space-y-1">
|
||||
{group.disks.map((disk, idx) => (
|
||||
<div key={idx} className="flex items-center justify-between text-xs">
|
||||
<span className="text-muted-foreground">{disk.name}</span>
|
||||
<span
|
||||
className={`font-medium ${
|
||||
getTempStatus(disk.temperature, group.type) === "safe"
|
||||
? "text-green-500"
|
||||
: getTempStatus(disk.temperature, group.type) === "warning"
|
||||
? "text-yellow-500"
|
||||
: "text-red-500"
|
||||
}`}
|
||||
>
|
||||
{disk.temperature}°C
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
{status === "safe" ? "Optimal" : status === "warning" ? "Warning" : "Critical"}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -600,88 +290,64 @@ export function StorageMetrics() {
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{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 flex items-center gap-2">
|
||||
{disk.name}
|
||||
{disk.disk_type && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{disk.disk_type}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{disk.fstype} • {disk.mountpoint}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{storageData.disks.map((disk, index) => {
|
||||
const diskType = disk.disk_type || "HDD"
|
||||
const tempStatus = getTempStatus(disk.temperature, diskType)
|
||||
|
||||
<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 ${
|
||||
getTempStatus(disk.temperature, disk.disk_type || "Unknown") === "safe"
|
||||
? "text-green-500"
|
||||
: getTempStatus(disk.temperature, disk.disk_type || "Unknown") === "warning"
|
||||
? "text-yellow-500"
|
||||
: "text-red-500"
|
||||
}`}
|
||||
>
|
||||
{disk.temperature}°C
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(disk.disk_type === "SSD" || disk.disk_type === "NVMe") && disk.ssd_life_left !== undefined && (
|
||||
<div className="text-center">
|
||||
<div className="text-sm text-muted-foreground">Vida útil</div>
|
||||
<div
|
||||
className={`text-sm font-medium ${
|
||||
disk.ssd_life_left >= 80
|
||||
? "text-green-500"
|
||||
: disk.ssd_life_left >= 50
|
||||
? "text-yellow-500"
|
||||
: "text-red-500"
|
||||
}`}
|
||||
>
|
||||
{disk.ssd_life_left}%
|
||||
return (
|
||||
<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 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>
|
||||
</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 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>
|
||||
|
||||
<DiskDetailsModal disk={disk} />
|
||||
<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>
|
||||
|
||||
<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>
|
||||
))}
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
Reference in New Issue
Block a user