windmill-components 1.377.8 → 1.379.3

package/package/components/apps/utils.js

@@ -127,13 +127,40 @@ export function buildExtraLib(components, idToExclude, state, goto) {
     const cs = Object.entries(components)
         .filter(([k, v]) => k != idToExclude && k != 'state')
         .map(([k, v]) => [k, Object.fromEntries(Object.entries(v).map(([k, v]) => [k, v.peak()]))])
-        .map(([k, v]) => `declare const ${k}: ${JSON.stringify(v)};
+        .map(([k, v]) => `declare const ${k}: WidenRo<${JSON.stringify(v)}>;
 `)
         .join('\n');
-    return `${cs}
+    return `
+
+type Widen<T> = T extends string
+  ? string
+  : T extends number
+  ? number
+  : T extends boolean
+  ? boolean
+  : T extends Array<infer U>
+  ? Array<Widen<U>>
+  : T extends object
+  ? Partial<{ [K in keyof T]: Widen<T[K]> } & {[key: string]: any}>
+  : T;
+
+type WidenRo<T> = T extends string
+  ? string
+  : T extends number
+  ? number
+  : T extends boolean
+  ? boolean
+  : T extends Array<infer U>
+  ? Readonly<Array<WidenRo<U>>>
+  : T extends object
+  ? Readonly<{ [K in keyof T]: WidenRo<T[K]> }>
+  : T;
+
 
 /** The mutable state of the app */
-declare const state: ${JSON.stringify(state)} & {[key: string]: any};
+declare const state: Widen<${JSON.stringify(state)}> & {[key: string]: any};
+
+${cs}
 
 ${goto
         ? `

package/package/components/common/drawer/Drawer.svelte

@@ -57,7 +57,7 @@ onMount(() => {
 		on:close
 	>
 		<aside
-			class="windmill-app drawer windmill-drawer {$$props.class ?? ''} {$$props.positionClass ??
+			class="drawer windmill-app windmill-drawer {$$props.class ?? ''} {$$props.positionClass ??
 				''}"
 			class:open
 			class:close={!open && timeout}

package/package/components/common/table/AppRow.svelte

@@ -11,9 +11,10 @@ import Badge from '../badge/Badge.svelte';
 import { ExternalLink, Eye, File, FileJson, FileUp, GitFork, Globe, History, Pen, Share, Trash, Clipboard } from 'lucide-svelte';
 import { goto as gotoUrl } from '$app/navigation';
 import { page } from '$app/stores';
-import { DELETE, copyToClipboard, isDeployable } from '../../../utils';
+import { DELETE, copyToClipboard } from '../../../utils';
 import AppDeploymentHistory from '../../apps/editor/AppDeploymentHistory.svelte';
 import AppJsonEditor from '../../apps/editor/AppJsonEditor.svelte';
+import { isDeployable } from '../../../utils_deployable';
 export let app;
 export let marked;
 export let starred;

package/package/components/common/table/FlowRow.svelte

@@ -11,7 +11,8 @@ import Button from '../button/Button.svelte';
 import Row from './Row.svelte';
 import DraftBadge from '../../DraftBadge.svelte';
 import { sendUserToast } from '../../../toast';
-import { DELETE, copyToClipboard, isDeployable, isOwner } from '../../../utils';
+import { DELETE, copyToClipboard, isOwner } from '../../../utils';
+import { isDeployable } from '../../../utils_deployable';
 import { Pen, GitFork, Trash, List, FileUp, Globe, Calendar, Share, Archive, Clipboard, Eye, HistoryIcon } from 'lucide-svelte';
 import FlowHistory from '../../flows/FlowHistory.svelte';
 export let flow;

package/package/components/common/table/RawAppRow.svelte

@@ -11,7 +11,7 @@ import DrawerContent from '../drawer/DrawerContent.svelte';
 import FileInput from '../fileInput/FileInput.svelte';
 import { goto } from '../../../navigation';
 import { FileUp, Globe, Pen, Share, Trash } from 'lucide-svelte';
-import { isDeployable } from '../../../utils';
+import { isDeployable } from '../../../utils_deployable';
 export let app;
 export let marked;
 export let starred;

package/package/components/common/table/ScriptRow.svelte

@@ -11,7 +11,8 @@ import Button from '../button/Button.svelte';
 import Row from './Row.svelte';
 import DraftBadge from '../../DraftBadge.svelte';
 import { sendUserToast } from '../../../toast';
-import { copyToClipboard, DELETE, isDeployable, isOwner } from '../../../utils';
+import { copyToClipboard, DELETE, isOwner } from '../../../utils';
+import { isDeployable } from '../../../utils_deployable';
 import { LanguageIcon } from '../languageIcons';
 import { Archive, Calendar, Code, Copy, Eye, FileUp, GitFork, List, Pen, Share, Trash, History } from 'lucide-svelte';
 import ScriptVersionHistory from '../../ScriptVersionHistory.svelte';

package/package/components/flows/previousResults.js

@@ -106,6 +106,7 @@ declare const error: {
 	message: string
 	name: string
 	stack: string
+	step_id: string
 }
 
 /**

package/package/components/jobs/JobPreview.svelte

@@ -131,7 +131,7 @@ onDestroy(() => {
 						duration={job?.['duration_ms']}
 						mem={job?.['mem_peak']}
 						content={job?.logs}
-						isLoading
+						isLoading={job?.['running'] == false}
 						tag={job?.tag}
 					/>
 				{/if}

package/package/components/propertyPicker/PropPicker.svelte

@@ -91,7 +91,8 @@ async function loadResources() {
 						error: {
 							message: 'The error message',
 							name: 'The error name',
-							stack: 'The error stack'
+							stack: 'The error stack',
+							step_id: 'The step id'
 						}
 					}}
 					on:select

package/package/components/runs/JobLoader.svelte

@@ -21,6 +21,7 @@ export let minTs = undefined;
 export let maxTs = undefined;
 export let jobKinds = '';
 export let queue_count = undefined;
+export let suspended_count = undefined;
 export let autoRefresh = true;
 export let completedJobs = undefined;
 export let externalJobs = undefined;
@@ -50,6 +51,7 @@ $: ($workspaceStore ||
         lookback &&
         user &&
         folder &&
+        schedulePath != undefined &&
         showFutureJobs != undefined &&
         showSchedules != undefined &&
         allWorkspaces != undefined &&
@@ -119,16 +121,17 @@ async function fetchJobs(startedBefore, startedAfter, startedAfterCompletedJobs)
             scriptPathStart: scriptPathStart,
             jobKinds,
             success: success == 'success' ? true : success == 'failure' ? false : undefined,
-            running: success == 'running' ? true : undefined,
+            running: (success == 'running' || success == 'suspended') ? true : (success == 'waiting') ? false : undefined,
             isSkipped: isSkipped ? undefined : false,
             // isFlowStep: jobKindsCat != 'all' ? false : undefined,
-            hasNullParent: scriptPathExact != undefined || scriptPathStart != undefined || jobKinds != 'all'
+            hasNullParent: scriptPathExact != undefined || scriptPathStart != undefined || jobKindsCat != 'all'
                 ? true
                 : undefined,
             label: label === null || label === '' ? undefined : label,
             tag: tag === null || tag === '' ? undefined : tag,
             isNotSchedule: showSchedules == false ? true : undefined,
-            scheduledForBeforeNow: showFutureJobs == false ? true : undefined,
+            suspended: success == 'waiting' ? false : success == 'suspended' ? true : undefined,
+            scheduledForBeforeNow: showFutureJobs == false || (success == 'waiting' || success == 'suspended') ? true : undefined,
             args: argFilter && argFilter != '{}' && argFilter != '' && argError == ''
                 ? argFilter
                 : undefined,
@@ -256,16 +259,25 @@ async function loadJobsIntern(shouldGetCount) {
     loading = false;
 }
 async function getCount() {
-    const qc = (await JobService.getQueueCount({ workspace: $workspaceStore, allWorkspaces }))
-        .database_length;
+    const { database_length, suspended } = (await JobService.getQueueCount({ workspace: $workspaceStore, allWorkspaces }));
     if (queue_count) {
-        queue_count.set(qc);
+        queue_count.set(database_length);
+    }
+    else {
+        queue_count = tweened(database_length, { duration: 1000 });
+    }
+    if (suspended_count) {
+        suspended_count.set(suspended ?? 0);
     }
     else {
-        queue_count = tweened(qc, { duration: 1000 });
+        suspended_count = tweened(suspended ?? 0, { duration: 1000 });
     }
 }
 async function syncer() {
+    if (success == 'waiting') {
+        minTs = undefined;
+        maxTs = undefined;
+    }
     if (loadingFetch) {
         return;
     }

package/package/components/runs/JobLoader.svelte.d.ts

@@ -8,7 +8,7 @@ declare const __propDef: {
         label?: string | null | undefined;
         folder: string | null;
         path: string | null;
-        success?: 'success' | 'failure' | 'running' | undefined;
+        success?: 'success' | 'suspended' | 'waiting' | 'failure' | 'running' | undefined;
         isSkipped?: boolean | undefined;
         showSchedules?: boolean | undefined;
         showFutureJobs?: boolean | undefined;
@@ -20,6 +20,7 @@ declare const __propDef: {
         maxTs?: string | undefined;
         jobKinds?: string | undefined;
         queue_count?: Tweened<number> | undefined;
+        suspended_count?: Tweened<number> | undefined;
         autoRefresh?: boolean | undefined;
         completedJobs?: CompletedJob[] | undefined;
         externalJobs?: Job[] | undefined;

package/package/components/runs/JobPreview.svelte

@@ -173,7 +173,7 @@ const dispatch = createEventDispatcher();
 										jobId={job.id}
 										duration={job?.['duration_ms']}
 										mem={job?.['mem_peak']}
-										isLoading={!(job && 'logs' in job && job.logs)}
+										isLoading={job?.['running'] == false}
 										content={job?.logs}
 										tag={job?.tag}
 									/>
@@ -214,7 +214,7 @@ const dispatch = createEventDispatcher();
 						duration={job?.['duration_ms']}
 						mem={job?.['mem_peak']}
 						content={job?.logs}
-						isLoading
+						isLoading={job?.['running'] == false}
 						tag={job?.tag}
 					/>
 				{/if}

package/package/components/runs/QueuePopover.svelte

@@ -30,7 +30,7 @@ async function getQueuedJobs() {
 			<div class="text-secondary text-xs">Only showing the first 100 jobs</div>
 		{/if}
 
-		{#each jobs.slice(0, 100) as job}
+		{#each jobs.slice(0, 1000) as job}
 			<div class="flex">
 				<a
 					target="_blank"

package/package/components/runs/RunRow.svelte

@@ -20,7 +20,6 @@ export let activeLabel;
 export let isSelectingJobsToCancel = false;
 let scheduleEditor;
 $: isExternal = job && job.id === '-';
-let triggeredByWidth = 0;
 function isJobCancelable(j) {
     return j.type === 'QueuedJob' && !j.schedule_path;
 }
@@ -132,6 +131,7 @@ function isJobCancelable(j) {
 										{job.script_path}
 									</a>
 									<Button
+										title="Filter by path"
 										size="xs2"
 										color="light"
 										on:click={() => {
@@ -143,6 +143,7 @@ function isJobCancelable(j) {
 								{/if}
 								{#if job.script_path?.startsWith('f/')}
 									<Button
+										title="Filter by folder"
 										size="xs2"
 										color="light"
 										on:click={() => {
@@ -218,7 +219,7 @@ function isJobCancelable(j) {
 			{/if}
 		</div>
 	{/if}
-	<div class="w-3/12 flex justify-start" bind:clientWidth={triggeredByWidth}>
+	<div class="w-3/12 flex justify-start">
 		{#if job && job.schedule_path}
 			<div class="flex flex-row items-center gap-1">
 				<Calendar size={14} />
@@ -228,13 +229,19 @@ function isJobCancelable(j) {
 					btnClasses="font-normal"
 					on:click={() => scheduleEditor?.openEdit(job.schedule_path ?? '', job.job_kind == 'flow')}
 				>
-					<div
-						class="truncate text-ellipsis text-left"
-						style="max-width: {triggeredByWidth - 48}px"
-					>
-						{job.schedule_path}
+					<div class="truncate text-ellipsis text-left">
+						{truncateRev(job.schedule_path, 20)}
 					</div>
 				</Button>
+				<Button
+					size="xs2"
+					color="light"
+					on:click={() => {
+						dispatch('filterBySchedule', job.schedule_path)
+					}}
+				>
+					<ListFilter size={10} />
+				</Button>
 			</div>
 		{:else}
 			<div class="flex flex-row gap-1 items-center">

package/package/components/runs/RunRow.svelte.d.ts

@@ -14,6 +14,7 @@ declare const __propDef: {
         filterByPath: CustomEvent<any>;
         filterByFolder: CustomEvent<any>;
         filterByLabel: CustomEvent<any>;
+        filterBySchedule: CustomEvent<any>;
         filterByUser: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/package/components/runs/RunsFilter.svelte

@@ -3,7 +3,7 @@ import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import Tooltip from '../Tooltip.svelte';
 import AutoComplete from 'simple-svelte-autocomplete';
-import { AlertCircle, CheckCircle2, ChevronDown, Filter, PlayCircle, X } from 'lucide-svelte';
+import { AlertCircle, CheckCircle2, ChevronDown, Filter, Hourglass, PlayCircle, X } from 'lucide-svelte';
 import JsonEditor from '../apps/editor/settingsPanel/inputEditor/JsonEditor.svelte';
 import Toggle from '../Toggle.svelte';
 import Label from '../Label.svelte';
@@ -27,6 +27,7 @@ export let jobKindsCat;
 export let user = null;
 export let folder = null;
 export let mobile = false;
+export let schedulePath;
 // Autocomplete data
 export let paths = [];
 export let usernames = [];
@@ -35,42 +36,49 @@ export let allWorkspaces = false;
 $: displayedLabel = label;
 $: displayedConcurrencyKey = concurrencyKey;
 $: displayedTag = tag;
+$: displayedSchedule = schedulePath;
 let copyArgFilter = argFilter;
 let copyResultFilter = resultFilter;
 export let filterBy = 'path';
 const dispatch = createEventDispatcher();
-let manuallySet = false;
-$: {
+let autoSet = false;
+$: (path || user || folder || label || concurrencyKey || tag || schedulePath) && autosetFilter();
+function autosetFilter() {
     if (path !== null && path !== '' && filterBy !== 'path') {
-        manuallySet = true;
+        autoSet = true;
         filterBy = 'path';
     }
     else if (user !== null && user !== '' && filterBy !== 'user') {
-        manuallySet = true;
+        autoSet = true;
         filterBy = 'user';
     }
     else if (folder !== null && folder !== '' && filterBy !== 'folder') {
-        manuallySet = true;
+        autoSet = true;
         filterBy = 'folder';
     }
     else if (label !== null && label !== '' && filterBy !== 'label') {
-        manuallySet = true;
+        autoSet = true;
         filterBy = 'label';
     }
     else if (concurrencyKey !== null && concurrencyKey !== '' && filterBy !== 'concurrencyKey') {
-        manuallySet = true;
+        autoSet = true;
         filterBy = 'concurrencyKey';
     }
     else if (tag !== null && tag !== '' && filterBy !== 'tag') {
-        manuallySet = true;
+        autoSet = true;
         filterBy = 'tag';
     }
+    else if (schedulePath !== undefined && schedulePath !== '' && filterBy !== 'schedulePath') {
+        autoSet = true;
+        filterBy = 'schedulePath';
+    }
 }
 let labelTimeout = undefined;
 let concurrencyKeyTimeout = undefined;
 let tagTimeout = undefined;
 </script>
-
+{autoSet}
+{filterBy}
 <div class="flex gap-4">
 	{#if !mobile}
 		<div class="flex gap-2">
@@ -89,15 +97,16 @@ let tagTimeout = undefined;
 				<ToggleButtonGroup
 					bind:selected={filterBy}
 					on:selected={() => {
-						if (!manuallySet) {
+						if (!autoSet) {
 							path = null
 							user = null
 							folder = null
 							label = null
 							concurrencyKey = null
 							tag = null
+							schedulePath = undefined
 						} else {
-							manuallySet = false
+							autoSet = false
 						}
 					}}
 				>
@@ -106,7 +115,8 @@ let tagTimeout = undefined;
 					<ToggleButton value="folder" label="Folder" />
 					<ToggleButtonMore
 						togglableItems={[
-							{ label: 'Concurrency key', value: 'concurrencyKey' },
+							{ label: 'Schedule Path', value: 'schedulePath' },
+							{ label: 'Concurrency Key', value: 'concurrencyKey' },
 							{ label: 'Label', value: 'label' },
 							{ label: 'Tag', value: 'tag' }
 						]}
@@ -331,6 +341,39 @@ let tagTimeout = undefined;
 						/>
 					</div>
 				{/key}
+			{:else if filterBy === 'schedulePath'}
+				{#key tag}
+					<div class="relative">
+						{#if tag}
+							<button
+								class="absolute top-2 right-2 z-50"
+								on:click={() => {
+									schedulePath = undefined
+									dispatch('reset')
+								}}
+							>
+								<X size={14} />
+							</button>
+						{/if}
+						<span class="text-xs absolute -top-4"> Schedule Path </span>
+
+						<input
+							autofocus
+							type="text"
+							class="!h-[32px] py-1 !text-xs !w-64"
+							bind:value={displayedSchedule}
+							on:keydown={(e) => {
+								if (tagTimeout) {
+									clearTimeout(tagTimeout)
+								}
+
+								tagTimeout = setTimeout(() => {
+									schedulePath = displayedSchedule
+								}, 1000)
+							}}
+						/>
+					</div>
+				{/key}
 			{/if}
 		</div>
 		<div class="relative">
@@ -388,6 +431,23 @@ let tagTimeout = undefined;
 					icon={AlertCircle}
 					iconProps={{ color: success === 'failure' ? 'red' : 'gray' }}
 				/>
+				{#if success == 'waiting'}
+				<ToggleButton
+					value={'waiting'}
+					tooltip="Waiting"
+					class="whitespace-nowrap"
+					icon={Hourglass}
+					iconProps={{ color: 'blue'}}
+				/>
+				{:else if success == 'suspended'}
+				<ToggleButton
+					value={'suspended'}
+					tooltip="Suspended"
+					class="whitespace-nowrap"
+					icon={Hourglass}
+					iconProps={{ color: 'blue'}}
+				/>
+				{/if}
 			</ToggleButtonGroup>
 		</div>
 	{/if}
@@ -414,24 +474,27 @@ let tagTimeout = undefined;
 						<ToggleButtonGroup
 							bind:selected={filterBy}
 							on:selected={() => {
-								if (!manuallySet) {
+								if (!autoSet) {
 									path = null
 									user = null
 									folder = null
 									label = null
 									concurrencyKey = null
 									tag = null
+									schedulePath = undefined
 								} else {
-									manuallySet = false
+									autoSet = false
 								}
 							}}
 						>
 							<ToggleButton value="path" label="Path" />
 							<ToggleButton value="user" label="User" />
 							<ToggleButton value="folder" label="Folder" />
+							<ToggleButton value="schedulePath" label="Schedule" />
 							<ToggleButton value="concurrencyKey" label="Concurrency" />
 							<ToggleButton value="tag" label="Tag" />
 							<ToggleButton value="label" label="Label" />
+							
 						</ToggleButtonGroup>
 					</Label>
 

package/package/components/runs/RunsFilter.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
         label?: string | null | undefined;
         concurrencyKey?: string | null | undefined;
         tag?: string | null | undefined;
-        success?: 'running' | 'success' | 'failure' | undefined;
+        success?: 'running' | 'waiting' | 'suspended' | 'queued' | 'success' | 'failure' | undefined;
         isSkipped?: boolean | undefined;
         argFilter: string;
         argError: string;
@@ -15,11 +15,12 @@ declare const __propDef: {
         user?: string | null | undefined;
         folder?: string | null | undefined;
         mobile?: boolean | undefined;
+        schedulePath: string | undefined;
         paths?: string[] | undefined;
         usernames?: string[] | undefined;
         folders?: string[] | undefined;
         allWorkspaces?: boolean | undefined;
-        filterBy?: "path" | "tag" | "folder" | "user" | "label" | "concurrencyKey" | undefined;
+        filterBy?: "path" | "tag" | "folder" | "user" | "label" | "concurrencyKey" | "schedulePath" | undefined;
     };
     events: {
         reset: CustomEvent<any>;

package/package/components/runs/RunsQueue.svelte

@@ -1,20 +1,32 @@
-<script>import QueuePopover from './QueuePopover.svelte';
-import Popup from '../common/popup/Popup.svelte';
+
+
+<script>import { createEventDispatcher } from 'svelte';
+import { Button } from '../common';
+import { FilterX, ListFilter } from 'lucide-svelte';
+import Tooltip from '../Tooltip.svelte';
 export let queue_count = undefined;
-export let allWorkspaces = false;
+export let suspended_count = undefined;
+export let success;
+const dispatch = createEventDispatcher();
 </script>
 
 <div class="flex gap-1 relative max-w-36 min-w-[50px] items-baseline">
-	<div class="text-xs absolute -top-4 truncate">Jobs waiting for a worker</div>
+	<div class="text-xs absolute -top-4 truncate flex items-baseline gap-1">Waiting for workers <Tooltip small>Jobs waiting for a worker being available to be executed</Tooltip></div>
 	<div class="mt-1">{queue_count ? ($queue_count ?? 0).toFixed(0) : '...'}</div>
-	<div class="truncate text-2xs text-blue-400">
+	<div class="truncate text-2xs  !text-secondary mt-0.5">
 		{#if queue_count && ($queue_count ?? 0) > 0}
-			<Popup>
-				<svelte:fragment slot="button">
-					<span class="text-2xs truncate">jobs</span>
-				</svelte:fragment>
-				<QueuePopover {allWorkspaces} />
-			</Popup>
+				<Button size="xs2" color="light" on:click={() => dispatch('jobs_waiting')}>{#if success == 'waiting'}<FilterX size={12}></FilterX>{:else}<ListFilter size={12}></ListFilter>{/if}</Button>
 		{/if}
+
 	</div>
 </div>
+
+{#if suspended_count && ($suspended_count ?? 0) > 0}
+	<div class="flex gap-1 relative max-w-36 min-w-[50px] items-baseline ml-20 mr-8">
+		<div class="text-xs absolute -top-4 truncate flex items-baseline gap-1">Suspended <Tooltip small>Jobs waiting for an event or approval before being resumed</Tooltip></div>
+		<div class="mt-1">{suspended_count ? ($suspended_count ?? 0).toFixed(0) : '...'}</div>
+		<div class="truncate text-2xs !text-secondary mt-0.5">
+					<Button size="xs2" color="light" on:click={() => dispatch('jobs_suspended')}>{#if success == 'waiting'}<FilterX size={12}></FilterX>{:else}<ListFilter size={12}></ListFilter>{/if}</Button>
+		</div>
+	</div>
+{/if}

package/package/components/runs/RunsQueue.svelte.d.ts

@@ -3,9 +3,13 @@ import type { Tweened } from 'svelte/motion';
 declare const __propDef: {
     props: {
         queue_count?: Tweened<number> | undefined;
-        allWorkspaces?: boolean | undefined;
+        suspended_count?: Tweened<number> | undefined;
+        success: string | undefined;
     };
     events: {
+        jobs_waiting: CustomEvent<any>;
+        jobs_suspended: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};