windmill-components 1.309.6 → 1.339.2

package/package/components/ObjectStoreConfigSettings.svelte

@@ -5,12 +5,17 @@ import { SettingService } from '../gen';
 import { sendUserToast } from '../toast';
 import TestConnection from './TestConnection.svelte';
 export let bucket_config = undefined;
+$: bucket_config?.type == 'S3' &&
+    bucket_config.allow_http == undefined &&
+    (bucket_config.allow_http = true);
 let loading = false;
 async function testConnection() {
     loading = true;
     try {
         if (bucket_config) {
-            await SettingService.testObjectStorageConfig({ requestBody: bucket_config });
+            await SettingService.testObjectStorageConfig({
+                requestBody: bucket_config
+            });
             sendUserToast('Connection successful', false);
         }
     }
@@ -129,6 +134,12 @@ async function testConnection() {
 			>
 			<input type="text" bind:value={bucket_config.endpoint} />
 		</label>
+		<div class="block pb-2">
+			<span class="text-tertiary text-2xs">Disable if using https only policy</span>
+			<div>
+				<Toggle bind:checked={bucket_config.allow_http} options={{ right: 'allow http' }} />
+			</div>
+		</div>
 	{:else if bucket_config.type === 'Azure'}
 		<label class="block pb-2">
 			<span class="text-primary font-semibold text-sm">Account Name</span>

package/package/components/ObjectStoreConfigSettings.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
             access_key: string;
             secret_key: string;
             endpoint: string;
+            allow_http?: boolean | undefined;
         } | {
             type: 'Azure';
             accountName: string;

package/package/components/ParqetTableRenderer.svelte

@@ -23,21 +23,17 @@ let datasource = {
                 searchCol: searchCol,
                 searchTerm: searchCol ? params.filterModel?.[searchCol]?.filter : undefined
             }));
