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"
onClick={() => handleVMClick(vm)}
>
<div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 mb-3">
<div className="flex items-center gap-2 flex-wrap">
<Badge
variant="outline"
className={`text-xs flex-shrink-0 ${getStatusColor(vm.status)} hidden sm:flex`}
>
<div className="hidden sm:block">
<div className="flex items-center gap-2 flex-wrap mb-3">
<Badge variant="outline" className={`text-xs flex-shrink-0 ${getStatusColor(vm.status)}`}>
{getStatusIcon(vm.status)}
{vm.status.toUpperCase()}
</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}`}>
{typeBadge.icon}
{typeBadge.label}
@@ -522,27 +513,11 @@ export function VirtualMachines() {
<span className="font-semibold text-foreground">{vm.name}</span>
<span className="text-sm text-muted-foreground">ID: {vm.vmid}</span>
{lxcIP && (
<span
className={`text-sm hidden sm:inline ${lxcIP === "DHCP" ? "text-yellow-500" : "text-green-500"}`}
>
<span className={`text-sm ${lxcIP === "DHCP" ? "text-yellow-500" : "text-green-500"}`}>
IP: {lxcIP}
</span>
)}
<span className="text-sm text-muted-foreground ml-auto hidden sm:inline">
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>
<span className="text-sm text-muted-foreground ml-auto">Uptime: {formatUptime(vm.uptime)}</span>
</div>
<div className="grid grid-cols-2 md:grid-cols-5 gap-3">
@@ -570,7 +545,9 @@ export function VirtualMachines() {
<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
</div>
<Progress
@@ -608,6 +585,55 @@ export function VirtualMachines() {
</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>