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-20 22:40:37 +02:00
parent deae081cb3
commit ee42dee366
1 changed files with 382 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,6 +18,9 @@ import {
RotateCcw,
StopCircle,
Container,
X,
Info,
ArrowLeft,
} from "lucide-react"
import useSWR from "swr"
import { MetricsView } from "./metrics-dialog"
@@ -187,6 +190,7 @@ export function VirtualMachines() {
const [vmConfigs, setVmConfigs] = useState<Record<number, string>>({})
const [currentView, setCurrentView] = useState<"main" | "metrics">("main")
const [selectedMetric, setSelectedMetric] = useState<"cpu" | "memory" | "disk" | "network" | null>(null)
const [showDetailsModal, setShowDetailsModal] = useState(false)
useEffect(() => {
const fetchLXCIPs = async () => {
@@ -724,7 +728,8 @@ export function VirtualMachines() {
{currentView === "main" ? (
<>
<DialogHeader className="pb-4 border-b border-border px-6 pt-6 sticky top-0 bg-background z-10">
<DialogTitle className="flex flex-col sm:flex-row sm:items-center gap-3">
<div className="flex items-start justify-between gap-4">
<DialogTitle className="flex flex-col sm:flex-row sm:items-center gap-3 flex-1">
{/* Desktop layout */}
<div className="hidden sm:flex items-center gap-3 flex-wrap">
<div className="flex items-center gap-2">
@@ -775,23 +780,37 @@ export function VirtualMachines() {
)}
</div>
</DialogTitle>
<Button
variant="ghost"
size="icon"
className="h-8 w-8 rounded-full flex-shrink-0"
onClick={() => {
setSelectedVM(null)
setVMDetails(null)
setCurrentView("main")
setSelectedMetric(null)
}}
>
<X className="h-4 w-4" />
</Button>
</div>
</DialogHeader>
<div className="flex-1 overflow-y-auto px-6 py-4">
<div className="space-y-6">
{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="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{/* CPU & Memory Card */}
<Card className="bg-card/50 border-border hover:bg-card/80 transition-colors cursor-pointer">
<CardHeader className="pb-3">
<CardTitle className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
CPU & Memory
</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
<div onClick={() => handleMetricClick("cpu")}>
<div className="text-xs text-muted-foreground mb-1">CPU Usage</div>
<div
className="cursor-pointer hover:opacity-80 transition-opacity"
onClick={() => handleMetricClick("cpu")}
>
<div className={`font-semibold mb-1 ${getUsageColor(selectedVM.cpu * 100)}`}>
{(selectedVM.cpu * 100).toFixed(1)}%
</div>
@@ -800,13 +819,8 @@ export function VirtualMachines() {
className={`h-1.5 ${getModalProgressColor(selectedVM.cpu * 100)}`}
/>
</div>
</div>
<div>
<div onClick={() => handleMetricClick("memory")}>
<div className="text-xs text-muted-foreground mb-1">Memory</div>
<div
className="cursor-pointer hover:opacity-80 transition-opacity"
onClick={() => handleMetricClick("memory")}
>
<div
className={`font-semibold mb-1 ${getUsageColor((selectedVM.mem / selectedVM.maxmem) * 100)}`}
>
@@ -818,13 +832,19 @@ export function VirtualMachines() {
className={`h-1.5 ${getModalProgressColor((selectedVM.mem / selectedVM.maxmem) * 100)}`}
/>
</div>
</div>
<div>
<div className="text-xs text-muted-foreground mb-1">Disk</div>
<div
className="cursor-pointer hover:opacity-80 transition-opacity"
onClick={() => handleMetricClick("disk")}
>
</CardContent>
</Card>
{/* Disk Usage Card */}
<Card className="bg-card/50 border-border hover:bg-card/80 transition-colors cursor-pointer">
<CardHeader className="pb-3">
<CardTitle className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
Disk Usage
</CardTitle>
</CardHeader>
<CardContent>
<div onClick={() => handleMetricClick("disk")}>
<div className="text-xs text-muted-foreground mb-1">Storage</div>
<div
className={`font-semibold mb-1 ${getUsageColor((selectedVM.disk / selectedVM.maxdisk) * 100)}`}
>
@@ -836,45 +856,214 @@ export function VirtualMachines() {
className={`h-1.5 ${getModalProgressColor((selectedVM.disk / selectedVM.maxdisk) * 100)}`}
/>
</div>
</CardContent>
</Card>
{/* Disk I/O Card */}
<Card className="bg-card/50 border-border hover:bg-card/80 transition-colors cursor-pointer">
<CardHeader className="pb-3">
<CardTitle className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
Disk I/O
</CardTitle>
</CardHeader>
<CardContent>
<div onClick={() => handleMetricClick("disk")}>
<div className="space-y-2">
<div className="flex items-center justify-between">
<span className="text-xs text-muted-foreground">Read</span>
<span className="text-sm font-semibold text-green-500">
{((selectedVM.diskread || 0) / 1024 ** 2).toFixed(2)} MB
</span>
</div>
<div>
<div className="text-xs text-muted-foreground mb-1">Disk I/O</div>
<div
className="cursor-pointer hover:opacity-80 transition-opacity"
onClick={() => handleMetricClick("disk")}
<div className="flex items-center justify-between">
<span className="text-xs text-muted-foreground">Write</span>
<span className="text-sm font-semibold text-blue-500">
{((selectedVM.diskwrite || 0) / 1024 ** 2).toFixed(2)} MB
</span>
</div>
</div>
</div>
</CardContent>
</Card>
{/* Network I/O Card */}
<Card className="bg-card/50 border-border hover:bg-card/80 transition-colors cursor-pointer">
<CardHeader className="pb-3">
<CardTitle className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
Network I/O
</CardTitle>
</CardHeader>
<CardContent>
<div onClick={() => handleMetricClick("network")}>
<div className="space-y-2">
<div className="flex items-center justify-between">
<span className="text-xs text-muted-foreground">Download</span>
<span className="text-sm font-semibold text-green-500">
{((selectedVM.netin || 0) / 1024 ** 2).toFixed(2)} MB
</span>
</div>
<div className="flex items-center justify-between">
<span className="text-xs text-muted-foreground">Upload</span>
<span className="text-sm font-semibold text-blue-500">
{((selectedVM.netout || 0) / 1024 ** 2).toFixed(2)} MB
</span>
</div>
</div>
</div>
</CardContent>
</Card>
<Card className="bg-card/50 border-border md:col-span-2 lg:col-span-1">
<CardHeader className="pb-3">
<CardTitle className="text-sm font-medium text-muted-foreground uppercase tracking-wide flex items-center justify-between">
Resources
<Button
variant="ghost"
size="sm"
className="h-7 text-xs"
onClick={() => setShowDetailsModal(true)}
>
<div className="text-sm text-green-500 flex items-center gap-1">
<span>↓</span>
<span>{((selectedVM.diskread || 0) / 1024 ** 2).toFixed(2)} MB</span>
<Info className="h-3 w-3 mr-1" />
More Info
</Button>
</CardTitle>
</CardHeader>
<CardContent className="space-y-2">
{vmDetails?.config.cores && (
<div className="flex items-center justify-between">
<span className="text-xs text-muted-foreground">CPU Cores</span>
<span className="text-sm font-semibold text-blue-500">{vmDetails.config.cores}</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>
)}
{vmDetails?.config.sockets && (
<div className="flex items-center justify-between">
<span className="text-xs text-muted-foreground">CPU Sockets</span>
<span className="text-sm font-semibold">{vmDetails.config.sockets}</span>
</div>
)}
{vmDetails?.config.memory && (
<div className="flex items-center justify-between">
<span className="text-xs text-muted-foreground">Memory</span>
<span className="text-sm font-semibold text-blue-500">
{vmDetails.config.memory} MB
</span>
</div>
)}
{vmDetails?.config.swap && (
<div className="flex items-center justify-between">
<span className="text-xs text-muted-foreground">Swap</span>
<span className="text-sm font-semibold">{vmDetails.config.swap} MB</span>
</div>
<div>
<div className="text-xs text-muted-foreground mb-1">Network I/O</div>
<div
className="cursor-pointer hover:opacity-80 transition-opacity"
onClick={() => handleMetricClick("network")}
)}
{selectedVM.type === "lxc" && vmDetails?.config && (
<div className="flex items-center justify-between">
<span className="text-xs text-muted-foreground">IP Address</span>
<span
className={`text-sm font-semibold ${
extractIPFromConfig(vmDetails.config) === "DHCP"
? "text-yellow-500"
: "text-green-500"
}`}
>
<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>
{extractIPFromConfig(vmDetails.config)}
</span>
</div>
)}
</CardContent>
</Card>
</div>
</>
)}
</div>
</div>
<div className="border-t border-border bg-background px-6 py-4 sticky bottom-0">
<h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
Control Actions
</h3>
<div className="grid grid-cols-2 gap-3">
<Button
className="w-full bg-green-600 hover:bg-green-700 text-white"
disabled={selectedVM?.status === "running" || controlLoading}
onClick={() => selectedVM && handleVMControl(selectedVM.vmid, "start")}
>
<Play className="h-4 w-4 mr-2" />
Start
</Button>
<Button
className="w-full bg-blue-600 hover:bg-blue-700 text-white"
disabled={selectedVM?.status !== "running" || controlLoading}
onClick={() => selectedVM && handleVMControl(selectedVM.vmid, "shutdown")}
>
<Power className="h-4 w-4 mr-2" />
Shutdown
</Button>
<Button
className="w-full bg-blue-600 hover:bg-blue-700 text-white"
disabled={selectedVM?.status !== "running" || controlLoading}
onClick={() => selectedVM && handleVMControl(selectedVM.vmid, "reboot")}
>
<RotateCcw className="h-4 w-4 mr-2" />
Reboot
</Button>
<Button
className="w-full bg-blue-600 hover:bg-blue-700 text-white"
disabled={selectedVM?.status !== "running" || controlLoading}
onClick={() => selectedVM && handleVMControl(selectedVM.vmid, "stop")}
>
<StopCircle className="h-4 w-4 mr-2" />
Force Stop
</Button>
</div>
</div>
</>
) : (
selectedVM &&
selectedMetric && (
<MetricsView
vmid={selectedVM.vmid}
vmName={selectedVM.name}
vmType={selectedVM.type as "qemu" | "lxc"}
metricType={selectedMetric}
onBack={handleBackToMain}
/>
)
)}
</DialogContent>
</Dialog>
<Dialog open={showDetailsModal} onOpenChange={setShowDetailsModal}>
<DialogContent className="max-w-4xl max-h-[90vh] flex flex-col p-0">
<DialogHeader className="pb-4 border-b border-border px-6 pt-6 sticky top-0 bg-background z-10">
<div className="flex items-center justify-between gap-4">
<DialogTitle className="flex items-center gap-3">
<Button
variant="ghost"
size="icon"
className="h-8 w-8 rounded-full"
onClick={() => setShowDetailsModal(false)}
>
<ArrowLeft className="h-4 w-4" />
</Button>
<span>{selectedVM?.type === "lxc" ? "Container" : "Virtual Machine"} Configuration</span>
</DialogTitle>
<Button
variant="ghost"
size="icon"
className="h-8 w-8 rounded-full flex-shrink-0"
onClick={() => setShowDetailsModal(false)}
>
<X className="h-4 w-4" />
</Button>
</div>
</DialogHeader>
<div className="flex-1 overflow-y-auto px-6 py-4">
<div className="space-y-6">
{/* Hardware/Resources Section */}
<div>
<h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
Resources
{selectedVM?.type === "lxc" ? "Resources" : "Hardware"}
</h3>
<div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
{vmDetails?.config.cores && (
@@ -924,10 +1113,9 @@ export function VirtualMachines() {
</div>
</div>
{/* Network Section */}
<div>
<h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
Network
</h3>
<h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">Network</h3>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
{Object.keys(vmDetails?.config || {})
.filter((key) => key.match(/^net\d+$/))
@@ -962,10 +1150,9 @@ export function VirtualMachines() {
</div>
</div>
{/* Options Section */}
<div>
<h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
Options
</h3>
<h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">Options</h3>
<div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
{vmDetails?.config.onboot !== undefined && (
<div>
@@ -1023,64 +1210,8 @@ export function VirtualMachines() {
)}
</div>
</div>
</>
)}
</div>
</div>
<div className="border-t border-border bg-background px-6 py-4 sticky bottom-0">
<h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
Control Actions
</h3>
<div className="grid grid-cols-2 gap-3">
<Button
className="w-full bg-green-600 hover:bg-green-700 text-white"
disabled={selectedVM?.status === "running" || controlLoading}
onClick={() => selectedVM && handleVMControl(selectedVM.vmid, "start")}
>
<Play className="h-4 w-4 mr-2" />
Start
</Button>
<Button
className="w-full bg-blue-600 hover:bg-blue-700 text-white"
disabled={selectedVM?.status !== "running" || controlLoading}
onClick={() => selectedVM && handleVMControl(selectedVM.vmid, "shutdown")}
>
<Power className="h-4 w-4 mr-2" />
Shutdown
</Button>
<Button
className="w-full bg-blue-600 hover:bg-blue-700 text-white"
disabled={selectedVM?.status !== "running" || controlLoading}
onClick={() => selectedVM && handleVMControl(selectedVM.vmid, "reboot")}
>
<RotateCcw className="h-4 w-4 mr-2" />
Reboot
</Button>
<Button
className="w-full bg-blue-600 hover:bg-blue-700 text-white"
disabled={selectedVM?.status !== "running" || controlLoading}
onClick={() => selectedVM && handleVMControl(selectedVM.vmid, "stop")}
>
<StopCircle className="h-4 w-4 mr-2" />
Force Stop
</Button>
</div>
</div>
</>
) : (
/* Render metrics view when currentView is "metrics" */
selectedVM &&
selectedMetric && (
<MetricsView
vmid={selectedVM.vmid}
vmName={selectedVM.name}
vmType={selectedVM.type as "qemu" | "lxc"}
metricType={selectedMetric}
onBack={handleBackToMain}
/>
)
)}
</DialogContent>
</Dialog>
</div>