From 5810c94f4bf30de30720c66da7a91c54ca3f566c Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Sun, 23 Mar 2025 20:07:29 -0600
Subject: [PATCH] feat(dashboard): enhance monitoring features with alert and
 toggle functionality

- Added AlertBlock component to display monitoring plan information.
- Introduced Switch component for toggling monitoring settings in both dashboard and service views.
- Updated state management for monitoring toggle to improve user experience.
- Cleaned up commented code for better readability and maintainability.
---
 apps/dokploy/pages/dashboard/monitoring.tsx   | 13 +++---
 .../services/application/[applicationId].tsx  | 44 +++++++++----------
 2 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/apps/dokploy/pages/dashboard/monitoring.tsx b/apps/dokploy/pages/dashboard/monitoring.tsx
index 4272c4536..4687da96c 100644
--- a/apps/dokploy/pages/dashboard/monitoring.tsx
+++ b/apps/dokploy/pages/dashboard/monitoring.tsx
@@ -1,7 +1,10 @@
 import { ContainerFreeMonitoring } from "@/components/dashboard/monitoring/free/container/show-free-container-monitoring";
 import { ShowPaidMonitoring } from "@/components/dashboard/monitoring/paid/servers/show-paid-monitoring";
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
+import { AlertBlock } from "@/components/shared/alert-block";
 import { Card } from "@/components/ui/card";
+import { Switch } from "@/components/ui/switch";
+import { Label } from "@/components/ui/label";
 import { useLocalStorage } from "@/hooks/useLocalStorage";
 import { api } from "@/utils/api";
 import { IS_CLOUD } from "@dokploy/server/constants";
@@ -23,7 +26,7 @@ const Dashboard = () => {
 	const { data: monitoring, isLoading } = api.user.getMetricsToken.useQuery();
 	return (
 		<div className="space-y-4 pb-10">
-			{/* <AlertBlock>
+			<AlertBlock>
 				You are watching the <strong>Free</strong> plan.{" "}
 				<a
 					href="https://dokploy.com#pricing"
@@ -34,7 +37,7 @@ const Dashboard = () => {
 					Upgrade
 				</a>{" "}
 				to get more features.
-			</AlertBlock> */}
+			</AlertBlock>
 			{isLoading ? (
 				<Card className="bg-sidebar  p-2.5 rounded-xl  mx-auto  items-center">
 					<div className="rounded-xl bg-background flex shadow-md px-4 min-h-[50vh] justify-center items-center text-muted-foreground">
@@ -44,15 +47,15 @@ const Dashboard = () => {
 				</Card>
 			) : (
 				<>
-					{/* {monitoring?.enabledFeatures && (
+					{monitoring?.enabledFeatures && (
 						<div className="flex flex-row border w-fit p-4 rounded-lg items-center gap-2">
 							<Label className="text-muted-foreground">Change Monitoring</Label>
 							<Switch
 								checked={toggleMonitoring}
-								onCheckedChange={setToggleMonitoring}
+								onCheckedChange={_setToggleMonitoring}
 							/>
 						</div>
-					)} */}
+					)}
 					{toggleMonitoring ? (
 						<Card className="bg-sidebar  p-2.5 rounded-xl  mx-auto">
 							<div className="rounded-xl bg-background shadow-md">
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/services/application/[applicationId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/services/application/[applicationId].tsx
index cff3a8db2..e6ce32257 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/services/application/[applicationId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/services/application/[applicationId].tsx
@@ -28,6 +28,7 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
 	Tooltip,
@@ -65,7 +66,7 @@ type TabState =
 const Service = (
 	props: InferGetServerSidePropsType<typeof getServerSideProps>,
 ) => {
-	const [_toggleMonitoring, _setToggleMonitoring] = useState(false);
+	const [_toggleMonitoring, _setToggleMonitoring] = useState(true);
 	const { applicationId, activeTab } = props;
 	const router = useRouter();
 	const { projectId } = router.query;
@@ -86,6 +87,7 @@ const Service = (
 
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { data: auth } = api.user.get.useQuery();
+	const { data: monitoring } = api.user.getMetricsToken.useQuery();
 
 	return (
 		<div className="pb-10">
@@ -265,21 +267,19 @@ const Service = (
 													/>
 												) : (
 													<>
-														{/* {monitoring?.enabledFeatures &&
-															isCloud &&
-															data?.serverId && (
-																<div className="flex flex-row border w-fit p-4 rounded-lg items-center gap-2">
-																	<Label className="text-muted-foreground">
-																		Change Monitoring
-																	</Label>
-																	<Switch
-																		checked={toggleMonitoring}
-																		onCheckedChange={setToggleMonitoring}
-																	/>
-																</div>
-															)} */}
+														{monitoring?.enabledFeatures && (
+															<div className="flex flex-row border w-fit p-4 rounded-lg items-center gap-2">
+																<Label className="text-muted-foreground">
+																	Change Monitoring
+																</Label>
+																<Switch
+																	checked={_toggleMonitoring}
+																	onCheckedChange={_setToggleMonitoring}
+																/>
+															</div>
+														)}
 
-														{/* {toggleMonitoring ? (
+														{_toggleMonitoring ? (
 															<ContainerPaidMonitoring
 																appName={data?.appName || ""}
 																baseUrl={`http://${monitoring?.serverIp}:${monitoring?.metricsConfig?.server?.port}`}
@@ -287,13 +287,13 @@ const Service = (
 																	monitoring?.metricsConfig?.server?.token || ""
 																}
 															/>
-														) : ( */}
-														<div>
-															<ContainerFreeMonitoring
-																appName={data?.appName || ""}
-															/>
-														</div>
-														{/* )} */}
+														) : (
+															<div>
+																<ContainerFreeMonitoring
+																	appName={data?.appName || ""}
+																/>
+															</div>
+														)}
 													</>
 												)}
 											</div>