windmill-components 1.642.0 → 1.655.0

package/package/components/runs/PreprocessedArgsDisplay.svelte

@@ -1,18 +1,10 @@
 <script lang="ts">import Badge from '../common/badge/Badge.svelte';
-// import { ClipboardCopy, Download } from 'lucide-svelte'
-// import Drawer from '../common/drawer/Drawer.svelte'
-// import DrawerContent from '../common/drawer/DrawerContent.svelte'
-// import { Highlight } from 'svelte-highlight'
-// import Button from '../common/button/Button.svelte'
-// import { json } from 'svelte-highlight/languages'
-// import { copyToClipboard } from '../../utils'
-// import { deepEqual } from 'fast-equals'
-export let preprocessed;
+let { preprocessed } = $props();
 // $: args =
 // 	'_metadata' in flowStatus && 'original_args' in flowStatus['_metadata']
 // 		? flowStatus['_metadata']['original_args']
 // 		: undefined
-$: hasPreprocessedArgs = preprocessed === true;
+let hasPreprocessedArgs = $derived(preprocessed === true);
 // $: argsStr = args !== undefined ? JSON.stringify(args, null, 4) : undefined
 // let jsonViewer: Drawer | undefined = undefined
 </script>

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

@@ -1,20 +1,6 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const PreprocessedArgsDisplay: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     preprocessed: boolean | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type PreprocessedArgsDisplay = InstanceType<typeof PreprocessedArgsDisplay>;
+}
+declare const PreprocessedArgsDisplay: import("svelte").Component<Props, {}, "">;
+type PreprocessedArgsDisplay = ReturnType<typeof PreprocessedArgsDisplay>;
 export default PreprocessedArgsDisplay;

package/package/components/runs/QueuePopover.svelte

@@ -3,8 +3,8 @@ import { workspaceStore } from '../../stores';
 import { ExternalLink } from 'lucide-svelte';
 import Skeleton from '../common/skeleton/Skeleton.svelte';
 import { displayDate } from '../../utils';
