From 8a9c64c4027344bfb2e1e2f8d776be5b567c7c81 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 5 Dec 2022 13:21:42 +0100
Subject: [PATCH] improve flow viewer

---
 .../lib/components/FlowStatusViewer.svelte    | 21 ++++++------
 .../src/lib/components/ModuleStatus.svelte    | 33 +++++++++++++++++++
 2 files changed, 43 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/lib/components/ModuleStatus.svelte

diff --git a/frontend/src/lib/components/FlowStatusViewer.svelte b/frontend/src/lib/components/FlowStatusViewer.svelte
index 9e6a3da4ee..a5817be3b0 100644
--- a/frontend/src/lib/components/FlowStatusViewer.svelte
+++ b/frontend/src/lib/components/FlowStatusViewer.svelte
@@ -12,6 +12,7 @@
 	import DisplayResult from './DisplayResult.svelte'
 	import Tabs from './common/tabs/Tabs.svelte'
 	import { FlowGraph } from './graph'
+	import ModuleStatus from './ModuleStatus.svelte'
 
 	const dispatch = createEventDispatcher()
 
@@ -287,16 +288,7 @@
 									}}
 								/>
 							{:else}
-								<span class="italic text-gray-600">
-									<Icon data={faHourglassHalf} class="mr-2" />
-									{#if mod.type == FlowStatusModule.type.WAITING_FOR_EVENTS}
-										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>
+								<ModuleStatus type={mod.type} />
 							{/if}
 						</li>
 					{/each}
@@ -323,13 +315,20 @@
 				<div class="border-l border-gray-400">
 					{#if selectedNode}
 						{#if localFlowModuleStates[selectedNode]}
-							<Badge>{localFlowModuleStates[selectedNode].type}</Badge>
+							<div class="px-2">
+								<ModuleStatus type={localFlowModuleStates[selectedNode].type} />
+							</div>
 							<FlowJobResult
 								noBorder
 								col
 								result={localFlowModuleStates[selectedNode].result ?? {}}
 								logs={localFlowModuleStates[selectedNode].logs ?? ''}
 							/>
+						{:else}
+							<p class="p-2 text-gray-600 italic"
+								>The execution of this node has no information attached to it. The job likely did
+								not run yet</p
+							>
 						{/if}
 					{:else}<p class="p-2 text-gray-600 italic">Select a node to see its details here</p>{/if}
 				</div>
diff --git a/frontend/src/lib/components/ModuleStatus.svelte b/frontend/src/lib/components/ModuleStatus.svelte
new file mode 100644
index 0000000000..958592ad58
--- /dev/null
+++ b/frontend/src/lib/components/ModuleStatus.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { FlowStatusModule } from '$lib/gen'
+	import { faHourglassHalf } from '@fortawesome/free-solid-svg-icons'
+	import { Icon } from 'svelte-awesome'
+	import { Badge } from './common'
+
+	export let type: FlowStatusModule.type
+</script>
+
+{#if type == FlowStatusModule.type.WAITING_FOR_EVENTS}
+	<span class="italic text-waiting">
+		<Icon class=" mr-2" data={faHourglassHalf} />
+		Waiting to be resumed by resume events such as approvals
+	</span>
+{:else if type == FlowStatusModule.type.WAITING_FOR_PRIOR_STEPS}
+	<span class="italic text-gray-600">
+		<Icon data={faHourglassHalf} class="mr-2" />
+		Waiting for prior steps to complete
+	</span>
+{:else if type == FlowStatusModule.type.WAITING_FOR_EXECUTOR}
+	<span class="italic text-gray-600">
+		<Icon data={faHourglassHalf} class="mr-2" />
+		Job is ready to be executed and will be picked up by the next available worker
+	</span>
+{:else if type == FlowStatusModule.type.SUCCESS}
+	<Badge color="green">Success</Badge>
+{/if}
+
+<style>
+	.text-waiting {
+		color: #c76bf2;
+	}
+</style>