windmill-components 1.623.2 → 1.655.0

package/package/components/runs/TimeframeSelect.svelte

@@ -0,0 +1,189 @@
+<script module lang="ts">function computeMinMaxInc(inc) {
+    let minTs = new Date(new Date().getTime() - inc).toISOString();
+    let maxTs = new Date().toISOString();
+    return { minTs, maxTs };
+}
+export function buildManualTimeframe(minTs, maxTs) {
+    return {
+        label: formatDateRange(minTs ?? undefined, maxTs ?? undefined),
+        minTs,
+        maxTs,
+        type: 'manual',
+        computeMinMax: () => ({ minTs, maxTs })
+    };
+}
+export const serviceLogsTimeframes = [
+    { label: '1000 last service logs', computeMinMax: () => ({ minTs: null, maxTs: null }) },
+    { label: 'Within last 5 minutes', computeMinMax: () => computeMinMaxInc(5 * 60 * 1000) },
+    { label: 'Within last 30 minutes', computeMinMax: () => computeMinMaxInc(30 * 60 * 1000) },
+    { label: 'Within last 24 hours', computeMinMax: () => computeMinMaxInc(24 * 60 * 60 * 1000) },
+    { label: 'Within last 7 days', computeMinMax: () => computeMinMaxInc(7 * 24 * 60 * 60 * 1000) },
+    { label: 'Within last month', computeMinMax: () => computeMinMaxInc(30 * 24 * 60 * 60 * 1000) }
+].map((item) => ({ ...item, type: 'dynamic' }));
+export const runsTimeframes = [
+    { label: 'Latest runs', computeMinMax: () => ({ minTs: null, maxTs: null }) },
+    { label: 'Within 30 seconds', computeMinMax: () => computeMinMaxInc(30 * 1000) },
+    { label: 'Within last minute', computeMinMax: () => computeMinMaxInc(60 * 1000) },
+    { label: 'Within last 5 minutes', computeMinMax: () => computeMinMaxInc(5 * 60 * 1000) },
+    { label: 'Within last 30 minutes', computeMinMax: () => computeMinMaxInc(30 * 60 * 1000) },
+    { label: 'Within last 24 hours', computeMinMax: () => computeMinMaxInc(24 * 60 * 60 * 1000) },
+    { label: 'Within last 7 days', computeMinMax: () => computeMinMaxInc(7 * 24 * 60 * 60 * 1000) },
+    { label: 'Within last month', computeMinMax: () => computeMinMaxInc(30 * 24 * 60 * 60 * 1000) }
+].map((item) => ({ ...item, type: 'dynamic' }));
+export function useUrlSyncedTimeframe(timeframes) {
+    let obj = $state({ timeframe: timeframes[0] });
+    let timeframe = $derived(obj.timeframe);
+    watch(() => [page, timeframe], () => {
+        const url = new URL(page.url);
+        if (timeframe.type === 'manual' && timeframe.minTs)
+            url.searchParams.set('min_ts', timeframe.minTs);
+        else
+            url.searchParams.delete('min_ts');
+        if (timeframe.type === 'manual' && timeframe.maxTs)
+            url.searchParams.set('max_ts', timeframe.maxTs);
+        else
+            url.searchParams.delete('max_ts');
+        if (timeframe.type === 'dynamic' && timeframe.label !== timeframes[0].label)
+            url.searchParams.set('timeframe', timeframe.label);
+        else
+            url.searchParams.delete('timeframe');
+        history.replaceState(null, '', url);
+    });
+    if (page.url.searchParams.get('min_ts') || page.url.searchParams.get('max_ts')) {
+        obj.timeframe = buildManualTimeframe(page.url.searchParams.get('min_ts') || null, page.url.searchParams.get('max_ts') || null);
+    }
+    else {
+        const tfLabel = page.url.searchParams.get('timeframe');
+        const tf = timeframes.find((tf) => tf.label === tfLabel);
+        if (tf)
+            obj.timeframe = { ...tf };
+    }
+    return obj;
+}
+export function useSyncedTimeframe(timeframes, getter, setter) {
+    const val = $derived.by(() => {
+        const v = getter();
+        if (v.minTs || v.maxTs) {
+            return buildManualTimeframe(v.minTs ?? null, v.maxTs ?? null);
+        }
+        else if (v.timeframe) {
+            const tf = timeframes.find((tf) => tf.label === v.timeframe);
+            if (tf)
+                return { ...tf };
+        }
+        return timeframes[0];
+    });
+    return {
+        get val() {
+            return val;
+        },
+        set val(v) {
+            if (v.type === 'manual') {
+                setter({ minTs: v.minTs, maxTs: v.maxTs, timeframe: null });
+            }
+            else {
+                setter({ minTs: null, maxTs: null, timeframe: v.label });
+            }
+        }
+    };
+}
+</script>
+
+<script lang="ts">import { CalendarIcon, RefreshCw } from 'lucide-svelte';
+import { Button } from '../common';
+import Popover from '../meltComponents/Popover.svelte';
+import { formatDateRange } from '../../utils';
+import { watch } from 'runed';
+import { page } from '$app/state';
+import InlineCalendarInput, { fromCalendarDate, toCalendarDate } from '../common/InlineCalendarInput.svelte';
+let { loading = false, onClick, items, value = $bindable(), wrapperClasses } = $props();
+let isOpen = $state(false);
+function onManualInput(input) {
+    if (value.type !== 'manual')
+        value = buildManualTimeframe(input.minTs ?? null, input.maxTs ?? null);
+    else {
+        value = buildManualTimeframe('minTs' in input ? (input.minTs ?? null) : value.minTs, 'maxTs' in input ? (input.maxTs ?? null) : value.maxTs);
+    }
+    if (value.type == 'manual' && value.minTs == null && value.maxTs == null) {
+        value = { ...items[0] };
+    }
+}
+</script>
+
+<div class="relative flex {wrapperClasses}">
+	<Button
+		unifiedSize="md"
+		wrapperClasses="flex-1"
+		btnClasses="!rounded-r-none whitespace-nowrap"
+		onClick={() => onClick?.()}
+	>
+		<div class="flex flex-row items-center gap-2">
+			<RefreshCw size={14} class={loading ? 'animate-spin' : ''} />
+			{value.label}
+		</div>
+	</Button>
+	{#if value.type === 'manual'}
+		<Button
+			btnClasses="!rounded-none border-l-0"
+			unifiedSize="md"
+			onClick={() => (value = { ...items[0] })}
+		>
+			Reset
+		</Button>
+	{/if}
+	<Popover enableFlyTransition bind:isOpen>
+		{#snippet trigger()}
+			<Button
+				unifiedSize="md"
+				iconOnly
+				btnClasses="!rounded-l-none border-l-0"
+				endIcon={{ icon: CalendarIcon }}
+			/>
+		{/snippet}
+		{#snippet content()}
+			{@const range = {
+				end: toCalendarDate(
+					value.type === 'manual' && value.maxTs ? new Date(value.maxTs) : undefined
+				),
+				start: toCalendarDate(
+					value.type === 'manual' && value.minTs ? new Date(value.minTs) : undefined
+				)
+			}}
+			<div class="flex divide-x">
+				<div class="flex flex-col p-2">
+					{#each items as item}
+						<Button
+							onClick={() => (value = { ...item })}
+							variant="subtle"
+							unifiedSize="md"
+							selected={value.label === item.label}
+							btnClasses="justify-start text-nowrap"
+						>
+							{item.label}
+						</Button>
+					{/each}
+				</div>
+				<InlineCalendarInput
+					class="p-4 max-w-[18rem]"
+					infiniteRange
+					mode="range"
+					onClickBehavior="set-start"
+					bind:value={
+						() => range,
+						(v) => onManualInput({ minTs: fromCalendarDate(v.start)?.toISOString() ?? null })
+					}
+				/>
+				<InlineCalendarInput
+					class="p-4 max-w-[18rem]"
+					infiniteRange
+					mode="range"
+					onClickBehavior="set-end"
+					bind:value={
+						() => range,
+						(v) => onManualInput({ maxTs: fromCalendarDate(v.end)?.toISOString() ?? null })
+					}
+				/>
+			</div>
+		{/snippet}
+	</Popover>
+</div>

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

@@ -0,0 +1,44 @@
+export type Timeframe = {
+    label: string;
+    computeMinMax: () => {
+        minTs: string | null;
+        maxTs: string | null;
+    };
+    type: 'dynamic';
+} | {
+    label: string;
+    computeMinMax: () => {
+        minTs: string | null;
+        maxTs: string | null;
+    };
+    minTs: string | null;
+    maxTs: string | null;
+    type: 'manual';
+};
+export declare function buildManualTimeframe(minTs: string | null, maxTs: string | null): Timeframe;
+export declare const serviceLogsTimeframes: Timeframe[];
+export declare const runsTimeframes: Timeframe[];
+export declare function useUrlSyncedTimeframe(timeframes: Timeframe[]): {
+    timeframe: Timeframe;
+};
+export declare function useSyncedTimeframe(timeframes: Timeframe[], getter: () => {
+    minTs?: string | null;
+    maxTs?: string | null;
+    timeframe?: string | null;
+}, setter: (v: {
+    minTs?: string | null;
+    maxTs?: string | null;
+    timeframe?: string | null;
+}) => void): {
+    val: Timeframe;
+};
+interface Props {
+    loading?: boolean;
+    items: Timeframe[];
+    value: Timeframe;
+    wrapperClasses?: string;
+    onClick?: () => void;
+}
+declare const TimeframeSelect: import("svelte").Component<Props, {}, "value">;
+type TimeframeSelect = ReturnType<typeof TimeframeSelect>;
+export default TimeframeSelect;

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

@@ -0,0 +1,217 @@
+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, 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;
+        icon: typeof Calendar;
+        description: string;
+        mode: "start";
+        otherField: string;
+    };
+    max_ts: {
+        type: "date";
+        label: string;
+        icon: typeof Calendar;
+        description: string;
+        mode: "end";
+        otherField: string;
+    };
+    timeframe: {
+        type: "oneof";
+        label: string;
+        icon: typeof Calendar;
+        description: string;
+        options: {
+            label: string;
+            value: string;
+        }[];
+    };
+    path: {
+        type: "oneof";
+        options: {
+            label: string;
+            value: string;
+        }[];
+        allowCustomValue: true;
+        allowNegative: true;
+        allowMultiple: true;
+        label: string;
+        icon: typeof FileCode;
+        description: string;
+    };
+    user: {
+        type: "oneof";
+        options: {
+            label: string;
+            value: string;
+        }[];
+        allowCustomValue: true;
+        allowNegative: true;
+        allowMultiple: true;
+        label: string;
+        icon: typeof UserIcon;
+        description: string;
+    };
+    folder: {
+        type: "oneof";
+        options: {
+            label: string;
+            value: string;
+        }[];
+        allowCustomValue: true;
+        allowNegative: true;
+        allowMultiple: true;
+        label: string;
+        icon: typeof FolderIcon;
+        description: string;
+    };
+    label: {
+        type: "string";
+        allowMultiple: true;
+        label: string;
+        icon: typeof Tag;
+        description: string;
+    };
+    tag: {
+        type: "string";
+        allowMultiple: true;
+        label: string;
+        icon: typeof Hash;
+        description: string;
+    };
+    worker: {
+        type: "string";
+        allowMultiple: true;
+        label: string;
+        icon: typeof ServerCog;
+        description: string;
+    };
+    schedule_path: {
+        type: "string";
+        label: string;
+        icon: typeof Clock;
+        description: string;
+    };
+    concurrency_key: {
+        type: "string";
+        label: string;
+        icon: typeof Lock;
+        description: string;
+    };
+    job_kinds: {
+        type: "oneof";
+        options: ({
+            label: string;
+            value: "all";
+            description?: undefined;
+        } | {
+            label: string;
+            value: "runs";
+            description: string;
+        } | {
+            label: string;
+            value: "dependencies";
+            description: string;
+        } | {
+            label: string;
+            value: "previews";
+            description: string;
+        } | {
+            label: string;
+            value: "deploymentcallbacks";
+            description: string;
+        })[];
+        label: string;
+        icon: typeof ListFilter;
+        description: string;
+    };
+    status: {
+        type: "oneof";
+        options: ({
+            label: string;
+            value: "all";
+        } | {
+            label: string;
+            value: "running";
+        } | {
+            label: string;
+            value: "success";
+        } | {
+            label: string;
+            value: "failure";
+        } | {
+            label: string;
+            value: "waiting";
+        } | {
+            label: string;
+            value: "suspended";
+        })[];
+        label: string;
+        icon: typeof CirclePlayIcon;
+        description: string;
+    };
+    show_skipped: {
+        type: "boolean";
+        label: string;
+        description: string;
+    };
+    job_trigger_kind: {
+        type: "oneof";
+        label: string;
+        icon: typeof Zap;
+        options: {
+            label: "Google" | "Schedule" | "HTTP" | "WebSocket" | "Postgres" | "Kafka" | "NATS" | "MQTT" | "SQS" | "GCP Pub/Sub" | "Email" | "Webhook" | "Default Email";
+            value: JobTriggerKind;
+        }[];
+        allowNegative: true;
+        allowMultiple: true;
+        description: string;
+    };
+    arg: {
+        type: "string";
+        format: "json";
+        label: string;
+        icon: typeof Braces;
+        description: string;
+    };
+    result: {
+        type: "string";
+        format: "json";
+        label: string;
+        icon: typeof Braces;
+        description: string;
+    };
+    show_future_jobs: {
+        type: "boolean";
+        label: string;
+        description: string;
+    };
+};
+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, isAdminsWorkspace }: {
+    isSuperadmin: boolean;
+    isAdminsWorkspace: boolean;
+}) => {
+    name: string;
+    value: string;
+}[];

