windmill-components 1.472.1 → 1.472.3

package/package/components/ItemPicker.svelte

@@ -0,0 +1,174 @@
+<script>import { RotateCw } from 'lucide-svelte';
+import { Button, Drawer, Skeleton } from './common';
+import DrawerContent from './common/drawer/DrawerContent.svelte';
+import NoItemFound from './home/NoItemFound.svelte';
+import IconedResourceType from './IconedResourceType.svelte';
+import SearchItems from './SearchItems.svelte';
+export let pickCallback;
+export let loadItems;
+export let extraField = 'path';
+export let extraField2 = undefined;
+export let itemName;
+export let closeOnClick = true;
+/** Displayed if the load function returns no items. */
+export let noItemMessage = 'There are no items in the list';
+/** Displayed if the search returns no items. */
+export let buttons = {};
+export let tooltip = '';
+export let documentationLink = undefined;
+let loading = false;
+let items = [];
+let filteredItems = [];
+let filter = '';
+export function openDrawer() {
+    loading = true;
+    loadItems()
+        .then((v) => {
+        items = v;
+    })
+        .finally(() => {
+        loading = false;
+    });
+    drawer.openDrawer?.();
+}
+let drawer;
+let refreshing = false;
+</script>
+
+<SearchItems
+	{filter}
+	{items}
+	bind:filteredItems
+	f={(x) =>
+		(extraField2 ? x[extraField2] + ' ' : '') +
+		(x[extraField] ?? '') +
+		' ' +
+		(x['path'] && x['path'] != x[extraField] ? '(' + x['path'] + ')' ?? '' : '') +
+		' ' +
+		(x['description'] != x[extraField] ? x['description'] ?? '' : '')}
+/>
+
+<Drawer bind:this={drawer} size="600px">
+	<DrawerContent
+		{tooltip}
+		{documentationLink}
+		overflow_y={false}
+		title="Search {itemName}s"
+		on:close={drawer.closeDrawer}
+	>
+		<div class="w-full h-full flex flex-col">
+			<div class="flex flex-row gap-2 pb-4">
+				<!-- svelte-ignore a11y-autofocus -->
+				<input
+					type="text"
+					placeholder="Search {itemName}s"
+					bind:value={filter}
+					class="search-item"
+					autofocus
+				/>
+				<Button
+					color="light"
+					variant="border"
+					on:click={() => {
+						refreshing = true
+						loadItems()
+							.then((v) => {
+								items = v
+							})
+							.finally(() => {
+								loading = false
+								refreshing = false
+							})
+					}}
+					iconOnly
+					startIcon={{ icon: RotateCw, classes: loading || refreshing ? 'animate-spin' : '' }}
+				/>
+			</div>
+			{#if loading}
+				{#each new Array(3) as _}
+					<Skeleton layout={[[5], 0.2]} />
+				{/each}
+			{:else if !items?.length}
+				<div class="text-center text-sm text-tertiary mt-2">
+					{@html noItemMessage}
+				</div>
+			{:else if filteredItems?.length}
+				<div class="border rounded-md divide-y w-full overflow-auto pb-12 grow">
+					{#each filteredItems as obj}
+						<div
+							class="hover:bg-surface-hover w-full flex items-center p-4 gap-4 first-of-type:!border-t-0
+						first-of-type:rounded-t-md last-of-type:rounded-b-md"
+						>
+							<div class="inline-flex items-center grow">
+								<button
+									class="py-2 px-1 gap-1 flex grow border-gray-300 border-opacity-0
+									 text-primary"
+									on:click={() => {
+										if (closeOnClick) {
+											drawer.closeDrawer()
+										}
+										pickCallback(obj['path'], obj[extraField])
+									}}
+								>
+									{#if `app` in obj}
+										<div class="mr-2 text-sm text-left center-center w-30">
+											<IconedResourceType after={true} silent={false} name={obj['app']} />
+										</div>
+									{/if}
+									{#if `resource_type` in obj}
+										<div class="mr-2 text-left w-30 center-center text-sm">
+											<IconedResourceType after={true} name={obj['resource_type']} />
+										</div>
+									{/if}
+									<div class="flex grow flex-col break-all overflow-hidden">
+										{#if obj.marked}
+											<div class="text-sm font-semibold text-left">
+												{@html obj.marked}
+											</div>
+										{:else}
+											<div class="text-sm font-semibold flex flex-col">
+												<span class="mr-2 text-left">{obj[extraField] ?? ''}</span>
+												{#if extraField != 'path'}
+													<span class="font-normal text-xs text-left italic"
+														>{obj['path'] ?? ''}</span
+													>
+												{/if}
+											</div>
+											{#if extraField != 'description'}
+												<div class="text-xs font-light italic text-left"
+													>{obj['description'] ?? ''}</div
+												>
+											{/if}
+										{/if}
+									</div>
+								</button>
+							</div>
+							{#if buttons}
+								<div class="flex flex-row items-center">
+									{#each Object.entries(buttons) as [name, button]}
+										<div>
+											<Button
+												size="sm"
+												variant="border"
+												on:click={() => {
+													button(obj['path'] ?? '')
+												}}
+											>
+												{name}
+											</Button>
+										</div>
+									{/each}
+								</div>
+							{/if}
+						</div>
+					{/each}
+				</div>
+			{:else}
+				<NoItemFound />
+			{/if}
+		</div>
+		<svelte:fragment slot="actions">
+			<slot name="submission" />
+		</svelte:fragment>
+	</DrawerContent>
+</Drawer>

package/package/components/ItemPicker.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        pickCallback: (path: string, f: string) => void;
+        loadItems: () => Promise<Record<string, any>[] | undefined>;
+        extraField?: string | undefined;
+        extraField2?: string | undefined;
+        itemName: string;
+        closeOnClick?: boolean | undefined;
+        /** Displayed if the load function returns no items. */ noItemMessage?: string | undefined;
+        /** Displayed if the search returns no items. */ buttons?: Record<string, (x: string) => void> | undefined;
+        tooltip?: string | undefined;
+        documentationLink?: string | undefined;
+        openDrawer?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        submission: {};
+    };
+};
+export type ItemPickerProps = typeof __propDef.props;
+export type ItemPickerEvents = typeof __propDef.events;
+export type ItemPickerSlots = typeof __propDef.slots;
+export default class ItemPicker extends SvelteComponent<ItemPickerProps, ItemPickerEvents, ItemPickerSlots> {
+    get openDrawer(): () => void;
+}
+export {};

package/package/components/JobArgs.svelte

@@ -0,0 +1,166 @@
+<script>import { ChevronRightSquare, ClipboardCopy, Download, Expand } from 'lucide-svelte';
+import ArgInfo from './ArgInfo.svelte';
+import { Button, Drawer, DrawerContent, Skeleton } from './common';
+import { Highlight } from 'svelte-highlight';
+import { copyToClipboard } from '../utils';
+import { json } from 'svelte-highlight/languages';
+import DataTable from './table/DataTable.svelte';
+import Cell from './table/Cell.svelte';
+import Head from './table/Head.svelte';
+import Row from './table/Row.svelte';
+import HighlightTheme from './HighlightTheme.svelte';
+import { deepEqual } from 'fast-equals';
+import { isWindmillTooBigObject } from './job_args';
+export let id = undefined;
+export let args;
+export let argLabel = undefined;
+export let workspace = undefined;
+let jsonViewer;
+let runLocally;
+let jsonStr = '';
+function pythonCode() {
+    return `
+if __name__ == "__main__":
+${Object.entries(args)
+        .map(([arg, value]) => {
+        return `    ${arg} = ${JSON.stringify(value)}`;
+    })
+        .join('\n')}
+
+	main(${Object.keys(args)
+        .map((x) => `${x} = ${x}`)
+        .join(', ')})
+`;
+}
+function typescriptCode() {
+    return `
+if (import.meta.main) {
+${Object.entries(args)
+        .map(([arg, value]) => {
+        return `  let ${arg} = ${JSON.stringify(value)}`;
+    })
+        .join('\n')}
+
+  await main(...)
+}
+`;
+}
+</script>
+
+{#if args && typeof args === 'object' && deepEqual( Object.keys(args), ['reason'] ) && args['reason'] == 'PREPROCESSOR_ARGS_ARE_DISCARDED'}
+	Preprocessor args are discarded
+{:else if id && workspace && args && typeof args === 'object' && deepEqual( Object.keys(args), ['reason'] ) && args['reason'] == 'WINDMILL_TOO_BIG'}
+	The args are too big in size to be able to fetch alongside job. Please <a
+		href="/api/w/{workspace}/jobs_u/get_args/{id}"
+		target="_blank">download the JSON file to view them</a
+	>.
+{:else}
+	<div class="relative">
+		<DataTable size="sm">
+			<Head>
+				<tr class="w-full">
+					<Cell head first>{argLabel ?? 'Arg'}</Cell>
+					<Cell head last>Value</Cell>
+				</tr>
+				<svelte:fragment slot="headerAction">
+					<button
+						on:click={() => {
+							jsonStr = JSON.stringify(args, null, 4)
+							jsonViewer.openDrawer()
+						}}
+					>
+						<Expand size={18} />
+					</button>
+				</svelte:fragment>
+			</Head>
+
+			<tbody class="divide-y w-full">
+				{#if args && Object.keys(args).length > 0}
+					{#each Object.entries(args).sort((a, b) => a[0].localeCompare(b[0])) as [arg, value]}
+						<Row>
+							<Cell first>{arg}</Cell>
+							<Cell last><ArgInfo {value} /></Cell>
+						</Row>
+					{/each}
+				{:else if args}
+					<Row><Cell>No arguments</Cell></Row>
+				{:else}
+					<Row>
+						<Cell first>
+							<Skeleton layout={[[1], 0.5, [1]]} />
+						</Cell>
+						<Cell last>
+							<Skeleton layout={[[1], 0.5, [1]]} />
+						</Cell>
+					</Row>
+				{/if}
+			</tbody>
+		</DataTable>
+	</div>
+{/if}
+
+<HighlightTheme />
+
+<Drawer bind:this={jsonViewer} size="900px">
+	<DrawerContent title="Expanded Args" on:close={jsonViewer.closeDrawer}>
+		<svelte:fragment slot="actions">
+			<Button
+				download="windmill-args.json"
+				href={id && workspace
+					? `/api/w/${workspace}/jobs_u/get_args/${id}`
+					: `data:text/json;charset=utf-8,${encodeURIComponent(jsonStr)}`}
+				startIcon={{ icon: Download }}
+				size="xs"
+				color="light"
+			>
+				Download
+			</Button>
+			<Button
+				on:click={runLocally.openDrawer}
+				color="light"
+				size="xs"
+				startIcon={{ icon: ChevronRightSquare }}
+			>
+				Use in a local script
+			</Button>
+			<Button
+				on:click={() => copyToClipboard(jsonStr)}
+				color="light"
+				size="xs"
+				startIcon={{ icon: ClipboardCopy }}
+			>
+				Copy to clipboard
+			</Button>
+		</svelte:fragment>
+		{#if jsonStr.length > 100000 || (id && workspace && args && isWindmillTooBigObject(args))}
+			<div class="text-sm mb-2 text-tertiary">
+				<a
+					download="windmill-args.json"
+					href={id && workspace
+						? `/api/w/${workspace}/jobs_u/get_args/${id}`
+						: `data:text/json;charset=utf-8,${encodeURIComponent(jsonStr)}`}
+				>
+					JSON is too large to be displayed in full.
+				</a></div
+			>
+		{:else}
+			<Highlight language={json} code={jsonStr.replace(/\\n/g, '\n')} />
+		{/if}
+	</DrawerContent>
+</Drawer>
+<Drawer bind:this={runLocally} size="900px">
+	<DrawerContent title="Run locally" on:close={runLocally.closeDrawer}>
+		<h3 class="mb-2">Envs</h3>
+		If using the wmill client in your code, set the following env variables:
+		<pre
+			><code
+				>BASE_URL="{window.location.origin}"
+WM_TOKEN="{'<TOKEN>'}"</code
+			></pre
+		>
+		<h3 class="mt-8">TypeScript</h3>
+		<pre><code>{typescriptCode()}</code></pre>
+		<h3 class="mt-8">Python</h3>
+		<pre><code>{pythonCode()}</code></pre>
+	</DrawerContent>
+</Drawer>

package/package/components/JobArgs.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        args: any;
+        argLabel?: string | undefined;
+        workspace?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type JobArgsProps = typeof __propDef.props;
+export type JobArgsEvents = typeof __propDef.events;
+export type JobArgsSlots = typeof __propDef.slots;
+export default class JobArgs extends SvelteComponent<JobArgsProps, JobArgsEvents, JobArgsSlots> {
+}
+export {};

package/package/components/JobLogs.svelte

@@ -0,0 +1,12 @@
+<script>import { JobService } from '../gen';
+import { workspaceStore } from '../stores';
+import LogViewer from './LogViewer.svelte';
+export let jobId;
+let logs = undefined;
+$: jobId && loadLogs();
+async function loadLogs() {
+    logs = await JobService.getJobLogs({ workspace: $workspaceStore, id: jobId });
+}
+</script>
+
+<LogViewer content={logs} isLoading={false} tag={undefined} {jobId} />

package/package/components/JobLogs.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        jobId: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type JobLogsProps = typeof __propDef.props;
+export type JobLogsEvents = typeof __propDef.events;
+export type JobLogsSlots = typeof __propDef.slots;
+export default class JobLogs extends SvelteComponent<JobLogsProps, JobLogsEvents, JobLogsSlots> {
+}
+export {};

package/package/components/JobStatus.svelte

@@ -0,0 +1,45 @@
+<script>import { displayDate } from '../utils';
+import Badge from './common/badge/Badge.svelte';
+import { forLater } from '../forLater';
+import DurationMs from './DurationMs.svelte';
+import { Calendar, CheckCircle2, Circle, Clock, XCircle } from 'lucide-svelte';
+import NoWorkerWithTagWarning from './runs/NoWorkerWithTagWarning.svelte';
+const SMALL_ICON_SIZE = 12;
+export let job;
+</script>
+
+{#if job && 'success' in job && job.success}
+	<div class="flex flex-row flex-wrap gap-y-1 mb-1 gap-x-2">
+		<Badge large color="green" icon={{ icon: CheckCircle2, position: 'left' }}>
+			Success {job.is_skipped ? '(Skipped)' : ''}
+		</Badge>
+		<DurationMs duration_ms={job.duration_ms} self_wait_time_ms={job?.self_wait_time_ms} aggregate_wait_time_ms={job?.aggregate_wait_time_ms} />
+	</div>
+{:else if job && 'success' in job}
+	<div class="flex flex-row flex-wrap gap-y-1 mb-1 gap-x-2">
+		<Badge large color="red" icon={{ icon: XCircle, position: 'left' }}>Failed</Badge>
+		<DurationMs duration_ms={job.duration_ms} self_wait_time_ms={job?.self_wait_time_ms} aggregate_wait_time_ms={job?.aggregate_wait_time_ms} />
+	</div>
+{:else if job && 'running' in job && job.running}
+	<div>
+		<Badge large color="yellow" icon={{ icon: Clock, position: 'left' }}>
+			Running
+			{#if job.flow_status}
+				({job.flow_status?.step + 1 ?? ''} of {job.raw_flow?.modules?.length ?? '?'})
+			{/if}
+		</Badge>
+	</div>
+{:else if job && 'running' in job && 'scheduled_for' in job && job.scheduled_for && forLater(job.scheduled_for)}
+	<div>
+		<Badge color="blue" icon={{ icon: Calendar, position: 'left' }}>
+			Scheduled for {displayDate(job.scheduled_for)}
+		</Badge>
+	</div>
+{:else if job && 'running' in job}
+	<div class="flex flex-row gap-1 items-center">
+		<Badge color="orange" icon={{ icon: Clock, position: 'left' }}>Queued</Badge>
+		<NoWorkerWithTagWarning tag={job.tag} />
+	</div>
+{:else}
+	<Circle size={SMALL_ICON_SIZE} class="text-gray-200" />
+{/if}

package/package/components/JobStatus.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { CompletedJob, QueuedJob } from '../gen';
+declare const __propDef: {
+    props: {
+        job: QueuedJob | CompletedJob | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type JobStatusProps = typeof __propDef.props;
+export type JobStatusEvents = typeof __propDef.events;
+export type JobStatusSlots = typeof __propDef.slots;
+export default class JobStatus extends SvelteComponent<JobStatusProps, JobStatusEvents, JobStatusSlots> {
+}
+export {};

package/package/components/JsonEditor.svelte

@@ -0,0 +1,46 @@
+<script>import '@codingame/monaco-vscode-standalone-json-language-features';
+import SimpleEditor from './SimpleEditor.svelte';
+export let code;
+export let value = undefined;
+export let error = '';
+export let editor = undefined;
+export let small = false;
+$: tooBig = code && code?.length > 1000000;
+function parseJson() {
+    try {
+        if (code == '') {
+            value = undefined;
+            error = '';
+            return;
+        }
+        value = JSON.parse(code ?? '');
+        error = '';
+    }
+    catch (e) {
+        error = e.message;
+    }
+}
+$: code != undefined && parseJson();
+</script>
+
+{#if tooBig}
+	<span class="text-tertiary">JSON to edit is too big</span>
+{:else}
+	<div class="flex flex-col w-full">
+		<div class="border w-full">
+			<SimpleEditor
+				{small}
+				on:focus
+				on:blur
+				bind:this={editor}
+				on:change
+				autoHeight
+				lang="json"
+				bind:code
+			/>
+		</div>
+		{#if error != ''}
+			<span class="text-red-600 text-xs">{error}</span>
+		{/if}
+	</div>
+{/if}

package/package/components/JsonEditor.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+import '@codingame/monaco-vscode-standalone-json-language-features';
+import SimpleEditor from './SimpleEditor.svelte';
+declare const __propDef: {
+    props: {
+        code: string | undefined;
+        value?: any;
+        error?: string | undefined;
+        editor?: SimpleEditor | undefined;
+        small?: boolean | undefined;
+    };
+    events: {
+        focus: CustomEvent<any>;
+        blur: CustomEvent<any>;
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type JsonEditorProps = typeof __propDef.props;
+export type JsonEditorEvents = typeof __propDef.events;
+export type JsonEditorSlots = typeof __propDef.slots;
+export default class JsonEditor extends SvelteComponent<JsonEditorProps, JsonEditorEvents, JsonEditorSlots> {
+}
+export {};

package/package/components/JsonInputs.svelte

@@ -0,0 +1,63 @@
+<script>import SimpleEditor from './SimpleEditor.svelte';
+import { createEventDispatcher } from 'svelte';
+import { clickOutside } from '../utils';
+const dispatch = createEventDispatcher();
+export let updateOnBlur = true;
+export let placeholder = 'Write a JSON payload. The input schema will be inferred.<br/><br/>Example:<br/><br/>{<br/>&nbsp;&nbsp;"foo": "12"<br/>}';
+let pendingJson = '';
+let simpleEditor = undefined;
+function updatePayloadFromJson(jsonInput) {
+    if (jsonInput === undefined || jsonInput === null || jsonInput.trim() === '') {
+        dispatch('select', undefined);
+        return;
+    }
+    try {
+        const parsed = JSON.parse(jsonInput);
+        dispatch('select', parsed);
+    }
+    catch (error) {
+        dispatch('select', undefined);
+    }
+}
+export function setCode(code) {
+    simpleEditor?.setCode(code);
+}
+async function getPropPickerElements() {
+    const elements = document.querySelectorAll('[data-schema-picker], [data-schema-picker] *');
+    return elements ? Array.from(elements) : [];
+}
+</script>
+
+<div
+	class="h-full"
+	use:clickOutside={{ capture: false, exclude: getPropPickerElements }}
+	on:click_outside={() => {
+		if (updateOnBlur) {
+			updatePayloadFromJson('')
+		}
+	}}
+>
+	<SimpleEditor
+		bind:this={simpleEditor}
+		on:focus={() => {
+			if (updateOnBlur) {
+				dispatch('focus')
+				updatePayloadFromJson(pendingJson)
+			}
+		}}
+		on:blur={async () => {
+			if (updateOnBlur) {
+				dispatch('blur')
+			}
+		}}
+		on:change={(e) => {
+			if (e.detail?.code !== undefined) {
+				updatePayloadFromJson(e.detail.code)
+			}
+		}}
+		bind:code={pendingJson}
+		lang="json"
+		class="h-full"
+		{placeholder}
+	/>
+</div>

package/package/components/JsonInputs.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        updateOnBlur?: boolean | undefined;
+        placeholder?: string | undefined;
+        setCode?: ((code: string) => void) | undefined;
+    };
+    events: {
+        focus: CustomEvent<any>;
+        blur: CustomEvent<any>;
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type JsonInputsProps = typeof __propDef.props;
+export type JsonInputsEvents = typeof __propDef.events;
+export type JsonInputsSlots = typeof __propDef.slots;
+export default class JsonInputs extends SvelteComponent<JsonInputsProps, JsonInputsEvents, JsonInputsSlots> {
+    get setCode(): (code: string) => void;
+}
+export {};