windmill-components 1.352.9 → 1.362.0

package/package/components/search/GlobalSearchModal.svelte

@@ -0,0 +1,559 @@
+<script>import { onDestroy, onMount, tick } from 'svelte';
+import { AppService, FlowService, IndexSearchService, RawAppService, ScriptService } from '../../gen';
+import { clickOutside, displayDateOnly, isMac, sendUserToast } from '../../utils';
+import TimeAgo from '../TimeAgo.svelte';
+import { BoxesIcon, CalendarIcon, Code2Icon, DollarSignIcon, HomeIcon, LayoutDashboardIcon, Loader2, PlayIcon, Search, SearchCode } from 'lucide-svelte';
+import JobPreview from '../runs/JobPreview.svelte';
+import Portal from 'svelte-portal';
+import { twMerge } from 'tailwind-merge';
+import ContentSearchInner from '../ContentSearchInner.svelte';
+import { goto } from '$app/navigation';
+import QuickMenuItem from '../search/QuickMenuItem.svelte';
+import { enterpriseLicense, workspaceStore } from '../../stores';
+import uFuzzy from '@leeoniya/ufuzzy';
+import BarsStaggered from '../icons/BarsStaggered.svelte';
+import { scroll_into_view_if_needed_polyfill } from '../multiselect/utils';
+import { Alert } from '../common';
+let open = false;
+let searchTerm = '';
+let textInput;
+let selectedWorkspace = undefined;
+let contentSearch = undefined;
+const RUNS_PREFIX = '>';
+const LOGS_PREFIX = '!';
+const CONTENT_SEARCH_PREFIX = '#';
+const SWITCH_MODE_PREFIX = '?';
+let tab = 'default';
+let switchModeItems = [
+    {
+        search_id: 'switchto:run-search',
+        label: 'Search across completed runs',
+        action: () => switchMode('runs'),
+        shortcutKey: RUNS_PREFIX,
+        icon: Search
+    },
+    {
+        search_id: 'switchto:content-search',
+        label: 'Search scripts/flows/apps based on content',
+        action: () => switchMode('content'),
+        shortcutKey: CONTENT_SEARCH_PREFIX,
+        icon: SearchCode
+    },
+    {
+        search_id: 'switchto:log-search',
+        label: 'Search windmill logs',
+        action: () => switchMode('logs'),
+        shortcutKey: LOGS_PREFIX,
+        icon: Search
+    }
+];
+let defaultMenuItems = [
+    { search_id: 'nav:home', label: 'Go to Home', action: () => gotoPage('/'), icon: HomeIcon },
+    { search_id: 'nav:runs', label: 'Go to Runs', action: () => gotoPage('/runs'), icon: PlayIcon },
+    {
+        search_id: 'nav:variables',
+        label: 'Go to Variables',
+        action: () => gotoPage('/variables'),
+        icon: DollarSignIcon
+    },
+    {
+        search_id: 'nav:resources',
+        label: 'Go to Resources',
+        action: () => gotoPage('/resources'),
+        icon: BoxesIcon
+    },
+    {
+        search_id: 'nav:schedules',
+        label: 'Go to Schedules',
+        action: () => gotoPage('/schedules'),
+        icon: CalendarIcon
+    },
+    ...switchModeItems
+];
+let itemMap = {
+    default: defaultMenuItems,
+    'switch-mode': switchModeItems,
+    runs: [],
+    content: [],
+    logs: []
+};
+$: tab === 'content' && contentSearch?.open();
+async function switchPrompt(tab) {
+    if (tab === 'default') {
+        searchTerm = '';
+    }
+    if (tab === 'runs') {
+        searchTerm = RUNS_PREFIX;
+    }
+    if (tab === 'content') {
+        searchTerm = CONTENT_SEARCH_PREFIX;
+    }
+    if (tab === 'switch-mode') {
+        searchTerm = SWITCH_MODE_PREFIX;
+    }
+    if (tab === 'logs') {
+        searchTerm = LOGS_PREFIX;
+    }
+    selectedItem = selectItem(0);
+    textInput.focus();
+}
+function removePrefix(str, prefix) {
+    if (str.startsWith(prefix)) {
+        return str.substring(prefix.length);
+    }
+    return str;
+}
+let opts = {};
+let uf = new uFuzzy(opts);
+let defaultMenuItemLabels = defaultMenuItems.map((item) => item.label);
+let switchModeItemLabels = switchModeItems.map((item) => item.label);
+function fuzzyFilter(filter, items, itemsPlainText) {
+    if (filter === '') {
+        return items;
+    }
+    let idxs = uf.filter(itemsPlainText, filter) ?? [];
+    let info;
+    // parts is undefined error happens when filter is similar
+    // to `.>!` (string with no letters but some symbols)
+    try {
+        info = uf.info(idxs, itemsPlainText, filter);
+    }
+    catch (e) {
+        return items;
+    }
+    let order = uf.sort(info, itemsPlainText, filter);
+    let r = [];
+    for (let o of order) {
+        r.push(items[info.idx[o]]);
+    }
+    return r;
+}
+let debounceTimeout = undefined;
+const debouncePeriod = 1000;
+let loadingCompletedRuns = false;
+async function handleSearch() {
+    if (tab !== 'default' &&
+        (searchTerm === '' ||
+            ![RUNS_PREFIX, LOGS_PREFIX, CONTENT_SEARCH_PREFIX, SWITCH_MODE_PREFIX].includes(searchTerm[0]))) {
+        _switchMode('default');
+    }
+    if (tab != 'switch-mode' && searchTerm.length > 0 && searchTerm[0] === SWITCH_MODE_PREFIX) {
+        _switchMode('switch-mode');
+    }
+    if (tab != 'logs' && searchTerm.length > 0 && searchTerm[0] === LOGS_PREFIX) {
+        _switchMode('logs');
+    }
+    if (tab != 'runs' && searchTerm.length > 0 && searchTerm[0] === RUNS_PREFIX) {
+        _switchMode('runs');
+    }
+    if (tab != 'content' && searchTerm.length > 0 && searchTerm[0] === CONTENT_SEARCH_PREFIX) {
+        _switchMode('content');
+    }
+    if (tab === 'default') {
+        itemMap['default'] = fuzzyFilter(searchTerm, defaultMenuItems, defaultMenuItemLabels);
+        if (combinedItems) {
+            itemMap['default'] = itemMap['default'].concat(fuzzyFilter(searchTerm, combinedItems, combinedItems.map((i) => `${i.path} ${i.summary}`)));
+        }
+    }
+    if (tab === 'switch-mode') {
+        itemMap['switch-mode'] = fuzzyFilter(removePrefix(searchTerm, SWITCH_MODE_PREFIX), switchModeItems, switchModeItemLabels);
+    }
+    if (tab === 'runs') {
+        const s = removePrefix(searchTerm, RUNS_PREFIX);
+        clearTimeout(debounceTimeout);
+        loadingCompletedRuns = true;
+        debounceTimeout = setTimeout(async () => {
+            clearTimeout(debounceTimeout);
+            let searchResults;
+            try {
+                searchResults = await IndexSearchService.searchJobsIndex({
+                    searchQuery: s,
+                    workspace: $workspaceStore
+                });
+                itemMap['runs'] = searchResults.hits;
+            }
+            catch (e) {
+                sendUserToast(e, true);
+            }
+            loadingCompletedRuns = false;
+            selectedItem = selectItem(0);
+        }, debouncePeriod);
+    }
+    selectedItem = selectItem(0);
+}
+function selectItem(index) {
+    if (!itemMap[tab] || itemMap[tab].length <= index) {
+        return undefined;
+    }
+    onHover(itemMap[tab][index]);
+    return itemMap[tab][index];
+}
+let selectedItem;
+async function handleKeydown(event) {
+    if ((!isMac() ? event.ctrlKey : event.metaKey) && event.key === 'k') {
+        event.preventDefault();
+        await openModal();
+    }
+    if (open) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            if (searchTerm.length != 0 || tab != 'default') {
+                switchMode('default');
+                textInput?.focus();
+            }
+            else {
+                open = false;
+            }
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            let idx = itemMap[tab].indexOf(selectedItem);
+            if (idx != -1) {
+                idx = (idx + 1) % itemMap[tab].length;
+                selectedItem = selectItem(idx);
+                let el = document.getElementById(selectedItem.search_id);
+                if (el)
+                    scroll_into_view_if_needed_polyfill(el, false);
+            }
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            let idx = itemMap[tab].indexOf(selectedItem);
+            if (idx != -1) {
+                idx = (idx - 1 + itemMap[tab].length) % itemMap[tab].length;
+                selectedItem = selectItem(idx);
+                let el = document.getElementById(selectedItem.search_id);
+                if (el)
+                    scroll_into_view_if_needed_polyfill(el, false);
+            }
+        }
+    }
+}
+//internal, should not be called outside of the handleSearch function
+function _switchMode(mode) {
+    selectedItem = undefined;
+    tab = mode;
+}
+// Used by callbacks, call this to change the mode
+function switchMode(mode) {
+    switchPrompt(mode);
+    textInput.focus();
+}
+function gotoWindmillItemPage(e) {
+    let path;
+    switch (e.type) {
+        case 'flow':
+            path = `/flows/get/${e.path}`;
+            break;
+        case 'script':
+            path = `/scripts/get/${e.path}`;
+            break;
+        case 'app':
+            path = `/apps/get/${e.path}`;
+            break;
+        case 'raw_app':
+            path = `/raw_apps/get/${e.path}`;
+            break;
+        default:
+            path = '/';
+    }
+    gotoPage(path);
+}
+function gotoPage(path) {
+    open = false;
+    searchTerm = '';
+    goto(path);
+}
+onMount(() => {
+    window.addEventListener('keydown', handleKeydown);
+});
+onDestroy(() => {
+    window.removeEventListener('keydown', handleKeydown);
+});
+$: searchTerm, handleSearch();
+function placeholderFromPrefix(text) {
+    switch (text) {
+        case '':
+            return '   Search or type `?` for search options';
+        case RUNS_PREFIX:
+            return '   Search across completed runs';
+        case LOGS_PREFIX:
+            return '   Search across completed runs';
+        case CONTENT_SEARCH_PREFIX:
+            return '   Search flows/scripts/apps by content';
+        default:
+            return '';
+    }
+}
+let combinedItems = undefined;
+async function fetchCombinedItems() {
+    const scripts = await ScriptService.listScripts({
+        workspace: $workspaceStore
+    });
+    const flows = await FlowService.listFlows({
+        workspace: $workspaceStore
+    });
+    const apps = await AppService.listApps({ workspace: $workspaceStore });
+    const raw_apps = await RawAppService.listRawApps({ workspace: $workspaceStore });
+    let combinedItems = [
+        ...flows.map((x) => ({
+            ...x,
+            type: 'flow',
+            time: new Date(x.edited_at).getTime(),
+            search_id: x.path
+        })),
+        ...scripts.map((x) => ({
+            ...x,
+            type: 'script',
+            time: new Date(x.created_at).getTime(),
+            search_id: x.path
+        })),
+        ...apps.map((x) => ({
+            ...x,
+            type: 'app',
+            time: new Date(x.edited_at).getTime(),
+            search_id: x.path
+        })),
+        ...raw_apps.map((x) => ({
+            ...x,
+            type: 'raw_app',
+            time: new Date(x.edited_at).getTime(),
+            search_id: x.path
+        }))
+    ].sort((a, b) => (a.starred != b.starred ? (a.starred ? -1 : 1) : a.time - b.time > 0 ? -1 : 1));
+    return combinedItems;
+}
+function iconForWindmillItem(type) {
+    switch (type) {
+        case 'flow':
+            return BarsStaggered;
+        case 'script':
+            return Code2Icon;
+        case 'app':
+            return LayoutDashboardIcon;
+        case 'raw_app':
+            return LayoutDashboardIcon;
+    }
+}
+function onHover(selectedItem) {
+    if (tab === 'runs') {
+        selectedWorkspace = selectedItem?.document?.workspace_id[0];
+    }
+}
+export async function openSearchWithPrefilledText(text) {
+    await openModal();
+    searchTerm = text ?? searchTerm;
+    await handleSearch();
+}
+async function openModal() {
+    open = !open;
+    await tick();
+    if (open) {
+        if (combinedItems == undefined) {
+            combinedItems = await fetchCombinedItems();
+            handleSearch();
+        }
+        selectedItem = selectItem(0);
+        textInput.focus();
+        textInput.select();
+    }
+}
+</script>
+
+{#if open}
+	<Portal>
+		<div
+			class={twMerge(
+				`fixed top-0 bottom-0 left-0 right-0 transition-all duration-50`,
+				' bg-black bg-opacity-40',
+				'z-[1100]'
+			)}
+		>
+			<div
+				class={'max-w-4xl lg:mx-auto mx-10 mt-40 bg-surface rounded-lg relative'}
+				use:clickOutside={false}
+				on:click_outside={() => {
+					open = false
+				}}
+			>
+				<div class="py-2 items-center">
+					<div class="px-4 flex flex-row gap-1 items-center pb-1 mb-2 border-b">
+						<Search />
+						<div class="relative inline-block w-full">
+							<input
+								id="quickSearchInput"
+								bind:this={textInput}
+								type="text"
+								class="quick-search-input"
+								bind:value={searchTerm}
+							/>
+							<label
+								for="quickSearchInput"
+								class="absolute top-1/2 left-2 transform -translate-y-1/2 pointer-events-none text-gray-400 transition-all duration-200 whitespace-pre"
+								>{placeholderFromPrefix(searchTerm)}</label
+							>
+						</div>
+					</div>
+					<div class="px-4 overflow-scroll max-h-[30rem]">
+						{#if tab === 'default' || tab === 'switch-mode'}
+							{#each (itemMap[tab] ?? []).filter((e) => defaultMenuItems.includes(e)) as el}
+								<QuickMenuItem
+									on:select={el?.action}
+									on:hover={() => (selectedItem = el)}
+									id={el?.search_id}
+									hovered={el?.search_id === selectedItem?.search_id}
+									label={el?.label}
+									icon={el?.icon}
+									shortcutKey={el?.shortcutKey}
+								/>
+							{/each}
+						{/if}
+						{#if tab === 'default'}
+							{#if (itemMap[tab] ?? []).filter((e) => (combinedItems ?? []).includes(e)).length > 0}
+								<div class="mt-2 pt-2 pb-1 px-1 text-xs text-sm font-bold border-t text-tertiary"
+									>Flows/Scripts/Apps</div
+								>
+							{/if}
+							{#each (itemMap[tab] ?? []).filter((e) => (combinedItems ?? []).includes(e)) as el}
+								<QuickMenuItem
+									on:select={() => gotoWindmillItemPage(el)}
+									on:hover={() => (selectedItem = el)}
+									id={el?.search_id}
+									hovered={el?.path === selectedItem?.path}
+									label={(el.summary ? `${el.summary} - ` : '') +
+										el.path +
+										(el.starred ? ' ★' : '')}
+									icon={iconForWindmillItem(el.type)}
+								/>
+							{/each}
+							{#if (itemMap[tab] ?? []).length === 0}
+								<div class="flex w-full justify-center items-center h-48">
+									<div class="text-tertiary text-center">
+										<div class="text-2xl font-bold">Nothing found</div>
+										<div class="text-sm">Tip: press `esc` to quickly clear the search bar</div>
+									</div>
+								</div>
+							{/if}
+						{:else if tab === 'content'}
+							<ContentSearchInner
+								classNameInner="max-h-[20rem]"
+								search={removePrefix(searchTerm, '#')}
+								bind:this={contentSearch}
+							/>
+						{:else if tab === 'logs'}
+							<div class="p-2">
+								<Alert title="Service log search is coming soon" type="info">
+									Full text search on windmill's service logs is coming soon
+								</Alert>
+							</div>
+						{:else if tab === 'runs'}
+							<div class="flex h-96">
+								{#if loadingCompletedRuns}
+									<div class="flex w-full justify-center items-center h-48">
+										<div class="text-tertiary text-center">
+											<Loader2 size={34} class="animate-spin" />
+										</div>
+									</div>
+								{:else if itemMap['runs'] && itemMap['runs'].length > 0}
+									<div class="w-5/12 overflow-scroll">
+										{#each itemMap['runs'] ?? [] as r}
+											<QuickMenuItem
+												on:hover={() => {
+													selectedItem = r
+													selectedWorkspace = r?.document.workspace_id[0]
+												}}
+												on:select={() => {
+													open = false
+													goto(`/run/${r?.document.id[0]}`)
+												}}
+												id={r?.document.id[0]}
+												hovered={selectedItem && r?.document.id[0] === selectedItem?.document.id[0]}
+												icon={r?.icon}
+											>
+												<svelte:fragment slot="itemReplacement">
+													<button
+														class={twMerge(
+															`w-full flex items-center justify-between gap-1 py-2 px-2 text-left border rounded-sm transition-a`,
+															r?.document.id === selectedItem?.document?.id
+																? 'bg-surface-hover'
+																: ''
+														)}
+														on:click={() => {}}
+													>
+														<div
+															class="w-full h-full items-center text-xs font-normal grid grid-cols-10 gap-0 min-w-0"
+														>
+															<div class="col-span-1">
+																<div
+																	class="rounded-full w-2 h-2 {r?.document.success[0]
+																		? 'bg-green-400'
+																		: 'bg-red-400'}"
+																/>
+															</div>
+															<div class="col-span-5">
+																{r?.document.script_path}
+															</div>
+															<div
+																class="whitespace-nowrap col-span-2 !text-tertiary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
+															>
+																{displayDateOnly(new Date(r?.document.created_at[0]))}
+															</div>
+															<div
+																class="whitespace-nowrap col-span-2 !text-tertiary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
+															>
+																<TimeAgo date={r?.document.created_at[0] ?? ''} />
+															</div>
+														</div>
+													</button>
+												</svelte:fragment>
+											</QuickMenuItem>
+										{/each}
+									</div>
+									{#if selectedItem === undefined}
+										select a result to preview
+									{:else}
+										<div class="w-7/12 overflow-y-scroll">
+											<JobPreview
+												id={selectedItem?.document?.id[0]}
+												workspace={selectedWorkspace}
+											/>
+										</div>
+									{/if}
+								{:else}
+									<div class="flex w-full justify-center items-center h-96">
+										<div class="text-tertiary text-center">
+											<div class="text-2xl font-bold">No runs found</div>
+											<div class="text-sm">There were no completed runs that match your query</div>
+											<div class="text-sm"
+												>Note that new runs might take a while to become searchable (by default
+												~5min)</div
+											>
+											{#if !$enterpriseLicense}
+												<div class="py-6" />
+
+												<Alert title="This is an EE feature" type="warning">
+													Full-text search on jobs is only available on EE.
+												</Alert>
+											{/if}
+										</div>
+									</div>
+								{/if}
+							</div>
+						{/if}
+					</div>
+				</div>
+			</div>
+		</div>
+	</Portal>
+{/if}
+
+<style>
+	.quick-search-input {
+		outline: none;
+		border: none !important;
+		box-shadow: none !important;
+	}
+
+	.quick-search-input:focus-visible {
+		outline: none !important;
+	}</style>

package/package/components/search/GlobalSearchModal.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        openSearchWithPrefilledText?: ((text?: string) => Promise<void>) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GlobalSearchModalProps = typeof __propDef.props;
+export type GlobalSearchModalEvents = typeof __propDef.events;
+export type GlobalSearchModalSlots = typeof __propDef.slots;
+export default class GlobalSearchModal extends SvelteComponent<GlobalSearchModalProps, GlobalSearchModalEvents, GlobalSearchModalSlots> {
+    get openSearchWithPrefilledText(): (text?: string | undefined) => Promise<void>;
+}
+export {};

package/package/components/search/QuickMenuItem.svelte

@@ -0,0 +1,76 @@
+<script>import { isMac } from '../../utils';
+import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+export let hovered = false;
+export let id;
+export let label = '';
+export let icon = undefined;
+export let shortcutKey = undefined;
+const dispatch = createEventDispatcher();
+onMount(() => {
+    window.addEventListener('keydown', handleKeydown);
+});
+onDestroy(() => {
+    window.removeEventListener('keydown', handleKeydown);
+});
+async function handleKeydown(event) {
+    if (hovered && event.key === 'Enter') {
+        event.preventDefault();
+        runAction();
+    }
+}
+function runAction() {
+    dispatch('select');
+}
+export let kbdClass = '';
+export let small = true;
+if (small) {
+    kbdClass = twMerge(kbdClass, '!text-[10px]  px-1', false && isMac() ? '!text-lg ' : 'text-xs', 'leading-none');
+}
+else {
+    kbdClass += ' !text-xs px-1.5';
+}
+</script>
+
+<div
+	{id}
+	on:click|stopPropagation={runAction}
+	on:mouseenter={() => dispatch('hover')}
+	class={`rounded-md w-full ${hovered ? 'bg-surface-hover' : ''}`}
+>
+	{#if $$slots.itemReplacement}
+		<slot name="itemReplacement" />
+	{:else}
+		<div class="flex flex-row gap-2 items-center px-1 py-0.5 rounded-md pr-6 font-light">
+			<div class="w-4">
+				{#if icon}
+					<svelte:component this={icon} size={14} />
+				{:else if shortcutKey != undefined}
+					<div class="font-bold flex items-center justify-center w-full">
+						<span
+							class="h-4 center-center ml-0.5 rounded border bg-surface-secondary text-primary shadow-sm font-light transition-all group-hover:border-primary-500 group-hover:text-primary-inverse"
+						>
+							<kbd class={kbdClass}>
+								{shortcutKey}
+							</kbd>
+						</span>
+					</div>
+				{/if}
+			</div>
+			{label}
+			{#if shortcutKey != undefined}
+				<div class="ml-auto">
+					<div class="font-bold flex items-center justify-center w-full">
+						<span
+							class="flex h-4 center-center ml-0.5 rounded border bg-surface-secondary text-primary shadow-sm font-light transition-all group-hover:border-primary-500 group-hover:text-primary-inverse"
+						>
+							<kbd class={kbdClass}>
+								{shortcutKey}
+							</kbd>
+						</span>
+					</div>
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>

package/package/components/search/QuickMenuItem.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        hovered?: boolean | undefined;
+        id: string;
+        label?: string | undefined;
+        icon?: any;
+        shortcutKey?: string | undefined;
+        kbdClass?: string | undefined;
+        small?: boolean | undefined;
+    };
+    events: {
+        hover: CustomEvent<any>;
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        itemReplacement: {};
+    };
+};
+export type QuickMenuItemProps = typeof __propDef.props;
+export type QuickMenuItemEvents = typeof __propDef.events;
+export type QuickMenuItemSlots = typeof __propDef.slots;
+export default class QuickMenuItem extends SvelteComponent<QuickMenuItemProps, QuickMenuItemEvents, QuickMenuItemSlots> {
+}
+export {};