package/package/components/runs/runsFilter.js

@@ -0,0 +1,198 @@
+import { Braces, Calendar, Clock, ServerCog, FileCode, FolderIcon, Hash, ListFilter, Lock, Tag, UserIcon, Zap, CirclePlayIcon } from 'lucide-svelte';
+import { triggerDisplayNamesMap } from '../triggers/utils';
+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',
+            icon: Calendar,
+            description: 'Only include jobs that completed after this date',
+            mode: 'start',
+            otherField: 'max_ts'
+        },
+        max_ts: {
+            type: 'date',
+            label: 'To',
+            icon: Calendar,
+            description: 'Only include jobs that completed before this date',
+            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 })),
+            allowCustomValue: true,
+            allowNegative: true,
+            allowMultiple: true,
+            label: 'Path',
+            icon: FileCode,
+            description: 'Filter by script or flow path'
+        },
+        user: {
+            type: 'oneof',
+            options: usernames.map((s) => ({ label: s, value: s })),
+            allowCustomValue: true,
+            allowNegative: true,
+            allowMultiple: true,
+            label: 'User',
+            icon: UserIcon,
+            description: 'Filter by user who created the job'
+        },
+        folder: {
+            type: 'oneof',
+            options: folders.map((s) => ({ label: s, value: s })),
+            allowCustomValue: true,
+            allowNegative: true,
+            allowMultiple: true,
+            label: 'Folder',
+            icon: FolderIcon,
+            description: 'Filter by folder containing the script or flow'
+        },
+        label: {
+            type: 'string',
+            allowMultiple: true,
+            label: 'Label',
+            icon: Tag,
+            description: 'Filter by custom label attached to jobs'
+        },
+        tag: {
+            type: 'string',
+            allowMultiple: true,
+            label: 'Tag',
+            icon: Hash,
+            description: 'Filter by worker tag'
+        },
+        worker: {
+            type: 'string',
+            allowMultiple: true,
+            label: 'Worker',
+            icon: ServerCog,
+            description: 'Filter by specific worker instance'
+        },
+        schedule_path: {
+            type: 'string',
+            label: 'Schedule path',
+            icon: Clock,
+            description: 'Filter by schedule that triggered the job'
+        },
+        concurrency_key: {
+            type: 'string',
+            label: 'Concurrency key',
+            icon: Lock,
+            description: 'Filter by concurrency limit key'
+        },
+        job_kinds: {
+            type: 'oneof',
+            options: [
+                { label: 'All', value: 'all' },
+                {
+                    label: 'Runs (default)',
+                    value: 'runs',
+                    description: 'Runs are jobs that have no parent jobs (flows are jobs that are parent of the jobs they start), they have been triggered through the UI, a schedule or webhook'
+                },
+                {
+                    label: 'Dependencies',
+                    value: 'dependencies',
+                    description: 'Deploying a script, flow or an app launch a dependency job that create and then attach the lockfile to the deployed item. This mechanism ensure that logic is always executed with the exact same direct and indirect dependencies.'
+                },
+                {
+                    label: 'Previews',
+                    value: 'previews',
+                    description: 'Previews are jobs that have been started in the editor as "Tests"'
+                },
+                {
+                    label: 'Sync',
+                    value: 'deploymentcallbacks',
+                    description: 'Sync jobs that are triggered on every script deployment to sync the workspace with the Git repository configured in the the workspace settings'
+                }
+            ],
+            label: 'Job kinds',
+            icon: ListFilter,
+            description: 'Filter by job category'
+        },
+        status: {
+            type: 'oneof',
+            options: [
+                { label: 'All (default)', value: 'all' },
+                { label: 'Running', value: 'running' },
+                { label: 'Success', value: 'success' },
+                { label: 'Failure', value: 'failure' },
+                { label: 'Waiting', value: 'waiting' },
+                { label: 'Suspended', value: 'suspended' }
+            ],
+            label: 'Status',
+            icon: CirclePlayIcon,
+            description: 'Filter by job execution status'
+        },
+        show_skipped: {
+            type: 'boolean',
+            label: 'Show skipped',
+            description: 'Include skipped flow steps'
+        },
+        job_trigger_kind: {
+            type: 'oneof',
+            label: 'Trigger kind',
+            icon: Zap,
+            options: jobTriggerKinds.map((value) => ({
+                label: triggerDisplayNamesMap[value],
+                value
+            })),
+            allowNegative: true,
+            allowMultiple: true,
+            description: 'Filter by how the job was triggered'
+        },
+        arg: {
+            type: 'string',
+            format: 'json',
+            label: 'Args',
+            icon: Braces,
+            description: 'Filter by job arguments (JSON format)'
+        },
+        result: {
+            type: 'string',
+            format: 'json',
+            label: 'Result',
+            icon: Braces,
+            description: 'Filter by job result (JSON format)'
+        },
+        show_future_jobs: {
+            type: 'boolean',
+            label: 'Show future jobs (Default: true)',
+            description: 'Include jobs that are planned later'
+        },
+        ...(isSuperAdmin &&
+            isAdminsWorkspace && {
+            all_workspaces: {
+                type: 'boolean',
+                label: 'All workspaces',
+                description: 'Show jobs of all workspaces (superadmin only)'
+            }
+        })
+    };
+}
+export function allowWildcards(filters) {
+    return (filters?.label?.includes('*') ||
+        filters?.worker?.includes('*') ||
+        filters?.tag?.includes('*') ||
+        false);
+}
+export const buildRunsFilterPresets = ({ isSuperadmin, isAdminsWorkspace }) => [
+    { name: 'Hide schedules', value: 'job_trigger_kind:\\ !schedule' },
+    { name: 'Hide future jobs', value: 'show_future_jobs:\\ false' },
+    { name: 'Show skipped', value: 'show_skipped:\\ true' },
+    ...(isSuperadmin && isAdminsWorkspace
+        ? [{ name: 'All workspaces', value: 'all_workspaces:\\ true' }]
+        : [])
+];

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

@@ -1,10 +1,12 @@
 import { type Job, type CompletedJob, type ExtendedJobs } from '../../gen';
 import { type Tweened } from 'svelte/motion';
-import type { RunsFilters } from './RunsFilter.svelte';
+import type { Timeframe } from './TimeframeSelect.svelte';
+import { type RunsFilterInstance } from './runsFilter';
 export declare function computeJobKinds(jobKindsCat: string | null): string;
 export interface UseJobLoaderArgs {
     currentWorkspace: string;
-    filters?: Partial<RunsFilters>;
+    filters?: Partial<RunsFilterInstance>;
+    timeframe?: Timeframe;
     jobKinds?: string;
     autoRefresh?: boolean;
     argError?: string;
@@ -12,20 +14,23 @@ export interface UseJobLoaderArgs {
     refreshRate?: number;
     syncQueuedRunsCount?: boolean;
     skip?: boolean;
-    computeMinAndMax?: (() => {
-        minTs: string;
-        maxTs: string | null;
-    } | undefined) | undefined;
     lookback?: number;
-    onSetMinMaxTs?: (minTs: string | null, maxTs: string | null) => void;
-    onSetPerPage?: (perPage: number) => void;
+    perPage?: number;
 }
 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;