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-28 23:01:51 +01:00
parent 606cae411f
commit ccefa61b3d
1 changed files with 48 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -945,63 +945,73 @@ export function VirtualMachines() {
className="sm:hidden p-4 rounded-lg border border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5 transition-colors cursor-pointer" className="sm:hidden p-4 rounded-lg border border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5 transition-colors cursor-pointer"
onClick={() => handleVMClick(vm)} onClick={() => handleVMClick(vm)}
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-2 mb-3">
{/* Status icon */}
{vm.status === "running" ? ( {vm.status === "running" ? (
<Play className="h-5 w-5 text-green-500 fill-current flex-shrink-0" /> <Play className="h-5 w-5 text-green-500 fill-current flex-shrink-0" />
) : ( ) : (
<Square className="h-5 w-5 text-red-500 fill-current flex-shrink-0" /> <Square className="h-5 w-5 text-red-500 fill-current flex-shrink-0" />
)} )}
{/* Type badge */}
<Badge variant="outline" className={`${getTypeBadge(vm.type).color} flex-shrink-0`}> <Badge variant="outline" className={`${getTypeBadge(vm.type).color} flex-shrink-0`}>
{getTypeBadge(vm.type).label} {getTypeBadge(vm.type).label}
</Badge> </Badge>
{/* Name and ID */} {/* Name and ID - takes remaining space */}
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="font-semibold text-foreground truncate">{vm.name}</div> <div className="font-semibold text-foreground truncate">{vm.name}</div>
<div className="text-[10px] text-muted-foreground">ID: {vm.vmid}</div> <div className="text-[10px] text-muted-foreground">ID: {vm.vmid}</div>
</div> </div>
</div>
<div className="flex items-center gap-3 flex-shrink-0"> {/* Second row: Resource usage icons with percentages */}
{/* CPU icon with percentage */} <div className="flex items-center justify-between gap-4 px-1">
<div className="flex flex-col items-center gap-0.5"> {/* CPU icon with percentage */}
{vm.status === "running" && ( <div className="flex flex-col items-center gap-0.5">
<span className="text-[10px] font-medium text-muted-foreground">{cpuPercent}%</span> {vm.status === "running" && (
)} <span className="text-[10px] font-medium text-muted-foreground">{cpuPercent}%</span>
<Cpu )}
className={`h-4 w-4 ${ <Cpu
vm.status === "stopped" ? "text-gray-500" : getUsageColor(Number.parseFloat(cpuPercent)) className={`h-4 w-4 ${
}`} vm.status === "stopped" ? "text-gray-500" : getIconColor(Number.parseFloat(cpuPercent))
/> }`}
</div> />
</div>
{/* Memory icon with percentage */} {/* Memory icon with percentage */}
<div className="flex flex-col items-center gap-0.5"> <div className="flex flex-col items-center gap-0.5">
{vm.status === "running" && ( {vm.status === "running" && (
<span className="text-[10px] font-medium text-muted-foreground">{memPercent}%</span> <span className="text-[10px] font-medium text-muted-foreground">{memPercent}%</span>
)} )}
<MemoryStick <MemoryStick
className={`h-4 w-4 ${ className={`h-4 w-4 ${
vm.status === "stopped" ? "text-gray-500" : getUsageColor(Number.parseFloat(memPercent)) vm.status === "stopped" ? "text-gray-500" : getIconColor(Number.parseFloat(memPercent))
}`} }`}
/> />
</div> </div>
{/* Disk icon with percentage */} {/* Disk icon with percentage */}
<div className="flex flex-col items-center gap-0.5"> <div className="flex flex-col items-center gap-0.5">
{vm.status === "running" && ( {vm.status === "running" && (
<span className="text-[10px] font-medium text-muted-foreground">{diskPercent}%</span> <span className="text-[10px] font-medium text-muted-foreground">{diskPercent}%</span>
)} )}
<HardDrive <HardDrive
className={`h-4 w-4 ${ className={`h-4 w-4 ${
vm.status === "stopped" vm.status === "stopped" ? "text-gray-500" : getIconColor(Number.parseFloat(diskPercent))
? "text-gray-500" }`}
: getUsageColor(Number.parseFloat(diskPercent)) />
}`} </div>
/>
</div> {/* Network icon */}
<div className="flex flex-col items-center gap-0.5">
<span className="text-[10px] font-medium text-transparent">--</span>
<Network
className={`h-4 w-4 ${vm.status === "stopped" ? "text-gray-500" : "text-muted-foreground"}`}
/>
</div> </div>
</div> </div>
{/* </CHANGE> */}
</div> </div>
</div> </div>
) )