From 7a68cc76c2d5d7a66f080afdfcb6c5cd09fc25b5 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Tue, 13 Aug 2024 20:32:46 +0200
Subject: [PATCH] fix: improve logviewer behavior when job is loading

---
 .../src/lib/components/DisplayResult.svelte   | 19 +++++++++----------
 frontend/src/lib/components/LogViewer.svelte  |  4 ----
 .../src/lib/components/ModulePreview.svelte   |  2 +-
 .../display/AppJobIdLogComponent.svelte       |  2 +-
 .../apps/editor/AppEditorHeader.svelte        | 14 ++++++++------
 .../apps/editor/RunnableJobPanel.svelte       | 18 +++++++++---------
 .../src/lib/components/jobs/JobPreview.svelte |  2 +-
 .../src/lib/components/runs/JobPreview.svelte |  4 ++--
 .../components/scriptEditor/LogPanel.svelte   |  2 +-
 .../(root)/(logged)/run/[...run]/+page.svelte |  2 +-
 10 files changed, 33 insertions(+), 36 deletions(-)

diff --git a/frontend/src/lib/components/DisplayResult.svelte b/frontend/src/lib/components/DisplayResult.svelte
index 2a6268d55e..342cfd2625 100644
--- a/frontend/src/lib/components/DisplayResult.svelte
+++ b/frontend/src/lib/components/DisplayResult.svelte
@@ -378,17 +378,14 @@
 			/>
 		{/each}</div
 	>
-{:else}
-	<div
+{:else}<div
 		class="inline-highlight relative grow {['plain', 'markdown'].includes(resultKind ?? '')
 			? ''
 			: 'min-h-[200px]'}"
