diff --git a/apps/dokploy/components/dashboard/monitoring/docker/docker-block-chart.tsx b/apps/dokploy/components/dashboard/monitoring/docker/docker-block-chart.tsx deleted file mode 100644 index 57a3cbe22..000000000 --- a/apps/dokploy/components/dashboard/monitoring/docker/docker-block-chart.tsx +++ /dev/null @@ -1,101 +0,0 @@ -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 ( -
- - - - - - - - - - - - - - - {/* @ts-ignore */} - } /> - - - - - -
- ); -}; -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 ( -
-

{`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`}

-
- ); - } - - return null; -}; diff --git a/apps/dokploy/components/dashboard/monitoring/docker/docker-cpu-chart.tsx b/apps/dokploy/components/dashboard/monitoring/docker/docker-cpu-chart.tsx deleted file mode 100644 index 41f20f8f1..000000000 --- a/apps/dokploy/components/dashboard/monitoring/docker/docker-cpu-chart.tsx +++ /dev/null @@ -1,85 +0,0 @@ -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 ( -
- - - - - - - - - - - {/* @ts-ignore */} - } /> - - - - -
- ); -}; - -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 ( -
-

{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}

-

{`CPU Usage: ${payload[0].payload.usage}%`}

-
- ); - } - - return null; -}; diff --git a/apps/dokploy/components/dashboard/monitoring/docker/docker-disk-chart.tsx b/apps/dokploy/components/dashboard/monitoring/docker/docker-disk-chart.tsx deleted file mode 100644 index a97fcfedd..000000000 --- a/apps/dokploy/components/dashboard/monitoring/docker/docker-disk-chart.tsx +++ /dev/null @@ -1,105 +0,0 @@ -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 ( -
- - - - - - - - - - - - - - - {/* @ts-ignore */} - } /> - - - - - -
- ); -}; -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 ( -
-

{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}

-

{`Disk usage: ${payload[0].payload.usedGb} GB`}

-

{`Disk free: ${payload[0].payload.freeGb} GB`}

-

{`Total disk: ${payload[0].payload.totalGb} GB`}

-
- ); - } - - return null; -}; diff --git a/apps/dokploy/components/dashboard/monitoring/docker/docker-memory-chart.tsx b/apps/dokploy/components/dashboard/monitoring/docker/docker-memory-chart.tsx deleted file mode 100644 index 36f1edb81..000000000 --- a/apps/dokploy/components/dashboard/monitoring/docker/docker-memory-chart.tsx +++ /dev/null @@ -1,88 +0,0 @@ -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 ( -
- - - - - - - - - - - {/* @ts-ignore */} - } /> - - - - -
- ); -}; -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 ( -
-

{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}

-

{`Memory usage: ${payload[0].payload.usage} GB`}

-
- ); - } - - return null; -}; diff --git a/apps/dokploy/components/dashboard/monitoring/docker/docker-network-chart.tsx b/apps/dokploy/components/dashboard/monitoring/docker/docker-network-chart.tsx deleted file mode 100644 index b522603d8..000000000 --- a/apps/dokploy/components/dashboard/monitoring/docker/docker-network-chart.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import { format } from "date-fns"; -import { - Area, - AreaChart, - CartesianGrid, - Legend, - ResponsiveContainer, - Tooltip, - YAxis, -} from "recharts"; -import type { DockerStatsJSON } from "./show"; -1; -interface Props { - acummulativeData: DockerStatsJSON["network"]; -} - -export const DockerNetworkChart = ({ acummulativeData }: Props) => { - const transformedData = acummulativeData.map((item, index) => { - return { - time: item.time, - name: `Point ${index + 1}`, - inMB: item.value.inputMb.toFixed(2), - outMB: item.value.outputMb.toFixed(2), - }; - }); - return ( -
- - - - - - - - - - - {/* @ts-ignore */} - } /> - - - - - -
- ); -}; - -interface CustomTooltipProps { - active: boolean; - payload?: { - color?: string; - dataKey?: string; - value?: number; - payload: { - time: string; - inMB: number; - outMB: number; - }; - }[]; -} - -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`}

-
- ); - } - - return null; -}; diff --git a/apps/dokploy/components/dashboard/monitoring/docker/show.tsx b/apps/dokploy/components/dashboard/monitoring/docker/show.tsx deleted file mode 100644 index 7ff326601..000000000 --- a/apps/dokploy/components/dashboard/monitoring/docker/show.tsx +++ /dev/null @@ -1,244 +0,0 @@ -import { - Card, - CardContent, - CardDescription, - CardHeader, - CardTitle, -} from "@/components/ui/card"; -import { Progress } from "@/components/ui/progress"; -import { api } from "@/utils/api"; -import React, { useEffect, useState } from "react"; -import { DockerBlockChart } from "./docker-block-chart"; -import { DockerCpuChart } from "./docker-cpu-chart"; -import { DockerDiskChart } from "./docker-disk-chart"; -import { DockerMemoryChart } from "./docker-memory-chart"; -import { DockerNetworkChart } from "./docker-network-chart"; -import { Clock, Cpu, HardDrive, Loader2, MemoryStick } from "lucide-react"; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from "@/components/ui/select"; -import { CPUChart } from "@/components/metrics/cpu-chart"; -import { DiskChart } from "@/components/metrics/disk-chart"; -import { MemoryChart } from "@/components/metrics/memory-chart"; -import { NetworkChart } from "@/components/metrics/network-chart"; - -const REFRESH_INTERVAL = 4500; -// const BASE_URL = -// process.env.NEXT_PUBLIC_METRICS_URL || "http://localhost:3001/metrics"; - -const DATA_POINTS_OPTIONS = { - "50": "50 points", - "200": "200 points", - "500": "500 points", - "800": "800 points", - all: "All points", -} as const; -interface Props { - appName: string; - BASE_URL: string; -} - -export const DockerMonitoring = ({ appName, BASE_URL }: Props) => { - const [historicalData, setHistoricalData] = useState([]); - const [metrics, setMetrics] = useState({} as SystemMetrics); - const [isLoading, setIsLoading] = useState(true); - const [error, setError] = useState(null); - const [dataPoints, setDataPoints] = - useState("50"); - - const fetchMetrics = async () => { - try { - const url = new URL("http://localhost:3001/metrics/containers"); - - // Solo añadir el parámetro limit si no es "all" - if (dataPoints !== "all") { - url.searchParams.append("limit", dataPoints); - } - - url.searchParams.append("appName", appName); - - console.log("url", url.toString()); - - const response = await fetch(url.toString()); - - if (!response.ok) { - throw new Error(`Failed to fetch metrics: ${response.statusText}`); - } - - const data = await response.json(); - if (!Array.isArray(data) || data.length === 0) { - throw new Error("No data available"); - } - - const formattedData = data.map((metric: SystemMetrics) => ({ - timestamp: metric.timestamp, - cpu: Number.parseFloat(metric.cpu), - cpuModel: metric.cpuModel, - cpuCores: metric.cpuCores, - cpuPhysicalCores: metric.cpuPhysicalCores, - cpuSpeed: metric.cpuSpeed, - os: metric.os, - distro: metric.distro, - kernel: metric.kernel, - arch: metric.arch, - memUsed: Number.parseFloat(metric.memUsed), - memUsedGB: Number.parseFloat(metric.memUsedGB), - memTotal: Number.parseFloat(metric.memTotal), - networkIn: Number.parseFloat(metric.networkIn), - networkOut: Number.parseFloat(metric.networkOut), - diskUsed: Number.parseFloat(metric.diskUsed), - totalDisk: Number.parseFloat(metric.totalDisk), - uptime: metric.uptime, - })); - - setHistoricalData(formattedData); - setMetrics(formattedData[formattedData.length - 1] || {}); - setError(null); - } catch (err) { - setError(err instanceof Error ? err.message : "Failed to fetch metrics"); - } finally { - setIsLoading(false); - } - }; - - const formatUptime = (seconds: number): string => { - const days = Math.floor(seconds / (24 * 60 * 60)); - const hours = Math.floor((seconds % (24 * 60 * 60)) / (60 * 60)); - const minutes = Math.floor((seconds % (60 * 60)) / 60); - - return `${days}d ${hours}h ${minutes}m`; - }; - - useEffect(() => { - fetchMetrics(); - - const interval = setInterval(() => { - fetchMetrics(); - }, REFRESH_INTERVAL); - - return () => clearInterval(interval); - }, [dataPoints]); - - if (isLoading) { - return ( -
- -
- ); - } - - if (error) { - return ( -
- - Error fetching metrics to: {BASE_URL} - {error} - -
- ); - } - - return ( -
- {/* Header con selector de puntos de datos */} -
-

System Monitoring

-
- Data points: - -
-
- - {/* Stats Cards */} -
-
-
- -

Uptime

-
-

- {formatUptime(metrics.uptime || 0)} -

-
- -
-
- -

CPU Usage

-
-

{metrics.cpu}%

-
- -
-
- -

Memory Usage

-
-

- {metrics.memUsedGB} GB / {metrics.memTotal} GB -

-
- -
-
- -

Disk Usage

-
-

{metrics.diskUsed}%

-
-
- - {/* System Information */} -
-

System Information

-
-
-

CPU

-

{metrics.cpuModel}

-

- {metrics.cpuPhysicalCores} Physical Cores ({metrics.cpuCores}{" "} - Threads) @ {metrics.cpuSpeed}GHz -

-
-
-

- Operating System -

-

{metrics.distro}

-

- Kernel: {metrics.kernel} ({metrics.arch}) -

-
-
-
- - {/* Charts Grid */} -
- - - - -
-
- ); -}; diff --git a/apps/dokploy/components/metrics/cpu-chart.tsx b/apps/dokploy/components/dashboard/monitoring/servers/cpu-chart.tsx similarity index 97% rename from apps/dokploy/components/metrics/cpu-chart.tsx rename to apps/dokploy/components/dashboard/monitoring/servers/cpu-chart.tsx index 4f95a9bfc..681cc5ff4 100644 --- a/apps/dokploy/components/metrics/cpu-chart.tsx +++ b/apps/dokploy/components/dashboard/monitoring/servers/cpu-chart.tsx @@ -6,7 +6,7 @@ import { CardTitle, } from "@/components/ui/card"; import { - ChartConfig, + type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, @@ -69,7 +69,7 @@ export function CPUChart({ data }: CPUChartProps) { cursor={false} content={({ active, payload, label }) => { if (active && payload && payload.length) { - const data = payload[0].payload; + const data = payload?.[0]?.payload; return (
diff --git a/apps/dokploy/components/metrics/disk-chart.tsx b/apps/dokploy/components/dashboard/monitoring/servers/disk-chart.tsx similarity index 100% rename from apps/dokploy/components/metrics/disk-chart.tsx rename to apps/dokploy/components/dashboard/monitoring/servers/disk-chart.tsx diff --git a/apps/dokploy/components/metrics/memory-chart.tsx b/apps/dokploy/components/dashboard/monitoring/servers/memory-chart.tsx similarity index 98% rename from apps/dokploy/components/metrics/memory-chart.tsx rename to apps/dokploy/components/dashboard/monitoring/servers/memory-chart.tsx index f012eaebc..89765b9ac 100644 --- a/apps/dokploy/components/metrics/memory-chart.tsx +++ b/apps/dokploy/components/dashboard/monitoring/servers/memory-chart.tsx @@ -84,7 +84,7 @@ export function MemoryChart({ data }: MemoryChartProps) { cursor={false} content={({ active, payload, label }) => { if (active && payload && payload.length) { - const data = payload[0].payload; + const data = payload?.[0]?.payload; return (
diff --git a/apps/dokploy/components/metrics/network-chart.tsx b/apps/dokploy/components/dashboard/monitoring/servers/network-chart.tsx similarity index 98% rename from apps/dokploy/components/metrics/network-chart.tsx rename to apps/dokploy/components/dashboard/monitoring/servers/network-chart.tsx index f0e1d8d1b..dba6eb46f 100644 --- a/apps/dokploy/components/metrics/network-chart.tsx +++ b/apps/dokploy/components/dashboard/monitoring/servers/network-chart.tsx @@ -88,7 +88,7 @@ export function NetworkChart({ data }: NetworkChartProps) { cursor={false} content={({ active, payload, label }) => { if (active && payload && payload.length) { - const data = payload[0].payload; + const data = payload?.[0]?.payload; return (
diff --git a/apps/dokploy/components/dashboard/monitoring/show-monitoring.tsx b/apps/dokploy/components/dashboard/monitoring/servers/show-monitoring.tsx similarity index 96% rename from apps/dokploy/components/dashboard/monitoring/show-monitoring.tsx rename to apps/dokploy/components/dashboard/monitoring/servers/show-monitoring.tsx index 6f248376e..fe2d87aad 100644 --- a/apps/dokploy/components/dashboard/monitoring/show-monitoring.tsx +++ b/apps/dokploy/components/dashboard/monitoring/servers/show-monitoring.tsx @@ -3,10 +3,10 @@ import { IS_CLOUD, validateRequest } from "@dokploy/server"; import type { GetServerSidePropsContext } from "next"; import type React from "react"; import { useEffect, useState } from "react"; -import { CPUChart } from "@/components/metrics/cpu-chart"; -import { MemoryChart } from "@/components/metrics/memory-chart"; -import { NetworkChart } from "@/components/metrics/network-chart"; -import { DiskChart } from "@/components/metrics/disk-chart"; +import { CPUChart } from "./cpu-chart"; +import { MemoryChart } from "./memory-chart"; +import { NetworkChart } from "./network-chart"; +import { DiskChart } from "./disk-chart"; import { Loader2, Clock, Cpu, MemoryStick, HardDrive } from "lucide-react"; import { Select, diff --git a/apps/dokploy/components/dashboard/monitoring/web-server/show.tsx b/apps/dokploy/components/dashboard/monitoring/web-server/show.tsx deleted file mode 100644 index f6bd8cc29..000000000 --- a/apps/dokploy/components/dashboard/monitoring/web-server/show.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from "react"; -import { DockerMonitoring } from "../docker/show"; - -export const ShowMonitoring = () => { - return ( -
- -
- ); -}; diff --git a/apps/dokploy/components/dashboard/settings/servers/show-monitoring-modal.tsx b/apps/dokploy/components/dashboard/settings/servers/show-monitoring-modal.tsx index 487beb20c..578c504eb 100644 --- a/apps/dokploy/components/dashboard/settings/servers/show-monitoring-modal.tsx +++ b/apps/dokploy/components/dashboard/settings/servers/show-monitoring-modal.tsx @@ -1,7 +1,7 @@ import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"; import { DropdownMenuItem } from "@/components/ui/dropdown-menu"; import { useState } from "react"; -import { ShowMonitoring } from "../../monitoring/show-monitoring"; +import { ShowMonitoring } from "../../monitoring/servers/show-monitoring"; interface Props { url: string; diff --git a/apps/dokploy/pages/dashboard/monitoring.tsx b/apps/dokploy/pages/dashboard/monitoring.tsx index eca703d11..54d51b7e8 100644 --- a/apps/dokploy/pages/dashboard/monitoring.tsx +++ b/apps/dokploy/pages/dashboard/monitoring.tsx @@ -2,10 +2,10 @@ import { DashboardLayout } from "@/components/layouts/dashboard-layout"; import type { GetServerSidePropsContext } from "next"; import type React from "react"; import { useEffect, useState } from "react"; -import { CPUChart } from "@/components/metrics/cpu-chart"; -import { MemoryChart } from "@/components/metrics/memory-chart"; -import { NetworkChart } from "@/components/metrics/network-chart"; -import { DiskChart } from "@/components/metrics/disk-chart"; +import { CPUChart } from "@/components/dashboard/monitoring/servers/cpu-chart"; +import { MemoryChart } from "@/components/dashboard/monitoring/servers/memory-chart"; +import { NetworkChart } from "@/components/dashboard/monitoring/servers/network-chart"; +import { DiskChart } from "@/components/dashboard/monitoring/servers/disk-chart"; import { Loader2, Clock, Cpu, MemoryStick, HardDrive } from "lucide-react"; import { Select,