windmill-components 1.46.3 → 1.55.0

package/components/FlowBuilder.svelte

@@ -1,16 +1,17 @@
 <script>import { goto } from '$app/navigation';
 import { page } from '$app/stores';
 import { FlowService, ScheduleService } from '../gen';
-import { workspaceStore } from '../stores';
+import { userStore, workspaceStore } from '../stores';
 import { encodeState, formatCron, loadHubScripts, sendUserToast, setQueryWithoutLoad } from '../utils';
-import { faGlobe, faPen } from '@fortawesome/free-solid-svg-icons';
-import { onMount, setContext } from 'svelte';
+import { faEye, faPen, faSave } from '@fortawesome/free-solid-svg-icons';
+import { setContext } from 'svelte';
 import { writable } from 'svelte/store';
 import CenteredPage from './CenteredPage.svelte';
-import { Button } from './common';
+import { Button, Drawer, DrawerContent } from './common';
 import { dirtyStore } from './common/confirmationModal/dirtyStore';
 import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirmationModal.svelte';
 import { OFFSET } from './CronInput.svelte';
+import FlowGraphViewer from './FlowGraphViewer.svelte';
 import FlowEditor from './flows/FlowEditor.svelte';
 import { flowStateStore } from './flows/flowState';
 import { flowStore } from './flows/flowStore';
@@ -21,6 +22,7 @@ import { cleanInputs } from './flows/utils';
 export let initialPath = '';
 export let selectedId;
 export let initialArgs = {};
+export let loading = false;
 let pathError = '';
 async function createSchedule(path) {
     const { cron, args, enabled } = $scheduleStore;
@@ -119,7 +121,7 @@ function setUrl() {
         selectedId: $selectedIdStore
     })), 500);
 }
-const selectedIdStore = writable('settings');
+const selectedIdStore = writable(selectedId);
 const scheduleStore = writable({ args: {}, cron: '', enabled: false });
 const previewArgsStore = writable(initialArgs);
 function select(selectedId) {
@@ -144,63 +146,90 @@ async function loadSchedule() {
         });
     });
 }
-onMount(() => {
-    selectedId && select(selectedId);
-});
+$: selectedId && select(selectedId);
 $: initialPath && $workspaceStore && loadSchedule();
 loadHubScripts();
+let flowViewer;
 </script>
 
