windmill-components 1.339.2 → 1.352.0

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;
     }
@@ -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/ScheduleEditorInner.svelte

@@ -18,6 +18,7 @@ import Section from './Section.svelte';
 import { List, Loader2, Save } from 'lucide-svelte';
 import FlowRetries from './flows/content/FlowRetries.svelte';
 import WorkerTagPicker from './WorkerTagPicker.svelte';
+import Label from './Label.svelte';
 let optionTabSelected = 'error_handler';
 let is_flow = false;
 let initialPath = '';
@@ -412,16 +413,16 @@ let dirtyPath = false;
 		</svelte:fragment>
 
 		<div class="flex flex-col gap-12">
-			<div>
+			<div class="flex flex-col gap-4">
 				<div>
-					<h2 class="text-base font-semibold">Metadata</h2>
-					<div class="w-full py-2">
+					<h2 class="text-base font-semibold mb-2">Metadata</h2>
+					<Label label="Summary">
 						<!-- svelte-ignore a11y-autofocus -->
 						<input
 							autofocus
 							type="text"
-							placeholder="Schedule summary"
-							class="text-sm w-full font-semibold"
+							placeholder="Short summary to be displayed when listed"
+							class="text-sm w-full"
 							bind:value={summary}
 							on:keyup={() => {
 								if (!edit && summary?.length > 0 && !dirtyPath) {
@@ -435,40 +436,42 @@ let dirtyPath = false;
 								}
 							}}
 						/>
-					</div>
+					</Label>
 				</div>
-				{#if !edit}
-					<Path
-						bind:dirty={dirtyPath}
-						bind:this={pathC}
-						checkInitialPathExistence
-						bind:error={pathError}
-						bind:path
-						{initialPath}
-						namePlaceholder="schedule"
-						kind="schedule"
-					/>
-				{:else}
-					<div class="flex justify-start w-full">
-						<Badge
-							color="gray"
-							class="center-center !bg-surface-secondary !text-tertiary  !h-[24px] rounded-r-none border"
-						>
-							Schedule path (not editable)
-						</Badge>
-						<input
-							type="text"
-							readonly
-							value={path}
-							size={path?.length || 50}
-							class="font-mono !text-xs grow shrink overflow-x-auto !h-[24px] !py-0 !border-l-0 !rounded-l-none"
-							on:focus={({ currentTarget }) => {
-								currentTarget.select()
-							}}
+				<Label label="Path">
+					{#if !edit}
+						<Path
+							bind:dirty={dirtyPath}
+							bind:this={pathC}
+							checkInitialPathExistence
+							bind:error={pathError}
+							bind:path
+							{initialPath}
+							namePlaceholder="schedule"
+							kind="schedule"
 						/>
-						<!-- <span class="font-mono text-sm break-all">{path}</span> -->
-					</div>
-				{/if}
+					{:else}
+						<div class="flex justify-start w-full">
+							<Badge
+								color="gray"
+								class="center-center !bg-surface-secondary !text-tertiary  !h-[24px] rounded-r-none border"
+							>
+								Schedule path (not editable)
+							</Badge>
+							<input
+								type="text"
+								readonly
+								value={path}
+								size={path?.length || 50}
+								class="font-mono !text-xs grow shrink overflow-x-auto !h-[24px] !py-0 !border-l-0 !rounded-l-none"
+								on:focus={({ currentTarget }) => {
+									currentTarget.select()
+								}}
+							/>
+							<!-- <span class="font-mono text-sm break-all">{path}</span> -->
+						</div>
+					{/if}
+				</Label>
 			</div>
 
 			<Section label="Schedule">