mirror of
https://github.com/andwati/dokploy.git
synced 2026-10-18 03:02:56 +00:00
fix: correct network monitoring chart labels and units
Network chart showed values labeled as KB/s, but the underlying data is MB totals accumulated since boot. Convert to GB and relabel as Network Total (since Boot). Fixes #5115
This commit is contained in:
@@ -19,6 +19,11 @@ interface NetworkChartProps {
|
|||||||
data: any[];
|
data: any[];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function formatNetworkGB(valueInMB: number) {
|
||||||
|
if (Number.isNaN(valueInMB)) return "0";
|
||||||
|
return (valueInMB / 1024).toFixed(1);
|
||||||
|
}
|
||||||
|
|
||||||
const chartConfig = {
|
const chartConfig = {
|
||||||
networkIn: {
|
networkIn: {
|
||||||
label: "Network In",
|
label: "Network In",
|
||||||
@@ -38,8 +43,8 @@ export function NetworkChart({ data }: NetworkChartProps) {
|
|||||||
<CardHeader className="border-b py-5">
|
<CardHeader className="border-b py-5">
|
||||||
<CardTitle>Network</CardTitle>
|
<CardTitle>Network</CardTitle>
|
||||||
<CardDescription>
|
<CardDescription>
|
||||||
Network Traffic: ↑ {latestData.networkOut} KB/s ↓{" "}
|
Network Total: ↑ {formatNetworkGB(latestData.networkOut)} GB ↓{" "}
|
||||||
{latestData.networkIn} KB/s
|
{formatNetworkGB(latestData.networkIn)} GB (since Boot)
|
||||||
</CardDescription>
|
</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
|
<CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
|
||||||
@@ -83,7 +88,7 @@ export function NetworkChart({ data }: NetworkChartProps) {
|
|||||||
minTickGap={32}
|
minTickGap={32}
|
||||||
tickFormatter={(value) => formatTimestamp(value)}
|
tickFormatter={(value) => formatTimestamp(value)}
|
||||||
/>
|
/>
|
||||||
<YAxis tickFormatter={(value) => `${value} KB/s`} />
|
<YAxis tickFormatter={(value) => `${formatNetworkGB(value)} GB`} />
|
||||||
<ChartTooltip
|
<ChartTooltip
|
||||||
cursor={false}
|
cursor={false}
|
||||||
content={({ active, payload, label }) => {
|
content={({ active, payload, label }) => {
|
||||||
@@ -105,8 +110,8 @@ export function NetworkChart({ data }: NetworkChartProps) {
|
|||||||
Network
|
Network
|
||||||
</span>
|
</span>
|
||||||
<span className="font-bold">
|
<span className="font-bold">
|
||||||
↑ {data.networkOut} KB/s
|
↑ {formatNetworkGB(data.networkOut)} GB
|
||||||
<br />↓ {data.networkIn} KB/s
|
<br />↓ {formatNetworkGB(data.networkIn)} GB
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user