From 96bb72eb99ae2dc5a9ef0c96b72078b487826d09 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Sat, 1 Feb 2025 19:27:10 -0600
Subject: [PATCH 1/2] refactor: update docker stats
---
.../monitoring/docker/docker-block-chart.tsx | 8 +-
.../monitoring/docker/docker-cpu-chart.tsx | 6 +-
.../monitoring/docker/docker-memory-chart.tsx | 11 +-
.../docker/docker-network-chart.tsx | 12 +-
.../dashboard/monitoring/docker/show.tsx | 58 +++++----
apps/dokploy/server/wss/docker-stats.ts | 15 ++-
packages/server/src/index.ts | 2 +-
.../src/monitoring/{utilts.ts => utils.ts} | 112 +++---------------
packages/server/src/services/application.ts | 2 +-
9 files changed, 92 insertions(+), 134 deletions(-)
rename packages/server/src/monitoring/{utilts.ts => utils.ts} (53%)
diff --git a/apps/dokploy/components/dashboard/monitoring/docker/docker-block-chart.tsx b/apps/dokploy/components/dashboard/monitoring/docker/docker-block-chart.tsx
index 57a3cbe22..790bf0211 100644
--- a/apps/dokploy/components/dashboard/monitoring/docker/docker-block-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/docker/docker-block-chart.tsx
@@ -90,9 +90,11 @@ const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
if (active && payload && payload.length && payload[0]) {
return (
-
{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}
-
{`Read ${payload[0].payload.readMb.toFixed(2)} MB`}
-
{`Write: ${payload[0].payload.writeMb.toFixed(3)} MB`}
+ {payload[0].payload.time && (
+
{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}
+ )}
+
{`Read ${payload[0].payload.readMb} `}
+
{`Write: ${payload[0].payload.writeMb} `}
);
}
diff --git a/apps/dokploy/components/dashboard/monitoring/docker/docker-cpu-chart.tsx b/apps/dokploy/components/dashboard/monitoring/docker/docker-cpu-chart.tsx
index 41f20f8f1..163556232 100644
--- a/apps/dokploy/components/dashboard/monitoring/docker/docker-cpu-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/docker/docker-cpu-chart.tsx
@@ -19,7 +19,7 @@ export const DockerCpuChart = ({ acummulativeData }: Props) => {
return {
name: `Point ${index + 1}`,
time: item.time,
- usage: item.value.toFixed(2),
+ usage: item.value.toString().split("%")[0],
};
});
return (
@@ -75,7 +75,9 @@ const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
if (active && payload && payload.length && payload[0]) {
return (
-
{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}
+ {payload[0].payload.time && (
+
{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}
+ )}
{`CPU Usage: ${payload[0].payload.usage}%`}
);
diff --git a/apps/dokploy/components/dashboard/monitoring/docker/docker-memory-chart.tsx b/apps/dokploy/components/dashboard/monitoring/docker/docker-memory-chart.tsx
index 36f1edb81..f98e01e17 100644
--- a/apps/dokploy/components/dashboard/monitoring/docker/docker-memory-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/docker/docker-memory-chart.tsx
@@ -9,6 +9,7 @@ import {
YAxis,
} from "recharts";
import type { DockerStatsJSON } from "./show";
+import { convertMemoryToBytes } from "./show";
interface Props {
acummulativeData: DockerStatsJSON["memory"];
@@ -23,7 +24,8 @@ export const DockerMemoryChart = ({
return {
time: item.time,
name: `Point ${index + 1}`,
- usage: (item.value.used / 1024 ** 3).toFixed(2),
+ // @ts-ignore
+ usage: (convertMemoryToBytes(item.value.used) / 1024 ** 3).toFixed(2),
};
});
return (
@@ -75,10 +77,13 @@ interface CustomTooltipProps {
}
const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
- if (active && payload && payload.length && payload[0]) {
+ if (active && payload && payload.length && payload[0] && payload[0].payload) {
return (
-
{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}
+ {payload[0].payload.time && (
+
{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}
+ )}
+
{`Memory usage: ${payload[0].payload.usage} GB`}
);
diff --git a/apps/dokploy/components/dashboard/monitoring/docker/docker-network-chart.tsx b/apps/dokploy/components/dashboard/monitoring/docker/docker-network-chart.tsx
index b522603d8..58cd24002 100644
--- a/apps/dokploy/components/dashboard/monitoring/docker/docker-network-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/docker/docker-network-chart.tsx
@@ -19,8 +19,8 @@ export const DockerNetworkChart = ({ acummulativeData }: Props) => {
return {
time: item.time,
name: `Point ${index + 1}`,
- inMB: item.value.inputMb.toFixed(2),
- outMB: item.value.outputMb.toFixed(2),
+ inMB: item.value.inputMb,
+ outMB: item.value.outputMb,
};
});
return (
@@ -86,9 +86,11 @@ const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
if (active && payload && payload.length && payload[0]) {
return (
-
{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}
-
{`In MB Usage: ${payload[0].payload.inMB} MB`}
-
{`Out MB Usage: ${payload[0].payload.outMB} MB`}
+ {payload[0].payload.time && (
+
{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}
+ )}
+
{`In Usage: ${payload[0].payload.inMB} `}
+
{`Out Usage: ${payload[0].payload.outMB} `}
);
}
diff --git a/apps/dokploy/components/dashboard/monitoring/docker/show.tsx b/apps/dokploy/components/dashboard/monitoring/docker/show.tsx
index a457f35e6..d2513b70f 100644
--- a/apps/dokploy/components/dashboard/monitoring/docker/show.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/docker/show.tsx
@@ -22,8 +22,6 @@ const defaultData = {
memory: {
value: {
used: 0,
- free: 0,
- usedPercentage: 0,
total: 0,
},
time: "",
@@ -60,8 +58,6 @@ export interface DockerStats {
memory: {
value: {
used: number;
- free: number;
- usedPercentage: number;
total: number;
};
time: string;
@@ -100,6 +96,30 @@ export type DockerStatsJSON = {
disk: DockerStats["disk"][];
};
+export const convertMemoryToBytes = (
+ memoryString: string | undefined,
+): number => {
+ if (!memoryString || typeof memoryString !== "string") {
+ return 0;
+ }
+
+ const value = Number.parseFloat(memoryString) || 0;
+ const unit = memoryString.replace(/[0-9.]/g, "").trim();
+
+ switch (unit) {
+ case "KiB":
+ return value * 1024;
+ case "MiB":
+ return value * 1024 * 1024;
+ case "GiB":
+ return value * 1024 * 1024 * 1024;
+ case "TiB":
+ return value * 1024 * 1024 * 1024 * 1024;
+ default:
+ return value;
+ }
+};
+
export const DockerMonitoring = ({
appName,
appType = "application",
@@ -208,7 +228,7 @@ export const DockerMonitoring = ({
- Used: {currentData.cpu.value.toFixed(2)}%
+ Used: {currentData.cpu.value}%