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

Browse Source
This commit is contained in:
MacRimi
2025-10-20 19:40:59 +02:00
parent 7001f97d96
commit 178abc77ce
1 changed files with 20 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -167,7 +167,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
case "cpu": case "cpu":
return ( return (
<ResponsiveContainer width="100%" height={400}> <ResponsiveContainer width="100%" height={400}>
<AreaChart data={data} margin={{ bottom: 70 }}> <AreaChart data={data} margin={{ bottom: 100 }}>
<CartesianGrid strokeDasharray="3 3" stroke="currentColor" className="text-border" /> <CartesianGrid strokeDasharray="3 3" stroke="currentColor" className="text-border" />
<XAxis <XAxis
dataKey="time" dataKey="time"
@@ -202,7 +202,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
borderRadius: "6px", borderRadius: "6px",
}} }}
/> />
<Legend /> <Legend wrapperStyle={{ paddingTop: "20px" }} />
<Area <Area
type="monotone" type="monotone"
dataKey="cpu" dataKey="cpu"
@@ -219,7 +219,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
case "memory": case "memory":
return ( return (
<ResponsiveContainer width="100%" height={400}> <ResponsiveContainer width="100%" height={400}>
<AreaChart data={data} margin={{ bottom: 70 }}> <AreaChart data={data} margin={{ bottom: 100 }}>
<CartesianGrid strokeDasharray="3 3" stroke="currentColor" className="text-border" /> <CartesianGrid strokeDasharray="3 3" stroke="currentColor" className="text-border" />
<XAxis <XAxis
dataKey="time" dataKey="time"
@@ -254,7 +254,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
borderRadius: "6px", borderRadius: "6px",
}} }}
/> />
<Legend /> <Legend wrapperStyle={{ paddingTop: "20px" }} />
<Area <Area
type="monotone" type="monotone"
dataKey="memory" dataKey="memory"
@@ -269,9 +269,14 @@ 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 networkPercentMargin = Math.ceil(maxNetworkValue * 1.1)
const networkFixedMargin = maxNetworkValue + 5
const networkDomainMax = Math.max(networkPercentMargin, networkFixedMargin, 10)
return ( return (
<ResponsiveContainer width="100%" height={400}> <ResponsiveContainer width="100%" height={400}>
<AreaChart data={data} margin={{ bottom: 70 }}> <AreaChart data={data} margin={{ bottom: 100 }}>
<CartesianGrid strokeDasharray="3 3" stroke="currentColor" className="text-border" /> <CartesianGrid strokeDasharray="3 3" stroke="currentColor" className="text-border" />
<XAxis <XAxis
dataKey="time" dataKey="time"
@@ -289,14 +294,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
className="text-foreground" className="text-foreground"
tick={{ fill: "currentColor" }} tick={{ fill: "currentColor" }}
label={{ value: "MB", angle: -90, position: "insideLeft", fill: "currentColor" }} label={{ value: "MB", angle: -90, position: "insideLeft", fill: "currentColor" }}
domain={[ domain={[0, networkDomainMax]}
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
@@ -306,7 +304,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
borderRadius: "6px", borderRadius: "6px",
}} }}
/> />
<Legend /> <Legend wrapperStyle={{ paddingTop: "20px" }} />
<Area <Area
type="monotone" type="monotone"
dataKey="netin" dataKey="netin"
@@ -330,9 +328,14 @@ 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 diskPercentMargin = Math.ceil(maxDiskValue * 1.1)
const diskFixedMargin = maxDiskValue + 5
const diskDomainMax = Math.max(diskPercentMargin, diskFixedMargin, 10)
return ( return (
<ResponsiveContainer width="100%" height={400}> <ResponsiveContainer width="100%" height={400}>
<AreaChart data={data} margin={{ bottom: 70 }}> <AreaChart data={data} margin={{ bottom: 100 }}>
<CartesianGrid strokeDasharray="3 3" stroke="currentColor" className="text-border" /> <CartesianGrid strokeDasharray="3 3" stroke="currentColor" className="text-border" />
<XAxis <XAxis
dataKey="time" dataKey="time"
@@ -350,14 +353,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
className="text-foreground" className="text-foreground"
tick={{ fill: "currentColor" }} tick={{ fill: "currentColor" }}
label={{ value: "MB", angle: -90, position: "insideLeft", fill: "currentColor" }} label={{ value: "MB", angle: -90, position: "insideLeft", fill: "currentColor" }}
domain={[ domain={[0, diskDomainMax]}
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
@@ -367,7 +363,7 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
borderRadius: "6px", borderRadius: "6px",
}} }}
/> />
<Legend /> <Legend wrapperStyle={{ paddingTop: "20px" }} />
<Area <Area
type="monotone" type="monotone"
dataKey="diskread" dataKey="diskread"