-            const data = [];
-            res?.columns?.forEach((c) => {
-                c.values.forEach((v, i) => {
-                    if (data[i] == undefined) {
-                        data.push({ __index: params.startRow + i });
-                    }
-                    if (!$enterpriseLicense && params.startRow + i > 3) {
-                        data[i][c.name] = 'Require EE';
-                    }
-                    else {
-                        data[i][c.name] = v;
-                    }
-                });
-            });
-            params.successCallback(data);
+            for (let i = 0; i < res.rows.length; i++) {
+                res.rows[i]['__index'] = i + params.startRow;
+                if (!$enterpriseLicense) {
+                    Object.keys(res.rows[i]).forEach((key) => {
+                        if (key != '__index') {
+                            res.rows[i][key] = 'Require EE';
+                        }
+                    });
+                }
+            }
+            params.successCallback(res.rows);
         }
         catch (e) {
             console.error(e);
@@ -73,7 +69,7 @@ async function mountGrid() {
             // @ts-ignore
             columnDefs: res.columns.map((c) => {
                 return {
-                    field: c.name,
+                    field: c,
                     sortable: true,
                     filter: true,
                     filterParams: {

package/package/components/Password.svelte

@@ -43,6 +43,7 @@ $: red = required && (password == '' || password == undefined);
 		id="password"
 		type="password"
 		bind:value={password}
+		on:keydown
 		autocomplete="off"
 		{placeholder}
 		{disabled}

package/package/components/Password.svelte.d.ts

@@ -8,6 +8,8 @@ declare const __propDef: {
         small?: boolean | undefined;
     };
     events: {
+        keydown: KeyboardEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/PasswordArgInput.svelte

@@ -0,0 +1,49 @@
+<script>import { VariableService } from '../gen';
+import { userStore, workspaceStore } from '../stores';
+import { generateRandomString } from '../utils';
+import Password from './Password.svelte';
+export let value = undefined;
+export let disabled;
+let path = '';
+let password = value && !value.startsWith('$var:') ? value : '';
+async function generateValue() {
+    let npath = 'u/' +
+        ($userStore?.username ?? $userStore?.email)?.split('@')[0] +
+        '/secret_arg/' +
+        generateRandomString(12);
+    let nvalue = '$var:' + npath;
+    await VariableService.createVariable({
+        workspace: $workspaceStore,
+        requestBody: {
+            value: password,
+            is_secret: true,
+            path: npath,
+            description: ''
+        }
+    });
+    path = npath;
+    value = nvalue;
+}
+async function updateValue() {
+    await VariableService.updateVariable({
+        workspace: $workspaceStore,
+        path: path,
+        requestBody: {
+            value: password
+        }
+    });
+}
+let timeout = undefined;
+function debouncedUpdate() {
+    timeout && clearTimeout(timeout);
+    setTimeout(updateValue, 500);
+}
+$: password && debouncedUpdate();
+$: $workspaceStore &&
+    ($userStore?.username || $userStore?.email) &&
+    path == '' &&
+    password != '' &&
+    generateValue();
+</script>
+
+<Password {disabled} bind:password />

package/package/components/PasswordArgInput.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: string | undefined;
+        disabled: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PasswordArgInputProps = typeof __propDef.props;
+export type PasswordArgInputEvents = typeof __propDef.events;
+export type PasswordArgInputSlots = typeof __propDef.slots;
+export default class PasswordArgInput extends SvelteComponent<PasswordArgInputProps, PasswordArgInputEvents, PasswordArgInputSlots> {
+}
+export {};

package/package/components/PropertyRow.svelte

@@ -3,6 +3,7 @@ import { createEventDispatcher } from 'svelte';
 import SchemaEditorProperty from './SchemaEditorProperty.svelte';
 import { Button } from './common';
 import { Pen, Trash } from 'lucide-svelte';
+import { truncate } from '../utils';
 export let displayInfo;
 export let isAnimated;
 export let lightMode;
@@ -34,8 +35,15 @@ const indentStyle = depth > 0 ? `margin-left :${depth}rem` : '';
 	<SchemaEditorProperty property={displayInfo.property} />
 </td>
 {#if !lightMode}
-	<td>{displayInfo.property.default ? JSON.stringify(displayInfo.property.default) : ''}</td>
-	<td>{displayInfo.property.description ?? ''}</td>
+	<td class="truncate max-w-xs !text-2xs"
+		>{truncate(
+			displayInfo.property.default ? JSON.stringify(displayInfo.property.default) : '',
+			100
+		)}</td
+	>
+	<td class="truncate max-w-xs !text-2xs"
+		>{truncate(displayInfo.property.description ?? '', 100)}</td
+	>
 {/if}
 <td />
 <td class="justify-end flex">

package/package/components/QueueMetricsDrawer.svelte

@@ -0,0 +1,225 @@
+<script>import { Drawer, DrawerContent } from './common';
+import 'chartjs-adapter-date-fns';
+import { Line } from 'svelte-chartjs';
+import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement, LogarithmicScale, TimeScale } from 'chart.js';
+import { WorkerService } from '../gen';
+import { superadmin } from '../stores';
+import Skeleton from './common/skeleton/Skeleton.svelte';
+import DarkModeObserver from './DarkModeObserver.svelte';
+import Alert from './common/alert/Alert.svelte';
+export let drawer;
+let isOpen = false;
+let loading = true;
+const colorTuples = [
+    ['#7EB26D', 'rgba(126, 178, 109, 0.2)'],
+    ['#EAB839', 'rgba(234, 184, 57, 0.2)'],
+    ['#6ED0E0', 'rgba(110, 208, 224, 0.2)'],
+    ['#EF843C', 'rgba(239, 132, 60, 0.2)'],
+    ['#E24D42', 'rgba(226, 77, 66, 0.2)'],
+    ['#1F78C1', 'rgba(31, 120, 193, 0.2)'],
+    ['#BA43A9', 'rgba(186, 67, 169, 0.2)'],
+    ['#705DA0', 'rgba(112, 93, 160, 0.2)'],
+    ['#508642', 'rgba(80, 134, 66, 0.2)'],
+    ['#CCA300', 'rgba(204, 163, 0, 0.2)'],
+    ['#447EBC', 'rgba(68, 126, 188, 0.2)'],
+    ['#C15C17', 'rgba(193, 92, 23, 0.2)'],
+    ['#890F02', 'rgba(137, 15, 2, 0.2)'],
+    ['#666666', 'rgba(102, 102, 102, 0.2)'],
+    ['#44AA99', 'rgba(68, 170, 153, 0.2)'],
+    ['#6D8764', 'rgba(109, 135, 100, 0.2)'],
+    ['#555555', 'rgba(85, 85, 85, 0.2)'],
+    ['#B3B3B3', 'rgba(179, 179, 179, 0.2)'],
+    ['#008C9E', 'rgba(0, 140, 158, 0.2)'],
+    ['#6BBA70', 'rgba(107, 186, 112, 0.2)']
+];
+function getColors(labels) {
+    const colors = labels.map((_, i) => colorTuples[i % colorTuples.length]);
+    return Object.fromEntries(colors.map((c, i) => [labels[i], c]));
+}
+ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, TimeScale, LogarithmicScale);
+let countData = undefined;
+let delayData = undefined;
+let minDate = new Date();
+let noMetrics = false;
+function fillData(data, zero = 0) {
+    // fill holes with 0
+    const sorted = [];
+    for (const el of [
+        ...data,
+        {
+            created_at: new Date().toISOString(),
+            value: zero
+        }
+    ]) {
+        const last = sorted.length > 0 ? new Date(sorted[sorted.length - 1].created_at).getTime() : undefined;
+        const currentTs = new Date(el.created_at).getTime();
+        if (last && currentTs - last > 1000 * 60 * 2) {
+            const numElements = Math.floor((currentTs - last) / (1000 * 30));
+            for (let i = 1; i < numElements; i++) {
+                sorted.push({
+                    created_at: new Date(last + i * (1000 * 30)).toISOString(),
+                    value: zero
+                });
+            }
+        }
+        sorted.push(el);
+    }
+    // remove high frequency data points for similar values
+    const light = [];
+    for (const el of sorted) {
+        const last = light.length > 0 ? light[light.length - 1] : undefined;
+        if (!last ||
+            Math.abs((el.value - last.value) / last.value) > 0.1 ||
+            new Date(el.created_at).getTime() - new Date(last.created_at).getTime() > 1000 * 60 * 15) {
+            light.push(el);
+        }
+    }
+    return light;
+}
+async function loadMetrics() {
+    loading = true;
+    let metrics = await WorkerService.getQueueMetrics();
+    if (metrics.length == 0) {
+        noMetrics = true;
+        loading = false;
+        return;
+    }
+    const labels = metrics
+        .map((m) => m.id.slice(12))
+        .filter((v, i, a) => a.indexOf(v) === i)
+        .sort();
+    const labelColors = getColors(labels);
+    countData = {
+        datasets: metrics
+            .filter((m) => m.id.startsWith('queue_count_'))
+            .map((m) => {
+            const [color, bgColor] = labelColors[m.id.slice(12)];
+            return {
+                label: m.id.slice(12),
+                backgroundColor: bgColor,
+                borderColor: color,
+                data: fillData(m.values).map((v) => ({ x: v.created_at, y: v.value }))
+            };
+        })
+    };
+    delayData = {
+        datasets: metrics
+            .filter((m) => m.id.startsWith('queue_delay_'))
+            .map((m) => {
+            const [color, bgColor] = labelColors[m.id.slice(12)];
+            return {
+                label: m.id.slice(12),
+                borderColor: color,
+                backgroundColor: bgColor,
+                data: fillData(m.values, 1).map((v) => ({
+                    x: v.created_at,
+                    y: v.value
+                }))
+            };
+        })
+    };
+    minDate = new Date(Math.min(...countData.datasets.map((d) => new Date(d.data[0].x).getTime())));
+    loading = false;
+}
+$: if ($superadmin && isOpen) {
+    loadMetrics();
+}
+else {
+    countData = undefined;
+    delayData = undefined;
+}
+let darkMode = false;
+$: ChartJS.defaults.color = darkMode ? '#ccc' : '#666';
+$: ChartJS.defaults.borderColor = darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
+</script>
+
+<DarkModeObserver bind:darkMode />
+
+<Drawer bind:this={drawer} bind:open={isOpen}>
+	<DrawerContent title="Queue Metrics" on:close={drawer.closeDrawer}>
+		{#if loading}
+			<Skeleton layout={[[20]]} />
+		{:else if noMetrics}
+			<p class="text-secondary">No jobs delayed by more than 3 seconds in the last 14 days</p>
+		{:else}
+			<div class="flex flex-col gap-4">
+				{#if countData}
+					<Line
+						data={countData}
+						options={{
+							animation: false,
+							plugins: {
+								title: {
+									display: true,
+									text: 'Number of delayed jobs per tag (> 3s)'
+								}
+							},
+							scales: {
+								x: {
+									type: 'time',
+									min: minDate.toISOString(),
+									max: new Date().toISOString()
+								},
+								y: {
+									title: {
+										display: true,
+										text: 'count'
+									}
+								}
+							}
+						}}
+					/>
+				{/if}
+				{#if delayData}
+					<Line
+						data={delayData}
+						options={{
+							animation: false,
+							plugins: {
+								title: {
+									display: true,
+									text: 'Queue delay per tag (> 3s)'
+								},
+								tooltip: {
+									callbacks: {
+										label: function (context) {
+											// @ts-ignore
+											if (context.raw.y === 1) {
+												return context.dataset.label + ': 0'
+											} else {
+												// @ts-ignore
+												return context.dataset.label + ': ' + context.raw.y
+											}
+										}
+									}
+								}
+							},
+							scales: {
+								x: {
+									type: 'time',
+									min: minDate.toISOString(),
+									max: new Date().toISOString()
+								},
+
+								y: {
+									type: 'logarithmic',
+									title: {
+										display: true,
+										text: 'delay (s)'
+									},
+									ticks: {
+										callback: (value, _) => (value === 1 ? '0' : value)
+									}
+								}
+							}
+						}}
+					/>
+				{/if}
+				<Alert title="Info">
+					Only tags for jobs that have been delayed by more than 3 seconds in the last 14 days are
+					included in the graph.
+				</Alert>
+			</div>
+		{/if}
+	</DrawerContent>
+</Drawer>

package/package/components/QueueMetricsDrawer.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+import { Drawer } from './common';
+import 'chartjs-adapter-date-fns';
+declare const __propDef: {
+    props: {
+        drawer: Drawer;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type QueueMetricsDrawerProps = typeof __propDef.props;
+export type QueueMetricsDrawerEvents = typeof __propDef.events;
+export type QueueMetricsDrawerSlots = typeof __propDef.slots;
+export default class QueueMetricsDrawer extends SvelteComponent<QueueMetricsDrawerProps, QueueMetricsDrawerEvents, QueueMetricsDrawerSlots> {
+}
+export {};

package/package/components/ResourceEditor.svelte

@@ -190,6 +190,7 @@ function switchTab(asJson) {
 						<Skeleton layout={[[4]]} />
 					{:else if !viewJsonSchema && resourceSchema && resourceSchema?.properties}
 						<SchemaForm
+							onlyMaskPassword
 							noDelete
 							disabled={!can_write}
 							compact

package/package/components/ResourcePicker.svelte

@@ -3,7 +3,7 @@ import { workspaceStore } from '../stores';
 import { createEventDispatcher } from 'svelte';
 import Select from './apps/svelte-select/lib/index';
 import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults';
-import AppConnect from './AppConnect.svelte';
+import AppConnect from './AppConnectDrawer.svelte';
 import { Button } from './common';
 import ResourceEditor from './ResourceEditor.svelte';
 import DBSchemaExplorer from './DBSchemaExplorer.svelte';
@@ -47,11 +47,7 @@ async function loadResources(resourceType) {
         valueSelect = collection[0];
     }
 }
-$: {
-    if ($workspaceStore) {
-        loadResources(resourceType);
-    }
-}
+$: $workspaceStore && loadResources(resourceType);
 $: dispatch('change', value);
 let appConnect;
 let resourceEditor;
@@ -71,7 +67,6 @@ let darkMode = false;
 			type: valueType ?? ''
 		}
 	}}
-	newPageOAuth
 	bind:this={appConnect}
 />
 
@@ -86,6 +81,7 @@ let darkMode = false;
 		}
 	}}
 />
+
 <div class="flex flex-col w-full items-start">
 	<div class="flex flex-row gap-x-1 w-full">
 		<Select

package/package/components/ResultJobLoader.svelte

@@ -47,7 +47,7 @@ export async function abstractRun(fn, callbacks) {
         return testId;
     }
     catch (err) {
-        callbacks?.error();
+        callbacks?.error(err);
         // if error happens on submitting the job, reset UI state so the user can try again
         isLoading = false;
         currentId = undefined;
@@ -142,7 +142,7 @@ async function loadTestJob(id, callbacks) {
                     job = { ...maybe_job, id };
                     await tick();
                     if (!job?.success && typeof job?.result == 'object' && 'error' in (job?.result ?? {})) {
-                        callbacks?.error();
+                        callbacks?.error(job.result.error);
                         dispatch('doneError', {
                             id,
                             error: job.result.error

package/package/components/ResultJobLoader.svelte.d.ts

@@ -14,9 +14,9 @@ declare const __propDef: {
         isEditor?: boolean | undefined;
         allowConcurentRequests?: boolean | undefined;
         abstractRun?: ((fn: () => Promise<string>, callbacks?: {
-            done: (x: any[]) => void;
+            done: (x: any) => void;
             cancel: () => void;
-            error: () => void;
+            error: (err: Error) => void;
         } | undefined) => Promise<string>) | undefined;
         runScriptByPath?: ((path: string | undefined, args: Record<string, any>) => Promise<string>) | undefined;
         runFlowByPath?: ((path: string | undefined, args: Record<string, any>) => Promise<string>) | undefined;
@@ -24,9 +24,9 @@ declare const __propDef: {
         cancelJob?: (() => Promise<void>) | undefined;
         clearCurrentJob?: (() => Promise<void>) | undefined;
         watchJob?: ((testId: string, callbacks?: {
-            done: (x: any[]) => void;
+            done: (x: any) => void;
             cancel: () => void;
-            error: () => void;
+            error: (err: Error) => void;
         } | undefined) => Promise<void>) | undefined;
     };
     events: {
@@ -45,19 +45,19 @@ export type ResultJobLoaderEvents = typeof __propDef.events;
 export type ResultJobLoaderSlots = typeof __propDef.slots;
 export default class ResultJobLoader extends SvelteComponent<ResultJobLoaderProps, ResultJobLoaderEvents, ResultJobLoaderSlots> {
     get abstractRun(): (fn: () => Promise<string>, callbacks?: {
-        done: (x: any[]) => void;
+        done: (x: any) => void;
         cancel: () => void;
-        error: () => void;
+        error: (err: Error) => void;
     } | undefined) => Promise<string>;
     get runScriptByPath(): (path: string | undefined, args: Record<string, any>) => Promise<string>;
     get runFlowByPath(): (path: string | undefined, args: Record<string, any>) => Promise<string>;
-    get runPreview(): (path: string | undefined, code: string, lang: "python3" | "deno" | "go" | "bash" | "powershell" | "postgresql" | "mysql" | "bigquery" | "snowflake" | "mssql" | "graphql" | "nativets" | "bun", args: Record<string, any>, tag: string | undefined) => Promise<string>;
+    get runPreview(): (path: string | undefined, code: string, lang: "python3" | "deno" | "go" | "bash" | "powershell" | "postgresql" | "mysql" | "bigquery" | "snowflake" | "mssql" | "graphql" | "nativets" | "bun" | "php", args: Record<string, any>, tag: string | undefined) => Promise<string>;
     get cancelJob(): () => Promise<void>;
     get clearCurrentJob(): () => Promise<void>;
     get watchJob(): (testId: string, callbacks?: {
-        done: (x: any[]) => void;
+        done: (x: any) => void;
         cancel: () => void;
-        error: () => void;
+        error: (err: Error) => void;
     } | undefined) => Promise<void>;
 }
 export {};

package/package/components/S3FilePicker.svelte

@@ -372,7 +372,7 @@ function selectItem(index, toggleCollapsed = true) {
 						</p>
 						<p>
 							More info in <a
-								href="https://www.windmill.dev/docs/core_concepts/persistent_storage#connect-your-windmill-workspace-to-your-s3-bucket"
+								href="https://www.windmill.dev/docs/core_concepts/persistent_storage/large_data_files"
 								target="_blank">Windmill's documentation</a
 							></p
 						></Alert