windmill-components 1.472.1 → 1.472.3

package/package/components/FlowInputViewer.svelte

@@ -0,0 +1,25 @@
+<script>import FieldHeader from './FieldHeader.svelte';
+export let schema;
+</script>
+
+<ul class="my-2">
+	{#if schema == undefined}
+		<li class="text-secondary text-xs italic mb-4">No inputs</li>
+	{:else}
+		{#each Object.entries(schema.properties ?? {}) as [inp, v]}
+			<li class="list-disc flex flex-row items-center">
+				<FieldHeader
+					label={inp}
+					required={Array.isArray(schema.required) && schema.required?.includes(inp)}
+					type={v?.type}
+					contentEncoding={v?.contentEncoding}
+					format={v?.format}
+				/><span class="ml-4 mt-1 text-xs"
+					>{v?.default != undefined && v?.default != ''
+						? 'default: ' + JSON.stringify(v?.default)
+						: ''}</span
+				>
+			</li>
+		{/each}
+	{/if}
+</ul>

package/package/components/FlowInputViewer.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { Schema } from '../common';
+declare const __propDef: {
+    props: {
+        schema: Schema | {
+            [key: string]: unknown;
+        } | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowInputViewerProps = typeof __propDef.props;
+export type FlowInputViewerEvents = typeof __propDef.events;
+export type FlowInputViewerSlots = typeof __propDef.slots;
+export default class FlowInputViewer extends SvelteComponent<FlowInputViewerProps, FlowInputViewerEvents, FlowInputViewerSlots> {
+}
+export {};

package/package/components/FlowJobResult.svelte

@@ -0,0 +1,91 @@
+<script>import { Loader2 } from 'lucide-svelte';
+import DisplayResult from './DisplayResult.svelte';
+import LogViewer from './LogViewer.svelte';
+import { JobService } from '../gen';
+import { workspaceStore } from '../stores';
+import DrawerContent from './common/drawer/DrawerContent.svelte';
+import { Drawer } from './common';
+import AllFlowLogs from './AllFlowLogs.svelte';
+export let waitingForExecutor = false;
+export let result;
+export let logs;
+export let col = false;
+export let noBorder = false;
+export let loading;
+export let filename = undefined;
+export let jobId = undefined;
+export let tag = undefined;
+export let workspaceId = undefined;
+export let refreshLog = false;
+export let durationStates;
+export let downloadLogs = true;
+let lastJobId = undefined;
+let drawer = undefined;
+$: jobId != lastJobId && diffJobId();
+let iteration = 0;
+let logOffset = 0;
+async function diffJobId() {
+    if (jobId != lastJobId) {
+        lastJobId = jobId;
+        logs = undefined;
+        logOffset = 0;
+        iteration = 0;
+        getLogs();
+    }
+}
+async function getLogs() {
+    iteration += 1;
+    if (jobId) {
+        const getUpdate = await JobService.getJobUpdates({
+            workspace: workspaceId ?? $workspaceStore,
+            id: jobId,
+            running: loading ?? false,
+            logOffset: logOffset == 0 ? (logs?.length ? logs?.length + 1 : 0) : logOffset
+        });
+        logs = (logs ?? '').concat(getUpdate.new_logs ?? '');
+        logOffset = getUpdate.log_offset ?? 0;
+    }
+    if (refreshLog) {
+        setTimeout(() => {
+            if (refreshLog) {
+                getLogs();
+            }
+        }, iteration < 10 ? 1000 : iteration < 20 ? 2000 : 5000);
+    }
+}
+</script>
+
+<Drawer bind:this={drawer}>
+	<DrawerContent title="Explore all steps' logs" on:close={drawer.closeDrawer}
+		><AllFlowLogs states={durationStates} /></DrawerContent
+	>
+</Drawer>
+<div
+	class:border={!noBorder}
+	class="grid {!col
+		? 'grid-cols-2'
+		: 'grid-rows-2 max-h-screen'} shadow border border-tertiary-inverse grow overflow-hidden"
+>
+	<div class="bg-surface {col ? '' : 'max-h-80'} p-1 overflow-auto relative">
+		<span class="text-tertiary">Result</span>
+		{#if result !== undefined}
+			<DisplayResult {workspaceId} {jobId} {filename} {result} />
+		{:else if loading}
+			<Loader2 class="animate-spin" />
+		{:else}
+			<div class="text-gray-400">No result (result is undefined)</div>
+		{/if}
+	</div>
+	<div class="overflow-auto {col ? '' : 'max-h-80'} relative">
+		<div class="absolute z-40 text-xs top-0 left-1"
+			><button class="" on:click={drawer.openDrawer}>explore all steps' logs</button></div
+		>
+		<LogViewer
+			download={downloadLogs}
+			content={logs ?? ''}
+			{jobId}
+			isLoading={waitingForExecutor}
+			{tag}
+		/>
+	</div>
+</div>

package/package/components/FlowJobResult.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponent } from "svelte";
+import type { DurationStatus } from './graph';
+import type { Writable } from 'svelte/store';
+declare const __propDef: {
+    props: {
+        waitingForExecutor?: boolean | undefined;
+        result: any;
+        logs: string | undefined;
+        col?: boolean | undefined;
+        noBorder?: boolean | undefined;
+        loading: boolean;
+        filename?: string | undefined;
+        jobId?: string | undefined;
+        tag?: string | undefined;
+        workspaceId?: string | undefined;
+        refreshLog?: boolean | undefined;
+        durationStates: Writable<Record<string, DurationStatus>> | undefined;
+        downloadLogs?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowJobResultProps = typeof __propDef.props;
+export type FlowJobResultEvents = typeof __propDef.events;
+export type FlowJobResultSlots = typeof __propDef.slots;
+export default class FlowJobResult extends SvelteComponent<FlowJobResultProps, FlowJobResultEvents, FlowJobResultSlots> {
+}
+export {};

package/package/components/FlowLoopIterationPreview.svelte

@@ -0,0 +1,162 @@
+<script>import { JobService } from '../gen';
+import { workspaceStore } from '../stores';
+import { Button } from './common';
+import { createEventDispatcher, getContext } from 'svelte';
+import { runFlowPreview } from './flows/utils';
+import SchemaForm from './SchemaForm.svelte';
+import FlowStatusViewer from '../components/FlowStatusViewer.svelte';
+import FlowProgressBar from './flows/FlowProgressBar.svelte';
+import { CornerDownLeft, Play, RefreshCw, X } from 'lucide-svelte';
+export let open;
+export let jobId = undefined;
+export let job = undefined;
+export let modules;
+export let previewArgs = {};
+export let whileLoop = false;
+export const forloopSchema = {
+    $schema: 'https://json-schema.org/draft/2020-12/schema',
+    properties: {
+        iter: {
+            type: 'object',
+            properties: {
+                index: {
+                    type: 'number'
+                },
+                value: {
+                    type: 'object'
+                }
+            }
+        }
+    },
+    required: [],
+    type: 'object'
+};
+export const whileLoopSchema = {
+    $schema: 'https://json-schema.org/draft/2020-12/schema',
+    properties: {
+        iter: {
+            type: 'object',
+            properties: {
+                index: {
+                    type: 'number'
+                }
+            }
+        }
+    },
+    required: [],
+    type: 'object'
+};
+let selectedJobStep = undefined;
+let isRunning = false;
+let jobProgressReset;
+export function test() {
+    runPreview(previewArgs, undefined);
+}
+const { flowStateStore, pathStore } = getContext('FlowEditorContext');
+const dispatch = createEventDispatcher();
+export async function runPreview(args, restartedFrom) {
+    jobProgressReset();
+    const newFlow = { value: { modules }, summary: '' };
+    jobId = await runFlowPreview(args, newFlow, $pathStore, restartedFrom);
+    isRunning = true;
+}
+function onKeyDown(event) {
+    if (open) {
+        switch (event.key) {
+            case 'Enter':
+                if (event.ctrlKey || event.metaKey) {
+                    event.preventDefault();
+                    runPreview(previewArgs, undefined);
+                }
+                break;
+        }
+    }
+}
+$: if (job?.type === 'CompletedJob') {
+    isRunning = false;
+}
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+
+<div class="flex flex-col space-y-2 h-screen bg-surface px-6 py-2 w-full" id="flow-preview-content">
+	<div class="flex flex-row justify-between w-full items-center gap-x-2">
+		<div class="w-8">
+			<Button
+				on:click={() => dispatch('close')}
+				startIcon={{ icon: X }}
+				iconOnly
+				size="sm"
+				color="light"
+				btnClasses="hover:bg-surface-hover  bg-surface-secondaryw-8 h-8 rounded-full p-0"
+			/>
+		</div>
+
+		{#if isRunning}
+			<Button
+				color="red"
+				on:click={async () => {
+					isRunning = false
+					try {
+						jobId &&
+							(await JobService.cancelQueuedJob({
+								workspace: $workspaceStore ?? '',
+								id: jobId,
+								requestBody: {}
+							}))
+					} catch {}
+				}}
+				size="sm"
+				btnClasses="w-full max-w-lg"
+				loading={true}
+				clickableWhileLoading
+			>
+				Cancel
+			</Button>
+		{:else}
+			<Button
+				variant="contained"
+				startIcon={{ icon: isRunning ? RefreshCw : Play }}
+				color="dark"
+				size="sm"
+				btnClasses="w-full max-w-lg"
+				on:click={() => runPreview(previewArgs, undefined)}
+				id="flow-editor-test-flow-drawer"
+				shortCut={{
+					Icon: CornerDownLeft
+				}}
+			>
+				Test iteration
+			</Button>
+		{/if}
+		<div />
+	</div>
+	<div class="w-full flex flex-col gap-y-1">
+		<FlowProgressBar {job} bind:reset={jobProgressReset} />
+	</div>
+	<div class="overflow-y-auto grow pr-4">
+		<div class="max-h-1/2 overflow-auto border-b">
+			<SchemaForm
+				noVariablePicker
+				compact
+				class="py-4 max-w-3xl"
+				schema={whileLoop ? whileLoopSchema : forloopSchema}
+				bind:args={previewArgs}
+			/>
+		</div>
+		<div class="pt-4 grow">
+			{#if jobId}
+				<FlowStatusViewer
+					{flowStateStore}
+					{jobId}
+					on:jobsLoaded={({ detail }) => {
+						job = detail
+					}}
+					bind:selectedJobStep
+				/>
+			{:else}
+				<div class="italic text-tertiary h-full grow"> Flow status will be displayed here </div>
+			{/if}
+		</div>
+	</div>
+</div>

package/package/components/FlowLoopIterationPreview.svelte.d.ts

@@ -0,0 +1,33 @@
+import { SvelteComponent } from "svelte";
+import { type Job, type FlowModule, type RestartedFrom } from '../gen';
+import type { Schema } from '../common';
+declare const __propDef: {
+    props: {
+        open: boolean;
+        jobId?: string | undefined;
+        job?: Job | undefined;
+        modules: FlowModule[];
+        previewArgs?: Record<string, any> | undefined;
+        whileLoop?: boolean | undefined;
+        forloopSchema?: Schema | undefined;
+        whileLoopSchema?: Schema | undefined;
+        test?: (() => void) | undefined;
+        runPreview?: ((args: Record<string, any>, restartedFrom: RestartedFrom | undefined) => Promise<void>) | undefined;
+    };
+    events: {
+        close: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowLoopIterationPreviewProps = typeof __propDef.props;
+export type FlowLoopIterationPreviewEvents = typeof __propDef.events;
+export type FlowLoopIterationPreviewSlots = typeof __propDef.slots;
+export default class FlowLoopIterationPreview extends SvelteComponent<FlowLoopIterationPreviewProps, FlowLoopIterationPreviewEvents, FlowLoopIterationPreviewSlots> {
+    get forloopSchema(): Schema;
+    get whileLoopSchema(): Schema;
+    get test(): () => void;
+    get runPreview(): (args: Record<string, any>, restartedFrom: RestartedFrom | undefined) => Promise<void>;
+}
+export {};

package/package/components/FlowMetadata.svelte

@@ -0,0 +1,124 @@
+<script>import {} from '../gen';
+import { base } from '../base';
+import JobStatus from './JobStatus.svelte';
+import { displayDate, truncateRev } from '../utils';
+import ScheduleEditor from './ScheduleEditor.svelte';
+import TimeAgo from './TimeAgo.svelte';
+import { workspaceStore } from '../stores';
+import Tooltip from './Tooltip.svelte';
+import { Clock, MemoryStick, Calendar, Bot, User, Code2 } from 'lucide-svelte';
+import BarsStaggered from './icons/BarsStaggered.svelte';
+export let job;
+const SMALL_ICON_SIZE = 14;
+export let scheduleEditor;
+</script>
+
+<div
+	class="rounded-md p-3 bg-surface-secondary shadow-sm sm:text-sm md:text-base overflow-x-auto"
+	style="min-height: 150px;"
+>
+	<JobStatus {job} />
+	<div class="flex flex-row gap-2 items-center">
+		<Clock size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
+		<span class="text-2xs text-secondary whitespace-nowrap">
+			{#if job['success'] != undefined}
+				Received job: {displayDate(job.created_at ?? '')}
+			{:else}
+				Received job <TimeAgo date={job.created_at ?? ''} />
+			{/if}
+			<Tooltip small>{job?.created_at}</Tooltip>
+		</span>
+	</div>
+	{#if job && 'started_at' in job && job.started_at}
+		<div class="flex flex-row gap-2 items-center text-sm">
+			<Clock size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
+			<span class="whitespace-nowrap">
+				Started <TimeAgo agoOnlyIfRecent date={job.started_at ?? ''} />
+				<Tooltip small>{job?.started_at}</Tooltip>
+			</span>
+		</div>
+	{/if}
+	{#if job && job['mem_peak']}
+		<div class="flex flex-row gap-2 items-center text-sm">
+			<MemoryStick size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
+			<span> Mem peak: {(job['mem_peak'] / 1024).toPrecision(5)}MB</span>
+		</div>
+	{/if}
+	<div>
+		{#if job && job.parent_job}
+			{#if job.is_flow_step}
+				<div class="flex flex-row gap-2 items-center text-sm">
+					<BarsStaggered size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
+					<span class="whitespace-nowrap text-sm">
+						Step of flow
+						<a href={`${base}/run/${job.parent_job}?workspace=${$workspaceStore}`}>
+							{truncateRev(job.parent_job, 18)}
+						</a>
+					</span>
+				</div>
+			{:else}
+				<div class="flex flex-row gap-2 items-center text-sm">
+					<Bot size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
+					<span class="whitespace-nowrap">
+						Triggered by parent
+						<a href={`${base}/run/${job.parent_job}?workspace=${$workspaceStore}`}>
+							{job.parent_job}</a
+						>
+					</span>
+				</div>
+			{/if}
+		{:else if job && job.schedule_path}
+			<div class="flex flex-row gap-2 w-full items-center text-sm">
+				<Calendar size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
+				<span class="whitespace-nowrap">
+					Schedule:
+					<!-- svelte-ignore a11y-invalid-attribute -->
+					<a
+						href="#"
+						class="break-words text-blue-600 font-normal"
+						on:click={() =>
+							scheduleEditor?.openEdit(job.schedule_path ?? '', job.job_kind == 'flow')}
+					>
+						{truncateRev(job.schedule_path, 40)}
+					</a>
+				</span>
+			</div>
+		{/if}
+
+		{#if (job && job.job_kind == 'flow') || job?.job_kind == 'script'}
+			{@const stem = `${job?.job_kind}s`}
+			{@const isScript = job?.job_kind === 'script'}
+			{@const viewHref = `${base}/${stem}/get/${isScript ? job?.script_hash : job?.script_path}`}
+			<div class="flex flex-row gap-2 items-center">
+				{#if isScript}
+					<Code2 size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
+				{:else}
+					<BarsStaggered size={SMALL_ICON_SIZE} class="text-secondary" />
+				{/if}
+				<span class="truncate text-sm">
+					<a href={viewHref}>{isScript ? job?.script_hash : job?.script_path}</a>
+				</span>
+			</div>
+		{/if}
+
+		<div class="flex items-center gap-2 text-sm">
+			<User size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
+
+			<span>
+				By {truncateRev(
+					job.created_by ?? 'unknown',
+					40
+				)}{#if (job?.created_by?.length ?? 0) > 40}<Tooltip small
+						><div class="break-all">{job.created_by}</div></Tooltip
+					>{/if}
+				{#if job.permissioned_as !== `u/${job.created_by}` && job.permissioned_as != job.created_by}
+					but permissioned as {job.permissioned_as}
+				{/if}
+			</span>
+		</div>
+	</div>
+	<div class="text-secondary text-2xs pt-2 whitespace-nowrap">
+		run id:
+		<a href={`${base}/run/${job.id}?workspace=${job.workspace_id}`}> {job.id} </a>
+	</div>
+</div>

package/package/components/FlowMetadata.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import { type Job } from '../gen';
+import ScheduleEditor from './ScheduleEditor.svelte';
+declare const __propDef: {
+    props: {
+        job: Job;
+        scheduleEditor: ScheduleEditor;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowMetadataProps = typeof __propDef.props;
+export type FlowMetadataEvents = typeof __propDef.events;
+export type FlowMetadataSlots = typeof __propDef.slots;
+export default class FlowMetadata extends SvelteComponent<FlowMetadataProps, FlowMetadataEvents, FlowMetadataSlots> {
+}
+export {};

package/package/components/FlowPlugConnect.svelte

@@ -0,0 +1,17 @@
+<script>import { Plug } from 'lucide-svelte';
+import { Button } from './common';
+import AnimatedButton from './common/button/AnimatedButton.svelte';
+export let connecting;
+</script>
+
+<AnimatedButton animate={connecting} baseRadius="6px" animationDuration="2s" marginWidth="2px">
+	<Button
+		variant="border"
+		color="light"
+		size="xs2"
+		btnClasses={connecting ? 'text-blue-500' : 'text-primary'}
+		on:click
+	>
+		<Plug size={16} /> &rightarrow;
+	</Button>
+</AnimatedButton>

package/package/components/FlowPlugConnect.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        connecting: boolean;
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowPlugConnectProps = typeof __propDef.props;
+export type FlowPlugConnectEvents = typeof __propDef.events;
+export type FlowPlugConnectSlots = typeof __propDef.slots;
+export default class FlowPlugConnect extends SvelteComponent<FlowPlugConnectProps, FlowPlugConnectEvents, FlowPlugConnectSlots> {
+}
+export {};