windmill-components 1.383.9 → 1.389.1

package/package/components/ScriptBuilder.svelte

@@ -244,6 +244,7 @@ async function editScript(stay, deploymentMsg) {
         }
     }
     catch (error) {
+        dispatch('deployError', error);
         sendUserToast(`Error while saving the script: ${error.body || error.message}`, true);
     }
     loadingSave = false;
@@ -335,14 +336,18 @@ async function saveDraft(forceSave = false) {
                 : savedScript),
             draft: structuredClone(script)
         };
+        let savedAtNewPath = false;
         if (initialPath == '' || (savedScript?.draft_only && script.path !== initialPath)) {
+            savedAtNewPath = true;
             initialPath = script.path;
             dispatch('saveInitial', script.path);
         }
+        dispatch('saveDraft', { path: script.path, savedAtNewPath, script });
         sendUserToast('Saved as draft');
     }
     catch (error) {
         sendUserToast(`Error while saving the script as a draft: ${error.body || error.message}`, true);
+        dispatch('saveDraftError', error);
     }
     loadingDraft = false;
 }
@@ -949,7 +954,10 @@ function langToLanguage(lang) {
 							<LanguageIcon lang={script.language} height={20} />
 						</button>
 					</div>
-					<Summary bind:value={script.summary} />
+					<Summary
+						disabled={customUi?.topBar?.editableSummary == false}
+						bind:value={script.summary}
+					/>
 				</div>
 
 				<div class="gap-4 flex">
@@ -1098,6 +1106,9 @@ function langToLanguage(lang) {
 			on:format={() => {
 				saveDraft()
 			}}
+			on:saveDraft={() => {
+				saveDraft()
+			}}
 			bind:editor
 			bind:this={scriptEditor}
 			bind:schema={script.schema}

package/package/components/ScriptBuilder.svelte.d.ts

@@ -23,7 +23,10 @@ declare const __propDef: {
     events: {
         focus: FocusEvent;
         deploy: CustomEvent<any>;
+        deployError: CustomEvent<any>;
         saveInitial: CustomEvent<any>;
+        saveDraft: CustomEvent<any>;
+        saveDraftError: CustomEvent<any>;
         seeDetails: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/package/components/ScriptEditor.svelte

@@ -257,6 +257,7 @@ function collabUrl() {
 						on:change={(e) => {
 							inferSchema(e.detail)
 						}}
+						on:saveDraft
 						cmdEnterAction={async () => {
 							await inferSchema(code)
 							runTest()

package/package/components/ScriptEditor.svelte.d.ts

@@ -30,6 +30,7 @@ declare const __propDef: {
     };
     events: {
         createScriptFromInlineScript: CustomEvent<any>;
+        saveDraft: CustomEvent<any>;
         format: CustomEvent<any>;
         change: CustomEvent<any>;
     } & {
@@ -41,7 +42,7 @@ export type ScriptEditorProps = typeof __propDef.props;
 export type ScriptEditorEvents = typeof __propDef.events;
 export type ScriptEditorSlots = typeof __propDef.slots;
 export default class ScriptEditor extends SvelteComponent<ScriptEditorProps, ScriptEditorEvents, ScriptEditorSlots> {
-    get inferSchema(): (code: string, nlang?: "python3" | "deno" | "go" | "bash" | "powershell" | "postgresql" | "mysql" | "bigquery" | "snowflake" | "mssql" | "graphql" | "nativets" | "bun" | "php" | undefined) => Promise<void>;
+    get inferSchema(): (code: string, nlang?: "python3" | "deno" | "go" | "bash" | "powershell" | "postgresql" | "mysql" | "bigquery" | "snowflake" | "mssql" | "graphql" | "nativets" | "bun" | "php" | "rust" | undefined) => Promise<void>;
     get setCollaborationMode(): () => Promise<void>;
     get disableCollaboration(): () => void;
 }

package/package/components/ServiceLogsInner.svelte

@@ -0,0 +1,511 @@
+<script>import { ServiceLogsService } from '../gen';
+import { Pane, Splitpanes } from 'svelte-splitpanes';
+import ManuelDatePicker from './runs/ManuelDatePicker.svelte';
+import CalendarPicker from './common/calendarPicker/CalendarPicker.svelte';
+import LogViewer from './LogViewer.svelte';
+import Toggle from './Toggle.svelte';
+import { sendUserToast } from '../toast';
+import { onDestroy } from 'svelte';
+import { Loader2 } from 'lucide-svelte';
+import { truncateRev } from '../utils';
+let minTs = undefined;
+let maxTs = undefined;
+let minTsManual = undefined;
+let maxTsManual = undefined;
+let max_lines = undefined;
+// let lastSeen: undefined | string = undefined
+let withError = false;
+let autoRefresh = true;
+let loading = false;
+let timeout = undefined;
+let allLogs = undefined;
+let manualPicker = undefined;
+let upTo = undefined;
+let upToIsLatest = true;
+$: minTsManual || maxTsManual || onManualChanges();
+function onManualChanges() {
+    getAllLogs(minTsManual ?? maxTs, maxTsManual);
+}
+function getAllLogs(queryMinTs, queryMaxTs) {
+    timeout && clearTimeout(timeout);
+    loading = true;
+    allLogs = allLogs ?? {};
+    ServiceLogsService.listLogFiles({ withError, before: queryMaxTs, after: queryMinTs })
+        .then((res) => {
+        loading = false;
+        let minTsN = undefined;
+        let maxTsN = undefined;
+        if (minTsManual) {
+            minTsN = new Date(minTsManual).getTime();
+            Object.values(allLogs ?? {}).forEach((mode) => {
+                Object.values(mode).forEach((wg) => {
+                    Object.keys(wg).forEach((key) => {
+                        wg[key] = wg[key].filter((x) => !minTsManual || x.ts >= new Date(minTsManual).getTime());
+                    });
+                });
+            });
+        }
+        res.reverse().forEach((log) => {
+            let ts = new Date(log.log_ts + 'Z').getTime();
+            if (minTsN == undefined || ts < minTsN) {
+                minTsN = ts;
+            }
+            if (maxTsN == undefined || ts > maxTsN) {
+                maxTsN = ts;
+            }
+            if (allLogs == undefined) {
+                allLogs = {};
+            }
+            if (!allLogs[log.mode]) {
+                allLogs[log.mode] = {};
+            }
+            const wg = log.worker_group ?? '';
+            if (!allLogs[log.mode][wg]) {
+                allLogs[log.mode][wg] = {};
+            }
+            const hn = log.hostname ?? '';
+            if (!allLogs[log.mode][wg][hn]) {
+                allLogs[log.mode][wg][hn] = [];
+            }
+            allLogs[log.mode][wg][hn].push({
+                ts: ts,
+                file_path: log.file_path,
+                ok_lines: log.ok_lines ?? 1,
+                err_lines: log.err_lines ?? 0,
+                json_fmt: log.json_fmt
+            });
+            if (log.ok_lines != undefined &&
+                log.err_lines != undefined &&
+                (max_lines == undefined || log.ok_lines + log.err_lines > max_lines)) {
+                max_lines = log.ok_lines + log.err_lines;
+            }
+        });
+        Object.values(allLogs ?? {}).forEach((mode) => {
+            Object.values(mode).forEach((wg) => {
+                Object.keys(wg).forEach((key) => {
+                    wg[key] = wg[key].filter((x) => !minTsManual || x.ts >= new Date(minTsManual).getTime());
+                });
+            });
+        });
+        loading = false;
+        if (minTs == undefined) {
+            minTs = minTsN ? new Date(minTsN).toISOString() : undefined;
+        }
+        if (maxTsN) {
+            maxTs = new Date(maxTsN).toISOString();
+        }
+        if (upToIsLatest && selected) {
+            upTo = getLatestUpTo(selected);
+        }
+        if (autoRefresh && !maxTsManual) {
+            timeout = setTimeout(() => {
+                let minMax = manualPicker?.computeMinMax();
+                if (minMax) {
+                    maxTsManual = minMax?.maxTs;
+                    minTsManual = minMax?.minTs;
+                }
+                let maxTsPlus1 = maxTs ? new Date(new Date(maxTs).getTime() + 1000) : undefined;
+                getAllLogs(maxTsPlus1?.toISOString(), undefined);
+            }, 5000);
+        }
+    })
+        .catch((e) => {
+        sendUserToast('Failed to load service logs: ' + e.body, true);
+        console.error(e);
+        loading = false;
+        autoRefresh = false;
+    });
+}
+let selected = undefined;
+let logsContent = {};
+export async function getLogFile(hostname, path) {
+    if (logsContent[path]) {
+        return;
+    }
+    try {
+        const res = await ServiceLogsService.getLogFile({ path: `${hostname}/${path}` });
+        logsContent[path] = { content: res };
+    }
+    catch (e) {
+        logsContent[path] = { error: `${e.message}: ${e.body}` };
+    }
+}
+getAllLogs(undefined, undefined);
+function getLogs(selected, upTo) {
+    if (!selected) {
+        return [];
+    }
+    let logs = allLogs?.[selected[0]]?.[selected[1]]?.[selected[2]];
+    if (!logs) {
+        return [];
+    }
+    if (upTo) {
+        let upToN = new Date(upTo).getTime();
+        let nlogs = logs.filter((x) => x.ts <= upToN);
+        logs = nlogs.slice(nlogs.length - 5, undefined);
+        getFiles(selected[2], logs.map((x) => x.file_path));
+    }
+    return logs;
+}
+async function getFiles(hostname, logs) {
+    await Promise.all(logs.map((x) => getLogFile(hostname, x)));
+    scrollToBottom();
+}
+function getLatestUpTo(selected) {
+    if (!selected) {
+        return undefined;
+    }
+    let logs = allLogs?.[selected[0]]?.[selected[1]]?.[selected[2]];
+    if (!logs) {
+        return undefined;
+    }
+    return logs[logs.length - 1]?.ts;
+}
+function scrollToBottom() {
+    const el = document.querySelector('#logviewer');
+    if (el) {
+        el.scrollTop = el.scrollHeight;
+    }
+}
+onDestroy(() => {
+    timeout && clearTimeout(timeout);
+});
+function processLogWithJsonFmt(log, jsonFmt) {
+    if (!log) {
+        return '';
+    }
+    if (!jsonFmt) {
+        return log;
+    }
+    try {
+        let res = '';
+        log.split('\n').forEach((line) => {
+            if (line.startsWith('{') && line.endsWith('}')) {
+                let obj = JSON.parse(line);
+                if (typeof obj == 'object') {
+                    let nl = '';
+                    if (obj['timestamp']) {
+                        nl += obj['timestamp'] + ' ';
+                    }
+                    if (obj['level']) {
+                        let lvl = obj['level'];
+                        if (lvl == 'ERROR') {
+                            nl += '\x1b[31mERROR\x1b[0m ';
+                        }
+                        else if (lvl == 'INFO') {
+                            nl += '\x1b[32mINFO\x1b[0m ';
+                        }
+                        else {
+                            nl += obj['level'] + ' ';
+                        }
+                    }
+                    if (obj['message']) {
+                        nl += obj['message'] + ' ';
+                    }
+                    delete obj['timestamp'];
+                    delete obj['level'];
+                    delete obj['message'];
+                    Object.keys(obj).forEach((key) => {
+                        nl +=
+                            key +
+                                '=' +
+                                (typeof obj[key] == 'object' ? JSON.stringify(obj[key]) : obj[key]) +
+                                ' ';
+                    });
+                    res += nl + '\n';
+                }
+            }
+        });
+        return res;
+    }
+    catch (e) {
+        return log;
+    }
+}
+</script>
+
+<div class="w-full h-[70vh]" on:scroll|preventDefault>
+	<Splitpanes>
+		<Pane size={40} minSize={20}>
+			<div class="p-1">
+				<div
+					class="flex flex-col lg:flex-row gap-y-1 justify-between w-full relative pb-4 gap-x-0.5"
+					id="service-logs-date-pickers"
+				>
+					<div class="flex relative">
+						<input
+							type="text"
+							value={minTsManual
+								? new Date(minTsManual).toLocaleTimeString([], {
+										day: '2-digit',
+										month: '2-digit',
+										hour: '2-digit',
+										minute: '2-digit'
+								  })
+								: 'min datetime'}
+							disabled
+						/>
+						<CalendarPicker label="min datetime" date={minTs} />
+					</div>
+					<ManuelDatePicker
+						bind:minTs={minTsManual}
+						bind:maxTs={maxTsManual}
+						bind:this={manualPicker}
+						{loading}
+						on:loadJobs={() => {
+							minTs = undefined
+							maxTs = undefined
+							allLogs = undefined
+							getAllLogs(minTsManual, maxTsManual)
+						}}
+						serviceLogsChoices
+						loadText="Last 1000 logfiles"
+					/>
+					<div class="flex relative">
+						<input
+							type="text"
+							value={maxTsManual
+								? new Date(maxTsManual).toLocaleTimeString([], {
+										day: '2-digit',
+										month: '2-digit',
+										hour: '2-digit',
+										minute: '2-digit'
+								  })
+								: 'max datetime'}
+							disabled
+						/>
+						<CalendarPicker label="max datetime" date={maxTs} />
+					</div>
+				</div>
+				<div class="flex w-full flex-row-reverse pb-4 -mt-2 gap-2"
+					><Toggle
+						size="xs"
+						bind:checked={withError}
+						options={{ right: 'errors > 0' }}
+						on:change={() => {
+							allLogs = undefined
+							getAllLogs(minTs, maxTs)
+						}}
+					/>
+					<Toggle
+						size="xs"
+						bind:checked={autoRefresh}
+						on:change={(e) => {
+							if (e.detail) {
+								getAllLogs(maxTs, undefined)
+							} else {
+								timeout && clearTimeout(timeout)
+							}
+						}}
+						options={{ right: 'auto-refresh' }}
+					/></div
+				>
+				{#if allLogs == undefined}
+					<div class="text-center pb-2"><Loader2 class="animate-spin" /></div>
+				{:else if Object.keys(allLogs).length == 0}
+					<div class="flex justify-center items-center h-full">No logs</div>
+				{:else if minTs && maxTs}
+					{@const minTsN = new Date(minTs).getTime()}
+					{@const maxTsN = new Date(maxTs).getTime()}
+					{@const diff = maxTsN - minTsN}
+					<div class="flex w-full text-2xs text-tertiary pb-6">
+						<div style="width: 60px;" />
+
+						<div class="flex justify-between w-full"
+							><div
+								>{new Date(minTs).toLocaleTimeString([], {
+									day: '2-digit',
+									month: '2-digit',
+									hour: '2-digit',
+									minute: '2-digit'
+								})}</div
+							><div
+								>{new Date(maxTs).toLocaleTimeString([], {
+									day: '2-digit',
+									month: '2-digit',
+									hour: '2-digit',
+									minute: '2-digit'
+								})}</div
+							></div
+						>
+					</div>
+					{#each Object.entries(allLogs) as [mode, o1]}
+						<div class="w-full pb-8">
+							<h2 class="pb-2 text-2xl">{mode}s</h2>
+							{#each Object.entries(o1) as [wg, o2]}
+								<div class="w-full px-1">
+									{#if wg && wg != ''}
+										<h4 class="pt-4">{wg}</h4>
+									{/if}
+									<div class="divide-y flex flex-col">
+										{#each Object.entries(o2) as [hn, files]}
+											<!-- svelte-ignore a11y-click-events-have-key-events -->
+											<!-- svelte-ignore a11y-no-static-element-interactions -->
+											<div
+												class="w-full flex items-baseline rounded px-1 hover:bg-surface-hover cursor-pointer {selected &&
+												selected[0] == mode &&
+												selected[1] == wg &&
+												selected[2] == hn
+													? 'bg-surface-secondary'
+													: ''}"
+												on:click={() => {
+													selected = [mode, wg, hn]
+													upToIsLatest = true
+													upTo = getLatestUpTo(selected)
+													scrollToBottom()
+												}}
+											>
+												<div
+													class="text-sm pt-2 pl-0.5 whitespace-nowrap"
+													title={hn}
+													style="width: 90px;">{truncateRev(hn, 8)}</div
+												>
+												<div class="relative grow h-8 mr-2">
+													{#each files as file}
+														{@const okHeight = 100.0 * ((file.ok_lines * 1.0) / (max_lines ?? 1))}
+														{@const errHeight = 100.0 * ((file.err_lines * 1.0) / (max_lines ?? 1))}
+														<div
+															class=" w-2 bg-red-400 absolute"
+															style="left: {((file.ts - minTsN) / diff) *
+																100}%; height: {errHeight}%; bottom: {okHeight}%;"
+														/>
+														<div
+															class="w-2 bg-surface-secondary-inverse absolute bottom-0"
+															style="left: {((file.ts - minTsN) / diff) *
+																100}%; height: {okHeight}%"
+														/>
+													{/each}
+												</div>
+											</div>
+										{/each}
+									</div>
+								</div>
+							{/each}
+						</div>
+					{/each}
+				{/if}
+			</div>
+		</Pane>
+		<Pane size={60} minSize={20}
+			><div class="relative h-full flex flex-col gap-1"
+				><div class="w-full bg-surface-primary-inverse text-tertiary text-xs text-center"
+					>1 min delay: logs are compacted before being available</div
+				>
+				{#if selected}
+					<div class="grow overflow-auto" id="logviewer">
+						{#each getLogs(selected, upTo) as file}
+							<div
+								style="min-height: {logsContent[file.file_path]
+									? 10
+									: (file.ok_lines + file.err_lines) / 20}px;"
+							>
+								<div class="bg-surface-primary-inverse text-sm font-semibold px-1"
+									>{new Date(file.ts).toLocaleTimeString([], {
+										day: '2-digit',
+										month: '2-digit',
+										hour: '2-digit',
+										minute: '2-digit'
+									})}</div
+								>
+								{#if logsContent[file.file_path] == undefined}
+									<div
+										class="animate-skeleton dark:bg-frost-900/50 [animation-delay:1000ms] h-full w-full"
+									/>
+								{:else if logsContent[file.file_path]}
+									{#if logsContent[file.file_path].error}
+										{#if logsContent[file.file_path].error?.startsWith('Not Found')}
+											<div class="text-xs pb-4 pt-2 text-secondary"
+												>Log file is missing. Log files require a shared log volume to be mounted
+												across servers and workers or to use the EE S3/object storage integration
+												for logs. To avoid mounting a shared volume, set the EE object store logs in
+												the instance settings</div
+											>
+										{:else}
+											<div class="text-xs text-red-400 pb-4"
+												>{logsContent[file.file_path].error}</div
+											>
+										{/if}
+									{:else if logsContent[file.file_path].content}
+										<!-- svelte-ignore a11y-click-events-have-key-events -->
+										<!-- svelte-ignore a11y-no-static-element-interactions -->
+										<div on:click|preventDefault
+											><LogViewer
+												noAutoScroll
+												noMaxH
+												isLoading={false}
+												tag={undefined}
+												content={processLogWithJsonFmt(
+													logsContent[file.file_path].content,
+													file.json_fmt
+												)}
+											/></div
+										>
+									{:else}
+										<div>No logs</div>
+									{/if}
+								{/if}
+							</div>
+						{/each}
+					</div>
+					<div class="flex w-full items-center gap-4">
+						<div class="text-tertiary px-1 text-2xs">Last 5 log files up to:</div>
+						<div class="flex grow text-xs justify-center px-2 items-center gap-2">
+							{#if upTo}
+								<button
+									on:click={() => {
+										if (upTo) {
+											upToIsLatest = false
+											upTo = new Date(new Date(upTo).getTime() - 5 * 60 * 1000).toISOString()
+										}
+									}}>{'<'} 5m</button
+								>
+							{:else}
+								<div />
+							{/if}
+
+							<div class="flex gap-1 relative items-center"
+								><div class="flex gap-1 relative">
+									<input
+										type="text"
+										value={upTo
+											? new Date(upTo).toLocaleTimeString([], {
+													day: '2-digit',
+													month: '2-digit',
+													hour: '2-digit',
+													minute: '2-digit'
+											  })
+											: ''}
+										disabled
+									/><CalendarPicker bind:date={upTo} label="Logs up to" /></div
+								></div
+							>
+							{#if upTo}
+								<button
+									on:click={() => {
+										if (upTo) {
+											upToIsLatest = false
+											upTo = new Date(new Date(upTo).getTime() + 5 * 60 * 1000).toISOString()
+										}
+									}}>5m {'>'}</button
+								>
+							{:else}
+								<div />
+							{/if}
+						</div>
+						<div>
+							<button
+								class="text-xs"
+								on:click={() => {
+									upTo = new Date().toISOString()
+									upToIsLatest = true
+								}}>now</button
+							>
+						</div>
+					</div>
+				{:else}
+					<div class="flex justify-center items-center pt-8">Select a host to see its logs</div>
+				{/if}</div
+			></Pane
+		>
+	</Splitpanes>
+</div>

package/package/components/ServiceLogsInner.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        getLogFile?: ((hostname: string, path: string) => Promise<void>) | undefined;
+    };
+    events: {
+        scroll: Event;
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ServiceLogsInnerProps = typeof __propDef.props;
+export type ServiceLogsInnerEvents = typeof __propDef.events;
+export type ServiceLogsInnerSlots = typeof __propDef.slots;
+export default class ServiceLogsInner extends SvelteComponent<ServiceLogsInnerProps, ServiceLogsInnerEvents, ServiceLogsInnerSlots> {
+    get getLogFile(): (hostname: string, path: string) => Promise<void>;
+}
+export {};

package/package/components/SimpleEditor.svelte

@@ -42,8 +42,9 @@ import domContent from '../dom.d.ts.txt?raw';
 import { buildWorkerDefinition } from './build_workers';
 import { initializeVscode } from './vscode';
 import EditorTheme from './EditorTheme.svelte';
-import { tailwindClasses } from './apps/editor/componentsPanel/tailwindUtils';
 import { writable } from 'svelte/store';
+import { vimMode } from '../stores';
+import { initVim } from './monaco_keybindings';
 // import { createConfiguredEditor } from 'vscode/monaco'
 // import type { IStandaloneCodeEditor } from 'vscode/vscode/vs/editor/standalone/browser/standaloneCodeEditor'
 let divEl = null;
@@ -62,6 +63,8 @@ export let fixedOverflowWidgets = true;
 export let small = false;
 export let domLib = false;
 export let autofocus = false;
+export let allowVim = false;
+export let tailwindClasses = [];
 const dispatch = createEventDispatcher();
 const uri = `file:///${hash}.${langToExt(lang)}`;
 buildWorkerDefinition('../../../workers', import.meta.url);
@@ -125,6 +128,20 @@ let width = 0;
 let initialized = false;
 let disableTabCond;
 $: disableTabCond?.set(!code && !!suggestion);
+let statusDiv = null;
+let vimDisposable = undefined;
+$: allowVim && editor && $vimMode && statusDiv && onVimMode();
+$: !$vimMode && vimDisposable && onVimDisable();
+function onVimDisable() {
+    vimDisposable?.dispose();
+}
+function onVimMode() {
+    if (editor && statusDiv) {
+        vimDisposable = initVim(editor, statusDiv, () => {
+            console.log('vim save not possible for simple editor');
+        });
+    }
+}
 async function loadMonaco() {
     await initializeVscode();
     initialized = true;
@@ -321,6 +338,7 @@ onMount(async () => {
 $: mounted && extraLib && initialized && loadExtraLib();
 onDestroy(() => {
     try {
+        vimDisposable?.dispose();
         model && model.dispose();
         editor && editor.dispose();
     }
@@ -338,7 +356,14 @@ onDestroy(() => {
 		{suggestion}
 	</div>
 {/if}
-<div bind:this={divEl} class="{$$props.class ?? ''} editor" bind:clientWidth={width} />
+<div
+	bind:this={divEl}
+	class="{$$props.class ?? ''} editor simple-editor {!allowVim ? 'nonmain-editor' : ''}"
+	bind:clientWidth={width}
+/>
+{#if allowVim && $vimMode}
+	<div class="fixed bottom-0 z-30" bind:this={statusDiv} />
+{/if}
 
 <style>
 	.editor {