Mirrors/ProxMenux
1
0
Fork 0
mirror of https://github.com/MacRimi/ProxMenux.git synced 2026-04-30 11:26:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update storage-overview.tsx

Browse Source
This commit is contained in:
MacRimi
2026-04-13 19:30:19 +02:00
parent d9461c170d
commit 003c8850b7
1 changed files with 51 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
AppImage/components/storage-overview.tsx
View File

@@ -1421,42 +1421,65 @@ export function StorageOverview() {
const availableSpare = (nvmeHealth?.avail_spare ?? nvmeHealth?.available_spare) as number | undefined const availableSpare = (nvmeHealth?.avail_spare ?? nvmeHealth?.available_spare) as number | undefined
if (wearPercent !== null || dataWrittenLabel) { // Wear used % (inverse of life remaining)
const wearUsed = wearPercent !== null ? 100 - wearPercent : null
// Life ring color: green ≥50%, yellow 20-49%, red <20%
const lifeColor = wearPercent !== null
? (wearPercent >= 50 ? '#22c55e' : wearPercent >= 20 ? '#eab308' : '#ef4444')
: '#6b7280'
if (wearUsed !== null || dataWrittenLabel) {
return ( return (
<> <div className="flex gap-4 items-start">
{/* Life remaining ring */}
{wearPercent !== null && ( {wearPercent !== null && (
<div> <div className="flex flex-col items-center gap-1 flex-shrink-0">
<div className="flex items-center justify-between mb-2"> <svg width="72" height="72" viewBox="0 0 72 72">
<p className="text-sm text-muted-foreground">Life Remaining</p> <circle cx="36" cy="36" r="28" fill="none" stroke="currentColor" strokeWidth="6" className="text-muted/20" />
<p className="font-medium text-blue-400">{wearPercent}%</p> <circle cx="36" cy="36" r="28" fill="none" stroke={lifeColor} strokeWidth="6"
</div> strokeDasharray={`${wearPercent * 1.759} 175.9`}
<Progress strokeLinecap="round" transform="rotate(-90 36 36)" />
value={wearPercent} <text x="36" y="33" textAnchor="middle" fill={lifeColor} fontSize="16" fontWeight="700">{wearPercent}%</text>
className={`h-2 ${wearPercent < 20 ? '[&>div]:bg-red-500' : '[&>div]:bg-blue-500'}`} <text x="36" y="46" textAnchor="middle" fill="currentColor" fontSize="7" className="text-muted-foreground">life</text>
/> </svg>
</div> </div>
)} )}
<div className="grid grid-cols-2 gap-4"> {/* Wear bar + stats */}
{estimatedLife && ( <div className="flex-1 space-y-3 min-w-0">
{wearUsed !== null && (
<div> <div>
<p className="text-sm text-muted-foreground">Estimated Life Remaining</p> <div className="flex items-center justify-between mb-1.5">
<p className="font-medium">{estimatedLife}</p> <p className="text-xs text-muted-foreground">Wear</p>
</div> <p className="text-sm font-medium text-blue-400">{wearUsed}%</p>
)} </div>
{dataWrittenLabel && ( <Progress
<div> value={wearUsed}
<p className="text-sm text-muted-foreground">Total Data Written</p> className="h-1.5 [&>div]:bg-blue-500"
<p className="font-medium">{dataWrittenLabel}</p> />
</div>
)}
{availableSpare !== undefined && (
<div>
<p className="text-sm text-muted-foreground">Available Spare</p>
<p className={`font-medium ${availableSpare < 20 ? 'text-red-400' : 'text-blue-400'}`}>{availableSpare}%</p>
</div> </div>
)} )}
<div className="grid grid-cols-2 gap-3">
{estimatedLife && (
<div>
<p className="text-xs text-muted-foreground">Est. Life</p>
<p className="text-sm font-medium">{estimatedLife}</p>
</div>
)}
{dataWrittenLabel && (
<div>
<p className="text-xs text-muted-foreground">Data Written</p>
<p className="text-sm font-medium">{dataWrittenLabel}</p>
</div>
)}
{availableSpare !== undefined && (
<div>
<p className="text-xs text-muted-foreground">Avail. Spare</p>
<p className={`text-sm font-medium ${availableSpare < 20 ? 'text-red-400' : 'text-blue-400'}`}>{availableSpare}%</p>
</div>
)}
</div>
</div> </div>
</> </div>
) )
} }
return null return null