windmill-components 1.35.42 → 1.35.43

package/components/Editor.svelte.d.ts

@@ -1,9 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
+import * as monaco from 'monaco-editor';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        deno?: boolean | undefined;
-        lang?: string | undefined;
+        lang: 'typescript' | 'python' | 'go';
         code?: string | undefined;
         hash?: string | undefined;
         cmdEnterAction?: (() => void) | undefined;
@@ -21,6 +21,7 @@ declare const __propDef: {
         setCode?: ((ncode: string) => void) | undefined;
         clearContent?: (() => Promise<void>) | undefined;
         reloadWebsocket?: (() => Promise<void>) | undefined;
+        addAction?: ((id: string, label: string, callback: (editor: monaco.editor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void) | undefined;
     };
     events: {
         change: CustomEvent<any>;
@@ -41,5 +42,6 @@ export default class Editor extends SvelteComponentTyped<EditorProps, EditorEven
     get setCode(): (ncode: string) => void;
     get clearContent(): () => Promise<void>;
     get reloadWebsocket(): () => Promise<void>;
+    get addAction(): (id: string, label: string, callback: (editor: monaco.editor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void;
 }
 export {};

package/components/EditorBar.svelte

@@ -9,9 +9,11 @@ import ItemPicker from './ItemPicker.svelte';
 import Modal from './Modal.svelte';
 import ResourceEditor from './ResourceEditor.svelte';
 import VariableEditor from './VariableEditor.svelte';
+import Button from './common/button/Button.svelte';
 export let lang;
 export let editor;
 export let websocketAlive;
+export let iconOnly = false;
 let variablePicker;
 let resourcePicker;
 let scriptPicker;
@@ -20,6 +22,15 @@ let resourceEditor;
 let codeViewer;
 let codeLang = 'deno';
 let codeContent = '';
+function addEditorActions() {
+    editor.addAction('insert-variable', 'Windmill: Insert variable', () => {
+        variablePicker.openModal();
+    });
+    editor.addAction('insert-resource', 'Windmill: Insert resource', () => {
+        resourcePicker.openModal();
+    });
+}
+$: editor && addEditorActions();
 async function loadVariables() {
     let r = [];
     const variables = (await VariableService.listVariable({ workspace: $workspaceStore ?? 'NO_W' })).map((x) => {
@@ -72,7 +83,7 @@ async function loadScripts() {
 		if (!path) {
 			if (lang == 'deno') {
 				editor.insertAtCursor(`Deno.env.get('${name}')`)
-			} else {
+			} else if (lang == 'python3') {
 				if (!editor.getCode().includes('import os')) {
 					editor.insertAtBeginning('import os\n')
 				}
@@ -87,7 +98,7 @@ async function loadScripts() {
 					)
 				}
 				editor.insertAtCursor(`(await wmill.getVariable('${path}'))`)
-			} else {
+			} else if (lang == 'python3') {
 				if (!editor.getCode().includes('import wmill')) {
 					editor.insertAtBeginning('import wmill\n')
 				}
@@ -126,7 +137,7 @@ async function loadScripts() {
 				)
 			}
 			editor.insertAtCursor(`(await wmill.getResource('${path}'))`)
-		} else {
+		} else if (lang == 'python3') {
 			if (!editor.getCode().includes('import wmill')) {
 				editor.insertAtBeginning('import wmill\n')
 			}
@@ -160,75 +171,77 @@ async function loadScripts() {
 
 <div class="flex divide-x items-center">
 	<div>
-		<button
-			type="button"
-			class="mr-1 bg-white rounded-md items-center flex hover:bg-gray-100 font-medium text-xs p-2"
-			on:click={() => {
-				variablePicker.openModal()
-			}}
+		<Button
+			color="light"
+			btnClasses="mr-1"
+			on:click={variablePicker.openModal}
+			size="xs"
+			spacingSize="md"
+			startIcon={{ icon: faFile }}
+			{iconOnly}
 		>
-			<Icon data={faFile} class="h-4 w-4 mr-2" />
 			Insert variable
-		</button>
+		</Button>
 	</div>
 	<div>
-		<button
-			type="button"
-			class="mx-1 bg-white rounded-md items-center flex hover:bg-gray-100 font-medium text-xs p-2"
-			on:click={() => {
-				resourcePicker.openModal()
-			}}
+		<Button
+			btnClasses="mx-1"
+			size="xs"
+			spacingSize="md"
+			color="light"
+			on:click={resourcePicker.openModal}
+			{iconOnly}
+			startIcon={{ icon: faCube }}
 		>
-			<Icon data={faCube} class="h-4 w-4 mr-2" />
 			Insert resource
-		</button>
+		</Button>
 	</div>
 
 	<div>
-		<button
-			type="button"
-			class="mx-1  bg-white rounded-md items-center flex hover:bg-gray-100 font-medium  text-xs p-2"
-			on:click={() => {
-				scriptPicker.openModal()
-			}}
+		<Button
+			btnClasses="mx-1"
+			size="xs"
+			spacingSize="md"
+			color="light"
+			on:click={scriptPicker.openModal}
+			{iconOnly}
+			startIcon={{ icon: faCode }}
 		>
-			<Icon data={faCode} class="h-4 w-4 mr-2" />
 			Search script
-		</button>
+		</Button>
 	</div>
 
 	<div>
-		<button
-			type="button"
-			class="mx-1 bg-white rounded-md items-center flex hover:bg-gray-100 font-medium  text-xs p-2"
-			on:click={() => {
-				editor.clearContent()
-			}}
+		<Button
+			btnClasses="mx-1"
+			size="xs"
+			spacingSize="md"
+			color="light"
+			on:click={editor.clearContent}
+			{iconOnly}
+			startIcon={{ icon: faRotateLeft }}
 		>
-			<Icon data={faRotateLeft} class="h-4 w-4 mr-2" />
 			Reset content
-		</button>
+		</Button>
 	</div>
 	<div>
-		<button
-			type="button"
-			class="ml-1 bg-white rounded-md items-center flex hover:bg-gray-100 font-medium text-xs p-2"
-			on:click={() => {
-				editor.reloadWebsocket()
-			}}
+		<Button
+			btnClasses="ml-1"
+			size="xs"
+			spacingSize="md"
+			color="light"
+			on:click={editor.reloadWebsocket}
+			startIcon={{ icon: faRotate }}
 		>
-			<Icon data={faRotate} class="h-4 w-4 mr-2" />
-
 			Reload assistants
 			<span class="ml-1">
 				{#if lang == 'deno'}
 					(<span class={websocketAlive.deno ? 'text-green-600' : 'text-red-700'}>Deno</span>)
 				{:else if lang == 'python3'}
 					(<span class={websocketAlive.pyright ? 'text-green-600' : 'text-red-700'}>Pyright</span>
-					&nbsp;
 					<span class={websocketAlive.black ? 'text-green-600' : 'text-red-700'}>Black</span>)
 				{/if}
 			</span>
-		</button>
+		</Button>
 	</div>
 </div>

package/components/EditorBar.svelte.d.ts

@@ -2,13 +2,14 @@ import { SvelteComponentTyped } from "svelte";
 import type Editor from './Editor.svelte';
 declare const __propDef: {
     props: {
-        lang: 'python3' | 'deno';
+        lang: 'python3' | 'deno' | 'go';
         editor: Editor;
         websocketAlive: {
             pyright: boolean;
             black: boolean;
             deno: boolean;
         };
+        iconOnly?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/FlowBuilder.svelte

@@ -2,43 +2,43 @@
 import { page } from '$app/stores';
 import { FlowService, ScheduleService } from '../gen';
 import { workspaceStore } from '../stores';
-import { encodeState, formatCron, loadHubScripts, pathIsEmpty, sendUserToast, setQueryWithoutLoad } from '../utils';
-import { faPlay } from '@fortawesome/free-solid-svg-icons';
-import { Breadcrumb, BreadcrumbItem, Button } from 'flowbite-svelte';
-import { onDestroy, onMount } from 'svelte';
+import { encodeState, formatCron, loadHubScripts, sendUserToast, setQueryWithoutLoad } from '../utils';
+import { faGlobe } from '@fortawesome/free-solid-svg-icons';
+import { Breadcrumb, BreadcrumbItem } from 'flowbite-svelte';
+import { onMount, setContext } from 'svelte';
 import Icon from 'svelte-awesome';
+import { writable } from 'svelte/store';
+import CenteredPage from './CenteredPage.svelte';
+import Button from './common/button/Button.svelte';
 import { OFFSET } from './CronInput.svelte';
-import Drawer from './common/drawer/Drawer.svelte';
-import FlowEditor from './FlowEditor.svelte';
-import FlowPreviewContent from './FlowPreviewContent.svelte';
-import { flowStateStore, flowStateToFlow } from './flows/flowState';
+import FlowEditor from './flows/FlowEditor.svelte';
+import { flowStateStore } from './flows/flowState';
 import { flowStore } from './flows/flowStore';
+import FlowImportExportMenu from './flows/header/FlowImportExportMenu.svelte';
+import { loadFlowSchedule } from './flows/scheduleUtils';
 import { cleanInputs } from './flows/utils';
 import ScriptSchema from './ScriptSchema.svelte';
 export let initialPath = '';
 let pathError = '';
-let previewOpen = false;
-let scheduleArgs = {};
-let previewArgs = {};
-let scheduleEnabled = false;
-let scheduleCron = '';
 $: step = Number($page.url.searchParams.get('step')) || 1;
 async function createSchedule(path) {
+    const { cron, args, enabled } = $scheduleStore;
     await ScheduleService.createSchedule({
         workspace: $workspaceStore,
         requestBody: {
             path: path,
-            schedule: formatCron(scheduleCron),
+            schedule: formatCron(cron),
             offset: OFFSET,
             script_path: path,
             is_flow: true,
-            args: scheduleArgs,
-            enabled: scheduleEnabled
+            args,
+            enabled
         }
     });
 }
 async function saveFlow() {
-    const flow = cleanInputs(flowStateToFlow($flowStateStore, $flowStore));
+    const flow = cleanInputs($flowStore);
+    const { cron, args, enabled } = $scheduleStore;
     if (initialPath === '') {
         await FlowService.createFlow({
             workspace: $workspaceStore,
@@ -50,7 +50,7 @@ async function saveFlow() {
                 schema: flow.schema
             }
         });
-        if (scheduleEnabled) {
+        if (enabled) {
             await createSchedule(flow.path);
         }
     }
@@ -76,24 +76,24 @@ async function saveFlow() {
                 path: initialPath
             });
             if (schedule.path != flow.path ||
-                JSON.stringify(schedule.args) != JSON.stringify(scheduleArgs) ||
-                schedule.schedule != scheduleCron) {
+                JSON.stringify(schedule.args) != JSON.stringify(args) ||
+                schedule.schedule != cron) {
                 await ScheduleService.updateSchedule({
                     workspace: $workspaceStore ?? '',
                     path: initialPath,
                     requestBody: {
-                        schedule: formatCron(scheduleCron),
+                        schedule: formatCron(cron),
                         script_path: flow.path,
                         is_flow: true,
-                        args: scheduleArgs
+                        args
                     }
                 });
             }
-            if (scheduleEnabled != schedule.enabled) {
+            if (enabled != schedule.enabled) {
                 await ScheduleService.setScheduleEnabled({
                     workspace: $workspaceStore ?? '',
                     path: flow.path,
-                    requestBody: { enabled: scheduleEnabled }
+                    requestBody: { enabled }
                 });
             }
         }
@@ -107,122 +107,114 @@ async function saveFlow() {
 async function changeStep(step) {
     goto(`?step=${step}`);
 }
-flowStateStore.subscribe((flowState) => {
-    if (flowState) {
-        flowStore.update((flow) => {
-            if (flow) {
-                return flowStateToFlow(flowState, flow);
-            }
-            return flow;
-        });
-    }
-});
 flowStore.subscribe((flow) => {
     if (flow) {
         setQueryWithoutLoad($page.url, 'state', encodeState(flow));
     }
 });
+const selectedIdStore = writable('settings');
+const scheduleStore = writable({ args: {}, cron: '', enabled: false });
+const previewArgsStore = writable({});
+function select(selectedId) {
+    selectedIdStore.set(selectedId);
+}
+setContext('FlowEditorContext', {
+    selectedId: selectedIdStore,
+    schedule: scheduleStore,
+    select,
+    path: initialPath,
+    previewArgs: previewArgsStore
+});
+$: {
+    loadFlowSchedule(initialPath, $workspaceStore)
+        .then((schedule) => {
+        scheduleStore.set(schedule);
+    })
+        .catch(() => {
+        scheduleStore.set({
+            cron: '0 */5 * * *',
+            args: {},
+            enabled: false
+        });
+    });
+}
 onMount(() => {
     loadHubScripts();
 });
-onDestroy(() => {
-    //@ts-ignore
-    $flowStore = undefined;
-    //@ts-ignore
-    $flowStateStore = undefined;
-});
 </script>
 
-<div class="flex flex-row w-full h-full justify-between ">
-	<div class={`flex flex-col mb-96 m-auto w-full`}>
-		<!-- Nav between steps-->
-		<div class="justify-between flex flex-row w-full my-4">
-			<Breadcrumb>
-				<BreadcrumbItem>
-					<button on:click={() => changeStep(1)} class={step === 1 ? 'font-bold' : null}>
-						Flow Editor
-					</button>
-				</BreadcrumbItem>
-				<BreadcrumbItem>
-					<button on:click={() => changeStep(2)} class={step === 2 ? 'font-bold' : null}>
-						UI customisation
-					</button>
-				</BreadcrumbItem>
-			</Breadcrumb>
-			<div class="flex flex-row-reverse ml-2">
-				{#if step == 1}
-					<button
-						disabled={pathError != ''}
-						class="default-button px-6 max-h-8"
-						on:click={() => changeStep(2)}
-					>
-						Next
-					</button>
-					<button
-						disabled={pathError != ''}
-						class="default-button-secondary px-6 max-h-8 mr-2"
-						on:click={saveFlow}
-					>
-						Save
-					</button>
-				{:else}
-					<button class="default-button px-6 self-end" on:click={saveFlow}>Save</button>
-					<button
-						class="default-button-secondary px-6 max-h-8 mr-2"
-						on:click={async () => {
-							changeStep(1)
-						}}>Back</button
-					>
-				{/if}
-			</div>
-		</div>
-		<div class="flex flex-row-reverse">
-			<span class="my-1 text-sm text-gray-500 italic">
-				{#if initialPath && initialPath != $flowStore?.path} {initialPath} &rightarrow; {/if}
-				{$flowStore?.path}
-			</span>
-		</div>
-
-		<!-- metadata -->
+<div class="flex flex-col flex-1 h-full">
+	<!-- Nav between steps-->
+	<div class="justify-between flex flex-row w-full my-2 px-4">
+		<Breadcrumb>
+			<BreadcrumbItem>
+				<button on:click={() => changeStep(1)} class={step === 1 ? 'font-bold' : null}>
+					Flow Editor
+				</button>
+			</BreadcrumbItem>
+			<BreadcrumbItem>
+				<button on:click={() => changeStep(2)} class={step === 2 ? 'font-bold' : null}>
+					UI customisation
+				</button>
+			</BreadcrumbItem>
+		</Breadcrumb>
+		<div class="flex flex-row-reverse ml-2 space-x-reverse space-x-2">
+			{#if step == 1}
+				<Button disabled={pathError != ''} color="blue" size="sm" on:click={() => changeStep(2)}>
+					Next
+				</Button>
+				<Button disabled={pathError != ''} color="blue" size="sm" on:click={saveFlow}>Save</Button>
+				<FlowImportExportMenu />
 
-		{#if $flowStateStore}
-			{#if step === 1}
-				<FlowEditor
-					bind:pathError
-					bind:initialPath
-					bind:scheduleEnabled
-					bind:scheduleCron
-					bind:scheduleArgs
-					bind:previewArgs
-				/>
 				<Button
-					disabled={pathIsEmpty($flowStore.path)}
-					size="lg"
-					pill
-					on:click={() => (previewOpen = !previewOpen)}
-					class={`blue-button fixed bottom-10 right-10 ${previewOpen ? 'hidden' : ''}`}
+					color="light"
+					size="sm"
+					variant="border"
+					on:click={() => {
+						const url = new URL('https://hub.windmill.dev/flows/add')
+						const openFlow = {
+							value: $flowStore.value,
+							summary: $flowStore.summary,
+							description: $flowStore.description,
+							schema: $flowStore.schema
+						}
+						url.searchParams.append('flow', btoa(JSON.stringify(openFlow)))
+						window.open(url, '_blank')?.focus()
+					}}
 				>
-					Preview flow
-					{pathIsEmpty($flowStore.path) ? '(pick a name first!)' : ''}
-
-					<Icon data={faPlay} class="ml-2" />
+					<Icon data={faGlobe} scale={0.8} class="inline mr-2" />
+					Publish to Hub
 				</Button>
-			{:else if step === 2}
+			{:else}
+				<button class="default-button px-6 self-end" on:click={saveFlow}>Save</button>
+				<button
+					class="default-button-secondary px-6 max-h-8"
+					on:click={async () => {
+						changeStep(1)
+					}}
+				>
+					Back
+				</button>
+			{/if}
+		</div>
+	</div>
+
+	<!-- metadata -->
+
+	{#if $flowStateStore}
+		{#if step === 1}
+			<FlowEditor />
+		{:else if step === 2}
+			<CenteredPage>
 				<ScriptSchema
 					synchronizedHeader={false}
 					bind:summary={$flowStore.summary}
 					bind:description={$flowStore.description}
 					bind:schema={$flowStore.schema}
 				/>
-			{/if}
-		{:else}
-			<p>Loading</p>
+			</CenteredPage>
 		{/if}
-	</div>
+	{:else}
+		<CenteredPage>Loading...</CenteredPage>
+	{/if}
 </div>
-
-{#if $flowStateStore && $flowStore}
-	<Drawer bind:open={previewOpen} size="800px">
-		<FlowPreviewContent bind:args={previewArgs} on:close={() => (previewOpen = !previewOpen)} />
-	</Drawer>
-{/if}

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>