Merge pull request #3052 from Dokploy/360-request-for-adding-the-functionality-to-terminate-container-startup-process

feat: add KillBuild component and API mutation for terminating Docker…

Author: Siumauricio

apps/dokploy/components/dashboard/application/deployments/kill-build.tsx

@@ -0,0 +1,65 @@
+import { Scissors } from "lucide-react";
+import { toast } from "sonner";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { api } from "@/utils/api";
+
+interface Props {
+	id: string;
+	type: "application" | "compose";
+}
+
+export const KillBuild = ({ id, type }: Props) => {
+	const { mutateAsync, isLoading } =
+		type === "application"
+			? api.application.killBuild.useMutation()
+			: api.compose.killBuild.useMutation();
+
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="outline" className="w-fit" isLoading={isLoading}>
+					Kill Build
+					<Scissors className="size-4" />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you sure to kill the build?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This will kill the build process
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								applicationId: id || "",
+								composeId: id || "",
+							})
+								.then(() => {
+									toast.success("Build killed successfully");
+								})
+								.catch((err) => {
+									toast.error(err.message);
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

apps/dokploy/components/dashboard/application/deployments/show-deployments.tsx

@@ -25,6 +25,7 @@ import {
 import { api, type RouterOutputs } from "@/utils/api";
 import { ShowRollbackSettings } from "../rollbacks/show-rollback-settings";
 import { CancelQueues } from "./cancel-queues";
+import { KillBuild } from "./kill-build";
 import { RefreshToken } from "./refresh-token";
 import { ShowDeployment } from "./show-deployment";
 
@@ -143,6 +144,9 @@ export const ShowDeployments = ({
 					</CardDescription>
 				</div>
 				<div className="flex flex-row items-center gap-2">
+					{(type === "application" || type === "compose") && (
+						<KillBuild id={id} type={type} />
+					)}
 					{(type === "application" || type === "compose") && (
 						<CancelQueues id={id} type={type} />
 					)}

apps/dokploy/server/api/routers/application.ts

@@ -58,7 +58,11 @@ import {
 	applications,
 } from "@/server/db/schema";
 import type { DeploymentJob } from "@/server/queues/queue-types";
-import { cleanQueuesByApplication, myQueue } from "@/server/queues/queueSetup";
+import {
+	cleanQueuesByApplication,
+	killDockerBuild,
+	myQueue,
+} from "@/server/queues/queueSetup";
 import { cancelDeployment, deploy } from "@/server/utils/deploy";
 import { uploadFileSchema } from "@/utils/schema";
 
@@ -725,7 +729,21 @@ export const applicationRouter = createTRPCRouter({
 			}
 			await cleanQueuesByApplication(input.applicationId);
 		}),
-
+	killBuild: protectedProcedure
+		.input(apiFindOneApplication)
+		.mutation(async ({ input, ctx }) => {
+			const application = await findApplicationById(input.applicationId);
+			if (
+				application.environment.project.organizationId !==
+				ctx.session.activeOrganizationId
+			) {
+				throw new TRPCError({
+					code: "UNAUTHORIZED",
+					message: "You are not authorized to kill this build",
+				});
+			}
+			await killDockerBuild("application", application.serverId);
+		}),
 	readTraefikConfig: protectedProcedure
 		.input(apiFindOneApplication)
 		.query(async ({ input, ctx }) => {

apps/dokploy/server/api/routers/compose.ts

@@ -59,7 +59,11 @@ import {
 	compose as composeTable,
 } from "@/server/db/schema";
 import type { DeploymentJob } from "@/server/queues/queue-types";
-import { cleanQueuesByCompose, myQueue } from "@/server/queues/queueSetup";
+import {
+	cleanQueuesByCompose,
+	killDockerBuild,
+	myQueue,
+} from "@/server/queues/queueSetup";
 import { cancelDeployment, deploy } from "@/server/utils/deploy";
 import { generatePassword } from "@/templates/utils";
 import { createTRPCRouter, protectedProcedure, publicProcedure } from "../trpc";
@@ -248,6 +252,21 @@ export const composeRouter = createTRPCRouter({
 			await cleanQueuesByCompose(input.composeId);
 			return { success: true, message: "Queues cleaned successfully" };
 		}),
+	killBuild: protectedProcedure
+		.input(apiFindCompose)
+		.mutation(async ({ input, ctx }) => {
+			const compose = await findComposeById(input.composeId);
+			if (
+				compose.environment.project.organizationId !==
+				ctx.session.activeOrganizationId
+			) {
+				throw new TRPCError({
+					code: "UNAUTHORIZED",
+					message: "You are not authorized to kill this build",
+				});
+			}
+			await killDockerBuild("compose", compose.serverId);
+		}),
 
 	loadServices: protectedProcedure
 		.input(apiFetchServices)

apps/dokploy/server/queues/queueSetup.ts

@@ -1,3 +1,7 @@
+import {
+	execAsync,
+	execAsyncRemote,
+} from "@dokploy/server/utils/process/execAsync";
 import { Queue } from "bullmq";
 import { redisConfig } from "./redis-connection";
 
@@ -41,4 +45,31 @@ export const cleanQueuesByCompose = async (composeId: string) => {
 	}
 };
 
+export const killDockerBuild = async (
+	type: "application" | "compose",
+	serverId: string | null,
+) => {
+	try {
+		if (type === "application") {
+			const command = `pkill -2 -f "docker build"`;
+
+			if (serverId) {
+				await execAsyncRemote(serverId, command);
+			} else {
+				await execAsync(command);
+			}
+		} else if (type === "compose") {
+			const command = `pkill -2 -f "docker compose"`;
+
+			if (serverId) {
+				await execAsyncRemote(serverId, command);
+			} else {
+				await execAsync(command);
+			}
+		}
+	} catch (error) {
+		console.error(error);
+	}
+};
+
 export { myQueue };