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

Update virtual-machines.tsx

Browse Source
This commit is contained in:
MacRimi
2025-10-05 16:28:12 +02:00
parent 6168a47e24
commit fbcf755591
1 changed files with 424 additions and 419 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,7 +10,6 @@ import {
Server, Server,
Play, Play,
Square, Square,
Monitor,
Cpu, Cpu,
MemoryStick, MemoryStick,
HardDrive, HardDrive,
@@ -94,6 +93,38 @@ const formatBytes = (bytes: number | undefined): string => {
return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}` return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}`
} }
const formatUptime = (seconds: number) => {
const days = Math.floor(seconds / 86400)
const hours = Math.floor((seconds % 86400) / 3600)
const minutes = Math.floor((seconds % 3600) / 60)
return `${days}d ${hours}h ${minutes}m`
}
const extractIPFromConfig = (config?: VMConfig): string => {
if (!config) return "DHCP"
// Check net0, net1, net2, etc.
for (let i = 0; i < 10; i++) {
const netKey = `net${i}`
const netConfig = config[netKey]
if (netConfig && typeof netConfig === "string") {
// Look for ip=x.x.x.x/xx pattern
const ipMatch = netConfig.match(/ip=([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3})(\/\d+)?/)
if (ipMatch) {
return ipMatch[1] // Return just the IP without CIDR
}
// Check if it's explicitly DHCP
if (netConfig.includes("ip=dhcp")) {
return "DHCP"
}
}
}
return "DHCP"
}
export function VirtualMachines() { export function VirtualMachines() {
const { const {
data: vmData, data: vmData,
@@ -218,13 +249,6 @@ export function VirtualMachines() {
return { color: "bg-purple-500/10 text-purple-500 border-purple-500/20", label: "VM" } return { color: "bg-purple-500/10 text-purple-500 border-purple-500/20", label: "VM" }
} }
const formatUptime = (seconds: number) => {
const days = Math.floor(seconds / 86400)
const hours = Math.floor((seconds % 86400) / 3600)
const minutes = Math.floor((seconds % 3600) / 60)
return `${days}d ${hours}h ${minutes}m`
}
// Safe data handling with default empty array // Safe data handling with default empty array
const safeVMData = vmData || [] const safeVMData = vmData || []
@@ -327,448 +351,429 @@ export function VirtualMachines() {
</Card> </Card>
<Card className="bg-card border-border"> <Card className="bg-card border-border">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader>
<CardTitle className="text-sm font-medium text-muted-foreground">Average Load</CardTitle> <CardTitle className="text-foreground flex items-center">
<Monitor className="h-4 w-4 text-muted-foreground" /> <Server className="h-5 w-5 mr-2" />
Virtual Machines & Containers
</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold text-foreground"> {safeVMData.length === 0 ? (
{safeVMData.filter((vm) => vm.status === "running").length > 0 <div className="text-center py-8 text-muted-foreground">No virtual machines found</div>
? ( ) : (
(safeVMData.reduce((sum, vm) => sum + (vm.cpu || 0), 0) / <div className="space-y-4">
safeVMData.filter((vm) => vm.status === "running").length) * {safeVMData.map((vm) => {
100 const cpuPercent = (vm.cpu * 100).toFixed(1)
).toFixed(0) const memPercent = vm.maxmem > 0 ? ((vm.mem / vm.maxmem) * 100).toFixed(1) : "0"
: 0} const memGB = (vm.mem / 1024 ** 3).toFixed(1)
% const maxMemGB = (vm.maxmem / 1024 ** 3).toFixed(1)
</div> const typeBadge = getTypeBadge(vm.type)
<p className="text-xs text-muted-foreground mt-2">Average resource utilization</p> const vmIP = extractIPFromConfig(vm.config)
return (
<div
key={vm.vmid}
className="p-6 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 sm:justify-between gap-3 mb-4">
<div className="flex items-center space-x-4">
<Server className="h-6 w-6 text-muted-foreground flex-shrink-0" />
<div className="min-w-0">
<div className="font-semibold text-foreground text-lg flex items-center flex-wrap gap-2">
<span className="truncate">{vm.name}</span>
<Badge variant="outline" className={`text-xs flex-shrink-0 ${typeBadge.color}`}>
{typeBadge.label}
</Badge>
</div>
<div className="text-sm text-muted-foreground">ID: {vm.vmid}</div>
<div className="text-sm text-muted-foreground">IP: {vmIP}</div>
</div>
</div>
<Badge
variant="outline"
className={`${getStatusColor(vm.status)} flex-shrink-0 self-start sm:self-center`}
>
{getStatusIcon(vm.status)}
{vm.status.toUpperCase()}
</Badge>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div>
<div className="text-sm text-muted-foreground mb-2">CPU Usage</div>
<div className="text-lg font-semibold text-foreground mb-1">{cpuPercent}%</div>
<Progress value={Number.parseFloat(cpuPercent)} className="h-2 [&>div]:bg-blue-500" />
</div>
<div>
<div className="text-sm text-muted-foreground mb-2">Memory Usage</div>
<div className="text-lg font-semibold text-foreground mb-1">
{memGB} / {maxMemGB} GB
</div>
<Progress value={Number.parseFloat(memPercent)} className="h-2 [&>div]:bg-blue-500" />
</div>
<div className="hidden md:block">
<div className="text-sm text-muted-foreground mb-2">Disk I/O</div>
<div className="text-sm font-semibold text-foreground">
<div className="flex items-center gap-1">
<HardDrive className="h-3 w-3 text-green-500" />
<span className="text-green-500">↓ {formatBytes(vm.diskread)}</span>
</div>
<div className="flex items-center gap-1 mt-1">
<HardDrive className="h-3 w-3 text-blue-500" />
<span className="text-blue-500">↑ {formatBytes(vm.diskwrite)}</span>
</div>
</div>
</div>
<div className="hidden md:block">
<div className="text-sm text-muted-foreground mb-2">Network I/O</div>
<div className="text-sm font-semibold text-foreground">
<div className="flex items-center gap-1">
<Network className="h-3 w-3 text-green-500" />
<span className="text-green-500">↓ {formatBytes(vm.netin)}</span>
</div>
<div className="flex items-center gap-1 mt-1">
<Network className="h-3 w-3 text-blue-500" />
<span className="text-blue-500">↑ {formatBytes(vm.netout)}</span>
</div>
</div>
</div>
</div>
<div className="mt-4 pt-4 border-t border-border">
<div className="text-sm text-muted-foreground">Uptime</div>
<div className="text-lg font-semibold text-foreground">{formatUptime(vm.uptime)}</div>
</div>
</div>
)
})}
</div>
)}
</CardContent> </CardContent>
</Card> </Card>
</div>
{/* Virtual Machines List */} {/* VM Details Modal */}
<Card className="bg-card border-border"> <Dialog
<CardHeader> open={!!selectedVM}
<CardTitle className="text-foreground flex items-center"> onOpenChange={() => {
<Server className="h-5 w-5 mr-2" /> setSelectedVM(null)
Virtual Machines & Containers setVMDetails(null)
</CardTitle> }}
</CardHeader> >
<CardContent> <DialogContent className="max-w-4xl max-h-[95vh] overflow-y-auto">
{safeVMData.length === 0 ? ( <DialogHeader className="pb-4 border-b border-border">
<div className="text-center py-8 text-muted-foreground">No virtual machines found</div> <DialogTitle className="flex flex-col sm:flex-row sm:items-center gap-3">
) : ( <div className="flex items-center gap-2">
<div className="space-y-4"> <Server className="h-5 w-5 flex-shrink-0" />
{safeVMData.map((vm) => { <span className="text-lg truncate">{selectedVM?.name}</span>
const cpuPercent = (vm.cpu * 100).toFixed(1) </div>
const memPercent = vm.maxmem > 0 ? ((vm.mem / vm.maxmem) * 100).toFixed(1) : "0" {selectedVM && (
const memGB = (vm.mem / 1024 ** 3).toFixed(1) <div className="flex items-center gap-2 flex-wrap">
const maxMemGB = (vm.maxmem / 1024 ** 3).toFixed(1) <Badge variant="outline" className={`${getTypeBadge(selectedVM.type).color} flex-shrink-0`}>
const typeBadge = getTypeBadge(vm.type) {getTypeBadge(selectedVM.type).label}
</Badge>
return ( <Badge variant="outline" className={`${getStatusColor(selectedVM.status)} flex-shrink-0`}>
<div {selectedVM.status.toUpperCase()}
key={vm.vmid} </Badge>
className="p-6 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 sm:justify-between gap-3 mb-4">
<div className="flex items-center space-x-4">
<Server className="h-6 w-6 text-muted-foreground flex-shrink-0" />
<div className="min-w-0">
<div className="font-semibold text-foreground text-lg flex items-center flex-wrap gap-2">
<span className="truncate">{vm.name}</span>
<Badge variant="outline" className={`text-xs flex-shrink-0 ${typeBadge.color}`}>
{typeBadge.label}
</Badge>
</div>
<div className="text-sm text-muted-foreground">ID: {vm.vmid}</div>
</div>
</div>
<Badge
variant="outline"
className={`${getStatusColor(vm.status)} flex-shrink-0 self-start sm:self-center`}
>
{getStatusIcon(vm.status)}
{vm.status.toUpperCase()}
</Badge>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div>
<div className="text-sm text-muted-foreground mb-2">CPU Usage</div>
<div className="text-lg font-semibold text-foreground mb-1">{cpuPercent}%</div>
<Progress value={Number.parseFloat(cpuPercent)} className="h-2 [&>div]:bg-blue-500" />
</div>
<div>
<div className="text-sm text-muted-foreground mb-2">Memory Usage</div>
<div className="text-lg font-semibold text-foreground mb-1">
{memGB} / {maxMemGB} GB
</div>
<Progress value={Number.parseFloat(memPercent)} className="h-2 [&>div]:bg-blue-500" />
</div>
<div className="hidden md:block">
<div className="text-sm text-muted-foreground mb-2">Disk I/O</div>
<div className="text-sm font-semibold text-foreground">
<div className="flex items-center gap-1">
<HardDrive className="h-3 w-3 text-green-500" />
<span className="text-green-500">↓ {formatBytes(vm.diskread)}</span>
</div>
<div className="flex items-center gap-1 mt-1">
<HardDrive className="h-3 w-3 text-blue-500" />
<span className="text-blue-500">↑ {formatBytes(vm.diskwrite)}</span>
</div>
</div>
</div>
<div className="hidden md:block">
<div className="text-sm text-muted-foreground mb-2">Network I/O</div>
<div className="text-sm font-semibold text-foreground">
<div className="flex items-center gap-1">
<Network className="h-3 w-3 text-green-500" />
<span className="text-green-500">↓ {formatBytes(vm.netin)}</span>
</div>
<div className="flex items-center gap-1 mt-1">
<Network className="h-3 w-3 text-blue-500" />
<span className="text-blue-500">↑ {formatBytes(vm.netout)}</span>
</div>
</div>
</div>
</div>
<div className="mt-4 pt-4 border-t border-border">
<div className="text-sm text-muted-foreground">Uptime</div>
<div className="text-lg font-semibold text-foreground">{formatUptime(vm.uptime)}</div>
</div>
</div> </div>
) )}
})} </DialogTitle>
</div> </DialogHeader>
)}
</CardContent>
</Card>
{/* VM Details Modal */} <div className="space-y-6 py-4">
<Dialog
open={!!selectedVM}
onOpenChange={() => {
setSelectedVM(null)
setVMDetails(null)
}}
>
<DialogContent className="max-w-4xl max-h-[95vh] overflow-y-auto">
<DialogHeader className="pb-4 border-b border-border">
<DialogTitle className="flex flex-col sm:flex-row sm:items-center gap-3">
<div className="flex items-center gap-2">
<Server className="h-5 w-5 flex-shrink-0" />
<span className="text-lg truncate">{selectedVM?.name}</span>
</div>
{selectedVM && ( {selectedVM && (
<div className="flex items-center gap-2 flex-wrap"> <>
<Badge variant="outline" className={`${getTypeBadge(selectedVM.type).color} flex-shrink-0`}> <div>
{getTypeBadge(selectedVM.type).label} <h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
</Badge> Basic Information
<Badge variant="outline" className={`${getStatusColor(selectedVM.status)} flex-shrink-0`}> </h3>
{selectedVM.status.toUpperCase()} <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
</Badge> <div>
</div> <div className="text-xs text-muted-foreground mb-1">Name</div>
)} <div className="font-semibold text-foreground">{selectedVM.name}</div>
</DialogTitle>
</DialogHeader>
<div className="space-y-6 py-4">
{selectedVM && (
<>
<div>
<h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
Basic Information
</h3>
<div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
<div>
<div className="text-xs text-muted-foreground mb-1">Name</div>
<div className="font-semibold text-foreground">{selectedVM.name}</div>
</div>
<div>
<div className="text-xs text-muted-foreground mb-1">VMID</div>
<div className="font-semibold text-foreground">{selectedVM.vmid}</div>
</div>
<div>
<div className="text-xs text-muted-foreground mb-1">CPU Usage</div>
<div
className={`font-semibold ${
(selectedVM.cpu * 100) > 80
? "text-red-500"
: selectedVM.cpu * 100 > 60
? "text-yellow-500"
: "text-green-500"
}`}
>
{(selectedVM.cpu * 100).toFixed(1)}%
</div> </div>
</div> <div>
<div> <div className="text-xs text-muted-foreground mb-1">VMID</div>
<div className="text-xs text-muted-foreground mb-1">Memory</div> <div className="font-semibold text-foreground">{selectedVM.vmid}</div>
<div
className={`font-semibold ${
((selectedVM.mem / selectedVM.maxmem) * 100) > 80
? "text-red-500"
: (selectedVM.mem / selectedVM.maxmem) * 100 > 60
? "text-yellow-500"
: "text-blue-500"
}`}
>
{(selectedVM.mem / 1024 ** 3).toFixed(1)} / {(selectedVM.maxmem / 1024 ** 3).toFixed(1)} GB
</div> </div>
</div> <div>
<div> <div className="text-xs text-muted-foreground mb-1">CPU Usage</div>
<div className="text-xs text-muted-foreground mb-1">Disk</div> <div
<div className="font-semibold text-foreground"> className={`font-semibold ${
{(selectedVM.disk / 1024 ** 3).toFixed(1)} / {(selectedVM.maxdisk / 1024 ** 3).toFixed(1)} GB (selectedVM.cpu * 100) > 80
</div> ? "text-red-500"
</div> : selectedVM.cpu * 100 > 60
<div> ? "text-yellow-500"
<div className="text-xs text-muted-foreground mb-1">Uptime</div> : "text-green-500"
<div className="font-semibold text-foreground">{formatUptime(selectedVM.uptime)}</div> }`}
</div> >
<div> {(selectedVM.cpu * 100).toFixed(1)}%
<div className="text-xs text-muted-foreground mb-1">Disk I/O</div>
<div className="text-sm font-semibold">
<div className="flex items-center gap-1">
<span className="text-green-500">↓ {formatBytes(selectedVM.diskread)}</span>
</div>
<div className="flex items-center gap-1">
<span className="text-blue-500">↑ {formatBytes(selectedVM.diskwrite)}</span>
</div> </div>
</div> </div>
</div> <div>
<div> <div className="text-xs text-muted-foreground mb-1">Memory</div>
<div className="text-xs text-muted-foreground mb-1">Network I/O</div> <div
<div className="text-sm font-semibold"> className={`font-semibold ${
<div className="flex items-center gap-1"> ((selectedVM.mem / selectedVM.maxmem) * 100) > 80
<span className="text-green-500">↓ {formatBytes(selectedVM.netin)}</span> ? "text-red-500"
: (selectedVM.mem / selectedVM.maxmem) * 100 > 60
? "text-yellow-500"
: "text-blue-500"
}`}
>
{(selectedVM.mem / 1024 ** 3).toFixed(1)} / {(selectedVM.maxmem / 1024 ** 3).toFixed(1)} GB
</div> </div>
<div className="flex items-center gap-1"> </div>
<span className="text-blue-500">↑ {formatBytes(selectedVM.netout)}</span> <div>
<div className="text-xs text-muted-foreground mb-1">Disk</div>
<div className="font-semibold text-foreground">
{(selectedVM.disk / 1024 ** 3).toFixed(1)} / {(selectedVM.maxdisk / 1024 ** 3).toFixed(1)} GB
</div>
</div>
<div>
<div className="text-xs text-muted-foreground mb-1">Uptime</div>
<div className="font-semibold text-foreground">{formatUptime(selectedVM.uptime)}</div>
</div>
<div>
<div className="text-xs text-muted-foreground mb-1">Disk I/O</div>
<div className="text-sm font-semibold">
<div className="flex items-center gap-1">
<span className="text-green-500">↓ {formatBytes(selectedVM.diskread)}</span>
</div>
<div className="flex items-center gap-1">
<span className="text-blue-500">↑ {formatBytes(selectedVM.diskwrite)}</span>
</div>
</div>
</div>
<div>
<div className="text-xs text-muted-foreground mb-1">Network I/O</div>
<div className="text-sm font-semibold">
<div className="flex items-center gap-1">
<span className="text-green-500">↓ {formatBytes(selectedVM.netin)}</span>
</div>
<div className="flex items-center gap-1">
<span className="text-blue-500">↑ {formatBytes(selectedVM.netout)}</span>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
{/* Resources Configuration */} {/* Resources Configuration */}
{detailsLoading ? ( {detailsLoading ? (
<div className="text-center py-8 text-muted-foreground">Loading configuration...</div> <div className="text-center py-8 text-muted-foreground">Loading configuration...</div>
) : vmDetails?.config ? ( ) : vmDetails?.config ? (
<> <>
<div> <div>
<h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide"> <h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
Resources Resources
</h3> </h3>
<div className="grid grid-cols-2 lg:grid-cols-3 gap-4"> <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
{vmDetails.config.cores && ( {vmDetails.config.cores && (
<div> <div>
<div className="text-xs text-muted-foreground mb-1">CPU Cores</div> <div className="text-xs text-muted-foreground mb-1">CPU Cores</div>
<div className="font-semibold text-blue-500">{vmDetails.config.cores}</div> <div className="font-semibold text-blue-500">{vmDetails.config.cores}</div>
</div>
)}
{vmDetails.config.sockets && (
<div>
<div className="text-xs text-muted-foreground mb-1">CPU Sockets</div>
<div className="font-semibold text-foreground">{vmDetails.config.sockets}</div>
</div>
)}
{vmDetails.config.memory && (
<div>
<div className="text-xs text-muted-foreground mb-1">Memory</div>
<div className="font-semibold text-blue-500">{vmDetails.config.memory} MB</div>
</div>
)}
{vmDetails.config.swap && (
<div>
<div className="text-xs text-muted-foreground mb-1">Swap</div>
<div className="font-semibold text-foreground">{vmDetails.config.swap} MB</div>
</div>
)}
{vmDetails.config.rootfs && (
<div className="col-span-2 lg:col-span-3">
<div className="text-xs text-muted-foreground mb-1">Root Filesystem</div>
<div className="font-medium text-foreground text-sm break-all font-mono">
{vmDetails.config.rootfs}
</div> </div>
</div> )}
)} {vmDetails.config.sockets && (
{Object.keys(vmDetails.config) <div>
.filter((key) => key.match(/^(scsi|sata|ide|virtio)\d+$/)) <div className="text-xs text-muted-foreground mb-1">CPU Sockets</div>
.map((diskKey) => ( <div className="font-semibold text-foreground">{vmDetails.config.sockets}</div>
<div key={diskKey} className="col-span-2 lg:col-span-3"> </div>
<div className="text-xs text-muted-foreground mb-1"> )}
{diskKey.toUpperCase().replace(/(\d+)/, " $1")} {vmDetails.config.memory && (
</div> <div>
<div className="text-xs text-muted-foreground mb-1">Memory</div>
<div className="font-semibold text-blue-500">{vmDetails.config.memory} MB</div>
</div>
)}
{vmDetails.config.swap && (
<div>
<div className="text-xs text-muted-foreground mb-1">Swap</div>
<div className="font-semibold text-foreground">{vmDetails.config.swap} MB</div>
</div>
)}
{vmDetails.config.rootfs && (
<div className="col-span-2 lg:col-span-3">
<div className="text-xs text-muted-foreground mb-1">Root Filesystem</div>
<div className="font-medium text-foreground text-sm break-all font-mono"> <div className="font-medium text-foreground text-sm break-all font-mono">
{vmDetails.config[diskKey]} {vmDetails.config.rootfs}
</div> </div>
</div> </div>
))} )}
{Object.keys(vmDetails.config)
.filter((key) => key.match(/^(scsi|sata|ide|virtio)\d+$/))
.map((diskKey) => (
<div key={diskKey} className="col-span-2 lg:col-span-3">
<div className="text-xs text-muted-foreground mb-1">
{diskKey.toUpperCase().replace(/(\d+)/, " $1")}
</div>
<div className="font-medium text-foreground text-sm break-all font-mono">
{vmDetails.config[diskKey]}
</div>
</div>
))}
</div>
</div> </div>
</div>
{/* Network Configuration */} {/* Network Configuration */}
<div> <div>
<h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide"> <h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
Network Network
</h3> </h3>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
{Object.keys(vmDetails.config) {Object.keys(vmDetails.config)
.filter((key) => key.match(/^net\d+$/)) .filter((key) => key.match(/^net\d+$/))
.map((netKey) => ( .map((netKey) => (
<div key={netKey} className="col-span-1"> <div key={netKey} className="col-span-1">
<div className="text-xs text-muted-foreground mb-1"> <div className="text-xs text-muted-foreground mb-1">
Network Interface {netKey.replace("net", "")} Network Interface {netKey.replace("net", "")}
</div> </div>
<div className="font-medium text-green-500 text-sm break-all font-mono"> <div className="font-medium text-green-500 text-sm break-all font-mono">
{vmDetails.config[netKey]} {vmDetails.config[netKey]}
</div>
</div> </div>
))}
{vmDetails.config.nameserver && (
<div>
<div className="text-xs text-muted-foreground mb-1">DNS Nameserver</div>
<div className="font-medium text-foreground font-mono">{vmDetails.config.nameserver}</div>
</div> </div>
))} )}
{vmDetails.config.nameserver && ( {vmDetails.config.searchdomain && (
<div> <div>
<div className="text-xs text-muted-foreground mb-1">DNS Nameserver</div> <div className="text-xs text-muted-foreground mb-1">Search Domain</div>
<div className="font-medium text-foreground font-mono">{vmDetails.config.nameserver}</div> <div className="font-medium text-foreground">{vmDetails.config.searchdomain}</div>
</div> </div>
)} )}
{vmDetails.config.searchdomain && ( {vmDetails.config.hostname && (
<div> <div>
<div className="text-xs text-muted-foreground mb-1">Search Domain</div> <div className="text-xs text-muted-foreground mb-1">Hostname</div>
<div className="font-medium text-foreground">{vmDetails.config.searchdomain}</div> <div className="font-medium text-foreground">{vmDetails.config.hostname}</div>
</div> </div>
)} )}
{vmDetails.config.hostname && ( </div>
<div>
<div className="text-xs text-muted-foreground mb-1">Hostname</div>
<div className="font-medium text-foreground">{vmDetails.config.hostname}</div>
</div>
)}
</div> </div>
</div>
{/* Options */} {/* Options */}
<div> <div>
<h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide"> <h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
Options Options
</h3> </h3>
<div className="grid grid-cols-2 lg:grid-cols-3 gap-4"> <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
{vmDetails.config.onboot !== undefined && ( {vmDetails.config.onboot !== undefined && (
<div> <div>
<div className="text-xs text-muted-foreground mb-1">Start on Boot</div> <div className="text-xs text-muted-foreground mb-1">Start on Boot</div>
<Badge <Badge
variant="outline" variant="outline"
className={ className={
vmDetails.config.onboot vmDetails.config.onboot
? "bg-green-500/10 text-green-500 border-green-500/20" ? "bg-green-500/10 text-green-500 border-green-500/20"
: "bg-red-500/10 text-red-500 border-red-500/20" : "bg-red-500/10 text-red-500 border-red-500/20"
} }
> >
{vmDetails.config.onboot ? "Yes" : "No"} {vmDetails.config.onboot ? "Yes" : "No"}
</Badge> </Badge>
</div> </div>
)} )}
{vmDetails.config.unprivileged !== undefined && ( {vmDetails.config.unprivileged !== undefined && (
<div> <div>
<div className="text-xs text-muted-foreground mb-1">Unprivileged</div> <div className="text-xs text-muted-foreground mb-1">Unprivileged</div>
<Badge <Badge
variant="outline" variant="outline"
className={ className={
vmDetails.config.unprivileged vmDetails.config.unprivileged
? "bg-green-500/10 text-green-500 border-green-500/20" ? "bg-green-500/10 text-green-500 border-green-500/20"
: "bg-yellow-500/10 text-yellow-500 border-yellow-500/20" : "bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
} }
> >
{vmDetails.config.unprivileged ? "Yes" : "No"} {vmDetails.config.unprivileged ? "Yes" : "No"}
</Badge> </Badge>
</div> </div>
)} )}
{vmDetails.config.ostype && ( {vmDetails.config.ostype && (
<div> <div>
<div className="text-xs text-muted-foreground mb-1">OS Type</div> <div className="text-xs text-muted-foreground mb-1">OS Type</div>
<div className="font-medium text-foreground">{vmDetails.config.ostype}</div> <div className="font-medium text-foreground">{vmDetails.config.ostype}</div>
</div> </div>
)} )}
{vmDetails.config.arch && ( {vmDetails.config.arch && (
<div> <div>
<div className="text-xs text-muted-foreground mb-1">Architecture</div> <div className="text-xs text-muted-foreground mb-1">Architecture</div>
<div className="font-medium text-foreground">{vmDetails.config.arch}</div> <div className="font-medium text-foreground">{vmDetails.config.arch}</div>
</div> </div>
)} )}
{vmDetails.config.boot && ( {vmDetails.config.boot && (
<div> <div>
<div className="text-xs text-muted-foreground mb-1">Boot Order</div> <div className="text-xs text-muted-foreground mb-1">Boot Order</div>
<div className="font-medium text-foreground">{vmDetails.config.boot}</div> <div className="font-medium text-foreground">{vmDetails.config.boot}</div>
</div> </div>
)} )}
{vmDetails.config.features && ( {vmDetails.config.features && (
<div className="col-span-2 lg:col-span-3"> <div className="col-span-2 lg:col-span-3">
<div className="text-xs text-muted-foreground mb-1">Features</div> <div className="text-xs text-muted-foreground mb-1">Features</div>
<div className="font-medium text-foreground text-sm">{vmDetails.config.features}</div> <div className="font-medium text-foreground text-sm">{vmDetails.config.features}</div>
</div> </div>
)} )}
</div>
</div> </div>
</div> </>
</> ) : null}
) : null}
{/* Control Actions */} {/* Control Actions */}
<div> <div>
<h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide"> <h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
Control Actions Control Actions
</h3> </h3>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<Button <Button
variant="outline" variant="outline"
className="w-full bg-transparent" className="w-full bg-transparent"
disabled={selectedVM.status === "running" || controlLoading} disabled={selectedVM.status === "running" || controlLoading}
onClick={() => handleVMControl(selectedVM.vmid, "start")} onClick={() => handleVMControl(selectedVM.vmid, "start")}
> >
<Play className="h-4 w-4 mr-2" /> <Play className="h-4 w-4 mr-2" />
Start Start
</Button> </Button>
<Button <Button
variant="outline" variant="outline"
className="w-full bg-transparent" className="w-full bg-transparent"
disabled={selectedVM.status !== "running" || controlLoading} disabled={selectedVM.status !== "running" || controlLoading}
onClick={() => handleVMControl(selectedVM.vmid, "shutdown")} onClick={() => handleVMControl(selectedVM.vmid, "shutdown")}
> >
<Power className="h-4 w-4 mr-2" /> <Power className="h-4 w-4 mr-2" />
Shutdown Shutdown
</Button> </Button>
<Button <Button
variant="outline" variant="outline"
className="w-full bg-transparent" className="w-full bg-transparent"
disabled={selectedVM.status !== "running" || controlLoading} disabled={selectedVM.status !== "running" || controlLoading}
onClick={() => handleVMControl(selectedVM.vmid, "reboot")} onClick={() => handleVMControl(selectedVM.vmid, "reboot")}
> >
<RotateCcw className="h-4 w-4 mr-2" /> <RotateCcw className="h-4 w-4 mr-2" />
Reboot Reboot
</Button> </Button>
<Button <Button
variant="outline" variant="outline"
className="w-full bg-transparent" className="w-full bg-transparent"
disabled={selectedVM.status !== "running" || controlLoading} disabled={selectedVM.status !== "running" || controlLoading}
onClick={() => handleVMControl(selectedVM.vmid, "stop")} onClick={() => handleVMControl(selectedVM.vmid, "stop")}
> >
<StopCircle className="h-4 w-4 mr-2" /> <StopCircle className="h-4 w-4 mr-2" />
Force Stop Force Stop
</Button> </Button>
</div>
</div> </div>
</div> </>
</> )}
)} </div>
</div> </DialogContent>
</DialogContent> </Dialog>
</Dialog> </div>
</div> </div>
) )
} }