windmill-components 1.22.42 → 1.28.3

package/components/CronInput.svelte

@@ -0,0 +1,84 @@
+<script context="module">
+	export const OFFSET = new Date().getTimezoneOffset()
+</script>
+
+<script>import { ScheduleService } from '../gen';
+import { displayDate, formatCron, sendUserToast } from '../utils';
+import CollapseLink from './CollapseLink.svelte';
+export let validCRON = true;
+let preview = [];
+let cronError = '';
+export let schedule = '0 0 12 * *';
+let limit = 3;
+$: handleScheduleInput(schedule);
+async function handleScheduleInput(input) {
+    try {
+        preview = await ScheduleService.previewSchedule({
+            requestBody: { schedule: formatCron(input), offset: OFFSET }
+        });
+        cronError = '';
+        validCRON = true;
+    }
+    catch (err) {
+        if (err.status == 400 && err.body.includes('cron')) {
+            cronError = `Invalid cron expression`;
+            validCRON = false;
+        }
+        else {
+            sendUserToast(`Cannot preview: ${err}`, true);
+            validCRON = false;
+        }
+    }
+}
+</script>
+
+<div class="text-purple-500 text-2xs grow">{cronError}</div>
+<div class="flex flex-row items-end max-w-5xl">
+	<label class="text-xs min-w-max mr-2 self-center" for="cron-schedule">CRON expression</label>
+	<input
+		class="inline-block"
+		type="text"
+		id="cron-schedule"
+		name="cron-schedule"
+		bind:value={schedule}
+	/>
+</div>
+<div class="flex flex-row text-xs text-blue-500 gap-3 pl-28">
+	<button
+		on:click={() => {
+			schedule = '0 */15 * * *'
+			cronError = ''
+		}}>every 15 min</button
+	>
+	<button
+		on:click={() => {
+			schedule = '0 0 * * * *'
+			cronError = ''
+		}}>every hour</button
+	>
+	<button
+		on:click={() => {
+			schedule = '0 0 8 * * *'
+			cronError = ''
+		}}>once a day at 8AM</button
+	>
+</div>
+
+<CollapseLink text="preview next runs" open={true}>
+	{#if preview && preview.length > 0}
+		<div class="text-sm text-gray-700 border p-2 rounded-md">
+			<div class="flex flex-row justify-between">The next runs will be scheduled at:</div>
+			<ul class="list-disc mx-12">
+				{#each preview.slice(0, limit) as p}
+					<li class="mx-2 text-gray-700 text-sm">{displayDate(p)}</li>
+				{/each}
+				<li class="text-sm mx-2">...</li>
+				{#if limit != 10}
+					<button class="underline text-gray-400" on:click={() => (limit = 10)}>Load more</button>
+				{:else}
+					<button class="underline text-gray-400" on:click={() => (limit = 3)}>Load less</button>
+				{/if}
+			</ul>
+		</div>
+	{/if}
+</CollapseLink>

package/components/CronInput.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+export declare const OFFSET: number;
+declare const __propDef: {
+    props: {
+        validCRON?: boolean | undefined;
+        schedule?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type CronInputProps = typeof __propDef.props;
+export declare type CronInputEvents = typeof __propDef.events;
+export declare type CronInputSlots = typeof __propDef.slots;
+export default class CronInput extends SvelteComponentTyped<CronInputProps, CronInputEvents, CronInputSlots> {
+}
+export {};

package/components/DisplayResult.svelte

@@ -1,18 +1,15 @@
 <script>import { Highlight } from 'svelte-highlight';
-import github from 'svelte-highlight/styles/github';
 import { json } from 'svelte-highlight/languages';
 import TableCustom from './TableCustom.svelte';
+import { truncate } from '../utils';
 export let result;
 let resultKind = inferResultKind(result);
-function isArray(obj) {
-    return Object.prototype.toString.call(obj) === '[object Array]';
-}
 function isRectangularArray(obj) {
-    if (!isArray(obj) || obj.length == 0) {
+    if (!Array.isArray(obj) || obj.length == 0) {
         return false;
     }
     if (!Object.values(obj)
-        .map(isArray)
+        .map(Array.isArray)
         .reduce((a, b) => a && b)) {
         return false;
     }
@@ -28,15 +25,18 @@ function inferResultKind(result) {
     if (result) {
         try {
             let keys = Object.keys(result);
-            if (keys.length == 1 && isRectangularArray(result[keys[0]])) {
+            if (isRectangularArray(result)) {
                 return 'table-row';
             }
-            else if (keys.map((k) => isArray(result[k])).reduce((a, b) => a && b)) {
+            else if (keys.map((k) => Array.isArray(result[k])).reduce((a, b) => a && b)) {
                 return 'table-col';
             }
             else if (keys.length == 1 && keys[0] == 'png') {
                 return 'png';
             }
+            else if (keys.length == 1 && keys[0] == 'jpeg') {
+                return 'jpeg';
+            }
             else if (keys.length == 1 && keys[0] == 'file') {
                 return 'file';
             }
@@ -47,24 +47,21 @@ function inferResultKind(result) {
 }
 </script>
 
-<svelte:head>
-	{@html github}
-</svelte:head>
 {#if result}
-	{#if Object.keys(result).length > 0}<div>
+	{#if typeof result == 'object' && Object.keys(result).length > 0}<div>
 			The result keys are: <b>{Object.keys(result).join(', ')}</b>
 		</div>
 	{/if}
 	{#if resultKind == 'table-col'}
 		<div class="grid grid-flow-col-dense border border-gray-200 rounded-md ">
 			{#each Object.keys(result) as col}
-				<div class="flex flex-col  min-w-full">
+				<div class="flex flex-col max-h-40 min-w-full overflow-auto">
 					<div class="px-12 text-left uppercase border-b bg-gray-50 overflow-hidden rounded-t-md ">
 						{col}
 					</div>
 					{#if Array.isArray(result[col])}
 						{#each result[col] as item}
-							<div class="px-12 text-left">
+							<div class="px-12 text-left  whitespace-nowrap">
 								{typeof item === 'string' ? item : JSON.stringify(item)}
 							</div>
 						{/each}
@@ -80,7 +77,7 @@ function inferResultKind(result) {
 					{#each asListOfList(Object.values(result)[0]) as row}
 						<tr>
 							{#each row as v}
-								<td>{v ?? ''}</td>
+								<td>{truncate(v, 200) ?? ''}</td>
 							{/each}
 						</tr>
 					{/each}
@@ -95,6 +92,22 @@ function inferResultKind(result) {
 				src="data:image/png;base64,{result.png}"
 			/>
 		</div>
+	{:else if resultKind == 'jpeg'}
+		<div class="h-full">
+			Result is an image: <img
+				alt="jpeg rendered"
+				class="w-auto h-full"
+				src="data:image/jpeg;base64,{result.jpeg}"
+			/>
+		</div>
+	{:else if resultKind == 'gif'}
+		<div class="h-full">
+			Result is an image: <img
+				alt="gif rendered"
+				class="w-auto h-full"
+				src="data:image/gif;base64,{result.gif}"
+			/>
+		</div>
 	{:else if resultKind == 'file'}
 		<div>
 			Result is a file: <a

package/components/Editor.svelte

@@ -1,11 +1,48 @@
+<script context="module">import * as monaco from 'monaco-editor';
+import { language as sql } from 'monaco-editor/esm/vs/basic-languages/sql/sql';
+monaco.languages.register({
+    id: 'python',
+    extensions: ['.py'],
+    aliases: ['python'],
+    mimetypes: ['application/text']
+});
+monaco.languages.register({
+    id: 'sql',
+    extensions: ['.sql'],
+    aliases: ['SQL'],
+    mimetypes: ['application/text']
+});
+monaco.languages.registerInlineCompletionsProvider('sql', {
+    provideInlineCompletions: (a, b, c, d) => {
+        const w = a.getWordUntilPosition(b).word.toLowerCase();
+        return {
+            items: w.length > 0
+                ? ['SELECT', 'FROM', 'WHILE', 'AND', 'OR', 'DELETE', 'UPDATE', 'SET', 'WHEN', 'LIMIT']
+                    .concat(sql.keywords)
+                    .filter((x) => x.toLowerCase().startsWith(w))
+                    .map((x) => ({
+                    text: x + ' '
+                }))
+                : []
+        };
+    },
+    freeInlineCompletions: () => { }
+});
+</script>
+
 <script>import { browser, dev } from '$app/env';
 import { page } from '$app/stores';
-import { buildExtraLib, sendUserToast } from '../utils';
+import { sendUserToast } from '../utils';
 import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
 import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
 import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 import { buildWorkerDefinition } from 'monaco-editor-workers';
+import { StandaloneServices } from 'vscode/services';
+import getMessageServiceOverride from 'vscode/service-override/messages';
+StandaloneServices.initialize({
+    ...getMessageServiceOverride(document.body)
+});
 let divEl = null;
 let editor;
 export let deno = false;
@@ -16,13 +53,15 @@ export let cmdEnterAction = undefined;
 export let formatAction = undefined;
 export let automaticLayout = true;
 export let websocketAlive = { pyright: false, black: false, deno: false };
-export let extraLib = lang == 'typescript' && !deno ? buildExtraLib() : '';
-export let extraLibPath = 'file:///node_modules/@types/windmill/index.d.ts';
+export let extraLib = '';
+export let extraLibPath = '';
 let websockets = [];
 let websocketInterval;
-let uri = '';
+let lastWsAttempt = new Date();
+let nbWsAttempt = 0;
 let disposeMethod;
 const dispatch = createEventDispatcher();
+const uri = `file:///${hash}.${langToExt(lang)}`;
 if (browser) {
     if (dev) {
         buildWorkerDefinition('../../../node_modules/monaco-editor-workers/dist/workers', import.meta.url, false);
@@ -52,6 +91,22 @@ export function insertAtCursor(code) {
         editor.trigger('keyboard', 'type', { text: code });
     }
 }
+function langToExt(lang) {
+    switch (lang) {
+        case 'typescript':
+            return 'ts';
+        case 'python':
+            return 'py';
+        case 'javascript':
+            return 'js';
+        case 'json':
+            return 'json';
+        case 'sql':
+            return 'sql';
+        default:
+            return 'unknown';
+    }
+}
 export function insertAtBeginning(code) {
     if (editor) {
         const range = { startLineNumber: 1, startColumn: 1, endLineNumber: 1, endColumn: 1 };
@@ -76,14 +131,15 @@ function format() {
     }
 }
 export async function reloadWebsocket() {
-    closeWebsockets();
+    await closeWebsockets();
     if (lang == 'python' || deno) {
-        // install Monaco language client services
         const { MonacoLanguageClient } = await import('monaco-languageclient');
         const { CloseAction, ErrorAction } = await import('vscode-languageclient');
-        const vscode = await import('vscode');
         const { toSocket, WebSocketMessageReader, WebSocketMessageWriter } = await import('vscode-ws-jsonrpc');
+        const vscode = await import('vscode');
         const { RequestType } = await import('vscode-jsonrpc');
+        const { MonacoServices } = await import('monaco-languageclient');
+        MonacoServices.install();
         function createLanguageClient(transports, name, initializationOptions) {
             const client = new MonacoLanguageClient({
                 name: name,
@@ -92,7 +148,7 @@ export async function reloadWebsocket() {
                     errorHandler: {
                         error: () => ({ action: ErrorAction.Continue }),
                         closed: () => ({
-                            action: CloseAction.DoNotRestart
+                            action: CloseAction.Restart
                         })
                     },
                     markdown: {
@@ -124,23 +180,14 @@ export async function reloadWebsocket() {
             try {
                 const webSocket = new WebSocket(url);
                 webSocket.onopen = () => {
-                    websockets.push(webSocket);
                     const socket = toSocket(webSocket);
                     const reader = new WebSocketMessageReader(socket);
                     const writer = new WebSocketMessageWriter(socket);
                     const languageClient = createLanguageClient({ reader, writer }, name, options);
+                    websockets.push([languageClient, webSocket]);
                     languageClient.start();
-                    reader.onClose(() => {
-                        try {
-                            languageClient.stop();
-                        }
-                        catch (err) {
-                            console.error(err);
-                        }
-                    });
-                    socket.onClose((_code, _reason) => {
-                        websocketAlive[name] = false;
-                    });
+                    lastWsAttempt = new Date();
+                    nbWsAttempt = 0;
                     if (name == 'deno') {
                         vscode.commands.getCommands().then((v) => {
                             if (!v.includes('deno.cache')) {
@@ -153,6 +200,18 @@ export async function reloadWebsocket() {
                             }
                         });
                     }
+                    reader.onClose(() => {
+                        try {
+                            console.log('CLOSE');
+                            languageClient.stop();
+                        }
+                        catch (err) {
+                            console.error(err);
+                        }
+                    });
+                    socket.onClose((_code, _reason) => {
+                        websocketAlive[name] = false;
+                    });
                     websocketAlive[name] = true;
                 };
             }
@@ -171,7 +230,7 @@ export async function reloadWebsocket() {
                 path: null,
                 tlsCertificate: null,
                 unsafelyIgnoreCertificateErrors: null,
-                unstable: false,
+                unstable: true,
                 enable: true,
                 cache: null,
                 codeLens: {
@@ -218,18 +277,30 @@ export async function reloadWebsocket() {
         websocketInterval && clearInterval(websocketInterval);
         websocketInterval = setInterval(() => {
             if (document.visibilityState == 'visible') {
-                if (!websocketAlive.black && !websocketAlive.deno && !websocketAlive.pyright) {
-                    sendUserToast('Smart assistant got disconnected. Reconnecting to windmill language server for smart assistance');
-                    reloadWebsocket();
+                if (!lastWsAttempt ||
+                    (lastWsAttempt.getTime() - new Date().getTime() > 60000 && nbWsAttempt < 2)) {
+                    if (!websocketAlive.black && !websocketAlive.deno && !websocketAlive.pyright) {
+                        console.log('reconnecting to language servers');
+                        lastWsAttempt = new Date();
+                        nbWsAttempt++;
+                        reloadWebsocket();
+                    }
+                    else {
+                        if (nbWsAttempt >= 2) {
+                            sendUserToast('Giving up on establishing smart assistant connection', true);
+                            clearInterval(websocketInterval);
+                        }
+                    }
                 }
             }
         }, 5000);
     }
 }
-function closeWebsockets() {
+async function closeWebsockets() {
     for (const x of websockets) {
         try {
-            x.close();
+            await x[0].stop();
+            x[1].close();
         }
         catch (err) {
             console.log('error disposing websocket', err);
@@ -239,37 +310,15 @@ function closeWebsockets() {
     websocketInterval && clearInterval(websocketInterval);
 }
 async function loadMonaco() {
-    const monaco = await import('monaco-editor');
-    if (lang == 'python') {
-        monaco.languages.register({
-            id: 'python',
-            extensions: ['.py'],
-            aliases: ['python'],
-            mimetypes: ['application/text']
-        });
-    }
-    let path = 'unknown';
-    if (lang == 'python') {
-        path = `${hash}.py`;
-    }
-    else if (lang == 'json') {
-        path = `${hash}.json`;
-    }
-    else if (lang == 'javascript') {
-        path = `${hash}.js`;
-    }
-    else if (lang == 'typescript') {
-        path = `${hash}.ts`;
-    }
-    uri = `file:///${path}`;
     const model = monaco.editor.createModel(code, lang, monaco.Uri.parse(uri));
-    model.updateOptions({ tabSize: 4, insertSpaces: true });
+    model.updateOptions({ tabSize: 2, insertSpaces: true });
     editor = monaco.editor.create(divEl, {
         model: model,
         value: code,
         language: lang,
         automaticLayout,
         readOnly: false,
+        fixedOverflowWidgets: true,
         autoDetectHighContrast: true,
         //lineNumbers: 'off',
         //lineDecorationsWidth: 0,
@@ -299,7 +348,16 @@ async function loadMonaco() {
         code = getCode();
         dispatch('change');
     });
-    if (lang == 'json') {
+    editor.onDidFocusEditorText(() => {
+        dispatch('focus');
+    });
+    editor.onDidBlurEditorText(() => {
+        dispatch('blur');
+    });
+    if (lang == 'sql') {
+        monaco.languages.register;
+    }
+    else if (lang == 'json') {
         monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
             validate: true,
             allowComments: false,
@@ -307,28 +365,36 @@ async function loadMonaco() {
             enableSchemaRequest: true
         });
     }
-    if (lang == 'typescript') {
-        monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+    else if (lang == 'javascript' || lang == 'typescript') {
+        monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
             target: monaco.languages.typescript.ScriptTarget.Latest,
             allowNonTsExtensions: true,
             noLib: true
         });
-        if (deno) {
-            monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
-                noSemanticValidation: true,
-                noSuggestionDiagnostics: true,
-                noSyntaxValidation: true
+        if (lang == 'typescript') {
+            monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+                target: monaco.languages.typescript.ScriptTarget.Latest,
+                allowNonTsExtensions: true,
+                noLib: true
             });
+            if (deno) {
+                monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+                    noSemanticValidation: true,
+                    noSuggestionDiagnostics: true,
+                    noSyntaxValidation: true
+                });
+            }
         }
-        else {
-            monaco.languages.typescript.typescriptDefaults.addExtraLib(extraLib, extraLibPath);
+        if (lang == 'javascript') {
+            if (extraLib != '' && extraLibPath != '') {
+                monaco.languages.typescript.javascriptDefaults.addExtraLib(extraLib, extraLibPath);
+            }
         }
     }
     if (lang == 'python' || deno) {
-        const { MonacoServices } = await import('monaco-languageclient');
-        MonacoServices.install();
+        // install Monaco language client services
+        reloadWebsocket();
     }
-    reloadWebsocket();
     return () => {
         if (editor) {
             try {
@@ -347,9 +413,8 @@ onMount(() => {
     }
 });
 onDestroy(() => {
-    if (disposeMethod) {
-        disposeMethod();
-    }
+    disposeMethod && disposeMethod();
+    websocketInterval && clearInterval(websocketInterval);
 });
 </script>
 
@@ -375,4 +440,9 @@ onDestroy(() => {
 	.few-lines-editor {
 		/* stylelint-disable-next-line unit-allowed-list */
 		height: 80px;
+	}
+
+	.two-lines-editor {
+		/* stylelint-disable-next-line unit-allowed-list */
+		height: 40px;
 	}</style>

package/components/Editor.svelte.d.ts

@@ -24,6 +24,8 @@ declare const __propDef: {
     };
     events: {
         change: CustomEvent<any>;
+        focus: CustomEvent<any>;
+        blur: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/EditorBar.svelte

@@ -1,15 +1,15 @@
 <script>import { ResourceService, ScriptService, VariableService } from '../gen';
 import { getScriptByPath, loadHubScripts, sendUserToast } from '../utils';
-import Icon from 'svelte-awesome';
 import { faSearch } from '@fortawesome/free-solid-svg-icons';
-import { workspaceStore, hubScripts } from '../stores';
-import ItemPicker from './ItemPicker.svelte';
-import VariableEditor from './VariableEditor.svelte';
-import ResourceEditor from './ResourceEditor.svelte';
+import Icon from 'svelte-awesome';
+import { hubScripts, workspaceStore } from '../stores';
+import { Button } from 'flowbite-svelte';
 import { Highlight } from 'svelte-highlight';
 import { python, typescript } from 'svelte-highlight/languages';
-import github from 'svelte-highlight/styles/github';
+import ItemPicker from './ItemPicker.svelte';
 import Modal from './Modal.svelte';
+import ResourceEditor from './ResourceEditor.svelte';
+import VariableEditor from './VariableEditor.svelte';
 export let lang;
 export let editor;
 export let websocketAlive;
@@ -42,10 +42,6 @@ async function loadScripts() {
 }
 </script>
 
-<svelte:head>
-	{@html github}
-</svelte:head>
-
 <ItemPicker
 	bind:this={scriptPicker}
 	pickCallback={async (path, _) => {
@@ -164,41 +160,56 @@ async function loadScripts() {
 
 <VariableEditor bind:this={variableEditor} on:create={variablePicker.openModal} />
 
-<div class="flex flex-row justify-around w-full">
-	<button
-		class="default-button-secondary font-semibold py-px mr-2 text-xs align-middle max-h-8"
-		on:click|stopPropagation={() => {
-			variablePicker.openModal()
-		}}
-		>Variable picker <Icon data={faSearch} scale={0.7} />
-	</button>
+<div class="flex flex-row w-full">
+	<div class="flex flex-row w-full space-x-2 whitespace-nowrap">
+		<Button
+			size="xs"
+			color="alternative"
+			on:click={() => {
+				variablePicker.openModal()
+			}}
+		>
+			<Icon data={faSearch} scale={0.7} class="mr-2" />
+			Variable picker
+		</Button>
 
-	<button
-		class="default-button-secondary font-semibold py-px text-xs mr-2 align-middle max-h-8"
-		on:click|stopPropagation={() => {
-			resourcePicker.openModal()
-		}}
-		>Resource picker <Icon data={faSearch} scale={0.7} />
-	</button>
-	<button
-		class="default-button-secondary font-semibold py-px text-xs mr-2 align-middle max-h-8"
-		on:click|stopPropagation={() => {
-			scriptPicker.openModal()
-		}}
-		>Script explorer <Icon data={faSearch} scale={0.7} />
-	</button>
+		<Button
+			size="xs"
+			color="alternative"
+			on:click={() => {
+				resourcePicker.openModal()
+			}}
+		>
+			<Icon data={faSearch} scale={0.7} class="mr-2" />
+			Resource picker
+		</Button>
 
-	<button
-		class="default-button-secondary py-px max-h-8 text-xs"
-		on:click|stopPropagation={() => {
-			editor.reloadWebsocket()
-		}}
-	>
-		Reload assistants (status: {#if lang == 'deno'}<span
-				class={websocketAlive.deno ? 'text-green-600' : 'text-red-600'}>deno</span
-			>{:else if lang == 'python3'}<span
-				class={websocketAlive.pyright ? 'text-green-600' : 'text-red-600'}>pyright</span
-			>
-			<span class={websocketAlive.black ? 'text-green-600' : 'text-red-600'}> black</span>{/if})
-	</button>
+		<Button
+			size="xs"
+			color="alternative"
+			on:click={() => {
+				scriptPicker.openModal()
+			}}
+		>
+			<Icon data={faSearch} scale={0.7} class="mr-2" />
+			Script explorer
+		</Button>
+	</div>
+	<div class="flex flex-row-reverse w-full">
+		<Button
+			size="xs"
+			color="alternative"
+			on:click={() => {
+				editor.reloadWebsocket()
+			}}
+		>
+			Reload assistants (status:&nbsp;
+			{#if lang == 'deno'}
+				<span class={websocketAlive.deno ? 'text-green-600' : 'text-red-600'}>Deno</span>
+			{:else if lang == 'python3'}
+				<span class={websocketAlive.pyright ? 'text-green-600' : 'text-red-600'}>Pyright</span>
+				<span class={websocketAlive.black ? 'text-green-600' : 'text-red-600'}>Black</span>
+			{/if})
+		</Button>
+	</div>
 </div>