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 23:48:07 +02:00
parent c22b9f8ff5
commit 598b88b1f0
1 changed files with 264 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,6 +18,8 @@ import {
RotateCcw, RotateCcw,
StopCircle, StopCircle,
Container, Container,
ChevronDown,
ChevronUp,
} from "lucide-react" } from "lucide-react"
import useSWR from "swr" import useSWR from "swr"
import { MetricsView } from "./metrics-dialog" import { MetricsView } from "./metrics-dialog"
@@ -187,6 +189,7 @@ 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 [showAdditionalInfo, setShowAdditionalInfo] = useState(false)
useEffect(() => { useEffect(() => {
const fetchLXCIPs = async () => { const fetchLXCIPs = async () => {
@@ -221,6 +224,7 @@ export function VirtualMachines() {
setSelectedVM(vm) setSelectedVM(vm)
setCurrentView("main") setCurrentView("main")
setSelectedMetric(null) setSelectedMetric(null)
setShowAdditionalInfo(false)
setDetailsLoading(true) setDetailsLoading(true)
try { try {
const response = await fetch(`/api/vms/${vm.vmid}`) const response = await fetch(`/api/vms/${vm.vmid}`)
@@ -718,9 +722,10 @@ export function VirtualMachines() {
setVMDetails(null) setVMDetails(null)
setCurrentView("main") setCurrentView("main")
setSelectedMetric(null) setSelectedMetric(null)
setShowAdditionalInfo(false)
}} }}
> >
<DialogContent className="max-w-4xl max-h-[95vh] flex flex-col p-0"> <DialogContent className="max-w-4xl max-h-[95vh] sm:max-h-[90vh] flex flex-col p-0">
{currentView === "main" ? ( {currentView === "main" ? (
<> <>
<DialogHeader className="pb-4 border-b border-border px-6 pt-6"> <DialogHeader className="pb-4 border-b border-border px-6 pt-6">
@@ -784,14 +789,16 @@ export function VirtualMachines() {
<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">
Basic Information Basic Information
</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-3">
<div> {/* CPU Usage Card */}
<div className="text-xs text-muted-foreground mb-1">CPU Usage</div> <Card className="border border-border bg-card/50">
<CardContent className="p-3">
<div className="text-xs text-muted-foreground mb-2">CPU Usage</div>
<div <div
className="cursor-pointer hover:opacity-80 transition-opacity" className="cursor-pointer hover:opacity-80 transition-opacity"
onClick={() => handleMetricClick("cpu")} onClick={() => handleMetricClick("cpu")}
> >
<div className={`font-semibold mb-1 ${getUsageColor(selectedVM.cpu * 100)}`}> <div className={`font-semibold mb-2 ${getUsageColor(selectedVM.cpu * 100)}`}>
{(selectedVM.cpu * 100).toFixed(1)}% {(selectedVM.cpu * 100).toFixed(1)}%
</div> </div>
<Progress <Progress
@@ -799,33 +806,41 @@ export function VirtualMachines() {
className={`h-1.5 ${getModalProgressColor(selectedVM.cpu * 100)}`} className={`h-1.5 ${getModalProgressColor(selectedVM.cpu * 100)}`}
/> />
</div> </div>
</div> </CardContent>
<div> </Card>
<div className="text-xs text-muted-foreground mb-1">Memory</div>
{/* Memory Card */}
<Card className="border border-border bg-card/50">
<CardContent className="p-3">
<div className="text-xs text-muted-foreground mb-2">Memory</div>
<div <div
className="cursor-pointer hover:opacity-80 transition-opacity" className="cursor-pointer hover:opacity-80 transition-opacity"
onClick={() => handleMetricClick("memory")} onClick={() => handleMetricClick("memory")}
> >
<div <div
className={`font-semibold mb-1 ${getUsageColor((selectedVM.mem / selectedVM.maxmem) * 100)}`} className={`font-semibold mb-2 ${getUsageColor((selectedVM.mem / selectedVM.maxmem) * 100)}`}
> >
{(selectedVM.mem / 1024 ** 3).toFixed(1)} / {(selectedVM.maxmem / 1024 ** 3).toFixed(1)}{" "} {(selectedVM.mem / 1024 ** 3).toFixed(1)} /{" "}
GB {(selectedVM.maxmem / 1024 ** 3).toFixed(1)} GB
</div> </div>
<Progress <Progress
value={(selectedVM.mem / selectedVM.maxmem) * 100} value={(selectedVM.mem / selectedVM.maxmem) * 100}
className={`h-1.5 ${getModalProgressColor((selectedVM.mem / selectedVM.maxmem) * 100)}`} className={`h-1.5 ${getModalProgressColor((selectedVM.mem / selectedVM.maxmem) * 100)}`}
/> />
</div> </div>
</div> </CardContent>
<div> </Card>
<div className="text-xs text-muted-foreground mb-1">Disk</div>
{/* Disk Card */}
<Card className="border border-border bg-card/50">
<CardContent className="p-3">
<div className="text-xs text-muted-foreground mb-2">Disk</div>
<div <div
className="cursor-pointer hover:opacity-80 transition-opacity" className="cursor-pointer hover:opacity-80 transition-opacity"
onClick={() => handleMetricClick("disk")} onClick={() => handleMetricClick("disk")}
> >
<div <div
className={`font-semibold mb-1 ${getUsageColor((selectedVM.disk / selectedVM.maxdisk) * 100)}`} className={`font-semibold mb-2 ${getUsageColor((selectedVM.disk / selectedVM.maxdisk) * 100)}`}
> >
{(selectedVM.disk / 1024 ** 3).toFixed(1)} /{" "} {(selectedVM.disk / 1024 ** 3).toFixed(1)} /{" "}
{(selectedVM.maxdisk / 1024 ** 3).toFixed(1)} GB {(selectedVM.maxdisk / 1024 ** 3).toFixed(1)} GB
@@ -835,14 +850,18 @@ 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>
</div> </CardContent>
<div> </Card>
<div className="text-xs text-muted-foreground mb-1">Disk I/O</div>
{/* Disk I/O Card */}
<Card className="border border-border bg-card/50">
<CardContent className="p-3">
<div className="text-xs text-muted-foreground mb-2">Disk I/O</div>
<div <div
className="cursor-pointer hover:opacity-80 transition-opacity" className="cursor-pointer hover:opacity-80 transition-opacity"
onClick={() => handleMetricClick("disk")} onClick={() => handleMetricClick("disk")}
> >
<div className="text-sm text-green-500 flex items-center gap-1"> <div className="text-sm text-green-500 flex items-center gap-1 mb-1">
<span>↓</span> <span>↓</span>
<span>{((selectedVM.diskread || 0) / 1024 ** 2).toFixed(2)} MB</span> <span>{((selectedVM.diskread || 0) / 1024 ** 2).toFixed(2)} MB</span>
</div> </div>
@@ -851,14 +870,18 @@ export function VirtualMachines() {
<span>{((selectedVM.diskwrite || 0) / 1024 ** 2).toFixed(2)} MB</span> <span>{((selectedVM.diskwrite || 0) / 1024 ** 2).toFixed(2)} MB</span>
</div> </div>
</div> </div>
</div> </CardContent>
<div> </Card>
<div className="text-xs text-muted-foreground mb-1">Network I/O</div>
{/* Network I/O Card */}
<Card className="border border-border bg-card/50">
<CardContent className="p-3">
<div className="text-xs text-muted-foreground mb-2">Network I/O</div>
<div <div
className="cursor-pointer hover:opacity-80 transition-opacity" className="cursor-pointer hover:opacity-80 transition-opacity"
onClick={() => handleMetricClick("network")} onClick={() => handleMetricClick("network")}
> >
<div className="text-sm text-green-500 flex items-center gap-1"> <div className="text-sm text-green-500 flex items-center gap-1 mb-1">
<span>↓</span> <span>↓</span>
<span>{((selectedVM.netin || 0) / 1024 ** 2).toFixed(2)} MB</span> <span>{((selectedVM.netin || 0) / 1024 ** 2).toFixed(2)} MB</span>
</div> </div>
@@ -867,31 +890,46 @@ export function VirtualMachines() {
<span>{((selectedVM.netout || 0) / 1024 ** 2).toFixed(2)} MB</span> <span>{((selectedVM.netout || 0) / 1024 ** 2).toFixed(2)} MB</span>
</div> </div>
</div> </div>
</div> </CardContent>
</Card>
</div> </div>
</div> </div>
{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 ? (
<> <Card className="border border-border bg-card/50">
<div> <CardContent className="p-4">
<h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide"> <div className="flex items-center justify-between mb-4">
<h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
Resources Resources
</h3> </h3>
<div className="grid grid-cols-2 lg:grid-cols-3 gap-4"> <Button
variant="outline"
size="sm"
onClick={() => setShowAdditionalInfo(!showAdditionalInfo)}
className="text-xs"
>
{showAdditionalInfo ? (
<>
<ChevronUp className="h-3 w-3 mr-1" />
Less Info
</>
) : (
<>
<ChevronDown className="h-3 w-3 mr-1" />+ Info
</>
)}
</Button>
</div>
<div className="grid grid-cols-2 lg:grid-cols-4 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> </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 && ( {vmDetails.config.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>
@@ -904,18 +942,33 @@ export function VirtualMachines() {
<div className="font-semibold text-foreground">{vmDetails.config.swap} MB</div> <div className="font-semibold text-foreground">{vmDetails.config.swap} MB</div>
</div> </div>
)} )}
{selectedVM.type === "lxc" && (
<div>
<div className="text-xs text-muted-foreground mb-1">IP Address</div>
<div
className={`font-semibold ${extractIPFromConfig(vmDetails.config) === "DHCP" ? "text-yellow-500" : "text-green-500"}`}
>
{extractIPFromConfig(vmDetails.config)}
</div>
</div>
)}
</div>
{showAdditionalInfo && (
<div className="mt-6 pt-6 border-t border-border space-y-6">
{vmDetails.config.rootfs && ( {vmDetails.config.rootfs && (
<div className="col-span-2 lg:col-span-3"> <div>
<div className="text-xs text-muted-foreground mb-1">Root Filesystem</div> <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.rootfs} {vmDetails.config.rootfs}
</div> </div>
</div> </div>
)} )}
{Object.keys(vmDetails.config) {Object.keys(vmDetails.config)
.filter((key) => key.match(/^(scsi|sata|ide|virtio)\d+$/)) .filter((key) => key.match(/^(scsi|sata|ide|virtio)\d+$/))
.map((diskKey) => ( .map((diskKey) => (
<div key={diskKey} className="col-span-2 lg:col-span-3"> <div key={diskKey}>
<div className="text-xs text-muted-foreground mb-1"> <div className="text-xs text-muted-foreground mb-1">
{diskKey.toUpperCase().replace(/(\d+)/, " $1")} {diskKey.toUpperCase().replace(/(\d+)/, " $1")}
</div> </div>
@@ -924,18 +977,16 @@ export function VirtualMachines() {
</div> </div>
</div> </div>
))} ))}
</div>
</div>
<div> <div>
<h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide"> <h4 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
Network Network
</h3> </h4>
<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}>
<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>
@@ -955,7 +1006,9 @@ export function VirtualMachines() {
{vmDetails.config.searchdomain && ( {vmDetails.config.searchdomain && (
<div> <div>
<div className="text-xs text-muted-foreground mb-1">Search Domain</div> <div className="text-xs text-muted-foreground mb-1">Search Domain</div>
<div className="font-medium text-foreground">{vmDetails.config.searchdomain}</div> <div className="font-medium text-foreground">
{vmDetails.config.searchdomain}
</div>
</div> </div>
)} )}
{vmDetails.config.hostname && ( {vmDetails.config.hostname && (
@@ -968,9 +1021,9 @@ export function VirtualMachines() {
</div> </div>
<div> <div>
<h3 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide"> <h4 className="text-sm font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
Options Options
</h3> </h4>
<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>
@@ -1020,15 +1073,26 @@ export function VirtualMachines() {
<div className="font-medium text-foreground">{vmDetails.config.boot}</div> <div className="font-medium text-foreground">{vmDetails.config.boot}</div>
</div> </div>
)} )}
{vmDetails.config.sockets && (
<div>
<div className="text-xs text-muted-foreground mb-1">CPU Sockets</div>
<div className="font-medium text-foreground">{vmDetails.config.sockets}</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>
</> </div>
)}
</CardContent>
</Card>
) : null} ) : null}
</> </>
)} )}