windmill-components 1.537.1 → 1.542.5

package/package/components/PrefixedInput.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">"use strict";
+let { prefix = '', value = $bindable(''), placeholder = '', class: className = '', ...restProps } = $props();
+let inputElement = $state(null);
+let internalValue = $state(prefix + value);
+// Update internal value when prop changes
+$effect(() => {
+    internalValue = prefix + value;
+});
+function handleInput(e) {
+    const newValue = e.target.value;
+    // Ensure the value always starts with the prefix
+    if (newValue.startsWith(prefix)) {
+        internalValue = newValue;
+        value = newValue.slice(prefix.length);
+    }
+    else {
+        internalValue = prefix;
+        value = '';
+        // Reset cursor position
+        if (inputElement) {
+            inputElement.value = prefix;
+            inputElement.setSelectionRange(prefix.length, prefix.length);
+        }
+    }
+}
+function handleKeyDown(e) {
+    const cursorPos = e.target.selectionStart;
+    const selectionEnd = e.target.selectionEnd;
+    // Prevent backspace if cursor is at or before prefix end
+    if (e.key === 'Backspace') {
+        if (cursorPos <= prefix.length && selectionEnd <= prefix.length) {
+            e.preventDefault();
+        }
+        else if (cursorPos <= prefix.length && selectionEnd > prefix.length) {
+            // If selection spans across prefix, only delete after prefix
+            e.preventDefault();
+            const newValue = prefix + internalValue.slice(selectionEnd);
+            internalValue = newValue;
+            value = newValue.slice(prefix.length);
+            // Set cursor position after prefix
+            setTimeout(() => {
+                inputElement.setSelectionRange(prefix.length, prefix.length);
+            }, 0);
+        }
+    }
+    // Prevent delete key within prefix
+    if (e.key === 'Delete' && cursorPos < prefix.length) {
+        e.preventDefault();
+    }
+    // Prevent selecting all (Ctrl+A) from selecting the prefix
+    if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
+        e.preventDefault();
+        inputElement.setSelectionRange(prefix.length, internalValue.length);
+    }
+}
+function handleClick() {
+    // Prevent cursor from being placed within prefix
+    if ((inputElement.selectionStart ?? 0) < prefix.length) {
+        inputElement.setSelectionRange(prefix.length, prefix.length);
+    }
+}
+function handleFocus() {
+    // Ensure cursor starts after prefix when focusing
+    if ((inputElement.selectionStart ?? 0) < prefix.length) {
+        inputElement.setSelectionRange(prefix.length, prefix.length);
+    }
+}
+function handlePaste(e) {
+    e.preventDefault();
+    const pasteData = e.clipboardData.getData('text');
+    const cursorPos = inputElement.selectionStart ?? 0;
+    const selectionEnd = inputElement.selectionEnd ?? 0;
+    if (cursorPos < prefix.length) {
+        // Paste at the end of prefix
+        internalValue = prefix + pasteData + internalValue.slice(prefix.length);
+    }
+    else {
+        // Normal paste
+        internalValue =
+            internalValue.slice(0, cursorPos) + pasteData + internalValue.slice(selectionEnd);
+    }
+    value = internalValue.slice(prefix.length);
+    // Set cursor position after pasted content
+    const newCursorPos = Math.max(prefix.length, cursorPos) + pasteData.length;
+    setTimeout(() => {
+        inputElement.setSelectionRange(newCursorPos, newCursorPos);
+    }, 0);
+}
+</script>
+
+<input
+	bind:this={inputElement}
+	type="text"
+	{placeholder}
+	class="prefixed-input {className}"
+	value={internalValue}
+	oninput={handleInput}
+	onkeydown={handleKeyDown}
+	onclick={handleClick}
+	onfocus={handleFocus}
+	onpaste={handlePaste}
+	{...restProps}
+/>
+
+<style>
+	.prefixed-input {
+		/* Default styles - can be overridden by class prop */
+		padding: 8px 12px;
+		border: 1px solid #ccc;
+		border-radius: 4px;
+		font-size: 14px;
+		width: 100%;
+		box-sizing: border-box;
+	}
+
+	.prefixed-input:focus {
+		outline: none;
+		border-color: #4caf50;
+		box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
+	}</style>

package/package/components/PrefixedInput.svelte.d.ts

@@ -0,0 +1,8 @@
+declare const PrefixedInput: import("svelte").Component<{
+    prefix?: string;
+    value?: string;
+    placeholder?: string;
+    class?: string;
+} & Record<string, any>, {}, "value">;
+type PrefixedInput = ReturnType<typeof PrefixedInput>;
+export default PrefixedInput;

