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-17 17:22:10 +02:00
parent ef973df7c9
commit 477716ef67
1 changed files with 39 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -145,6 +145,12 @@ const getUsageColor = (percent: number): string => {
return "text-white" return "text-white"
} }
const getIconColor = (percent: number): string => {
if (percent >= 80) return "text-red-500"
if (percent >= 50) return "text-yellow-500"
return "text-green-500"
}
const getProgressColor = (percent: number): string => { const getProgressColor = (percent: number): string => {
if (percent >= 80) return "[&>div]:bg-red-500" if (percent >= 80) return "[&>div]:bg-red-500"
if (percent >= 50) return "[&>div]:bg-yellow-500" if (percent >= 50) return "[&>div]:bg-yellow-500"
@@ -586,50 +592,41 @@ export function VirtualMachines() {
</div> </div>
</div> </div>
<div className="sm:hidden space-y-2"> <div className="sm:hidden">
{/* Line 1: Status badge + Type badge + Name + ID */} <div className="flex items-center gap-3">
<div className="flex items-center gap-2 flex-wrap"> {/* Status circle with play/stop icon */}
<Badge variant="outline" className={`text-xs flex-shrink-0 p-1.5 ${getStatusColor(vm.status)}`}> <div
{getStatusIcon(vm.status)} className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${
</Badge> vm.status === "running" ? "bg-green-500/20 text-green-500" : "bg-red-500/20 text-red-500"
<Badge variant="outline" className={`text-xs flex-shrink-0 ${typeBadge.color}`}> }`}
{typeBadge.icon} >
{typeBadge.label} {vm.status === "running" ? (
</Badge> <Play className="h-4 w-4 fill-current" />
<span className="font-semibold text-foreground">{vm.name}</span> ) : (
<span className="text-sm text-muted-foreground">ID: {vm.vmid}</span> <Square className="h-4 w-4 fill-current" />
</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-blue-500" />
<span className={getUsageColor(Number.parseFloat(cpuPercent))}>{cpuPercent}%</span>
</div> </div>
<div className="flex items-center gap-1">
<MemoryStick className="h-3 w-3 text-blue-500" /> {/* Name and ID */}
<span className={getUsageColor(Number.parseFloat(memPercent))}> <div className="flex-1 min-w-0">
{memGB}/{maxMemGB} GB <div className="font-semibold text-foreground truncate">
</span> {vm.name} ({vm.vmid})
</div>
</div> </div>
<div className="flex items-center gap-1">
<HardDrive className="h-3 w-3 text-blue-500" /> {/* Status icons */}
<span className={getUsageColor(Number.parseFloat(diskPercent))}> <div className="flex items-center gap-2 flex-shrink-0">
{diskGB}/{maxDiskGB} GB {/* Network icon - always green */}
</span> <Network className="h-4 w-4 text-green-500" />
{/* CPU icon - color based on usage */}
<Cpu className={`h-4 w-4 ${getIconColor(Number.parseFloat(cpuPercent))}`} />
{/* Memory icon - color based on usage */}
<MemoryStick className={`h-4 w-4 ${getIconColor(Number.parseFloat(memPercent))}`} />
{/* Disk icon - color based on usage */}
<HardDrive className={`h-4 w-4 ${getIconColor(Number.parseFloat(diskPercent))}`} />
</div> </div>
</div> </div>
</div> </div>