-let jobs = undefined;
-export let allWorkspaces = false;
+let jobs = $state(undefined);
+let { allWorkspaces = false } = $props();
 getQueuedJobs();
 async function getQueuedJobs() {
     jobs = await JobService.listQueue({

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

@@ -1,20 +1,6 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const QueuePopover: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     allWorkspaces?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type QueuePopover = InstanceType<typeof QueuePopover>;
+}
+declare const QueuePopover: import("svelte").Component<Props, {}, "">;
+type QueuePopover = ReturnType<typeof QueuePopover>;
 export default QueuePopover;

package/package/components/runs/RunBadges.svelte

@@ -68,7 +68,7 @@ let { job, displayPersistentScriptDefinition, openPersistentScriptDrawer, concur
 {/if}
 {#if concurrencyKey}
 	<div>
-		<Tooltip notClickable>
+		<Tooltip>
 			{#snippet text()}
 				This job has concurrency limits enabled with the key:
 				{#if onFilterByConcurrencyKey}

package/package/components/runs/RunsTable.svelte

@@ -13,7 +13,7 @@ import DropdownMenu, {} from '../DropdownMenu.svelte';
 import { clickOutside, isJobCancelable, isJobReRunnable } from '../../utils';
 import { goto } from '../../navigation';
 import BarsStaggered from '../icons/BarsStaggered.svelte';
-let { jobs = undefined, externalJobs = [], omittedObscuredJobs, showExternalJobs = false, selectedIds = $bindable([]), selectedWorkspace = $bindable(undefined), activeLabel = null, lastFetchWentToEnd = false, perPage = 1000, manualSelectionMode, onCancelJobs, batchRerunOptionsIsOpen = $bindable() } = $props();
+let { jobs = undefined, externalJobs = [], omittedObscuredJobs, showExternalJobs = false, selectedIds = $bindable([]), selectedWorkspace = $bindable(undefined), activeLabel = null, lastFetchWentToEnd = false, perPage = 1000, manualSelectionMode, onCancelJobs, batchRerunOptionsIsOpen = $bindable(), loadingExtra = false } = $props();
 let hasClickFocus = $state(false);
 const keysPressed = useKeyPressed(['Shift', 'Control', 'Meta', 'A', 'ArrowDown', 'ArrowUp'], {
     onKeyDown(key, e) {
@@ -272,7 +272,7 @@ let selectableJobs = $derived(jobs?.filter(jobIsSelectable) ?? []);
 					/>
 				</div>
 			{/if}
-			<div class="text-2xs px-4 flex flex-row items-center gap-2 leading-3">
+			<div class="text-2xs px-4 flex flex-row items-center gap-2 leading-3 whitespace-nowrap">
 				{#if showExternalJobs && externalJobs.length > 0}
 					<div class="flex flex-row">
 						{jobs
@@ -298,7 +298,7 @@ let selectableJobs = $derived(jobs?.filter(jobIsSelectable) ?? []);
 					{jobCount}
 				{/if}
 			</div>
-			<div class="text-xs font-semibold leading-3">Started</div>
+			<div></div>
 			<div class="text-xs font-semibold leading-3">Duration</div>
 			<div class="text-xs font-semibold leading-3">Path</div>
 			{#if containsLabel}
@@ -450,11 +450,16 @@ let selectableJobs = $derived(jobs?.filter(jobIsSelectable) ?? []);
 							>{#if !lastFetchWentToEnd && jobs && jobs.length >= perPage}
 								<button
 									class="text-xs text-accent text-center w-full pb-2"
+									disabled={loadingExtra}
 									onclick={() => {
 										dispatch('loadExtra')
 									}}
 								>
-									Load next {perPage} jobs
+									{#if loadingExtra}
+										Loading...
+									{:else}
+										Load next {perPage} jobs
+									{/if}
 								</button>
 							{/if}</div
 						>

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

@@ -13,6 +13,7 @@ interface Props {
     batchRerunOptionsIsOpen?: boolean;
     manualSelectionMode: undefined | 'cancel' | 'rerun';
     onCancelJobs: (jobIds: string[]) => void;
+    loadingExtra?: boolean;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/package/components/runs/runsFilter.d.ts

@@ -1,18 +1,23 @@
 import type { JobTriggerKind } from '../../gen';
 import { Braces, Calendar, Clock, ServerCog, FileCode, FolderIcon, Hash, ListFilter, Lock, Tag, UserIcon, Zap, CirclePlayIcon } from 'lucide-svelte';
 import type { FilterInstanceRec } from '../FilterSearchbar.svelte';
-export declare function buildRunsFilterSearchbarSchema({ paths, usernames, folders, jobTriggerKinds, isSuperAdmin }: {
+export declare function buildRunsFilterSearchbarSchema({ paths, usernames, folders, jobTriggerKinds, isSuperAdmin, isAdminsWorkspace }: {
     paths: string[];
     usernames: string[];
     folders: string[];
     jobTriggerKinds: JobTriggerKind[];
     isSuperAdmin: boolean;
+    isAdminsWorkspace: boolean;
 }): {
     all_workspaces?: {
         type: "boolean";
         label: string;
         description: string;
     } | undefined;
+    _default_: {
+        type: "string";
+        hidden: true;
+    };
     min_ts: {
         type: "date";
         label: string;
@@ -29,6 +34,16 @@ export declare function buildRunsFilterSearchbarSchema({ paths, usernames, folde
         mode: "end";
         otherField: string;
     };
+    timeframe: {
+        type: "oneof";
+        label: string;
+        icon: typeof Calendar;
+        description: string;
+        options: {
+            label: string;
+            value: string;
+        }[];
+    };
     path: {
         type: "oneof";
         options: {
@@ -193,8 +208,9 @@ export declare function buildRunsFilterSearchbarSchema({ paths, usernames, folde
 export type RunsFilterSearchbarSchema = ReturnType<typeof buildRunsFilterSearchbarSchema>;
 export type RunsFilterInstance = FilterInstanceRec<RunsFilterSearchbarSchema>;
 export declare function allowWildcards(filters: Partial<RunsFilterInstance> | undefined): boolean;
-export declare const buildRunsFilterPresets: ({ isSuperadmin }: {
+export declare const buildRunsFilterPresets: ({ isSuperadmin, isAdminsWorkspace }: {
     isSuperadmin: boolean;
+    isAdminsWorkspace: boolean;
 }) => {
     name: string;
     value: string;

package/package/components/runs/runsFilter.js

@@ -1,7 +1,12 @@
 import { Braces, Calendar, Clock, ServerCog, FileCode, FolderIcon, Hash, ListFilter, Lock, Tag, UserIcon, Zap, CirclePlayIcon } from 'lucide-svelte';
 import { triggerDisplayNamesMap } from '../triggers/utils';
-export function buildRunsFilterSearchbarSchema({ paths, usernames, folders, jobTriggerKinds, isSuperAdmin }) {
+import { runsTimeframes } from './TimeframeSelect.svelte';
+export function buildRunsFilterSearchbarSchema({ paths, usernames, folders, jobTriggerKinds, isSuperAdmin, isAdminsWorkspace }) {
     return {
+        _default_: {
+            type: 'string',
+            hidden: true
+        },
         min_ts: {
             type: 'date',
             label: 'From',
@@ -18,6 +23,13 @@ export function buildRunsFilterSearchbarSchema({ paths, usernames, folders, jobT
             mode: 'end',
             otherField: 'min_ts'
         },
+        timeframe: {
+            type: 'oneof',
+            label: 'Timeframe',
+            icon: Calendar,
+            description: 'Predefined timeframes',
+            options: runsTimeframes.map((tf) => ({ label: tf.label, value: tf.label }))
+        },
         path: {
             type: 'oneof',
             options: paths.map((s) => ({ label: s, value: s })),
@@ -160,7 +172,8 @@ export function buildRunsFilterSearchbarSchema({ paths, usernames, folders, jobT
             label: 'Show future jobs (Default: true)',
             description: 'Include jobs that are planned later'
         },
-        ...(isSuperAdmin && {
+        ...(isSuperAdmin &&
+            isAdminsWorkspace && {
             all_workspaces: {
                 type: 'boolean',
                 label: 'All workspaces',
@@ -175,8 +188,11 @@ export function allowWildcards(filters) {
         filters?.tag?.includes('*') ||
         false);
 }
-export const buildRunsFilterPresets = ({ isSuperadmin }) => [
+export const buildRunsFilterPresets = ({ isSuperadmin, isAdminsWorkspace }) => [
     { name: 'Hide schedules', value: 'job_trigger_kind:\\ !schedule' },
     { name: 'Hide future jobs', value: 'show_future_jobs:\\ false' },
-    ...(isSuperadmin ? [{ name: 'All workspaces', value: 'all_workspaces:\\ true' }] : [])
+    { name: 'Show skipped', value: 'show_skipped:\\ true' },
+    ...(isSuperadmin && isAdminsWorkspace
+        ? [{ name: 'All workspaces', value: 'all_workspaces:\\ true' }]
+        : [])
 ];

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

@@ -16,14 +16,21 @@ export interface UseJobLoaderArgs {
     skip?: boolean;
     lookback?: number;
     perPage?: number;
-    onSetPerPage?: (perPage: number) => void;
 }
 export declare function useJobsLoader(args: () => UseJobLoaderArgs): {
     loadExtraJobs: () => Promise<void>;
     loadJobs: (reset: boolean, shouldGetCount?: boolean) => Promise<void>;
+    stopBatchLoading: () => void;
+    restreamWithBatchSize: (size: number) => void;
+    readonly batchProgress: {
+        loaded: number;
+        total: number;
+    } | null;
+    readonly currentBatchSize: number | null;
     readonly queue_count: Tweened<number> | undefined;
     readonly suspended_count: Tweened<number> | undefined;
     readonly loading: boolean;
+    readonly loadingExtra: boolean;
     readonly completedJobs: CompletedJob[] | undefined;
     readonly externalJobs: Job[] | undefined;
     readonly extendedJobs: ExtendedJobs | undefined;

package/package/components/runs/useJobsLoader.svelte.js

@@ -47,7 +47,6 @@ export function useJobsLoader(args) {
     let refreshRate = $derived(_args.refreshRate ?? 5000);
     let syncQueuedRunsCount = $derived(_args.syncQueuedRunsCount ?? true);
     let lookback = $derived(_args.lookback ?? 0);
-    let onSetPerPage = $derived(_args.onSetPerPage);
     let timeframe = $derived(_args?.timeframe);
     let perPage = $derived(_args?.perPage ?? 1000);
     let label = $derived(filters?.label ?? null);
@@ -68,23 +67,41 @@ export function useJobsLoader(args) {
     let folder = $derived(filters?.folder);
     let path = $derived(filters?.path);
     let argFilter = $derived(filters?.arg);
+    let broadFilter = $derived(filters?._default_ || undefined);
     let queue_count = $state();
     let suspended_count = $state();
     let loading = $state(false);
-    let lastFetchWentToEnd = $state(false);
+    let loadingExtra = $state(false);
+    let lastFetchWentToEnd = $state(true);
+    let batchProgress = $state(null);
     let completedJobs = $state();
     let externalJobs = $state();
     let extendedJobs = $state();
     let jobs = $state();
     let intervalId = $state();
     let sync = true;
+    let paramChangeTimeout;
+    let paramChangePromise;
+    let slowStreamIntervalId;
+    let currentBatchSize = $state(null);
     function onParamChanges() {
         resetJobs();
+        slowStreamIntervalId = setInterval(() => {
+            sendUserToast('Loading is taking a long time...', 'warning', [{ label: 'Stop loading', callback: () => stopBatchLoading() }], undefined, 8000);
+        }, 15000);
         let promise = loadJobsIntern(true);
-        promise = CancelablePromiseUtils.onTimeout(promise, 4000, () => {
-            sendUserToast('Loading jobs is taking longer than expected...', true, perPage > 25 && onSetPerPage
-                ? [{ label: 'Reduce to 25 items per page', callback: () => onSetPerPage(25) }]
-                : []);
+        if (perPage > 25) {
+            promise = CancelablePromiseUtils.onTimeout(promise, 4000, () => {
+                sendUserToast('Loading jobs is taking longer than expected...', 'warning', [
+                    { label: 'Stream by batches of 25', callback: () => restreamWithSmallBatches() }
+                ]);
+            });
+        }
+        promise = CancelablePromiseUtils.finallyDo(promise, () => {
+            if (slowStreamIntervalId) {
+                clearInterval(slowStreamIntervalId);
+                slowStreamIntervalId = undefined;
+            }
         });
         promise = CancelablePromiseUtils.catchErr(promise, (e) => {
             if (e instanceof CancelError) {
@@ -94,52 +111,83 @@ export function useJobsLoader(args) {
         });
         return promise;
     }
-    let loadingFetch = false;
-    async function loadExtraJobs() {
-        if (jobs && jobs.length > 0) {
-            let minQueueTs = undefined;
-            let minCompletedTs = undefined;
-            let cursor = 0;
-            while (jobs && cursor < jobs?.length) {
-                cursor++;
-                const job = jobs[jobs.length - 1 - cursor];
-                if (job.type == 'CompletedJob') {
-                    minCompletedTs = job.completed_at;
-                    break;
-                }
-                else if (job.type == 'QueuedJob' && minQueueTs == undefined) {
-                    minQueueTs = job.created_at;
-                }
+    function restreamWithBatchSize(size) {
+        paramChangePromise?.cancel();
+        resetJobs();
+        slowStreamIntervalId = setInterval(() => {
+            sendUserToast('Loading is taking a long time...', 'warning', [{ label: 'Stop loading', callback: () => stopBatchLoading() }], undefined, 8000);
+        }, 15000);
+        paramChangePromise = loadJobsIntern(false, size);
+        paramChangePromise = CancelablePromiseUtils.finallyDo(paramChangePromise, () => {
+            if (slowStreamIntervalId) {
+                clearInterval(slowStreamIntervalId);
+                slowStreamIntervalId = undefined;
             }
-            const ts = minCompletedTs ?? minQueueTs;
-            if (!ts) {
-                sendUserToast('No jobs to load from');
-                lastFetchWentToEnd = false;
-                return;
+        });
+        paramChangePromise = CancelablePromiseUtils.catchErr(paramChangePromise, (e) => {
+            if (e instanceof CancelError) {
+                return CancelablePromiseUtils.pure(undefined);
             }
-            // const minCreated = lastJob?.created_at
-            const minCreated = new Date(new Date(ts).getTime() - 1).toISOString();
-            const minTs = timeframe?.computeMinMax().minTs ?? null;
-            let olderJobs = await fetchJobs(minCreated, minTs, undefined);
-            jobs = updateWithNewJobs(olderJobs ?? [], jobs ?? []);
-            computeCompletedJobs();
-            lastFetchWentToEnd = olderJobs?.length < perPage;
+            return CancelablePromiseUtils.err(e);
+        });
+    }
+    function restreamWithSmallBatches() {
+        restreamWithBatchSize(25);
+    }
+    function restreamWithSingleItems() {
+        restreamWithBatchSize(1);
+    }
+    let loadingFetch = false;
+    async function loadExtraJobs() {
+        loading = true;
+        loadingExtra = true;
+        const batchSize = Math.min(perPage, 1000);
+        await loadExtraJobsBatch(batchSize);
+        loadingExtra = false;
+    }
+    function loadExtraJobsBatch(batchSize) {
+        if (!jobs || jobs.length === 0) {
+            lastFetchWentToEnd = true;
+            return CancelablePromiseUtils.pure(undefined);
         }
-        else {
-            lastFetchWentToEnd = false;
+        const lastJob = jobs[jobs.length - 1];
+        const ts = lastJob.created_at;
+        if (!ts) {
+            lastFetchWentToEnd = true;
+            return CancelablePromiseUtils.pure(undefined);
         }
+        const cursorTs = new Date(new Date(ts).getTime() - 1).toISOString();
+        const minTs = timeframe?.computeMinMax().minTs ?? null;
+        return CancelablePromiseUtils.map(fetchJobs(null, minTs, undefined, cursorTs, batchSize), (olderJobs) => {
+            jobs = updateWithNewJobs(olderJobs ?? [], jobs ?? []);
+            if (extendedJobs) {
+                extendedJobs.jobs = jobs ?? [];
+                extendedJobs = extendedJobs;
+            }
+            computeCompletedJobs();
+            lastFetchWentToEnd = (olderJobs?.length ?? 0) < batchSize;
+            loading = false;
+        });
     }
-    function fetchJobs(completedBefore, completedAfter, createdAfterQueue) {
+    function fetchJobs(completedBefore, completedAfter, createdAfterQueue, createdBefore, perPageOverride) {
         if (_args.skip)
             return CancelablePromiseUtils.pure([]);
         loadingFetch = true;
         let scriptPathStart = folder == null || folder === '' ? undefined : `f/${folder}/`;
         let scriptPathExact = path == null || path === '' ? undefined : path;
+        let isQueueOnly = success == 'running' || success == 'suspended' || success == 'waiting';
+        let isCompletedOnly = success == 'success' || success == 'failure';
         let promise = JobService.listJobs({
             workspace: currentWorkspace,
-            completedBefore: completedBefore ?? undefined,
-            completedAfter: completedAfter ?? undefined,
-            createdAfterQueue,
+            createdBefore: createdBefore ?? undefined,
+            completedBefore: isQueueOnly ? undefined : (completedBefore ?? undefined),
+            completedAfter: isQueueOnly ? undefined : (completedAfter ?? undefined),
+            createdBeforeQueue: isQueueOnly ? (completedBefore ?? undefined) : undefined,
+            createdAfterQueue: isCompletedOnly
+                ? undefined
+                : isQueueOnly
+                    ? (completedAfter ?? createdAfterQueue)
+                    : createdAfterQueue,
             schedulePath: schedulePath ?? undefined,
             scriptPathExact,
             createdBy: user == null || user === '' ? undefined : user,
@@ -168,8 +216,9 @@ export function useJobsLoader(args) {
                 : undefined,
             triggerKind: jobTriggerKind ?? undefined,
             allWorkspaces: allWorkspaces ? true : undefined,
-            perPage,
-            allowWildcards: allowWildcards ? true : undefined
+            perPage: perPageOverride ?? perPage,
+            allowWildcards: allowWildcards ? true : undefined,
+            broadFilter
         });
         promise = CancelablePromiseUtils.catchErr(promise, (e) => {
             if (e instanceof CancelError)
@@ -233,16 +282,32 @@ export function useJobsLoader(args) {
             resetJobs();
         await loadJobsIntern(shouldGetCount);
     }
+    function stopBatchLoading() {
+        paramChangePromise?.cancel();
+        if (slowStreamIntervalId) {
+            clearInterval(slowStreamIntervalId);
+            slowStreamIntervalId = undefined;
+        }
+        batchProgress = null;
+        currentBatchSize = null;
+        loading = false;
+    }
     function resetJobs() {
         jobs = undefined;
         completedJobs = undefined;
         externalJobs = undefined;
         extendedJobs = undefined;
         lastFetchWentToEnd = false;
+        batchProgress = null;
+        currentBatchSize = null;
+        if (slowStreamIntervalId) {
+            clearInterval(slowStreamIntervalId);
+            slowStreamIntervalId = undefined;
+        }
         intervalId && clearInterval(intervalId);
         intervalId = setInterval(syncer, refreshRate);
     }
-    function loadJobsIntern(shouldGetCount) {
+    function loadJobsIntern(shouldGetCount, overrideBatchSize) {
         const { minTs, maxTs } = timeframe?.computeMinMax() ?? { minTs: null, maxTs: null };
         if (shouldGetCount) {
             getCount();
@@ -253,15 +318,62 @@ export function useJobsLoader(args) {
         // lookback won't be needed anymore (just filter ended_at > minTs instead
         const extendedMinTs = subtractDaysFromDateString(minTs, lookback);
         if (concurrencyKey == null || concurrencyKey === '') {
-            return CancelablePromiseUtils.map(fetchJobs(maxTs, null, extendedMinTs), (newJobs) => {
+            const batchSize = overrideBatchSize ?? Math.min(perPage, 1000);
+            const isBatched = perPage > batchSize;
+            if (isBatched) {
+                batchProgress = { loaded: 0, total: perPage };
+            }
+            currentBatchSize = batchSize;
+            let slowBatchToastShown = false;
+            let firstFetchPromise = fetchJobs(maxTs, extendedMinTs ?? null, extendedMinTs, undefined, batchSize);
+            if (isBatched && batchSize > 1) {
+                firstFetchPromise = CancelablePromiseUtils.onTimeout(firstFetchPromise, 4000, () => {
+                    if (!slowBatchToastShown) {
+                        slowBatchToastShown = true;
+                        sendUserToast(`Streaming by batches of ${batchSize} is slow, try loading one at a time`, 'warning', [{ label: 'Stream 1 by 1', callback: () => restreamWithSingleItems() }]);
+                    }
+                });
+            }
+            let p = CancelablePromiseUtils.map(firstFetchPromise, (newJobs) => {
                 extendedJobs = { jobs: newJobs, obscured_jobs: [] };
                 // Filter on minTs here and not in the backend
                 // to get enough data for the concurrency graph
                 jobs = sortMinDate(minTs, newJobs);
                 externalJobs = [];
                 computeCompletedJobs();
+                lastFetchWentToEnd = newJobs.length < batchSize;
                 loading = false;
+                if (isBatched) {
+                    batchProgress = { loaded: jobs?.length ?? 0, total: perPage };
+                }
+            });
+            if (isBatched) {
+                const numExtraBatches = Math.ceil(perPage / batchSize) - 1;
+                for (let i = 0; i < numExtraBatches; i++) {
+                    p = CancelablePromiseUtils.then(p, () => {
+                        if (lastFetchWentToEnd || !jobs)
+                            return CancelablePromiseUtils.pure(undefined);
+                        loading = true;
+                        let batchPromise = CancelablePromiseUtils.pipe(loadExtraJobsBatch(batchSize), () => {
+                            batchProgress = { loaded: jobs?.length ?? 0, total: perPage };
+                        });
+                        if (batchSize > 1 && !slowBatchToastShown) {
+                            batchPromise = CancelablePromiseUtils.onTimeout(batchPromise, 4000, () => {
+                                if (!slowBatchToastShown) {
+                                    slowBatchToastShown = true;
+                                    sendUserToast(`Streaming by batches of ${batchSize} is slow, try loading one at a time`, 'warning', [{ label: 'Stream 1 by 1', callback: () => restreamWithSingleItems() }]);
+                                }
+                            });
+                        }
+                        return batchPromise;
+                    });
+                }
+            }
+            p = CancelablePromiseUtils.pipe(p, () => {
+                batchProgress = null;
+                currentBatchSize = null;
             });
+            return p;
         }
         else {
             return CancelablePromiseUtils.map(fetchExtendedJobs(concurrencyKey, maxTs, extendedMinTs ?? null), (newExtendedJobs) => {
@@ -284,6 +396,7 @@ export function useJobsLoader(args) {
                     externalJobs = computeExternalJobs(newExternalJobs);
                 }
                 computeCompletedJobs();
+                lastFetchWentToEnd = newJobs.length < perPage;
                 loading = false;
             });
         }
@@ -313,6 +426,9 @@ export function useJobsLoader(args) {
         if (loadingFetch) {
             return;
         }
+        if (timeframe?.type === 'manual') {
+            return;
+        }
         if (sync) {
             if (syncQueuedRunsCount) {
                 getCount();
@@ -443,17 +559,32 @@ export function useJobsLoader(args) {
         if (intervalId) {
             clearInterval(intervalId);
         }
+        if (slowStreamIntervalId) {
+            clearInterval(slowStreamIntervalId);
+            slowStreamIntervalId = undefined;
+        }
+        paramChangePromise?.cancel();
     });
     $effect(() => {
         Object.keys(filters ?? {}).map((k) => filters?.[k]);
         currentWorkspace;
         lookback;
-        timeframe;
         perPage;
         showSchedules;
         showFutureJobs;
-        let p = untrack(() => onParamChanges());
-        return () => p.cancel();
+        clearTimeout(paramChangeTimeout);
+        paramChangePromise?.cancel();
+        paramChangeTimeout = setTimeout(() => {
+            paramChangePromise = untrack(() => onParamChanges());
+        }, 0);
+        return () => {
+            clearTimeout(paramChangeTimeout);
+            paramChangePromise?.cancel();
+            if (slowStreamIntervalId) {
+                clearInterval(slowStreamIntervalId);
+                slowStreamIntervalId = undefined;
+            }
+        };
     });
     $effect(() => {
         ;
@@ -476,6 +607,14 @@ export function useJobsLoader(args) {
     return {
         loadExtraJobs,
         loadJobs,
+        stopBatchLoading,
+        restreamWithBatchSize,
+        get batchProgress() {
+            return batchProgress;
+        },
+        get currentBatchSize() {
+            return currentBatchSize;
+        },
         get queue_count() {
             return queue_count;
         },
@@ -485,6 +624,9 @@ export function useJobsLoader(args) {
         get loading() {
             return loading;
         },
+        get loadingExtra() {
+            return loadingExtra;
+        },
         get completedJobs() {
             return completedJobs;
         },

package/package/components/schedules/schedulesFilter.d.ts

@@ -11,6 +11,10 @@ export declare function buildSchedulesFilterSchema({ paths, scriptPaths, showUse
         icon: typeof Users;
         description: string;
     } | undefined;
+    _default_: {
+        type: "string";
+        hidden: true;
+    };
     schedule_path: {
         type: "oneof";
         options: {

package/package/components/schedules/schedulesFilter.js

@@ -1,6 +1,10 @@
 import { FileCode, FileText, Clock, Braces, Users } from 'lucide-svelte';
 export function buildSchedulesFilterSchema({ paths, scriptPaths, showUserFoldersFilter, userFoldersLabel }) {
     return {
+        _default_: {
+            type: 'string',
+            hidden: true
+        },
         schedule_path: {
             type: 'oneof',
             options: paths.map((s) => ({ label: s, value: s })),