From f0da67f3b6768f1a93b007fb6cd592fde2ca22d8 Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Tue, 4 Jun 2024 15:07:01 +0200 Subject: [PATCH] fix: improve flow status viewer to display the step details on third tab --- .../src/lib/components/FlowGraphViewer.svelte | 2 +- .../lib/components/FlowGraphViewerStep.svelte | 53 +++++++++++++------ .../src/lib/components/FlowJobResult.svelte | 4 +- .../lib/components/FlowPreviewContent.svelte | 5 +- .../lib/components/FlowStatusViewer.svelte | 2 + .../components/FlowStatusViewerInner.svelte | 35 ++++++++---- frontend/src/lib/components/FlowViewer.svelte | 10 +--- .../flows/content/FlowModuleScript.svelte | 7 +++ .../graph/svelvet/container/models/index.ts | 6 --- .../svelvet/container/views/Svelvet.svelte | 8 +-- frontend/src/lib/scripts.ts | 9 ++-- .../(logged)/flows/get/[...path]/+page.svelte | 2 +- .../(root)/(logged)/run/[...run]/+page.svelte | 11 +--- 13 files changed, 89 insertions(+), 65 deletions(-) diff --git a/frontend/src/lib/components/FlowGraphViewer.svelte b/frontend/src/lib/components/FlowGraphViewer.svelte index 4f2d121828..6edeea3596 100644 --- a/frontend/src/lib/components/FlowGraphViewer.svelte +++ b/frontend/src/lib/components/FlowGraphViewer.svelte @@ -50,7 +50,7 @@ noGraph ? 'border-0 w-max' : '' )} > - + {/if} diff --git a/frontend/src/lib/components/FlowGraphViewerStep.svelte b/frontend/src/lib/components/FlowGraphViewerStep.svelte index 813d31b0c7..6e25b174cb 100644 --- a/frontend/src/lib/components/FlowGraphViewerStep.svelte +++ b/frontend/src/lib/components/FlowGraphViewerStep.svelte @@ -2,7 +2,7 @@ import HighlightCode from './HighlightCode.svelte' import InputTransformsViewer from './InputTransformsViewer.svelte' import IconedPath from './IconedPath.svelte' - import type { FlowModule, FlowValue } from '$lib/gen' + import type { FlowModule } from '$lib/gen' import { Badge, Button, Drawer, DrawerContent } from './common' import { Highlight } from 'svelte-highlight' import ObjectViewer from './propertyPicker/ObjectViewer.svelte' @@ -17,12 +17,7 @@ import FlowModuleScript from './flows/content/FlowModuleScript.svelte' import { Copy } from 'lucide-svelte' - export let flow: { - summary: string - description?: string - value: FlowValue - schema?: any - } + export let schema: any | undefined = undefined export let stepDetail: FlowModule | string | undefined = undefined let codeViewer: Drawer @@ -42,7 +37,7 @@ -
+

Step Inputs

@@ -59,7 +54,7 @@
{/if} {:else if stepDetail.value.type == 'rawscript'} -
+

Step Inputs

@@ -68,6 +63,16 @@ +

Lockfile

