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

- Introduced a new KillBuild component that allows users to terminate ongoing Docker builds for both applications and compose setups.
- Implemented corresponding API mutations in the application and compose routers to handle build termination requests.
- Enhanced queue setup with a killDockerBuild function to execute the termination commands on the server.

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} />
 					)}