ui fixes

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

@@ -15,15 +15,19 @@ export const post: RequestHandler = async (event) => {
 	}
 	try {
 		let count = 0;
-		await new Promise(async (resolve, reject) => {
+		await new Promise<void>(async (resolve, reject) => {
 			const job = await buildQueue.getJob(buildId);
 			const {
 				destinationDocker: { engine }
 			} = job.data;
 			const host = getEngine(engine);
 			let interval = setInterval(async () => {
-				console.log(`Checking build ${buildId}, try ${count}`);
+				const { status } = await db.prisma.build.findUnique({ where: { id: buildId } });
-				if (count > 100) {
+				if (status === 'failed') {
+					clearInterval(interval);
+					return resolve();
+				}
+				if (count > 1200) {
 					clearInterval(interval);
 					reject(new Error('Could not cancel build.'));
 				}
@@ -51,7 +55,7 @@ export const post: RequestHandler = async (event) => {
 				} catch (error) {}
 			}, 100);
 
-			resolve('Canceled');
+			resolve();
 		});
 
 		return {

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

@@ -20,6 +20,8 @@
 	let followingInterval;
 	let logsEl;
 
+	let cancelInprogress = false;
+
 	const { id } = $page.params;
 
 	const cleanAnsiCodes = (str: string) => str.replace(/\x1B\[(\d+)m/g, '');
@@ -68,10 +70,17 @@
 		}
 	}
 	async function cancelBuild() {
-		return await post(`/applications/${id}/cancel.json`, {
+		if (cancelInprogress) return;
+		try {
+			cancelInprogress = true;
+			await post(`/applications/${id}/cancel.json`, {
 				buildId,
 				applicationId: id
 			});
+		} catch (error) {
+			console.log(error);
+			return errorNotification(error);
+		}
 	}
 	onDestroy(() => {
 		clearInterval(streamInterval);
@@ -96,7 +105,7 @@
 			<div class="flex justify-end sticky top-0 p-2">
 				<button
 					on:click={followBuild}
-					class="bg-transparent"
+					class="bg-transparent hover:text-green-500 hover:bg-coolgray-500"
 					data-tooltip="Follow logs"
 					class:text-green-500={followingBuild}
 				>
@@ -118,7 +127,11 @@
 					</svg>
 				</button>
 				{#if currentStatus === 'running'}
-					<button on:click={cancelBuild} class="bg-transparent" data-tooltip="Cancel build">
+					<button
+						on:click={cancelBuild}
+						class="bg-transparent hover:text-red-500 hover:bg-coolgray-500"
+						data-tooltip="Cancel build"
+					>
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
 							class="w-6 h-6"
@@ -130,8 +143,8 @@
 							stroke-linejoin="round"
 						>
 							<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-							<line x1="18" y1="6" x2="6" y2="18" />
+							<circle cx="12" cy="12" r="9" />
-							<line x1="6" y1="6" x2="18" y2="18" />
+							<path d="M10 10l4 4m0 -4l-4 4" />
 						</svg>
 					</button>
 				{/if}