refactor: add free metrics

Dokploy · Jan 12, 2025 · ebb7da0 · ebb7da0
1 parent 8097ea7
commit ebb7da0
Show file tree

Hide file tree

Showing 26 changed files with 5,608 additions and 594 deletions.
diff --git a/apps/dokploy/components/dashboard/compose/monitoring/show.tsx b/apps/dokploy/components/dashboard/compose/monitoring/show.tsx
@@ -20,7 +20,7 @@ import { api } from "@/utils/api";
 import { Loader2 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
-import { ContainerMonitoring } from "../../monitoring/container/show";
+import { ContainerMonitoring } from "../../monitoring/paid/container/show-paid-container-monitoring";
 
 interface Props {
 	appName: string;

diff --git a/apps/dokploy/components/dashboard/monitoring/free/container/docker-block-chart.tsx b/apps/dokploy/components/dashboard/monitoring/free/container/docker-block-chart.tsx
@@ -0,0 +1,101 @@
+import { format } from "date-fns";
+import {
+	Area,
+	AreaChart,
+	CartesianGrid,
+	Legend,
+	ResponsiveContainer,
+	Tooltip,
+	YAxis,
+} from "recharts";
+import type { DockerStatsJSON } from "./show";
+
+interface Props {
+	acummulativeData: DockerStatsJSON["block"];
+}
+
+export const DockerBlockChart = ({ acummulativeData }: Props) => {
+	const transformedData = acummulativeData.map((item, index) => {
+		return {
+			time: item.time,
+			name: `Point ${index + 1}`,
+			readMb: item.value.readMb,
+			writeMb: item.value.writeMb,
+		};
+	});
+
+	return (
+		<div className="mt-6 w-full h-[10rem]">
+			<ResponsiveContainer>
+				<AreaChart
+					data={transformedData}
+					margin={{
+						top: 10,
+						right: 30,
+						left: 0,
+						bottom: 0,
+					}}
+				>
+					<defs>
+						<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
+							<stop offset="5%" stopColor="#27272A" stopOpacity={0.8} />
+							<stop offset="95%" stopColor="#8884d8" stopOpacity={0} />
+						</linearGradient>
+						<linearGradient id="colorWrite" x1="0" y1="0" x2="0" y2="1">
+							<stop offset="5%" stopColor="#82ca9d" stopOpacity={0.8} />
+							<stop offset="95%" stopColor="#82ca9d" stopOpacity={0} />
+						</linearGradient>
+					</defs>
+					<YAxis stroke="#A1A1AA" />
+					<CartesianGrid strokeDasharray="3 3" stroke="#27272A" />
+					{/* @ts-ignore */}
+					<Tooltip content={<CustomTooltip />} />
+					<Legend />
+					<Area
+						type="monotone"
+						dataKey="readMb"
+						stroke="#27272A"
+						fillOpacity={1}
+						fill="url(#colorUv)"
+						name="Read Mb"
+					/>
+					<Area
+						type="monotone"
+						dataKey="writeMb"
+						stroke="#82ca9d"
+						fillOpacity={1}
+						fill="url(#colorWrite)"
+						name="Write Mb"
+					/>
+				</AreaChart>
+			</ResponsiveContainer>
+		</div>
+	);
+};
+interface CustomTooltipProps {
+	active: boolean;
+	payload?: {
+		color?: string;
+		dataKey?: string;
+		value?: number;
+		payload: {
+			time: string;
+			readMb: number;
+			writeMb: number;
+		};
+	}[];
+}
+
+const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
+	if (active && payload && payload.length && payload[0]) {
+		return (
+			<div className="custom-tooltip bg-background p-2 shadow-lg rounded-md text-primary border">
+				<p>{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}</p>
+				<p>{`Read ${payload[0].payload.readMb.toFixed(2)} MB`}</p>
+				<p>{`Write: ${payload[0].payload.writeMb.toFixed(3)} MB`}</p>
+			</div>
+		);
+	}
+
+	return null;
+};
diff --git a/apps/dokploy/components/dashboard/monitoring/free/container/docker-cpu-chart.tsx b/apps/dokploy/components/dashboard/monitoring/free/container/docker-cpu-chart.tsx
@@ -0,0 +1,85 @@
+import { format } from "date-fns";
+import {
+	Area,
+	AreaChart,
+	CartesianGrid,
+	Legend,
+	ResponsiveContainer,
+	Tooltip,
+	YAxis,
+} from "recharts";
+import type { DockerStatsJSON } from "./show";
+
+interface Props {
+	acummulativeData: DockerStatsJSON["cpu"];
+}
+
+export const DockerCpuChart = ({ acummulativeData }: Props) => {
+	const transformedData = acummulativeData.map((item, index) => {
+		return {
+			name: `Point ${index + 1}`,
+			time: item.time,
+			usage: item.value.toFixed(2),
+		};
+	});
+	return (
+		<div className="mt-6 w-full h-[10rem]">
+			<ResponsiveContainer>
+				<AreaChart
+					data={transformedData}
+					margin={{
+						top: 10,
+						right: 30,
+						left: 0,
+						bottom: 0,
+					}}
+				>
+					<defs>
+						<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
+							<stop offset="5%" stopColor="#27272A" stopOpacity={0.8} />
+							<stop offset="95%" stopColor="white" stopOpacity={0} />
+						</linearGradient>
+					</defs>
+					<YAxis stroke="#A1A1AA" domain={[0, 100]} />
+					<CartesianGrid strokeDasharray="3 3" stroke="#27272A" />
+					{/* @ts-ignore */}
+					<Tooltip content={<CustomTooltip />} />
+					<Legend />
+					<Area
+						type="monotone"
+						dataKey="usage"
+						stroke="#27272A"
+						fillOpacity={1}
+						fill="url(#colorUv)"
+					/>
+				</AreaChart>
+			</ResponsiveContainer>
+		</div>
+	);
+};
+
+interface CustomTooltipProps {
+	active: boolean;
+	payload?: {
+		color?: string;
+		dataKey?: string;
+		value?: number;
+		payload: {
+			time: string;
+			usage: number;
+		};
+	}[];
+}
+
+const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
+	if (active && payload && payload.length && payload[0]) {
+		return (
+			<div className="custom-tooltip bg-background p-2 shadow-lg rounded-md text-primary border">
+				<p>{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}</p>
+				<p>{`CPU Usage: ${payload[0].payload.usage}%`}</p>
+			</div>
+		);
+	}
+
+	return null;
+};
diff --git a/apps/dokploy/components/dashboard/monitoring/free/container/docker-disk-chart.tsx b/apps/dokploy/components/dashboard/monitoring/free/container/docker-disk-chart.tsx
@@ -0,0 +1,105 @@
+import { format } from "date-fns";
+import {
+	Area,
+	AreaChart,
+	CartesianGrid,
+	Legend,
+	ResponsiveContainer,
+	Tooltip,
+	YAxis,
+} from "recharts";
+import type { DockerStatsJSON } from "./show";
+
+interface Props {
+	acummulativeData: DockerStatsJSON["disk"];
+	diskTotal: number;
+}
+
+export const DockerDiskChart = ({ acummulativeData, diskTotal }: Props) => {
+	const transformedData = acummulativeData.map((item, index) => {
+		return {
+			time: item.time,
+			name: `Point ${index + 1}`,
+			usedGb: +item.value.diskUsage,
+			totalGb: +item.value.diskTotal,
+			freeGb: item.value.diskFree,
+		};
+	});
+
+	return (
+		<div className="mt-6 w-full h-[10rem]">
+			<ResponsiveContainer>
+				<AreaChart
+					data={transformedData}
+					margin={{
+						top: 10,
+						right: 30,
+						left: 0,
+						bottom: 0,
+					}}
+				>
+					<defs>
+						<linearGradient id="colorUsed" x1="0" y1="0" x2="0" y2="1">
+							<stop offset="5%" stopColor="#6C28D9" stopOpacity={0.8} />
+							<stop offset="95%" stopColor="#6C28D9" stopOpacity={0} />
+						</linearGradient>
+						<linearGradient id="colorFree" x1="0" y1="0" x2="0" y2="1">
+							<stop offset="5%" stopColor="#6C28D9" stopOpacity={0.2} />
+							<stop offset="95%" stopColor="#6C28D9" stopOpacity={0} />
+						</linearGradient>
+					</defs>
+					<YAxis stroke="#A1A1AA" domain={[0, diskTotal]} />
+					<CartesianGrid strokeDasharray="3 3" stroke="#27272A" />
+					{/* @ts-ignore */}
+					<Tooltip content={<CustomTooltip />} />
+					<Legend />
+					<Area
+						type="monotone"
+						dataKey="usedGb"
+						stroke="#6C28D9"
+						fillOpacity={1}
+						fill="url(#colorUsed)"
+						name="Used GB"
+					/>
+					<Area
+						type="monotone"
+						dataKey="freeGb"
+						stroke="#8884d8"
+						fillOpacity={1}
+						fill="url(#colorFree)"
+						name="Free GB"
+					/>
+				</AreaChart>
+			</ResponsiveContainer>
+		</div>
+	);
+};
+interface CustomTooltipProps {
+	active: boolean;
+	payload?: {
+		color?: string;
+		dataKey?: string;
+		value?: number;
+		payload: {
+			time: string;
+			usedGb: number;
+			freeGb: number;
+			totalGb: number;
+		};
+	}[];
+}
+
+const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
+	if (active && payload && payload.length && payload[0]) {
+		return (
+			<div className="custom-tooltip bg-background p-2 shadow-lg rounded-md text-primary border">
+				<p>{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}</p>
+				<p>{`Disk usage: ${payload[0].payload.usedGb} GB`}</p>
+				<p>{`Disk free: ${payload[0].payload.freeGb} GB`}</p>
+				<p>{`Total disk: ${payload[0].payload.totalGb} GB`}</p>
+			</div>
+		);
+	}
+
+	return null;
+};
diff --git a/apps/dokploy/components/dashboard/monitoring/free/container/docker-memory-chart.tsx b/apps/dokploy/components/dashboard/monitoring/free/container/docker-memory-chart.tsx
@@ -0,0 +1,88 @@
+import { format } from "date-fns";
+import {
+	Area,
+	AreaChart,
+	CartesianGrid,
+	Legend,
+	ResponsiveContainer,
+	Tooltip,
+	YAxis,
+} from "recharts";
+import type { DockerStatsJSON } from "./show";
+
+interface Props {
+	acummulativeData: DockerStatsJSON["memory"];
+	memoryLimitGB: number;
+}
+
+export const DockerMemoryChart = ({
+	acummulativeData,
+	memoryLimitGB,
+}: Props) => {
+	const transformedData = acummulativeData.map((item, index) => {
+		return {
+			time: item.time,
+			name: `Point ${index + 1}`,
+			usage: (item.value.used / 1024 ** 3).toFixed(2),
+		};
+	});
+	return (
+		<div className="mt-6 w-full h-[10rem]">
+			<ResponsiveContainer>
+				<AreaChart
+					data={transformedData}
+					margin={{
+						top: 10,
+						right: 30,
+						left: 0,
+						bottom: 0,
+					}}
+				>
+					<defs>
+						<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
+							<stop offset="5%" stopColor="#27272A" stopOpacity={0.8} />
+							<stop offset="95%" stopColor="white" stopOpacity={0} />
+						</linearGradient>
+					</defs>
+					<YAxis stroke="#A1A1AA" domain={[0, +memoryLimitGB.toFixed(2)]} />
+					<CartesianGrid strokeDasharray="3 3" stroke="#27272A" />
+					{/* @ts-ignore */}
+					<Tooltip content={<CustomTooltip />} />
+					<Legend />
+					<Area
+						type="monotone"
+						dataKey="usage"
+						stroke="#27272A"
+						fillOpacity={1}
+						fill="url(#colorUv)"
+					/>
+				</AreaChart>
+			</ResponsiveContainer>
+		</div>
+	);
+};
+interface CustomTooltipProps {
+	active: boolean;
+	payload?: {
+		color?: string;
+		dataKey?: string;
+		value?: number;
+		payload: {
+			time: string;
+			usage: number;
+		};
+	}[];
+}
+
+const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
+	if (active && payload && payload.length && payload[0]) {
+		return (
+			<div className="custom-tooltip bg-background p-2 shadow-lg rounded-md text-primary border">
+				<p>{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}</p>
+				<p>{`Memory usage: ${payload[0].payload.usage} GB`}</p>
+			</div>
+		);
+	}
+
+	return null;
+};