From 51851567db3c5d952153046fece28250a0ec6034 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Sun, 2 Feb 2025 19:49:30 -0600
Subject: [PATCH] refactor: update name

---
 .../show-paid-container-monitoring.tsx        | 91 ++++++++++---------
 .../paid/servers/show-paid-monitoring.tsx     | 91 ++++++++++---------
 packages/server/src/setup/monitoring-setup.ts |  2 +-
 3 files changed, 97 insertions(+), 87 deletions(-)

diff --git a/apps/dokploy/components/dashboard/monitoring/paid/container/show-paid-container-monitoring.tsx b/apps/dokploy/components/dashboard/monitoring/paid/container/show-paid-container-monitoring.tsx
index f45c7382..3636a391 100644
--- a/apps/dokploy/components/dashboard/monitoring/paid/container/show-paid-container-monitoring.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/paid/container/show-paid-container-monitoring.tsx
@@ -131,54 +131,59 @@ export const ContainerPaidMonitoring = ({ appName, baseUrl, token }: Props) => {
 
 	return (
 		<>
-			<div className="flex items-center justify-between">
+			<div className="flex items-center justify-between flex-wrap	 gap-2">
 				<h2 className="text-2xl font-bold tracking-tight">
 					Container Monitoring
 				</h2>
-				<div className="flex items-center gap-2">
-					<span className="text-sm text-muted-foreground">Data points:</span>
-					<Select
-						value={dataPoints}
-						onValueChange={(value: keyof typeof DATA_POINTS_OPTIONS) =>
-							setDataPoints(value)
-						}
-					>
-						<SelectTrigger className="w-[180px]">
-							<SelectValue placeholder="Select points" />
-						</SelectTrigger>
-						<SelectContent>
-							{Object.entries(DATA_POINTS_OPTIONS).map(([value, label]) => (
-								<SelectItem key={value} value={value}>
-									{label}
-								</SelectItem>
-							))}
-						</SelectContent>
-					</Select>
-					<span className="text-sm text-muted-foreground">
-						Refresh interval:
-					</span>
-					<Select
-						value={refreshInterval}
-						onValueChange={(value: keyof typeof REFRESH_INTERVALS) =>
-							setRefreshInterval(value)
-						}
-					>
-						<SelectTrigger className="w-[180px]">
-							<SelectValue placeholder="Select interval" />
-						</SelectTrigger>
-						<SelectContent>
-							{Object.entries(REFRESH_INTERVALS).map(([value, label]) => (
-								<SelectItem key={value} value={value}>
-									{label}
-								</SelectItem>
-							))}
-						</SelectContent>
-					</Select>
+				<div className="flex items-center gap-4 flex-wrap">
+					<div>
+						<span className="text-sm text-muted-foreground">Data points:</span>
+						<Select
+							value={dataPoints}
+							onValueChange={(value: keyof typeof DATA_POINTS_OPTIONS) =>
+								setDataPoints(value)
+							}
+						>
+							<SelectTrigger className="w-[180px]">
+								<SelectValue placeholder="Select points" />
+							</SelectTrigger>
+							<SelectContent>
+								{Object.entries(DATA_POINTS_OPTIONS).map(([value, label]) => (
+									<SelectItem key={value} value={value}>
+										{label}
+									</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
+					</div>
+
+					<div>
+						<span className="text-sm text-muted-foreground">
+							Refresh interval:
+						</span>
+						<Select
+							value={refreshInterval}
+							onValueChange={(value: keyof typeof REFRESH_INTERVALS) =>
+								setRefreshInterval(value)
+							}
+						>
+							<SelectTrigger className="w-[180px]">
+								<SelectValue placeholder="Select interval" />
+							</SelectTrigger>
+							<SelectContent>
+								{Object.entries(REFRESH_INTERVALS).map(([value, label]) => (
+									<SelectItem key={value} value={value}>
+										{label}
+									</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
+					</div>
 				</div>
 			</div>
 
 			{/* Stats Cards */}
-			<div className="grid gap-4 md:grid-cols-4">
+			<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
 				<Card className="p-6 bg-transparent">
 					<div className="flex items-center gap-2">
 						<Cpu className="h-4 w-4 text-muted-foreground" />
@@ -236,13 +241,13 @@ export const ContainerPaidMonitoring = ({ appName, baseUrl, token }: Props) => {
 					</div>
 					<div>
 						<h4 className="text-sm font-medium text-muted-foreground">Name</h4>
-						<p className="mt-1">{metrics.Name}</p>
+						<p className="mt-1 truncate">{metrics.Name}</p>
 					</div>
 				</div>
 			</Card>
 
 			{/* Charts Grid */}
-			<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-2">
+			<div className="grid gap-4 grid-cols-1 md:grid-cols-1 xl:grid-cols-2">
 				<ContainerCPUChart data={historicalData} />
 				<ContainerMemoryChart data={historicalData} />
 				<ContainerBlockChart data={historicalData} />
diff --git a/apps/dokploy/components/dashboard/monitoring/paid/servers/show-paid-monitoring.tsx b/apps/dokploy/components/dashboard/monitoring/paid/servers/show-paid-monitoring.tsx
index 8f09ab12..043b5c62 100644
--- a/apps/dokploy/components/dashboard/monitoring/paid/servers/show-paid-monitoring.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/paid/servers/show-paid-monitoring.tsx
@@ -151,53 +151,58 @@ export const ShowPaidMonitoring = ({
 	}
 
 	return (
-		<div className="space-y-4 pt-5 pb-10 w-full px-4">
-			<div className="flex justify-between items-center">
+		<div className="space-y-4 pt-5 pb-10 w-full md:px-4">
+			<div className="flex items-center justify-between flex-wrap	 gap-2">
 				<h2 className="text-2xl font-bold tracking-tight">System Monitoring</h2>
-				<div className="flex items-center gap-2">
-					<span className="text-sm text-muted-foreground">Data points:</span>
-					<Select
-						value={dataPoints}
-						onValueChange={(value: keyof typeof DATA_POINTS_OPTIONS) =>
-							setDataPoints(value)
-						}
-					>
-						<SelectTrigger className="w-[180px]">
-							<SelectValue placeholder="Select points" />
-						</SelectTrigger>
-						<SelectContent>
-							{Object.entries(DATA_POINTS_OPTIONS).map(([value, label]) => (
-								<SelectItem key={value} value={value}>
-									{label}
-								</SelectItem>
-							))}
-						</SelectContent>
-					</Select>
-					<span className="text-sm text-muted-foreground">
-						Refresh interval:
-					</span>
-					<Select
-						value={refreshInterval}
-						onValueChange={(value: keyof typeof REFRESH_INTERVALS) =>
-							setRefreshInterval(value)
-						}
-					>
-						<SelectTrigger className="w-[180px]">
-							<SelectValue placeholder="Select interval" />
-						</SelectTrigger>
-						<SelectContent>
-							{Object.entries(REFRESH_INTERVALS).map(([value, label]) => (
-								<SelectItem key={value} value={value}>
-									{label}
-								</SelectItem>
-							))}
-						</SelectContent>
-					</Select>
+				<div className="flex items-center gap-4 flex-wrap">
+					<div>
+						<span className="text-sm text-muted-foreground">Data points:</span>
+						<Select
+							value={dataPoints}
+							onValueChange={(value: keyof typeof DATA_POINTS_OPTIONS) =>
+								setDataPoints(value)
+							}
+						>
+							<SelectTrigger className="w-[180px]">
+								<SelectValue placeholder="Select points" />
+							</SelectTrigger>
+							<SelectContent>
+								{Object.entries(DATA_POINTS_OPTIONS).map(([value, label]) => (
+									<SelectItem key={value} value={value}>
+										{label}
+									</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
+					</div>
+
+					<div>
+						<span className="text-sm text-muted-foreground">
+							Refresh interval:
+						</span>
+						<Select
+							value={refreshInterval}
+							onValueChange={(value: keyof typeof REFRESH_INTERVALS) =>
+								setRefreshInterval(value)
+							}
+						>
+							<SelectTrigger className="w-[180px]">
+								<SelectValue placeholder="Select interval" />
+							</SelectTrigger>
+							<SelectContent>
+								{Object.entries(REFRESH_INTERVALS).map(([value, label]) => (
+									<SelectItem key={value} value={value}>
+										{label}
+									</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
+					</div>
 				</div>
 			</div>
 
 			{/* Stats Cards */}
-			<div className="grid gap-4 md:grid-cols-4">
+			<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
 				<div className="rounded-lg border text-card-foreground shadow-sm p-6">
 					<div className="flex items-center gap-2">
 						<Clock className="h-4 w-4 text-muted-foreground" />
@@ -260,7 +265,7 @@ export const ShowPaidMonitoring = ({
 			</div>
 
 			{/* Charts Grid */}
-			<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-2">
+			<div className="grid gap-4 grid-cols-1 md:grid-cols-1 xl:grid-cols-2">
 				<CPUChart data={historicalData} />
 				<MemoryChart data={historicalData} />
 				<DiskChart data={metrics} />
diff --git a/packages/server/src/setup/monitoring-setup.ts b/packages/server/src/setup/monitoring-setup.ts
index e7b39b0b..f72b2244 100644
--- a/packages/server/src/setup/monitoring-setup.ts
+++ b/packages/server/src/setup/monitoring-setup.ts
@@ -1,11 +1,11 @@
 import { findServerById } from "@dokploy/server/services/server";
 import type { ContainerCreateOptions } from "dockerode";
+import { IS_CLOUD } from "../constants";
 import { findAdminById } from "../services/admin";
 import { getDokployImageTag } from "../services/settings";
 import { pullImage, pullRemoteImage } from "../utils/docker/utils";
 import { execAsync, execAsyncRemote } from "../utils/process/execAsync";
 import { getRemoteDocker } from "../utils/servers/remote-docker";
-import { IS_CLOUD } from "../constants";
 
 export const setupMonitoring = async (serverId: string) => {
 	const server = await findServerById(serverId);