fix: Cancel

src/routes/applications/[id]/cancel.json.ts

@@ -3,6 +3,61 @@ import { buildQueue } from '$lib/queues';
 import type { RequestHandler } from '@sveltejs/kit';
 import * as db from '$lib/database';
 
+async function cleanupDB(buildId: string) {
+	const data = await db.prisma.build.findUnique({ where: { id: buildId } });
+	if (data?.status === 'queued' || data?.status === 'running') {
+		await db.prisma.build.update({ where: { id: buildId }, data: { status: 'failed' } });
+	}
+}
+
+async function stopBuild(buildId, applicationId) {
+	let count = 0;
+	await new Promise<void>(async (resolve, reject) => {
+		const job = await buildQueue.getJob(buildId);
+		if (!job) {
+			await cleanupDB(buildId);
+			return resolve();
+		}
+		const {
+			destinationDocker: { engine }
+		} = job?.data;
+		const host = getEngine(engine);
+		let interval = setInterval(async () => {
+			try {
+				const data = await db.prisma.build.findUnique({ where: { id: buildId } });
+				if (data?.status === 'failed') {
+					clearInterval(interval);
+					return resolve();
+				}
+				if (count > 100) {
+					clearInterval(interval);
+					return resolve();
+				}
+
+				const { stdout: buildContainers } = await asyncExecShell(
+					`DOCKER_HOST=${host} docker container ls --filter "label=coolify.buildId=${buildId}" --format '{{json .}}'`
+				);
+				if (buildContainers) {
+					const containersArray = buildContainers.trim().split('\n');
+					for (const container of containersArray) {
+						const containerObj = JSON.parse(container);
+						const id = containerObj.ID;
+						if (!containerObj.Names.startsWith(`${applicationId}`)) {
+							await removeDestinationDocker({ id, engine });
+							clearInterval(interval);
+							await saveBuildLog({
+								line: 'Canceled by user!',
+								buildId: job.data.build_id,
+								applicationId: job.data.id
+							});
+						}
+					}
+				}
+				count++;
+			} catch (error) {}
+		}, 100);
+	});
+}
 export const post: RequestHandler = async (event) => {
 	const { buildId, applicationId } = await event.request.json();
 	if (!buildId) {
@@ -14,57 +69,8 @@ export const post: RequestHandler = async (event) => {
 		};
 	}
 	try {
-		let count = 0;
+		await stopBuild(buildId, applicationId);
-		await new Promise<void>(async (resolve, reject) => {
+		await cleanupDB(buildId);
-			const job = await buildQueue.getJob(buildId);
-			if (!job) {
-				return resolve();
-			}
-			const {
-				destinationDocker: { engine }
-			} = job?.data;
-			const host = getEngine(engine);
-			let interval = setInterval(async () => {
-				try {
-					const data = await db.prisma.build.findUnique({ where: { id: buildId } });
-					if (data?.status === 'failed') {
-						clearInterval(interval);
-						return resolve();
-					}
-					if (count > 60) {
-						clearInterval(interval);
-						reject(new Error('Could not cancel build.'));
-					}
-
-					const { stdout: buildContainers } = await asyncExecShell(
-						`DOCKER_HOST=${host} docker container ls --filter "label=coolify.buildId=${buildId}" --format '{{json .}}'`
-					);
-					if (buildContainers) {
-						const containersArray = buildContainers.trim().split('\n');
-						for (const container of containersArray) {
-							const containerObj = JSON.parse(container);
-							const id = containerObj.ID;
-							if (!containerObj.Names.startsWith(`${applicationId}`)) {
-								await removeDestinationDocker({ id, engine });
-								clearInterval(interval);
-								await saveBuildLog({
-									line: 'Canceled by user!',
-									buildId: job.data.build_id,
-									applicationId: job.data.id
-								});
-							}
-						}
-					}
-					count++;
-				} catch (error) {}
-			}, 1000);
-
-			resolve();
-		});
-		const data = await db.prisma.build.findUnique({ where: { id: buildId } });
-		if (data?.status === 'queued' || data?.status === 'running') {
-			await db.prisma.build.update({ where: { id: buildId }, data: { status: 'failed' } });
-		}
 		return {
 			status: 200,
 			body: {

src/routes/applications/[id]/logs/build/_BuildLog.svelte

@@ -129,23 +129,28 @@
 				{#if currentStatus === 'running'}
 					<button
 						on:click={cancelBuild}
+						class:animation-spin={cancelInprogress}
 						class="bg-transparent hover:text-red-500 hover:bg-coolgray-500"
 						data-tooltip="Cancel build"
 					>
-						<svg
+						{#if cancelInprogress}
-							xmlns="http://www.w3.org/2000/svg"
+							Cancelling...
-							class="w-6 h-6"
+						{:else}
-							viewBox="0 0 24 24"
+							<svg
-							stroke-width="1.5"
+								xmlns="http://www.w3.org/2000/svg"
-							stroke="currentColor"
+								class="w-6 h-6"
-							fill="none"
+								viewBox="0 0 24 24"
-							stroke-linecap="round"
+								stroke-width="1.5"
-							stroke-linejoin="round"
+								stroke="currentColor"
-						>
+								fill="none"
-							<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+								stroke-linecap="round"
-							<circle cx="12" cy="12" r="9" />
+								stroke-linejoin="round"
-							<path d="M10 10l4 4m0 -4l-4 4" />
+							>
-						</svg>
+								<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+								<circle cx="12" cy="12" r="9" />
+								<path d="M10 10l4 4m0 -4l-4 4" />
+							</svg>
+						{/if}
 					</button>
 				{/if}
 			</div>