windmill-components 1.309.7 → 1.352.0

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/RunChart.svelte

@@ -8,16 +8,22 @@ export let jobs = [];
 export let maxIsNow = false;
 export let minTimeSet = undefined;
 export let maxTimeSet = undefined;
+export let selectedIds = [];
 const dispatch = createEventDispatcher();
+const SUCCESS_COLOR = '#4ade80';
+// const SUCCESS_COLOR_TRANSPARENT = '#c9b638'
+const SUCCESS_COLOR_TRANSPARENT = mergeColors(SUCCESS_COLOR, getBackgorundColor(), 0.8);
+const FAIL_COLOR = '#f87171';
+const FAIL_COLOR_TRANSPARENT = mergeColors(FAIL_COLOR, getBackgorundColor(), 0.8);
 $: success = jobs?.filter((x) => x.success);
 $: failed = jobs?.filter((x) => !x.success);
 ChartJS.register(Title, Tooltip, Legend, zoomPlugin, LineElement, CategoryScale, LinearScale, LogarithmicScale, PointElement, TimeScale);
 $: data = {
-    labels: ['Duration'],
     datasets: [
         {
-            // borderColor: 'rgba(99,0,125, .2)',
-            backgroundColor: '#f87171',
+            borderColor: 'rgba(99,0,125, 0)',
+            backgroundColor: FAIL_COLOR,
+            radius: 3,
             label: 'Failed',
             data: failed?.map((job) => ({
                 x: job.started_at,
@@ -27,8 +33,9 @@ $: data = {
             })) ?? []
         },
         {
-            // borderColor: 'rgba(99,0,125, .2)',
-            backgroundColor: '#4ade80',
+            borderColor: 'rgba(99,0,125, 0)',
+            backgroundColor: SUCCESS_COLOR,
+            radius: 3,
             label: 'Successful',
             data: success?.map((job) => ({
                 x: job.started_at,
@@ -63,6 +70,44 @@ const zoomOptions = {
         }
     }
 };
+function getBackgorundColor() {
+    const isDark = document.documentElement.classList.contains('dark');
+    return isDark ? '#2e3440' : '#ffffff';
+}
+function hexToRgb(hexColor) {
+    hexColor = hexColor.replace(/^#/, '');
+    const r = parseInt(hexColor.substring(0, 2), 16);
+    const g = parseInt(hexColor.substring(2, 4), 16);
+    const b = parseInt(hexColor.substring(4, 6), 16);
+    return [r, g, b];
+}
+function rgbToHex(rgbColor) {
+    // Convert RGB components to hexadecimal string
+    return ('#' +
+        rgbColor
+            .map((c) => {
+            const hex = c.toString(16);
+            return hex.length === 1 ? '0' + hex : hex;
+        })
+            .join(''));
+}
+function mergeColors(color1, color2, slider) {
+    const rgb1 = hexToRgb(color1);
+    const rgb2 = hexToRgb(color2);
+    // Blend colors based on percentage
+    const blendedRgb = rgb1.map((c1, i) => Math.round(c1 * (1 - slider) + rgb2[i] * slider));
+    return rgbToHex(blendedRgb);
+}
+function highlightSelectedPoints(ids) {
+    if (ids.length === 0) {
+        data.datasets[0].backgroundColor = FAIL_COLOR;
+        data.datasets[1].backgroundColor = SUCCESS_COLOR;
+    }
+    else {
+        data.datasets[0].backgroundColor = data.datasets[0].data.map((p) => ids.includes(p.id) ? FAIL_COLOR : FAIL_COLOR_TRANSPARENT);
+        data.datasets[1].backgroundColor = data.datasets[1].data.map((p) => ids.includes(p.id) ? SUCCESS_COLOR : SUCCESS_COLOR_TRANSPARENT);
+    }
+}
 function getPath(x) {
     return x.path;
 }
@@ -131,6 +176,10 @@ $: scatterOptions = {
             }
         }
     },
+    onClick: (e, u) => {
+        const ids = u.map((j) => data.datasets[j.datasetIndex].data[j.index].id);
+        selectedIds = ids;
+    },
     scales: {
         x: {
             type: 'time',
@@ -153,6 +202,7 @@ $: scatterOptions = {
     },
     animation: false
 };
+$: data && scatterOptions && highlightSelectedPoints(selectedIds);
 </script>
 
 <!-- {JSON.stringify(minTime)}

package/package/components/RunChart.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         maxIsNow?: boolean | undefined;
         minTimeSet?: string | undefined;
         maxTimeSet?: string | undefined;
+        selectedIds?: string[] | undefined;
     };
     events: {
         zoom: CustomEvent<any>;

package/package/components/RunForm.svelte

@@ -56,7 +56,7 @@ $: cliCommand = `wmill ${isFlow ? 'flow' : 'script'} run ${runnable?.path} -d '$
 						<div class="flex items-center gap-2">
 							<span class="text-sm text-tertiary">
 								{#if runnable}
-									Edited <TimeAgo date={runnable.created_at || ''} /> by {runnable.created_by ||
+									Edited <TimeAgo withDate date={runnable.created_at || ''} /> by {runnable.created_by ||
 										'unknown'}
 								{/if}
 							</span>

package/package/components/S3FilePicker.svelte

@@ -62,7 +62,8 @@ async function loadFiles() {
         workspace: $workspaceStore,
         maxKeys: maxKeys,
         marker: page == 0 ? undefined : listMarkers[page - 1],
-        prefix: filter.trim() != '' ? filter : undefined
+        prefix: filter.trim() != '' ? filter : undefined,
+        storage: storage
     });
     if (availableFiles.restricted_access === null ||
         availableFiles.restricted_access === undefined ||
@@ -135,7 +136,8 @@ async function loadFileMetadataPlusPreviewAsync(fileKey) {
     fileInfoLoading = true;
     let fileMetadataRaw = await HelpersService.loadFileMetadata({
         workspace: $workspaceStore,
-        fileKey: fileKey
+        fileKey: fileKey,
+        storage: storage
     });
     if (fileMetadataRaw !== undefined) {
         fileMetadata = {
@@ -159,7 +161,8 @@ async function loadFilePreview(fileKey, fileSizeInBytes, fileMimeType) {
         csvSeparator: csvSeparatorChar,
         csvHasHeader: csvHasHeader,
         readBytesFrom: 0,
-        readBytesLength: 128 * 1024 // For now static limit of 128Kb per file
+        readBytesLength: 128 * 1024,
+        storage: storage
     });
     let filePreviewContent = filePreviewRaw.content;
     if (filePreviewContent !== null &&
@@ -187,7 +190,8 @@ async function deleteFileFromS3(fileKey) {
     try {
         await HelpersService.deleteS3File({
             workspace: $workspaceStore,
-            fileKey: fileKey
+            fileKey: fileKey,
+            storage: storage
         });
     }
     finally {
@@ -212,7 +216,8 @@ async function moveS3File(srcFileKey, destFileKey) {
         await HelpersService.moveS3File({
             workspace: $workspaceStore,
             srcFileKey: srcFileKey,
-            destFileKey: destFileKey
+            destFileKey: destFileKey,
+            storage: storage
         });
     }
     finally {
@@ -224,7 +229,9 @@ async function moveS3File(srcFileKey, destFileKey) {
     await loadFiles();
     await loadFileMetadataPlusPreviewAsync(selectedFileKey.s3);
 }
+let storage = undefined;
 export async function open(preSelectedFileKey = undefined) {
+    storage = preSelectedFileKey?.storage;
     if (preSelectedFileKey !== undefined) {
         initialFileKey = { ...preSelectedFileKey };
         selectedFileKey = { ...preSelectedFileKey };
@@ -245,11 +252,14 @@ async function reloadContent() {
         initialFileKeyInternalCopy = { ...initialFileKey };
     }
     try {
-        await HelpersService.datasetStorageTestConnection({ workspace: $workspaceStore });
+        await HelpersService.datasetStorageTestConnection({
+            workspace: $workspaceStore,
+            storage: storage
+        });
         workspaceSettingsInitialized = true;
     }
     catch (e) {
-        console.error('Workspace not connected to S3 bucket: ', e);
+        console.error('Workspace not connected to object storage: ', e);
         workspaceSettingsInitialized = false;
         return;
     }
@@ -372,7 +382,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
@@ -489,7 +499,9 @@ function selectItem(index, toggleCollapsed = true) {
 											title="Download file from S3"
 											variant="border"
 											color="light"
-											href={`/api/w/${$workspaceStore}/job_helpers/download_s3_file?file_key=${fileMetadata?.fileKey}`}
+											href={`/api/w/${$workspaceStore}/job_helpers/download_s3_file?file_key=${
+												fileMetadata?.fileKey
+											}${storage ? `&storage=${storage}` : ''}`}
 											download={fileMetadata?.fileKey.split('/').pop() ?? 'unnamed_download.file'}
 											startIcon={{ icon: Download }}
 											iconOnly={true}

package/package/components/S3FilePicker.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
         } | undefined;
         open?: ((preSelectedFileKey?: {
             s3: string;
+            storage: string | undefined;
         } | undefined) => Promise<void>) | undefined;
     };
     events: {
@@ -28,6 +29,7 @@ export type S3FilePickerSlots = typeof __propDef.slots;
 export default class S3FilePicker extends SvelteComponent<S3FilePickerProps, S3FilePickerEvents, S3FilePickerSlots> {
     get open(): (preSelectedFileKey?: {
         s3: string;
+        storage: string | undefined;
     } | undefined) => Promise<void>;
 }
 export {};

package/package/components/SavedInputs.svelte

@@ -1,7 +1,7 @@
 <script>import { Button } from './common';
 import { InputService } from '../gen/index.js';
 import { userStore, workspaceStore } from '../stores.js';
-import { classNames, displayDate, sendUserToast } from '../utils.js';
+import { classNames, displayDate, displayDateOnly, sendUserToast } from '../utils.js';
 import { createEventDispatcher } from 'svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
@@ -10,6 +10,7 @@ import Toggle from './Toggle.svelte';
 import Tooltip from './Tooltip.svelte';
 import TimeAgo from './TimeAgo.svelte';
 import JobLoader from './runs/JobLoader.svelte';
+import Skeleton from './common/skeleton/Skeleton.svelte';
 export let scriptHash = null;
 export let scriptPath = null;
 export let flowPath = null;
@@ -17,8 +18,8 @@ export let canSaveInputs = true;
 // Are the current Inputs valid and able to be saved?
 export let isValid;
 export let args;
-let previousInputs = [];
-let savedInputs = [];
+let previousInputs = undefined;
+let savedInputs = undefined;
 let selectedInput;
 let jobs = [];
 let loading = false;
@@ -69,7 +70,7 @@ async function saveInput(args) {
             is_public: false,
             ...requestBody
         };
-        savedInputs = [input, ...savedInputs];
+        savedInputs = [input, ...(savedInputs ?? [])];
     }
     catch (err) {
         console.error(err);
@@ -101,7 +102,7 @@ async function deleteInput(input) {
             workspace: $workspaceStore,
             input: input.id
         });
-        savedInputs = savedInputs.filter((i) => i.id !== input.id);
+        savedInputs = (savedInputs ?? []).filter((i) => i.id !== input.id);
         if (selectedInput === input) {
             selectedInput = null;
         }
@@ -121,6 +122,19 @@ $: {
 function selectArgs(selected_args) {
     dispatch('selected_args', selected_args);
 }
+async function loadLargeArgs(id) {
+    if (!id)
+        return;
+    largeArgs = await InputService.getArgsFromHistoryOrSavedInput({
+        jobOrInputId: id,
+        workspace: $workspaceStore
+    });
+}
+let hasLargeArgs = false;
+$: hasLargeArgs =
+    typeof selectedInput?.args === 'string' && selectedInput?.args === 'WINDMILL_TOO_BIG';
+let largeArgs = undefined;
+$: hasLargeArgs && loadLargeArgs(selectedInput?.id);
 </script>
 
 <JobLoader
@@ -130,7 +144,9 @@ function selectArgs(selected_args) {
 	jobKindsCat="jobs"
 	jobKinds="all"
 	user={null}
+	label={null}
 	folder={null}
+	concurrencyKey={null}
 	success="running"
 	argFilter={undefined}
 	bind:loading
@@ -164,7 +180,9 @@ function selectArgs(selected_args) {
 				</div>
 
 				<div class="w-full flex flex-col gap-2 h-full overflow-y-auto p">
-					{#if savedInputs.length > 0}
+					{#if savedInputs === undefined}
+						<Skeleton layout={[[8]]} />
+					{:else if savedInputs.length > 0}
 						{#each savedInputs as i}
 							<button
 								class={classNames(
@@ -262,7 +280,9 @@ function selectArgs(selected_args) {
 				<span class="text-sm font-semibold">Previous runs</span>
 
 				<div class="w-full flex flex-col gap-1 p-0 h-full overflow-y-auto">
-					{#if jobs.length > 0}
+					{#if loading}
+						<Skeleton layout={[[2]]} />
+					{:else if jobs.length > 0}
 						{#each jobs as i (i.id)}
 							<button
 								class={classNames(
@@ -303,7 +323,9 @@ function selectArgs(selected_args) {
 				</div>
 
 				<div class="w-full flex flex-col gap-1 p-0 h-full overflow-y-auto">
-					{#if previousInputs.length > 0}
+					{#if previousInputs === undefined}
+						<Skeleton layout={[[8]]} />
+					{:else if previousInputs.length > 0}
 						{#each previousInputs as i (i.id)}
 							<button
 								class={classNames(
@@ -328,11 +350,16 @@ function selectArgs(selected_args) {
 										{i.created_by}
 									</div>
 									<div
-										class="whitespace-nowrap col-span-3 !text-tertiary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
+										class="whitespace-nowrap col-span-2 !text-tertiary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
+									>
+										{displayDateOnly(new Date(i.created_at))}
+									</div>
+									<div
+										class="whitespace-nowrap col-span-2 !text-tertiary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
 									>
 										<TimeAgo date={i.created_at ?? ''} />
 									</div>
-									<div class="col-span-2">
+									<div class="col-span-1">
 										<a
 											target="_blank"
 											href="/run/{i.id}?workspace={$workspaceStore}"
@@ -362,15 +389,24 @@ function selectArgs(selected_args) {
 							btnClasses="w-full"
 							size="sm"
 							spacingSize="xl"
-							on:click={() => selectArgs(selectedInput?.args)}
-							disabled={Object.keys(selectedInput?.args || {}).length === 0}
+							on:click={() => selectArgs(hasLargeArgs ? largeArgs : selectedInput?.args)}
+							disabled={Object.keys(selectedInput?.args || {}).length === 0 ||
+								(hasLargeArgs && Object.keys(largeArgs || {}).length === 0)}
 						>
 							<ArrowLeftIcon class="w-4 h-4 mr-2" />
 							Use Input
 						</Button>
 					</div>
 					<div class="w-full min-h-0 grow overflow-auto">
-						{#if Object.keys(selectedInput?.args || {}).length > 0}
+						{#if hasLargeArgs}
+							{#if largeArgs}
+								<div class=" overflow-auto h-full p-2">
+									<ObjectViewer json={largeArgs} />
+								</div>
+							{:else}
+								<Skeleton layout={[[8]]} />
+							{/if}
+						{:else if Object.keys(selectedInput?.args || {}).length > 0}
 							<div class=" overflow-auto h-full p-2">
 								<ObjectViewer json={selectedInput?.args} />
 							</div>