Mirrors/ProxMenux
1
0
Fork 0
mirror of https://github.com/MacRimi/ProxMenux.git synced 2026-02-19 00:46:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update system-overview.tsx

Browse Source
This commit is contained in:
MacRimi
2026-01-31 15:25:15 +01:00
parent cadef0bf81
commit abde8652b2
1 changed files with 12 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
AppImage/components/system-overview.tsx
View File

@@ -10,6 +10,7 @@ import { NetworkTrafficChart } from "./network-traffic-chart"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"
import { fetchApi } from "../lib/api-config" import { fetchApi } from "../lib/api-config"
import { formatNetworkTraffic, getNetworkUnit } from "../lib/format-network" import { formatNetworkTraffic, getNetworkUnit } from "../lib/format-network"
import { formatStorage } from "../lib/utils"
interface SystemData { interface SystemData {
cpu_usage: number cpu_usage: number
@@ -508,7 +509,7 @@ export function SystemOverview() {
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<span className="text-sm font-medium text-foreground">Total Node Capacity:</span> <span className="text-sm font-medium text-foreground">Total Node Capacity:</span>
<span className="text-lg font-bold text-foreground"> <span className="text-lg font-bold text-foreground">
{formatNetworkTraffic(totalCapacity, "Bytes")} {formatStorage(totalCapacity)}
</span> </span>
</div> </div>
<Progress <Progress
@@ -520,13 +521,13 @@ export function SystemOverview() {
<span className="text-xs text-muted-foreground"> <span className="text-xs text-muted-foreground">
Used:{" "} Used:{" "}
<span className="font-semibold text-foreground"> <span className="font-semibold text-foreground">
{formatNetworkTraffic(totalUsed, "Bytes")} {formatStorage(totalUsed)}
</span> </span>
</span> </span>
<span className="text-xs text-muted-foreground"> <span className="text-xs text-muted-foreground">
Free:{" "} Free:{" "}
<span className="font-semibold text-green-500"> <span className="font-semibold text-green-500">
{formatNetworkTraffic(totalAvailable, "Bytes")} {formatStorage(totalAvailable)}
</span> </span>
</span> </span>
</div> </div>
@@ -555,20 +556,20 @@ export function SystemOverview() {
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<span className="text-xs text-muted-foreground">Used:</span> <span className="text-xs text-muted-foreground">Used:</span>
<span className="text-sm font-semibold text-foreground"> <span className="text-sm font-semibold text-foreground">
{formatNetworkTraffic(vmLxcStorageUsed, "Bytes")} {formatStorage(vmLxcStorageUsed)}
</span> </span>
</div> </div>
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<span className="text-xs text-muted-foreground">Available:</span> <span className="text-xs text-muted-foreground">Available:</span>
<span className="text-sm font-semibold text-green-500"> <span className="text-sm font-semibold text-green-500">
{formatNetworkTraffic(vmLxcStorageAvailable, "Bytes")} {formatStorage(vmLxcStorageAvailable)}
</span> </span>
</div> </div>
<Progress value={vmLxcStoragePercent} className="mt-2 [&>div]:bg-blue-500" /> <Progress value={vmLxcStoragePercent} className="mt-2 [&>div]:bg-blue-500" />
<div className="flex justify-between items-center mt-1"> <div className="flex justify-between items-center mt-1">
<span className="text-xs text-muted-foreground"> <span className="text-xs text-muted-foreground">
{formatNetworkTraffic(vmLxcStorageUsed, "Bytes")} /{" "} {formatStorage(vmLxcStorageUsed)} /{" "}
{formatNetworkTraffic(vmLxcStorageTotal, "Bytes")} {formatStorage(vmLxcStorageTotal)}
</span> </span>
<span className="text-xs text-muted-foreground">{vmLxcStoragePercent.toFixed(1)}%</span> <span className="text-xs text-muted-foreground">{vmLxcStoragePercent.toFixed(1)}%</span>
</div> </div>
@@ -591,20 +592,20 @@ export function SystemOverview() {
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<span className="text-xs text-muted-foreground">Used:</span> <span className="text-xs text-muted-foreground">Used:</span>
<span className="text-sm font-semibold text-foreground"> <span className="text-sm font-semibold text-foreground">
{formatNetworkTraffic(localStorage.used, "Bytes")} {formatStorage(localStorage.used)}
</span> </span>
</div> </div>
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<span className="text-xs text-muted-foreground">Available:</span> <span className="text-xs text-muted-foreground">Available:</span>
<span className="text-sm font-semibold text-green-500"> <span className="text-sm font-semibold text-green-500">
{formatNetworkTraffic(localStorage.available, "Bytes")} {formatStorage(localStorage.available)}
</span> </span>
</div> </div>
<Progress value={localStorage.percent} className="mt-2 [&>div]:bg-purple-500" /> <Progress value={localStorage.percent} className="mt-2 [&>div]:bg-purple-500" />
<div className="flex justify-between items-center mt-1"> <div className="flex justify-between items-center mt-1">
<span className="text-xs text-muted-foreground"> <span className="text-xs text-muted-foreground">
{formatNetworkTraffic(localStorage.used, "Bytes")} /{" "} {formatStorage(localStorage.used)} /{" "}
{formatNetworkTraffic(localStorage.total, "Bytes")} {formatStorage(localStorage.total)}
</span> </span>
<span className="text-xs text-muted-foreground">{localStorage.percent.toFixed(1)}%</span> <span className="text-xs text-muted-foreground">{localStorage.percent.toFixed(1)}%</span>
</div> </div>