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-22 10:27:14 +02:00
parent f45c98a6a7
commit e3f26b7f75
1 changed files with 5 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -807,10 +807,10 @@ export function VirtualMachines() {
<> <>
<div> <div>
<Card <Card
className="hidden sm:block border border-border bg-card cursor-pointer hover:bg-white/5 dark:hover:bg-white/5 transition-colors group" className="cursor-pointer rounded-lg border border-white/10 sm:border-border bg-white/5 sm:bg-card sm:hover:bg-white/5 p-4 transition-colors group"
onClick={handleMetricsClick} onClick={handleMetricsClick}
> >
<CardContent className="p-4"> <CardContent className="p-0">
<div className="grid grid-cols-2 lg:grid-cols-3 gap-4"> <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
{/* CPU Usage */} {/* CPU Usage */}
<div> <div>
@@ -820,7 +820,7 @@ export function VirtualMachines() {
</div> </div>
<Progress <Progress
value={selectedVM.cpu * 100} value={selectedVM.cpu * 100}
className={`h-2 bg-background group-hover:bg-background/50 ${getModalProgressColor(selectedVM.cpu * 100)}`} className={`h-2 bg-background/30 group-hover:bg-background/30 transition-colors ${getModalProgressColor(selectedVM.cpu * 100)}`}
/> />
</div> </div>
@@ -835,7 +835,7 @@ export function VirtualMachines() {
</div> </div>
<Progress <Progress
value={(selectedVM.mem / selectedVM.maxmem) * 100} value={(selectedVM.mem / selectedVM.maxmem) * 100}
className={`h-2 bg-background group-hover:bg-background/50 ${getModalProgressColor((selectedVM.mem / selectedVM.maxmem) * 100)}`} className={`h-2 bg-background/30 group-hover:bg-background/30 transition-colors ${getModalProgressColor((selectedVM.mem / selectedVM.maxmem) * 100)}`}
/> />
</div> </div>
@@ -850,92 +850,7 @@ export function VirtualMachines() {
</div> </div>
<Progress <Progress
value={(selectedVM.disk / selectedVM.maxdisk) * 100} value={(selectedVM.disk / selectedVM.maxdisk) * 100}
className={`h-2 bg-background group-hover:bg-background/50 ${getModalProgressColor((selectedVM.disk / selectedVM.maxdisk) * 100)}`} className={`h-2 bg-background/30 group-hover:bg-background/30 transition-colors ${getModalProgressColor((selectedVM.disk / selectedVM.maxdisk) * 100)}`}
/>
</div>
{/* Disk I/O */}
<div>
<div className="text-xs text-muted-foreground mb-2">Disk I/O</div>
<div className="space-y-1">
<div className="text-sm text-green-500 flex items-center gap-1">
<span>↓</span>
<span>{((selectedVM.diskread || 0) / 1024 ** 2).toFixed(2)} MB</span>
</div>
<div className="text-sm text-blue-500 flex items-center gap-1">
<span>↑</span>
<span>{((selectedVM.diskwrite || 0) / 1024 ** 2).toFixed(2)} MB</span>
</div>
</div>
</div>
{/* Network I/O */}
<div>
<div className="text-xs text-muted-foreground mb-2">Network I/O</div>
<div className="space-y-1">
<div className="text-sm text-green-500 flex items-center gap-1">
<span>↓</span>
<span>{((selectedVM.netin || 0) / 1024 ** 2).toFixed(2)} MB</span>
</div>
<div className="text-sm text-blue-500 flex items-center gap-1">
<span>↑</span>
<span>{((selectedVM.netout || 0) / 1024 ** 2).toFixed(2)} MB</span>
</div>
</div>
</div>
<div className="flex items-center justify-center">
{getOSIcon(vmDetails?.os_info, selectedVM.type)}
</div>
</div>
</CardContent>
</Card>
<Card
className="sm:hidden border border-white/10 bg-white/5 dark:bg-white/5 cursor-pointer"
onClick={handleMetricsClick}
>
<CardContent className="p-4">
<div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
{/* CPU Usage */}
<div>
<div className="text-xs text-muted-foreground mb-2">CPU Usage</div>
<div className={`text-base font-semibold mb-2 ${getUsageColor(selectedVM.cpu * 100)}`}>
{(selectedVM.cpu * 100).toFixed(1)}%
</div>
<Progress
value={selectedVM.cpu * 100}
className={`h-2 bg-background/50 ${getModalProgressColor(selectedVM.cpu * 100)}`}
/>
</div>
{/* Memory */}
<div>
<div className="text-xs text-muted-foreground mb-2">Memory</div>
<div
className={`text-base font-semibold mb-2 ${getUsageColor((selectedVM.mem / selectedVM.maxmem) * 100)}`}
>
{(selectedVM.mem / 1024 ** 3).toFixed(1)} /{" "}
{(selectedVM.maxmem / 1024 ** 3).toFixed(1)} GB
</div>
<Progress
value={(selectedVM.mem / selectedVM.maxmem) * 100}
className={`h-2 bg-background/50 ${getModalProgressColor((selectedVM.mem / selectedVM.maxmem) * 100)}`}
/>
</div>
{/* Disk */}
<div>
<div className="text-xs text-muted-foreground mb-2">Disk</div>
<div
className={`text-base font-semibold mb-2 ${getUsageColor((selectedVM.disk / selectedVM.maxdisk) * 100)}`}
>
{(selectedVM.disk / 1024 ** 3).toFixed(1)} /{" "}
{(selectedVM.maxdisk / 1024 ** 3).toFixed(1)} GB
</div>
<Progress
value={(selectedVM.disk / selectedVM.maxdisk) * 100}
className={`h-2 bg-background/50 ${getModalProgressColor((selectedVM.disk / selectedVM.maxdisk) * 100)}`}
/> />
</div> </div>