windmill-components 1.46.3 → 1.52.0

package/components/FlowStatusViewer.svelte

@@ -6,16 +6,30 @@ import Icon from 'svelte-awesome';
 import { faChevronDown, faChevronUp, faHourglassHalf } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import { onDestroy } from 'svelte';
-import { Button } from './common';
+import { Button, Tab } from './common';
 import DisplayResult from './DisplayResult.svelte';
+import Tabs from './common/tabs/Tabs.svelte';
+import { FlowGraph } from './graph';
 const dispatch = createEventDispatcher();
 export let jobId;
 export let flowState = undefined;
 export let flowJobIds = undefined;
 export let job = undefined;
+export let flowModuleStates = {};
+let localFlowModuleStates = {};
 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] !== FlowStatusModule.type.FAILURE) {
+            flowModuleStates[moduleId] = state;
+        }
+    });
+}
 let lastSize = 0;
 $: {
     let len = (flowJobIds?.flowJobs ?? []).length;
@@ -52,6 +66,7 @@ async function loadJobInProgress() {
 $: job && dispatch('jobsLoaded', job);
 function updateJobId() {
     if (jobId !== job?.id) {
+        localFlowModuleStates = {};
         loadJobInProgress();
     }
 }
@@ -60,10 +75,11 @@ $: isListJob = flowJobIds && Array.isArray(flowJobIds?.flowJobs);
 onDestroy(() => {
     timeout && clearTimeout(timeout);
 });
+let selected = 'graph';
 </script>
 
 {#if job}
-	<div class="flow-root w-full space-y-4 ">
+	<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}
@@ -86,119 +102,153 @@ onDestroy(() => {
 			</div>
 		{/if}
 
-		{#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={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>
+		{#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}
 
-					<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
-						{flowState}
-						jobId={loopJobId}
-						on:jobsLoaded={(e) => {
-							if (flowJobIds?.moduleId) {
-								if (flowState) {
-									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.result == null ? 'Job in progress ...' : e.detail.result
-								}
+		<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
 							}
 						}}
-					/>
-				</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>
+					>
+						<span class="truncate">
+							#{j + 1}: {loopJobId}
+						</span>
 
-				{#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)}
-							<svelte:self
-								{flowState}
-								jobId={mod.job}
-								flowJobIds={mod.flow_jobs
-									? {
-											moduleId: mod.id,
-											flowJobs: mod.flow_jobs
-									  }
-									: undefined}
-								on:jobsLoaded={(e) => {
-									if (mod.id && (mod.flow_jobs ?? []).length == 0) {
-										if (flowState && flowState[mod.id]) {
-											flowState[mod.id].previewResult = e.detail.result
-											flowState[mod.id].previewArgs = e.detail.args
+						<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
+							bind:flowState
+							bind:flowModuleStates={localFlowModuleStates}
+							jobId={loopJobId}
+							on:jobsLoaded={(e) => {
+								if (flowJobIds?.moduleId) {
+									if (flowState) {
+										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.result == null ? 'Job in progress ...' : e.detail.result
+										jobFailures[j] = e.detail.success === false
 									}
-								}}
-							/>
-						{:else}
-							<span class="italic text-gray-600">
-								<Icon data={faHourglassHalf} class="mr-2" />
+								}
+							}}
+						/>
+					</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>
 
-								{#if mod.type == FlowStatusModule.type.WAITING_FOR_EVENT}
-									Waiting to be resumed by receivent events such as approvals
-								{:else if mod.type == FlowStatusModule.type.WAITING_FOR_PRIOR_STEPS}
-									Waiting for prior steps to complete
-								{:else if mod.type == FlowStatusModule.type.WAITING_FOR_EXECUTOR}
-									Job is ready to be executed and will be picked up by the next available worker
+					{#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}
-							</span>
-						{/if}
-					</li>
-				{/each}
-			</ul>
-		{/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)}
+								<svelte:self
+									bind:flowState
+									bind:flowModuleStates={localFlowModuleStates}
+									jobId={mod.job}
+									flowJobIds={mod.flow_jobs
+										? {
+												moduleId: mod.id,
+												flowJobs: mod.flow_jobs
+										  }
+										: undefined}
+									on:jobsLoaded={(e) => {
+										if (mod.id && (mod.flow_jobs ?? []).length == 0) {
+											if (flowState && flowState[mod.id]) {
+												flowState[mod.id].previewResult = e.detail.result
+												flowState[mod.id].previewArgs = e.detail.args
+											}
+											if (e.detail.type == 'QueuedJob') {
+												localFlowModuleStates[mod.id] = FlowStatusModule.type.IN_PROGRESS
+											} else {
+												localFlowModuleStates[mod.id] = e.detail.success
+													? FlowStatusModule.type.SUCCESS
+													: FlowStatusModule.type.FAILURE
+											}
+										}
+									}}
+								/>
+							{:else}
+								<span class="italic text-gray-600">
+									<Icon data={faHourglassHalf} class="mr-2" />
+
+									{#if mod.type == FlowStatusModule.type.WAITING_FOR_EVENT}
+										Waiting to be resumed by receivent events such as approvals
+									{:else if mod.type == FlowStatusModule.type.WAITING_FOR_PRIOR_STEPS}
+										Waiting for prior steps to complete
+									{:else if mod.type == FlowStatusModule.type.WAITING_FOR_EXECUTOR}
+										Job is ready to be executed and will be picked up by the next available worker
+									{/if}
+								</span>
+							{/if}
+						</li>
+					{/each}
+				</ul>
+			{/if}
+		</div>
 	</div>
+	{#if job.raw_flow && !isListJob}
+		<div class="{selected != 'graph' ? 'hidden' : ''} lg:mx-40 mx-10 border border-gray-400 mt-4">
+			<FlowGraph
+				flowModuleStates={localFlowModuleStates}
+				notSelectable
+				modules={job.raw_flow?.modules ?? []}
+				failureModule={job.raw_flow?.failure_module}
+			/>
+		</div>
+	{/if}
 {:else}
 	Job loading...
 {/if}

package/components/FlowStatusViewer.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import { Job } from '../gen';
+import { FlowStatusModule, Job } from '../gen';
 import type { FlowState } from './flows/flowState';
 declare const __propDef: {
     props: {
@@ -10,6 +10,7 @@ declare const __propDef: {
             flowJobs: string[];
         } | undefined;
         job?: Job | undefined;
+        flowModuleStates?: Record<string, FlowStatusModule.type> | undefined;
     };
     events: {
         jobsLoaded: CustomEvent<any>;
@@ -18,9 +19,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FlowStatusViewerProps = typeof __propDef.props;
-export declare type FlowStatusViewerEvents = typeof __propDef.events;
-export declare type FlowStatusViewerSlots = typeof __propDef.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/components/FlowViewer.svelte

@@ -5,11 +5,8 @@ import { Tab, Tabs, TabContent, Button } from './common';
 import SchemaViewer from './SchemaViewer.svelte';
 import FieldHeader from './FieldHeader.svelte';
 import SvelteMarkdown from 'svelte-markdown';
-import { copyToClipboard, scriptPathToHref } from '../utils';
-import { FlowGraph } from './graph';
-import HighlightCode from './HighlightCode.svelte';
-import InputTransformsViewer from './InputTransformsViewer.svelte';
-import IconedPath from './IconedPath.svelte';
+import { copyToClipboard } from '../utils';
+import FlowGraphViewer from './FlowGraphViewer.svelte';
 export let flow;
 export let initialOpen = undefined;
 $: flowFiltered = {
@@ -20,7 +17,6 @@ $: flowFiltered = {
 };
 export let tab = 'ui';
 export let noSummary = false;
-let stepDetail = undefined;
 let open = {};
 if (initialOpen) {
     open[initialOpen] = true;
@@ -68,78 +64,7 @@ function toAny(x) {
 				{:else}
 					<div class="text-gray-700 text-xs italic mb-4">No inputs</div>
 				{/if}
-				<div class="pr-40 flex flex-col">
-					<div class="mt-5 h-full w-full border border-gray-700">
-						<FlowGraph
-							modules={flow?.value?.modules}
-							failureModule={flow?.value?.failure_module}
-							on:click={(e) => (stepDetail = e.detail)}
-						/>
-					</div>
-					<div class="w-full border-l border-r border-b border-gray-700 min-h-[150px] p-2">
-						{#if stepDetail == undefined}
-							<span class="font-black text-lg w-full my-4">
-								<span>Click on a step to see its details</span>
-							</span>
-						{:else}
-							<div class="font-black text-lg w-full mb-2 "
-								>Step {stepDetail.id ?? ''}<span class="ml-2 font-normal"
-									>{stepDetail.summary || ''}</span
-								></div
-							>
-							{#if stepDetail.value.type == 'identity'}
-								<div> An identity step return as output its input </div>
-							{:else if stepDetail.value.type == 'rawscript'}
-								<div class="text-2xs mb-4">
-									<h3>Step Inputs</h3>
-									<InputTransformsViewer
-										inputTransforms={stepDetail?.value?.input_transforms ??
-											stepDetail?.input_transforms ??
-											{}}
-									/>
-								</div>
-
-								<h3>Code</h3>
-								<HighlightCode
-									language={stepDetail.value.language}
-									code={stepDetail.value.content}
-								/>
-							{:else if stepDetail.value.type == 'script'}
-								<div class="mb-4">
-									<a
-										rel="noreferrer"
-										target="_blank"
-										href={scriptPathToHref(stepDetail?.value?.path ?? '')}
-										class=""
-									>
-										<IconedPath path={stepDetail?.value?.path ?? ''} />
-									</a>
-								</div>
-								<div class="text-2xs mb-4">
-									<h3>Step Inputs</h3>
-									<InputTransformsViewer
-										inputTransforms={stepDetail?.value?.input_transforms ??
-											stepDetail?.input_transforms ??
-											{}}
-									/>
-								</div>
-								{#if stepDetail.value.path.startsWith('hub/')}
-									<div class="mt-6">
-										<h3>Code</h3>
-										<iframe
-											class="w-full h-full  text-sm"
-											title="embedded script from hub"
-											frameborder="0"
-											src="https://hub.windmill.dev/embed/script/{stepDetail.value?.path?.substring(
-												4
-											)}"
-										/>
-									</div>
-								{/if}
-							{/if}
-						{/if}
-					</div>
-				</div>
+				<FlowGraphViewer {flow} overflowAuto />
 			</div>
 		</TabContent>
 		<TabContent value="json">

package/components/FlowViewer.svelte.d.ts

@@ -17,9 +17,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FlowViewerProps = typeof __propDef.props;
-export declare type FlowViewerEvents = typeof __propDef.events;
-export declare type FlowViewerSlots = typeof __propDef.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 {};

package/components/GroupModal.svelte.d.ts

@@ -8,9 +8,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type GroupModalProps = typeof __propDef.props;
-export declare type GroupModalEvents = typeof __propDef.events;
-export declare type GroupModalSlots = typeof __propDef.slots;
+export type GroupModalProps = typeof __propDef.props;
+export type GroupModalEvents = typeof __propDef.events;
+export type GroupModalSlots = typeof __propDef.slots;
 export default class GroupModal extends SvelteComponentTyped<GroupModalProps, GroupModalEvents, GroupModalSlots> {
     get openDrawer(): (newName: string) => void;
 }

package/components/HighlightCode.svelte.d.ts

@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type HighlightCodeProps = typeof __propDef.props;
-export declare type HighlightCodeEvents = typeof __propDef.events;
-export declare type HighlightCodeSlots = typeof __propDef.slots;
+export type HighlightCodeProps = typeof __propDef.props;
+export type HighlightCodeEvents = typeof __propDef.events;
+export type HighlightCodeSlots = typeof __propDef.slots;
 export default class HighlightCode extends SvelteComponentTyped<HighlightCodeProps, HighlightCodeEvents, HighlightCodeSlots> {
 }
 export {};

package/components/IconedPath.svelte.d.ts

@@ -8,9 +8,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type IconedPathProps = typeof __propDef.props;
-export declare type IconedPathEvents = typeof __propDef.events;
-export declare type IconedPathSlots = typeof __propDef.slots;
+export type IconedPathProps = typeof __propDef.props;
+export type IconedPathEvents = typeof __propDef.events;
+export type IconedPathSlots = typeof __propDef.slots;
 export default class IconedPath extends SvelteComponentTyped<IconedPathProps, IconedPathEvents, IconedPathSlots> {
 }
 export {};

package/components/IconedResourceType.svelte

@@ -1,23 +1,4 @@
-<script>import AirtableIcon from './icons/AirtableIcon.svelte';
-import DbIcon from './icons/DbIcon.svelte';
-import DiscordIcon from './icons/DiscordIcon.svelte';
-import GcalIcon from './icons/GcalIcon.svelte';
-import GCloudIcon from './icons/GCloudIcon.svelte';
-import GdriveIcon from './icons/GdriveIcon.svelte';
-import GithubIcon from './icons/GithubIcon.svelte';
-import GitlabIcon from './icons/GItlabIcon.svelte';
-import GmailIcon from './icons/GmailIcon.svelte';
-import GSheetsIcon from './icons/GSheetsIcon.svelte';
-import HttpIcon from './icons/HttpIcon.svelte';
-import Mail from './icons/Mail.svelte';
-import MastodonIcon from './icons/MastodonIcon.svelte';
-import MatrixIcon from './icons/MatrixIcon.svelte';
-import Mysql from './icons/Mysql.svelte';
-import PostgresIcon from './icons/PostgresIcon.svelte';
-import S3Icon from './icons/S3Icon.svelte';
-import Slack from './icons/Slack.svelte';
-import TogglIcon from './icons/TogglIcon.svelte';
-import WindmillIcon from './icons/WindmillIcon.svelte';
+<script>import { APP_TO_ICON_COMPONENT } from './icons';
 export let name;
 export let silent = false;
 export let after = false;
@@ -30,47 +11,8 @@ export let center = false;
 	{#if !silent && !after}
 		{name}
 	{/if}
-
-	{#if name === 'postgresql'}
-		<PostgresIcon {height} {width} />
-	{:else if name === 'mysql'}
-		<Mysql {height} {width} />
-	{:else if name === 'smtp'}
-		<Mail {height} {width} />
-	{:else if name === 'mongodb'}
-		<DbIcon {height} {width} />
-	{:else if name === 'slack'}
-		<Slack {height} {width} />
-	{:else if name === 'github'}
-		<GithubIcon {height} {width} />
-	{:else if name === 'gmail'}
-		<GmailIcon {height} {width} />
-	{:else if name === 'gsheets'}
-		<GSheetsIcon {height} {width} />
-	{:else if name === 'gitlab'}
-		<GitlabIcon {height} {width} />
-	{:else if name === 'gcloud'}
-		<GCloudIcon {height} {width} />
-	{:else if name === 'gcal'}
-		<GcalIcon {height} {width} />
-	{:else if name === 'gdrive'}
-		<GdriveIcon {height} {width} />
-	{:else if name === 'airtable'}
-		<AirtableIcon {height} {width} />
-	{:else if name === 'toggl'}
-		<TogglIcon {height} {width} />
-	{:else if name === 's3'}
-		<S3Icon {height} {width} />
-	{:else if name === 'discord' || name == 'discord_webhook'}
-		<DiscordIcon {height} {width} />
-	{:else if name === 'mastodon'}
-		<MastodonIcon {height} {width} />
-	{:else if name === 'matrix'}
-		<MatrixIcon {height} {width} />
-	{:else if name === 'windmill'}
-		<WindmillIcon {height} {width} />
-	{:else if name === 'http'}
-		<HttpIcon {height} {width} />
+	{#if APP_TO_ICON_COMPONENT[name]}
+		<svelte:component this={APP_TO_ICON_COMPONENT[name]} {height} {width} />
 	{:else}
 		<span style="width: {width}" class="bg-gray-100 rounded-full" />
 	{/if}

package/components/IconedResourceType.svelte.d.ts

@@ -13,9 +13,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type IconedResourceTypeProps = typeof __propDef.props;
-export declare type IconedResourceTypeEvents = typeof __propDef.events;
-export declare type IconedResourceTypeSlots = typeof __propDef.slots;
+export type IconedResourceTypeProps = typeof __propDef.props;
+export type IconedResourceTypeEvents = typeof __propDef.events;
+export type IconedResourceTypeSlots = typeof __propDef.slots;
 export default class IconedResourceType extends SvelteComponentTyped<IconedResourceTypeProps, IconedResourceTypeEvents, IconedResourceTypeSlots> {
 }
 export {};