From e57f8a32ceda4f6754229a47be9d8f0443ae066a Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Fri, 6 Sep 2024 22:38:32 -0600
Subject: [PATCH] refactor(requests): simplify logic

---
 .../dashboard/requests/show-requests.tsx      | 97 +++++++++----------
 .../components/shared/dialog-action.tsx       | 47 +++++++++
 apps/dokploy/server/api/routers/settings.ts   | 59 ++++++-----
 .../server/utils/access-log/handler.ts        |  2 +-
 4 files changed, 123 insertions(+), 82 deletions(-)
 create mode 100644 apps/dokploy/components/shared/dialog-action.tsx

diff --git a/apps/dokploy/components/dashboard/requests/show-requests.tsx b/apps/dokploy/components/dashboard/requests/show-requests.tsx
index 03e115079..a7dea1ad0 100644
--- a/apps/dokploy/components/dashboard/requests/show-requests.tsx
+++ b/apps/dokploy/components/dashboard/requests/show-requests.tsx
@@ -11,6 +11,7 @@ import * as React from "react";
 import { toast } from "sonner";
 import { RequestDistributionChart } from "./request-distribution-chart";
 import { RequestsTable } from "./requests-table";
+import { DialogAction } from "@/components/shared/dialog-action";
 
 export type LogEntry = NonNullable<
 	RouterOutputs["settings"]["readStatsLogs"]["data"]
