windmill-components 1.309.6 → 1.339.2

package/package/components/multiselect/MultiSelect.svelte.d.ts

@@ -0,0 +1,97 @@
+import { SvelteComponent } from "svelte";
+import type { MultiSelectEvents, Option as T } from './types';
+declare class __sveltets_Render<Option extends T> {
+    props(): {
+        activeIndex?: number | null | undefined;
+        activeOption?: Option | null | undefined;
+        createOptionMsg?: string | null | undefined;
+        allowUserOptions?: boolean | "append" | undefined;
+        autocomplete?: string | undefined;
+        autoScroll?: boolean | undefined;
+        breakpoint?: number | undefined;
+        defaultDisabledTitle?: string | undefined;
+        disabled?: boolean | undefined;
+        disabledInputTitle?: string | undefined;
+        duplicateOptionMsg?: string | undefined;
+        duplicates?: boolean | undefined;
+        key?: ((opt: T) => unknown) | undefined;
+        filterFunc?: ((opt: Option, searchText: string) => boolean) | undefined;
+        closeDropdownOnSelect?: boolean | "desktop" | undefined;
+        form_input?: HTMLInputElement | null | undefined;
+        highlightMatches?: boolean | undefined;
+        id?: string | null | undefined;
+        input?: HTMLInputElement | null | undefined;
+        inputClass?: string | undefined;
+        inputStyle?: string | null | undefined;
+        inputmode?: "email" | "text" | "numeric" | "decimal" | "none" | "search" | "tel" | "url" | null | undefined;
+        invalid?: boolean | undefined;
+        liSelectedClass?: string | undefined;
+        liSelectedStyle?: string | null | undefined;
+        loading?: boolean | undefined;
+        matchingOptions?: Option[] | undefined;
+        maxSelect?: number | null | undefined;
+        name?: string | null | undefined;
+        noMatchingOptionsMsg?: string | undefined;
+        open?: boolean | undefined;
+        options: Option[];
+        outerDiv?: HTMLDivElement | null | undefined;
+        outerDivClass?: string | undefined;
+        parseLabelsAsHtml?: boolean | undefined;
+        pattern?: string | null | undefined;
+        placeholder?: string | null | undefined;
+        removeAllTitle?: string | undefined;
+        removeBtnTitle?: string | undefined;
+        minSelect?: number | null | undefined;
+        required?: boolean | undefined;
+        resetFilterOnAdd?: boolean | undefined;
+        searchText?: string | undefined;
+        selected?: Option[] | undefined;
+        sortSelected?: boolean | ((op1: Option, op2: Option) => number) | undefined;
+        selectedOptionsDraggable?: boolean | undefined;
+        style?: string | null | undefined;
+        ulSelectedClass?: string | undefined;
+        ulSelectedStyle?: string | null | undefined;
+        value?: Option | Option[] | null | undefined;
+    };
+    events(): MultiSelectEvents;
+    slots(): {
+        'expand-icon': {
+            open: boolean;
+        };
+        selected: {
+            option: Option;
+            idx: any;
+        };
+        default: {
+            option: any;
+            index: number;
+        };
+        'remove-icon': {};
+        'after-input': {
+            selected: Option[];
+            disabled: boolean;
+            invalid: boolean;
+            id: string | null;
+            placeholder: string | null;
+            open: boolean;
+            required: boolean;
+        };
+        spinner: {};
+        'disabled-icon': {};
+        option: {
+            option: any;
+            index: number;
+        };
+        'user-msg': {
+            searchText: string;
+            msgType: any;
+            msg: any;
+        };
+    };
+}
+export type MultiSelectProps<Option extends T> = ReturnType<__sveltets_Render<Option>['props']>;
+export type MultiSelectEvents<Option extends T> = ReturnType<__sveltets_Render<Option>['events']>;
+export type MultiSelectSlots<Option extends T> = ReturnType<__sveltets_Render<Option>['slots']>;
+export default class MultiSelect<Option extends T> extends SvelteComponent<MultiSelectProps<Option>, MultiSelectEvents<Option>, MultiSelectSlots<Option>> {
+}
+export {};

