Mirrors/ProxMenux
1
0
Fork 0
mirror of https://github.com/MacRimi/ProxMenux.git synced 2025-11-18 03:26: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 23:02:52 +02:00
parent ee42dee366
commit 099b14efc3
1 changed files with 269 additions and 401 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,12 +18,9 @@ import {
RotateCcw,
StopCircle,
Container,
X,
Info,
ArrowLeft,
} from "lucide-react"
import useSWR from "swr"
import { MetricsView } from "./metrics-dialog"
import { MetricsDialog } from "./metrics-dialog" // Import MetricsDialog
interface VMData {
vmid: number
@@ -190,7 +187,6 @@ 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,12 +720,11 @@ export function VirtualMachines() {
setSelectedMetric(null)
}}
>
<DialogContent className="max-w-4xl max-h-[95vh] flex flex-col p-0">
<DialogContent className="max-w-4xl max-h-[95vh] p-0 flex flex-col overflow-hidden">
{currentView === "main" ? (
<>
<DialogHeader className="pb-4 border-b border-border px-6 pt-6 sticky top-0 bg-background z-10">
<div className="flex items-start justify-between gap-4">
<DialogTitle className="flex flex-col sm:flex-row sm:items-center gap-3 flex-1">
<DialogHeader className="pb-4 border-b border-border px-6 pt-6 flex-shrink-0">
<DialogTitle className="flex flex-col sm:flex-row sm:items-center gap-3">
{/* Desktop layout */}
<div className="hidden sm:flex items-center gap-3 flex-wrap">
<div className="flex items-center gap-2">
@@ -780,37 +775,23 @@ 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 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>
<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">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>
@@ -819,8 +800,13 @@ export function VirtualMachines() {
className={`h-1.5 ${getModalProgressColor(selectedVM.cpu * 100)}`}
/>
</div>
<div onClick={() => handleMetricClick("memory")}>
</div>
<div>
<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)}`}
>
@@ -832,19 +818,13 @@ export function VirtualMachines() {
className={`h-1.5 ${getModalProgressColor((selectedVM.mem / selectedVM.maxmem) * 100)}`}
/>
</div>
</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>
<div>
<div className="text-xs text-muted-foreground mb-1">Disk</div>
<div
className="cursor-pointer hover:opacity-80 transition-opacity"
onClick={() => handleMetricClick("disk")}
>
<div
className={`font-semibold mb-1 ${getUsageColor((selectedVM.disk / selectedVM.maxdisk) * 100)}`}
>
@@ -856,214 +836,45 @@ 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 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>
<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")}
>
<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 className="text-sm text-green-500 flex items-center gap-1">
<span>↓</span>
<span>{((selectedVM.diskread || 0) / 1024 ** 2).toFixed(2)} MB</span>
</div>
)}
{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 className="text-sm text-blue-500 flex items-center gap-1">
<span>↑</span>
<span>{((selectedVM.diskwrite || 0) / 1024 ** 2).toFixed(2)} MB</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>
)}
{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>
<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")}
>
{extractIPFromConfig(vmDetails.config)}
</span>
<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>
)}
</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">
{selectedVM?.type === "lxc" ? "Resources" : "Hardware"}
Resources
</h3>
<div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
{vmDetails?.config.cores && (
@@ -1113,9 +924,10 @@ 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+$/))
@@ -1150,9 +962,10 @@ 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>
@@ -1210,8 +1023,63 @@ export function VirtualMachines() {
)}
</div>
</div>
</>
)}
</div>
</div>
<div className="border-t border-border bg-background px-6 py-4 flex-shrink-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>
</>
) : currentView === "metrics" && selectedMetric ? (
<MetricsDialog
vmid={selectedVM?.vmid || 0}
vmName={selectedVM?.name || ""}
vmType={selectedVM?.type || "qemu"}
metric={selectedMetric}
onBack={() => {
setCurrentView("main")
setSelectedMetric(null)
}}
/>
) : null}
</DialogContent>
</Dialog>
</div>