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

Update virtual-machines.tsx

Browse Source
This commit is contained in:
MacRimi
2025-10-14 20:04:18 +02:00
parent c73154aeb1
commit 80e9e23965
1 changed files with 26 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
AppImage/components/virtual-machines.tsx
View File

@@ -533,7 +533,8 @@ export function VirtualMachines() {
</div> </div>
</div> </div>
<div className="grid grid-cols-2 md:grid-cols-4 gap-3"> <div className="grid grid-cols-2 gap-3">
{/* CPU Usage - Mobile: left column, Desktop: column 1 */}
<div> <div>
<div className="text-xs text-muted-foreground mb-1">CPU Usage</div> <div className="text-xs text-muted-foreground mb-1">CPU Usage</div>
<div className={`text-sm font-semibold mb-1 ${getUsageColor(Number.parseFloat(cpuPercent))}`}> <div className={`text-sm font-semibold mb-1 ${getUsageColor(Number.parseFloat(cpuPercent))}`}>
@@ -545,6 +546,7 @@ export function VirtualMachines() {
/> />
</div> </div>
{/* Memory - Mobile: right column, Desktop: column 2 */}
<div> <div>
<div className="text-xs text-muted-foreground mb-1">Memory</div> <div className="text-xs text-muted-foreground mb-1">Memory</div>
<div className={`text-sm font-semibold mb-1 ${getUsageColor(Number.parseFloat(memPercent))}`}> <div className={`text-sm font-semibold mb-1 ${getUsageColor(Number.parseFloat(memPercent))}`}>
@@ -556,7 +558,8 @@ export function VirtualMachines() {
/> />
</div> </div>
<div className="col-span-2 md:col-span-1"> {/* Disk Usage - Mobile: left column (new row), Desktop: column 3 */}
<div>
<div className="text-xs text-muted-foreground mb-1">Disk Usage</div> <div className="text-xs text-muted-foreground mb-1">Disk Usage</div>
<div className={`text-sm font-semibold mb-1 ${getUsageColor(Number.parseFloat(diskPercent))}`}> <div className={`text-sm font-semibold mb-1 ${getUsageColor(Number.parseFloat(diskPercent))}`}>
{diskGB} / {maxDiskGB} GB {diskGB} / {maxDiskGB} GB
@@ -565,12 +568,22 @@ export function VirtualMachines() {
value={Number.parseFloat(diskPercent)} value={Number.parseFloat(diskPercent)}
className={`h-1.5 ${getProgressColor(Number.parseFloat(diskPercent))}`} className={`h-1.5 ${getProgressColor(Number.parseFloat(diskPercent))}`}
/> />
<div className="text-xs font-semibold mt-1 flex gap-2"> </div>
{/* Disk I/O - Mobile: right column (same row as Disk Usage), Desktop: column 3 (below Disk Usage bar) */}
<div className="md:hidden">
<div className="text-xs text-muted-foreground mb-1">Disk I/O</div>
<div className="text-xs font-semibold">
<div className="flex items-center gap-1">
<span className="text-green-500">↓ {formatBytes(vm.diskread)}</span> <span className="text-green-500">↓ {formatBytes(vm.diskread)}</span>
</div>
<div className="flex items-center gap-1">
<span className="text-blue-500">↑ {formatBytes(vm.diskwrite)}</span> <span className="text-blue-500">↑ {formatBytes(vm.diskwrite)}</span>
</div> </div>
</div> </div>
</div>
{/* Network I/O - Mobile: full width (new row), Desktop: column 4 */}
<div className="col-span-2 md:col-span-1"> <div className="col-span-2 md:col-span-1">
<div className="text-xs text-muted-foreground mb-1">Network I/O</div> <div className="text-xs text-muted-foreground mb-1">Network I/O</div>
<div className="text-xs font-semibold"> <div className="text-xs font-semibold">
@@ -582,6 +595,14 @@ export function VirtualMachines() {
</div> </div>
</div> </div>
</div> </div>
{/* Disk I/O for Desktop - shown below Disk Usage */}
<div className="hidden md:block md:col-start-3">
<div className="text-xs font-semibold mt-1 flex gap-2">
<span className="text-green-500">↓ {formatBytes(vm.diskread)}</span>
<span className="text-blue-500">↑ {formatBytes(vm.diskwrite)}</span>
</div>
</div>
</div> </div>
</div> </div>
) )