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 AppImage

Browse Source
This commit is contained in:
MacRimi
2025-10-21 17:20:16 +02:00
parent b79f22f4fe
commit f20e46dee0
2 changed files with 169 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
AppImage/components/metrics-dialog.tsx
View File

@@ -10,7 +10,6 @@ interface MetricsViewProps {
vmid: number
vmName: string
vmType: "qemu" | "lxc"
metricType: "cpu" | "memory" | "network" | "disk"
onBack: () => void
}
@@ -22,14 +21,7 @@ const TIMEFRAME_OPTIONS = [
{ value: "year", label: "1 Year" },
]
const METRIC_TITLES = {
cpu: "CPU Usage",
memory: "Memory Usage",
network: "Network Traffic",
disk: "Disk I/O",
}
export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: MetricsViewProps) {
export function MetricsView({ vmid, vmName, vmType, onBack }: MetricsViewProps) {
const [timeframe, setTimeframe] = useState("week")
const [data, setData] = useState<any[]>([])
const [loading, setLoading] = useState(false)
@@ -61,23 +53,19 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
const date = new Date(item.time * 1000)
let timeLabel = ""
// Format time based on timeframe
if (timeframe === "hour") {
// For 1 hour: show HH:mm
timeLabel = date.toLocaleString("en-US", {
hour: "2-digit",
minute: "2-digit",
hour12: false,
})
} else if (timeframe === "day") {
// For 24 hours: show HH:mm
timeLabel = date.toLocaleString("en-US", {
hour: "2-digit",
minute: "2-digit",
hour12: false,
})
} else if (timeframe === "week") {
// For 7 days: show Mon DD HH:mm
timeLabel = date.toLocaleString("en-US", {
month: "short",
day: "numeric",
@@ -86,13 +74,11 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
hour12: false,
})
} else if (timeframe === "month") {
// For 30 days: show Mon DD
timeLabel = date.toLocaleString("en-US", {
month: "short",
day: "numeric",
})
} else {
// For 1 year: show Mon YYYY
timeLabel = date.toLocaleString("en-US", {
month: "short",
year: "numeric",
@@ -125,7 +111,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
return tick
}
const renderChart = () => {
const renderAllCharts = () => {
if (loading) {
return (
<div className="flex items-center justify-center h-[400px]">
@@ -150,17 +136,15 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
)
}
// Calculate tick interval based on data length
const tickInterval = Math.ceil(data.length / 8)
switch (metricType) {
case "cpu":
const maxCpuValue = Math.max(...data.map((d) => d.cpu || 0))
const cpuDomainMax = Math.ceil(maxCpuValue * 1.15) // 15% margin
return (
<ResponsiveContainer width="100%" height={400}>
<AreaChart data={data} margin={{ bottom: 100 }}>
<div className="space-y-8">
{/* CPU Chart */}
<div>
<h3 className="text-lg font-semibold mb-4">CPU Usage</h3>
<ResponsiveContainer width="100%" height={300}>
<AreaChart data={data} margin={{ bottom: 80 }}>
<CartesianGrid strokeDasharray="3 3" stroke="currentColor" className="text-border" />
<XAxis
dataKey="time"
@@ -169,7 +153,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
tick={{ fill: "currentColor" }}
angle={-45}
textAnchor="end"
height={80}
height={60}
interval={tickInterval}
tickFormatter={formatXAxisTick}
/>
@@ -178,8 +162,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
className="text-foreground"
tick={{ fill: "currentColor" }}
label={{ value: "%", angle: -90, position: "insideLeft", fill: "currentColor" }}
domain={[0, cpuDomainMax]}
allowDataOverflow={false}
domain={[0, (dataMax: number) => Math.ceil(dataMax * 1.15)]}
/>
<Tooltip
contentStyle={{
@@ -188,7 +171,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
borderRadius: "6px",
}}
/>
<Legend wrapperStyle={{ paddingTop: "20px" }} />
<Legend wrapperStyle={{ paddingTop: "10px" }} />
<Area
type="monotone"
dataKey="cpu"
@@ -200,15 +183,13 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
/>
</AreaChart>
</ResponsiveContainer>
)
</div>
case "memory":
const maxMemoryValue = Math.max(...data.map((d) => d.memory || 0))
const memoryDomainMax = Math.ceil(maxMemoryValue * 1.15) // 15% margin
return (
<ResponsiveContainer width="100%" height={400}>
<AreaChart data={data} margin={{ bottom: 100 }}>
{/* Memory Chart */}
<div>
<h3 className="text-lg font-semibold mb-4">Memory Usage</h3>
<ResponsiveContainer width="100%" height={300}>
<AreaChart data={data} margin={{ bottom: 80 }}>
<CartesianGrid strokeDasharray="3 3" stroke="currentColor" className="text-border" />
<XAxis
dataKey="time"
@@ -217,7 +198,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
tick={{ fill: "currentColor" }}
angle={-45}
textAnchor="end"
height={80}
height={60}
interval={tickInterval}
tickFormatter={formatXAxisTick}
/>
@@ -226,8 +207,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
className="text-foreground"
tick={{ fill: "currentColor" }}
label={{ value: "%", angle: -90, position: "insideLeft", fill: "currentColor" }}
domain={[0, memoryDomainMax]}
allowDataOverflow={false}
domain={[0, (dataMax: number) => Math.ceil(dataMax * 1.15)]}
/>
<Tooltip
contentStyle={{
@@ -236,7 +216,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
borderRadius: "6px",
}}
/>
<Legend wrapperStyle={{ paddingTop: "20px" }} />
<Legend wrapperStyle={{ paddingTop: "10px" }} />
<Area
type="monotone"
dataKey="memory"
@@ -248,15 +228,13 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
/>
</AreaChart>
</ResponsiveContainer>
)
</div>
case "network":
const maxNetworkValue = Math.max(...data.map((d) => Math.max(d.netin || 0, d.netout || 0)))
const networkDomainMax = Math.ceil(maxNetworkValue * 1.15) // 15% margin
return (
<ResponsiveContainer width="100%" height={400}>
<AreaChart data={data} margin={{ bottom: 100 }}>
{/* Disk I/O Chart */}
<div>
<h3 className="text-lg font-semibold mb-4">Disk I/O</h3>
<ResponsiveContainer width="100%" height={300}>
<AreaChart data={data} margin={{ bottom: 80 }}>
<CartesianGrid strokeDasharray="3 3" stroke="currentColor" className="text-border" />
<XAxis
dataKey="time"
@@ -265,7 +243,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
tick={{ fill: "currentColor" }}
angle={-45}
textAnchor="end"
height={80}
height={60}
interval={tickInterval}
tickFormatter={formatXAxisTick}
/>
@@ -274,8 +252,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
className="text-foreground"
tick={{ fill: "currentColor" }}
label={{ value: "MB", angle: -90, position: "insideLeft", fill: "currentColor" }}
domain={[0, networkDomainMax]}
allowDataOverflow={false}
domain={[0, (dataMax: number) => Math.ceil(dataMax * 1.15)]}
/>
<Tooltip
contentStyle={{
@@ -284,64 +261,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
borderRadius: "6px",
}}
/>
<Legend wrapperStyle={{ paddingTop: "20px" }} />
<Area
type="monotone"
dataKey="netin"
stroke="#10b981"
fill="#10b981"
fillOpacity={0.3}
strokeWidth={2}
name="Download (MB)"
/>
<Area
type="monotone"
dataKey="netout"
stroke="#3b82f6"
fill="#3b82f6"
fillOpacity={0.3}
strokeWidth={2}
name="Upload (MB)"
/>
</AreaChart>
</ResponsiveContainer>
)
case "disk":
const maxDiskValue = Math.max(...data.map((d) => Math.max(d.diskread || 0, d.diskwrite || 0)))
const diskDomainMax = Math.ceil(maxDiskValue * 1.15) // 15% margin
return (
<ResponsiveContainer width="100%" height={400}>
<AreaChart data={data} margin={{ bottom: 100 }}>
<CartesianGrid strokeDasharray="3 3" stroke="currentColor" className="text-border" />
<XAxis
dataKey="time"
stroke="currentColor"
className="text-foreground"
tick={{ fill: "currentColor" }}
angle={-45}
textAnchor="end"
height={80}
interval={tickInterval}
tickFormatter={formatXAxisTick}
/>
<YAxis
stroke="currentColor"
className="text-foreground"
tick={{ fill: "currentColor" }}
label={{ value: "MB", angle: -90, position: "insideLeft", fill: "currentColor" }}
domain={[0, diskDomainMax]}
allowDataOverflow={false}
/>
<Tooltip
contentStyle={{
backgroundColor: "hsl(var(--background))",
border: "1px solid hsl(var(--border))",
borderRadius: "6px",
}}
/>
<Legend wrapperStyle={{ paddingTop: "20px" }} />
<Legend wrapperStyle={{ paddingTop: "10px" }} />
<Area
type="monotone"
dataKey="diskread"
@@ -362,11 +282,63 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
/>
</AreaChart>
</ResponsiveContainer>
)
</div>
default:
return null
}
{/* Network I/O Chart */}
<div>
<h3 className="text-lg font-semibold mb-4">Network I/O</h3>
<ResponsiveContainer width="100%" height={300}>
<AreaChart data={data} margin={{ bottom: 80 }}>
<CartesianGrid strokeDasharray="3 3" stroke="currentColor" className="text-border" />
<XAxis
dataKey="time"
stroke="currentColor"
className="text-foreground"
tick={{ fill: "currentColor" }}
angle={-45}
textAnchor="end"
height={60}
interval={tickInterval}
tickFormatter={formatXAxisTick}
/>
<YAxis
stroke="currentColor"
className="text-foreground"
tick={{ fill: "currentColor" }}
label={{ value: "MB", angle: -90, position: "insideLeft", fill: "currentColor" }}
domain={[0, (dataMax: number) => Math.ceil(dataMax * 1.15)]}
/>
<Tooltip
contentStyle={{
backgroundColor: "hsl(var(--background))",
border: "1px solid hsl(var(--border))",
borderRadius: "6px",
}}
/>
<Legend wrapperStyle={{ paddingTop: "10px" }} />
<Area
type="monotone"
dataKey="netin"
stroke="#10b981"
fill="#10b981"
fillOpacity={0.3}
strokeWidth={2}
name="Download (MB)"
/>
<Area
type="monotone"
dataKey="netout"
stroke="#3b82f6"
fill="#3b82f6"
fillOpacity={0.3}
strokeWidth={2}
name="Upload (MB)"
/>
</AreaChart>
</ResponsiveContainer>
</div>
</div>
)
}
return (
@@ -379,9 +351,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
<ArrowLeft className="h-5 w-5" />
</Button>
<div>
<h2 className="text-xl font-semibold">
{METRIC_TITLES[metricType]} - {vmName}
</h2>
<h2 className="text-xl font-semibold">Metrics - {vmName}</h2>
<p className="text-sm text-muted-foreground mt-1">
VMID: {vmid} • Type: {vmType.toUpperCase()}
</p>
@@ -402,8 +372,8 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
</div>
</div>
{/* Scrollable Content */}
<div className="flex-1 overflow-y-auto p-6">{renderChart()}</div>
{/* Scrollable Content with all charts */}
<div className="flex-1 overflow-y-auto p-6">{renderAllCharts()}</div>
</div>
)
}

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

@@ -1,5 +1,7 @@
"use client"
import type React from "react"
import { useState, useMemo, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
import { Badge } from "./ui/badge"
@@ -170,6 +172,30 @@ const getModalProgressColor = (percent: number): string => {
return "[&>div]:bg-blue-500"
}
// Placeholder for the undeclared getOSIcon function
const getOSIcon = (ostype: string | undefined, vmType: string): React.ReactNode => {
if (vmType === "lxc") {
return <Container className="h-16 w-16 text-cyan-500" />
}
switch (ostype) {
case "debian":
return <img src="/icons/debian.svg" alt="Debian" className="h-16 w-16" />
case "ubuntu":
return <img src="/icons/ubuntu.svg" alt="Ubuntu" className="h-16 w-16" />
case "centos":
return <img src="/icons/centos.svg" alt="CentOS" className="h-16 w-16" />
case "fedora":
return <img src="/icons/fedora.svg" alt="Fedora" className="h-16 w-16" />
case "windows":
return <img src="/icons/windows.svg" alt="Windows" className="h-16 w-16" />
case "alpine":
return <img src="/icons/alpine.svg" alt="Alpine" className="h-16 w-16" />
default:
return <Server className="h-16 w-16 text-purple-500" />
}
}
export function VirtualMachines() {
const {
data: vmData,
@@ -188,8 +214,8 @@ export function VirtualMachines() {
const [detailsLoading, setDetailsLoading] = useState(false)
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 [showAdditionalInfo, setShowAdditionalInfo] = useState(false)
const [selectedMetric, setSelectedMetric] = useState<string | null>(null) // undeclared variable fix
useEffect(() => {
const fetchLXCIPs = async () => {
@@ -223,7 +249,6 @@ export function VirtualMachines() {
const handleVMClick = async (vm: VMData) => {
setSelectedVM(vm)
setCurrentView("main")
setSelectedMetric(null)
setShowAdditionalInfo(false)
setDetailsLoading(true)
try {
@@ -239,14 +264,12 @@ export function VirtualMachines() {
}
}
const handleMetricClick = (metric: "cpu" | "memory" | "disk" | "network") => {
setSelectedMetric(metric)
const handleMetricsClick = () => {
setCurrentView("metrics")
}
const handleBackToMain = () => {
setCurrentView("main")
setSelectedMetric(null)
}
const handleVMControl = async (vmid: number, action: string) => {
@@ -562,7 +585,7 @@ export function VirtualMachines() {
<div
className="cursor-pointer hover:opacity-80 transition-opacity"
onClick={() => {
setSelectedMetric("cpu")
setSelectedMetric("cpu") // undeclared variable fix
}}
>
<div
@@ -789,79 +812,44 @@ export function VirtualMachines() {
<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-3">
{/* CPU Usage Card */}
<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
className="cursor-pointer hover:opacity-80 transition-opacity"
onClick={() => handleMetricClick("cpu")}
<Card
className="border border-border bg-card/50 cursor-pointer hover:bg-card/70 transition-colors"
onClick={handleMetricsClick}
>
<div className={`font-semibold mb-2 ${getUsageColor(selectedVM.cpu * 100)}`}>
<CardContent className="p-4">
<div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
{/* CPU Usage */}
<div>
<div className="text-xs text-muted-foreground mb-2">CPU Usage</div>
<div className={`text-2xl font-semibold mb-2 ${getUsageColor(selectedVM.cpu * 100)}`}>
{(selectedVM.cpu * 100).toFixed(1)}%
</div>
<Progress
value={selectedVM.cpu * 100}
className={`h-1.5 ${getModalProgressColor(selectedVM.cpu * 100)}`}
className={`h-2 ${getModalProgressColor(selectedVM.cpu * 100)}`}
/>
</div>
</CardContent>
</Card>
{/* Memory Card */}
<Card className="border border-border bg-card/50">
<CardContent className="p-3">
{/* Memory */}
<div>
<div className="text-xs text-muted-foreground mb-2">Memory</div>
<div
className="cursor-pointer hover:opacity-80 transition-opacity"
onClick={() => handleMetricClick("memory")}
>
<div
className={`font-semibold mb-2 ${getUsageColor((selectedVM.mem / selectedVM.maxmem) * 100)}`}
className={`text-2xl font-semibold mb-2 ${getUsageColor((selectedVM.mem / selectedVM.maxmem) * 100)}`}
>
{(selectedVM.mem / 1024 ** 3).toFixed(1)} /{" "}
{(selectedVM.maxmem / 1024 ** 3).toFixed(1)} GB
</div>
<Progress
value={(selectedVM.mem / selectedVM.maxmem) * 100}
className={`h-1.5 ${getModalProgressColor((selectedVM.mem / selectedVM.maxmem) * 100)}`}
className={`h-2 ${getModalProgressColor((selectedVM.mem / selectedVM.maxmem) * 100)}`}
/>
</div>
</CardContent>
</Card>
{/* 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
className="cursor-pointer hover:opacity-80 transition-opacity"
onClick={() => handleMetricClick("disk")}
>
<div
className={`font-semibold mb-2 ${getUsageColor((selectedVM.disk / selectedVM.maxdisk) * 100)}`}
>
{(selectedVM.disk / 1024 ** 3).toFixed(1)} /{" "}
{(selectedVM.maxdisk / 1024 ** 3).toFixed(1)} GB
</div>
<Progress
value={(selectedVM.disk / selectedVM.maxdisk) * 100}
className={`h-1.5 ${getModalProgressColor((selectedVM.disk / selectedVM.maxdisk) * 100)}`}
/>
</div>
</CardContent>
</Card>
{/* Disk I/O Card */}
<Card className="border border-border bg-card/50">
<CardContent className="p-3">
{/* Disk I/O */}
<div>
<div className="text-xs text-muted-foreground mb-2">Disk I/O</div>
<div
className="cursor-pointer hover:opacity-80 transition-opacity"
onClick={() => handleMetricClick("disk")}
>
<div className="text-sm text-green-500 flex items-center gap-1 mb-1">
<div className="space-y-1">
<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>
@@ -870,18 +858,13 @@ export function VirtualMachines() {
<span>{((selectedVM.diskwrite || 0) / 1024 ** 2).toFixed(2)} MB</span>
</div>
</div>
</CardContent>
</Card>
</div>
{/* Network I/O Card */}
<Card className="border border-border bg-card/50">
<CardContent className="p-3">
{/* Network I/O */}
<div>
<div className="text-xs text-muted-foreground mb-2">Network I/O</div>
<div
className="cursor-pointer hover:opacity-80 transition-opacity"
onClick={() => handleMetricClick("network")}
>
<div className="text-sm text-green-500 flex items-center gap-1 mb-1">
<div className="space-y-1">
<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>
@@ -890,11 +873,18 @@ export function VirtualMachines() {
<span>{((selectedVM.netout || 0) / 1024 ** 2).toFixed(2)} MB</span>
</div>
</div>
</div>
{/* OS Icon / VM Icon */}
<div className="flex items-center justify-center col-span-2 lg:col-span-1">
{getOSIcon(vmDetails?.config?.ostype, selectedVM.type)} {/* undeclared variable fix */}
</div>
</div>
</CardContent>
</Card>
</div>
</div>
{/* ... existing RESOURCES card and additional info ... */}
{detailsLoading ? (
<div className="text-center py-8 text-muted-foreground">Loading configuration...</div>
) : vmDetails?.config ? (
@@ -1140,13 +1130,12 @@ export function VirtualMachines() {
</div>
</>
) : (
selectedVM &&
selectedMetric && (
selectedVM && (
// Pass only vmid, vmName, vmType and onBack
<MetricsView
vmid={selectedVM.vmid}
vmName={selectedVM.name}
vmType={selectedVM.type as "qemu" | "lxc"}
metricType={selectedMetric}
onBack={handleBackToMain}
/>
)