windmill-components 1.86.0 → 1.89.0

package/package/components/FlowStatusViewer.svelte

@@ -0,0 +1,516 @@
+<script>import { FlowStatusModule, Job, JobService } from '../gen';
+import { userStore, workspaceStore } from '../stores';
+import FlowJobResult from './FlowJobResult.svelte';
+import FlowPreviewStatus from './preview/FlowPreviewStatus.svelte';
+import Icon from 'svelte-awesome';
+import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher } from 'svelte';
+import { onDestroy } from 'svelte';
+import { Badge, Button, Tab } from './common';
+import DisplayResult from './DisplayResult.svelte';
+import Tabs from './common/tabs/Tabs.svelte';
+import { FlowGraph } from './graph';
+import ModuleStatus from './ModuleStatus.svelte';
+import { displayDate, emptyString, isOwner, pluralize, truncateRev } from '../utils';
+import JobArgs from './JobArgs.svelte';
+import Tooltip from './Tooltip.svelte';
+import SimpleEditor from './SimpleEditor.svelte';
+import { Loader2 } from 'lucide-svelte';
+const dispatch = createEventDispatcher();
+export let jobId;
+export let workspaceId = undefined;
+export let flowState = undefined;
+export let flowJobIds = undefined;
+export let job = undefined;
+export let flowModuleStates = {};
+let localFlowModuleStates = {};
+export let retry_status = {};
+export let suspend_status = undefined;
+export let is_owner = false;
+let selectedNode = undefined;
+let jobResults = [];
+let jobFailures = [];
+let forloop_selected = '';
+let timeout;
+$: localFlowModuleStates && updateFlowModuleStates();
+function updateFlowModuleStates() {
+    Object.entries(localFlowModuleStates).forEach(([moduleId, state]) => {
+        if (flowModuleStates[moduleId] !== state &&
+            flowModuleStates[moduleId]?.type !== FlowStatusModule.type.FAILURE) {
+            flowModuleStates[moduleId] = state;
+        }
+    });
+}
+let lastSize = 0;
+$: {
+    let len = (flowJobIds?.flowJobs ?? []).length;
+    if (len != lastSize) {
+        forloop_selected = flowJobIds?.flowJobs[len - 1] ?? '';
+        lastSize = len;
+    }
+}
+$: updateFailCount(job?.flow_status?.retry?.fail_count);
+$: suspend_status = job?.flow_status?.modules?.[job?.flow_status.step]?.count;
+function updateFailCount(count) {
+    if (count) {
+        retry_status[jobId ?? ''] = count;
+    }
+    else {
+        delete retry_status[jobId ?? ''];
+    }
+}
+$: innerModules =
+    job?.flow_status?.modules.concat(job?.flow_status.failure_module.type != 'WaitingForPriorSteps'
+        ? job?.flow_status.failure_module
+        : []) ?? [];
+$: innerModules && localFlowModuleStates && updateInnerModules();
+function updateInnerModules() {
+    innerModules.forEach((mod, i) => {
+        if (mod.type === FlowStatusModule.type.WAITING_FOR_EVENTS &&
+            localFlowModuleStates?.[innerModules?.[i - 1]?.id ?? '']?.type ==
+                FlowStatusModule.type.SUCCESS) {
+            localFlowModuleStates[mod.id ?? ''] = { type: mod.type, args: job?.args };
+        }
+        else if (mod.type === FlowStatusModule.type.WAITING_FOR_EXECUTOR &&
+            localFlowModuleStates[mod.id ?? '']?.scheduled_for == undefined) {
+            JobService.getJob({
+                workspace: workspaceId ?? $workspaceStore ?? '',
+                id: mod.job ?? ''
+            }).then((job) => {
+                localFlowModuleStates[mod.id ?? ''] = {
+                    type: mod.type,
+                    scheduled_for: 'scheduled for ' + displayDate(job?.['scheduled_for'], true),
+                    job_id: job?.id,
+                    parent_module: mod['parent_module'],
+                    args: job?.args
+                };
+            });
+        }
+    });
+}
+let errorCount = 0;
+async function loadJobInProgress() {
+    if (jobId != '00000000-0000-0000-0000-000000000000') {
+        try {
+            const newJob = await JobService.getJob({
+                workspace: workspaceId ?? $workspaceStore ?? '',
+                id: jobId ?? ''
+            });
+            if (JSON.stringify(newJob) !== JSON.stringify(job)) {
+                job = newJob;
+            }
+            errorCount = 0;
+        }
+        catch (e) {
+            errorCount += 1;
+            console.error(e);
+        }
+    }
+    if (job?.type !== 'CompletedJob' && errorCount < 4) {
+        timeout = setTimeout(() => loadJobInProgress(), 500);
+    }
+}
+$: job && dispatch('jobsLoaded', job);
+async function updateJobId() {
+    if (jobId !== job?.id) {
+        retry_status = {};
+        localFlowModuleStates = {};
+        await loadJobInProgress();
+        job?.script_path && loadOwner(job.script_path);
+    }
+}
+$: jobId && updateJobId();
+$: isListJob = flowJobIds && Array.isArray(flowJobIds?.flowJobs);
+onDestroy(() => {
+    timeout && clearTimeout(timeout);
+});
+function loadOwner(path) {
+    is_owner = isOwner(path, $userStore, workspaceId ?? $workspaceStore);
+}
+let selected = 'graph';
+let payload = '"a test payload in json"';
+function isSuccess(arg) {
+    if (arg == undefined) {
+        return undefined;
+    }
+    else {
+        return arg == true;
+    }
+}
+function onJobsLoaded(mod, job) {
+    if (mod.id && (mod.flow_jobs ?? []).length == 0) {
+        if (flowState && flowState[mod.id]) {
+            flowState[mod.id].previewResult = job['result'];
+            flowState[mod.id].previewArgs = job.args;
+        }
+        if (job.type == 'QueuedJob') {
+            localFlowModuleStates[mod.id] = {
+                type: FlowStatusModule.type.IN_PROGRESS,
+                logs: job.logs,
+                args: job.args,
+                parent_module: mod['parent_module']
+            };
+        }
+        else {
+            localFlowModuleStates[mod.id] = {
+                args: job.args,
+                type: job['success'] ? FlowStatusModule.type.SUCCESS : FlowStatusModule.type.FAILURE,
+                logs: job.logs,
+                result: job['result'],
+                job_id: job.id,
+                parent_module: mod['parent_module'],
+                iteration_total: mod.iterator?.itered?.length
+                // retries: flowState?.raw_flow
+            };
+        }
+    }
+}
+</script>
+
+{#if job}
+	<div class="flow-root w-full space-y-4">
+		{#if innerModules.length > 0}
+			<h3 class="text-md leading-6 font-bold text-gray-900 border-b pb-2">Flow result</h3>
+		{/if}
+		{#if isListJob}
+			<div class="w-full h-full border border-gray-600 bg-white p-1">
+				<DisplayResult result={jobResults} />
+			</div>
+		{:else}
+			<div class={innerModules.length > 0 ? 'border border-gray-400 shadow p-2' : ''}>
+				<FlowPreviewStatus {job} />
+				{#if `result` in job}
+					<div class="w-full h-full">
+						<FlowJobResult
+							loading={job['running'] == true}
+							result={job.result}
+							logs={job.logs ?? ''}
+						/>
+					</div>
+				{:else if job.flow_status?.modules?.[job?.flow_status?.step]?.type === FlowStatusModule.type.WAITING_FOR_EVENTS}
+					<div class="w-full h-full mt-2 text-sm text-gray-600">
+						<p>Waiting to be resumed</p>
+						<div>
+							{#if is_owner}
+								<div class="flex flex-row gap-2 mt-2">
+									<div>
+										<Button
+											color="green"
+											variant="border"
+											on:click={async () =>
+												await JobService.resumeSuspendedFlowAsOwner({
+													workspace: workspaceId ?? $workspaceStore ?? '',
+													id: job?.id ?? '',
+													requestBody: JSON.parse(payload)
+												})}
+											>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>
+									<div class="w-full border rounded-lg border-gray-600 p-2">
+										<SimpleEditor automaticLayout lang="json" bind:code={payload} autoHeight />
+									</div>
+									<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}
+							{/if}
+						</div>
+					</div>
+				{:else if job.logs}
+					<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-80 border">
+						<pre class="w-full">{job.logs}</pre>
+					</div>
+				{:else if innerModules?.length > 0}
+					<div class="flex flex-col gap-1">
+						{#each innerModules as mod, i (mod.id)}
+							{#if mod.type == FlowStatusModule.type.IN_PROGRESS}
+								{@const rawMod = job.raw_flow?.modules[i]}
+
+								<div
+									><span class="inline-flex gap-1"
+										><Badge color="indigo">{mod.id}</Badge>
+										<span class="font-medium text-gray-900">
+											{#if !emptyString(rawMod?.summary)}
+												{rawMod?.summary ?? ''}
+											{:else if rawMod?.value.type == 'script'}
+												{rawMod.value.path ?? ''}
+											{:else if rawMod?.value.type}
+												{rawMod?.value.type}
+											{/if}
+										</span>
+
+										<Loader2 class="animate-spin" /></span
+									></div
+								>
+							{/if}
+						{/each}
+					</div>
+				{/if}
+			</div>
+		{/if}
+
+		{#if innerModules.length > 0 && !isListJob}
+			<Tabs bind:selected>
+				<Tab value="graph"><span class="font-semibold text-md">Graph</span></Tab>
+				<Tab value="sequence"><span class="font-semibold">Details</span></Tab>
+			</Tabs>
+		{/if}
+
+		<div class={selected == 'graph' && !isListJob ? 'hidden' : ''}>
+			{#if isListJob}
+				<h3 class="text-md leading-6 font-bold text-gray-600 border-b mb-4">
+					Embedded flows: ({flowJobIds?.flowJobs.length} items)
+				</h3>
+				{#each flowJobIds?.flowJobs ?? [] as loopJobId, j}
+					<Button
+						variant={forloop_selected === loopJobId ? 'contained' : 'border'}
+						color={jobFailures[j] === true
+							? 'red'
+							: forloop_selected === loopJobId
+							? 'dark'
+							: 'light'}
+						btnClasses="w-full flex justify-start"
+						on:click={() => {
+							if (forloop_selected == loopJobId) {
+								forloop_selected = ''
+							} else {
+								forloop_selected = loopJobId
+							}
+						}}
+					>
+						<span class="truncate">
+							#{j + 1}: {loopJobId}
+						</span>
+
+						<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
+							{workspaceId}
+							bind:suspend_status
+							bind:retry_status
+							bind:flowState
+							bind:flowModuleStates={localFlowModuleStates}
+							jobId={loopJobId}
+							on:jobsLoaded={(e) => {
+								if (flowJobIds?.moduleId) {
+									if (flowState?.[flowJobIds.moduleId]) {
+										if (
+											!flowState[flowJobIds.moduleId].previewResult ||
+											!Array.isArray(flowState[flowJobIds.moduleId]?.previewResult)
+										) {
+											flowState[flowJobIds.moduleId].previewResult = []
+										}
+										flowState[flowJobIds.moduleId].previewResult[j] = e.detail.result
+										flowState[flowJobIds.moduleId].previewArgs = e.detail.args
+										jobResults[j] =
+											e.detail.type == 'QueuedJob' ? 'Job in progress ...' : e.detail.result
+										jobFailures[j] = e.detail.success === false
+									}
+									if (e.detail.type == 'QueuedJob') {
+										localFlowModuleStates[flowJobIds.moduleId] = {
+											type: FlowStatusModule.type.IN_PROGRESS,
+											logs: e.detail.logs,
+											job_id: e.detail.id,
+											args: e.detail.args,
+											iteration_total: flowJobIds?.flowJobs.length
+										}
+									} else {
+										localFlowModuleStates[flowJobIds.moduleId] = {
+											args: e.detail.args,
+											type: e.detail.success
+												? FlowStatusModule.type.SUCCESS
+												: FlowStatusModule.type.FAILURE,
+											logs: 'All jobs completed',
+											result: jobResults,
+											job_id: e.detail.id,
+											iteration_total: flowJobIds?.flowJobs.length
+										}
+									}
+								}
+							}}
+						/>
+					</div>
+				{/each}
+			{:else if innerModules.length > 0}
+				<ul class="w-full">
+					<h3 class="text-md leading-6 font-bold text-gray-900 border-b mb-4 py-2">
+						Step-by-step results
+					</h3>
+
+					{#each innerModules as mod, i}
+						<div class="line w-8 h-10" />
+						<h3 class="text-gray-500 mb-2 w-full">
+							{#if job?.raw_flow?.modules && i < job?.raw_flow?.modules.length}
+								Step
+								<span class="font-medium text-gray-900">
+									{i + 1}
+								</span>
+								out of
+								<span class="font-medium text-gray-900">{job?.raw_flow?.modules.length}</span>
+								{#if job.raw_flow?.modules[i]?.summary}
+									: <span class="font-medium text-gray-900">
+										{job.raw_flow?.modules[i]?.summary ?? ''}
+									</span>
+								{/if}
+							{:else}
+								<h3>Failure module</h3>
+							{/if}
+						</h3>
+						<div class="line w-8 h-10" />
+						<li class="w-full border border-gray-600 p-6 space-y-2 bg-blue-50/50">
+							{#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
+										{workspaceId}
+										jobId={mod.job}
+										bind:suspend_status
+										bind:retry_status
+										on:jobsLoaded={(e) => onJobsLoaded(mod, e.detail)}
+									/>
+								{:else}
+									<svelte:self
+										{workspaceId}
+										bind:suspend_status
+										bind:retry_status
+										bind:flowState
+										bind:flowModuleStates={localFlowModuleStates}
+										jobId={mod.job}
+										flowJobIds={mod.flow_jobs
+											? {
+													moduleId: mod.id,
+													flowJobs: mod.flow_jobs
+											  }
+											: undefined}
+										on:jobsLoaded={(e) => onJobsLoaded(mod, e.detail)}
+									/>
+								{/if}
+							{:else}
+								<ModuleStatus
+									type={mod.type}
+									scheduled_for={localFlowModuleStates?.[mod.id ?? '']?.scheduled_for}
+								/>
+							{/if}
+						</li>
+					{/each}
+				</ul>
+			{/if}
+		</div>
+	</div>
+	{#if job.raw_flow && !isListJob}
+		<div class="{selected != 'graph' ? 'hidden' : ''} mt-4">
+			<div class="grid grid-cols-3 border border-gray-300">
+				<div class="col-span-2 bg-gray-50">
+					<div class="flex flex-col">
+						{#each Object.values(retry_status) as count}
+							<span class="text-sm">
+								Retry in progress, # of failed attempts: {count}
+							</span>
+						{/each}
+						{#if suspend_status}
+							<span class="text-sm">
+								Flow suspended, waiting for {pluralize(suspend_status, 'approval')}
+							</span>
+						{/if}
+					</div>
+
+					<FlowGraph
+						success={isSuccess(job?.['success'])}
+						flowModuleStates={localFlowModuleStates}
+						on:select={(e) => {
+							if (typeof e.detail == 'string') {
+								if (e.detail == 'Input') {
+									selectedNode = 'start'
+								} else if (e.detail == 'Result') {
+									selectedNode = 'end'
+								} else {
+									selectedNode = e.detail
+								}
+							} else {
+								selectedNode = e.detail.id
+							}
+						}}
+						modules={job.raw_flow?.modules ?? []}
+						failureModule={job.raw_flow?.failure_module}
+					/>
+				</div>
+				<div class="border-l border-gray-400 pt-1 overflow-hidden">
+					{#if selectedNode}
+						{@const node = localFlowModuleStates[selectedNode]}
+						{#if selectedNode == 'end'}
+							<FlowJobResult
+								filename={job.id}
+								loading={job['running']}
+								noBorder
+								col
+								result={job['result']}
+								logs={job.logs ?? ''}
+							/>
+						{:else if selectedNode == 'start'}
+							{#if job.args}
+								<div class="p-2">
+									<JobArgs args={job.args} />
+								</div>
+							{:else}
+								<p class="p-2">No arguments</p>
+							{/if}
+						{:else if node}
+							<div class="px-2 flex gap-2 min-w-0">
+								<ModuleStatus type={node.type} scheduled_for={node['scheduled_for']} />
+								{#if node.job_id}
+									<div class="truncate"
+										><div class=" text-gray-900 whitespace-nowrap truncate">
+											<span class="font-bold">Job Id</span>
+											<a
+												rel="noreferrer"
+												target="_blank"
+												href="/run/{node.job_id ?? ''}?workspace={job?.workspace_id}"
+											>
+												{truncateRev(node.job_id ?? '', 10) ?? ''}
+											</a>
+										</div>
+									</div>
+								{/if}
+							</div>
+							<div class="px-1 border-b border-black">
+								<JobArgs args={node.args} />
+							</div>
+
+							<FlowJobResult
+								loading={job['running'] == true}
+								noBorder
+								col
+								result={node.result}
+								logs={node.logs ?? ''}
+							/>
+						{:else}
+							<p class="p-2 text-gray-600 italic"
+								>The execution of this node has no information attached to it. The job likely did
+								not run yet</p
+							>
+						{/if}
+					{:else}<p class="p-2 text-gray-600 italic">Select a node to see its details here</p>{/if}
+				</div>
+			</div>
+		</div>
+	{/if}
+{:else}
+	Job loading...
+{/if}
+
+<style>
+	.line {
+		background: repeating-linear-gradient(to bottom, transparent 0 4px, #bbb 4px 8px) 50%/1px 100%
+			no-repeat;
+	}</style>

package/package/components/FlowStatusViewer.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponentTyped } from "svelte";
+import { Job } from '../gen';
+import type { FlowState } from './flows/flowState';
+import { type GraphModuleState } from './graph';
+declare const __propDef: {
+    props: {
+        jobId: string;
+        workspaceId?: string | undefined;
+        flowState?: FlowState | undefined;
+        flowJobIds?: {
+            moduleId: string;
+            flowJobs: string[];
+        } | undefined;
+        job?: Job | undefined;
+        flowModuleStates?: Record<string, GraphModuleState> | undefined;
+        retry_status?: Record<string, number> | undefined;
+        suspend_status?: number | undefined;
+        is_owner?: boolean | undefined;
+    };
+    events: {
+        jobsLoaded: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowStatusViewerProps = typeof __propDef.props;
+export type FlowStatusViewerEvents = typeof __propDef.events;
+export type FlowStatusViewerSlots = typeof __propDef.slots;
+export default class FlowStatusViewer extends SvelteComponentTyped<FlowStatusViewerProps, FlowStatusViewerEvents, FlowStatusViewerSlots> {
+}
+export {};

package/package/components/FlowViewer.svelte

@@ -0,0 +1,98 @@
+<script>import Highlight from 'svelte-highlight';
+import json from 'svelte-highlight/languages/json';
+import { faClipboard } from '@fortawesome/free-solid-svg-icons';
+import { Tab, Tabs, TabContent, Button } from './common';
+import SchemaViewer from './SchemaViewer.svelte';
+import FieldHeader from './FieldHeader.svelte';
+import { copyToClipboard } from '../utils';
+import FlowGraphViewer from './FlowGraphViewer.svelte';
+import { setContext } from 'svelte';
+import { SVELVET_CONTEXT_KEY } from './graph/svelvet/container/models';
+setContext(SVELVET_CONTEXT_KEY, {
+    fullHeight: true
+});
+export let flow;
+export let initialOpen = undefined;
+export let noSide = false;
+$: flowFiltered = {
+    summary: flow.summary,
+    description: flow.description,
+    value: flow.value,
+    schema: flow.schema
+};
+export let tab = 'ui';
+export let noSummary = false;
+let open = {};
+if (initialOpen) {
+    open[initialOpen] = true;
+}
+function toAny(x) {
+    return x;
+}
+</script>
+
+<Tabs bind:selected={tab}>
+	<Tab value="ui">Graph</Tab>
+	<Tab value="json">JSON</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}
+					<ul class="my-2">
+						{#each Object.entries(flow.schema.properties) as [inp, v]}
+							<li class="list-disc flex flex-row">
+								<FieldHeader
+									label={inp}
+									required={flow.schema.required?.includes(inp)}
+									type={toAny(v)?.type}
+									contentEncoding={toAny(v)?.contentEncoding}
+									format={toAny(v)?.format}
+								/><span class="ml-4 mt-2 text-xs"
+									>{toAny(v)?.default != undefined
+										? 'default: ' + JSON.stringify(toAny(v)?.default)
+										: ''}</span
+								>
+							</li>
+						{/each}
+					</ul>
+				{:else}
+					<div class="text-gray-700 text-xs italic mb-4">No inputs</div>
+				{/if}
+				<FlowGraphViewer download {noSide} {flow} overflowAuto />
+			</div>
+		</TabContent>
+		<TabContent value="json">
+			<div class="relative pt-2">
+				<Button
+					on:click={() => copyToClipboard(JSON.stringify(flowFiltered, null, 4))}
+					color="dark"
+					variant="border"
+					size="sm"
+					startIcon={{ icon: faClipboard }}
+					btnClasses="absolute top-2 right-2 w-min"
+				>
+					Copy content
+				</Button>
+				<Highlight
+					language={json}
+					code={JSON.stringify(flowFiltered, null, 4)}
+					class="overflow-auto"
+				/>
+			</div>
+		</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,26 @@
+import { SvelteComponentTyped } 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;
+        tab?: "json" | "schema" | "ui" | undefined;
+        noSummary?: 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 SvelteComponentTyped<FlowViewerProps, FlowViewerEvents, FlowViewerSlots> {
+}
+export {};