windmill-components 1.472.1 → 1.472.3

package/package/components/FlowStatusViewerInner.svelte.d.ts

@@ -0,0 +1,51 @@
+import { SvelteComponent } from "svelte";
+import { type Job, type FlowModuleValue } from '../gen';
+import { type DurationStatus, type GraphModuleState } from './graph';
+import { type Writable } from 'svelte/store';
+declare const __propDef: {
+    props: {
+        jobId: string;
+        initialJob?: Job | undefined;
+        workspaceId?: string | undefined;
+        flowJobIds?: {
+            moduleId: string;
+            flowJobs: string[];
+            flowJobsSuccess: (boolean | undefined)[];
+            length: number;
+            branchall?: boolean;
+        } | undefined;
+        innerModule?: FlowModuleValue | undefined;
+        globalRefreshes?: Record<string, (clear: any, root: any) => Promise<void>> | undefined;
+        render?: boolean | undefined;
+        isOwner?: boolean | undefined;
+        selectedNode?: string | undefined;
+        globalModuleStates: Writable<Record<string, GraphModuleState>>[];
+        globalDurationStatuses: Writable<Record<string, DurationStatus>>[];
+        childFlow?: boolean | undefined;
+        isSubflow?: boolean | undefined;
+        reducedPolling?: boolean | undefined;
+        wideResults?: boolean | undefined;
+        hideFlowResult?: boolean | undefined;
+        workspace?: string | undefined;
+        prefix?: string | undefined;
+        subflowParentsGlobalModuleStates?: Writable<Record<string, GraphModuleState>>[] | undefined;
+        subflowParentsDurationStatuses?: Writable<Record<string, DurationStatus>>[] | undefined;
+        isForloopSelected?: boolean | undefined;
+        parentRecursiveRefresh?: Record<string, (clear: any, root: any) => Promise<void>> | undefined;
+        job?: Job | undefined;
+    };
+    events: {
+        jobsLoaded: CustomEvent<any>;
+        start: CustomEvent<any>;
+        done: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowStatusViewerInnerProps = typeof __propDef.props;
+export type FlowStatusViewerInnerEvents = typeof __propDef.events;
+export type FlowStatusViewerInnerSlots = typeof __propDef.slots;
+export default class FlowStatusViewerInner extends SvelteComponent<FlowStatusViewerInnerProps, FlowStatusViewerInnerEvents, FlowStatusViewerInnerSlots> {
+}
+export {};

package/package/components/FlowStatusWaitingForEvents.svelte

@@ -0,0 +1,149 @@
+<script>import { mergeSchema } from '../common';
+import { JobService } from '../gen';
+import { workspaceStore } from '../stores';
+import { sendUserToast } from '../toast';
+import { X } from 'lucide-svelte';
+import DisplayResult from './DisplayResult.svelte';
+import Tooltip from './Tooltip.svelte';
+import { Button } from './common';
+import SchemaForm from './SchemaForm.svelte';
+export let isOwner;
+export let workspaceId;
+export let job;
+let default_payload = {};
+let resumeUrl = undefined;
+let cancelUrl = undefined;
+let description = undefined;
+let hide_cancel = false;
+$: approvalStep = (job?.flow_status?.step ?? 1) - 1;
+let defaultValues = {};
+$: job && getDefaultArgs();
+let schema = {};
+let lastJobId = undefined;
+async function getDefaultArgs() {
+    let jobId = job?.flow_status?.modules?.[approvalStep]?.job;
+    if (jobId === lastJobId) {
+        return;
+    }
+    if (!jobId) {
+        return {};
+    }
+    lastJobId = jobId;
+    let job_result = (await JobService.getCompletedJobResult({
+        workspace: workspaceId ?? $workspaceStore ?? '',
+        id: jobId
+    }));
+    const args = job_result?.default_args ?? {};
+    description = job_result?.description;
+    defaultValues = JSON.parse(JSON.stringify(args));
+    default_payload = args;
+    resumeUrl = job_result?.['resume'];
+    cancelUrl = job_result?.['cancel'];
+    hide_cancel = job?.raw_flow?.modules?.[approvalStep]?.suspend?.hide_cancel ?? false;
+    schema = mergeSchema(job?.raw_flow?.modules?.[approvalStep]?.suspend?.resume_form?.schema ?? {}, job_result?.enums ?? {});
+}
+async function continu(approve) {
+    if ((resumeUrl && approve) || (cancelUrl && !approve)) {
+        let split = (approve ? resumeUrl : cancelUrl).split('/');
+        let signatureUrl = split.pop() ?? '';
+        const regex = /([^?]+)(?:\?[^=]+=(\w+))?/;
+        const matches = signatureUrl.match(regex);
+        const signature = matches?.[1];
+        if (!signature) {
+            sendUserToast(`Could not parse signature: ${signatureUrl}`, true);
+            return;
+        }
+        const approver = matches?.[2] || undefined;
+        let resumeId = -1;
+        let parsedResumeId = split.pop() ?? '';
+        try {
+            resumeId = new Number(parsedResumeId).valueOf();
+        }
+        catch (e) {
+            console.error(`Could not parse resume id: ${parsedResumeId}`);
+        }
+        let jobId = split.pop() ?? '';
+        if (approve) {
+            await JobService.resumeSuspendedJobPost({
+                workspace: workspaceId ?? $workspaceStore ?? '',
+                id: jobId,
+                requestBody: default_payload,
+                resumeId,
+                signature,
+                approver
+            });
+        }
+        else {
+            await JobService.cancelSuspendedJobPost({
+                workspace: workspaceId ?? $workspaceStore ?? '',
+                id: jobId,
+                resumeId,
+                signature,
+                approver,
+                requestBody: {}
+            });
+        }
+    }
+    else {
+        if (approve) {
+            await JobService.resumeSuspendedFlowAsOwner({
+                workspace: workspaceId ?? $workspaceStore ?? '',
+                id: job?.id ?? '',
+                requestBody: default_payload
+            });
+        }
+        else {
+            await JobService.cancelQueuedJob({
+                workspace: workspaceId ?? $workspaceStore ?? '',
+                id: job?.id ?? '',
+                requestBody: {}
+            });
+        }
+    }
+}
+</script>
+
+<div class="w-full h-full mt-2 text-sm text-tertiary">
+	<p>Waiting to be resumed</p>
+	{#if description != undefined}
+		<DisplayResult {workspaceId} noControls result={description} />
+	{/if}
+	<div>
+		{#if isOwner || resumeUrl}
+			<div class="flex flex-row gap-2 mt-2">
+				{#if cancelUrl && !hide_cancel}
+					<div>
+						<Button
+							color="red"
+							title="Cancel the flow"
+							iconOnly
+							startIcon={{ icon: X }}
+							variant="border"
+							on:click={() => continu(false)}
+						/>
+					</div>
+				{/if}
+				<div>
+					<Button color="green" variant="border" on:click={() => continu(true)}
+						>Resume <Tooltip
+							>Since you are an owner of this flow, you can send resume events without necessarily
+							knowing the resume id sent by the approval step</Tooltip
+						></Button
+					>
+				</div>
+
+				{#if job?.raw_flow?.modules?.[approvalStep]?.suspend?.resume_form?.schema}
+					<div class="w-full border rounded-lg p-2">
+						<SchemaForm onlyMaskPassword bind:args={default_payload} {defaultValues} {schema} />
+					</div>
+				{/if}
+				<Tooltip
+					>The payload is optional, it is passed to the following step through the `resume` variable</Tooltip
+				>
+			</div>
+		{:else}
+			You cannot resume the flow yourself without receiving the resume secret since you are not an
+			owner of {job.script_path} and the approval step did not contain the resume url at key `resume`
+		{/if}
+	</div>
+</div>

package/package/components/FlowStatusWaitingForEvents.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import { type Job } from '../gen';
+declare const __propDef: {
+    props: {
+        isOwner: boolean;
+        workspaceId: string | undefined;
+        job: Job;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowStatusWaitingForEventsProps = typeof __propDef.props;
+export type FlowStatusWaitingForEventsEvents = typeof __propDef.events;
+export type FlowStatusWaitingForEventsSlots = typeof __propDef.slots;
+export default class FlowStatusWaitingForEvents extends SvelteComponent<FlowStatusWaitingForEventsProps, FlowStatusWaitingForEventsEvents, FlowStatusWaitingForEventsSlots> {
+}
+export {};

package/package/components/FlowTimeline.svelte

@@ -0,0 +1,195 @@
+<script>import { debounce, displayDate, msToSec } from '../utils';
+import { onDestroy } from 'svelte';
+import { getDbClockNow } from '../forLater';
+import { Loader2 } from 'lucide-svelte';
+import TimelineBar from './TimelineBar.svelte';
+import WaitTimeWarning from './common/waitTimeWarning/WaitTimeWarning.svelte';
+export let selfWaitTime = undefined;
+export let aggregateWaitTime = undefined;
+export let flowModules;
+export let durationStatuses;
+export let flowDone = false;
+let min = undefined;
+let max = undefined;
+let total = undefined;
+let items = undefined;
+let debounced = debounce(() => computeItems($durationStatuses), 30);
+$: flowDone != undefined && $durationStatuses && debounced();
+export function reset() {
+    min = undefined;
+    max = undefined;
+    items = computeItems($durationStatuses);
+}
+function computeItems(durationStatuses) {
+    let nmin = undefined;
+    let nmax = undefined;
+    let isStillRunning = false;
+    let cnt = 0;
+    let nitems = {};
+    Object.entries(durationStatuses).forEach(([k, o]) => {
+        Object.values(o.byJob).forEach((v) => {
+            cnt++;
+            if (v.started_at) {
+                if (!nmin) {
+                    nmin = v.started_at;
+                }
+                else {
+                    nmin = Math.min(nmin, v.started_at);
+                }
+            }
+            if (!flowDone && v.duration_ms == undefined) {
+                isStillRunning = true;
+            }
+            if (!isStillRunning) {
+                if (v.started_at && v.duration_ms) {
+                    let lmax = v.started_at + v.duration_ms;
+                    if (!nmax) {
+                        nmax = lmax;
+                    }
+                    else {
+                        nmax = Math.max(nmax, lmax);
+                    }
+                }
+            }
+        });
+        let arr = Object.entries(o.byJob).map(([k, v]) => ({ ...v, id: k }));
+        arr.sort((x, y) => {
+            if (!x.started_at) {
+                return -1;
+            }
+            else if (!y.started_at) {
+                return 1;
+            }
+            else {
+                return x.started_at - y.started_at;
+            }
+        });
+        nitems[k] = arr;
+    });
+    items = nitems;
+    min = nmin;
+    max = isStillRunning || (cnt < flowModules.length && !flowDone) ? undefined : nmax;
+    if (max && min) {
+        total = max - min;
+        total = Math.max(total, 2000);
+    }
+}
+let now = getDbClockNow().getTime();
+let interval = setInterval((x) => {
+    if (!max) {
+        now = getDbClockNow().getTime();
+    }
+    if (min && (!max || total == undefined)) {
+        total = max ? max - min : Math.max(now - min, 2000);
+    }
+}, 30);
+onDestroy(() => {
+    interval && clearInterval(interval);
+});
+</script>
+
+{#if items}
+	<div class="divide-y border-b">
+		<div class="px-2 py-2 grid grid-cols-12 w-full"
+			><div />
+			<div class="col-span-11 pt-1 px-2 flex text-2xs text-secondary justify-between"
+				><div>{min ? displayDate(new Date(min), true) : ''}</div>{#if max && min}<div
+						class="hidden lg:block">{msToSec(max - min)}s</div
+					>
+				{/if}<div class="flex gap-1 items-center font-mono"
+					>{max ? displayDate(new Date(max), true) : ''}{#if !max && min}{#if now}
+							{msToSec(now - min, 3)}s
+						{/if}<Loader2 size={14} class="animate-spin" />{/if}</div
+				></div
+			>
+		</div>
+		<div class="flex flex-row-reverse items-center text-sm text-secondary p-2">
+			<div class="flex gap-4 items-center text-2xs">
+				<div class="flex gap-2 items-center">
+					<div>Waiting for executor/Suspend</div>
+					<div class="h-4 w-4 bg-gray-500" />
+				</div>
+
+				<div class="flex gap-2 items-center">
+					<div>Execution</div>
+					<div class="h-4 w-4 bg-blue-500/90" />
+				</div>
+			</div>
+		</div>
+		{#if selfWaitTime}
+			<div class="px-2 py-2 grid grid-cols-6 w-full">
+				root:
+				<WaitTimeWarning
+					self_wait_time_ms={selfWaitTime}
+					aggregate_wait_time_ms={aggregateWaitTime}
+					variant="badge-self-wait"
+				/>
+			</div>
+		{/if}
+		{#each Object.values(flowModules) as k (k)}
+			<div class="overflow-auto max-h-60 shadow-inner dark:shadow-gray-700 relative">
+				{#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[k]
+								if (r.iteration_from) {
+									r.iteration_from -= 20
+									$durationStatuses = $durationStatuses
+								}
+							}}
+							>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 class="truncate">{k.startsWith('subflow:') ? k.substring(8) : k}</div>
+					<div class="col-span-5 flex min-h-6">
+						{#if min && total}
+							<div class="flex flex-col gap-2 w-full p-2 ml-4">
+								{#each items?.[k] ?? [] as b}
+									{@const waitingLen = b?.created_at
+										? b.started_at
+											? b.started_at - b?.created_at
+											: b.duration_ms
+											? 0
+											: now - b?.created_at
+										: 0}
+									<div class="flex w-full">
+										<TimelineBar
+											position="left"
+											id={b?.id}
+											{total}
+											{min}
+											gray
+											started_at={b.created_at}
+											len={waitingLen < 100 ? 0 : waitingLen - 100}
+											running={b?.started_at == undefined}
+										/>
+										{#if b.started_at}
+											<TimelineBar
+												position={waitingLen < 100 ? 'center' : 'right'}
+												id={b?.id}
+												{total}
+												{min}
+												concat
+												started_at={b.started_at}
+												len={b.started_at ? b?.duration_ms ?? now - b?.started_at : 0}
+												running={b?.duration_ms == undefined}
+											/>
+										{/if}
+									</div>
+								{/each}
+							</div>
+						{/if}</div
+					></div
+				>
+			</div>
+		{/each}
+	</div>
+{:else}
+	<Loader2 class="animate-spin" />
+{/if}

package/package/components/FlowTimeline.svelte.d.ts

@@ -0,0 +1,31 @@
+import { SvelteComponent } from "svelte";
+import type { Writable } from 'svelte/store';
+declare const __propDef: {
+    props: {
+        selfWaitTime?: number | undefined;
+        aggregateWaitTime?: number | undefined;
+        flowModules: string[];
+        durationStatuses: Writable<Record<string, {
+            byJob: Record<string, {
+                created_at?: number;
+                started_at?: number;
+                duration_ms?: number;
+            }>;
+            iteration_from?: number;
+            iteration_total?: number;
+        }>>;
+        flowDone?: boolean | undefined;
+        reset?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowTimelineProps = typeof __propDef.props;
+export type FlowTimelineEvents = typeof __propDef.events;
+export type FlowTimelineSlots = typeof __propDef.slots;
+export default class FlowTimeline extends SvelteComponent<FlowTimelineProps, FlowTimelineEvents, FlowTimelineSlots> {
+    get reset(): () => void;
+}
+export {};

package/package/components/FlowTutorials.svelte

@@ -0,0 +1,63 @@
+<script>import { skipAllTodos } from '../tutorialUtils';
+import FlowBuilderTutorialBranchAll from './tutorials/FlowBuilderTutorialBranchAll.svelte';
+import FlowBuilderTutorialBranchOne from './tutorials/FlowBuilderTutorialBranchOne.svelte';
+import FlowBuilderTutorialSimpleFlow from './tutorials/FlowBuilderTutorialSimpleFlow.svelte';
+import FlowBuilderTutorialForLoop from './tutorials/FlowBuilderTutorialForLoop.svelte';
+import FlowBuilderTutorialErrorHandler from './tutorials/FlowBuilderTutorialErrorHandler.svelte';
+let flowBuilderTutorialSimpleFlow = undefined;
+let flowBuilderTutorialForLoop = undefined;
+let flowBuilderTutorialBranchOne = undefined;
+let flowBuilderTutorialBranchAll = undefined;
+let flowBuilderTutorialErrorHandler = undefined;
+export function runTutorialById(id, indexToInsertAt) {
+    if (id === 'forloop') {
+        flowBuilderTutorialForLoop?.runTutorial(indexToInsertAt);
+    }
+    else if (id === 'branchone') {
+        flowBuilderTutorialBranchOne?.runTutorial();
+    }
+    else if (id === 'branchall') {
+        flowBuilderTutorialBranchAll?.runTutorial();
+    }
+    else if (id === 'action') {
+        flowBuilderTutorialSimpleFlow?.runTutorial();
+    }
+    else if (id === 'error-handler') {
+        flowBuilderTutorialErrorHandler?.runTutorial();
+    }
+}
+function skipAll() {
+    skipAllTodos();
+}
+</script>
+
+<FlowBuilderTutorialSimpleFlow
+	bind:this={flowBuilderTutorialSimpleFlow}
+	on:error
+	on:skipAll={skipAll}
+	on:reload
+/>
+<FlowBuilderTutorialForLoop
+	bind:this={flowBuilderTutorialForLoop}
+	on:error
+	on:skipAll={skipAll}
+	on:reload
+/>
+<FlowBuilderTutorialBranchOne
+	bind:this={flowBuilderTutorialBranchOne}
+	on:error
+	on:skipAll={skipAll}
+	on:reload
+/>
+<FlowBuilderTutorialBranchAll
+	bind:this={flowBuilderTutorialBranchAll}
+	on:error
+	on:skipAll={skipAll}
+	on:reload
+/>
+<FlowBuilderTutorialErrorHandler
+	bind:this={flowBuilderTutorialErrorHandler}
+	on:error
+	on:skipAll={skipAll}
+	on:reload
+/>

package/package/components/FlowTutorials.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        runTutorialById?: ((id: string, indexToInsertAt?: number | undefined) => void) | undefined;
+    };
+    events: {
+        error: any;
+        reload: any;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowTutorialsProps = typeof __propDef.props;
+export type FlowTutorialsEvents = typeof __propDef.events;
+export type FlowTutorialsSlots = typeof __propDef.slots;
+export default class FlowTutorials extends SvelteComponent<FlowTutorialsProps, FlowTutorialsEvents, FlowTutorialsSlots> {
+    get runTutorialById(): (id: string, indexToInsertAt?: number | undefined) => void;
+}
+export {};

package/package/components/FlowViewer.svelte

@@ -0,0 +1,57 @@
+<script>import { Tab, Tabs, TabContent } from './common';
+import SchemaViewer from './SchemaViewer.svelte';
+import FlowGraphViewer from './FlowGraphViewer.svelte';
+import HighlightTheme from './HighlightTheme.svelte';
+import FlowViewerInner from './FlowViewerInner.svelte';
+import FlowInputViewer from './FlowInputViewer.svelte';
+export let flow;
+export let initialOpen = undefined;
+export let noSide = false;
+export let noGraph = false;
+export let tab = noGraph ? 'schema' : 'ui';
+export let noSummary = false;
+export let noGraphDownload = false;
+let open = {};
+if (initialOpen) {
+    open[initialOpen] = true;
+}
+</script>
+
+<HighlightTheme />
+
+<Tabs bind:selected={tab}>
+	{#if !noGraph}
+		<Tab value="ui">Graph</Tab>
+	{/if}
+	<Tab value="raw">Raw</Tab>
+	<Tab value="schema">Input Schema</Tab>
+
+	<svelte:fragment slot="content">
+		<TabContent value="ui">
+			<div class="flow-root w-full pb-4">
+				{#if !noSummary}
+					<h2 class="my-4">{flow.summary}</h2>
+					<div>{flow.description ?? ''}</div>
+				{/if}
+
+				<p class="font-black text-lg w-full my-4">
+					<span>Flow Input</span>
+				</p>
+				{#if flow.schema && flow.schema.properties && Object.keys(flow.schema.properties).length > 0 && flow.schema}
+					<FlowInputViewer schema={flow.schema} />
+				{:else}
+					<div class="text-secondary text-xs italic mb-4">No inputs</div>
+				{/if}
+
+				<FlowGraphViewer download={!noGraphDownload} {noSide} {flow} overflowAuto />
+			</div>
+		</TabContent>
+		<TabContent value="raw">
+			<FlowViewerInner {flow} />
+		</TabContent>
+		<TabContent value="schema">
+			<div class="my-4" />
+			<SchemaViewer schema={flow.schema} />
+		</TabContent>
+	</svelte:fragment>
+</Tabs>

package/package/components/FlowViewer.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+import type { FlowValue } from '../gen';
+declare const __propDef: {
+    props: {
+        flow: {
+            summary: string;
+            description?: string;
+            value: FlowValue;
+            schema?: any;
+        };
+        initialOpen?: number | undefined;
+        noSide?: boolean | undefined;
+        noGraph?: boolean | undefined;
+        tab?: "schema" | "ui" | "raw" | undefined;
+        noSummary?: boolean | undefined;
+        noGraphDownload?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowViewerProps = typeof __propDef.props;
+export type FlowViewerEvents = typeof __propDef.events;
+export type FlowViewerSlots = typeof __propDef.slots;
+export default class FlowViewer extends SvelteComponent<FlowViewerProps, FlowViewerEvents, FlowViewerSlots> {
+}
+export {};