-	>
-		{#if result != undefined && length != undefined && largeObject != undefined}
-			<div class="flex justify-between items-center w-full">
-				<div class="text-tertiary text-sm">
-					{#if !hideAsJson && !['json', 's3object'].includes(resultKind ?? '') && typeof result === 'object'}
-						<ToggleButtonGroup
+		>{#if result != undefined && length != undefined && largeObject != undefined}<div
+				class="flex justify-between items-center w-full"
+				><div class="text-tertiary text-sm">
+					{#if !hideAsJson && !['json', 's3object'].includes(resultKind ?? '') && typeof result === 'object'}<ToggleButtonGroup
 							class="h-6"
 							selected={forceJson ? 'json' : resultKind?.startsWith('table-') ? 'table' : 'pretty'}
 							on:selected={(ev) => {
@@ -538,11 +535,13 @@
 					</div>
 				{:else if !forceJson && resultKind == 'error' && result?.error}
 					<div class="flex flex-col items-start">
-						<span class="text-red-500 font-semibold text-sm whitespace-pre-wrap"
+						<span class="text-red-500 pt-2 font-semibold !text-xs whitespace-pre-wrap"
 							>{#if result.error.name || result.error.message}{result.error.name}: {result.error
 									.message}{:else}{JSON.stringify(result.error, null, 4)}{/if}</span
 						>
-						<pre class="text-sm whitespace-pre-wrap text-primary">{result.error.stack ?? ''}</pre>
+						<pre class="text-xs pt-2 whitespace-pre-wrap text-primary"
+							>{result.error.stack ?? ''}</pre
+						>
 						<slot />
 					</div>
 				{:else if !forceJson && resultKind == 'approval'}<div class="flex flex-col gap-3 mt-2 mx-4">
diff --git a/frontend/src/lib/components/LogViewer.svelte b/frontend/src/lib/components/LogViewer.svelte
index a8437be3ea..522f4075f8 100644
--- a/frontend/src/lib/components/LogViewer.svelte
+++ b/frontend/src/lib/components/LogViewer.svelte
@@ -96,10 +96,6 @@
 		return content
 	}
 
-	$: if (content != undefined && isLoading) {
-		isLoading = false
-	}
-
 	$: truncatedContent && scrollToBottom()
 
 	$: html = ansi_up.ansi_to_html(
diff --git a/frontend/src/lib/components/ModulePreview.svelte b/frontend/src/lib/components/ModulePreview.svelte
index 2139d69548..08cc1d7c02 100644
--- a/frontend/src/lib/components/ModulePreview.svelte
+++ b/frontend/src/lib/components/ModulePreview.svelte
@@ -138,7 +138,7 @@
 					duration={testJob?.['duration_ms']}
 					mem={testJob?.['mem_peak']}
 					content={testJob?.logs}
-					isLoading={testIsLoading}
+					isLoading={testIsLoading && testJob?.['running'] == false}
 					tag={testJob?.tag}
 				/>
 			</Pane>
diff --git a/frontend/src/lib/components/apps/components/display/AppJobIdLogComponent.svelte b/frontend/src/lib/components/apps/components/display/AppJobIdLogComponent.svelte
index ec5f25f30c..9287bc09e0 100644
--- a/frontend/src/lib/components/apps/components/display/AppJobIdLogComponent.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppJobIdLogComponent.svelte
@@ -98,7 +98,7 @@
 				duration={testJob?.['duration_ms']}
 				mem={testJob?.['mem_peak']}
 				content={testJob?.logs}
-				isLoading={testIsLoading}
+				isLoading={testIsLoading && testJob?.['running'] == false}
 				tag={testJob?.tag}
 			/>
 		</div>
diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
index 5374449d21..35d873020b 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
@@ -979,8 +979,10 @@
 				You will still need to deploy the app to make visible the latest changes
 			</Alert>
 
-			<a href="https://www.windmill.dev/docs/advanced/external_auth_with_jwt#embed-public-apps-using-your-own-authentification" class="mt-4 text-2xs">Embed this app in your own product to be used by your own users</a>
-
+			<a
+				href="https://www.windmill.dev/docs/advanced/external_auth_with_jwt#embed-public-apps-using-your-own-authentification"
+				class="mt-4 text-2xs">Embed this app in your own product to be used by your own users</a
+			>
 		{/if}
 	</DrawerContent>
 </Drawer>
@@ -1149,14 +1151,14 @@
 														duration={job?.['duration_ms']}
 														jobId={job?.id}
 														content={job?.logs}
-														isLoading={testIsLoading}
+														isLoading={testIsLoading && job?.['running'] == false}
 														tag={job?.tag}
 													/>
 												</Pane>
 												<Pane size={50} minSize={10} class="text-sm text-secondary">
-													{#if job != undefined && 'result' in job && job.result != undefined}
-														<div class="relative h-full px-2">
-															<DisplayResult
+													{#if job != undefined && 'result' in job && job.result != undefined}<div
+															class="relative h-full px-2"
+															><DisplayResult
 																workspaceId={$workspaceStore}
 																jobId={selectedJobId}
 																result={job.result}
diff --git a/frontend/src/lib/components/apps/editor/RunnableJobPanel.svelte b/frontend/src/lib/components/apps/editor/RunnableJobPanel.svelte
index 8b21093d5a..ef5f9c4d71 100644
--- a/frontend/src/lib/components/apps/editor/RunnableJobPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/RunnableJobPanel.svelte
@@ -48,7 +48,7 @@
 
 <TestJobLoader bind:this={testJobLoader} bind:isLoading={testIsLoading} bind:job={testJob} />
 
-{#if ($runnableJobEditorPanel.focused && $selectedComponentInEditor) || logDrawerOpen || resultDrawerOpen}
+{#if true || ($runnableJobEditorPanel.focused && $selectedComponentInEditor) || logDrawerOpen || resultDrawerOpen}
 	{@const frontendJob = $runnableJobEditorPanel?.frontendJobs[$selectedComponentInEditor ?? '']}
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div
@@ -70,27 +70,27 @@
 						duration={testJob?.['duration_ms']}
 						mem={testJob?.['mem_peak']}
 						content={testJob?.logs}
-						isLoading={testIsLoading}
+						isLoading={testIsLoading && testJob?.['running'] == false}
 						tag={testJob?.tag}
 					/>
 				{/if}
 			</Pane>
 			<Pane size={frontendJob ? 70 : 50} minSize={10} class="text-sm text-tertiary">
 				{#if frontendJob}
-					<pre class="overflow-x-auto break-words relative h-full px-2 pt-2"
-						><DisplayResult bind:drawerOpen={resultDrawerOpen} result={frontendJob} /></pre
-					>
+					<div class="break-words relative h-full px-1">
+						<DisplayResult bind:drawerOpen={resultDrawerOpen} result={frontendJob} />
+					</div>
 				{:else if testJob != undefined && 'result' in testJob && testJob.result != undefined}
-					<pre class="overflow-x-auto break-words relative h-full px-2 pt-2"
-						><DisplayResult
+					<div class="break-words relative h-full px-1">
+						<DisplayResult
 							bind:drawerOpen={resultDrawerOpen}
 							workspaceId={testJob?.workspace_id}
 							jobId={testJob?.id}
 							result={testJob.result}
-						/></pre
+						/></div
 					>
 				{:else}
-					<div class="p-2">
+					<div class="px-1 pt-1">
 						{#if testIsLoading}
 							<Loader2 class="animate-spin" />
 						{:else}
diff --git a/frontend/src/lib/components/jobs/JobPreview.svelte b/frontend/src/lib/components/jobs/JobPreview.svelte
index d8be1cd491..76631956b2 100644
--- a/frontend/src/lib/components/jobs/JobPreview.svelte
+++ b/frontend/src/lib/components/jobs/JobPreview.svelte
@@ -144,7 +144,7 @@
 						duration={job?.['duration_ms']}
 						mem={job?.['mem_peak']}
 						content={job?.logs}
-						isLoading
+						isLoading={job?.['running'] == false}
 						tag={job?.tag}
 					/>
 				{/if}
diff --git a/frontend/src/lib/components/runs/JobPreview.svelte b/frontend/src/lib/components/runs/JobPreview.svelte
index b8efc93966..edd642697f 100644
--- a/frontend/src/lib/components/runs/JobPreview.svelte
+++ b/frontend/src/lib/components/runs/JobPreview.svelte
@@ -185,7 +185,7 @@
 										jobId={job.id}
 										duration={job?.['duration_ms']}
 										mem={job?.['mem_peak']}
-										isLoading={!(job && 'logs' in job && job.logs)}
+										isLoading={job?.['running'] == false}
 										content={job?.logs}
 										tag={job?.tag}
 									/>
@@ -226,7 +226,7 @@
 						duration={job?.['duration_ms']}
 						mem={job?.['mem_peak']}
 						content={job?.logs}
-						isLoading
+						isLoading={job?.['running'] == false}
 						tag={job?.tag}
 					/>
 				{/if}
diff --git a/frontend/src/lib/components/scriptEditor/LogPanel.svelte b/frontend/src/lib/components/scriptEditor/LogPanel.svelte
index fae2a5a649..4a7f2b008e 100644
--- a/frontend/src/lib/components/scriptEditor/LogPanel.svelte
+++ b/frontend/src/lib/components/scriptEditor/LogPanel.svelte
@@ -113,7 +113,7 @@
 							duration={previewJob?.['duration_ms']}
 							mem={previewJob?.['mem_peak']}
 							content={previewJob?.logs}
-							isLoading={previewIsLoading}
+							isLoading={previewJob?.['running'] == false && previewIsLoading}
 							tag={previewJob?.tag}
 						/>
 					</Pane>
diff --git a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
index 61ef4461be..c689df07ea 100644
--- a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
@@ -751,7 +751,7 @@
 										jobId={job.id}
 										duration={job?.['duration_ms']}
 										mem={job?.['mem_peak']}
-										isLoading={!(job && 'logs' in job && job.logs)}
+										isLoading={job?.['running'] == false}
 										content={job?.logs}
 										tag={job?.tag}
 									/>