windmill-components 1.28.6 → 1.35.0

package/components/FlowPreview.svelte

@@ -1,36 +1,28 @@
-<script>import { Job, JobService } from '../gen';
-import { workspaceStore } from '../stores';
-import { sendUserToast, truncateRev } from '../utils';
+<script>import { sendUserToast, truncateRev } from '../utils';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
-import { createEventDispatcher, onDestroy } from 'svelte';
 import Icon from 'svelte-awesome';
-import FlowJobResult from './FlowJobResult.svelte';
-import { flowToMode, runFlowPreview } from './flows/utils';
+import { flowStateStore, flowStateToFlow } from './flows/flowState';
+import { mapJobResultsToFlowState } from './flows/flowStateUtils';
+import { runFlowPreview } from './flows/utils';
 import FlowStatusViewer from './FlowStatusViewer.svelte';
 import RunForm from './RunForm.svelte';
-import Tabs from './Tabs.svelte';
-const dispatch = createEventDispatcher();
+import Tab from './common/tabs/Tab.svelte';
+import TabContent from './common/tabs/TabContent.svelte';
+import Tabs from './common/tabs/Tabs.svelte';
 export let i;
 export let flow;
-export let schemas = [];
-export let mode;
+export let schema;
 export let args = {};
 let stepArgs = {};
 let tab = 'upto';
 let viewPreview = false;
-let intervalId;
 let uptoText = i >= flow.value.modules.length - 1 ? 'Preview whole flow' : 'Preview up to this step';
-let job;
-let jobs = [];
 let jobId;