package/package/components/QueuePosition.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">import { JobService } from '../gen';
+import { workspaceStore } from '../stores';
+let { jobId, workspaceId, minimal = false } = $props();
+let queuePositionInterval;
+let queueState = $state(undefined);
+let fetchingQueuePosition = false;
+let workspace = $derived(workspaceId ?? $workspaceStore);
+let scheduledFor = $state(undefined);
+let scheduledForTimeout;
+$effect(() => {
+    if (jobId && workspace) {
+        clearTimeout(scheduledForTimeout);
+        queueState = undefined;
+        scheduledForTimeout = setTimeout(() => {
+            try {
+                JobService.getScheduledFor({
+                    workspace: workspace,
+                    id: jobId
+                }).then((response) => {
+                    scheduledFor = response;
+                });
+            }
+            catch (error) {
+                console.error('Failed to fetch scheduled for:', error);
+            }
+        }, 2000);
+    }
+});
+$effect(() => {
+    // Fetch queue position when loading and we have jobId
+    if (scheduledFor) {
+        // Initial fetch
+        fetchQueuePosition();
+        // Set up interval to refresh every 2 seconds
+        queuePositionInterval = setInterval(() => {
+            fetchQueuePosition();
+        }, 5000);
+    }
+    else {
+        // Clear interval when not loading
+        if (queuePositionInterval) {
+            clearInterval(queuePositionInterval);
+            queuePositionInterval = undefined;
+        }
+        queueState = undefined;
+    }
+    return () => {
+        if (queuePositionInterval) {
+            scheduledForTimeout && clearTimeout(scheduledForTimeout);
+            clearInterval(queuePositionInterval);
+        }
+    };
+});
+async function fetchQueuePosition() {
+    if (!workspace || !scheduledFor || fetchingQueuePosition)
+        return;
+    try {
+        fetchingQueuePosition = true;
+        queueState = await JobService.getQueuePosition({
+            workspace: workspace,
+            scheduledFor: scheduledFor
+        });
+    }
+    catch (error) {
+        console.error('Failed to fetch queue position:', error);
+        queueState = undefined;
+    }
+    finally {
+        fetchingQueuePosition = false;
+    }
+}
+</script>
+
+{#if queueState}
+	<div class="text-small ml-4">
+		<span class="text-orange-600">Queue position: <b>{queueState.position}</b></span>
+		{#if !minimal}
+			<span class="ml-2 text-tertiary">(Waiting for an available worker)</span>
+		{/if}
+	</div>
+{/if}

package/package/components/QueuePosition.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    jobId: string;
+    workspaceId?: string | undefined;
+    minimal?: boolean;
+};
+declare const QueuePosition: import("svelte").Component<$$ComponentProps, {}, "">;
+type QueuePosition = ReturnType<typeof QueuePosition>;
+export default QueuePosition;

package/package/components/ResourceNarrowing.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">import ResourceTypePicker from './ResourceTypePicker.svelte';
+let { format = $bindable() } = $props();
+let resource = $state(format?.startsWith('resource-') ? format.substring('resource-'.length) : undefined);
+</script>
+
+<ResourceTypePicker
+	on:click={(e) => {
+		resource = e.detail
+		format = `resource-${resource ?? ''}`
+	}}
+	value={resource}
+	nonePickable={true}
+/>

package/package/components/ResourceNarrowing.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    format: string | undefined;
+}
+declare const ResourceNarrowing: import("svelte").Component<Props, {}, "format">;
+type ResourceNarrowing = ReturnType<typeof ResourceNarrowing>;
+export default ResourceNarrowing;

package/package/components/ResourceTypePicker.svelte

@@ -3,8 +3,6 @@ import { ResourceService } from '../gen';
 import { workspaceStore } from '../stores';
 import IconedResourceType from './IconedResourceType.svelte';
 import { Button, ClearableInput } from './common';
-import Popover from './meltComponents/Popover.svelte';
-import { offset, flip, shift } from 'svelte-floating-ui/dom';
 import Label from './Label.svelte';
 import Tooltip from './Tooltip.svelte';
 import Badge from './common/badge/Badge.svelte';
@@ -30,84 +28,61 @@ let search = $state('');
 let filteredResources = $derived(resources.filter((r) => r.toLowerCase().includes(search.toLowerCase())));
 </script>
 
