windmill-components 1.394.7 → 1.405.0

package/package/ata/edgeCases.d.ts

@@ -1,3 +1,2 @@
 /** Converts some of the known global imports to node so that we grab the right info */
 export declare const mapModuleNameToModule: (moduleSpecifier: string) => string;
-export declare function isRelativePath(d: string): boolean;

package/package/ata/edgeCases.js

@@ -1,3 +1,4 @@
+import { isTypescriptRelativePath } from '../relative_imports';
 /** Converts some of the known global imports to node so that we grab the right info */
 export const mapModuleNameToModule = (moduleSpecifier) => {
     // in node repl:
@@ -59,7 +60,7 @@ export const mapModuleNameToModule = (moduleSpecifier) => {
     if (builtInNodeMods.includes(moduleSpecifier.replace('node:', ''))) {
         return 'node';
     }
-    if (isRelativePath(moduleSpecifier)) {
+    if (isTypescriptRelativePath(moduleSpecifier)) {
         return moduleSpecifier;
     }
     // strip module filepath e.g. lodash/identity => lodash
@@ -67,10 +68,3 @@ export const mapModuleNameToModule = (moduleSpecifier) => {
     const moduleName = a.startsWith('@') ? `${a}/${b}` : a;
     return moduleName;
 };
-export function isRelativePath(d) {
-    return (d.startsWith('./') ||
-        d.startsWith('../') ||
-        d.startsWith('/') ||
-        d.startsWith('.../') ||
-        d.startsWith('/'));
-}

package/package/ata/index.js

@@ -1,5 +1,6 @@
+import { isTypescriptRelativePath } from '../relative_imports';
 import { getDTSFileForModuleWithVersion, getFiletreeForModuleWithVersion, getNPMVersionForModuleReference, getNPMVersionsForModule, isOverlimit, limit } from './apis';
-import { isRelativePath, mapModuleNameToModule } from './edgeCases';
+import { mapModuleNameToModule } from './edgeCases';
 /**
  * The function which starts up type acquisition,
  * returns a function which you then pass the initial
@@ -65,7 +66,7 @@ export const setupTypeAcquisition = (config) => {
         })
             .filter((f) => !moduleMap.has(f.raw));
         if (depth == 0) {
-            const relativeDeps = depsToGet.filter((f) => isRelativePath(f.raw));
+            const relativeDeps = depsToGet.filter((f) => isTypescriptRelativePath(f.raw));
             relativeDeps.forEach(async (f) => {
                 let path = f.raw.startsWith('/')
                     ? f.raw
@@ -80,7 +81,7 @@ export const setupTypeAcquisition = (config) => {
             });
         }
         depsToGet.forEach((dep) => moduleMap.set(dep.raw, { state: 'loading' }));
-        depsToGet = depsToGet.filter((f) => !isRelativePath(f.raw));
+        depsToGet = depsToGet.filter((f) => !isTypescriptRelativePath(f.raw));
         if (depsToGet.length === 0) {
             return [];
         }

package/package/common.d.ts

@@ -96,6 +96,6 @@ export type Meta = {
 type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc['length']]>;
 /** An inclusive range of integer numbers */
 export type IntRange<F extends number, T extends number> = F | Exclude<Enumerate<T>, Enumerate<F>> | T;
-export declare function pathToMeta(path: string): Meta;
+export declare function pathToMeta(path: string, hideUser: boolean): Meta;
 export declare function prettyLanguage(lang: string): string;
 export {};

package/package/common.js

@@ -38,7 +38,7 @@ export function mergeSchema(schema, enum_payload = {}) {
     }
     return new_schema;
 }
-export function pathToMeta(path) {
+export function pathToMeta(path, hideUser) {
     const splitted = path.split('/');
     let ownerKind;
     if (splitted[0] == 'g') {
@@ -53,7 +53,7 @@ export function pathToMeta(path) {
     else {
         console.error('Not recognized owner:' + splitted[0]);
         return {
-            ownerKind: 'user',
+            ownerKind: hideUser ? 'folder' : 'user',
             owner: '',
             name: ''
         };

package/package/components/ApiConnectForm.svelte

@@ -53,6 +53,7 @@ let error = '';
 let rawCode = '';
 let viewJsonSchema = false;
 $: rawCode && parseJson();
+$: textFileContent && parseTextFileContent();
 function switchTab(asJson) {
     viewJsonSchema = asJson;
     if (asJson) {
@@ -60,6 +61,9 @@ function switchTab(asJson) {
     }
     else {
         parseJson();
+        if (resourceTypeInfo?.format_extension) {
+            textFileContent = args.content;
+        }
     }
 }
 $: resourceType == 'postgresql' && isSupabaseAvailable();
@@ -89,6 +93,12 @@ function parseConnectionString(close) {
     }
 }
 let rawCodeEditor = undefined;
+let textFileContent;
+function parseTextFileContent() {
+    args = {
+        content: textFileContent
+    };
+}
 </script>
 
 {#if !notFound}
@@ -167,13 +177,29 @@ let rawCodeEditor = undefined;
 	{#if !emptyString(error)}<span class="text-red-400 text-xs mb-1 flex flex-row-reverse"
 			>{error}</span
 		>{:else}<div class="py-2" />{/if}
-	<SimpleEditor
-		bind:this={rawCodeEditor}
-		autoHeight
-		lang="json"
-		bind:code={rawCode}
-		fixedOverflowWidgets={false}
-	/>
+	<div class="h-full w-full border p-1 rounded">
+		<SimpleEditor
+			bind:this={rawCodeEditor}
+			autoHeight
+			lang="json"
+			bind:code={rawCode}
+			fixedOverflowWidgets={false}
+		/>
+	</div>
+{:else if resourceTypeInfo?.format_extension}
+	<h5 class="mt-4 inline-flex items-center gap-4">
+		File content ({resourceTypeInfo.format_extension})
+	</h5>
+	<div class="py-2" />
+	<div class="h-full w-full border p-1 rounded">
+		<SimpleEditor
+			bind:this={rawCodeEditor}
+			autoHeight
+			lang={resourceTypeInfo.format_extension}
+			bind:code={textFileContent}
+			fixedOverflowWidgets={false}
+		/>
+	</div>
 {:else}
 	<SchemaForm
 		onlyMaskPassword

package/package/components/ArgInput.svelte

@@ -218,7 +218,8 @@ function testRegex(pattern, value) {
     }
 }
 function onKeyDown(e) {
-    if ((e.ctrlKey || e.metaKey) && e.key == 'Enter') {
+    if ((e.ctrlKey || e.metaKey) &&
+        (e.key == 'Enter' || e.key == 'c' || e.key == 'v' || e.key == 'x')) {
         return;
     }
     e.stopPropagation();
@@ -542,7 +543,8 @@ $: shouldDispatchChanges && debounced(value);
 							randomFileKey={true}
 							on:addition={(evt) => {
 								value = {
-									s3: evt.detail?.path ?? ''
+									s3: evt.detail?.path ?? '',
+									filename: evt.detail?.filename ?? ''
 								}
 							}}
 							on:deletion={(evt) => {

package/package/components/CenteredModal.svelte

@@ -5,6 +5,7 @@ import LoginPageHeader from './LoginPageHeader.svelte';
 export let subtitle = undefined;
 export let title = 'Windmill';
 export let disableLogo = false;
+export let large = false;
 setLicense();
 </script>
 
@@ -20,7 +21,9 @@ setLicense();
 		{/if}
 
 		<div
-			class="border rounded-md shadow-md bg-surface w-full max-w-[640px] p-4 sm:py-8 sm:px-10 mb-6 md:mb-20 z-10"
+			class="border rounded-md shadow-md bg-surface w-full {large
+				? 'max-w-5xl'
+				: 'max-w-[640px]'} p-4 sm:py-8 sm:px-10 mb-6 md:mb-20 z-10"
 		>
 			<div class="mb-10">
 				<h1 class="text-center text-primary">

package/package/components/CenteredModal.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         subtitle?: string | undefined;
         title?: string | undefined;
         disableLogo?: boolean | undefined;
+        large?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/DateInput.svelte

@@ -6,6 +6,7 @@ export let autofocus = false;
 export let minDate = undefined;
 export let maxDate = undefined;
 export let dateFormat = 'dd-MM-yyyy';
+export let disabled = false;
 let date = computeDate(value);
 const dispatch = createEventDispatcher();
 const defaultDateFormat = 'dd-MM-yyyy';
@@ -60,6 +61,7 @@ let randomId = 'datetarget-' + Math.random().toString(36).substring(7);
 <div class="flex flex-row gap-1 items-center w-full" id={randomId} on:pointerdown on:focus>
 	<!-- svelte-ignore a11y-autofocus -->
 	<input
+		{disabled}
 		type="date"
 		bind:value={date}
 		{autofocus}

package/package/components/DateInput.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         minDate?: string | undefined;
         maxDate?: string | undefined;
         dateFormat?: string | undefined;
+        disabled?: boolean | undefined;
     };
     events: {
         pointerdown: PointerEvent;

package/package/components/DefaultScripts.svelte

@@ -5,10 +5,13 @@ import Drawer from './common/drawer/Drawer.svelte';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import DefaultScriptsInner from './DefaultScriptsInner.svelte';
 let drawer;
+export let placement = 'left';
+export let size = 'xs2';
+export let noText = false;
 </script>
 
 {#if $userStore?.is_admin || $userStore?.is_super_admin}
-	<Drawer bind:this={drawer} placement="left">
+	<Drawer bind:this={drawer} {placement}>
 		<DrawerContent title="Edit Default Scripts" on:close={drawer.closeDrawer}>
 			<DefaultScriptsInner />
 		</DrawerContent>
@@ -17,8 +20,10 @@ let drawer;
 		on:click={drawer?.openDrawer}
 		startIcon={{ icon: SettingsIcon }}
 		color="light"
-		size="xs2"
+		{size}
 		btnClasses="!text-tertiary"
-		variant="contained">defaults</Button
+		variant="contained"
 	>
+		{noText ? '' : 'defaults'}
+	</Button>
 {/if}

package/package/components/DefaultScripts.svelte.d.ts

@@ -1,6 +1,10 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        placement?: "right" | "left" | undefined;
+        size?: "xs3" | "xs2" | undefined;
+        noText?: boolean | undefined;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/DefaultScriptsInner.svelte

@@ -4,6 +4,7 @@ import { flip } from 'svelte/animate';
 import Toggle from './Toggle.svelte';
 import { defaultScriptLanguages } from '../scripts';
 import Alert from './common/alert/Alert.svelte';
+export let small = false;
 $: langs = computeLangs($defaultScripts);
 function computeLangs(defaultScripts) {
     const allLangs = Object.keys(defaultScriptLanguages);
@@ -31,24 +32,32 @@ async function changePosition(i, up) {
 }
 </script>
 
-<Alert title="Global to workspace" type="info" class="mb-4">
+<Alert title="Global to workspace" type="info" class="mb-4" size={small ? 'xs' : 'sm'}>
 	This setting is only available to admins and will affect all users in the workspace.
 </Alert>
-<div class="h-full w-full flex-col gap-2 flex">
+<div class="h-full w-full flex-col {small ? 'gap-0' : 'gap-2'} flex">
 	{#each langs as lang, i (lang)}
 		<div
 			animate:flip={{ duration: 300 }}
-			class="w-full p-2 rounded border border-seconadry grid grid-cols-3"
-			><h3>{lang}</h3>
+			class="w-full p-2 rounded {small
+				? ''
+				: 'border border-secondary'} grid grid-cols-3 items-center"
+			><h3 class={small ? 'text-xs font-medium justify-center' : ''}>{lang}</h3>
 			<div>
 				{#if i > 0}
-					<button on:click={() => changePosition(i ?? 0, true)} class="text-lg mr-2">
+					<button
+						on:click={() => changePosition(i ?? 0, true)}
+						class={small ? 'mr-2 text-secondary text-sm' : 'text-lg mr-2'}
+						title="Move up"
+					>
 						&uparrow;</button
 					>
 				{/if}
 				{#if i < langs.length - 1}
-					<button on:click={() => changePosition(i ?? 0, false)} class="text-lg mr-2"
-						>&downarrow;</button
+					<button
+						on:click={() => changePosition(i ?? 0, false)}
+						class={small ? 'mr-2 text-secondary text-sm' : 'text-lg mr-2'}
+						title="Move down">&downarrow;</button
 					>
 				{/if}</div
 			>

package/package/components/DefaultScriptsInner.svelte.d.ts

@@ -1,6 +1,8 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        small?: boolean | undefined;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/Dev.svelte

@@ -25,13 +25,16 @@ import Toggle from './Toggle.svelte';
 import { setLicense } from '../enterpriseUtils';
 import { workspacedOpenai } from './copilot/lib';
 import { pickScript } from './flows/flowStateUtils';
+import { approximateFindPythonRelativePath, isTypescriptRelativePath, parseTypescriptDeps } from '../relative_imports';
+import Tooltip from './Tooltip.svelte';
 $: token = $page.url.searchParams.get('wm_token') ?? undefined;
 $: workspace = $page.url.searchParams.get('workspace') ?? undefined;
 $: themeDarkRaw = $page.url.searchParams.get('activeColorTheme');
 $: themeDark = themeDarkRaw == '2' || themeDarkRaw == '4';
 $: if (token) {
     OpenAPI.WITH_CREDENTIALS = true;
-    OpenAPI.TOKEN = $page.url.searchParams.get('wm_token');
+    OpenAPI.TOKEN = token;
+    loadUser();
 }
 let flowCopilotContext = {
     drawerStore: writable(undefined),
@@ -125,7 +128,7 @@ let useLock = false;
 let lockChanges = false;
 let timeout = undefined;
 let loadingCodebaseButton = false;
-let lastBundleCommandId = '';
+let lastCommandId = '';
 const el = (event) => {
     // sendUserToast(`Received message from parent ${event.data.type}`, true)
     if (event.data.type == 'runTest') {
@@ -137,11 +140,19 @@ const el = (event) => {
         replaceScript(event.data);
     }
     else if (event.data.type == 'testBundle') {
-        if (event.data.id == lastBundleCommandId) {
+        if (event.data.id == lastCommandId) {
             testBundle(event.data.file, event.data.isTar);
         }
         else {
-            sendUserToast(`Bundle received ${lastBundleCommandId} was obsolete, ignoring`, true);
+            sendUserToast(`Bundle received ${lastCommandId} was obsolete, ignoring`, true);
+        }
+    }
+    else if (event.data.type == 'testPreviewBundle') {
+        if (event.data.id == lastCommandId && currentScript) {
+            testJobLoader.runPreview(currentScript.path, event.data.file, currentScript.language, args, currentScript.tag, useLock ? currentScript.lock : undefined);
+        }
+        else {
+            sendUserToast(`Bundle received ${lastCommandId} was obsolete, ignoring`, true);
         }
     }
     else if (event.data.type == 'testBundleError') {
@@ -176,7 +187,7 @@ onMount(() => {
             repeat: e.repeat,
             shiftKey: e.shiftKey
         };
-        if (obj.ctrlKey && obj.key == 'a') {
+        if ((obj.ctrlKey || obj.metaKey) && obj.key == 'a') {
             e.stopPropagation();
             return;
         }
@@ -260,6 +271,7 @@ function connectWs() {
         console.error(e);
     }
 }
+let typescriptBundlePreviewMode = false;
 function runTest() {
     if (mode == 'script') {
         if (!currentScript) {
@@ -267,12 +279,18 @@ function runTest() {
         }
         if (currentScript.isCodebase) {
             loadingCodebaseButton = true;
-            lastBundleCommandId = Math.random().toString(36).substring(7);
-            window.parent?.postMessage({ type: 'testBundle', id: lastBundleCommandId }, '*');
+            lastCommandId = Math.random().toString(36).substring(7);
+            window.parent?.postMessage({ type: 'testBundle', id: lastCommandId }, '*');
         }
         else {
-            //@ts-ignore
-            testJobLoader.runPreview(currentScript.path, currentScript.content, currentScript.language, args, currentScript.tag, useLock ? currentScript.lock : undefined);
+            if (relativePaths.length > 0 && typescriptBundlePreviewMode) {
+                lastCommandId = Math.random().toString(36).substring(7);
+                window.parent?.postMessage({ type: 'testPreviewBundle', external: ['!/*'], id: lastCommandId }, '*');
+            }
+            else {
+                //@ts-ignore
+                testJobLoader.runPreview(currentScript.path, currentScript.content, currentScript.language, args, currentScript.tag, useLock ? currentScript.lock : undefined);
+            }
         }
     }
     else {
@@ -298,15 +316,27 @@ async function onKeyDown(event) {
     else if ((event.ctrlKey || event.metaKey) && event.code === 'KeyX') {
         document.execCommand('cut');
     }
+    else if ((event.ctrlKey || event.metaKey) && event.code === 'KeyV') {
+        event.preventDefault();
+        document.execCommand('paste');
+    }
 }
+let relativePaths = [];
 let lastPath = undefined;
 async function replaceScript(lastEdit) {
     currentScript = lastEdit;
     if (lastPath !== lastEdit.path) {
         schema = emptySchema();
+        relativePaths = [];
     }
     try {
         await inferArgs(lastEdit.language, lastEdit.content, schema);
+        if (lastEdit?.language == 'bun') {
+            relativePaths = await parseTypescriptDeps(lastEdit.content).filter(isTypescriptRelativePath);
+        }
+        else if (lastEdit?.language == 'python3') {
+            relativePaths = approximateFindPythonRelativePath(lastEdit.content);
+        }
         schema = schema;
         lastPath = lastEdit.path;
         validCode = true;
@@ -372,7 +402,8 @@ setContext('FlowEditorContext', {
     saveDraft: () => { },
     initialPath: '',
     flowInputsStore: writable({}),
-    customUi: {}
+    customUi: {},
+    insertButtonOpen: writable(false)
 });
 $: updateFlow($flowStore);
 let lastSent = undefined;
@@ -429,7 +460,7 @@ async function inferModuleArgs(selectedIdStore) {
 
 <main class="h-screen w-full">
 	{#if mode == 'script'}
-		<div class="flex flex-col h-full">
+		<div class="flex flex-col min-h-full overflow-auto">
 			<div class="absolute top-0 left-2">
 				<DarkModeToggle bind:darkMode bind:this={darkModeToggle} forcedDarkMode={false} />
 			</div>
@@ -458,6 +489,32 @@ async function inferModuleArgs(selectedIdStore) {
 					options={{ left: 'Infer lockfile', right: 'Use current lockfile' }}
 				/>
 			</div>
+			{#if (currentScript?.language == 'bun' || currentScript?.language == 'python3') && currentScript?.content != undefined}
+				{#if relativePaths.length > 0}
+					<div class="flex flex-row-reverse py-1">
+						{#if currentScript?.language == 'bun'}
+							<Toggle
+								size="xs"
+								bind:checked={typescriptBundlePreviewMode}
+								options={{
+									left: '',
+									right: 'bundle relative paths for preview',
+									rightTooltip:
+										'(Beta) Instead of only sending the current file for preview and rely on already deployed code for the common logic, bundle all code that is imported in relative paths'
+								}}
+							/>
+						{:else if currentScript?.language == 'python3'}
+							<div class="text-xs text-yellow-500"
+								>relative imports detected<Tooltip
+									>Beware that when using relative imports, the code used in preview for those is
+									the one that is already deployed. If you make update to the common logic, you will
+									need to `wmill sync push` to see it reflected in the preview runs.</Tooltip
+								></div
+							>
+						{/if}
+					</div>
+				{/if}
+			{/if}
 			<div class="flex justify-center pt-1">
 				{#if testIsLoading}
 					<Button on:click={testJobLoader?.cancelJob} btnClasses="w-full" color="red" size="xs">

package/package/components/DropdownV2.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
             icon?: any;
             href?: string | undefined;
             disabled?: boolean | undefined;
-            type?: "action" | "delete" | undefined;
+            type?: "delete" | "action" | undefined;
             hide?: boolean | undefined;
         }[] | (() => {
             displayName: string;
@@ -15,7 +15,7 @@ declare const __propDef: {
             icon?: any;
             href?: string | undefined;
             disabled?: boolean | undefined;
-            type?: "action" | "delete" | undefined;
+            type?: "delete" | "action" | undefined;
             hide?: boolean | undefined;
         }[]) | (() => Promise<{
             displayName: string;
@@ -23,7 +23,7 @@ declare const __propDef: {
             icon?: any;
             href?: string | undefined;
             disabled?: boolean | undefined;
-            type?: "action" | "delete" | undefined;
+            type?: "delete" | "action" | undefined;
             hide?: boolean | undefined;
         }[]>) | undefined;
         justifyEnd?: boolean | undefined;

package/package/components/DropdownV2Inner.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
             icon?: any;
             href?: string | undefined;
             disabled?: boolean | undefined;
-            type?: "action" | "delete" | undefined;
+            type?: "delete" | "action" | undefined;
             hide?: boolean | undefined;
         }[] | (() => {
             displayName: string;
@@ -15,7 +15,7 @@ declare const __propDef: {
             icon?: any;
             href?: string | undefined;
             disabled?: boolean | undefined;
-            type?: "action" | "delete" | undefined;
+            type?: "delete" | "action" | undefined;
             hide?: boolean | undefined;
         }[]) | (() => Promise<{
             displayName: string;
@@ -23,7 +23,7 @@ declare const __propDef: {
             icon?: any;
             href?: string | undefined;
             disabled?: boolean | undefined;
-            type?: "action" | "delete" | undefined;
+            type?: "delete" | "action" | undefined;
             hide?: boolean | undefined;
         }[]>) | undefined;
     };

package/package/components/EditableSchemaForm.svelte

@@ -419,6 +419,7 @@ let editor = undefined;
 															{itemPicker}
 															{lightweightMode}
 															bind:nullable={schema.properties[argName].nullable}
+															bind:disabled={schema.properties[argName].disabled}
 															type={schema.properties[argName].type}
 															bind:oneOf={schema.properties[argName].oneOf}
 															bind:format={schema.properties[argName].format}

package/package/components/Editor.svelte

@@ -125,9 +125,10 @@ import { editor as meditor, languages, KeyCode, KeyMod, Uri as mUri } from 'mona
 import EditorTheme from './EditorTheme.svelte';
 import { BIGQUERY_TYPES, MSSQL_TYPES, MYSQL_TYPES, POSTGRES_TYPES, SNOWFLAKE_TYPES } from '../consts';
 import { setupTypeAcquisition } from '../ata/index';
-import { initWasmTs, parseDeps } from '../infer';
+import { initWasmTs } from '../infer';
 import { initVim } from './monaco_keybindings';
 import { buildWorkerDefinition } from '../monaco_workers/build_workers';
+import { parseTypescriptDeps } from '../relative_imports';
 // import EditorTheme from './EditorTheme.svelte'
 let divEl = null;
 let editor = null;
@@ -1011,7 +1012,7 @@ async function setTypescriptExtraLibs() {
             ata = setupTypeAcquisition({
                 projectName: 'Windmill',
                 depsParser: (c) => {
-                    return parseDeps(c);
+                    return parseTypescriptDeps(c);
                 },
                 root,
                 scriptPath: path,

package/package/components/Editor.svelte.d.ts

@@ -7,7 +7,7 @@ import { editor as meditor, type IDisposable } from 'monaco-editor';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        lang: 'typescript' | 'python' | 'go' | 'shell' | 'sql' | 'graphql' | 'powershell' | 'php' | 'css' | 'javascript' | 'rust';
+        lang: 'typescript' | 'python' | 'go' | 'shell' | 'sql' | 'graphql' | 'powershell' | 'php' | 'css' | 'javascript' | 'rust' | 'yaml';
         code?: string | undefined;
         cmdEnterAction?: (() => void) | undefined;
         formatAction?: (() => void) | undefined;

package/package/components/ExecutionDuration.svelte

@@ -0,0 +1,44 @@
+<script>import {} from '../gen';
+import { onDestroy } from 'svelte';
+export let job = undefined;
+/** Execution duration of current active job (in ms) */
+export let executionDuration = 0;
+/** Is current job running more than specified value in `longDefinition` seconds */
+export let longRunning = false;
+/** What do we count as "long" (in ms)*/
+export let longDefinition = 30_000;
+/** How often component updates execution duration (in ms)
+ *   Higher value -> more efficient component is, less accuracy it has
+ *   Lower value -> less efficient component is, more accuracy it has
+ */
+export let updateResolution = 5_000;
+let startedAt = undefined;
+let busy = false;
+let interval;
+// Detect when execution of job started
+$: if (!busy &&
+    job &&
+    'running' in job &&
+    (job.job_kind == 'script' || job?.job_kind == 'preview'))
+    start(job);
+function start(job) {
+    busy = true;
+    startedAt = new Date(job?.started_at ?? '').getTime();
+    interval = setInterval(updateDuration, updateResolution);
+}
+function updateDuration() {
+    if (job?.type == 'CompletedJob') {
+        clearInterval(interval);
+        return;
+    }
+    if (startedAt)
+        executionDuration = Date.now() - startedAt;
+    // Detect long running
+    if (executionDuration >= longDefinition)
+        longRunning = true;
+}
+onDestroy(() => {
+    // Clear the interval when the component is destroyed
+    clearInterval(interval);
+});
+</script>

package/package/components/ExecutionDuration.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import { type Job } from '../gen';
+declare const __propDef: {
+    props: {
+        job?: Job | undefined;
+        /** Execution duration of current active job (in ms) */ executionDuration?: number | undefined;
+        /** Is current job running more than specified value in `longDefinition` seconds */ longRunning?: boolean | undefined;
+        /** What do we count as "long" (in ms)*/ longDefinition?: number | undefined;
+        /** How often component updates execution duration (in ms)
+             *   Higher value -> more efficient component is, less accuracy it has
+             *   Lower value -> less efficient component is, more accuracy it has
+             */ updateResolution?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ExecutionDurationProps = typeof __propDef.props;
+export type ExecutionDurationEvents = typeof __propDef.events;
+export type ExecutionDurationSlots = typeof __propDef.slots;
+export default class ExecutionDuration extends SvelteComponent<ExecutionDurationProps, ExecutionDurationEvents, ExecutionDurationSlots> {
+}
+export {};