windmill-components 1.35.42 → 1.36.0

package/components/FlowJobResult.svelte

@@ -2,6 +2,7 @@
 import Tabs from './common/tabs/Tabs.svelte';
 import Tab from './common/tabs/Tab.svelte';
 import TabContent from './common/tabs/TabContent.svelte';
+import LogViewer from './LogViewer.svelte';
 export let job;
 </script>
 
@@ -10,13 +11,11 @@ export let job;
 		<Tab value="results">Results</Tab>
 		<Tab value="logs">Logs</Tab>
 		<svelte:fragment slot="content">
-			<TabContent value="results" class="border p-2 h-36 overflow-y-scroll">
+			<TabContent value="results" class="border p-2 h-36 overflow-auto">
 				<DisplayResult result={job.result} />
 			</TabContent>
-			<TabContent value="logs" class="border p-2 h-36 overflow-y-scroll">
-				<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-80 border">
-					<pre class="w-full">{job.logs}</pre>
-				</div>
+			<TabContent value="logs" class="border h-36 overflow-auto">
+				<LogViewer content={job.logs ?? ''} isLoading={false} />
 			</TabContent>
 		</svelte:fragment>
 	</Tabs>

package/components/FlowModulesViewer.svelte

@@ -1,11 +1,12 @@
 <script>import { scriptPathToHref } from '../utils';
-import Highlight from 'svelte-highlight';
-import python from 'svelte-highlight/languages/python';
-import typescript from 'svelte-highlight/languages/typescript';
 import { slide } from 'svelte/transition';
 import InputTransformsViewer from './InputTransformsViewer.svelte';
 import IconedPath from './IconedPath.svelte';
+import HighlightCode from './HighlightCode.svelte';
+import { faBug } from '@fortawesome/free-solid-svg-icons';
+import Icon from 'svelte-awesome';
 export let modules;
+export let failureModule;
 let open = {};
 </script>
 
