fix: changing build log without reload

fix: elapsed time of a build

apps/api/src/routes/api/v1/applications/handlers.ts

@@ -1168,7 +1168,12 @@ export async function getBuildLogs(request: FastifyRequest<GetBuildLogs>) {
                 skip
             });
         }
-
+        builds = builds.map((build) => {
+            if (build.status === 'running') {
+                build.elapsed = (day().utc().diff(day(build.createdAt)) / 1000).toFixed(0);
+            }
+            return build
+        })
         return {
             builds,
             buildCount

apps/ui/src/lib/store.ts

@@ -157,3 +157,5 @@ export const addToast = (toast: AddToast) => {
     if (t.timeout) t.timeoutInterval = setTimeout(() => dismissToast(id), t.timeout)
     toasts.update((all: any) => [t, ...all])
 }
+
+export const selectedBuildId: any = writable(null)

apps/ui/src/routes/applications/[id]/__layout.svelte

@@ -67,7 +67,8 @@
 		setLocation,
 		addToast,
 		isDeploymentEnabled,
-		checkIfDeploymentEnabledApplications
+		checkIfDeploymentEnabledApplications,
+		selectedBuildId
 	} from '$lib/store';
 	import { errorNotification, handlerNotFoundLoad } from '$lib/common';
 	import Tooltip from '$lib/components/Tooltip.svelte';
@@ -89,13 +90,10 @@
 				message: $t('application.deployment_queued'),
 				type: 'success'
 			});
-			if ($page.url.pathname.startsWith(`/applications/${id}/logs/build`)) {
+			$selectedBuildId = buildId;
-				return window.location.assign(`/applications/${id}/logs/build?buildId=${buildId}`);
-			} else {
 			return await goto(`/applications/${id}/logs/build?buildId=${buildId}`, {
 				replaceState: true
 			});
-			}
 		} catch (error) {
 			return errorNotification(error);
 		}

apps/ui/src/routes/applications/[id]/logs/_BuildLog.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	export let buildId: any;
-
 	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 	const dispatch = createEventDispatcher();
 
@@ -12,6 +10,8 @@
 	import { errorNotification } from '$lib/common';
 	import Tooltip from '$lib/components/Tooltip.svelte';
 	import { day } from '$lib/dayjs';
+	import { selectedBuildId } from '$lib/store';
+	
 	let logs: any = [];
 	let currentStatus: any;
 	let streamInterval: any;
@@ -42,7 +42,7 @@
 				logs: responseLogs,
 				status,
 				fromDb: from
-			} = await get(`/applications/${id}/logs/build/${buildId}?sequence=${sequence}`);
+			} = await get(`/applications/${id}/logs/build/${$selectedBuildId}?sequence=${sequence}`);
 			currentStatus = status;
 			logs = logs.concat(
 				responseLogs.map((log: any) => ({ ...log, line: cleanAnsiCodes(log.line) }))
@@ -56,7 +56,7 @@
 				const nextSequence = logs[logs.length - 1]?.time || 0;
 				try {
 					const data = await get(
-						`/applications/${id}/logs/build/${buildId}?sequence=${nextSequence}`
+						`/applications/${id}/logs/build/${$selectedBuildId}?sequence=${nextSequence}`
 					);
 					status = data.status;
 					currentStatus = status;
@@ -78,7 +78,7 @@
 		try {
 			cancelInprogress = true;
 			await post(`/applications/${id}/cancel`, {
-				buildId,
+				$selectedBuildId,
 				applicationId: id
 			});
 		} catch (error) {

apps/ui/src/routes/applications/[id]/logs/build.svelte

@@ -23,7 +23,7 @@
 	export let application: any;
 	export let buildCount: any;
 	import { page } from '$app/stores';
-	import { addToast } from '$lib/store';
+	import { addToast, selectedBuildId } from '$lib/store';
 	import BuildLog from './_BuildLog.svelte';
 	import { get, post } from '$lib/api';
 	import { t } from '$lib/translations';
@@ -34,12 +34,11 @@
 	const { id } = $page.params;
 
 	let loadBuildLogsInterval: any = null;
-	let buildId: any;
 
 	let skip = 0;
 	let noMoreBuilds = buildCount < 5 || buildCount <= skip;
 	let preselectedBuildId = $page.url.searchParams.get('buildId');
-	if (preselectedBuildId) buildId = preselectedBuildId;
+	if (preselectedBuildId) $selectedBuildId = preselectedBuildId;
 
 	onMount(async () => {
 		getBuildLogs();
@@ -92,8 +91,8 @@
 		}
 	}
 	function loadBuild(build: any) {
-		buildId = build;
+		$selectedBuildId = build;
-		return changeQueryParams(buildId);
+		return changeQueryParams($selectedBuildId);
 	}
 	async function resetQueue() {
 		const sure = confirm(
@@ -192,7 +191,7 @@
 					class:rounded-tr={index === 0}
 					class:rounded-br={index === builds.length - 1}
 					class="flex cursor-pointer items-center justify-center py-4 no-underline transition-all duration-100 hover:bg-coolgray-300 hover:shadow-xl"
-					class:bg-coolgray-200={buildId === build.id}
+					class:bg-coolgray-200={$selectedBuildId === build.id}
 				>
 					<div class="flex-col px-2 text-center min-w-[10rem]">
 						<div class="text-sm font-bold">
@@ -213,13 +212,11 @@
 					<div class="w-48 text-center text-xs">
 						{#if build.status === 'running'}
 							<div>
-								{day(build.createdAt)}
-								{day()}
 								<span class="font-bold text-xl"
-									>{(day().utc().diff(day(build.createdAt)) / 1000).toFixed(0)}s</span
+									>{build.elapsed}s</span
 								>
 							</div>
-						{:else}
+						{:else if build.status !== 'queued'}
 							<div>{day(build.updatedAt).utc().fromNow()}</div>
 							<div>
 								{$t('application.build.finished_in')}
@@ -249,9 +246,9 @@
 		{/if}
 	</div>
 	<div class="flex-1 md:w-96">
-		{#if buildId}
+		{#if $selectedBuildId}
-			{#key buildId}
+			{#key $selectedBuildId}
-				<svelte:component this={BuildLog} {buildId} />
+				<svelte:component this={BuildLog} />
 			{/key}
 		{/if}
 	</div>