windmill-components 1.85.0 → 1.87.0

package/components/FlowStatusViewer.svelte

@@ -1,516 +0,0 @@
-<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);
-});
-async function loadOwner(path) {
-    is_owner = await 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/components/FlowViewer.svelte

@@ -1,89 +0,0 @@
-<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';
-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 {noSide} {flow} overflowAuto />
-			</div>
-		</TabContent>
-		<TabContent value="json">
-			<div class="relative">
-				<Button
-					on:click={() => copyToClipboard(JSON.stringify(flowFiltered, null, 4))}
-					color="dark"
-					variant="border"
-					size="sm"
-					startIcon={{ icon: faClipboard }}
-					btnClasses="absolute top-2 right-2"
-				>
-					Copy content
-				</Button>
-				<Highlight language={json} code={JSON.stringify(flowFiltered, null, 4)} />
-			</div>
-		</TabContent>
-		<TabContent value="schema">
-			<div class="my-4" />
-			<SchemaViewer schema={flow.schema} />
-		</TabContent>
-	</svelte:fragment>
-</Tabs>