windmill-components 1.37.0 → 1.46.2

package/components/flows/content/FlowSettings.svelte

@@ -7,85 +7,116 @@ import Required from '../../Required.svelte';
 import FlowCard from '../common/FlowCard.svelte';
 import FlowSchedules from './FlowSchedules.svelte';
 import SvelteMarkdown from 'svelte-markdown';
-import { Toggle } from 'flowbite-svelte';
+import Toggle from '../../Toggle.svelte';
+import { Alert } from '../../common';
+import { FlowGraph } from '../../graph';
+import { Pane, Splitpanes } from 'svelte-splitpanes';
 export let initialPath;
 export let defaultTab = 'metadata';
 </script>
 
-<FlowCard title="Settings">
-	<Tabs selected={defaultTab}>
-		<Tab value="metadata">Metadata</Tab>
-		<Tab value="schedule">Schedule</Tab>
-		<Tab value="same-worker">Same Worker</Tab>
-
-		<svelte:fragment slot="content">
-			<TabContent value="metadata" class="p-4">
-				<Path bind:path={$flowStore.path} {initialPath} namePlaceholder="my_flow" kind="flow">
-					<div slot="ownerToolkit">
-						Flow permissions depend on their path. Select the group <span class="font-mono"
-							>all</span
-						>
-						to share your flow, and <span class="font-mono">user</span> to keep it private.
-						<a href="https://docs.windmill.dev/docs/reference/namespaces">docs</a>
+<div class="h-full overflow-hidden">
+	<FlowCard title="Settings">
+		<div class="h-full flex-1">
+			<Splitpanes horizontal>
+				<Pane size={50} minSize={20}>
+					<div class="max-w-full w-full overflow-hidden h-full">
+						{#if $flowStore.value.modules}
+							<FlowGraph
+								modules={$flowStore.value.modules}
+								failureModule={$flowStore.value.failure_module}
+							/>
+						{/if}
 					</div>
-				</Path>
+				</Pane>
+				<Pane size={50} minSize={20}>
+					<Tabs selected={defaultTab}>
+						<Tab value="metadata">Metadata</Tab>
+						<Tab value="schedule">Schedule</Tab>
+						<Tab value="same-worker">Same Worker</Tab>
 
-				<label class="block my-4">
-					<span class="text-gray-700">Summary <Required required={false} /></span>
-					<textarea
-						bind:value={$flowStore.summary}
-						class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
-						placeholder="A very short summary of the flow displayed when the flow is listed"
-						rows="1"
-						id="flow-summary"
-					/>
-				</label>
+						<svelte:fragment slot="content">
+							<TabContent value="metadata" class="p-4">
+								<Path
+									bind:path={$flowStore.path}
+									{initialPath}
+									namePlaceholder="my_flow"
+									kind="flow"
+								/>
 
-				<label class="block my-4" for="inp">
-					<span class="text-gray-700"
-						>Description<Required required={false} detail="accept markdown formatting" />
-						<textarea
-							id="inp"
-							bind:value={$flowStore.description}
-							class="
-					mt-1
-					block
-					w-full
-					rounded-md
-					border-gray-300
-					shadow-sm
-					focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
-					"
-							placeholder="A description to help users understand what this script does and how to use it."
-							rows="3"
-						/>
-					</span>
-				</label>
+								<label class="block my-4">
+									<span class="text-gray-700 text-sm">Summary <Required required={false} /></span>
+									<input
+										type="text"
+										bind:value={$flowStore.summary}
+										placeholder="A very short summary of the flow displayed when the flow is listed"
+										rows="1"
+										id="flow-summary"
+									/>
+								</label>
 
-				<div>
-					<h3 class="text-gray-700 ">Description rendered</h3>
-					<div
-						class="prose mt-5 text-xs shadow-inner shadow-blue p-4 overflow-auto"
-						style="max-height: 200px;"
-					>
-						<SvelteMarkdown source={$flowStore.description ?? ''} />
-					</div>
-				</div>
-			</TabContent>
-			<TabContent value="schedule" class="p-4">
-				<FlowSchedules />
-			</TabContent>
+								<label class="block my-4" for="inp">
+									<span class="text-gray-700 text-sm">
+										Description
+										<Required required={false} detail="markdown" />
+										<textarea
+											type="text"
+											class="text-sm"
+											id="inp"
+											bind:value={$flowStore.description}
+											placeholder="A description to help users understand what this flow does and how to use it. Markdown accepted."
+											rows="3"
+										/>
+									</span>
+								</label>
 
-			<TabContent value="same-worker" class="p-4">
-				<span class="my-2 text-sm font-bold">Same Worker</span>
+								<div>
+									<div class="font-bold pb-1 mt-4">Description preview</div>
+									{#if $flowStore.description}
+										<div
+											class="prose max-h-48 mt-5 text-xs shadow-inner shadow-blue p-4 overflow-auto"
+										>
+											<SvelteMarkdown source={$flowStore.description} />
+										</div>
+									{:else}
+										<div class="text-sm text-gray-500">
+											Enter a description to see the preview
+										</div>
+									{/if}
+								</div>
+							</TabContent>
+							<TabContent value="schedule" class="p-4">
+								<Alert type="info" title="Primary Schedule">
+									Flows can be triggered by any schedules, their webhooks or their UI but they only
+									have only one primary schedules with which they share the same path. The primary
+									schedule can be set here.
+								</Alert>
+								<div class="mt-4" />
+								<FlowSchedules />
+							</TabContent>
 
-				<Toggle
-					bind:checked={$flowStore.value.same_worker}
-					options={{
-						right: 'Same Worker'
-					}}
-				/>
-			</TabContent>
-		</svelte:fragment>
-	</Tabs>
-</FlowCard>
+							<TabContent value="same-worker" class="p-4 flex flex-col">
+								<Alert
+									type="info"
+									title="Toggle Same Worker to have all steps be ran on the same worker"
+								>
+									Steps will be run one after the other on the same worker, and will share a folder
+									at `/shared` in which they can store heavier data and pass them to the next step. <br
+									/><br />Beware that the `/shared` folder is not preserved across suspends and
+									sleeps.
+								</Alert>
+								<span class="my-2 text-sm font-bold">Same Worker</span>
+								<Toggle
+									bind:checked={$flowStore.value.same_worker}
+									options={{
+										right: 'Same Worker'
+									}}
+								/>
+							</TabContent>
+						</svelte:fragment>
+					</Tabs>
+				</Pane>
+			</Splitpanes>
+		</div>
+	</FlowCard>
+</div>

package/components/flows/flowState.d.ts

@@ -1,15 +1,15 @@
 import type { Schema } from '../../common';
-import type { Flow, FlowModule } from '../../gen';
+import type { Flow } from '../../gen';
 export declare type FlowModuleState = {
     schema: Schema;
-    childFlowModules?: FlowModuleState[];
-    previewArgs?: any;
     previewResult?: any;
+    previewArgs?: any;
 };
-export declare type FlowState = {
-    modules: FlowModuleState[];
-    failureModule: FlowModuleState;
-};
+export declare type FlowState = Record<string, FlowModuleState>;
+/**
+ * flowStateStore represents the local state of each module indexed by its id.
+ * It contains data loaded that are not contained in a Flow object i.e. schemas.
+ * We also hold the data of the results of a test job, ran by the user.
+ */
 export declare const flowStateStore: import("svelte/store").Writable<FlowState>;
 export declare function initFlowState(flow: Flow): Promise<void>;
-export declare function mapFlowModules(flowModules: FlowModule[]): Promise<FlowModuleState[]>;

package/components/flows/flowState.js

@@ -1,31 +1,46 @@
 import { writable } from 'svelte/store';
-import { emptyFlowModuleState, isEmptyFlowModule, loadFlowModuleSchema } from './flowStateUtils';
-export const flowStateStore = writable({ modules: [], failureModule: emptyFlowModuleState() });
+import { loadFlowModuleState } from './flowStateUtils';
+import { emptyFlowModuleState, isEmptyFlowModule } from './utils';
+/**
+ * flowStateStore represents the local state of each module indexed by its id.
+ * It contains data loaded that are not contained in a Flow object i.e. schemas.
+ * We also hold the data of the results of a test job, ran by the user.
+ */
+export const flowStateStore = writable({});
 export async function initFlowState(flow) {
-    const modules = await mapFlowModules(flow.value.modules);
+    const modulesState = {};
+    await mapFlowModules(flow.value.modules, modulesState);
     const failureModule = flow.value.failure_module
-        ? await mapFlowModule(flow.value.failure_module)
+        ? await loadFlowModuleState(flow.value.failure_module)
         : emptyFlowModuleState();
     flowStateStore.set({
-        modules,
-        failureModule
+        ...modulesState,
+        failure: failureModule
     });
 }
-async function mapFlowModule(flowModule) {
+/**
+ * mapFlowModule recursively explore the flow, following deeply nested loop and branches modules
+ * to build the initial state.
+ */
+async function mapFlowModule(flowModule, modulesState) {
     const value = flowModule.value;
     if (value.type === 'forloopflow') {
-        const childFlowModules = await Promise.all(value.modules.map(async (module) => loadFlowModuleSchema(module)));
-        const loopFlowModule = await loadFlowModuleSchema(flowModule);
-        return {
-            ...loopFlowModule,
-            childFlowModules
-        };
+        await mapFlowModules(value.modules, modulesState);
+    }
+    if (value.type === 'branchone') {
+        await mapFlowModules(value.default, modulesState);
+    }
+    if (value.type === 'branchone' || value.type === 'branchall') {
+        await Promise.all(value.branches.map((branchModule) => mapFlowModules(branchModule.modules, modulesState)));
     }
     if (isEmptyFlowModule(flowModule)) {
-        return emptyFlowModuleState();
+        modulesState[flowModule.id] = emptyFlowModuleState();
+    }
+    else {
+        const flowModuleState = await loadFlowModuleState(flowModule);
+        modulesState[flowModule.id] = flowModuleState;
     }
-    return loadFlowModuleSchema(flowModule);
 }
-export async function mapFlowModules(flowModules) {
-    return Promise.all(flowModules.map(async (flowModule) => mapFlowModule(flowModule)));
+async function mapFlowModules(flowModules, modulesState) {
+    await Promise.all(flowModules.map((flowModule) => mapFlowModule(flowModule, modulesState)));
 }

package/components/flows/flowStateUtils.d.ts

@@ -1,39 +1,22 @@
 import type { Schema } from '../../common';
-import { Job, Script, type FlowModule, type RawScript } from '../../gen';
-import { type FlowModuleState, type FlowState } from './flowState';
-export declare function emptyFlowModuleState(): FlowModuleState;
-export declare function loadFlowModuleSchema(flowModule: FlowModule): Promise<FlowModuleState>;
-export declare function pickScript(path: string): Promise<[FlowModule, FlowModuleState]>;
-export declare function createInlineScriptModule({ language, kind, subkind }: {
-    language: RawScript.language;
-    kind: Script.kind;
-    subkind: 'pgsql' | 'flow';
-}): Promise<[FlowModule, FlowModuleState]>;
-export declare function createLoop(): Promise<[FlowModule, FlowModuleState]>;
-export declare function fork(flowModule: FlowModule): Promise<[FlowModule, FlowModuleState]>;
-export declare function createInlineScriptModuleFromPath(path: string): Promise<FlowModule>;
-export declare function createScriptFromInlineScript({ flowModule, suffix, schema }: {
-    flowModule: FlowModule;
-    suffix: string;
-    schema: Schema;
-}): Promise<[FlowModule, FlowModuleState]>;
-export declare function isEmptyFlowModule(flowModule: FlowModule): boolean;
-declare type Result = any;
-declare type PickableProperties = {
-    flow_input?: Object;
-    previous_result: Result | undefined;
-    step?: Result[];
-};
-declare type StepPropPicker = {
-    pickableProperties: PickableProperties;
-    extraLib: string;
-};
-export declare const NEVER_TESTED_THIS_FAR = "never tested this far";
-export declare function getStepPropPicker(indexes: number[], flowInputSchema: Schema, flowState: FlowState, args: Record<string, any>): StepPropPicker;
-export declare type JobResult = {
-    job?: Job;
-    innerJobs: JobResult[];
-    loopJobs?: JobResult[];
-};
-export declare function mapJobResultsToFlowState(jobs: JobResult, upto: number): void;
-export {};
+import { Script, type FlowModule, type PathScript, type RawScript } from '../../gen';
+import { type FlowModuleState } from './flowState';
+import { Mutex } from 'async-mutex';
+export declare function loadFlowModuleState(flowModule: FlowModule): Promise<FlowModuleState>;
+export declare const idMutex: Mutex;
+export declare function nextId(): string;
+export declare function pickScript(path: string, summary: string, id: string): Promise<[FlowModule & {
+    value: PathScript;
+}, FlowModuleState]>;
+export declare function createInlineScriptModule(language: RawScript.language, kind: Script.kind, subkind: 'pgsql' | 'flow', id: string): Promise<[FlowModule, FlowModuleState]>;
+export declare function createLoop(id: string): Promise<[FlowModule, FlowModuleState]>;
+export declare function createBranches(id: string): Promise<[FlowModule, FlowModuleState]>;
+export declare function createBranchAll(id: string): Promise<[FlowModule, FlowModuleState]>;
+export declare function fork(flowModule: FlowModule): Promise<[FlowModule & {
+    value: RawScript;
+}, FlowModuleState]>;
+export declare function emptyModule(): FlowModule;
+export declare function createScriptFromInlineScript(flowModule: FlowModule, suffix: string, schema: Schema): Promise<[FlowModule & {
+    value: PathScript;
+}, FlowModuleState]>;
+export declare function deleteFlowStateById(id: string): void;

package/components/flows/flowStateUtils.js

@@ -1,81 +1,123 @@
-import { Job, Script, ScriptService } from '../../gen';
+import { Script, ScriptService } from '../../gen';
 import { initialCode } from '../../script_helpers';
 import { userStore, workspaceStore } from '../../stores';
-import { buildExtraLib, emptySchema, getScriptByPath, objectToTsType, schemaToObject, schemaToTsType } from '../../utils';
+import { getScriptByPath } from '../../utils';
 import { get } from 'svelte/store';
 import { flowStateStore } from './flowState';
 import { flowStore } from './flowStore';
-import { loadSchemaFromModule } from './utils';
-export function emptyFlowModuleState() {
-    return {
-        schema: emptySchema()
-    };
-}
-export async function loadFlowModuleSchema(flowModule) {
+import { charsToNumber, emptyFlowModuleState, findNextAvailablePath, loadSchemaFromModule, NEVER_TESTED_THIS_FAR, numberToChars } from './utils';
+import { Mutex } from 'async-mutex';
+export async function loadFlowModuleState(flowModule) {
     try {
         const { input_transforms, schema } = await loadSchemaFromModule(flowModule);
-        flowModule.input_transforms = input_transforms;
+        if (flowModule.value.type == 'script' || flowModule.value.type == 'rawscript') {
+            flowModule.value.input_transforms = input_transforms;
+        }
         return { schema, previewResult: NEVER_TESTED_THIS_FAR };
     }
     catch (e) {
-        return { schema: emptySchema(), previewResult: NEVER_TESTED_THIS_FAR };
+        console.error(e);
+        return emptyFlowModuleState();
     }
 }
-export async function pickScript(path) {
+export const idMutex = new Mutex();
+// Computes the next available id
+export function nextId() {
+    const flowState = get(flowStateStore);
+    const max = Object.keys(flowState)
+        .reduce((acc, key) => {
+        if (key === 'failure' || key.includes('branch') || key.includes('loop')) {
+            return acc;
+        }
+        else {
+            const num = charsToNumber(key);
+            return Math.max(acc, num + 1);
+        }
+    }, 0);
+    return numberToChars(max);
+}
+export async function pickScript(path, summary, id) {
     const flowModule = {
-        value: { type: 'script', path },
-        input_transforms: {}
+        id,
+        value: { type: 'script', path, input_transforms: {} },
+        summary
     };
-    return [flowModule, await loadFlowModuleSchema(flowModule)];
+    return [flowModule, await loadFlowModuleState(flowModule)];
 }
-export async function createInlineScriptModule({ language, kind, subkind }) {
+export async function createInlineScriptModule(language, kind, subkind, id) {
     const code = initialCode(language, kind, subkind);
     const flowModule = {
-        value: { type: 'rawscript', content: code, language },
-        input_transforms: {}
+        id,
+        value: { type: 'rawscript', content: code, language, input_transforms: {} }
     };
-    return [flowModule, await loadFlowModuleSchema(flowModule)];
+    return [flowModule, await loadFlowModuleState(flowModule)];
 }
-export async function createLoop() {
+export async function createLoop(id) {
     const loopFlowModule = {
+        id,
         value: {
             type: 'forloopflow',
             modules: [],
-            iterator: { type: 'javascript', expr: 'previous_result' },
+            iterator: { type: 'javascript', expr: '' },
             skip_failures: true
+        }
+    };
+    const flowModuleState = await loadFlowModuleState(loopFlowModule);
+    return [loopFlowModule, flowModuleState];
+}
+export async function createBranches(id) {
+    const branchesFlowModules = {
+        id,
+        value: {
+            type: 'branchone',
+            branches: [],
+            default: []
         },
-        input_transforms: {}
+        summary: ''
     };
-    const { schema } = await loadFlowModuleSchema(loopFlowModule);
-    return [
-        loopFlowModule,
-        {
-            schema,
-            childFlowModules: [emptyFlowModuleState()],
-            previewResult: NEVER_TESTED_THIS_FAR
-        }
-    ];
+    const flowModuleState = await loadFlowModuleState(branchesFlowModules);
+    return [branchesFlowModules, flowModuleState];
+}
+export async function createBranchAll(id) {
+    const branchesFlowModules = {
+        id,
+        value: {
+            type: 'branchall',
+            branches: []
+        },
+        summary: ''
+    };
+    const flowModuleState = await loadFlowModuleState(branchesFlowModules);
+    return [branchesFlowModules, flowModuleState];
 }
 export async function fork(flowModule) {
     if (flowModule.value.type !== 'script') {
         throw new Error('Can only fork a script module');
     }
-    const fm = await createInlineScriptModuleFromPath(flowModule.value.path ?? '');
-    return [fm, await loadFlowModuleSchema(fm)];
+    const forkedFlowModule = await createInlineScriptModuleFromPath(flowModule.value.path ?? '', flowModule.id);
+    const flowModuleState = await loadFlowModuleState(forkedFlowModule);
+    return [forkedFlowModule, flowModuleState];
 }
-export async function createInlineScriptModuleFromPath(path) {
+async function createInlineScriptModuleFromPath(path, id) {
     const { content, language } = await getScriptByPath(path);
     return {
+        id,
         value: {
             type: 'rawscript',
             language: language,
             content: content,
-            path
-        },
-        input_transforms: {}
+            path,
+            input_transforms: {}
+        }
+    };
+}
+export function emptyModule() {
+    return {
+        id: nextId(),
+        value: { type: 'identity' }
     };
 }
-export async function createScriptFromInlineScript({ flowModule, suffix, schema }) {
+export async function createScriptFromInlineScript(flowModule, suffix, schema) {
     const flow = get(flowStore);
     const user = get(userStore);
     if (flowModule.value.type != 'rawscript') {
@@ -95,7 +137,7 @@ export async function createScriptFromInlineScript({ flowModule, suffix, schema
         workspace: get(workspaceStore),
         requestBody: {
             path: availablePath,
-            summary: '',
+            summary: flowModule.summary ?? '',
             description,
             content: flowModule.value.content,
             parent_hash: undefined,
@@ -104,125 +146,11 @@ export async function createScriptFromInlineScript({ flowModule, suffix, schema
             language: flowModule.value.language
         }
     });
-    return pickScript(availablePath);
+    return pickScript(availablePath, flowModule.summary ?? '', flowModule.id);
 }
-async function findNextAvailablePath(path) {
-    try {
-        await ScriptService.getScriptByPath({
-            workspace: get(workspaceStore),
-            path
-        });
-        const [_, version] = path.split(/.*_([0-9]*)/);
-        if (version.length > 0) {
-            path = path.slice(0, -(version.length + 1));
-        }
-        path = `${path}_${Number(version) + 1}`;
-        return findNextAvailablePath(path);
-    }
-    catch (e) {
-        // Catching an error means the path is available
-        return path;
-    }
-}
-export function isEmptyFlowModule(flowModule) {
-    return flowModule.value.type === 'script' && flowModule.value.path === '';
-}
-export const NEVER_TESTED_THIS_FAR = 'never tested this far';
-export function getStepPropPicker(indexes, flowInputSchema, flowState, args) {
-    const [parentIndex, childIndex] = indexes;
-    const isInsideLoop = childIndex !== undefined;
-    const flowInput = schemaToObject(flowInputSchema, args);
-    const results = getPreviousResults(flowState.modules, parentIndex);
-    const lastResult = parentIndex == 0
-        ? flowInput
-        : results.length > 0
-            ? results[results.length - 1]
-            : NEVER_TESTED_THIS_FAR;
-    if (isInsideLoop) {
-        let forLoopFlowInput = {
-            ...flowInput,
-            iter: {
-                value: "Iteration's value",
-                index: "Iteration's index"
-            }
-        };
-        if (flowState.modules[parentIndex]?.previewArgs) {
-            forLoopFlowInput = flowState.modules[parentIndex]?.previewArgs;
-        }
-        const innerResults = getPreviousResults(flowState.modules[parentIndex]?.childFlowModules, childIndex);
-        const innerLastResult = childIndex == 0
-            ? forLoopFlowInput
-            : innerResults.length > 0
-                ? innerResults[innerResults.length - 1]
-                : NEVER_TESTED_THIS_FAR;
-        const extraLib = buildExtraLib(objectToTsType(forLoopFlowInput), objectToTsType(innerLastResult));
-        return {
-            extraLib,
-            pickableProperties: {
-                flow_input: forLoopFlowInput,
-                previous_result: innerLastResult,
-                step: innerResults
-            }
-        };
-    }
-    else {
-        const extraLib = buildExtraLib(schemaToTsType(flowInputSchema), objectToTsType(lastResult));
-        return {
-            extraLib,
-            pickableProperties: {
-                flow_input: flowInput,
-                previous_result: lastResult,
-                step: results
-            }
-        };
-    }
-}
-function getPreviousResults(flowModuleSchemas, target) {
-    if (!Array.isArray(flowModuleSchemas) || target < 1) {
-        return [];
-    }
-    const results = extractPreviewResults(flowModuleSchemas);
-    return results.splice(0, target);
-}
-function extractPreviewResults(flowModuleSchemas) {
-    return flowModuleSchemas.map((fms) => fms.previewResult);
-}
-function getResult(job) {
-    if (job && 'result' in job) {
-        return job.result;
-    }
-}
-export function mapJobResultsToFlowState(jobs, upto) {
-    const results = jobs.innerJobs.map(({ job, loopJobs }) => {
-        if (loopJobs && loopJobs.length > 0) {
-            return [
-                job?.args,
-                loopJobs.map(({ job }) => {
-                    return getResult(job);
-                })
-            ];
-        }
-        else {
-            return [job?.args, getResult(job)];
-        }
-    });
-    const old = get(flowStateStore);
-    const modules = old.modules.map((flowModuleState, index) => {
-        if (results[index] && index <= upto) {
-            if (results[index][1] != NEVER_TESTED_THIS_FAR ||
-                flowModuleState.previewResult == undefined) {
-                flowModuleState.previewArgs = results[index][0];
-                flowModuleState.previewResult = results[index][1];
-                flowModuleState.childFlowModules?.map((innerMod, j) => {
-                    const lastLoopJob = jobs.innerJobs[index].loopJobs?.length ?? 0;
-                    innerMod.previewResult = getResult(jobs.innerJobs[index].loopJobs?.[lastLoopJob - 1]?.innerJobs?.[j]?.job);
-                });
-            }
-        }
-        return flowModuleState;
-    });
-    flowStateStore.set({
-        modules,
-        failureModule: old.failureModule
+export function deleteFlowStateById(id) {
+    flowStateStore.update((fss) => {
+        delete fss[id];
+        return fss;
     });
 }

package/components/flows/flowStore.d.ts

@@ -1,5 +1,6 @@
-import type { Flow } from '../../gen';
+import type { Flow, FlowModule } from '../../gen';
 export declare type FlowMode = 'push' | 'pull';
 export declare const flowStore: import("svelte/store").Writable<Flow>;
-export declare function initFlow(flow: Flow): void;
+export declare function dfs(modules: FlowModule[]): string[];
+export declare function initFlow(flow: Flow): Promise<void>;
 export declare function copyFirstStepSchema(): Promise<void>;