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

Update virtual-machines.tsx

Browse Source
This commit is contained in:
MacRimi
2025-10-15 20:13:01 +02:00
parent a2fa7ec9c4
commit e1e4f71f3a
1 changed files with 105 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -500,21 +500,12 @@ export function VirtualMachines() {
className="p-4 rounded-lg border border-border bg-card/50 hover:bg-card/80 transition-colors cursor-pointer" className="p-4 rounded-lg border border-border bg-card/50 hover:bg-card/80 transition-colors cursor-pointer"
onClick={() => handleVMClick(vm)} onClick={() => handleVMClick(vm)}
> >
<div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 mb-3"> <div className="hidden sm:block">
<div className="flex items-center gap-2 flex-wrap"> <div className="flex items-center gap-2 flex-wrap mb-3">
<Badge <Badge variant="outline" className={`text-xs flex-shrink-0 ${getStatusColor(vm.status)}`}>
variant="outline"
className={`text-xs flex-shrink-0 ${getStatusColor(vm.status)} hidden sm:flex`}
>
{getStatusIcon(vm.status)} {getStatusIcon(vm.status)}
{vm.status.toUpperCase()} {vm.status.toUpperCase()}
</Badge> </Badge>
<Badge
variant="outline"
className={`text-xs flex-shrink-0 p-1.5 ${getStatusColor(vm.status)} flex sm:hidden`}
>
{getStatusIcon(vm.status)}
</Badge>
<Badge variant="outline" className={`text-xs flex-shrink-0 ${typeBadge.color}`}> <Badge variant="outline" className={`text-xs flex-shrink-0 ${typeBadge.color}`}>
{typeBadge.icon} {typeBadge.icon}
{typeBadge.label} {typeBadge.label}
@@ -522,27 +513,11 @@ export function VirtualMachines() {
<span className="font-semibold text-foreground">{vm.name}</span> <span className="font-semibold text-foreground">{vm.name}</span>
<span className="text-sm text-muted-foreground">ID: {vm.vmid}</span> <span className="text-sm text-muted-foreground">ID: {vm.vmid}</span>
{lxcIP && ( {lxcIP && (
<span <span className={`text-sm ${lxcIP === "DHCP" ? "text-yellow-500" : "text-green-500"}`}>
className={`text-sm hidden sm:inline ${lxcIP === "DHCP" ? "text-yellow-500" : "text-green-500"}`}
>
IP: {lxcIP} IP: {lxcIP}
</span> </span>
)} )}
<span className="text-sm text-muted-foreground ml-auto hidden sm:inline"> <span className="text-sm text-muted-foreground ml-auto">Uptime: {formatUptime(vm.uptime)}</span>
Uptime: {formatUptime(vm.uptime)}
</span>
</div>
<div className="flex items-center gap-2 flex-wrap sm:hidden">
{lxcIP && (
<span
className={`text-sm flex items-center gap-1 ${lxcIP === "DHCP" ? "text-yellow-500" : "text-green-500"}`}
>
<Network className="h-3 w-3" />
{lxcIP}
</span>
)}
<span className="text-sm text-muted-foreground">Uptime: {formatUptime(vm.uptime)}</span>
</div>
</div> </div>
<div className="grid grid-cols-2 md:grid-cols-5 gap-3"> <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
@@ -570,7 +545,9 @@ export function VirtualMachines() {
<div> <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
</div> </div>
<Progress <Progress
@@ -608,6 +585,55 @@ export function VirtualMachines() {
</div> </div>
</div> </div>
</div> </div>
<div className="sm:hidden space-y-2">
{/* Line 1: Status badge + Type badge + Name + ID */}
<div className="flex items-center gap-2 flex-wrap">
<Badge variant="outline" className={`text-xs flex-shrink-0 p-1.5 ${getStatusColor(vm.status)}`}>
{getStatusIcon(vm.status)}
</Badge>
<Badge variant="outline" className={`text-xs flex-shrink-0 ${typeBadge.color}`}>
{typeBadge.icon}
{typeBadge.label}
</Badge>
<span className="font-semibold text-foreground">{vm.name}</span>
<span className="text-sm text-muted-foreground">ID: {vm.vmid}</span>
</div>
{/* Line 2: IP + Uptime */}
<div className="flex items-center gap-3 text-sm">
{lxcIP && (
<span
className={`flex items-center gap-1 ${lxcIP === "DHCP" ? "text-yellow-500" : "text-green-500"}`}
>
<Network className="h-3 w-3" />
{lxcIP}
</span>
)}
<span className="text-muted-foreground">Uptime: {formatUptime(vm.uptime)}</span>
</div>
{/* Line 3: CPU, Memory, Disk (numbers only with colors) */}
<div className="flex items-center gap-4 text-sm">
<div className="flex items-center gap-1">
<Cpu className="h-3 w-3 text-muted-foreground" />
<span className={getUsageColor(Number.parseFloat(cpuPercent))}>{cpuPercent}%</span>
</div>
<div className="flex items-center gap-1">
<MemoryStick className="h-3 w-3 text-muted-foreground" />
<span className={getUsageColor(Number.parseFloat(memPercent))}>
{memGB}/{maxMemGB} GB
</span>
</div>
<div className="flex items-center gap-1">
<HardDrive className="h-3 w-3 text-muted-foreground" />
<span className={getUsageColor(Number.parseFloat(diskPercent))}>
{diskGB}/{maxDiskGB} GB
</span>
</div>
</div>
</div>
</div>
) )
})} })}
</div> </div>