mirror of
https://github.com/MacRimi/ProxMenux.git
synced 2025-11-18 19:46:18 +00:00
Update AppImage
This commit is contained in:
MacRimi
@@ -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 }}>
|
||||
return (
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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,112 +812,79 @@ 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")}
|
||||
>
|
||||
<div className={`font-semibold mb-2 ${getUsageColor(selectedVM.cpu * 100)}`}>
|
||||
<Card
|
||||
className="border border-border bg-card/50 cursor-pointer hover:bg-card/70 transition-colors"
|
||||
onClick={handleMetricsClick}
|
||||
>
|
||||
<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">
|
||||
<div className="text-xs text-muted-foreground mb-2">Memory</div>
|
||||
<div
|
||||
className="cursor-pointer hover:opacity-80 transition-opacity"
|
||||
onClick={() => handleMetricClick("memory")}
|
||||
>
|
||||
{/* Memory */}
|
||||
<div>
|
||||
<div className="text-xs text-muted-foreground mb-2">Memory</div>
|
||||
<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">
|
||||
<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">
|
||||
<span>↓</span>
|
||||
<span>{((selectedVM.diskread || 0) / 1024 ** 2).toFixed(2)} MB</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>
|
||||
{/* Disk I/O */}
|
||||
<div>
|
||||
<div className="text-xs text-muted-foreground mb-2">Disk I/O</div>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 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
|
||||
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">
|
||||
<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>
|
||||
{/* Network I/O */}
|
||||
<div>
|
||||
<div className="text-xs text-muted-foreground mb-2">Network I/O</div>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
|
||||
{/* ... 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}
|
||||
/>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user