@@ -17,14 +18,15 @@ let open = {};
 	{#each modules ?? [] as mod, i}
 		<li class="w-full">
 			<div class="relative pb-8 w-full">
-				{#if i < (modules ?? []).length - 1}
+				{#if i < (modules ?? []).length - 1 || failureModule}
 					<span class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true" />
 				{/if}
 				<div class="relative flex space-x-3">
 					<div>
 						<span
 							class="h-8 w-8 rounded-full bg-blue-600 flex items-center justify-center ring-8 ring-white text-white"
-							>{i + 1}
+						>
+							{i + 1}
 						</span>
 					</div>
 					<div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4 w-full">
@@ -75,8 +77,8 @@ let open = {};
 									{#if open[i]}
 										<div transition:slide class="border border-black p-2 bg-gray-50 w-full">
 											<InputTransformsViewer inputTransforms={mod?.input_transforms} />
-											<Highlight
-												language={mod?.value?.language == 'deno' ? typescript : python}
+											<HighlightCode
+												language={mod?.value?.language ?? 'deno'}
 												code={mod?.value?.content}
 											/>
 										</div>
@@ -94,4 +96,84 @@ let open = {};
 			</div>
 		</li>
 	{/each}
+	{#if failureModule}
+		<li class="w-full">
+			<div class="relative pb-8 w-full">
+				<div class="relative flex space-x-3">
+					<div>
+						<span
+							class="h-8 w-8 rounded-full bg-red-600 flex items-center justify-center ring-8 ring-white text-white"
+						>
+							<Icon data={faBug} />
+						</span>
+					</div>
+					<div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4 w-full">
+						<div class="w-full">
+							<span class="text-black">{failureModule?.summary ?? ''}</span>
+							<p class="text-sm text-gray-500">
+								{#if failureModule?.value?.type == 'script'}
+									<a
+										target="_blank"
+										href={scriptPathToHref(failureModule?.value?.path ?? '')}
+										class="font-medium text-gray-900"
+									>
+										<IconedPath path={failureModule?.value?.path ?? ''} />
+									</a>
+									{#if failureModule?.value?.path?.startsWith('hub/')}
+										<div>
+											<button
+												on:click={async () => {
+													open[modules.length] = !open[modules.length]
+												}}
+												class="mb-2 underline text-black"
+											>
+												View code and inputs {open[modules.length] ? '(-)' : '(+)'}</button
+											>
+											{#if open[modules.length]}
+												<div class="border border-black p-2 bg-gray-50  divide-y">
+													<InputTransformsViewer
+														inputTransforms={failureModule?.input_transforms}
+													/>
+													<div class="w-full h-full mt-6">
+														<iframe
+															style="height: 400px;"
+															class="w-full h-full  text-sm"
+															title="embedded script from hub"
+															frameborder="0"
+															src="https://hub.windmill.dev/embed/script/{failureModule?.value?.path?.substring(
+																4
+															)}"
+														/>
+													</div>
+												</div>
+											{/if}
+										</div>
+									{/if}
+								{:else if failureModule?.value?.type == 'rawscript'}
+									<button
+										on:click={() => (open[modules.length] = !open[modules.length])}
+										class="mb-2 underline text-black"
+									>
+										Error handler: Raw {failureModule?.value?.language} script {open[modules.length]
+											? '(-)'
+											: '(+)'}</button
+									>
+
+									{#if open[modules.length]}
+										<div transition:slide class="border border-black p-2 bg-gray-50 w-full">
+											<InputTransformsViewer inputTransforms={failureModule?.input_transforms} />
+											<HighlightCode
+												language={failureModule?.value?.language ?? 'deno'}
+												code={failureModule?.value?.content}
+											/>
+										</div>
+									{/if}
+								{/if}
+							</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</li>
+	{/if}
 </ul>

package/components/FlowModulesViewer.svelte.d.ts

@@ -3,6 +3,7 @@ import type { FlowModule } from '../gen';
 declare const __propDef: {
     props: {
         modules: FlowModule[];
+        failureModule: FlowModule | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/FlowPreviewContent.svelte

@@ -1,53 +1,104 @@
 <script>import { JobService } from '../gen';
 import { workspaceStore } from '../stores';
-import { faClose, faPlay } from '@fortawesome/free-solid-svg-icons';
-import { Button } from 'flowbite-svelte';
-import { createEventDispatcher, onDestroy } from 'svelte';
+import { faClose, faPlay, faRefresh } from '@fortawesome/free-solid-svg-icons';
+import { Button } from './common';
+import { createEventDispatcher, getContext, onDestroy } from 'svelte';
 import Icon from 'svelte-awesome';
-import { flowStateStore, flowStateToFlow } from './flows/flowState';
+import { flowStateStore } from './flows/flowState';
 import { mapJobResultsToFlowState } from './flows/flowStateUtils';
 import { flowStore } from './flows/flowStore';
-import { runFlowPreview } from './flows/utils';
-import FlowStatusViewer from './FlowStatusViewer.svelte';
+import { runFlowPreview, selectedIdToIndexes } from './flows/utils';
 import SchemaForm from './SchemaForm.svelte';
-export let args = {};
+import FlowStatusViewer from '../components/FlowStatusViewer.svelte';
+export let previewMode;
 let jobId = undefined;
 let isValid = false;
-let intervalState = 'idle';
-$: newFlow = flowStateToFlow($flowStateStore, $flowStore);
-$: steps = newFlow?.value.modules.length ?? 0;
+let isRunning = false;
+const { selectedId, previewArgs } = getContext('FlowEditorContext');
+function extractFlow(previewMode) {
+    if (previewMode === 'whole') {
+        return $flowStore;
+    }
+    else {
+        let [parentIndex, childIndex] = selectedIdToIndexes($selectedId);
+        const flow = JSON.parse(JSON.stringify($flowStore));
+        const modules = flow.value.modules.slice(0, Number(parentIndex) + 1);
+        flow.value.modules = modules;
+        if (childIndex != undefined) {
+            console.log(modules);
+            const lastModule = modules[modules.length - 1].value;
+            if (lastModule.type === 'forloopflow') {
+                lastModule.modules = lastModule.modules.slice(0, Number(childIndex) + 1);
+            }
+            else {
+                throw Error('Excepted forloopflow module');
+            }
+        }
+        return flow;
+    }
+}
 const dispatch = createEventDispatcher();
 export async function runPreview(args) {
+    const newFlow = extractFlow(previewMode);
     jobId = await runFlowPreview(args, newFlow);
-    intervalState = 'running';
+    isRunning = true;
+}
+function onKeyDown(event) {
+    switch (event.key) {
+        case 'Enter':
+            if (event.ctrlKey) {
+                event.preventDefault();
+                runPreview($previewArgs);
+            }
+            break;
+        case 'Escape':
+            dispatch('close');
+            break;
+    }
 }
-onDestroy(() => {
-    intervalState = 'done';
-});
 </script>
 
+<svelte:window on:keydown={onKeyDown} />
+
 <div class="flex divide-y flex-col space-y-2 h-screen bg-white p-6 w-full">
 	<div class="flex justify-between">
-		<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">
+		<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>
 
-			<h3 class="text-lg leading-6 font-bold text-gray-900">Flow preview</h3>
+			<h3 class="text-lg leading-6 font-bold text-gray-900">
+				Test preview - {previewMode === 'upTo'
+					? `up to step ${$selectedId.split('-').join(',')}`
+					: ' whole flow'}
+			</h3>
 		</div>
-		<Button color="alternative" on:click={() => dispatch('close')}>
+		<Button
+			variant="border"
+			size="lg"
+			color="dark"
+			btnClasses="!p-0 !w-8 !h-8"
+			on:click={() => {
+				dispatch('close')
+			}}
+		>
 			<Icon data={faClose} />
 		</Button>
 	</div>
-	<div class="max-h-80 overflow-y-auto">
-		<SchemaForm schema={$flowStore.schema} bind:isValid bind:args />
+	<div class="grow pb-8 max-h-1/2 overflow-auto">
+		<SchemaForm
+			class="h-full pt-4"
+			schema={$flowStore.schema}
+			bind:isValid
+			bind:args={$previewArgs}
+		/>
 	</div>
-	{#if intervalState === 'running'}
+	{#if isRunning}
 		<Button
 			disabled={!isValid}
 			color="red"
 			on:click={async () => {
-				intervalState = 'canceled'
+				isRunning = false
 				try {
 					jobId &&
 						(await JobService.cancelQueuedJob({
@@ -63,8 +114,16 @@ onDestroy(() => {
 			Cancel
 		</Button>
 	{:else}
-		<Button disabled={!isValid} class="blue-button" on:click={() => runPreview(args)} size="md">
-			{`Run${intervalState === 'done' ? ' again' : ''}`}
+		<Button
+			variant="contained"
+			endIcon={{ icon: isRunning ? faRefresh : faPlay }}
+			size="lg"
+			color="blue"
+			btnClasses="w-full"
+			disabled={!isValid}
+			on:click={() => runPreview($previewArgs)}
+		>
+			Test flow (Ctrl/Cmd + Enter)
 		</Button>
 	{/if}
 
@@ -73,10 +132,12 @@ onDestroy(() => {
 			<FlowStatusViewer
 				{jobId}
 				on:jobsLoaded={(e) => {
-					intervalState = 'done'
-					mapJobResultsToFlowState(e.detail, 'upto', steps - 1)
+					isRunning = false
+					const parentIndex = selectedIdToIndexes($selectedId)[0]
+					const upToIndex =
+						previewMode === 'upTo' ? Number(parentIndex) + 1 : $flowStateStore.modules.length
+					mapJobResultsToFlowState(e.detail, upToIndex)
 				}}
-				root={true}
 			/>
 		{/if}
 	</div>

package/components/FlowPreviewContent.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        args?: Record<string, any> | undefined;
+        previewMode: 'upTo' | 'whole';
         runPreview?: ((args: Record<string, any>) => Promise<void>) | undefined;
     };
     events: {

package/components/FlowStatusViewer.svelte

@@ -1,4 +1,4 @@
-<script>import { JobService } from '../gen';
+<script>import { FlowStatusModule, JobService } from '../gen';
 import { workspaceStore } from '../stores';
 import FlowJobResult from './FlowJobResult.svelte';
 import FlowPreviewStatus from './preview/FlowPreviewStatus.svelte';
@@ -9,7 +9,6 @@ import { createEventDispatcher } from 'svelte';
 import { onDestroy } from 'svelte';
 const dispatch = createEventDispatcher();
 export let jobId;
-export let root = false;
 export let forloopJobIds = undefined;
 export let jobResult = {
     job: undefined,
@@ -18,6 +17,7 @@ export let jobResult = {
 };
 let forloop_selected = '';
 let timeout;
+$: innerModules = jobResult?.job?.flow_status?.modules ?? [];
 async function loadJobInProgress() {
     const job = await JobService.getJob({
         workspace: $workspaceStore ?? '',
@@ -28,14 +28,8 @@ async function loadJobInProgress() {
     if (job?.type !== 'CompletedJob') {
         timeout = setTimeout(() => loadJobInProgress(), 500);
     }
-    else if (root) {
-        dispatch('jobsLoaded', jobResult);
-    }
 }
-$: hasModules =
-    jobResult.job &&
-        Array.isArray(jobResult.job?.raw_flow?.modules) &&
-        jobResult.job?.raw_flow?.modules.length > 1;
+$: jobResult && jobResult.job?.type === 'CompletedJob' && dispatch('jobsLoaded', jobResult);
 function updateJobId() {
     if (jobId !== jobResult.job?.id) {
         loadJobInProgress();
@@ -49,7 +43,9 @@ onDestroy(() => {
 
 {#if jobResult.job}
 	<div class="flow-root w-full space-y-4">
-		<h3 class="text-md leading-6 font-bold text-gray-900 border-b pb-2">Preview results</h3>
+		{#if innerModules.length > 0}
+			<h3 class="text-md leading-6 font-bold text-gray-900 border-b pb-2">Flow result</h3>
+		{/if}
 		<FlowPreviewStatus job={jobResult.job} />
 		{#if `result` in jobResult.job}
 			<FlowJobResult job={jobResult.job} />
@@ -87,32 +83,51 @@ onDestroy(() => {
 					<svelte:self jobId={loopJobId} bind:jobResult={jobResult.loopJobs[j]} />
 				</div>
 			{/each}
-		{:else if hasModules && Array.isArray(jobResult.innerJobs)}
+		{: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">
-					Detailed results
+					Step-by-step results
 				</h3>
 
-				{#each jobResult.job?.flow_status?.modules ?? [] as module, i}
-					<p class="text-gray-500 mb-6 w-full ">
-						Step
-						<span class="font-medium text-gray-900"> {i + 1} </span> out of
-						<span class="font-medium text-gray-900">{jobResult.job?.raw_flow?.modules.length}</span>
+				{#each innerModules as mod, i}
+					<p class="text-gray-500 mb-2 w-full ">
+						{#if jobResult.job?.raw_flow?.modules && i < jobResult.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"
+								>{jobResult.job?.raw_flow?.modules.length}</span
+							>
+							{#if jobResult.job.raw_flow?.modules[i]?.summary}
+								: <span class="font-medium text-gray-900"
+									>{jobResult.job.raw_flow?.modules[i]?.summary ?? ''}</span
+								>
+							{/if}
+						{:else}
+							<span class="font-medium text-gray-900"> Failure module </span>
+						{/if}
 					</p>
 
-					{#if ['InProgress', 'Success', 'Error'].includes(module.type)}
-						<li class="w-full border p-6 space-y-2">
+					<li class="w-full border p-6 space-y-2">
+						{#if [FlowStatusModule.type.IN_PROGRESS, FlowStatusModule.type.SUCCESS, FlowStatusModule.type.FAILURE].includes(mod.type)}
 							<svelte:self
-								jobId={module.job}
+								jobId={mod.job}
 								bind:jobResult={jobResult.innerJobs[i]}
-								forloopJobIds={module.forloop_jobs}
+								forloopJobIds={mod.forloop_jobs}
+								on:jobsLoaded={(e) => {
+									jobResult = jobResult
+								}}
 							/>
-						</li>
-					{/if}
+						{:else}
+							<span>{mod.type}</span>
+						{/if}
+					</li>
 				{/each}
 			</ul>
 		{/if}
 	</div>
 {:else}
-	No script selected
+	Job loading...
 {/if}

package/components/FlowStatusViewer.svelte.d.ts

@@ -3,7 +3,6 @@ import type { JobResult } from './flows/flowStateUtils';
 declare const __propDef: {
     props: {
         jobId: string;
-        root?: boolean | undefined;
         forloopJobIds?: string[] | undefined;
         jobResult?: JobResult | undefined;
     };

package/components/FlowViewer.svelte

@@ -1,15 +1,15 @@
 <script>import Highlight from 'svelte-highlight';
 import json from 'svelte-highlight/languages/json';
-import Tabs from './common/tabs/Tabs.svelte';
-import Tab from './common/tabs/Tab.svelte';
-import TabContent from './common/tabs/TabContent.svelte';
+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 SvelteMarkdown from 'svelte-markdown';
 import FlowModulesViewer from './FlowModulesViewer.svelte';
+import { copyToClipboard } from '../utils';
 export let flow;
 export let initialOpen = undefined;
-let flowFiltered = {
+$: flowFiltered = {
     summary: flow.summary,
     description: flow.description,
     value: flow.value,
@@ -61,18 +61,24 @@ function toAny(x) {
 				{:else}
 					<div class="text-gray-700 text-xs italic mb-4">No inputs</div>
 				{/if}
-				<FlowModulesViewer modules={flow?.value?.modules} />
+				<FlowModulesViewer
+					modules={flow?.value?.modules}
+					failureModule={flow?.value?.failure_module}
+				/>
 			</div>
 		</TabContent>
 		<TabContent value="json">
 			<div class="relative">
-				<button
-					on:click={async () => {
-						await navigator.clipboard.writeText(JSON.stringify(flowFiltered, null, 4))
-					}}
-					class="absolute default-secondary-button-v2 bg-white/30 right-0 my-2 ml-4"
-					>copy content</button
+				<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>

package/components/GroupModal.svelte

@@ -5,6 +5,7 @@ import AutoComplete from 'simple-svelte-autocomplete';
 import PageHeader from './PageHeader.svelte';
 import TableCustom from './TableCustom.svelte';
 import { canWrite } from '../utils';
+import { Button } from './common';
 let name = '';
 let modal;
 let can_write = false;
@@ -54,7 +55,15 @@ async function loadGroup() {
 			{#if can_write}
 				<div>
 					<AutoComplete items={usernames} bind:selectedItem={username} />
-					<button class="default-button ml-4" on:click={addToGroup}>Add member</button>
+					<Button
+						variant="contained"
+						color="blue"
+						size="sm"
+						btnClasses="!ml-4"
+						on:click={addToGroup}
+					>
+						Add member
+					</Button>
 				</div>
 			{/if}
 		</PageHeader>

package/components/HighlightCode.svelte

@@ -0,0 +1,22 @@
+<script>import Highlight from 'svelte-highlight';
+import python from 'svelte-highlight/languages/python';
+import typescript from 'svelte-highlight/languages/typescript';
+import go from 'svelte-highlight/languages/go';
+export let code = '';
+export let language;
+function getLang(lang) {
+    switch (lang) {
+        case 'python3':
+            return python;
+        case 'deno':
+            return typescript;
+        case 'go':
+            return go;
+        default:
+            return python;
+    }
+}
+$: lang = getLang(language);
+</script>
+
+<Highlight language={lang} {code} />

package/components/HighlightCode.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        code?: string | undefined;
+        language: 'python3' | 'deno' | 'go' | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type HighlightCodeProps = typeof __propDef.props;
+export declare type HighlightCodeEvents = typeof __propDef.events;
+export declare type HighlightCodeSlots = typeof __propDef.slots;
+export default class HighlightCode extends SvelteComponentTyped<HighlightCodeProps, HighlightCodeEvents, HighlightCodeSlots> {
+}
+export {};

package/components/IconedPath.svelte

@@ -1,12 +1,14 @@
-<script>import IconedResourceType from './IconedResourceType.svelte';
+<script>import Badge from './common/badge/Badge.svelte';
+import IconedResourceType from './IconedResourceType.svelte';
 export let path;
 </script>
 
-{#if path.startsWith('hub/')}
-	<span class="inline-flex flex-row gap-x-2 items-center">
+<div class="flex space-x-2 items-center">
+	{#if path.startsWith('hub/')}
 		<IconedResourceType name={path.split('/')[2]} silent={true} />
 		<span>{path}</span>
-	</span>
-{:else}
-	{path}
-{/if}
+	{:else}
+		<Badge color="blue">Workspace</Badge>
+		<span>{path}</span>
+	{/if}
+</div>