windmill-components 1.28.7 → 1.34.0

package/components/FlowBuilder.svelte

@@ -1,25 +1,27 @@
 <script>import { goto } from '$app/navigation';
 import { page } from '$app/stores';
-import { FlowService, ScheduleService } from '../gen';
-import { clearPreviewResults, previewResults, workspaceStore } from '../stores';
+import { FlowService, Job, ScheduleService } from '../gen';
+import { workspaceStore } from '../stores';
 import { encodeState, formatCron, loadHubScripts, pathIsEmpty, sendUserToast, setQueryWithoutLoad } from '../utils';
 import { faPlay } from '@fortawesome/free-solid-svg-icons';
 import { Breadcrumb, BreadcrumbItem, Button } from 'flowbite-svelte';
 import { onDestroy, onMount } from 'svelte';
 import Icon from 'svelte-awesome';
 import { OFFSET } from './CronInput.svelte';
+import Drawer from './Drawer.svelte';
 import FlowEditor from './FlowEditor.svelte';
 import FlowPreviewContent from './FlowPreviewContent.svelte';
-import { flowStore, mode } from './flows/flowStore';
-import { flowToMode, jobsToResults } from './flows/utils';
+import { flowStateStore, flowStateToFlow } from './flows/flowState';
+import { flowStore } from './flows/flowStore';
+import { cleanInputs } from './flows/utils';
 import ScriptSchema from './ScriptSchema.svelte';
 export let initialPath = '';
 let pathError = '';
-let scheduleArgs;
-let previewArgs;
-let scheduleEnabled;
-let scheduleCron;
 let previewOpen = false;
