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 metrics-dialog.tsx

Browse Source
This commit is contained in:
MacRimi
2025-10-20 20:00:29 +02:00
parent 178abc77ce
commit fee0d0aed9
1 changed files with 18 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -110,14 +110,14 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
return { return {
time: timeLabel, time: timeLabel,
timestamp: item.time, timestamp: item.time,
cpu: item.cpu ? (item.cpu * 100).toFixed(2) : 0, cpu: item.cpu ? Number((item.cpu * 100).toFixed(2)) : 0,
memory: item.mem ? ((item.mem / item.maxmem) * 100).toFixed(2) : 0, memory: item.mem ? Number(((item.mem / item.maxmem) * 100).toFixed(2)) : 0,
memoryMB: item.mem ? (item.mem / 1024 / 1024).toFixed(0) : 0, memoryMB: item.mem ? Number((item.mem / 1024 / 1024).toFixed(0)) : 0,
maxMemoryMB: item.maxmem ? (item.maxmem / 1024 / 1024).toFixed(0) : 0, maxMemoryMB: item.maxmem ? Number((item.maxmem / 1024 / 1024).toFixed(0)) : 0,
netin: item.netin ? (item.netin / 1024 / 1024).toFixed(2) : 0, netin: item.netin ? Number((item.netin / 1024 / 1024).toFixed(2)) : 0,
netout: item.netout ? (item.netout / 1024 / 1024).toFixed(2) : 0, netout: item.netout ? Number((item.netout / 1024 / 1024).toFixed(2)) : 0,
diskread: item.diskread ? (item.diskread / 1024 / 1024).toFixed(2) : 0, diskread: item.diskread ? Number((item.diskread / 1024 / 1024).toFixed(2)) : 0,
diskwrite: item.diskwrite ? (item.diskwrite / 1024 / 1024).toFixed(2) : 0, diskwrite: item.diskwrite ? Number((item.diskwrite / 1024 / 1024).toFixed(2)) : 0,
} }
}) })
@@ -165,6 +165,9 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
switch (metricType) { switch (metricType) {
case "cpu": case "cpu":
const maxCpuValue = Math.max(...data.map((d) => d.cpu || 0))
const cpuDomainMax = Math.ceil(maxCpuValue * 1.15) // 15% margin
return ( return (
<ResponsiveContainer width="100%" height={400}> <ResponsiveContainer width="100%" height={400}>
<AreaChart data={data} margin={{ bottom: 100 }}> <AreaChart data={data} margin={{ bottom: 100 }}>
@@ -185,14 +188,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
className="text-foreground" className="text-foreground"
tick={{ fill: "currentColor" }} tick={{ fill: "currentColor" }}
label={{ value: "%", angle: -90, position: "insideLeft", fill: "currentColor" }} label={{ value: "%", angle: -90, position: "insideLeft", fill: "currentColor" }}
domain={[ domain={[0, cpuDomainMax]}
0,
(dataMax: number) => {
const percentMargin = Math.ceil(dataMax * 1.1)
const fixedMargin = dataMax + 5
return Math.max(percentMargin, fixedMargin, 10)
},
]}
allowDataOverflow={false} allowDataOverflow={false}
/> />
<Tooltip <Tooltip
@@ -217,6 +213,9 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
) )
case "memory": case "memory":
const maxMemoryValue = Math.max(...data.map((d) => d.memory || 0))
const memoryDomainMax = Math.ceil(maxMemoryValue * 1.15) // 15% margin
return ( return (
<ResponsiveContainer width="100%" height={400}> <ResponsiveContainer width="100%" height={400}>
<AreaChart data={data} margin={{ bottom: 100 }}> <AreaChart data={data} margin={{ bottom: 100 }}>
@@ -237,14 +236,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
className="text-foreground" className="text-foreground"
tick={{ fill: "currentColor" }} tick={{ fill: "currentColor" }}
label={{ value: "%", angle: -90, position: "insideLeft", fill: "currentColor" }} label={{ value: "%", angle: -90, position: "insideLeft", fill: "currentColor" }}
domain={[ domain={[0, memoryDomainMax]}
0,
(dataMax: number) => {
const percentMargin = Math.ceil(dataMax * 1.1)
const fixedMargin = dataMax + 5
return Math.max(percentMargin, fixedMargin, 10)
},
]}
allowDataOverflow={false} allowDataOverflow={false}
/> />
<Tooltip <Tooltip
@@ -270,9 +262,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
case "network": case "network":
const maxNetworkValue = Math.max(...data.map((d) => Math.max(d.netin || 0, d.netout || 0))) const maxNetworkValue = Math.max(...data.map((d) => Math.max(d.netin || 0, d.netout || 0)))
const networkPercentMargin = Math.ceil(maxNetworkValue * 1.1) const networkDomainMax = Math.ceil(maxNetworkValue * 1.15) // 15% margin
const networkFixedMargin = maxNetworkValue + 5
const networkDomainMax = Math.max(networkPercentMargin, networkFixedMargin, 10)
return ( return (
<ResponsiveContainer width="100%" height={400}> <ResponsiveContainer width="100%" height={400}>
@@ -329,9 +319,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
case "disk": case "disk":
const maxDiskValue = Math.max(...data.map((d) => Math.max(d.diskread || 0, d.diskwrite || 0))) const maxDiskValue = Math.max(...data.map((d) => Math.max(d.diskread || 0, d.diskwrite || 0)))
const diskPercentMargin = Math.ceil(maxDiskValue * 1.1) const diskDomainMax = Math.ceil(maxDiskValue * 1.15) // 15% margin
const diskFixedMargin = maxDiskValue + 5
const diskDomainMax = Math.max(diskPercentMargin, diskFixedMargin, 10)
return ( return (
<ResponsiveContainer width="100%" height={400}> <ResponsiveContainer width="100%" height={400}>