-<Label label="Resource type" class="w-full col-span-2">
+<Label label="Resource type" class="w-full mb-4">
 	{#snippet header()}
 		<Tooltip light small>Select a resource type to narrow down the object type.</Tooltip>
+
+		<div class="flex flex-row items-center w-full justify-between">
+			<Badge color={!value ? 'gray' : 'blue'}>
+				{value ?? 'None'}
+			</Badge>
+		</div>
 	{/snippet}
 
-	{#snippet action()}
-		<div class="flex flex-row gap-1">
-			<Button
-				size="xs"
-				color="light"
-				on:click={() => onClick(undefined)}
-				disabled={notPickable || value === undefined}
-			>
-				Clear
-			</Button>
-			<Popover
-				floatingConfig={{
-					strategy: 'fixed',
-					placement: 'left-end',
-					middleware: [offset(8), flip(), shift()]
-				}}
-				contentClasses="flex flex-col gap-2 h-full p-4 max-h-[40vh] w-[500px]"
-			>
-				{#snippet trigger()}
-					<Button nonCaptureEvent size="xs" color="dark">Select resource type</Button>
-				{/snippet}
-				{#snippet content({ close })}
-					<ClearableInput bind:value={search} placeholder="Search resource..." />
+	<div class="mt-2">
+		<ClearableInput bind:value={search} placeholder="Search resource..." />
 
-					<div class="overflow-y-scroll h-full">
-						<div
-							class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center overflow-x-hidden"
-						>
-							{#if nonePickable && search === ''}
-								{@const isPicked = value === undefined}
-								<Button
-									size="sm"
-									variant="border"
-									color={isPicked ? 'blue' : 'dark'}
-									btnClasses={isPicked ? '!border-2' : 'm-[1px]'}
-									disabled={notPickable}
-									on:click={() => {
-										onClick(undefined)
-										close()
-									}}
-								>
-									None
-								</Button>
-							{/if}
-							{#each filteredResources as r}
-								{@const isPicked = value === r}
-								<Button
-									size="sm"
-									variant="border"
-									color={isPicked ? 'blue' : 'light'}
-									btnClasses={isPicked ? '!border-2' : 'm-[1px]'}
-									disabled={notPickable}
-									on:click={() => {
-										onClick(r)
-										close()
-									}}
-								>
-									<IconedResourceType name={r} after={true} width="20px" height="20px" />
-								</Button>
-							{/each}
+		<div class="overflow-y-scroll max-h-[330px] h-full mt-1">
+			<div
+				class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center overflow-x-hidden"
+			>
+				{#if nonePickable && search === ''}
+					{@const isPicked = value === undefined}
+					<Button
+						size="sm"
+						variant="border"
+						color={isPicked ? 'blue' : 'light'}
+						btnClasses={isPicked ? '!border-2' : 'm-[1px]'}
+						disabled={notPickable}
+						on:click={() => {
+							onClick(undefined)
+							close()
+						}}
+					>
+						None
+					</Button>
+				{/if}
+				{#each filteredResources as r}
+					{@const isPicked = value === r}
+					<Button
+						size="sm"
+						variant="border"
+						color={isPicked ? 'blue' : 'light'}
+						btnClasses={isPicked ? '!border-2' : 'm-[1px]'}
+						disabled={notPickable}
+						on:click={() => {
+							onClick(r)
+							close()
+						}}
+					>
+						<IconedResourceType name={r} after={true} width="20px" height="20px" />
+					</Button>
+				{/each}
 
-							{#if filteredResources.length === 0 && search !== ''}
-								<div class="text-tertiary text-sm">No resources found</div>
-							{/if}
-						</div>
-					</div>
-				{/snippet}
-			</Popover>
+				{#if filteredResources.length === 0 && search !== ''}
+					<div class="text-tertiary text-sm">No resources found</div>
+				{/if}
+			</div>
 		</div>
-	{/snippet}
-	<div class="flex flex-row items-center w-full justify-between">
-		<Badge color={!value ? 'gray' : 'blue'}>
-			{value ?? 'None'}
-		</Badge>
 	</div>
 </Label>

package/package/components/RunChart.svelte

@@ -2,60 +2,23 @@
 import zoomPlugin from 'chartjs-plugin-zoom';
 import Tooltip2 from './Tooltip.svelte';
 import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement, TimeScale, LogarithmicScale } from 'chart.js';
-import { createEventDispatcher } from 'svelte';
 import { getDbClockNow } from '../forLater';
 import Button from './common/button/Button.svelte';
 import { Scatter } from './chartjs-wrappers/chartJs';
-export let jobs = [];
-export let maxIsNow = false;
-export let minTimeSet = undefined;
-export let maxTimeSet = undefined;
-export let selectedIds = [];
-export let canSelect = true;
-export let lastFetchWentToEnd = false;
-const dispatch = createEventDispatcher();
+import DarkModeObserver from './DarkModeObserver.svelte';
+let { jobs = [], maxIsNow = false, minTimeSet = undefined, maxTimeSet = undefined, selectedIds = $bindable([]), canSelect = true, lastFetchWentToEnd = false, onPointClicked, onLoadExtra, onZoom } = $props();
 const SUCCESS_COLOR = '#4ade80';
 // const SUCCESS_COLOR_TRANSPARENT = '#c9b638'
-const SUCCESS_COLOR_TRANSPARENT = mergeColors(SUCCESS_COLOR, getBackgorundColor(), 0.8);
+const SUCCESS_COLOR_TRANSPARENT = $derived(mergeColors(SUCCESS_COLOR, getBackgroundColor(), 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);
+const FAIL_COLOR_TRANSPARENT = $derived(mergeColors(FAIL_COLOR, getBackgroundColor(), 0.8));
 ChartJS.register(Title, Tooltip, Legend, zoomPlugin, LineElement, CategoryScale, LinearScale, LogarithmicScale, PointElement, TimeScale);
-$: data = {
-    datasets: [
-        {
-            borderColor: 'rgba(99,0,125, 0)',
-            backgroundColor: FAIL_COLOR,
-            radius: 3,
-            label: 'Failed',
-            data: failed?.map((job) => ({
-                x: job.started_at,
-                y: job.duration_ms,
-                id: job.id,
-                path: job.script_path
-            })) ?? []
-        },
-        {
-            borderColor: 'rgba(99,0,125, 0)',
-            backgroundColor: SUCCESS_COLOR,
-            radius: 3,
-            label: 'Successful',
-            data: success?.map((job) => ({
-                x: job.started_at,
-                y: job.duration_ms,
-                id: job.id,
-                path: job.script_path
-            })) ?? []
-        }
-    ]
-};
 const zoomOptions = {
     pan: {
         enabled: true,
         modifierKey: 'ctrl',
         onPanComplete: ({ chart }) => {
-            dispatch('zoom', {
+            onZoom({
                 min: addSeconds(new Date(chart.scales.x.min), -1),
                 max: addSeconds(new Date(chart.scales.x.max), 1)
             });
@@ -67,20 +30,20 @@ const zoomOptions = {
         },
         mode: 'x',
         onZoom: ({ chart }) => {
-            dispatch('zoom', {
+            onZoom({
                 min: addSeconds(new Date(chart.scales.x.min), -1),
                 max: addSeconds(new Date(chart.scales.x.max), 1)
             });
         }
     }
 };
-function isDark() {
-    return document.documentElement.classList.contains('dark');
-}
-ChartJS.defaults.color = isDark() ? '#ccc' : '#666';
-ChartJS.defaults.borderColor = isDark() ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
-function getBackgorundColor() {
-    return isDark() ? '#2e3440' : '#ffffff';
+let darkMode = $state(false);
+$effect(() => {
+    ChartJS.defaults.color = darkMode ? '#ccc' : '#666';
+    ChartJS.defaults.borderColor = darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
+});
+function getBackgroundColor() {
+    return darkMode ? '#2e3440' : '#ffffff';
 }
 function hexToRgb(hexColor) {
     hexColor = hexColor.replace(/^#/, '');
@@ -106,22 +69,9 @@ function mergeColors(color1, color2, slider) {
     const blendedRgb = rgb1.map((c1, i) => Math.round(c1 * (1 - slider) + rgb2[i] * slider));
     return rgbToHex(blendedRgb);
 }
-function highlightSelectedPoints(ids) {
-    if (!canSelect || 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;
 }
-let minTime = addSeconds(new Date(), -300);
-let maxTime = getDbClockNow();
-$: computeMinMaxTime(jobs, minTimeSet, maxTimeSet);
 function minJobTime(jobs) {
     let min = new Date(jobs[0].started_at);
     for (const job of jobs) {
@@ -147,31 +97,69 @@ function computeMinMaxTime(jobs, minTimeSet, maxTimeSet) {
     let minTimeSetDate = minTimeSet ? new Date(minTimeSet) : undefined;
     let maxTimeSetDate = maxTimeSet ? new Date(maxTimeSet) : undefined;
     if (minTimeSetDate && maxTimeSetDate) {
-        minTime = minTimeSetDate;
-        maxTime = maxTimeSetDate;
-        return;
+        return { minTime: minTimeSetDate, maxTime: maxTimeSetDate };
     }
     if (jobs == undefined || jobs?.length == 0) {
-        minTime = minTimeSetDate ?? addSeconds(new Date(), -300);
-        maxTime = maxTimeSetDate ?? getDbClockNow();
-        return;
+        const computedMinTime = minTimeSetDate ?? addSeconds(new Date(), -300);
+        const computedMaxTime = maxTimeSetDate ?? getDbClockNow();
+        return { minTime: computedMinTime, maxTime: computedMaxTime };
     }
     const maxJob = maxIsNow ? getDbClockNow() : maxJobTime(jobs);
     const minJob = minJobTime(jobs);
     const diff = (maxJob.getTime() - minJob.getTime()) / 20000;
-    minTime = minTimeSetDate ?? addSeconds(minJob, -diff);
-    if (maxIsNow) {
-        maxTime = maxTimeSetDate ?? maxJob;
-    }
-    else {
-        maxTime = maxTimeSetDate ?? addSeconds(maxJob, diff);
-    }
+    let computedMinTime = minTimeSetDate ?? addSeconds(minJob, -diff);
+    let computedMaxTime = maxIsNow
+        ? (maxTimeSetDate ?? maxJob)
+        : (maxTimeSetDate ?? addSeconds(maxJob, diff));
+    return { minTime: computedMinTime, maxTime: computedMaxTime };
 }
 function addSeconds(date, seconds) {
     date.setTime(date.getTime() + seconds * 1000);
     return date;
 }
-$: scatterOptions = {
+let success = $derived(jobs?.filter((x) => x.success));
+let failed = $derived(jobs?.filter((x) => !x.success));
+let data = $derived.by(() => {
+    const data = {
+        datasets: [
+            {
+                borderColor: 'rgba(99,0,125, 0)',
+                backgroundColor: FAIL_COLOR,
+                radius: 3,
+                label: 'Failed',
+                data: failed?.map((job) => ({
+                    x: job.started_at,
+                    y: job.duration_ms,
+                    id: job.id,
+                    path: job.script_path
+                })) ?? []
+            },
+            {
+                borderColor: 'rgba(99,0,125, 0)',
+                backgroundColor: SUCCESS_COLOR,
+                radius: 3,
+                label: 'Successful',
+                data: success?.map((job) => ({
+                    x: job.started_at,
+                    y: job.duration_ms,
+                    id: job.id,
+                    path: job.script_path
+                })) ?? []
+            }
+        ]
+    };
+    if (!canSelect || selectedIds.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) => selectedIds.includes(p.id) ? FAIL_COLOR : FAIL_COLOR_TRANSPARENT);
+        data.datasets[1].backgroundColor = data.datasets[1].data.map((p) => selectedIds.includes(p.id) ? SUCCESS_COLOR : SUCCESS_COLOR_TRANSPARENT);
+    }
+    return data;
+});
+const minMaxTime = $derived.by(() => computeMinMaxTime(jobs, minTimeSet, maxTimeSet));
+let scatterOptions = $derived({
     responsive: true,
     maintainAspectRatio: false,
     plugins: {
@@ -187,11 +175,11 @@ $: scatterOptions = {
             }
         }
     },
-    onClick: (e, u) => {
+    onClick: (_e, u) => {
         if (canSelect) {
             const ids = u.map((j) => data.datasets[j.datasetIndex].data[j.index].id);
             selectedIds = ids;
-            dispatch('pointClicked', ids);
+            onPointClicked(ids);
         }
     },
     scales: {
@@ -200,8 +188,8 @@ $: scatterOptions = {
             grid: {
                 display: false
             },
-            min: minTime,
-            max: maxTime
+            min: minMaxTime.minTime,
+            max: minMaxTime.maxTime
         },
         y: {
             grid: {
@@ -215,10 +203,11 @@ $: scatterOptions = {
         }
     },
     animation: false
-};
-$: data && scatterOptions && highlightSelectedPoints(selectedIds);
+});
 </script>
 
+<DarkModeObserver bind:darkMode />
+
 <!-- {JSON.stringify(minTime)}
 {JSON.stringify(maxTime)}
 
@@ -228,12 +217,8 @@ $: data && scatterOptions && highlightSelectedPoints(selectedIds);
 <!-- {JSON.stringify(jobs?.map((x) => x.started_at))} -->
 <div class="relative max-h-40">
 	{#if !lastFetchWentToEnd}
-		<div class="absolute top-[-10px] left-[60px]"
-			><Button
-				size="xs"
-				color="transparent"
-				variant="contained"
-				on:click={() => dispatch('loadExtra')}
+		<div class="absolute top-[-26px] left-[160px]"
+			><Button size="xs" color="transparent" variant="contained" on:click={() => onLoadExtra()}
 				>Load more <Tooltip2
 					>There are more jobs to load but only the first 1000 were fetched</Tooltip2
 				></Button