From d0117289c9f5226a1babe5422de91c8fca9e2b70 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sun, 6 Nov 2022 19:48:47 +0100
Subject: [PATCH] nit UX on FlowPreviewContent

---
 .../src/lib/components/FlowBuilder.svelte     |  4 +-
 .../src/lib/components/FlowJobResult.svelte   | 24 ++++------
 .../lib/components/FlowStatusViewer.svelte    | 44 +++++++++++--------
 frontend/src/lib/components/LogViewer.svelte  | 12 +++--
 4 files changed, 46 insertions(+), 38 deletions(-)

diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index 8435293a2a..7da7029156 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -187,7 +187,9 @@
 
 <div class="flex flex-col flex-1 h-screen">
 	<!-- Nav between steps-->
-	<div class="justify-between flex flex-row w-full py-2 px-4 space-x-4">
+	<div
+		class="justify-between flex flex-row w-full py-2 px-4 space-x-4 overflow-x-auto scrollbar-hidden"
+	>
 		<div class="flex flex-row space-x-2">
 			<Button
 				color="light"
diff --git a/frontend/src/lib/components/FlowJobResult.svelte b/frontend/src/lib/components/FlowJobResult.svelte
index b74ffb91d5..92d98d61c3 100644
--- a/frontend/src/lib/components/FlowJobResult.svelte
+++ b/frontend/src/lib/components/FlowJobResult.svelte
@@ -2,25 +2,19 @@
 	import type { CompletedJob } from '$lib/gen'
 
 	import DisplayResult from './DisplayResult.svelte'
-	import Tabs from './common/tabs/Tabs.svelte'
-	import Tab from './common/tabs/Tab.svelte'
-	import TabContent from './common/tabs/TabContent.svelte'
 	import LogViewer from './LogViewer.svelte'
 
 	export let job: CompletedJob | undefined
 </script>
 
 {#if job}
-	<Tabs selected="results">
-		<Tab value="results">Results</Tab>
-		<Tab value="logs">Logs</Tab>
-		<svelte:fragment slot="content">
-			<TabContent value="results" class="border p-2 h-36 overflow-auto">
-				<DisplayResult result={job.result} />
-			</TabContent>
-			<TabContent value="logs" class="border h-36 overflow-auto">
-				<LogViewer content={job.logs ?? ''} isLoading={false} />
-			</TabContent>
-		</svelte:fragment>
-	</Tabs>
+	<div class="grid grid-cols-2 shadow border border-gray-800 h-full">
+		<div class="bg-white max-h-80 h-full p-1 overflow-auto relative">
+			<span class="text-gray-500">Result</span>
+			<DisplayResult result={job.result} />
+		</div>
+		<div class="overflow-auto max-h-80 h-full relative">
+			<LogViewer content={job.logs ?? ''} isLoading={false} />
+		</div>
+	</div>
 {/if}
diff --git a/frontend/src/lib/components/FlowStatusViewer.svelte b/frontend/src/lib/components/FlowStatusViewer.svelte
index 78c42f63a5..debfec1d47 100644
--- a/frontend/src/lib/components/FlowStatusViewer.svelte
+++ b/frontend/src/lib/components/FlowStatusViewer.svelte
@@ -35,14 +35,21 @@
 					: []
 			) ?? []
 
+	let errorCount = 0
 	async function loadJobInProgress() {
 		if (jobId != '00000000-0000-0000-0000-000000000000') {
-			job = await JobService.getJob({
-				workspace: $workspaceStore ?? '',
-				id: jobId ?? ''
-			})
+			try {
+				job = await JobService.getJob({
+					workspace: $workspaceStore ?? '',
+					id: jobId ?? ''
+				})
+				errorCount = 0
+			} catch (e) {
+				errorCount += 1
+				console.error(e)
+			}
 		}
-		if (job?.type !== 'CompletedJob') {
+		if (job?.type !== 'CompletedJob' && errorCount < 4) {
 			timeout = setTimeout(() => loadJobInProgress(), 500)
 		}
 	}
@@ -67,19 +74,20 @@
 		{#if innerModules.length > 0}
 			<h3 class="text-md leading-6 font-bold text-gray-900 border-b pb-2">Flow result</h3>
 		{/if}
-		<FlowPreviewStatus {job} />
-		{#if `result` in job}
-			<div class="w-full h-full overflow-auto max-h-80 bg-white">
-				<FlowJobResult {job} />
-			</div>
-		{:else if job.logs}
-			<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-80 border">
-				<pre class="w-full">{job.logs}</pre>
-			</div>
-		{/if}
-
+		<div class={innerModules.length > 0 ? 'border border-gray-400 shadow p-2' : ''}>
+			<FlowPreviewStatus {job} />
+			{#if `result` in job}
+				<div class="w-full h-ful">
+					<FlowJobResult {job} />
+				</div>
+			{:else if job.logs}
+				<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-80 border">
+					<pre class="w-full">{job.logs}</pre>
+				</div>
+			{/if}
+		</div>
 		{#if flowJobIds && Array.isArray(flowJobIds?.flowJobs) && flowJobIds?.flowJobs.length > 0}
-			<h3 class="text-md leading-6 font-bold text-gray-900 border-b mb-4">
+			<h3 class="text-md leading-6 font-bold text-gray-600 border-b mb-4">
 				Embedded flows: ({flowJobIds?.flowJobs.length} items)
 			</h3>
 			{#each flowJobIds.flowJobs as loopJobId, j}
@@ -152,7 +160,7 @@
 						{/if}
 					</h3>
 					<div class="line w-8 h-10" />
-					<li class="w-full border p-6 space-y-2 bg-blue-50/50">
+					<li class="w-full border border-gray-600 p-6 space-y-2 bg-blue-50/50">
 						{#if [FlowStatusModule.type.IN_PROGRESS, FlowStatusModule.type.SUCCESS, FlowStatusModule.type.FAILURE].includes(mod.type)}
 							<svelte:self
 								{flowState}
diff --git a/frontend/src/lib/components/LogViewer.svelte b/frontend/src/lib/components/LogViewer.svelte
index 2deb4b7f6d..3a7d77e1dc 100644
--- a/frontend/src/lib/components/LogViewer.svelte
+++ b/frontend/src/lib/components/LogViewer.svelte
@@ -18,12 +18,16 @@
 
 <div class="relative w-full h-full">
 	<div bind:this={div} class="w-full h-full overflow-auto bg-gray-50 relative">
+		<div
+			class="sticky top-0 right-0 w-full flex flex-row-reverse justify-between text-gray-500 text-sm bg-gray-50/20"
+		>
+			<div>
+				Auto scroll
+				<input type="checkbox" bind:checked={scroll} />
+			</div>
+		</div>
 		<pre class="whitespace-pre-wrap break-words bg-gray-50 text-xs w-full p-2"
 			>{#if content}{content}{:else if isLoading}Waiting for job to start...{:else}No logs are available yet{/if}</pre
 		>
 	</div>
-	<div class="absolute top-0 right-0 mr-2 text-gray-500 text-sm bg-gray-50/20">
-		Auto scroll
-		<input type="checkbox" bind:checked={scroll} />
-	</div>
 </div>