windmill-components 1.309.7 → 1.352.0

package/package/components/ConcurrentJobsChart.svelte

@@ -0,0 +1,212 @@
+<script>import { Line } from 'svelte-chartjs';
+import 'chartjs-adapter-date-fns';
+import zoomPlugin from 'chartjs-plugin-zoom';
+import { Chart as ChartJS, CategoryScale, Legend, LineElement, LinearScale, PointElement, TimeScale, Title, Tooltip } from 'chart.js';
+import { createEventDispatcher } from 'svelte';
+import { getDbClockNow } from '../forLater';
+export let extendedJobs = undefined;
+export let maxIsNow = false;
+export let minTimeSet = undefined;
+export let maxTimeSet = undefined;
+const dispatch = createEventDispatcher();
+function calculateTimeSeries(extendedJobs) {
+    const timeline = new Map();
+    extendedJobs.jobs.forEach((j) => {
+        if (j.started_at != undefined) {
+            const startTime = new Date(j.started_at).getTime();
+            if (!timeline.has(startTime)) {
+                timeline.set(startTime, { count: 0, id_started: [], id_ended: [] });
+            }
+            const s = timeline.get(startTime);
+            s.count += 1;
+            s.id_started.push(j.id);
+            if (j.type === 'CompletedJob') {
+                const jc = j;
+                const endTime = startTime + jc.duration_ms;
+                if (!timeline.has(endTime)) {
+                    timeline.set(endTime, { count: 0, id_started: [], id_ended: [] });
+                }
+                const e = timeline.get(endTime);
+                e.count -= 1;
+                e.id_ended.push(j.id);
+            }
+        }
+    });
+    extendedJobs.obscured_jobs.forEach((j) => {
+        if (j.started_at != undefined) {
+            const startTime = new Date(j.started_at).getTime();
+            if (!timeline.has(startTime)) {
+                timeline.set(startTime, { count: 0, id_started: [], id_ended: [] });
+            }
+            const s = timeline.get(startTime);
+            s.count += 1;
+            s.id_started.push('unknoww');
+            if (j.duration_ms != undefined) {
+                const jc = j;
+                const endTime = startTime + jc.duration_ms;
+                if (!timeline.has(endTime)) {
+                    timeline.set(endTime, { count: 0, id_started: [], id_ended: [] });
+                }
+                const e = timeline.get(endTime);
+                e.count -= 1;
+                e.id_ended.push('unknown');
+            }
+        }
+    });
+    let count = 0;
+    const result = [];
+    for (const [time, change] of [...timeline.entries()].sort(([time1], [time2]) => time1 - time2)) {
+        count += change.count;
+        let msg = '';
+        msg += change.id_started.length != 0 ? `${change.id_started.join(',')} started` : '';
+        msg += change.id_started.length != 0 && change.id_ended.length != 0 ? '\n' : '';
+        msg += change.id_ended.length != 0 ? `${change.id_ended.join(',')} ended` : '';
+        result.push({ time: new Date(time), count, msg });
+    }
+    // Add points to continue the line towards the extremities
+    if (result.length > 0) {
+        let start_time = addSeconds(new Date(result[0].time), -1);
+        let start_count = 0;
+        let end_count = result[result.length - 1].count;
+        result.unshift({
+            time: start_time,
+            count: start_count
+        });
+        result.push({
+            time: new Date(),
+            count: end_count
+        });
+    }
+    return result;
+}
+let intervals = undefined;
+$: intervals = extendedJobs ? calculateTimeSeries(extendedJobs) : undefined;
+ChartJS.register(Title, Tooltip, Legend, zoomPlugin, LineElement, CategoryScale, LinearScale, PointElement, TimeScale);
+$: data = {
+    datasets: [
+        {
+            borderColor: '#4ade80',
+            backgroundColor: '#f8717100',
+            pointRadius: 0,
+            label: 'running',
+            showLine: true,
+            stepped: true,
+            data: intervals?.map((job) => ({
+                x: job.time,
+                y: job.count,
+                id: job.msg
+            })) ?? []
+        }
+    ]
+};
+const zoomOptions = {
+    pan: {
+        enabled: true,
+        modifierKey: 'ctrl',
+        onPanComplete: ({ chart }) => {
+            dispatch('zoom', {
+                min: addSeconds(new Date(chart.scales.x.min), -1),
+                max: addSeconds(new Date(chart.scales.x.max), 1)
+            });
+        }
+    },
+    zoom: {
+        drag: {
+            enabled: true
+        },
+        mode: 'x',
+        onZoom: ({ chart }) => {
+            dispatch('zoom', {
+                min: addSeconds(new Date(chart.scales.x.min), -1),
+                max: addSeconds(new Date(chart.scales.x.max), 1)
+            });
+        }
+    }
+};
+let minTime = addSeconds(new Date(), -300);
+let maxTime = getDbClockNow();
+$: computeMinMaxTime(intervals, minTimeSet, maxTimeSet);
+function minJobTime(intervals) {
+    return intervals[0].time;
+}
+function maxJobTime(intervals) {
+    return intervals[intervals?.length - 1].time;
+}
+function computeMinMaxTime(intervals, minTimeSet, maxTimeSet) {
+    let minTimeSetDate = minTimeSet ? new Date(minTimeSet) : undefined;
+    let maxTimeSetDate = maxTimeSet ? new Date(maxTimeSet) : undefined;
+    if (minTimeSetDate && maxTimeSetDate) {
+        minTime = minTimeSetDate;
+        maxTime = maxTimeSetDate;
+        return;
+    }
+    if (intervals == undefined || intervals?.length == 0) {
+        minTime = minTimeSetDate ?? addSeconds(new Date(), -300);
+        maxTime = maxTimeSetDate ?? getDbClockNow();
+        return;
+    }
+    const maxJob = maxIsNow ? getDbClockNow() : maxJobTime(intervals);
+    const minJob = minJobTime(intervals);
+    const diff = (maxJob.getTime() - minJob.getTime()) / 20000;
+    minTime = minTimeSetDate ?? addSeconds(minJob, -diff);
+    if (maxIsNow) {
+        maxTime = maxTimeSetDate ?? maxJob;
+    }
+    else {
+        maxTime = maxTimeSetDate ?? addSeconds(maxJob, diff);
+    }
+}
+function addSeconds(date, seconds) {
+    date.setTime(date.getTime() + seconds * 1000);
+    return date;
+}
+$: options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+        zoom: zoomOptions,
+        legend: {
+            display: false
+        },
+        tooltip: {
+            callbacks: {
+                footer: function (context) {
+                    return context[context.length - 1].raw.id;
+                }
+            }
+        }
+    },
+    scales: {
+        x: {
+            type: 'time',
+            grid: {
+                display: false
+            },
+            min: minTime,
+            max: maxTime
+        },
+        y: {
+            grid: {
+                display: false
+            },
+            title: {
+                display: true,
+                text: 'concurrent jobs'
+            },
+            beginAtZero: true,
+            ticks: {
+                stepSize: 1
+            }
+        }
+    },
+    animation: false,
+    interaction: {
+        intersect: false,
+        mode: 'index'
+    }
+};
+</script>
+
+<div class="relative max-h-40">
+	<Line {data} {options} />
+</div>

