From 18e07a781d453b867f325ae6086abe406767fd11 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 13 Dec 2023 08:14:34 +0100
Subject: [PATCH] fix: improve nested flow status viewer

---
 .../components/FlowStatusViewerInner.svelte   | 54 +++++++++----------
 .../src/lib/components/FlowTimeline.svelte    | 12 ++---
 python-client/wmill/wmill/client.py           |  2 +-
 3 files changed, 31 insertions(+), 37 deletions(-)

diff --git a/frontend/src/lib/components/FlowStatusViewerInner.svelte b/frontend/src/lib/components/FlowStatusViewerInner.svelte
index c346e7ec6f..d631342e3f 100644
--- a/frontend/src/lib/components/FlowStatusViewerInner.svelte
+++ b/frontend/src/lib/components/FlowStatusViewerInner.svelte
@@ -57,7 +57,6 @@
 
 	export let selectedNode: string | undefined = undefined
 
-	export let nestedFlow: string | undefined = undefined
 	export let globalModuleStates: Writable<Record<string, GraphModuleState>>[]
 	export let globalDurationStatuses: Writable<Record<string, DurationStatus>>[]
 
@@ -104,10 +103,10 @@
 	}
 
 	function initializeByJob(modId: string) {
-		let prefixed = prefixNF(modId)
-		if ($localDurationStatuses[prefixed] == undefined) {
-			$localDurationStatuses[prefixed] = { byJob: {} }
+		if ($localDurationStatuses[modId] == undefined) {
+			$localDurationStatuses[modId] = { byJob: {} }
 		}
+		let prefixed = modId
 		globalDurationStatuses.forEach((x) =>
 			x.update((x) => {
 				if (x[prefixed] == undefined) {
@@ -118,19 +117,17 @@
 		)
 	}
 
-	function prefixNF(s: string | undefined) {
-		return nestedFlow ? `${nestedFlow}-${s ?? ''}` : s ?? ''
-	}
 	if (flowJobIds) {
 		let common = {
 			iteration_from: Math.max(flowJobIds.flowJobs.length - 20, 0),
 			iteration_total: flowJobIds?.length
 		}
-		let prefixed = prefixNF(flowJobIds?.moduleId ?? '')
-		$localDurationStatuses[prefixed] = {
-			...($localDurationStatuses[prefixed] ?? { byJob: {} }),
+		let modId = flowJobIds?.moduleId ?? ''
+		$localDurationStatuses[modId] = {
+			...($localDurationStatuses[modId] ?? { byJob: {} }),
 			...common
 		}
+		let prefixed = modId
 		globalDurationStatuses.forEach((x) =>
 			x.update((x) => {
 				x[prefixed] = { ...(x[prefixed] ?? { byJob: {} }), ...common }
@@ -272,7 +269,7 @@
 					started_at,
 					parent_module: mod['parent_module']
 				})
-				setDurationStatusByJob(prefixNF(mod.id), job.id, {
+				setDurationStatusByJob(mod.id, job.id, {
 					created_at: job.created_at ? new Date(job.created_at).getTime() : undefined,
 					started_at
 				})
@@ -290,7 +287,7 @@
 					iteration_total: mod.iterator?.itered?.length
 					// retries: $flowStateStore?.raw_flow
 				})
-				setDurationStatusByJob(prefixNF(mod.id), job.id, {
+				setDurationStatusByJob(mod.id, job.id, {
 					created_at: job.created_at ? new Date(job.created_at).getTime() : undefined,
 					started_at,
 					duration_ms: job['duration_ms']
@@ -341,7 +338,7 @@
 					duration_ms: undefined
 				})
 
-				setDurationStatusByJob(prefixNF(modId), job_id, {
+				setDurationStatusByJob(modId, job_id, {
 					created_at,
 					started_at
 				})
@@ -358,7 +355,7 @@
 					duration_ms: undefined,
 					isListJob: true
 				})
-				setDurationStatusByJob(prefixNF(modId), job_id, {
+				setDurationStatusByJob(modId, job_id, {
 					created_at,
 					started_at,
 					duration_ms: jobLoaded.duration_ms
@@ -380,10 +377,10 @@
 					initializeByJob(id)
 
 					setDurationStatusByJob(
-						prefixNF(id),
+						id,
 						job_id,
 
-						$localDurationStatuses[prefixNF(modId)].byJob[job_id]
+						$localDurationStatuses[modId].byJob[job_id]
 					)
 				}
 			}
@@ -405,7 +402,7 @@
 		{#if isListJob}
 			{@const lenToAdd = Math.min(
 				20,
-				$localDurationStatuses[prefixNF(flowJobIds?.moduleId ?? '')]?.iteration_from ?? 0
+				$localDurationStatuses[flowJobIds?.moduleId ?? '']?.iteration_from ?? 0
 			)}
 
 			{#if (flowJobIds?.flowJobs.length ?? 0) > 20 && lenToAdd > 0}
@@ -413,7 +410,7 @@
 					For performance reasons, only the last 20 items are shown by default <button
 						class="text-primary underline ml-4"
 						on:click={() => {
-							let r = $localDurationStatuses[prefixNF(flowJobIds?.moduleId ?? '')]
+							let r = $localDurationStatuses[flowJobIds?.moduleId ?? '']
 							if (r.iteration_from) {
 								r.iteration_from -= lenToAdd
 								$localDurationStatuses = $localDurationStatuses
@@ -492,7 +489,7 @@
 			{#if isListJob}
 				{@const lenToAdd = Math.min(
 					20,
-					$localDurationStatuses[prefixNF(flowJobIds?.moduleId ?? '')]?.iteration_from ?? 0
+					$localDurationStatuses[flowJobIds?.moduleId ?? '']?.iteration_from ?? 0
 				)}
 				<h3 class="text-md leading-6 font-bold text-tertiary border-b mb-4">
 					Embedded flows: ({flowJobIds?.flowJobs.length} items)
@@ -502,7 +499,7 @@
 						For performance reasons, only the last 20 items are shown by default <button
 							class="text-primary underline ml-4"
 							on:click={() => {
-								let r = $localDurationStatuses[prefixNF(flowJobIds?.moduleId ?? '')]
+								let r = $localDurationStatuses[flowJobIds?.moduleId ?? '']
 								if (r.iteration_from) {
 									r.iteration_from -= lenToAdd
 									$localDurationStatuses = $localDurationStatuses
@@ -513,7 +510,7 @@
 						</button>
 					</p>
 				{/if}
-				{#each (flowJobIds?.flowJobs.length ?? 0) > 20 ? flowJobIds?.flowJobs?.slice($localDurationStatuses[prefixNF(flowJobIds?.moduleId ?? '')]?.iteration_from ?? 0) ?? [] : flowJobIds?.flowJobs ?? [] as loopJobId, j (loopJobId)}
+				{#each (flowJobIds?.flowJobs.length ?? 0) > 20 ? flowJobIds?.flowJobs?.slice($localDurationStatuses[flowJobIds?.moduleId ?? '']?.iteration_from ?? 0) ?? [] : flowJobIds?.flowJobs ?? [] as loopJobId, j (loopJobId)}
 					{#if render}
 						<Button
 							variant={forloop_selected === loopJobId ? 'contained' : 'border'}
@@ -536,8 +533,7 @@
 							}}
 						>
 							<span class="truncate font-mono">
-								#{($localDurationStatuses[prefixNF(flowJobIds?.moduleId ?? '')]?.iteration_from ??
-									0) +
+								#{($localDurationStatuses[flowJobIds?.moduleId ?? '']?.iteration_from ?? 0) +
 									j +
 									1}: {loopJobId}
 							</span>
@@ -587,13 +583,14 @@
 							{#if [FlowStatusModule.type.IN_PROGRESS, FlowStatusModule.type.SUCCESS, FlowStatusModule.type.FAILURE].includes(mod.type)}
 								{#if job.raw_flow?.modules[i]?.value.type == 'flow'}
 									<svelte:self
-										globalModuleStates={[localModuleStates, ...globalModuleStates]}
-										globalDurationStatuses={[localDurationStatuses, ...globalDurationStatuses]}
+										globalModuleStates={[]}
+										globalDurationStatuses={[]}
 										render={selected == 'sequence' && render}
 										{workspaceId}
 										jobId={mod.job}
-										on:jobsLoaded={(e) => onJobsLoaded(mod, e.detail)}
-										nestedFlow={nestedFlow ? `${nestedFlow}-${mod.id}` : mod.id}
+										on:jobsLoaded={(e) => {
+											onJobsLoaded(mod, e.detail)
+										}}
 									/>
 								{:else}
 									<svelte:self
@@ -676,7 +673,6 @@
 						</Tabs>
 						{#if rightColumnSelect == 'timeline'}
 							<FlowTimeline
-								{nestedFlow}
 								flowDone={job?.['success'] != undefined}
 								bind:this={flowTimeline}
 								flowModules={dfs(job.raw_flow?.modules ?? [], (x) => x.id)}
@@ -704,7 +700,7 @@
 												<JobArgs args={job.args} />
 											</div>
 										{:else}
-											<p class="p-2">No arguments</p>
+											<p class="p-2 text-secondary">No arguments</p>
 										{/if}
 									{:else if node}
 										<div class="px-2 flex gap-2 min-w-0 overflow-hidden w-full">
diff --git a/frontend/src/lib/components/FlowTimeline.svelte b/frontend/src/lib/components/FlowTimeline.svelte
index 05c4128c56..577c03b546 100644
--- a/frontend/src/lib/components/FlowTimeline.svelte
+++ b/frontend/src/lib/components/FlowTimeline.svelte
@@ -18,7 +18,6 @@
 		>
 	>
 	export let flowDone = false
-	export let nestedFlow: string | undefined = undefined
 
 	let min: undefined | number = undefined
 	let max: undefined | number = undefined
@@ -147,31 +146,30 @@
 			</div>
 		</div>
 		{#each Object.values(flowModules) as k (k)}
-			{@const key = nestedFlow ? `${nestedFlow}-${k}` : k}
 			<div class="overflow-auto max-h-60 shadow-inner dark:shadow-gray-700 relative">
-				{#if ($durationStatuses?.[key]?.iteration_from ?? 0) > 0}
+				{#if ($durationStatuses?.[k]?.iteration_from ?? 0) > 0}
 					<div class="w-full flex flex-row-reverse sticky top-0">
 						<button
 							class="!text-secondary underline mr-2 text-2xs text-right whitespace-nowrap"
 							on:click={() => {
-								let r = $durationStatuses[key]
+								let r = $durationStatuses[k]
 								if (r.iteration_from) {
 									r.iteration_from -= 20
 									$durationStatuses = $durationStatuses
 								}
 							}}
-							>Viewing iterations {$durationStatuses[key].iteration_from} to {$durationStatuses[key]
+							>Viewing iterations {$durationStatuses[k].iteration_from} to {$durationStatuses[k]
 								.iteration_total}. Load more
 						</button>
 					</div>
 				{/if}
 
 				<div class="px-2 py-2 grid grid-cols-6 w-full">
-					<div>{key}</div>
+					<div>{k}</div>
 					<div class="col-span-5 flex min-h-6 w-full">
 						{#if min && total}
 							<div class="flex flex-col gap-2 w-full p-2">
-								{#each items?.[key] ?? [] as b}
+								{#each items?.[k] ?? [] as b}
 									{@const waitingLen = b?.created_at
 										? b.started_at
 											? b.started_at - b?.created_at
diff --git a/python-client/wmill/wmill/client.py b/python-client/wmill/wmill/client.py
index 6d9045e4b7..6f5825d4ac 100644
--- a/python-client/wmill/wmill/client.py
+++ b/python-client/wmill/wmill/client.py
@@ -272,7 +272,7 @@ class Windmill:
         self,
         path: str,
         none_if_undefined: bool = False,
-    ) -> str | dict | None:
+    ) -> dict | None:
         """Get resource from Windmill"""
         try:
             return self.get(f"/w/{self.workspace}/resources/get_value_interpolated/{path}").json()