@@ -20,9 +21,8 @@ export const ShowRequests = () => {
 	const { data: isLogRotateActive, refetch: refetchLogRotate } =
 		api.settings.getLogRotateStatus.useQuery();
 
-	const { mutateAsync } = api.settings.activateLogRotate.useMutation();
-	const { mutateAsync: deactivateLogRotate } =
-		api.settings.deactivateLogRotate.useMutation();
+	const { mutateAsync: toggleLogRotate } =
+		api.settings.toggleLogRotate.useMutation();
 
 	const { data: isActive, refetch } =
 		api.settings.haveActivateRequests.useQuery();
@@ -39,60 +39,57 @@ export const ShowRequests = () => {
 							<span>Showing web and API requests over time</span>
 						</CardDescription>
 						<div className="flex w-fit gap-4">
-							<Button
-								onClick={() => {
-									mutateAsync()
-										.then(async () => {
-											await toggleRequests({ enable: !isActive })
-												.then(() => {
-													refetch();
-													toast.success("Access Log Added to Traefik");
-												})
-												.catch((err) => {
-													toast.error(err.message);
-												});
+							<DialogAction
+								title={isActive ? "Deactivate Requests" : "Activate Requests"}
+								description="You will also need to restart Traefik to apply the changes"
+								onClick={async () => {
+									await toggleRequests({ enable: !isActive })
+										.then(() => {
+											refetch();
+											toast.success(
+												`Requests ${isActive ? "deactivated" : "activated"}`,
+											);
 										})
 										.catch((err) => {
 											toast.error(err.message);
 										});
 								}}
 							>
-								{isActive ? "Deactivate" : "Activate"}
-							</Button>
-							{!isLogRotateActive && (
-								<Button
-									variant="secondary"
-									onClick={() => {
-										mutateAsync()
-											.then(() => {
-												toast.success("Log rotate activated");
-												refetchLogRotate();
-											})
-											.catch((err) => {
-												toast.error(err.message);
-											});
-									}}
-								>
-									Activate Log Rotate
+								<Button>{isActive ? "Deactivate" : "Activate"}</Button>
+							</DialogAction>
+
+							<DialogAction
+								title={
+									isLogRotateActive
+										? "Activate Log Rotate"
+										: "Deactivate Log Rotate"
+								}
+								description={
+									isLogRotateActive
+										? "This will make the logs rotate on interval 1 day and maximum size of 100 MB and maximum 6 logs"
+										: "The log rotation will be disabled"
+								}
+								onClick={() => {
+									toggleLogRotate({
+										enable: !isLogRotateActive,
+									})
+										.then(() => {
+											toast.success(
+												`Log rotate ${isLogRotateActive ? "activated" : "deactivated"}`,
+											);
+											refetchLogRotate();
+										})
+										.catch((err) => {
+											toast.error(err.message);
+										});
+								}}
+							>
+								<Button variant="secondary">
+									{isLogRotateActive
+										? "Activate Log Rotate"
+										: "Deactivate Log Rotate"}
 								</Button>
-							)}
-							{isLogRotateActive && (
-								<Button
-									variant="secondary"
-									onClick={() => {
-										deactivateLogRotate()
-											.then(() => {
-												toast.success("Log rotate deactivated");
-												refetchLogRotate();
-											})
-											.catch((err) => {
-												toast.error(err.message);
-											});
-									}}
-								>
-									Deactivate Log Rotate
-								</Button>
-							)}
+							</DialogAction>
 						</div>
 					</div>
 				</CardHeader>
diff --git a/apps/dokploy/components/shared/dialog-action.tsx b/apps/dokploy/components/shared/dialog-action.tsx
new file mode 100644
index 000000000..e2ebd88bc
--- /dev/null
+++ b/apps/dokploy/components/shared/dialog-action.tsx
@@ -0,0 +1,47 @@
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "../ui/button";
+import { AlertCircle, TrashIcon } from "lucide-react";
+
+interface Props {
+	title?: string;
+	description?: string;
+	onClick: () => void;
+	children?: React.ReactNode;
+}
+
+export const DialogAction = ({
+	onClick,
+	children,
+	description,
+	title,
+}: Props) => {
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>
+						{title ?? "Are you absolutely sure?"}
+					</AlertDialogTitle>
+					<AlertDialogDescription>
+						{description ?? "This action cannot be undone."}
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction onClick={onClick}>Confirm</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};
diff --git a/apps/dokploy/server/api/routers/settings.ts b/apps/dokploy/server/api/routers/settings.ts
index 59fcdec1c..30ec711cf 100644
--- a/apps/dokploy/server/api/routers/settings.ts
+++ b/apps/dokploy/server/api/routers/settings.ts
@@ -373,16 +373,24 @@ export const settingsRouter = createTRPCRouter({
 		const processedLogs = processLogs(rawConfig as string);
 		return processedLogs || [];
 	}),
-	activateLogRotate: adminProcedure.mutation(async () => {
-		await logRotationManager.activate();
-		return true;
-	}),
-	deactivateLogRotate: adminProcedure.mutation(async () => {
-		return await logRotationManager.deactivate();
-	}),
 	getLogRotateStatus: adminProcedure.query(async () => {
 		return await logRotationManager.getStatus();
 	}),
+	toggleLogRotate: adminProcedure
+		.input(
+			z.object({
+				enable: z.boolean(),
+			}),
+		)
+		.mutation(async ({ input }) => {
+			if (input.enable) {
+				await logRotationManager.activate();
+			} else {
+				await logRotationManager.deactivate();
+			}
+
+			return true;
+		}),
 	haveActivateRequests: adminProcedure.query(async () => {
 		const config = readMainConfig();
 
@@ -402,22 +410,17 @@ export const settingsRouter = createTRPCRouter({
 			}),
 		)
 		.mutation(async ({ input }) => {
-			const config = readMainConfig();
-			if (!config) return false;
+			const mainConfig = readMainConfig();
+			if (!mainConfig) return false;
+
+			const currentConfig = load(mainConfig) as {
+				accessLog?: {
+					filePath: string;
+				};
+			};
 
 			if (input.enable) {
-				const parsedConfig = load(config) as {
-					accessLog?: {
-						filePath: string;
-						format: string;
-						bufferingSize: number;
-						filters?: {
-							retryAttempts?: boolean;
-							minDuration?: string;
-						};
-					};
-				};
-				const config2 = {
+				const config = {
 					accessLog: {
 						filePath: "/etc/dokploy/traefik/dynamic/access.log",
 						format: "json",
@@ -428,19 +431,13 @@ export const settingsRouter = createTRPCRouter({
 						},
 					},
 				};
-				parsedConfig.accessLog = config2.accessLog;
-				writeMainConfig(dump(parsedConfig));
+				currentConfig.accessLog = config.accessLog;
 			} else {
-				const parsedConfig = load(config) as {
-					accessLog?: {
-						filePath: string;
-					};
-				};
-
-				delete parsedConfig.accessLog;
-				writeMainConfig(dump(parsedConfig));
+				currentConfig.accessLog = undefined;
 			}
 
+			writeMainConfig(dump(currentConfig));
+
 			return true;
 		}),
 });
diff --git a/apps/dokploy/server/utils/access-log/handler.ts b/apps/dokploy/server/utils/access-log/handler.ts
index c7c5d71e3..3fd7e5c99 100644
--- a/apps/dokploy/server/utils/access-log/handler.ts
+++ b/apps/dokploy/server/utils/access-log/handler.ts
@@ -99,7 +99,7 @@ class LogRotationManager {
 				await this.deactivateStream();
 			}
 			await execAsync(
-				"docker kill -s USR1 $(docker ps -q --filter name=traefik)",
+				"docker kill -s USR1 $(docker ps -q --filter name=dokploy-traefik)",
 			);
 			console.log("USR1 Signal send to Traefik");
 		} catch (error) {