-$: dispatch('change', jobs);
 export async function runPreview(args) {
     viewPreview = true;
-    intervalId && clearInterval(intervalId);
+    flow = flowStateToFlow($flowStateStore, flow);
     let newFlow = tab == 'upto' ? truncateFlow(flow) : setInputTransformFromArgs(extractStep(flow), args);
     jobId = await runFlowPreview(args, newFlow);
-    jobs = [];
-    intervalId = setInterval(loadJob, 1000);
     sendUserToast(`started preview ${truncateRev(jobId, 10)}`);
 }
 function truncateFlow(flow) {
@@ -41,35 +33,20 @@ function truncateFlow(flow) {
 function extractStep(flow) {
     const localFlow = JSON.parse(JSON.stringify(flow));
     localFlow.value.modules = flow.value.modules.slice(i, i + 1);
-    localFlow.schema = schemas[i];
+    localFlow.schema = schema;
     return localFlow;
 }
 function setInputTransformFromArgs(flow, args) {
-    let input_transform = {};
+    let input_transforms = {};
     Object.entries(args).forEach(([key, value]) => {
-        input_transform[key] = {
+        input_transforms[key] = {
             type: 'static',
             value: value
         };
     });
-    flow.value.modules[0].input_transform = input_transform;
+    flow.value.modules[0].input_transforms = input_transforms;
     return flow;
 }
-async function loadJob() {
-    try {
-        job = await JobService.getJob({ workspace: $workspaceStore, id: jobId });
-        if (job?.type == 'CompletedJob') {
-            //only CompletedJob has success property
-            clearInterval(intervalId);
-        }
-    }
-    catch (err) {
-        sendUserToast(err, true);
-    }
-}
-onDestroy(() => {
-    intervalId && clearInterval(intervalId);
-});
 </script>
 
 <button
@@ -88,41 +65,43 @@ onDestroy(() => {
 
 {#if viewPreview}
 	{#if i != flow.value.modules.length}
-		<Tabs
-			tabs={[
-				['upto', uptoText],
-				['justthis', 'preview just this step']
-			]}
-			bind:tab
-		/>
-	{/if}
-	<div class="my-2" />
-	{#if tab == 'upto'}
-		<RunForm
-			runnable={truncateFlow(flow)}
-			runAction={(_, args) => runPreview(args)}
-			schedulable={false}
-			buttonText={uptoText}
-			detailed={false}
-			bind:args
-		/>
-	{:else}
-		<RunForm
-			runnable={extractStep(flow)}
-			runAction={(_, args) => runPreview(args)}
-			schedulable={false}
-			buttonText="Preview just this step"
-			detailed={false}
-			args={stepArgs}
-		/>
+		<div class="mt-2">
+			<Tabs bind:selected={tab}>
+				<Tab value="upto">{uptoText}</Tab>
+				<Tab value="justthis">Preview just this step</Tab>
+				<svelte:fragment slot="content">
+					<TabContent value="upto">
+						<RunForm
+							runnable={truncateFlow(flow)}
+							runAction={(_, args) => runPreview(args)}
+							schedulable={false}
+							buttonText={uptoText}
+							detailed={false}
+							bind:args
+						/>
+					</TabContent>
+					<TabContent value="justthis">
+						<RunForm
+							runnable={extractStep(flow)}
+							runAction={(_, args) => runPreview(args)}
+							schedulable={false}
+							buttonText="Preview just this step"
+							detailed={false}
+							args={stepArgs}
+						/>
+					</TabContent>
+				</svelte:fragment>
+			</Tabs>
+		</div>
 	{/if}
 
-	{#if job}
+	{#if jobId}
 		<div class="w-full flex justify-center">
-			<FlowStatusViewer {job} bind:jobs />
+			<FlowStatusViewer
+				{jobId}
+				on:jobsLoaded={(e) => mapJobResultsToFlowState(e.detail, tab, i)}
+				root={true}
+			/>
 		</div>
-		{#if `result` in job}
-			<FlowJobResult {job} />
-		{/if}
 	{/if}
 {/if}

package/components/FlowPreview.svelte.d.ts

@@ -1,19 +1,15 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Schema } from '../common';
-import { type Flow } from '../gen';
-import type { FlowMode } from './flows/flowStore';
+import type { Flow } from '../gen';
 declare const __propDef: {
     props: {
         i: number;
         flow: Flow;
-        schemas?: Schema[] | undefined;
-        mode: FlowMode;
+        schema: Schema;
         args?: Record<string, any> | undefined;
         runPreview?: ((args: any) => Promise<void>) | undefined;
     };
     events: {
-        change: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/components/FlowPreviewContent.svelte

@@ -1,68 +1,83 @@
-<script>import { Job, JobService } from '../gen';
+<script>import { JobService } from '../gen';
 import { workspaceStore } from '../stores';
-import { sendUserToast, truncateRev } from '../utils';
-import { faClose } from '@fortawesome/free-solid-svg-icons';
+import { faClose, faPlay } from '@fortawesome/free-solid-svg-icons';
 import { Button } from 'flowbite-svelte';
 import { createEventDispatcher, onDestroy } from 'svelte';
 import Icon from 'svelte-awesome';
-import FlowJobResult from './FlowJobResult.svelte';
+import { flowStateStore, flowStateToFlow } from './flows/flowState';
+import { mapJobResultsToFlowState } from './flows/flowStateUtils';
 import { flowStore } from './flows/flowStore';
 import { runFlowPreview } from './flows/utils';
 import FlowStatusViewer from './FlowStatusViewer.svelte';
 import SchemaForm from './SchemaForm.svelte';
-const dispatch = createEventDispatcher();
 export let args = {};
-let intervalId;
-let job;
-let jobs = [];
-let jobId;
+let jobId = undefined;
 let isValid = false;
-$: dispatch('change', jobs);
+let intervalState = 'idle';
+$: newFlow = flowStateToFlow($flowStateStore, $flowStore);
+$: steps = newFlow?.value.modules.length ?? 0;
+const dispatch = createEventDispatcher();
 export async function runPreview(args) {
-    intervalId && clearInterval(intervalId);
-    jobId = await runFlowPreview(args, $flowStore);
-    jobs = [];
-    intervalId = setInterval(loadJob, 1000);
-    sendUserToast(`started preview ${truncateRev(jobId, 10)}`);
-}
-async function loadJob() {
-    try {
-        job = await JobService.getJob({ workspace: $workspaceStore, id: jobId });
-        if (job?.type == 'CompletedJob') {
-            clearInterval(intervalId);
-        }
-    }
-    catch (err) {
-        sendUserToast(err, true);
-    }
+    jobId = await runFlowPreview(args, newFlow);
+    intervalState = 'running';
 }
 onDestroy(() => {
-    intervalId && clearInterval(intervalId);
+    intervalState = 'done';
 });
 </script>
 
-<div class="flex flex-col space-y-4 h-screen bg-white">
-	<div class="flex flex-col space-y-4 p-6 border-b-2 overflow-y-auto grow">
-		<div class="flex justify-between">
-			<h3 class="text-lg leading-6 font-bold text-gray-900">Flow Preview</h3>
+<div class="flex divide-y flex-col space-y-2 h-screen bg-white p-6 w-full">
+	<div class="flex justify-between">
+		<div class="flex flex-row justify-center items-center">
+			<div class="flex justify-center p-2 w-8 h-8 bg-blue-200 rounded-lg mr-2">
+				<Icon data={faPlay} scale={1} class="text-blue-500" />
+			</div>
 
-			<Button color="alternative" on:click={() => dispatch('close')}>
-				<Icon data={faClose} />
-			</Button>
+			<h3 class="text-lg leading-6 font-bold text-gray-900">Flow preview</h3>
 		</div>
+		<Button color="alternative" on:click={() => dispatch('close')}>
+			<Icon data={faClose} />
+		</Button>
+	</div>
+	<div class="max-h-80 overflow-y-auto">
 		<SchemaForm schema={$flowStore.schema} bind:isValid bind:args />
 	</div>
-	<Button disabled={!isValid} class="blue-button  mx-4" on:click={() => runPreview(args)} size="md">
-		Preview
-	</Button>
+	{#if intervalState === 'running'}
+		<Button
+			disabled={!isValid}
+			color="red"
+			on:click={async () => {
+				intervalState = 'canceled'
+				try {
+					jobId &&
+						(await JobService.cancelQueuedJob({
+							workspace: $workspaceStore ?? '',
+							id: jobId,
+							requestBody: {}
+						}))
+				} catch {}
+				jobId = undefined
+			}}
+			size="md"
+		>
+			Cancel
+		</Button>
+	{:else}
+		<Button disabled={!isValid} class="blue-button" on:click={() => runPreview(args)} size="md">
+			{`Run${intervalState === 'done' ? ' again' : ''}`}
+		</Button>
+	{/if}
+
 	<div class="h-full overflow-y-auto mb-16 grow">
-		{#if job}
-			<div class="w-full">
-				<FlowStatusViewer {job} bind:jobs />
-			</div>
-			{#if `result` in job}
-				<FlowJobResult {job} />
-			{/if}
+		{#if jobId}
+			<FlowStatusViewer
+				{jobId}
+				on:jobsLoaded={(e) => {
+					intervalState = 'done'
+					mapJobResultsToFlowState(e.detail, 'upto', steps - 1)
+				}}
+				root={true}
+			/>
 		{/if}
 	</div>
 </div>

package/components/FlowPreviewContent.svelte.d.ts

@@ -6,7 +6,6 @@ declare const __propDef: {
     };
     events: {
         close: CustomEvent<any>;
-        change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/FlowStatusViewer.svelte

@@ -1,218 +1,118 @@
-<script>import { scriptPathToHref, truncateRev } from '../utils';
-import { faHourglassHalf, faSpinner, faTimes } from '@fortawesome/free-solid-svg-icons';
-import Icon from 'svelte-awesome';
-import { check } from 'svelte-awesome/icons';
-import { CompletedJob, FlowStatusModule, Job, JobService, QueuedJob } from '../gen';
+<script>import { JobService } from '../gen';
 import { workspaceStore } from '../stores';
 import FlowJobResult from './FlowJobResult.svelte';
-import JobStatus from './JobStatus.svelte';
-export let job;
-export let jobs = [];
-export let fullyRetrieved = -1;
-let lastJobid;
+import FlowPreviewStatus from './preview/FlowPreviewStatus.svelte';
+import { Button } from 'flowbite-svelte';
+import Icon from 'svelte-awesome';
+import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher } from 'svelte';
+import { onDestroy } from 'svelte';
+const dispatch = createEventDispatcher();
+export let jobId;
+export let root = false;
+export let forloopJobIds = undefined;
+export let jobResult = {
+    job: undefined,
+    innerJobs: [],
+    loopJobs: []
+};
 let forloop_selected = '';
-let pres = {};
-async function loadResults() {
-    if (!('success' in job)) {
-        const mods = job?.flow_status?.modules;
-        if (mods) {
-            let i = mods?.findIndex((x) => x.type == FlowStatusModule.type.IN_PROGRESS);
-            if (i != -1) {
-                let last = mods[i];
-                jobs[i] = await JobService.getJob({
-                    workspace: $workspaceStore ?? '',
-                    id: last.job ?? ''
-                });
-                jobs = jobs;
-                pres[i]?.scroll({ top: pres[i]?.scrollHeight, behavior: 'smooth' });
-            }
-        }
+let timeout;
+async function loadJobInProgress() {
+    const job = await JobService.getJob({
+        workspace: $workspaceStore ?? '',
+        id: jobId ?? ''
+    });
+    jobResult.job = job;
+    jobResult = jobResult;
+    if (job?.type !== 'CompletedJob') {
+        timeout = setTimeout(() => loadJobInProgress(), 500);
     }
-    if (job.id != lastJobid) {
-        lastJobid = job.id;
-        jobs = [];
-        fullyRetrieved = -1;
+    else if (root) {
+        dispatch('jobsLoaded', jobResult);
     }
-    job?.flow_status?.modules?.forEach(async (x, i) => {
-        if ((i > fullyRetrieved && x.type == FlowStatusModule.type.SUCCESS) ||
-            x.type == FlowStatusModule.type.FAILURE) {
-            if (x.forloop_jobs) {
-                const forloop_jobs = [];
-                for (let j of x.forloop_jobs) {
-                    forloop_jobs.push(await JobService.getCompletedJob({ workspace: $workspaceStore, id: j }));
-                }
-                jobs[i] = forloop_jobs;
-            }
-            else {
-                jobs[i] = await JobService.getCompletedJob({ workspace: $workspaceStore, id: x.job });
-            }
-            jobs = jobs;
-            fullyRetrieved = i;
-        }
-    });
 }
-function toJob(x) {
-    return x;
-}
-function toCompletedJob(x) {
-    return x;
-}
-function toCompletedJobs(x) {
-    return x;
+$: hasModules =
+    jobResult.job &&
+        Array.isArray(jobResult.job?.raw_flow?.modules) &&
+        jobResult.job?.raw_flow?.modules.length > 1;
+function updateJobId() {
+    if (jobId !== jobResult.job?.id) {
+        loadJobInProgress();
+    }
 }
-$: $workspaceStore && job && loadResults();
+$: jobId && updateJobId();
+onDestroy(() => {
+    timeout && clearTimeout(timeout);
+});
 </script>
 
-<div class="flow-root w-full p-6">
-	<div class="flex ">
-		{#if job}
-			<div class="flex-col">
-				<a href="/run/{job?.id}" class="font-medium text-blue-600">
-					{truncateRev(job?.id ?? '', 10)}
-				</a>
+{#if jobResult.job}
+	<div class="flow-root w-full space-y-4">
+		<h3 class="text-md leading-6 font-bold text-gray-900 border-b pb-2">Preview results</h3>
+		<FlowPreviewStatus job={jobResult.job} />
+		{#if `result` in jobResult.job}
+			<FlowJobResult job={jobResult.job} />
+		{:else if jobResult.job.logs}
+			<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-80 border">
+				<pre class="w-full">{jobResult.job.logs}</pre>
 			</div>
 		{/if}
-	</div>
-	<JobStatus {job} />
 
-	<p class="text-gray-500 mb-6 w-full text-center">
-		Step
-		<span class="font-medium text-gray-900">
-			{Math.min((job?.flow_status?.step ?? 0) + 1, job?.raw_flow?.modules.length ?? 0)}
-		</span>
-		out of <span class="font-medium text-gray-900">{job?.raw_flow?.modules.length}</span>
-		<span class="mt-4" />
-	</p>
+		{#if Array.isArray(forloopJobIds) && forloopJobIds?.length > 0 && Array.isArray(jobResult.loopJobs)}
+			<h3 class="text-md leading-6 font-bold text-gray-900 border-b mb-4">
+				Loop results ({forloopJobIds.length} items)
+			</h3>
+			{#each forloopJobIds as loopJobId, j}
+				<Button
+					color={forloop_selected == loopJobId ? 'dark' : 'light'}
+					class="flex justify-between w-full"
+					on:click={() => {
+						if (forloop_selected == loopJobId) {
+							forloop_selected = ''
+						} else {
+							forloop_selected = loopJobId
+						}
+					}}
+				>
+					Iteration: #{j}: {loopJobId}
 
-	<ul class="w-full">
-		{#each job?.raw_flow?.modules ?? [] as mod, i}
-			<li class="w-full">
-				<div class="relative w-full">
-					{#if i < (job?.raw_flow?.modules ?? []).length - 1}
-						<span
-							class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
-							aria-hidden="true"
-						/>
-					{/if}
-					<div class="relative flex space-x-3">
-						<div>
-							{#if job.flow_status?.modules[i].type == FlowStatusModule.type.SUCCESS}
-								<span
-									class="h-8 w-8 rounded-full bg-green-600 flex items-center justify-center ring-8 ring-white"
-								>
-									<Icon
-										class="text-white"
-										data={check}
-										scale={0.8}
-										label="Job completed successfully"
-									/>
-								</span>
-							{:else if job.flow_status?.modules[i].type == FlowStatusModule.type.FAILURE}
-								<span
-									class="h-8 w-8 rounded-full bg-red-600 flex items-center justify-center ring-8 ring-white"
-								>
-									<Icon class="text-white" data={faTimes} scale={0.8} label="Job failed" />
-								</span>
-							{:else if job.flow_status?.modules[i].type == FlowStatusModule.type.IN_PROGRESS}
-								<span
-									class="h-8 w-8 rounded-full bg-yellow-500 flex items-center justify-center ring-8 ring-white"
-								>
-									<Icon
-										class="text-white animate-spin"
-										data={faSpinner}
-										scale={1}
-										label="Job failed"
-									/>
-								</span>
-							{:else}
-								<span
-									class="h-8 w-8 rounded-full bg-gray-400 flex items-center justify-center ring-8 ring-white"
-								>
-									<Icon class="text-white" data={faHourglassHalf} scale={1} label="Job failed" />
-								</span>
-							{/if}
-						</div>
-						<div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4 w-full">
-							<div class="w-full">
-								<p class="text-sm text-gray-500">
-									{#if mod.value.type == 'script'}
-										Script at path <a
-											target="_blank"
-											href={scriptPathToHref(mod.value.path ?? '')}
-											class="font-medium text-gray-900">{mod.value.path}</a
-										>
-									{/if}
-								</p>
-							</div>
-							<div class="text-right text-sm whitespace-nowrap text-gray-500">
-								{job.flow_status?.modules[i].type}
-								<div class=" max-h-40 overflow-y-auto">
-									{#if job.flow_status?.modules[i].forloop_jobs}
-										{#each job.flow_status?.modules[i].forloop_jobs ?? [] as job}
-											<div class="flex flex-col">
-												<a href="/run/{job}" class="font-medium text-blue-600">
-													{truncateRev(job ?? '', 10)}
-												</a>
-											</div>
-										{/each}
-									{:else if job.flow_status?.modules[i].job}
-										<a
-											href="/run/{job.flow_status?.modules[i].job}"
-											class="font-medium text-blue-600"
-										>
-											{truncateRev(job.flow_status?.modules[i].job ?? '', 10)}
-										</a>
-									{/if}
-								</div>
-							</div>
-						</div>
-					</div>
-					{#if jobs[i]}
-						{#if Array.isArray(jobs[i])}
-							<div class="flex flex-col mt-2 space-y-2 max-h-60 overflow-y-auto shadow-inner">
-								{#each toCompletedJobs(jobs[i]) as job, i}
-									<button
-										class="underline text-blue-600 hover:text-blue-700"
-										class:text-red-600={!job.success}
-										on:click={() => {
-											if (forloop_selected == job.id) {
-												forloop_selected = ''
-											} else {
-												forloop_selected = job.id
-											}
-										}}
-										>Iteration: #{i}: {job.id} {forloop_selected == job.id ? '(-)' : '(+)'}</button
-									>
-									{#if forloop_selected == job.id}
-										<svelte:self {job} />
-										{#if `result` in job}
-											<FlowJobResult {job} />
-										{/if}
-									{/if}
-								{/each}
-							</div>
-						{:else if toJob(jobs[i]).type == 'CompletedJob'}
-							<FlowJobResult job={toCompletedJob(jobs[i])} />
-						{:else if jobs[i]}
-							{#if toJob(jobs[i])?.raw_flow}
-								<div class="border-2">
-									<h2>Forloop current iteration</h2>
-									<svelte:self job={jobs[i]} />
-								</div>
-							{:else}
-								<div class="max-w-2xl mt-2 h-full">
-									<pre
-										bind:this={pres[i]}
-										class="break-all p-4 relative h-full mx-2 bg-gray-50 text-xs max-h-40 overflow-y-auto border">{toJob(
-											jobs[i]
-										).logs ?? ''}
-							</pre>
-								</div>
-							{/if}
-						{/if}
-					{/if}
+					<Icon
+						class="ml-2"
+						data={forloop_selected == loopJobId ? faChevronUp : faChevronDown}
+						scale={0.8}
+					/>
+				</Button>
+				<div class="border p-6" class:hidden={forloop_selected != loopJobId}>
+					<svelte:self jobId={loopJobId} bind:jobResult={jobResult.loopJobs[j]} />
 				</div>
-			</li>
-		{/each}
-	</ul>
-</div>
+			{/each}
+		{:else if hasModules && Array.isArray(jobResult.innerJobs)}
+			<ul class="w-full">
+				<h3 class="text-md leading-6 font-bold text-gray-900 border-b mb-4 py-2">
+					Detailed results
+				</h3>
+
+				{#each jobResult.job?.flow_status?.modules ?? [] as module, i}
+					<p class="text-gray-500 mb-6 w-full ">
+						Step
+						<span class="font-medium text-gray-900"> {i + 1} </span> out of
+						<span class="font-medium text-gray-900">{jobResult.job?.raw_flow?.modules.length}</span>
+					</p>
+
+					{#if ['InProgress', 'Success', 'Error'].includes(module.type)}
+						<li class="w-full border p-6 space-y-2">
+							<svelte:self
+								jobId={module.job}
+								bind:jobResult={jobResult.innerJobs[i]}
+								forloopJobIds={module.forloop_jobs}
+							/>
+						</li>
+					{/if}
+				{/each}
+			</ul>
+		{/if}
+	</div>
+{:else}
+	No script selected
+{/if}

package/components/FlowStatusViewer.svelte.d.ts

@@ -1,12 +1,15 @@
 import { SvelteComponentTyped } from "svelte";
-import { CompletedJob, Job, QueuedJob } from '../gen';
+import type { JobResult } from './flows/flowStateUtils';
 declare const __propDef: {
     props: {
-        job: QueuedJob | CompletedJob;
-        jobs?: (Job | Job[] | undefined)[] | undefined;
-        fullyRetrieved?: number | undefined;
+        jobId: string;
+        root?: boolean | undefined;
+        forloopJobIds?: string[] | undefined;
+        jobResult?: JobResult | undefined;
     };
     events: {
+        jobsLoaded: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};