package/package/components/ConcurrentJobsChart.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import 'chartjs-adapter-date-fns';
+import type { ExtendedJobs } from '../gen';
+declare const __propDef: {
+    props: {
+        extendedJobs?: ExtendedJobs | undefined;
+        maxIsNow?: boolean | undefined;
+        minTimeSet?: string | undefined;
+        maxTimeSet?: string | undefined;
+    };
+    events: {
+        zoom: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ConcurrentJobsChartProps = typeof __propDef.props;
+export type ConcurrentJobsChartEvents = typeof __propDef.events;
+export type ConcurrentJobsChartSlots = typeof __propDef.slots;
+export default class ConcurrentJobsChart extends SvelteComponent<ConcurrentJobsChartProps, ConcurrentJobsChartEvents, ConcurrentJobsChartSlots> {
+}
+export {};

package/package/components/CustomOauth.svelte

@@ -64,8 +64,8 @@ $: if (!connect_config) {
 <label class="block pb-2">
 	<span class="text-primary font-semibold text-sm"
 		>Payload <Tooltip
-			>Auth is passed in query most commonly. LinkedIn is an example of OAuth using
-			x-www-form-urlencoded
+			>Auth (client id/client secret) is passed as basic auth most commonly but can be passed in the
+			body x-www-form-urlencoded. Some LinkedIn is an example of OAuth using x-www-form-urlencoded
 		</Tooltip></span
 	>
 	<div>

package/package/components/DateInput.svelte

@@ -0,0 +1,47 @@
+<script>import { createEventDispatcher } from 'svelte';
+import { format, isValid } from 'date-fns';
+export let value = undefined;
+export let autofocus = false;
+export let minDate = undefined;
+export let maxDate = undefined;
+export let dateFormat = 'dd-MM-yyyy';
+let date = undefined;
+const dispatch = createEventDispatcher();
+function updateValue(newDate) {
+    if (newDate && isValid(new Date(newDate))) {
+        if (dateFormat === undefined) {
+            dateFormat = 'dd-MM-yyyy';
+        }
+        try {
+            let dateFromValue = newDate ? new Date(newDate) : undefined;
+            if (dateFromValue === undefined) {
+                return;
+            }
+            const parsedDate = format(dateFromValue, dateFormat);
+            value = parsedDate;
+            dispatch('change', value);
+        }
+        catch (error) {
+            console.error('Failed to parse date:', error);
+            return;
+        }
+    }
+}
+let randomId = 'datetarget-' + Math.random().toString(36).substring(7);
+</script>
+
+<div class="flex flex-row gap-1 items-center w-full" id={randomId} on:pointerdown on:focus>
+	<input
+		type="date"
+		bind:value={date}
+		{autofocus}
+		class="!w-full app-editor-input"
+		min={minDate}
+		max={maxDate}
+		on:change={() => {
+			if (date) {
+				updateValue(date)
+			}
+		}}
+	/>
+</div>

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

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: string | undefined;
+        autofocus?: boolean | null | undefined;
+        minDate?: string | undefined;
+        maxDate?: string | undefined;
+        dateFormat?: string | undefined;
+    };
+    events: {
+        pointerdown: PointerEvent;
+        focus: FocusEvent;
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DateInputProps = typeof __propDef.props;
+export type DateInputEvents = typeof __propDef.events;
+export type DateInputSlots = typeof __propDef.slots;
+export default class DateInput extends SvelteComponent<DateInputProps, DateInputEvents, DateInputSlots> {
+}
+export {};

package/package/components/DateTimeInput.svelte

@@ -1,5 +1,8 @@
 <script>import { createEventDispatcher } from 'svelte';
 import { Button } from './common';
+import { Clock } from 'lucide-svelte';
+// import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
+// import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 export let value = undefined;
 export let autofocus = false;
 export let useDropdown = false;
@@ -7,6 +10,7 @@ export let minDate = undefined;
 export let maxDate = undefined;
 let date = undefined;
 let time = undefined;
+// let format: 'local' | 'utc' = 'local'
 function parseValue(value = undefined) {
     let dateFromValue = value ? new Date(value) : undefined;
     date = isValidDate(dateFromValue)
@@ -49,11 +53,21 @@ 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 type="date" bind:value={date} {autofocus} class="!w-3/4" min={minDate} max={maxDate} />
-	<input type="time" bind:value={time} class="!w-1/4 min-w-[100px]" />
+	<input
+		type="date"
+		bind:value={date}
+		{autofocus}
+		class="!w-3/4 app-editor-input"
+		min={minDate}
+		max={maxDate}
+	/>
+	<input type="time" bind:value={time} class="!w-1/4 min-w-[100px] app-editor-input" />
 	<Button
 		variant="border"
 		color="light"
+		startIcon={{
+			icon: Clock
+		}}
 		size="xs"
 		portalTarget={`#${randomId}`}
 		dropdownItems={useDropdown
@@ -86,6 +100,14 @@ let randomId = 'datetarget-' + Math.random().toString(36).substring(7);
 			: undefined}
 		on:click={() => {
 			setTimeLater(0)
-		}}>Now</Button
+		}}
 	>
+		Now
+	</Button>
+	<!-- <div>
+		<ToggleButtonGroup bind:selected={format}>
+			<ToggleButton light small value={'local'} label="local" />
+			<ToggleButton light small value={'utc'} label="utc" />
+		</ToggleButtonGroup>
+	</div> -->
 </div>

package/package/components/DefaultScripts.svelte

@@ -4,18 +4,15 @@ import { Button } from './common';
 import Drawer from './common/drawer/Drawer.svelte';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import DefaultScriptsInner from './DefaultScriptsInner.svelte';
-import Portal from 'svelte-portal';
 let drawer;
 </script>
 
 {#if $userStore?.is_admin || $userStore?.is_super_admin}
-	<Portal>
-		<Drawer bind:this={drawer} placement="left">
-			<DrawerContent title="Edit Default Scripts" on:close={drawer.closeDrawer}>
-				<DefaultScriptsInner />
-			</DrawerContent>
-		</Drawer>
-	</Portal>
+	<Drawer bind:this={drawer} placement="left">
+		<DrawerContent title="Edit Default Scripts" on:close={drawer.closeDrawer}>
+			<DefaultScriptsInner />
+		</DrawerContent>
+	</Drawer>
 	<Button
 		on:click={drawer?.openDrawer}
 		startIcon={{ icon: SettingsIcon }}

package/package/components/DefaultTags.svelte

@@ -2,6 +2,7 @@
 import { Pen } from 'lucide-svelte';
 import Tooltip from './Tooltip.svelte';
 import DefaultTagsInner from './DefaultTagsInner.svelte';
+export let defaultTagPerWorkspace = undefined;
 let placement = 'bottom-end';
 </script>
 
@@ -19,5 +20,5 @@ let placement = 'bottom-end';
 			>
 		</Button>
 	</svelte:fragment>
-	<DefaultTagsInner />
-</Popup> 
+	<DefaultTagsInner bind:defaultTagPerWorkspace />
+</Popup>

package/package/components/DefaultTags.svelte.d.ts

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

package/package/components/DefaultTagsInner.svelte

@@ -7,15 +7,7 @@ import { enterpriseLicense, superadmin } from '../stores';
 import { DEFAULT_TAGS_PER_WORKSPACE_SETTING } from '../consts';
 import Toggle from './Toggle.svelte';
 let defaultTags = undefined;
-let defaultTagPerWorkspace = undefined;
-async function loadDefaultTagsPerWorkspace() {
-    try {
-        defaultTagPerWorkspace = await WorkerService.isDefaultTagsPerWorkspace();
-    }
-    catch (err) {
-        sendUserToast(`Could not load default tag per workspace setting: ${err}`, true);
-    }
-}
+export let defaultTagPerWorkspace = undefined;
 async function loadDefaultTags() {
     try {
         defaultTags = (await WorkerService.geDefaultTags()) ?? [];
@@ -25,12 +17,11 @@ async function loadDefaultTags() {
     }
 }
 loadDefaultTags();
-loadDefaultTagsPerWorkspace();
 </script>
 
 <div class="flex flex-col w-80 p-2 gap-2">
 	{#if !$enterpriseLicense}
-		<div class="flex text-xs items-center gap-1 text-yellow-500 whitespace-nowrap ml-8">
+		<div class="flex text-xs items-center gap-1 text-yellow-500 whitespace-nowrap justify-end">
 			<AlertTriangle size={16} />
 			EE only <Tooltip>Enterprise Edition only feature</Tooltip>
 		</div>

package/package/components/DefaultTagsInner.svelte.d.ts

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

package/package/components/Dev.svelte

@@ -119,15 +119,29 @@ if (searchParams?.has('local')) {
 let useLock = false;
 let lockChanges = false;
 let timeout = undefined;
+let loadingCodebaseButton = false;
+let lastBundleCommandId = '';
 const el = (event) => {
     // sendUserToast(`Received message from parent ${event.data.type}`, true)
     if (event.data.type == 'runTest') {
         runTest();
+        event.preventDefault();
     }
     else if (event.data.type == 'replaceScript') {
         mode = 'script';
         replaceScript(event.data);
     }
+    else if (event.data.type == 'testBundle') {
+        if (event.data.id == lastBundleCommandId) {
+            testBundle(event.data.file);
+        }
+        else {
+            sendUserToast(`Bundle received ${lastBundleCommandId} was obsolete, ignoring`, true);
+        }
+    }
+    else if (event.data.type == 'testBundleError') {
+        sendUserToast(typeof event.data.error == 'object' ? JSON.stringify(event.data.error) : event.data.error, true);
+    }
     else if (event.data.type == 'replaceFlow') {
         mode = 'flow';
         lockChanges = true;
@@ -164,6 +178,39 @@ onMount(() => {
     });
     window.parent?.postMessage({ type: 'refresh' }, '*');
 });
+async function testBundle(file) {
+    testJobLoader?.abstractRun(async () => {
+        try {
+            const form = new FormData();
+            form.append('preview', JSON.stringify({
+                content: currentScript?.content,
+                kind: 'bundle',
+                path: currentScript?.path,
+                args,
+                language: currentScript?.language,
+                tag: currentScript?.tag
+            }));
+            form.append('file', file);
+            const url = '/api/w/' + workspace + '/jobs/run/preview_bundle';
+            const req = await fetch(url, {
+                method: 'POST',
+                body: form,
+                headers: {
+                    Authorization: 'Bearer ' + token
+                }
+            });
+            if (req.status != 201) {
+                throw Error(`Script snapshot creation was not successful: ${req.status} - ${req.statusText} - ${await req.text()}`);
+            }
+            return await req.text();
+        }
+        catch (e) {
+            sendUserToast(`Failed to send bundle ${e}`, true);
+            throw Error(e);
+        }
+    });
+    loadingCodebaseButton = false;
+}
 onDestroy(() => {
     window.removeEventListener('message', el);
     if (socket && socket.readyState === WebSocket.OPEN) {
@@ -200,8 +247,15 @@ function runTest() {
         if (!currentScript) {
             return;
         }
-        //@ts-ignore
-        testJobLoader.runPreview(currentScript.path, currentScript.content, currentScript.language, args, undefined, useLock ? currentScript.lock : undefined);
+        if (currentScript.isCodebase) {
+            loadingCodebaseButton = true;
+            lastBundleCommandId = Math.random().toString(36).substring(7);
+            window.parent?.postMessage({ type: 'testBundle', id: lastBundleCommandId }, '*');
+        }
+        else {
+            //@ts-ignore
+            testJobLoader.runPreview(currentScript.path, currentScript.content, currentScript.language, args, currentScript.tag, useLock ? currentScript.lock : undefined);
+        }
     }
     else {
         flowPreviewButtons?.openPreview();
@@ -219,10 +273,12 @@ async function loadPastTests() {
         scriptPathExact: currentScript.path
     });
 }
-function onKeyDown(event) {
-    if ((event.ctrlKey || event.metaKey) && event.key == 'Enter') {
-        event.preventDefault();
-        runTest();
+async function onKeyDown(event) {
+    if ((event.ctrlKey || event.metaKey) && event.code === 'KeyC') {
+        document.execCommand('copy');
+    }
+    else if ((event.ctrlKey || event.metaKey) && event.code === 'KeyX') {
+        document.execCommand('cut');
     }
 }
 let lastPath = undefined;
@@ -296,7 +352,8 @@ setContext('FlowEditorContext', {
     flowStore,
     testStepStore,
     saveDraft: () => { },
-    initialPath: ''
+    initialPath: '',
+    flowInputsStore: writable(undefined)
 });
 $: updateFlow($flowStore);
 let lastSent = undefined;
@@ -359,7 +416,9 @@ async function inferModuleArgs(selectedIdStore) {
 			</div>
 			<div class="text-center w-full text-lg truncate py-1 text-primary">
 				{currentScript?.path ?? 'Not editing a script'}
-				{currentScript?.language ?? ''}
+				<span class="text-2xs text-secondary">{currentScript?.language ?? ''}</span><span
+					class="text-2xs text-secondary">{currentScript?.isCodebase ? ' (codebase)' : ''}</span
+				>
 			</div>
 
 			<div class="absolute top-2 right-2 !text-tertiary text-xs">
@@ -396,7 +455,7 @@ async function inferModuleArgs(selectedIdStore) {
 					<Button
 						disabled={currentScript === undefined}
 						color="dark"
-						on:click={() => {
+						on:click={(e) => {
 							runTest()
 						}}
 						btnClasses="w-full"
@@ -407,7 +466,9 @@ async function inferModuleArgs(selectedIdStore) {
 						}}
 						shortCut={{ Icon: CornerDownLeft, hide: testIsLoading }}
 					>
-						{#if testIsLoading}
+						{#if loadingCodebaseButton}
+							Bundle is building...
+						{:else if testIsLoading}
 							Running
 						{:else}
 							Test
@@ -425,6 +486,7 @@ async function inferModuleArgs(selectedIdStore) {
 				</Pane>
 				<Pane size={67}>
 					<LogPanel
+						{workspace}
 						lang={currentScript?.language}
 						previewJob={testJob}
 						{pastPreviews}

package/package/components/DiffDrawer.svelte

@@ -4,7 +4,6 @@ import DiffEditor from './DiffEditor.svelte';
 import { scriptLangToEditorLang } from '../scripts';
 import Tabs from './common/tabs/Tabs.svelte';
 import Tab from './common/tabs/Tab.svelte';
-import { cloneDeep } from 'lodash';
 import { cleanValueProperties, orderedJsonStringify, orderedYamlStringify } from '../utils';
 let contentType = undefined;
 let diffType = undefined;
@@ -22,7 +21,7 @@ export function closeDrawer() {
     diffViewer.closeDrawer();
 }
 function prepareDiff(data) {
-    const metadata = cloneDeep(cleanValueProperties(data));
+    const metadata = structuredClone(cleanValueProperties(data));
     const content = metadata['content'];
     if (metadata['content'] !== undefined) {
         metadata['content'] = 'check content diff';

package/package/components/DiffEditor.svelte

@@ -24,6 +24,9 @@ let diffDivEl = null;
 let editorWidth = SIDE_BY_SIDE_MIN_WIDTH;
 async function loadDiffEditor() {
     await initializeVscode();
+    if (!diffDivEl) {
+        return;
+    }
     diffEditor = meditor.createDiffEditor(diffDivEl, {
         automaticLayout,
         renderSideBySide: editorWidth >= SIDE_BY_SIDE_MIN_WIDTH,