Mirrors/ProxMenux
1
0
Fork 0
mirror of https://github.com/MacRimi/ProxMenux.git synced 2025-11-19 03:56:18 +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, RotateCcw,
StopCircle, StopCircle,
Container, Container,
X,
Info,
ArrowLeft,
} from "lucide-react" } from "lucide-react"
import useSWR from "swr" import useSWR from "swr"
import { MetricsView } from "./metrics-dialog" import { MetricsDialog } from "./metrics-dialog" // Import MetricsDialog
interface VMData { interface VMData {
vmid: number vmid: number
@@ -190,7 +187,6 @@ export function VirtualMachines() {
const [vmConfigs, setVmConfigs] = useState<Record<number, string>>({}) const [vmConfigs, setVmConfigs] = useState<Record<number, string>>({})
const [currentView, setCurrentView] = useState<"main" | "metrics">("main") const [currentView, setCurrentView] = useState<"main" | "metrics">("main")
const [selectedMetric, setSelectedMetric] = useState<"cpu" | "memory" | "disk" | "network" | null>(null) const [selectedMetric, setSelectedMetric] = useState<"cpu" | "memory" | "disk" | "network" | null>(null)
const [showDetailsModal, setShowDetailsModal] = useState(false)
useEffect(() => { useEffect(() => {
const fetchLXCIPs = async () => { const fetchLXCIPs = async () => {
@@ -724,12 +720,11 @@ export function VirtualMachines() {
setSelectedMetric(null) 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" ? ( {currentView === "main" ? (
<> <>
<DialogHeader className="pb-4 border-b border-border px-6 pt-6 sticky top-0 bg-background z-10"> <DialogHeader className="pb-4 border-b border-border px-6 pt-6 flex-shrink-0">
<div className="flex items-start justify-between gap-4"> <DialogTitle className="flex flex-col sm:flex-row sm:items-center gap-3">
<DialogTitle className="flex flex-col sm:flex-row sm:items-center gap-3 flex-1">
{/* Desktop layout */} {/* Desktop layout */}
<div className="hidden sm:flex items-center gap-3 flex-wrap"> <div className="hidden sm:flex items-center gap-3 flex-wrap">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@@ -780,37 +775,23 @@ export function VirtualMachines() {
)} )}
</div> </div>
</DialogTitle> </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> </DialogHeader>
<div className="flex-1 overflow-y-auto px-6 py-4"> <div className="flex-1 overflow-y-auto px-6 py-4">
<div className="space-y-6"> <div className="space-y-6">
{selectedVM && ( {selectedVM && (
<> <>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div>
{/* CPU & Memory Card */} <h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
<Card className="bg-card/50 border-border hover:bg-card/80 transition-colors cursor-pointer"> Basic Information
<CardHeader className="pb-3"> </h3>
<CardTitle className="text-sm font-medium text-muted-foreground uppercase tracking-wide"> <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
CPU & Memory <div>
</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="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)}`}> <div className={`font-semibold mb-1 ${getUsageColor(selectedVM.cpu * 100)}`}>
{(selectedVM.cpu * 100).toFixed(1)}% {(selectedVM.cpu * 100).toFixed(1)}%
</div> </div>
@@ -819,8 +800,13 @@ export function VirtualMachines() {
className={`h-1.5 ${getModalProgressColor(selectedVM.cpu * 100)}`} className={`h-1.5 ${getModalProgressColor(selectedVM.cpu * 100)}`}
/> />
</div> </div>
<div onClick={() => handleMetricClick("memory")}> </div>
<div>
<div className="text-xs text-muted-foreground mb-1">Memory</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 <div
className={`font-semibold mb-1 ${getUsageColor((selectedVM.mem / selectedVM.maxmem) * 100)}`} 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)}`} className={`h-1.5 ${getModalProgressColor((selectedVM.mem / selectedVM.maxmem) * 100)}`}
/> />
</div> </div>
</CardContent> </div>
</Card> <div>
<div className="text-xs text-muted-foreground mb-1">Disk</div>
{/* Disk Usage Card */} <div
<Card className="bg-card/50 border-border hover:bg-card/80 transition-colors cursor-pointer"> className="cursor-pointer hover:opacity-80 transition-opacity"
<CardHeader className="pb-3"> onClick={() => handleMetricClick("disk")}
<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
className={`font-semibold mb-1 ${getUsageColor((selectedVM.disk / selectedVM.maxdisk) * 100)}`} 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)}`} className={`h-1.5 ${getModalProgressColor((selectedVM.disk / selectedVM.maxdisk) * 100)}`}
/> />
</div> </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="flex items-center justify-between"> <div>
<span className="text-xs text-muted-foreground">Write</span> <div className="text-xs text-muted-foreground mb-1">Disk I/O</div>
<span className="text-sm font-semibold text-blue-500"> <div
{((selectedVM.diskwrite || 0) / 1024 ** 2).toFixed(2)} MB className="cursor-pointer hover:opacity-80 transition-opacity"
</span> onClick={() => handleMetricClick("disk")}
</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)}
> >
<Info className="h-3 w-3 mr-1" /> <div className="text-sm text-green-500 flex items-center gap-1">
More Info <span>↓</span>
</Button> <span>{((selectedVM.diskread || 0) / 1024 ** 2).toFixed(2)} MB</span>
</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>
)} <div className="text-sm text-blue-500 flex items-center gap-1">
{vmDetails?.config.sockets && ( <span>↑</span>
<div className="flex items-center justify-between"> <span>{((selectedVM.diskwrite || 0) / 1024 ** 2).toFixed(2)} MB</span>
<span className="text-xs text-muted-foreground">CPU Sockets</span>
<span className="text-sm font-semibold">{vmDetails.config.sockets}</span>
</div> </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> </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>
{selectedVM.type === "lxc" && vmDetails?.config && ( <div className="text-xs text-muted-foreground mb-1">Network I/O</div>
<div className="flex items-center justify-between"> <div
<span className="text-xs text-muted-foreground">IP Address</span> className="cursor-pointer hover:opacity-80 transition-opacity"
<span onClick={() => handleMetricClick("network")}
className={`text-sm font-semibold ${
extractIPFromConfig(vmDetails.config) === "DHCP"
? "text-yellow-500"
: "text-green-500"
}`}
> >
{extractIPFromConfig(vmDetails.config)} <div className="text-sm text-green-500 flex items-center gap-1">
</span> <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>
)}
</CardContent>
</Card>
</div> </div>
</>
)}
</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>
</>
) : (
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> <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">
{selectedVM?.type === "lxc" ? "Resources" : "Hardware"} 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 && (
@@ -1113,9 +924,10 @@ export function VirtualMachines() {
</div> </div>
</div> </div>
{/* Network Section */}
<div> <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"> <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+$/))
@@ -1150,9 +962,10 @@ export function VirtualMachines() {
</div> </div>
</div> </div>
{/* Options Section */}
<div> <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"> <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
{vmDetails?.config.onboot !== undefined && ( {vmDetails?.config.onboot !== undefined && (
<div> <div>
@@ -1210,8 +1023,63 @@ export function VirtualMachines() {
)} )}
</div> </div>
</div> </div>
</>
)}
</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> </DialogContent>
</Dialog> </Dialog>
</div> </div>