make-up flow status viewer

frontend/src/lib/components/FlowPreviewContent.svelte

@@ -163,7 +163,7 @@
 
 	<FlowProgressBar {job} bind:reset={jobProgressReset} class="py-4" />
 
-	<div class="h-full overflow-y-auto mb-16 grow">
+	<div class="h-full overflow-y-auto mb-16 pt-4 grow">
 		{#if jobId}
 			<FlowStatusViewer
 				bind:flowState={$flowStateStore}

frontend/src/lib/components/FlowStatusViewer.svelte

@@ -4,7 +4,7 @@
 	import FlowJobResult from './FlowJobResult.svelte'
 	import FlowPreviewStatus from './preview/FlowPreviewStatus.svelte'
 	import Icon from 'svelte-awesome'
-	import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
+	import { faChevronDown, faChevronUp, faHourglassHalf } from '@fortawesome/free-solid-svg-icons'
 	import { createEventDispatcher } from 'svelte'
 	import { onDestroy } from 'svelte'
 	import type { FlowState } from './flows/flowState'
@@ -26,7 +26,10 @@
 	let forloop_selected = ''
 	let timeout: NodeJS.Timeout
 
-	$: innerModules = job?.flow_status?.modules.filter((x) => x.job != jobId) ?? []
+	$: innerModules =
+		job?.flow_status?.modules
+			.filter((x) => x.job != jobId)
+			.concat(job?.flow_status.failure_module ? job?.flow_status.failure_module : []) ?? []
 
 	async function loadJobInProgress() {
 		job = await JobService.getJob({
@@ -55,13 +58,15 @@
 </script>
 
 {#if job}
-	<div class="flow-root w-full space-y-4">
+	<div class="flow-root w-full space-y-4 ">
 		{#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}
-			<FlowJobResult {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>
@@ -121,7 +126,8 @@
 				</h3>
 
 				{#each innerModules as mod, i}
-					<p class="text-gray-500 mb-2 w-full ">
+					<div class="line w-8 h-10" />
+					<h3 class="text-gray-500 mb-2 w-full">
 						{#if job?.raw_flow?.modules && i < job?.raw_flow?.modules.length}
 							Step
 							<span class="font-medium text-gray-900">
@@ -135,11 +141,11 @@
 								</span>
 							{/if}
 						{:else}
-							<span class="font-medium text-gray-900"> Failure module </span>
+							<h3> Failure module </h3>
 						{/if}
-					</p>
-
-					<li class="w-full border p-6 space-y-2">
+					</h3>
+					<div class="line w-8 h-10" />
+					<li class="w-full border 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}
@@ -160,7 +166,17 @@
 								}}
 							/>
 						{:else}
-							<span>{mod.type}</span>
+							<span class="italic text-gray-600">
+								<Icon data={faHourglassHalf} class="mr-2" />
+
+								{#if mod.type == FlowStatusModule.type.WAITING_FOR_EVENT}
+									Waiting to be resumed by receivent events such as approvals
+								{:else if mod.type == FlowStatusModule.type.WAITING_FOR_PRIOR_STEPS}
+									Waiting for prior steps to complete
+								{:else if mod.type == FlowStatusModule.type.WAITING_FOR_EXECUTOR}
+									Job is ready to be executed and will be picked up by the next available worker
+								{/if}
+							</span>
 						{/if}
 					</li>
 				{/each}
@@ -170,3 +186,10 @@
 {:else}
 	Job loading...
 {/if}
+
+<style>
+	.line {
+		background: repeating-linear-gradient(to bottom, transparent 0 4px, #bbb 4px 8px) 50%/1px 100%
+			no-repeat;
+	}
+</style>

frontend/src/lib/components/progressBar/ProgressBar.svelte

@@ -41,7 +41,7 @@
 		} else {
 			return {
 				type: step.type,
-				isDone: error ? false : step.isDone,
+				isDone: step.isDone,
 				isDoneChanged: !state[i]?.isDone && step.isDone
 			}
 		}
@@ -57,13 +57,11 @@
 	}
 	$: subStepIndex = lastStep ? lastStep['index'] : undefined
 	$: length = 100 / (state.length || 1)
-	$: if (!error) {
-		if (finished) {
-			percent.set(100)
-		} else {
-			const product = length * stepIndex
-			percent.set(product < 0 ? 0 : product)
-		}
+	$: if (finished) {
+		percent.set(100)
+	} else {
+		const product = length * stepIndex
+		percent.set(product < 0 ? 0 : product)
 	}
 </script>
 

frontend/src/lib/components/progressBar/ProgressBarGeneralPart.svelte

@@ -11,7 +11,7 @@
 
 	$: finishedAndNotLast = $state.finished && $state.length - 1 !== index
 	$: if (finishedAndNotLast || $state.index > index) progress = getTween(100, duration)
-	$: if (!$state.error && ($state.finished || step.isDone)) {
+	$: if ($state.finished || step.isDone) {
 		if (index > $state.index) {
 			state.update((prev) => ({ ...prev, index }))
 		}