Mirrors/ProxMenux
1
0
Fork 0
mirror of https://github.com/MacRimi/ProxMenux.git synced 2025-11-18 03:26:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update storage-overview.tsx

Browse Source
This commit is contained in:
MacRimi
2025-11-10 17:38:46 +01:00
parent adbfa1e73e
commit a65924799e
1 changed files with 29 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -394,6 +394,13 @@ export function StorageOverview() {
return "[&>div]:bg-red-500" return "[&>div]:bg-red-500"
} }
const getUsageColor = (percent: number): string => {
if (percent < 70) return "text-blue-500"
if (percent < 85) return "text-yellow-500"
if (percent < 95) return "text-orange-500"
return "text-red-500"
}
const diskHealthBreakdown = getDiskHealthBreakdown() const diskHealthBreakdown = getDiskHealthBreakdown()
const diskTypesBreakdown = getDiskTypesBreakdown() const diskTypesBreakdown = getDiskTypesBreakdown()
@@ -503,30 +510,42 @@ export function StorageOverview() {
<Card> <Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Local Storage</CardTitle> <CardTitle className="text-sm font-medium">Local Used</CardTitle>
<Database className="h-4 w-4 text-muted-foreground" /> <Database className="h-4 w-4 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-xl lg:text-2xl font-bold">{formatStorage(totalLocalUsed)}</div> <div className={`text-xl lg:text-2xl font-bold ${getUsageColor(Number.parseFloat(localUsagePercent))}`}>
<p className="text-xs text-muted-foreground mt-1"> {formatStorage(totalLocalUsed)}
{localUsagePercent}% of {formatStorage(totalLocalCapacity)} </div>
<p className="text-xs mt-1">
<span className={getUsageColor(Number.parseFloat(localUsagePercent))}>{localUsagePercent}%</span>
<span className="text-muted-foreground"> of </span>
<span className="text-green-500">{formatStorage(totalLocalCapacity)}</span>
</p> </p>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Remote Storage</CardTitle> <CardTitle className="text-sm font-medium">Remote Used</CardTitle>
<Archive className="h-4 w-4 text-muted-foreground" /> <Archive className="h-4 w-4 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-xl lg:text-2xl font-bold"> <div
className={`text-xl lg:text-2xl font-bold ${remoteStorageCount > 0 ? getUsageColor(Number.parseFloat(remoteUsagePercent)) : ""}`}
>
{remoteStorageCount > 0 ? formatStorage(totalRemoteUsed) : "None"} {remoteStorageCount > 0 ? formatStorage(totalRemoteUsed) : "None"}
</div> </div>
<p className="text-xs text-muted-foreground mt-1"> <p className="text-xs mt-1">
{remoteStorageCount > 0 {remoteStorageCount > 0 ? (
? `${remoteUsagePercent}% of ${formatStorage(totalRemoteCapacity)}` <>
: "No remote storage"} <span className={getUsageColor(Number.parseFloat(remoteUsagePercent))}>{remoteUsagePercent}%</span>
<span className="text-muted-foreground"> of </span>
<span className="text-green-500">{formatStorage(totalRemoteCapacity)}</span>
</>
) : (
<span className="text-muted-foreground">No remote storage</span>
)}
</p> </p>
</CardContent> </CardContent>
</Card> </Card>