-<UnsavedConfirmationModal />
+{#if !$userStore?.operator}
+	<UnsavedConfirmationModal />
 
-<div class="flex flex-col flex-1 h-screen">
-	<!-- Nav between steps-->
-	<div
-		class="justify-between flex flex-row w-full py-2 px-4 space-x-4 overflow-x-auto scrollbar-hidden"
-	>
-		<div class="flex flex-row space-x-2">
-			<FlowImportExportMenu />
-		</div>
-		<div class="gap-1 flex-row hidden md:flex shrink overflow-hidden">
-			<Button
-				btnClasses="hidden lg:inline-flex"
-				startIcon={{ icon: faPen }}
-				variant="contained"
-				color="light"
-				size="xs"
-				on:click={async () => {
-					select('settings')
-					document.getElementById('path')?.focus()
-				}}
-			>
-				{$flowStore.path}
-			</Button>
-			<Button
-				startIcon={{ icon: faPen }}
-				variant="contained"
-				color="light"
-				size="xs"
-				on:click={async () => {
-					select('settings')
-					document.getElementById('flow-summary')?.focus()
-				}}
-			>
-				<div class="max-w-[10em] !truncate">
-					{$flowStore.summary == '' || !$flowStore.summary ? 'No summary' : $flowStore.summary}
+	<Drawer bind:this={flowViewer} size="75%">
+		<DrawerContent title="View Graph" on:close={flowViewer.closeDrawer} noPadding>
+			<div class="overflow-hidden h-full w-full">
+				<FlowGraphViewer flow={$flowStore} />
+			</div>
+		</DrawerContent>
+	</Drawer>
+
+	<div class="flex flex-col flex-1 h-screen">
+		<!-- Nav between steps-->
+		<div
+			class="justify-between flex flex-row w-full items-center pl-2.5 pr-6  space-x-4 overflow-x-auto scrollbar-hidden max-h-12 h-full"
+		>
+			<div class="flex flex-row">
+				<FlowImportExportMenu />
+				<Button
+					btnClasses="inline-flex"
+					startIcon={{ icon: faEye }}
+					variant="border"
+					color="light"
+					size="sm"
+					on:click={flowViewer.openDrawer}
+				>
+					View Graph
+				</Button>
+			</div>
+			<div class="gap-1 flex-row hidden md:flex shrink overflow-hidden">
+				<Button
+					btnClasses="hidden lg:inline-flex"
+					startIcon={{ icon: faPen }}
+					variant="contained"
+					color="light"
+					size="xs"
+					on:click={async () => {
+						select('settings')
+						document.getElementById('path')?.focus()
+					}}
+				>
+					{$flowStore.path && $flowStore.path != '' ? $flowStore.path : 'Choose a path'}
+				</Button>
+				<Button
+					startIcon={{ icon: faPen }}
+					variant="contained"
+					color="light"
+					size="xs"
+					on:click={async () => {
+						select('settings')
+						document.getElementById('flow-summary')?.focus()
+					}}
+				>
+					<div class="max-w-[10em] !truncate">
+						{$flowStore.summary == '' || !$flowStore.summary ? 'No summary' : $flowStore.summary}
+					</div>
+				</Button>
+			</div>
+			<div class="flex flex-row space-x-2">
+				<FlowPreviewButtons />
+				<div class="center-center">
+					<Button
+						disabled={pathError != ''}
+						startIcon={{ icon: faSave }}
+						size="sm"
+						on:click={saveFlow}>Save</Button
+					>
 				</div>
-			</Button>
-		</div>
-		<div class="flex flex-row-reverse ml-2 space-x-reverse space-x-2">
-			<Button disabled={pathError != ''} size="sm" on:click={saveFlow}>Save</Button>
-			<FlowPreviewButtons />
+			</div>
 		</div>
-	</div>
-
-	<!-- metadata -->
 
-	{#if $flowStateStore}
-		<FlowEditor {initialPath} />
-	{:else}
-		<CenteredPage>Loading...</CenteredPage>
-	{/if}
-</div>
+		<!-- metadata -->
+		{#if $flowStateStore}
+			<FlowEditor {initialPath} {loading} />
+		{:else}
+			<CenteredPage>Loading...</CenteredPage>
+		{/if}
+	</div>
+{:else}
+	Flow Builder not available to operators
+{/if}

package/components/FlowBuilder.svelte.d.ts

@@ -4,15 +4,16 @@ declare const __propDef: {
         initialPath?: string | undefined;
         selectedId: string | undefined;
         initialArgs?: Record<string, any> | undefined;
+        loading?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type FlowBuilderProps = typeof __propDef.props;
-export declare type FlowBuilderEvents = typeof __propDef.events;
-export declare type FlowBuilderSlots = typeof __propDef.slots;
+export type FlowBuilderProps = typeof __propDef.props;
+export type FlowBuilderEvents = typeof __propDef.events;
+export type FlowBuilderSlots = typeof __propDef.slots;
 export default class FlowBuilder extends SvelteComponentTyped<FlowBuilderProps, FlowBuilderEvents, FlowBuilderSlots> {
 }
 export {};

package/components/FlowGraphViewer.svelte

@@ -0,0 +1,178 @@
+<script>import { FlowGraph } from './graph';
+import HighlightCode from './HighlightCode.svelte';
+import InputTransformsViewer from './InputTransformsViewer.svelte';
+import IconedPath from './IconedPath.svelte';
+import { scriptPathToHref } from '../utils';
+import { Drawer, DrawerContent } from './common';
+import { Highlight } from 'svelte-highlight';
+import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
+import typescript from 'svelte-highlight/languages/typescript';
+import { cleanExpr } from './flows/utils';
+import FlowPathViewer from './flows/content/FlowPathViewer.svelte';
+import SchemaViewer from './SchemaViewer.svelte';
+export let flow;
+export let overflowAuto = false;
+export let noSide = false;
+let stepDetail = undefined;
+let codeViewer;
+let topHeight = 0;
+</script>
+
+<Drawer bind:this={codeViewer} size="900px">
+	<DrawerContent title={'Expanded Code'} on:close={codeViewer.closeDrawer}>
+		{#if stepDetail && typeof stepDetail != 'string'}
+			{#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 class="mb-2">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}
+			{:else if stepDetail.value.type == 'rawscript'}
+				<div class="text-2xs mb-4">
+					<h3 class="mb-2">Step Inputs</h3>
+					<InputTransformsViewer
+						inputTransforms={stepDetail?.value?.input_transforms ??
+							stepDetail?.input_transforms ??
+							{}}
+					/>
+				</div>
+
+				<h3 class="mb-2">Code</h3>
+				<span class="!text-xs">
+					<HighlightCode language={stepDetail.value.language} code={stepDetail.value.content} />
+				</span>
+			{/if}
+		{/if}
+	</DrawerContent>
+</Drawer>
+<div class="grid grid-cols-3 w-full">
+	<div
+		bind:clientHeight={topHeight}
+		class="{noSide ? 'col-span-3' : 'col-span-2'} w-full border border-gray-400 h-screen"
+		class:overflow-auto={overflowAuto}
+	>
+		<FlowGraph
+			minHeight={topHeight}
+			modules={flow?.value?.modules}
+			failureModule={flow?.value?.failure_module}
+			on:click={(e) => (stepDetail = e.detail)}
+		/>
+	</div>
+	{#if !noSide}
+		<div class="w-full border-r border-b border-t border-gray-400 min-h-[150px] p-2 overflow-auto">
+			{#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 if stepDetail == 'Input'}
+				<SchemaViewer schema={flow?.schema} />
+			{:else if stepDetail == 'Result'}
+				End of the flow
+			{:else if typeof stepDetail != 'string' && stepDetail.value}
+				<div class="font-black text-lg w-full mb-6"
+					>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 class="mb-2">Step Inputs</h3>
+						<InputTransformsViewer
+							inputTransforms={stepDetail?.value?.input_transforms ??
+								stepDetail?.input_transforms ??
+								{}}
+						/>
+					</div>
+
+					<h3 class="mb-2"
+						>Code &nbsp; <button class="text-gray-600 text-xs" on:click={codeViewer.openDrawer}
+							>Expand</button
+						>
+					</h3>
+					<span class="!text-xs">
+						<HighlightCode language={stepDetail.value.language} code={stepDetail.value.content} />
+					</span>
+				{: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 class="mb-2">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&nbsp; <button class="text-gray-600 text-xs" on:click={codeViewer.openDrawer}
+									>Expand</button
+								>
+							</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}
+				{:else if stepDetail.value.type == 'forloopflow'}
+					<p
+						>For loop with iterator: {#if stepDetail.value.iterator.type == 'static'}<ObjectViewer
+								json={stepDetail.value.iterator.value}
+							/>{:else}
+							<span class="text-xs">
+								<Highlight
+									offsetTop={0}
+									language={typescript}
+									code={cleanExpr(stepDetail.value.iterator.expr)}
+								/>
+							</span>
+						{/if}</p
+					>
+				{:else if stepDetail.value.type == 'branchall'}
+					<p>Run all branches</p>
+				{:else if stepDetail.value.type == 'branchone'}
+					<p>Run one branch based on a predicate</p>
+				{:else if stepDetail.value.type == 'flow'}
+					<FlowPathViewer noSide path={stepDetail.value.path} />
+				{/if}
+			{/if}
+		</div>
+	{/if}
+</div>

package/components/FlowGraphViewer.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FlowValue } from '../gen';
+declare const __propDef: {
+    props: {
+        flow: {
+            summary: string;
+            description?: string;
+            value: FlowValue;
+            schema?: any;
+        };
+        overflowAuto?: boolean | undefined;
+        noSide?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowGraphViewerProps = typeof __propDef.props;
+export type FlowGraphViewerEvents = typeof __propDef.events;
+export type FlowGraphViewerSlots = typeof __propDef.slots;
+export default class FlowGraphViewer extends SvelteComponentTyped<FlowGraphViewerProps, FlowGraphViewerEvents, FlowGraphViewerSlots> {
+}
+export {};

package/components/FlowJobResult.svelte

@@ -2,9 +2,14 @@
 import LogViewer from './LogViewer.svelte';
 export let result;
 export let logs;
+export let col = false;
+export let noBorder = false;
 </script>
 
-<div class="grid grid-cols-2 shadow border border-gray-800 h-full">
+<div
+	class:border={!noBorder}
+	class="grid {!col ? 'grid-cols-2' : 'grid-rows-2'} shadow  border-gray-400 h-full"
+>
 	<div class="bg-white max-h-80 h-full p-1 overflow-auto relative">
 		<span class="text-gray-500">Result</span>
 		<DisplayResult {result} />

package/components/FlowJobResult.svelte.d.ts

@@ -3,15 +3,17 @@ declare const __propDef: {
     props: {
         result: any;
         logs: string;
+        col?: boolean | undefined;
+        noBorder?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type FlowJobResultProps = typeof __propDef.props;
-export declare type FlowJobResultEvents = typeof __propDef.events;
-export declare type FlowJobResultSlots = typeof __propDef.slots;
+export type FlowJobResultProps = typeof __propDef.props;
+export type FlowJobResultEvents = typeof __propDef.events;
+export type FlowJobResultSlots = typeof __propDef.slots;
 export default class FlowJobResult extends SvelteComponentTyped<FlowJobResultProps, FlowJobResultEvents, FlowJobResultSlots> {
 }
 export {};

package/components/FlowMetadata.svelte

@@ -1,7 +1,7 @@
 <script>import JobStatus from './JobStatus.svelte';
 import Icon from 'svelte-awesome';
 import { displayDaysAgo } from '../utils';
-import { faCalendar, faClock, faRobot, faScroll, faUser, faWind } from '@fortawesome/free-solid-svg-icons';
+import { faCalendar, faClock, faRobot, faScroll, faUser, faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
 export let job;
 const SMALL_ICON_SCALE = 0.7;
 </script>
@@ -23,7 +23,9 @@ const SMALL_ICON_SCALE = 0.7;
 	<div>
 		{#if job && job.parent_job}
 			{#if job.is_flow_step}
-				<Icon class="text-gray-700" data={faWind} scale={SMALL_ICON_SCALE} /><span class="mx-2">
+				<Icon class="text-gray-700" data={faBarsStaggered} scale={SMALL_ICON_SCALE} /><span
+					class="mx-2"
+				>
 					Step of flow <a href={`/run/${job.parent_job}`}>{job.parent_job}</a></span
 				>
 			{:else}

package/components/FlowMetadata.svelte.d.ts

@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FlowMetadataProps = typeof __propDef.props;
-export declare type FlowMetadataEvents = typeof __propDef.events;
-export declare type FlowMetadataSlots = typeof __propDef.slots;
+export type FlowMetadataProps = typeof __propDef.props;
+export type FlowMetadataEvents = typeof __propDef.events;
+export type FlowMetadataSlots = typeof __propDef.slots;
 export default class FlowMetadata extends SvelteComponentTyped<FlowMetadataProps, FlowMetadataEvents, FlowMetadataSlots> {
 }
 export {};

package/components/FlowPreviewContent.svelte

@@ -1,7 +1,7 @@
 <script>import { Job, JobService } from '../gen';
 import { workspaceStore } from '../stores';
 import { faClose, faPlay, faRefresh } from '@fortawesome/free-solid-svg-icons';
-import { Button } from './common';
+import { Button, Kbd } from './common';
 import { createEventDispatcher, getContext } from 'svelte';
 import Icon from 'svelte-awesome';
 import { dfs, flowStore } from './flows/flowStore';
@@ -14,8 +14,8 @@ import CapturePayload from './flows/content/CapturePayload.svelte';
 let capturePayload;
 export let previewMode;
 export let open;
-let jobId = undefined;
-let job = undefined;
+export let jobId = undefined;
+export let job = undefined;
 let isValid = false;
 let isRunning = false;
 let jobProgressReset;
@@ -76,11 +76,8 @@ function onKeyDown(event) {
         }
     }
 }
-function onJobsLoaded(newJob) {
-    job = newJob;
-    if (job?.type === 'CompletedJob') {
-        isRunning = false;
-    }
+$: if (job?.type === 'CompletedJob') {
+    isRunning = false;
 }
 </script>
 
@@ -89,93 +86,73 @@ function onJobsLoaded(newJob) {
 <svelte:window on:keydown={onKeyDown} />
 
 <div class="flex divide-y flex-col space-y-2 h-screen bg-white px-6 py-2 w-full">
-	<div class="flex flex-row justify-between w-full items-center gap-x-1">
-		<Button
-			variant="border"
-			size="lg"
-			color="dark"
-			btnClasses="!p-0 !w-8 !h-8"
-			on:click={() => {
-				dispatch('close')
-			}}
+	<div class="flex flex-row justify-between w-full items-center gap-x-2">
+		<button
+			on:click={() => dispatch('close')}
+			class="hover:bg-gray-200 bg-gray-100 rounded-full w-8 h-8 flex items-center justify-center transition-all"
 		>
-			<Icon data={faClose} />
-		</Button>
-
-		<div class="flex flex-row justify-center items-center">
-			<div class="flex justify-center p-2 w-8 h-8 bg-blue-200 rounded-lg mr-2 ">
-				<Icon data={faPlay} scale={1} class="text-blue-500" />
-			</div>
+			<Icon data={faClose} class="text-gray-500" />
+		</button>
 
-			<h3
-				class="text-lg leading-6 font-bold text-gray-900 inline-flex flex-row justify-between w-full"
+		{#if isRunning}
+			<Button
+				disabled={!isValid}
+				color="red"
+				on:click={async () => {
+					isRunning = false
+					try {
+						jobId &&
+							(await JobService.cancelQueuedJob({
+								workspace: $workspaceStore ?? '',
+								id: jobId,
+								requestBody: {}
+							}))
+					} catch {}
+					jobId = undefined
+				}}
+				size="md"
+				btnClasses="w-full"
 			>
-				<div>
-					Test {previewMode === 'upTo'
-						? `up to step ${$selectedId.split('-').join(',')}`
-						: ' whole flow'}
-				</div>
-			</h3>
-		</div>
+				Cancel
+			</Button>
+		{:else}
+			<Button
+				variant="contained"
+				startIcon={{ icon: isRunning ? faRefresh : faPlay }}
+				color="blue"
+				size="sm"
+				btnClasses="w-full"
+				disabled={!isValid}
+				on:click={() => runPreview($previewArgs)}
+			>
+				Test flow <Kbd class="ml-2">Ctrl+Enter</Kbd>
+			</Button>
+		{/if}
 		<Button
-			btnClasses="ml-2"
+			btnClasses="h-full"
 			size="sm"
 			variant="border"
 			on:click={() => {
 				capturePayload.openDrawer()
-			}}>Fill test args from payload</Button
+			}}>Fill test args from a request</Button
 		>
 	</div>
-	<div class="grow pb-8 max-h-1/2 overflow-auto">
+	<FlowProgressBar {job} bind:reset={jobProgressReset} />
+
+	<div class="overflow-y-auto grow flex-col flex divide-y divide-gray-600 ">
 		<SchemaForm
-			class="h-full pt-4"
+			compact
+			class="py-4"
 			schema={$flowStore.schema}
 			bind:isValid
 			bind:args={$previewArgs}
 		/>
-	</div>
-	{#if isRunning}
-		<Button
-			disabled={!isValid}
-			color="red"
-			on:click={async () => {
-				isRunning = false
-				try {
-					jobId &&
-						(await JobService.cancelQueuedJob({
-							workspace: $workspaceStore ?? '',
-							id: jobId,
-							requestBody: {}
-						}))
-				} catch {}
-				jobId = undefined
-			}}
-			size="md"
-		>
-			Cancel
-		</Button>
-	{:else}
-		<Button
-			variant="contained"
-			endIcon={{ icon: isRunning ? faRefresh : faPlay }}
-			color="blue"
-			btnClasses="w-full"
-			disabled={!isValid}
-			on:click={() => runPreview($previewArgs)}
-		>
-			Test flow (Ctrl/Cmd + Enter)
-		</Button>
-	{/if}
-
-	<FlowProgressBar {job} bind:reset={jobProgressReset} class="py-4" />
-
-	<div class="h-full overflow-y-auto mb-16 pt-4 grow">
-		{#if jobId}
-			<FlowStatusViewer
-				bind:flowState={$flowStateStore}
-				{jobId}
-				on:jobsLoaded={({ detail }) => onJobsLoaded(detail)}
-			/>
-		{/if}
+		<div class="h-full pt-4 grow">
+			{#if jobId}
+				<FlowStatusViewer bind:flowState={$flowStateStore} {jobId} bind:job />
+			{:else}
+				<div class="italic text-gray-500 h-full grow"> Flow status will be displayed here </div>
+			{/if}
+		</div>
 	</div>
 </div>