Skip to content

Commit 1661022

Browse files
SiumauricioSiumauricio
authored
Fix/monitoring (#1271)
* refactor: make request to dokploy server to proxy requests * refactor: lint * refactor: use dokploy/monitoring tag image * refactor: use canary in development or canary tags * refactor: adjust logic * refactor: update name
2 parents d492ff8 + 2a295d6 commit 1661022

File tree

4 files changed

+124
-91
lines changed

4 files changed

+124
-91
lines changed

‎apps/dokploy/components/dashboard/monitoring/paid/container/show-paid-container-monitoring.tsx‎

Lines changed: 48 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -131,54 +131,59 @@ export const ContainerPaidMonitoring = ({ appName, baseUrl, token }: Props) => {
131131

132132
return (
133133
<>
134-
<div className="flex items-center justify-between">
134+
<div className="flex items-center justify-between flex-wrap gap-2">
135135
<h2 className="text-2xl font-bold tracking-tight">
136136
Container Monitoring
137137
</h2>
138-
<div className="flex items-center gap-2">
139-
<span className="text-sm text-muted-foreground">Data points:</span>
140-
<Select
141-
value={dataPoints}
142-
onValueChange={(value: keyof typeof DATA_POINTS_OPTIONS) =>
143-
setDataPoints(value)
144-
}
145-
>
146-
<SelectTrigger className="w-[180px]">
147-
<SelectValue placeholder="Select points" />
148-
</SelectTrigger>
149-
<SelectContent>
150-
{Object.entries(DATA_POINTS_OPTIONS).map(([value, label]) => (
151-
<SelectItem key={value} value={value}>
152-
{label}
153-
</SelectItem>
154-
))}
155-
</SelectContent>
156-
</Select>
157-
<span className="text-sm text-muted-foreground">
158-
Refresh interval:
159-
</span>
160-
<Select
161-
value={refreshInterval}
162-
onValueChange={(value: keyof typeof REFRESH_INTERVALS) =>
163-
setRefreshInterval(value)
164-
}
165-
>
166-
<SelectTrigger className="w-[180px]">
167-
<SelectValue placeholder="Select interval" />
168-
</SelectTrigger>
169-
<SelectContent>
170-
{Object.entries(REFRESH_INTERVALS).map(([value, label]) => (
171-
<SelectItem key={value} value={value}>
172-
{label}
173-
</SelectItem>
174-
))}
175-
</SelectContent>
176-
</Select>
138+
<div className="flex items-center gap-4 flex-wrap">
139+
<div>
140+
<span className="text-sm text-muted-foreground">Data points:</span>
141+
<Select
142+
value={dataPoints}
143+
onValueChange={(value: keyof typeof DATA_POINTS_OPTIONS) =>
144+
setDataPoints(value)
145+
}
146+
>
147+
<SelectTrigger className="w-[180px]">
148+
<SelectValue placeholder="Select points" />
149+
</SelectTrigger>
150+
<SelectContent>
151+
{Object.entries(DATA_POINTS_OPTIONS).map(([value, label]) => (
152+
<SelectItem key={value} value={value}>
153+
{label}
154+
</SelectItem>
155+
))}
156+
</SelectContent>
157+
</Select>
158+
</div>
159+
160+
<div>
161+
<span className="text-sm text-muted-foreground">
162+
Refresh interval:
163+
</span>
164+
<Select
165+
value={refreshInterval}
166+
onValueChange={(value: keyof typeof REFRESH_INTERVALS) =>
167+
setRefreshInterval(value)
168+
}
169+
>
170+
<SelectTrigger className="w-[180px]">
171+
<SelectValue placeholder="Select interval" />
172+
</SelectTrigger>
173+
<SelectContent>
174+
{Object.entries(REFRESH_INTERVALS).map(([value, label]) => (
175+
<SelectItem key={value} value={value}>
176+
{label}
177+
</SelectItem>
178+
))}
179+
</SelectContent>
180+
</Select>
181+
</div>
177182
</div>
178183
</div>
179184

180185
{/* Stats Cards */}
181-
<div className="grid gap-4 md:grid-cols-4">
186+
<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
182187
<Card className="p-6 bg-transparent">
183188
<div className="flex items-center gap-2">
184189
<Cpu className="h-4 w-4 text-muted-foreground" />
@@ -236,13 +241,13 @@ export const ContainerPaidMonitoring = ({ appName, baseUrl, token }: Props) => {
236241
</div>
237242
<div>
238243
<h4 className="text-sm font-medium text-muted-foreground">Name</h4>
239-
<p className="mt-1">{metrics.Name}</p>
244+
<p className="mt-1 truncate">{metrics.Name}</p>
240245
</div>
241246
</div>
242247
</Card>
243248

244249
{/* Charts Grid */}
245-
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-2">
250+
<div className="grid gap-4 grid-cols-1 md:grid-cols-1 xl:grid-cols-2">
246251
<ContainerCPUChart data={historicalData} />
247252
<ContainerMemoryChart data={historicalData} />
248253
<ContainerBlockChart data={historicalData} />

‎apps/dokploy/components/dashboard/monitoring/paid/servers/show-paid-monitoring.tsx‎

Lines changed: 48 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -151,53 +151,58 @@ export const ShowPaidMonitoring = ({
151151
}
152152

153153
return (
154-
<div className="space-y-4 pt-5 pb-10 w-full px-4">
155-
<div className="flex justify-between items-center">
154+
<div className="space-y-4 pt-5 pb-10 w-full md:px-4">
155+
<div className="flex items-center justify-between flex-wrap gap-2">
156156
<h2 className="text-2xl font-bold tracking-tight">System Monitoring</h2>
157-
<div className="flex items-center gap-2">
158-
<span className="text-sm text-muted-foreground">Data points:</span>
159-
<Select
160-
value={dataPoints}
161-
onValueChange={(value: keyof typeof DATA_POINTS_OPTIONS) =>
162-
setDataPoints(value)
163-
}
164-
>
165-
<SelectTrigger className="w-[180px]">
166-
<SelectValue placeholder="Select points" />
167-
</SelectTrigger>
168-
<SelectContent>
169-
{Object.entries(DATA_POINTS_OPTIONS).map(([value, label]) => (
170-
<SelectItem key={value} value={value}>
171-
{label}
172-
</SelectItem>
173-
))}
174-
</SelectContent>
175-
</Select>
176-
<span className="text-sm text-muted-foreground">
177-
Refresh interval:
178-
</span>
179-
<Select
180-
value={refreshInterval}
181-
onValueChange={(value: keyof typeof REFRESH_INTERVALS) =>
182-
setRefreshInterval(value)
183-
}
184-
>
185-
<SelectTrigger className="w-[180px]">
186-
<SelectValue placeholder="Select interval" />
187-
</SelectTrigger>
188-
<SelectContent>
189-
{Object.entries(REFRESH_INTERVALS).map(([value, label]) => (
190-
<SelectItem key={value} value={value}>
191-
{label}
192-
</SelectItem>
193-
))}
194-
</SelectContent>
195-
</Select>
157+
<div className="flex items-center gap-4 flex-wrap">
158+
<div>
159+
<span className="text-sm text-muted-foreground">Data points:</span>
160+
<Select
161+
value={dataPoints}
162+
onValueChange={(value: keyof typeof DATA_POINTS_OPTIONS) =>
163+
setDataPoints(value)
164+
}
165+
>
166+
<SelectTrigger className="w-[180px]">
167+
<SelectValue placeholder="Select points" />
168+
</SelectTrigger>
169+
<SelectContent>
170+
{Object.entries(DATA_POINTS_OPTIONS).map(([value, label]) => (
171+
<SelectItem key={value} value={value}>
172+
{label}
173+
</SelectItem>
174+
))}
175+
</SelectContent>
176+
</Select>
177+
</div>
178+
179+
<div>
180+
<span className="text-sm text-muted-foreground">
181+
Refresh interval:
182+
</span>
183+
<Select
184+
value={refreshInterval}
185+
onValueChange={(value: keyof typeof REFRESH_INTERVALS) =>
186+
setRefreshInterval(value)
187+
}
188+
>
189+
<SelectTrigger className="w-[180px]">
190+
<SelectValue placeholder="Select interval" />
191+
</SelectTrigger>
192+
<SelectContent>
193+
{Object.entries(REFRESH_INTERVALS).map(([value, label]) => (
194+
<SelectItem key={value} value={value}>
195+
{label}
196+
</SelectItem>
197+
))}
198+
</SelectContent>
199+
</Select>
200+
</div>
196201
</div>
197202
</div>
198203

199204
{/* Stats Cards */}
200-
<div className="grid gap-4 md:grid-cols-4">
205+
<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
201206
<div className="rounded-lg border text-card-foreground shadow-sm p-6">
202207
<div className="flex items-center gap-2">
203208
<Clock className="h-4 w-4 text-muted-foreground" />
@@ -260,7 +265,7 @@ export const ShowPaidMonitoring = ({
260265
</div>
261266

262267
{/* Charts Grid */}
263-
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-2">
268+
<div className="grid gap-4 grid-cols-1 md:grid-cols-1 xl:grid-cols-2">
264269
<CPUChart data={historicalData} />
265270
<MemoryChart data={historicalData} />
266271
<DiskChart data={metrics} />

‎packages/server/src/services/docker.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,11 @@ export const getContainers = async (serverId?: string | null) => {
5858
serverId,
5959
};
6060
})
61-
.filter((container) => !container.name.includes("dokploy"));
61+
.filter(
62+
(container) =>
63+
!container.name.includes("dokploy") ||
64+
container.name.includes("dokploy-monitoring"),
65+
);
6266

6367
return containers;
6468
} catch (error) {

‎packages/server/src/setup/monitoring-setup.ts‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,26 @@
11
import { findServerById } from "@dokploy/server/services/server";
22
import type { ContainerCreateOptions } from "dockerode";
3+
import { IS_CLOUD } from "../constants";
34
import { findAdminById } from "../services/admin";
5+
import { getDokployImageTag } from "../services/settings";
46
import { pullImage, pullRemoteImage } from "../utils/docker/utils";
57
import { execAsync, execAsyncRemote } from "../utils/process/execAsync";
68
import { getRemoteDocker } from "../utils/servers/remote-docker";
79

810
export const setupMonitoring = async (serverId: string) => {
911
const server = await findServerById(serverId);
1012

11-
const containerName = "mauricio-monitoring";
12-
const imageName = "dokploy/monitoring:canary";
13+
14+
const containerName = "dokploy-monitoring";
15+
let imageName = "dokploy/monitoring:latest";
16+
17+
if (
18+
(getDokployImageTag() !== "latest" ||
19+
process.env.NODE_ENV === "development") &&
20+
!IS_CLOUD
21+
) {
22+
imageName = "dokploy/monitoring:canary";
23+
}
1324

1425
const settings: ContainerCreateOptions = {
1526
name: containerName,
@@ -73,8 +84,16 @@ export const setupMonitoring = async (serverId: string) => {
7384
export const setupWebMonitoring = async (adminId: string) => {
7485
const admin = await findAdminById(adminId);
7586

76-
const containerName = "mauricio-monitoring";
77-
const imageName = "dokploy/monitoring:canary";
87+
const containerName = "dokploy-monitoring";
88+
let imageName = "dokploy/monitoring:latest";
89+
90+
if (
91+
(getDokployImageTag() !== "latest" ||
92+
process.env.NODE_ENV === "development") &&
93+
!IS_CLOUD
94+
) {
95+
imageName = "dokploy/monitoring:canary";
96+
}
7897

7998
const settings: ContainerCreateOptions = {
8099
name: containerName,

0 commit comments

Comments
 (0)