package/package/components/multiselect/types.d.ts

@@ -0,0 +1,56 @@
+export type Option = string | number | ObjectOption;
+export type OptionStyle = string | {
+    option: string;
+    selected: string;
+};
+export type ObjectOption = {
+    label: string | number;
+    value?: unknown;
+    title?: string;
+    disabled?: boolean;
+    preselected?: boolean;
+    disabledTitle?: string;
+    selectedTitle?: string;
+    style?: OptionStyle;
+    [key: string]: unknown;
+};
+export type DispatchEvents<T = Option> = {
+    add: {
+        option: T;
+    };
+    create: {
+        option: T;
+    };
+    remove: {
+        option: T;
+    };
+    removeAll: {
+        options: T[];
+    };
+    change: {
+        option?: T;
+        options?: T[];
+        type: 'add' | 'remove' | 'removeAll';
+    };
+    open: {
+        event: Event;
+    };
+    close: {
+        event: Event;
+    };
+};
+export type MultiSelectEvents = {
+    [key in keyof DispatchEvents]: CustomEvent<DispatchEvents[key]>;
+} & {
+    blur: FocusEvent;
+    click: MouseEvent;
+    focus: FocusEvent;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+    mouseenter: MouseEvent;
+    mouseleave: MouseEvent;
+    touchcancel: TouchEvent;
+    touchend: TouchEvent;
+    touchmove: TouchEvent;
+    touchstart: TouchEvent;
+};

package/package/components/multiselect/types.js

@@ -0,0 +1 @@
+export {};

package/package/components/multiselect/utils.d.ts

@@ -0,0 +1,7 @@
+import type { Option, OptionStyle } from './types';
+export declare const get_label: (opt: Option) => string | number;
+export declare function get_style(option: {
+    style?: OptionStyle;
+    [key: string]: unknown;
+} | string | number, key?: 'selected' | 'option' | null): string;
+export declare function scroll_into_view_if_needed_polyfill(elem: Element, centerIfNeeded?: boolean): IntersectionObserver;

package/package/components/multiselect/utils.js

@@ -0,0 +1,54 @@
+// get the label key from an option object or the option itself if it's a string or number
+export const get_label = (opt) => {
+    if (opt instanceof Object) {
+        if (opt.label === undefined) {
+            console.error(`MultiSelect option ${JSON.stringify(opt)} is an object but has no label key`);
+        }
+        return opt.label;
+    }
+    return `${opt}`;
+};
+// this function is used extract CSS strings from a {selected, option} style object to be used in the style attribute of the option
+// if the style is a string, it will be returned as is
+export function get_style(option, key = null) {
+    let css_str = ``;
+    if (![`selected`, `option`, null].includes(key)) {
+        console.error(`MultiSelect: Invalid key=${key} for get_style`);
+    }
+    if (typeof option == `object` && option.style) {
+        if (typeof option.style == `string`) {
+            css_str = option.style;
+        }
+        if (typeof option.style == `object`) {
+            if (key && key in option.style)
+                return option.style[key] ?? ``;
+            else {
+                console.error(`Invalid style object for option=${JSON.stringify(option)}`);
+            }
+        }
+    }
+    // ensure css_str ends with a semicolon
+    if (css_str.trim() && !css_str.trim().endsWith(`;`))
+        css_str += `;`;
+    return css_str;
+}
+// Firefox lacks support for scrollIntoViewIfNeeded (https://caniuse.com/scrollintoviewifneeded).
+// See https://github.com/janosh/svelte-multiselect/issues/87
+// Polyfill copied from
+// https://github.com/nuxodin/lazyfill/blob/a8e63/polyfills/Element/prototype/scrollIntoViewIfNeeded.js
+// exported for testing
+export function scroll_into_view_if_needed_polyfill(elem, centerIfNeeded = true) {
+    const observer = new IntersectionObserver(function ([entry]) {
+        const ratio = entry.intersectionRatio;
+        if (ratio < 1) {
+            const place = ratio <= 0 && centerIfNeeded ? `center` : `nearest`;
+            elem.scrollIntoView({
+                block: place,
+                inline: place
+            });
+        }
+        observer.disconnect();
+    });
+    observer.observe(elem);
+    return observer; // return for testing
+}

