display jobs scheduled for later in flow status viewer

frontend/src/lib/components/FlowStatusViewer.svelte

@@ -8,11 +8,12 @@
 	import { createEventDispatcher } from 'svelte'
 	import { onDestroy } from 'svelte'
 	import type { FlowState } from './flows/flowState'
-	import { Badge, Button, Tab } from './common'
+	import { Button, Tab } from './common'
 	import DisplayResult from './DisplayResult.svelte'
 	import Tabs from './common/tabs/Tabs.svelte'
 	import { FlowGraph } from './graph'
 	import ModuleStatus from './ModuleStatus.svelte'
+	import { displayDate } from '$lib/utils'
 
 	const dispatch = createEventDispatcher()
 
@@ -28,12 +29,12 @@
 	export let job: Job | undefined = undefined
 	export let flowModuleStates: Record<
 		string,
-		{ type: FlowStatusModule.type; logs?: string; result?: any }
+		{ type: FlowStatusModule.type; logs?: string; result?: any; scheduled_for?: string }
 	> = {}
 
 	let localFlowModuleStates: Record<
 		string,
-		{ type: FlowStatusModule.type; logs?: string; result?: any }
+		{ type: FlowStatusModule.type; logs?: string; result?: any; scheduled_for?: string }
 	> = {}
 
 	let selectedNode: string | undefined = undefined
@@ -72,15 +73,30 @@
 				: []
 		) ?? []
 
-	$: innerModules.forEach((module, i) => {
-		if (
-			module.type === FlowStatusModule.type.WAITING_FOR_EVENTS &&
-			localFlowModuleStates?.[innerModules?.[i - 1]?.id ?? '']?.type ==
-				FlowStatusModule.type.SUCCESS
-		) {
-			localFlowModuleStates[module.id ?? ''] = { type: module.type }
-		}
-	})
+	$: innerModules && updateInnerModules()
+
+	function updateInnerModules() {
+		innerModules.forEach((module, i) => {
+			if (
+				module.type === FlowStatusModule.type.WAITING_FOR_EVENTS &&
+				localFlowModuleStates?.[innerModules?.[i - 1]?.id ?? '']?.type ==
+					FlowStatusModule.type.SUCCESS
+			) {
+				localFlowModuleStates[module.id ?? ''] = { type: module.type }
+			} else if (module.type === FlowStatusModule.type.WAITING_FOR_EXECUTOR) {
+				console.log(module.job)
+				JobService.getJob({
+					workspace: $workspaceStore ?? '',
+					id: module.job ?? ''
+				}).then((job) => {
+					localFlowModuleStates[module.id ?? ''] = {
+						type: module.type,
+						scheduled_for: 'scheduled for ' + displayDate(job?.['scheduled_for'], true)
+					}
+				})
+			}
+		})
+	}
 
 	let errorCount = 0
 	async function loadJobInProgress() {
@@ -288,7 +304,10 @@
 									}}
 								/>
 							{:else}
-								<ModuleStatus type={mod.type} />
+								<ModuleStatus
+									type={mod.type}
+									scheduled_for={localFlowModuleStates?.[mod.id ?? '']?.scheduled_for}
+								/>
 							{/if}
 						</li>
 					{/each}
@@ -316,7 +335,10 @@
 					{#if selectedNode}
 						{#if localFlowModuleStates[selectedNode]}
 							<div class="px-2">
-								<ModuleStatus type={localFlowModuleStates[selectedNode].type} />
+								<ModuleStatus
+									type={localFlowModuleStates[selectedNode]?.type}
+									scheduled_for={localFlowModuleStates[selectedNode]?.['scheduled_for']}
+								/>
 							</div>
 							<FlowJobResult
 								noBorder

frontend/src/lib/components/ModuleStatus.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
 	import { FlowStatusModule } from '$lib/gen'
+	import { displayDate } from '$lib/utils'
 	import { faHourglassHalf } from '@fortawesome/free-solid-svg-icons'
 	import { Icon } from 'svelte-awesome'
 	import { Badge } from './common'
 
 	export let type: FlowStatusModule.type
+	export let scheduled_for: string | undefined
 </script>
 
 {#if type == FlowStatusModule.type.WAITING_FOR_EVENTS}
@@ -20,7 +22,11 @@
 {: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
+		{#if scheduled_for}
+			Job has been {scheduled_for} and will be executed after that time
+		{:else}
+			Job is waiting to be executed
+		{/if}
 	</span>
 {:else if type == FlowStatusModule.type.SUCCESS}
 	<Badge color="green">Success</Badge>

frontend/src/lib/components/graph/FlowGraph.svelte

@@ -24,7 +24,10 @@
 	export let minHeight: number = 0
 	export let notSelectable = false
 	export let flowModuleStates:
-		| Record<string, { type: FlowStatusModule.type; logs?: string; result?: any }>
+		| Record<
+				string,
+				{ type: FlowStatusModule.type; logs?: string; result?: any; scheduled_for?: string }
+		  >
 		| undefined = undefined
 
 	let selectedNode: string | undefined = undefined
@@ -150,6 +153,8 @@
 				return 'rgb(253, 240, 176)'
 			case FlowStatusModule.type.WAITING_FOR_EVENTS:
 				return 'rgb(229, 176, 253)'
+			case FlowStatusModule.type.WAITING_FOR_EXECUTOR:
+				return 'rgb(255, 208, 193)'
 			default:
 				return '#fff'
 		}
@@ -193,6 +198,9 @@
 						</span>
 					</div>
 				</div>
+				<div class="text-2xs absolute -top-6 text-gray-600 truncate">${
+					flowModuleStates?.[onClickDetail.id]?.scheduled_for ?? ''
+				}<div>
 			`
 			},
 			host,

frontend/src/lib/utils.ts

@@ -54,13 +54,13 @@ export function displayDaysAgo(dateString: string): string {
 	}
 }
 
-export function displayDate(dateString: string | undefined): string {
+export function displayDate(dateString: string | undefined, displaySecond = false): string {
 	const date = new Date(dateString ?? '')
 	if (date.toString() === 'Invalid Date') {
 		return ''
 	} else {
 		return `${date.getFullYear()}/${date.getMonth() + 1
-			}/${date.getDate()} at ${date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`
+			}/${date.getDate()} at ${date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: displaySecond ? '2-digit' : undefined })}`
 	}
 }