+let scheduleArgs = {};
+let previewArgs = {};
+let scheduleEnabled = false;
+let scheduleCron = '';
 $: step = Number($page.url.searchParams.get('step')) || 1;
 async function createSchedule(path) {
     await ScheduleService.createSchedule({
@@ -36,7 +38,7 @@ async function createSchedule(path) {
     });
 }
 async function saveFlow() {
-    const flow = flowToMode($flowStore, $mode);
+    const flow = cleanInputs(flowStateToFlow($flowStateStore, $flowStore));
     if (initialPath === '') {
         await FlowService.createFlow({
             workspace: $workspaceStore,
@@ -48,7 +50,7 @@ async function saveFlow() {
                 schema: flow.schema
             }
         });
-        if ($mode == 'pull') {
+        if (scheduleEnabled) {
             await createSchedule(flow.path);
         }
     }
@@ -103,28 +105,36 @@ async function saveFlow() {
     goto(`/flows/get/${$flowStore.path}`);
 }
 async function changeStep(step) {
-    if (step === 2 && previewOpen) {
-        previewOpen = false;
-    }
     goto(`?step=${step}`);
 }
+flowStateStore.subscribe((flowState) => {
+    if (flowState) {
+        flowStore.update((flow) => {
+            if (flow) {
+                return flowStateToFlow(flowState, flow);
+            }
+            return flow;
+        });
+    }
+});
 flowStore.subscribe((flow) => {
     if (flow) {
-        setQueryWithoutLoad($page.url, 'state', encodeState(flowToMode(flow, $mode)));
+        setQueryWithoutLoad($page.url, 'state', encodeState(flow));
     }
 });
 onMount(() => {
     loadHubScripts();
-    clearPreviewResults();
 });
 onDestroy(() => {
     //@ts-ignore
     $flowStore = undefined;
+    //@ts-ignore
+    $flowStateStore = undefined;
 });
 </script>
 
 <div class="flex flex-row w-full h-full justify-between">
-	<div class={`flex flex-col mb-96 m-auto w-full sm:w-3/4 lg:w-2/3 xl:w-1/2`}>
+	<div class={`flex flex-col mb-96 m-auto w-full sm:w-3/4 lg:w-2/3`}>
 		<!-- Nav between steps-->
 		<div class="justify-between flex flex-row w-full my-4">
 			<Breadcrumb>
@@ -157,6 +167,12 @@ onDestroy(() => {
 					</button>
 				{:else}
 					<button class="default-button px-6 self-end" on:click={saveFlow}>Save</button>
+					<button
+						class="default-button-secondary px-6 max-h-8 mr-2"
+						on:click={async () => {
+							changeStep(1)
+						}}>Back</button
+					>
 				{/if}
 			</div>
 		</div>
@@ -169,7 +185,7 @@ onDestroy(() => {
 
 		<!-- metadata -->
 
-		{#if $flowStore}
+		{#if $flowStateStore}
 			{#if step === 1}
 				<FlowEditor
 					bind:pathError
@@ -203,20 +219,10 @@ onDestroy(() => {
 			<p>Loading</p>
 		{/if}
 	</div>
-
-	<div class={`relative h-screen w-1/3 ${previewOpen ? '' : 'hidden'}`}>
-		<div class="absolute top-0 h-full">
-			{#if $flowStore && step === 1}
-				<div class="fixed border-l-2 right-0 h-screen w-1/2 sm:w-1/3">
-					<FlowPreviewContent
-						bind:args={previewArgs}
-						on:close={() => (previewOpen = !previewOpen)}
-						on:change={(e) => {
-							previewResults.set(jobsToResults(e.detail))
-						}}
-					/>
-				</div>
-			{/if}
-		</div>
-	</div>
 </div>
+
+{#if $flowStateStore && $flowStore}
+	<Drawer bind:open={previewOpen} size="800px">
+		<FlowPreviewContent bind:args={previewArgs} on:close={() => (previewOpen = !previewOpen)} />
+	</Drawer>
+{/if}

package/components/FlowEditor.svelte

@@ -1,14 +1,9 @@
 <script>import { ScheduleService } from '../gen';
 import { workspaceStore } from '../stores';
-import { pathIsEmpty } from '../utils';
-import { faPlus } from '@fortawesome/free-solid-svg-icons';
-import { Button } from 'flowbite-svelte';
-import Icon from 'svelte-awesome';
-import FlowInput from './flows/FlowInput.svelte';
 import FlowSettings from './flows/FlowSettings.svelte';
-import { addModule, flowStore, mode } from './flows/flowStore';
-import ModuleStep from './ModuleStep.svelte';
-import Tooltip from './Tooltip.svelte';
+import { flowStateStore } from './flows/flowState';
+import { flowStore } from './flows/flowStore';
+import FlowTimeline from './flows/FlowTimeline.svelte';
 export let pathError = '';
 export let initialPath = '';
 export let scheduleArgs = {};
@@ -38,59 +33,23 @@ async function loadSchedule() {
 $: if ($flowStore && $workspaceStore && initialPath != '') {
     loadSchedule();
 }
-let open = 0;
 </script>
 
-{#if $flowStore}
-	<div class="flex space-y-8 flex-col items-center line">
-		<FlowSettings
-			bind:pathError
-			bind:initialPath
-			bind:scheduleArgs
-			{previewArgs}
-			bind:scheduleCron
-			bind:scheduleEnabled
-			bind:open
-		/>
-		<FlowInput />
-		{#each $flowStore?.value.modules as mod, i}
-			<ModuleStep bind:open bind:mod bind:args={previewArgs} {i} />
-			{#if i == 0 && $mode == 'pull'}
-				<div class="flex justify-center bg-white shadow p-2">
-					<p>
-						Starting from here, the flow for loop over items from the 1st step's result right above.
-						&nbsp; <br />For-loops insertable at other points is not supported yet but coming soon
-						(See
-						<a href="https://github.com/windmill-labs/windmill/issues/350">#350</a>.)
-					</p>
-					<Tooltip>
-						This flow being in 'Pull' mode, the rest of the flow will for loop over the list of
-						items returned by the trigger script right above. Retrieve the item value using
-						`flow_input._value`
-					</Tooltip>
-				</div>
-			{/if}
-		{/each}
-		<Button
-			disabled={pathIsEmpty($flowStore.path)}
-			class="blue-button"
-			on:click={() => {
-				addModule()
-				open = $flowStore?.value.modules.length - 1
-			}}
-		>
-			<Icon class="text-white mr-2" data={faPlus} />
-			Add step {pathIsEmpty($flowStore?.path) ? '(pick a name first!)' : ''}
-		</Button>
+{#if $flowStateStore}
+	<div class="flex space-y-8 flex-col items-center">
+		<FlowTimeline bind:args={previewArgs} bind:flowModuleSchemas={$flowStateStore}>
+			<div slot="settings">
+				<FlowSettings
+					bind:pathError
+					bind:initialPath
+					bind:scheduleArgs
+					{previewArgs}
+					bind:scheduleCron
+					bind:scheduleEnabled
+				/>
+			</div>
+		</FlowTimeline>
 	</div>
 {:else}
 	<h3>Loading flow</h3>
 {/if}
-
-<style>
-	.line {
-		background-image: linear-gradient(#e5e7eb, #e5e7eb);
-		background-size: 2px 100%;
-		background-repeat: no-repeat;
-		background-position: center center;
-	}</style>

package/components/FlowJobResult.svelte

@@ -1,23 +1,24 @@
-<script>import ChevronButton from './ChevronButton.svelte';
-import DisplayResult from './DisplayResult.svelte';
+<script>import DisplayResult from './DisplayResult.svelte';
+import Tabs from './tabs/Tabs.svelte';
+import Tab from './tabs/Tab.svelte';
+import TabPanel from './tabs/TabPanel.svelte';
+let value = 0;
 export let job;
 </script>
 
 {#if job}
-	<div class="flex flex-col ml-10">
-		<div>
-			<ChevronButton text="result" viewOptions={true}>
-				<div class="text-xs">
-					<DisplayResult result={job.result} />
-				</div>
-			</ChevronButton>
-		</div>
-		<div>
-			<ChevronButton text="logs" viewOptions={true}>
-				<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-80 border mt-1">
-					<pre class="w-full">{job.logs}</pre>
-				</div>
-			</ChevronButton>
-		</div>
+	<div>
+		<Tabs>
+			<Tab bind:value index={0}>Results</Tab>
+			<Tab bind:value index={1}>Logs</Tab>
+		</Tabs>
+		<TabPanel bind:value index={0} class="border p-2 h-36 overflow-y-scroll">
+			<DisplayResult result={job.result} />
+		</TabPanel>
+		<TabPanel bind:value index={1} class="border p-2 h-36 overflow-y-scroll">
+			<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-80 border">
+				<pre class="w-full">{job.logs}</pre>
+			</div>
+		</TabPanel>
 	</div>
 {/if}

package/components/FlowPreview.svelte

@@ -1,35 +1,28 @@
-<script>import { Job, JobService } from '../gen';
-import { workspaceStore } from '../stores';
+<script>import { workspaceStore } from '../stores';
 import { sendUserToast, truncateRev } from '../utils';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
-import { createEventDispatcher, onDestroy } from 'svelte';
+import { 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 { runFlowPreview } from './flows/utils';
 import FlowStatusViewer from './FlowStatusViewer.svelte';
 import RunForm from './RunForm.svelte';
 import Tabs from './Tabs.svelte';
-const dispatch = createEventDispatcher();
 export let i;
 export let flow;
-export let schemas = [];
+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) {
@@ -40,7 +33,7 @@ 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) {
@@ -54,21 +47,6 @@ function setInputTransformFromArgs(flow, args) {
     flow.value.modules[0].input_transform = input_transform;
     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
@@ -116,12 +94,13 @@ onDestroy(() => {
 		/>
 	{/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,17 +1,15 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Schema } from '../common';
-import { type Flow } from '../gen';
+import type { Flow } from '../gen';
 declare const __propDef: {
     props: {
         i: number;
         flow: Flow;
-        schemas?: Schema[] | undefined;
+        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,80 @@
-<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) => 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>;
     };