package/package/components/propertyPicker/ObjectViewer.svelte

@@ -98,7 +98,7 @@ $: fullyCollapsed = keys.length > 1 && collapsed;
 							<button
 								class="val text-left {pureViewer
 									? 'cursor-auto'
-									: ''} rounded px-1 hover:bg-blue-100 {getTypeAsString(json[key])}"
+									: ''} rounded px-1 hover:bg-blue-100 dark:hover:bg-blue-100/10 {getTypeAsString(json[key])}"
 								on:click={() => selectProp(key, json[key])}
 							>
 								{#if json[key] === NEVER_TESTED_THIS_FAR}
@@ -190,13 +190,26 @@ $: fullyCollapsed = keys.length > 1 && collapsed;
 		--tw-text-opacity: 1;
 		color: rgb(22 163 74 / var(--tw-text-opacity));
 }
+	:is(.dark .val.string) {
+		color: rgb(74 222 128 / 0.8);
+}
 
 	.val.number {
 		--tw-text-opacity: 1;
 		color: rgb(234 88 12 / var(--tw-text-opacity));
+}
+
+	:is(.dark .val.number) {
+		color: rgb(251 146 60 / 0.9);
+}
+
+	.val.number {
 		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 	.val.boolean {
 		--tw-text-opacity: 1;
 		color: rgb(37 99 235 / var(--tw-text-opacity));
+}
+	:is(.dark .val.boolean) {
+		color: rgb(96 165 250 / 0.9);
 }</style>

package/package/components/runs/JobLoader.svelte

@@ -1,16 +1,17 @@
 <script>import { onDestroy, onMount } from 'svelte';
-import { JobService } from '../../gen';
+import { JobService, ConcurrencyGroupsService } from '../../gen';
 import { sendUserToast } from '../../toast';
 import { workspaceStore } from '../../stores';
 import { tweened } from 'svelte/motion';
-import { forLater } from '../../forLater';
 export let jobs;
 export let user;
+export let label = null;
 export let folder;
 export let path;
 export let success = undefined;
 export let isSkipped = false;
-export let hideSchedules = false;
+export let showSchedules = true;
+export let showFutureJobs = true;
 export let argFilter;
 export let resultFilter = undefined;
 export let schedulePath = undefined;
@@ -21,6 +22,9 @@ export let jobKinds = '';
 export let queue_count = undefined;
 export let autoRefresh = true;
 export let completedJobs = undefined;
+export let externalJobs = undefined;
+export let concurrencyKey;
+export let extendedJobs = undefined;
 export let argError = '';
 export let resultError = '';
 export let loading = false;
@@ -33,12 +37,15 @@ let sync = true;
 $: jobKinds = computeJobKinds(jobKindsCat);
 $: ($workspaceStore && loadJobsIntern(true)) ||
     (path &&
+        label &&
         success &&
         isSkipped != undefined &&
         jobKinds &&
+        concurrencyKey &&
         user &&
         folder &&
-        hideSchedules != undefined &&
+        showFutureJobs != undefined &&
+        showSchedules != undefined &&
         allWorkspaces != undefined &&
         argFilter != undefined &&
         resultFilter != undefined);
@@ -98,6 +105,35 @@ async function fetchJobs(startedBefore, startedAfter) {
         running: success == 'running' ? true : undefined,
         isSkipped: isSkipped ? undefined : false,
         isFlowStep: jobKindsCat != 'all' ? false : undefined,
+        label: label === null || label === '' ? undefined : label,
+        isNotSchedule: showSchedules == false ? true : undefined,
+        scheduledForBeforeNow: showFutureJobs == false ? true : undefined,
+        args: argFilter && argFilter != '{}' && argFilter != '' && argError == '' ? argFilter : undefined,
+        result: resultFilter && resultFilter != '{}' && resultFilter != '' && resultError == ''
+            ? resultFilter
+            : undefined,
+        allWorkspaces: allWorkspaces ? true : undefined
+    });
+}
+async function fetchExtendedJobs(concurrencyKey, startedBefore, startedAfter) {
+    return ConcurrencyGroupsService.listExtendedJobs({
+        rowLimit: 1000,
+        concurrencyKey: concurrencyKey == null || concurrencyKey == '' ? undefined : concurrencyKey,
+        workspace: $workspaceStore,
+        createdOrStartedBefore: startedBefore,
+        createdOrStartedAfter: startedAfter,
+        schedulePath,
+        scriptPathExact: path === null || path === '' ? undefined : path,
+        createdBy: user === null || user === '' ? undefined : user,
+        scriptPathStart: folder === null || folder === '' ? undefined : `f/${folder}/`,
+        jobKinds,
+        success: success == 'success' ? true : success == 'failure' ? false : undefined,
+        running: success == 'running' ? true : undefined,
+        isSkipped: isSkipped ? undefined : false,
+        isFlowStep: jobKindsCat != 'all' ? false : undefined,
+        label: label === null || label === '' ? undefined : label,
+        isNotSchedule: showSchedules == false ? true : undefined,
+        scheduledForBeforeNow: showFutureJobs == false ? true : undefined,
         args: argFilter && argFilter != '{}' && argFilter != '' && argError == '' ? argFilter : undefined,
         result: resultFilter && resultFilter != '{}' && resultFilter != '' && resultError == ''
             ? resultFilter
@@ -111,6 +147,8 @@ export async function loadJobs(nMinTs, nMaxTs, reset, shouldGetCount) {
     if (reset) {
         jobs = undefined;
         completedJobs = undefined;
+        externalJobs = undefined;
+        extendedJobs = undefined;
         intervalId && clearInterval(intervalId);
         intervalId = setInterval(syncer, refreshRate);
     }
@@ -122,11 +160,35 @@ async function loadJobsIntern(shouldGetCount) {
     }
     loading = true;
     try {
-        jobs = await fetchJobs(maxTs, minTs);
-        computeCompletedJobs();
-        if (hideSchedules && !schedulePath) {
-            jobs = jobs.filter((job) => !(job && 'running' in job && job.scheduled_for && forLater(job.scheduled_for)));
+        if (concurrencyKey == null || concurrencyKey === '') {
+            let newJobs = await fetchJobs(maxTs, undefined);
+            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 = [];
+        }
+        else {
+            extendedJobs = await fetchExtendedJobs(concurrencyKey, maxTs, undefined);
+            const newJobs = extendedJobs.jobs;
+            const newExternalJobs = extendedJobs.obscured_jobs;
+            // Filter on minTs here and not in the backend
+            // to get enough data for the concurrency graph
+            if (minTs != undefined) {
+                const minDate = new Date(minTs);
+                jobs = newJobs.filter((x) => x.started_at
+                    ? new Date(x.started_at) > minDate
+                    : x.created_at
+                        ? new Date(x.created_at) > minDate
+                        : false);
+                externalJobs = computeExternalJobs(newExternalJobs.filter((x) => x.started_at && new Date(x.started_at) > minDate));
+            }
+            else {
+                jobs = newJobs;
+                externalJobs = computeExternalJobs(newExternalJobs);
+            }
         }
+        computeCompletedJobs();
     }
     catch (err) {
         sendUserToast(`There was a problem fetching jobs: ${err}`, true);
@@ -181,24 +243,59 @@ async function syncer() {
                     cursor++;
                 }
                 loading = true;
-                const newJobs = await fetchJobs(maxTs, minTs ?? ts);
+                let newJobs;
+                if (concurrencyKey == null || concurrencyKey === '') {
+                    newJobs = await fetchJobs(maxTs, minTs ?? ts);
+                }
+                else {
+                    // Obscured jobs have no ids, so we have to do the full request
+                    extendedJobs = await fetchExtendedJobs(concurrencyKey, maxTs, undefined);
+                    externalJobs = computeExternalJobs(extendedJobs.obscured_jobs);
+                    // Filter on minTs here and not in the backend
+                    // to get enough data for the concurrency graph
+                    newJobs = sortMinDate(minTs ?? ts, extendedJobs.jobs);
+                }
                 if (newJobs && newJobs.length > 0 && jobs) {
-                    const oldJobs = jobs?.map((x) => x.id);
-                    jobs = newJobs.filter((x) => !oldJobs.includes(x.id)).concat(jobs);
-                    newJobs
-                        .filter((x) => oldJobs.includes(x.id))
-                        .forEach((x) => (jobs[jobs?.findIndex((y) => y.id == x.id)] = x));
+                    jobs = updateWithNewJobs(jobs, newJobs);
                     jobs = jobs;
-                    computeCompletedJobs();
-                    if (hideSchedules && !schedulePath) {
-                        jobs = jobs.filter((job) => !(job && 'running' in job && job.scheduled_for && forLater(job.scheduled_for)));
+                    if (concurrencyKey == null || concurrencyKey === '') {
+                        if (!extendedJobs) {
+                            extendedJobs = { jobs: jobs, obscured_jobs: [] };
+                        }
+                        else {
+                            extendedJobs.jobs = updateWithNewJobs(extendedJobs.jobs, newJobs);
+                            extendedJobs = extendedJobs;
+                        }
+                        externalJobs = [];
                     }
+                    computeCompletedJobs();
                 }
                 loading = false;
             }
         }
     }
 }
+function updateWithNewJobs(jobs, newJobs) {
+    const oldJobs = jobs?.map((x) => x.id);
+    let ret = newJobs.filter((x) => !oldJobs.includes(x.id)).concat(jobs);
+    newJobs
+        .filter((x) => oldJobs.includes(x.id))
+        .forEach((x) => (ret[ret?.findIndex((y) => y.id == x.id)] = x));
+    return ret;
+}
+function sortMinDate(minTs, jobs) {
+    if (minTs != undefined) {
+        const minDate = new Date(minTs);
+        return jobs.filter((x) => x.started_at
+            ? new Date(x.started_at) > minDate
+            : x.created_at
+                ? new Date(x.created_at) > minDate
+                : false);
+    }
+    else {
+        return jobs;
+    }
+}
 function computeCompletedJobs() {
     completedJobs =
         jobs?.filter((x) => x.type == 'CompletedJob').map((x) => x) ?? [];
@@ -211,6 +308,27 @@ function onVisibilityChange() {
         sync = true;
     }
 }
+function computeExternalJobs(obscuredJobs) {
+    return obscuredJobs.map((x) => ({
+        type: x.typ,
+        started_at: x.started_at,
+        running: x.started_at != undefined,
+        id: '-',
+        script_path: '-',
+        created_by: '-',
+        created_at: '-',
+        success: false,
+        canceled: false,
+        is_flow_step: false,
+        is_skipped: false,
+        visible_to_owner: false,
+        email: '-',
+        permissioned_as: '-',
+        tag: '-',
+        job_kind: 'script',
+        duration_ms: x.duration_ms
+    }));
+}
 onMount(() => {
     document.addEventListener('visibilitychange', onVisibilityChange);
     return () => {

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

@@ -1,15 +1,17 @@
 import { SvelteComponent } from "svelte";
-import { type Job, type CompletedJob } from '../../gen';
+import { type Job, type CompletedJob, type ExtendedJobs } from '../../gen';
 import { type Tweened } from 'svelte/motion';
 declare const __propDef: {
     props: {
         jobs: Job[] | undefined;
         user: string | null;
+        label?: string | null | undefined;
         folder: string | null;
         path: string | null;
         success?: 'success' | 'failure' | 'running' | undefined;
         isSkipped?: boolean | undefined;
-        hideSchedules?: boolean | undefined;
+        showSchedules?: boolean | undefined;
+        showFutureJobs?: boolean | undefined;
         argFilter: string | undefined;
         resultFilter?: string | undefined;
         schedulePath?: string | undefined;
@@ -20,6 +22,9 @@ declare const __propDef: {
         queue_count?: Tweened<number> | undefined;
         autoRefresh?: boolean | undefined;
         completedJobs?: CompletedJob[] | undefined;
+        externalJobs?: Job[] | undefined;
+        concurrencyKey: string | null;
+        extendedJobs?: ExtendedJobs | undefined;
         argError?: string | undefined;
         resultError?: string | undefined;
         loading?: boolean | undefined;

package/package/components/runs/JobPreview.svelte

@@ -1,9 +1,9 @@
-<script>import {} from '../../gen';
+<script>import { ConcurrencyGroupsService } from '../../gen';
 import TestJobLoader from '../TestJobLoader.svelte';
 import DisplayResult from '../DisplayResult.svelte';
 import JobArgs from '../JobArgs.svelte';
 import LogViewer from '../LogViewer.svelte';
-import { Badge, Skeleton, Tab, Tabs } from '../common';
+import { Badge, Button, Skeleton, Tab, Tabs } from '../common';
 import HighlightCode from '../HighlightCode.svelte';
 import { forLater } from '../../forLater';
 import FlowProgressBar from '../flows/FlowProgressBar.svelte';
@@ -11,6 +11,10 @@ import FlowStatusViewer from '../FlowStatusViewer.svelte';
 import DurationMs from '../DurationMs.svelte';
 import { workspaceStore } from '../../stores';
 import WorkflowTimeline from '../WorkflowTimeline.svelte';
+import Popover from '../Popover.svelte';
+import { truncateRev } from '../../utils';
+import { createEventDispatcher } from 'svelte';
+import { ListFilter } from 'lucide-svelte';
 export let id;
 export let blankLink = false;
 export let workspace;
@@ -28,10 +32,18 @@ $: if (currentJob?.id == id) {
 }
 $: id && watchJob && watchJob(id);
 $: job?.logs == undefined && job && viewTab == 'logs' && getLogs?.();
+let lastJobId = undefined;
+let concurrencyKey = undefined;
+$: job?.id && lastJobId !== job.id && getConcurrencyKey(job);
+async function getConcurrencyKey(job) {
+    lastJobId = job.id;
+    concurrencyKey = await ConcurrencyGroupsService.getConcurrencyKey({ id: job.id });
+}
 let viewTab = 'result';
 function asWorkflowStatus(x) {
     return x;
 }
+const dispatch = createEventDispatcher();
 </script>
 
 <TestJobLoader
@@ -44,7 +56,7 @@ function asWorkflowStatus(x) {
 />
 <div class="p-4 flex flex-col gap-2 items-start h-full">
 	{#if job}
-		<div class="flex gap-2">
+		<div class="flex gap-2 flex-wrap">
 			{#if job?.['priority']}
 				<Badge color="red">
 					priority: {job?.['priority']}
@@ -68,6 +80,30 @@ function asWorkflowStatus(x) {
 					Tag: {job.tag}
 				</Badge>
 			{/if}
+			{#if job?.['labels'] && Array.isArray(job?.['labels']) && job?.['labels'].length > 0}
+				{#each job?.['labels'] as label}
+					<Badge baseClass="text-2xs">Label: {label}</Badge>
+				{/each}
+			{/if}
+			{#if concurrencyKey}
+				<Popover notClickable>
+					<svelte:fragment slot="text">
+						This jobs has concurrency limits enabled with the key:
+						<Button
+							class="inline-text"
+							size="xs2"
+							color="light"
+							on:click={() => {
+								dispatch('filterByConcurrencyKey', concurrencyKey)
+							}}
+						>
+							{concurrencyKey}
+							<ListFilter class="inline-block" size={10} />
+						</Button>
+					</svelte:fragment>
+					<Badge large>Concurrency: {truncateRev(concurrencyKey, 20)}</Badge>
+				</Popover>
+			{/if}
 		</div>
 		<a
 			href="/run/{job?.id}?workspace={job?.workspace_id}"

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

@@ -6,6 +6,8 @@ declare const __propDef: {
         workspace: string | undefined;
     };
     events: {
+        filterByConcurrencyKey: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};