+
+ {#if stepDetail.value.lock} + 
{stepDetail.value.lock}
+ {:else} +

There is no lock file for this script

+ {/if} +
{/if} {/if} @@ -79,11 +84,17 @@

Click on a step to see its details

-

Flow Inputs

- + {#if schema} +

Flow Inputs

+ + {/if}
{:else if stepDetail == 'Input'} - + {#if schema} + + {:else} +

No input schema

+ {/if} {:else if stepDetail == 'Result'}

End of the flow

{:else if typeof stepDetail != 'string' && stepDetail.value} @@ -132,12 +143,12 @@

{:else if stepDetail.value.type == 'rawscript'}
-

Step Inputs

+

Step Inputs

-
+

Code

+

Lockfile

+
+ {#if stepDetail.value.lock} + 
{stepDetail.value.lock}
+ {:else} +

+ There is no lockfile for this inline script +

+ {/if} +
{:else if stepDetail.value.type == 'script'}
-

Step Inputs

+

Step Inputs

{#if stepDetail.value.path.startsWith('hub/')} diff --git a/frontend/src/lib/components/FlowJobResult.svelte b/frontend/src/lib/components/FlowJobResult.svelte index 7cf0bdde2b..e8f7de7803 100644 --- a/frontend/src/lib/components/FlowJobResult.svelte +++ b/frontend/src/lib/components/FlowJobResult.svelte @@ -64,9 +64,7 @@
Result diff --git a/frontend/src/lib/components/FlowPreviewContent.svelte b/frontend/src/lib/components/FlowPreviewContent.svelte index 201eb42940..b095671818 100644 --- a/frontend/src/lib/components/FlowPreviewContent.svelte +++ b/frontend/src/lib/components/FlowPreviewContent.svelte @@ -308,7 +308,7 @@ {/if}
-
+
-
+
{#if jobId} { diff --git a/frontend/src/lib/components/FlowStatusViewer.svelte b/frontend/src/lib/components/FlowStatusViewer.svelte index 1e7efe1914..8ad9221e24 100644 --- a/frontend/src/lib/components/FlowStatusViewer.svelte +++ b/frontend/src/lib/components/FlowStatusViewer.svelte @@ -13,6 +13,7 @@ export let selectedJobStep: string | undefined = undefined export let isOwner = false + export let wideResults = false let lastJobId: string = jobId @@ -57,4 +58,5 @@ {jobId} {workspaceId} {isOwner} + {wideResults} /> diff --git a/frontend/src/lib/components/FlowStatusViewerInner.svelte b/frontend/src/lib/components/FlowStatusViewerInner.svelte index 551d35302f..3118c62eed 100644 --- a/frontend/src/lib/components/FlowStatusViewerInner.svelte +++ b/frontend/src/lib/components/FlowStatusViewerInner.svelte @@ -6,7 +6,8 @@ type FlowStatus, type CompletedJob, type QueuedJob, - type FlowModuleValue + type FlowModuleValue, + type FlowModule } from '$lib/gen' import { workspaceStore } from '$lib/stores' import FlowJobResult from './FlowJobResult.svelte' @@ -32,6 +33,7 @@ import { dfs } from './flows/dfs' import { writable, type Writable } from 'svelte/store' import Alert from './common/alert/Alert.svelte' + import FlowGraphViewerStep from './FlowGraphViewerStep.svelte' const dispatch = createEventDispatcher() @@ -63,6 +65,8 @@ export let childFlow: boolean = false export let reducedPolling = false + export let wideResults = false + let jobResults: any[] = [] let jobFailures: boolean[] = [] @@ -423,7 +427,7 @@ let flowTimeline: FlowTimeline - let rightColumnSelect: 'timeline' | 'detail' = 'timeline' + let rightColumnSelect: 'timeline' | 'node_status' | 'node_definition' | 'user_states' = 'timeline' let slicedListJobIds: string[] = [] @@ -449,6 +453,8 @@ jobResults = [...new Array(lenToAdd), ...jobResults] updateSlicedListJobIds() } + + let stepDetail: FlowModule | string | undefined = undefined {#if notAnonynmous} @@ -456,7 +462,7 @@ As a non logged in user, you can only see jobs ran by anonymous users like you {:else if job} -
+
{#if error != ''}
{error}
diff --git a/frontend/src/lib/scripts.ts b/frontend/src/lib/scripts.ts index 830750960b..85b00f4bbd 100644 --- a/frontend/src/lib/scripts.ts +++ b/frontend/src/lib/scripts.ts @@ -118,9 +118,10 @@ export async function getScriptByPath(path: string): Promise<{ tag: string | undefined concurrent_limit: number | undefined concurrency_time_window_s: number | undefined + lock?: string }> { if (path.startsWith('hub/')) { - const { content, language, schema } = await ScriptService.getHubScriptByPath({ path }) + const { content, language, schema, lockfile } = await ScriptService.getHubScriptByPath({ path }) return { content, @@ -129,7 +130,8 @@ export async function getScriptByPath(path: string): Promise<{ description: '', tag: undefined, concurrent_limit: undefined, - concurrency_time_window_s: undefined + concurrency_time_window_s: undefined, + lock: lockfile } } else { const script = await ScriptService.getScriptByPath({ @@ -143,7 +145,8 @@ export async function getScriptByPath(path: string): Promise<{ description: script.description, tag: script.tag, concurrent_limit: script.concurrent_limit, - concurrency_time_window_s: script.concurrency_time_window_s + concurrency_time_window_s: script.concurrency_time_window_s, + lock: script.lock } } } diff --git a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte index 789dd3bc3b..116c657a6d 100644 --- a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte +++ b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte @@ -451,7 +451,7 @@ {#if stepDetail} - + {/if} diff --git a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte index 832d6f3d62..22784c9561 100644 --- a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte +++ b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte @@ -707,16 +707,9 @@ {#if job?.['scheduled_for'] && forLater(job?.['scheduled_for'])}

Scheduled to be executed later: {displayDate(job?.['scheduled_for'])}

-
- -
- {:else if job?.job_kind !== 'flow' && job?.job_kind !== 'flowpreview' && job?.job_kind !== 'singlescriptflow'} + {/if} + {#if job?.job_kind !== 'flow' && job?.job_kind !== 'flowpreview' && job?.job_kind !== 'singlescriptflow'}
{#if job?.flow_status && typeof job.flow_status == 'object' && !('_metadata' in job.flow_status)}