From c8bad599164c99df672d78066f3ac2d77a055b07 Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Mon, 5 Dec 2022 20:33:18 +0100 Subject: [PATCH] display jobs scheduled for later in flow status viewer --- .../lib/components/FlowStatusViewer.svelte | 50 +++++++++++++------ .../src/lib/components/ModuleStatus.svelte | 8 ++- .../src/lib/components/graph/FlowGraph.svelte | 10 +++- frontend/src/lib/utils.ts | 4 +- 4 files changed, 54 insertions(+), 18 deletions(-) diff --git a/frontend/src/lib/components/FlowStatusViewer.svelte b/frontend/src/lib/components/FlowStatusViewer.svelte index a5817be3b0..2d95c5a0c1 100644 --- a/frontend/src/lib/components/FlowStatusViewer.svelte +++ b/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} - + {/if} {/each} @@ -316,7 +335,10 @@ {#if selectedNode} {#if localFlowModuleStates[selectedNode]}
- +
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 {#if type == FlowStatusModule.type.WAITING_FOR_EVENTS} @@ -20,7 +22,11 @@ {:else if type == FlowStatusModule.type.WAITING_FOR_EXECUTOR} - 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} {:else if type == FlowStatusModule.type.SUCCESS} Success diff --git a/frontend/src/lib/components/graph/FlowGraph.svelte b/frontend/src/lib/components/graph/FlowGraph.svelte index 28cddee6b0..ea716f23dd 100644 --- a/frontend/src/lib/components/graph/FlowGraph.svelte +++ b/frontend/src/lib/components/graph/FlowGraph.svelte @@ -24,7 +24,10 @@ export let minHeight: number = 0 export let notSelectable = false export let flowModuleStates: - | Record + | 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 @@ +
${ + flowModuleStates?.[onClickDetail.id]?.scheduled_for ?? '' + }
` }, host, diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts index 505408f42a..fe51147939 100644 --- a/frontend/src/lib/utils.ts +++ b/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 })}` } }