windmill-components 1.532.0 → 1.542.4

package/package/components/runs/JobRunsPreview.svelte

@@ -15,7 +15,7 @@ import WorkflowTimeline from '../WorkflowTimeline.svelte';
 import Popover from '../Popover.svelte';
 import { isFlowPreview, isScriptPreview, truncateRev } from '../../utils';
 import { createEventDispatcher, setContext, untrack } from 'svelte';
-import { ListFilter } from 'lucide-svelte';
+import { ListFilter, LoaderCircle } from 'lucide-svelte';
 import FlowAssetsHandler, { initFlowGraphAssetsCtx } from '../flows/FlowAssetsHandler.svelte';
 import JobAssetsViewer from '../assets/JobAssetsViewer.svelte';
 let { id, blankLink = false, workspace } = $props();
@@ -55,199 +55,234 @@ $effect(() => {
     job?.id && lastJobId !== job.id && untrack(() => job && getConcurrencyKey(job));
 });
 let jobLoader = $state(undefined);
+// Set all tabs content to the same height to prevent layout jumps
+let tabsHeight = $state({
+    codeHeight: 0,
+    logsHeight: 0,
+    assetsHeight: 0,
+    resultHeight: 0
+});
+let minTabHeight = $derived(Math.max(tabsHeight.codeHeight, tabsHeight.logsHeight, tabsHeight.assetsHeight, tabsHeight.resultHeight));
+let jobIsLoading = $state(false);
 </script>
 
-<JobLoader workspaceOverride={workspace} bind:job={currentJob} bind:this={jobLoader} />
-
-<div class="p-4 flex flex-col gap-2 items-start h-full">
-	{#if job}
-		<div class="flex gap-2 flex-wrap">
-			{#if job?.['priority']}
-				<Badge color="red">
-					priority: {job?.['priority']}
-				</Badge>
-			{/if}
-			{#if job && 'duration_ms' in job && job.duration_ms != undefined}
-				<DurationMs
-					duration_ms={job.duration_ms}
-					self_wait_time_ms={job?.self_wait_time_ms}
-					aggregate_wait_time_ms={job?.aggregate_wait_time_ms}
-				/>
-			{/if}
-			{#if job?.['mem_peak']}
-				<Badge large>
-					Mem: {job?.['mem_peak'] ? `${(job['mem_peak'] / 1024).toPrecision(4)}MB` : 'N/A'}
-				</Badge>
-			{/if}
-			{#if workspace && $workspaceStore != workspace}
-				<Badge large>
-					Workspace: {workspace}
-				</Badge>
-			{/if}
-			{#if job.tag}
-				<Badge large>
-					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>
-					{#snippet text()}
-						This job 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>
-					{/snippet}
-					<Badge large>Concurrency: {truncateRev(concurrencyKey, 20)}</Badge>
-				</Popover>
-			{/if}
-			{#if job?.worker}
-				<Popover notClickable>
-					{#snippet text()}
-						This job was run on worker:
-						<Button
-							class="inline-text"
-							size="xs2"
-							color="light"
-							on:click={() => {
-								dispatch('filterByWorker', job?.worker)
-							}}
-						>
-							{job?.worker}
-							<ListFilter class="inline-block" size={10} />
-						</Button>
-					{/snippet}
-					<Badge large>Worker: {truncateRev(job.worker, 20)}</Badge>
-				</Popover>
-			{/if}
-		</div>
-		<a
-			href="{base}/run/{job?.id}?workspace={job?.workspace_id}"
-			class="flex flex-row gap-1 items-center"
-			target={blankLink ? '_blank' : undefined}
-		>
-			<span class="font-semibold text-sm leading-6">ID:</span>
-			<span class="text-sm">{job?.id ?? ''}</span>
-		</a>
-
-		<span class="font-semibold text-xs leading-6">Arguments</span>
-
-		<div class="w-full">
-			<JobArgs
-				id={job?.id}
-				workspace={job?.workspace_id ?? $workspaceStore ?? 'no_w'}
-				args={job?.args}
-			/>
-		</div>
-
-		{#if job?.type === 'CompletedJob'}
-			<span class="font-semibold text-xs leading-6">Results</span>
-		{/if}
+<JobLoader
+	workspaceOverride={workspace}
+	bind:job={currentJob}
+	bind:isLoading={jobIsLoading}
+	bind:this={jobLoader}
+/>
 
-		{#if job && 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}
-			<div class="text-sm font-semibold text-tertiary mb-1">
-				<div>Job is scheduled for</div>
-				<div>{new Date(job?.['scheduled_for']).toLocaleString()}</div>
+<div class="h-full overflow-y-auto">
+	<div class="flex flex-col gap-2 items-start p-4 pb-8 min-h-full">
+		{#if job}
+			<div class="flex gap-2 flex-wrap">
+				{#if job?.['priority']}
+					<Badge color="red">
+						priority: {job?.['priority']}
+					</Badge>
+				{/if}
+				{#if job && 'duration_ms' in job && job.duration_ms != undefined}
+					<DurationMs
+						duration_ms={job.duration_ms}
+						self_wait_time_ms={job?.self_wait_time_ms}
+						aggregate_wait_time_ms={job?.aggregate_wait_time_ms}
+					/>
+				{/if}
+				{#if job?.['mem_peak']}
+					<Badge large>
+						Mem: {job?.['mem_peak'] ? `${(job['mem_peak'] / 1024).toPrecision(4)}MB` : 'N/A'}
+					</Badge>
+				{/if}
+				{#if workspace && $workspaceStore != workspace}
+					<Badge large>
+						Workspace: {workspace}
+					</Badge>
+				{/if}
+				{#if job.tag}
+					<Badge large>
+						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>
+						{#snippet text()}
+							This job 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>
+						{/snippet}
+						<Badge large>Concurrency: {truncateRev(concurrencyKey, 20)}</Badge>
+					</Popover>
+				{/if}
+				{#if job?.worker}
+					<Popover notClickable>
+						{#snippet text()}
+							This job was run on worker:
+							<Button
+								class="inline-text"
+								size="xs2"
+								color="light"
+								on:click={() => {
+									dispatch('filterByWorker', job?.worker)
+								}}
+							>
+								{job?.worker}
+								<ListFilter class="inline-block" size={10} />
+							</Button>
+						{/snippet}
+						<Badge large>Worker: {truncateRev(job.worker, 20)}</Badge>
+					</Popover>
+				{/if}
 			</div>
-		{/if}
+			<a
+				href="{base}/run/{job?.id}?workspace={job?.workspace_id}"
+				class="flex flex-row gap-1 items-center"
+				target={blankLink ? '_blank' : undefined}
+			>
+				<span class="font-semibold text-sm leading-6">ID:</span>
+				<span class="text-sm">{job?.id ?? ''}</span>
+			</a>
 
-		<div class=" w-full rounded-md min-h-full">
-			{#if job?.workflow_as_code_status}
-				<WorkflowTimeline
-					flow_status={asWorkflowStatus(job.workflow_as_code_status)}
-					flowDone={job.type == 'CompletedJob'}
+			<div class="w-full">
+				<JobArgs
+					id={job?.id}
+					workspace={job?.workspace_id ?? $workspaceStore ?? 'no_w'}
+					args={job?.args}
 				/>
+			</div>
+
+			{#if job && 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}
+				<div class="text-sm font-semibold text-tertiary mb-1">
+					<div>Job is scheduled for</div>
+					<div>{new Date(job?.['scheduled_for']).toLocaleString()}</div>
+				</div>
 			{/if}
 
-			{#if job?.type === 'CompletedJob'}
-				<Tabs bind:selected={viewTab}>
-					<Tab size="xs" value="result">Result</Tab>
-					<Tab size="xs" value="logs">Logs</Tab>
-					<Tab size="xs" value="assets">Assets</Tab>
-					{#if isScriptPreview(job?.job_kind)}
-						<Tab size="xs" value="code">Code</Tab>
-					{/if}
-				</Tabs>
+			<div class="w-full rounded-md min-h-full">
+				{#if job?.workflow_as_code_status}
+					<WorkflowTimeline
+						flow_status={asWorkflowStatus(job.workflow_as_code_status)}
+						flowDone={job.type == 'CompletedJob'}
+					/>
+				{/if}
 
-				<Skeleton loading={!job} layout={[[5]]} />
-				{#if job}
-					{#if viewTab == 'result' && (job?.job_kind == 'flow' || isFlowPreview(job?.job_kind))}
-						<div class="flex flex-col gap-2">
-							<div class="w-full mt-10 mb-20">
-								<FlowStatusViewer jobId={job.id} workspaceId={job.workspace_id} />
-							</div>
+				{#if job?.type === 'CompletedJob'}
+					{#if job?.job_kind == 'flow' || isFlowPreview(job?.job_kind)}
+						<div class="w-full mt-8 mb-20">
+							<FlowStatusViewer jobId={job.id} workspaceId={job.workspace_id} wideResults
+							></FlowStatusViewer>
 						</div>
-					{:else if viewTab == 'assets'}
-						<JobAssetsViewer {job} />
 					{:else}
-						<div class="flex flex-col border rounded-md p-2 mt-2 h-full overflow-auto">
-							{#if viewTab == 'logs'}
-								<div class="w-full">
-									<LogViewer
-										jobId={job.id}
-										duration={job?.['duration_ms']}
-										mem={job?.['mem_peak']}
-										isLoading={job?.['running'] == false}
-										content={job?.logs}
-										tag={job?.tag}
-									/>
-								</div>
-							{:else if viewTab == 'code'}
-								{#if job && 'raw_code' in job && job.raw_code}
-									<div class="text-xs">
-										<HighlightCode lines language={job.language} code={job.raw_code} />
+						<Tabs bind:selected={viewTab}>
+							<Tab size="xs" value="result">Results</Tab>
+							<Tab size="xs" value="logs">Logs</Tab>
+							<Tab size="xs" value="assets">Assets</Tab>
+							{#if isScriptPreview(job?.job_kind)}
+								<Tab size="xs" value="code">Code</Tab>
+							{/if}
+						</Tabs>
+
+						<Skeleton loading={!job} layout={[[5]]} />
+						{#if job}
+							<div class="flex flex-col border rounded-md p-2 mt-2 overflow-auto">
+								{#if viewTab == 'logs'}
+									<div
+										class="w-full"
+										bind:clientHeight={tabsHeight.logsHeight}
+										style="min-height: {minTabHeight}px"
+									>
+										<LogViewer
+											jobId={job.id}
+											duration={job?.['duration_ms']}
+											mem={job?.['mem_peak']}
+											isLoading={job?.['running'] == false}
+											content={job?.logs}
+											tag={job?.tag}
+										/>
+									</div>
+								{:else if viewTab == 'assets'}
+									<div
+										class="w-full h-full"
+										bind:clientHeight={tabsHeight.assetsHeight}
+										style="min-height: {minTabHeight}px"
+									>
+										<JobAssetsViewer {job} />
+									</div>
+								{:else if viewTab == 'code'}
+									<div
+										class="text-xs"
+										bind:clientHeight={tabsHeight.codeHeight}
+										style="min-height: {minTabHeight}px"
+									>
+										{#if job && 'raw_code' in job && job.raw_code}
+											<div class="text-xs">
+												<HighlightCode lines language={job.language} code={job.raw_code} />
+											</div>
+										{:else if job}
+											<span class="text-sm">No code available</span>
+										{:else}
+											<Skeleton layout={[[5]]} />
+										{/if}
+									</div>
+								{:else if job !== undefined && (job.result_stream || (job.type == 'CompletedJob' && job.result !== undefined))}
+									<div
+										class="w-full"
+										bind:clientHeight={tabsHeight.resultHeight}
+										style="min-height: {minTabHeight}px"
+									>
+										<DisplayResult
+											workspaceId={job?.workspace_id}
+											jobId={job?.id}
+											{result}
+											disableExpand
+											language={job?.language}
+										/>
 									</div>
 								{:else if job}
-									No code is available
-								{:else}
-									<Skeleton layout={[[5]]} />
+									No output is available yet
 								{/if}
-							{:else if job !== undefined && (job.result_stream || (job.type == 'CompletedJob' && job.result !== undefined))}
-								<DisplayResult
-									workspaceId={job?.workspace_id}
-									jobId={job?.id}
-									{result}
-									disableExpand
-									language={job?.language}
-								/>
-							{:else if job}
-								No output is available yet
-							{/if}
+							</div>
+						{/if}
+					{/if}
+				{:else if job && `running` in job ? job.running : false}
+					{#if job?.job_kind == 'flow' || isFlowPreview(job?.job_kind)}
+						<div class="flex flex-col gap-2 w-full">
+							<FlowProgressBar {job} class="py-4" />
+							<FlowStatusViewer jobId={job.id} workspaceId={job.workspace_id} />
 						</div>
+					{:else}
+						<div class="text-sm font-semibold text-tertiary mb-1"> Job is still running </div>
+						<LogViewer
+							jobId={job?.id}
+							duration={job?.['duration_ms']}
+							mem={job?.['mem_peak']}
+							content={job?.logs}
+							isLoading={job?.['running'] == false}
+							tag={job?.tag}
+						/>
 					{/if}
 				{/if}
-			{:else if job && `running` in job ? job.running : false}
-				{#if job?.job_kind == 'flow' || isFlowPreview(job?.job_kind)}
-					<div class="flex flex-col gap-2 w-full">
-						<FlowProgressBar {job} class="py-4" />
-						<FlowStatusViewer jobId={job.id} workspaceId={job.workspace_id} />
-					</div>
-				{:else}
-					<div class="text-sm font-semibold text-tertiary mb-1"> Job is still running </div>
-					<LogViewer
-						jobId={job?.id}
-						duration={job?.['duration_ms']}
-						mem={job?.['mem_peak']}
-						content={job?.logs}
-						isLoading={job?.['running'] == false}
-						tag={job?.tag}
-					/>
-				{/if}
-			{/if}
-		</div>
-	{/if}
+			</div>
+		{:else if jobIsLoading}
+			<div class="mx-auto my-auto">
+				<LoaderCircle size={20} class="animate-spin" />
+			</div>
+		{/if}
+	</div>
 </div>
 <FlowAssetsHandler
 	modules={job?.raw_flow?.modules ?? []}

package/package/components/runs/JobsLoader.svelte

@@ -103,7 +103,7 @@ async function fetchJobs(startedBefore, startedAfter, startedAfterCompletedJobs,
                 : undefined,
             allWorkspaces: allWorkspaces ? true : undefined,
             perPage,
-            allowWildcards
+            allowWildcards: allowWildcards ? true : undefined
         });
     }
     catch (e) {
@@ -276,7 +276,7 @@ async function syncer() {
                     if (isQueuedJob) {
                         if (cursor > 0) {
                             let inc = invCursor == 0 && jobs[invCursor].type == 'CompletedJob' ? 0 : 1;
-                            const date = new Date(jobs[invCursor + inc]?.started_at ?? jobs[invCursor + inc]?.created_at);
+                            const date = new Date(jobs[invCursor + inc]?.created_at);
                             date.setMilliseconds(date.getMilliseconds() + 1);
                             ts = date.toISOString();
                         }

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

@@ -43,6 +43,6 @@ interface Props {
 declare const JobsLoader: import("svelte").Component<Props, {
     loadExtraJobs: () => Promise<boolean>;
     loadJobs: (nMinTs: string | undefined, nMaxTs: string | undefined, reset: boolean, shouldGetCount?: boolean) => Promise<void>;
-}, "jobs" | "loading" | "minTs" | "maxTs" | "jobKinds" | "queue_count" | "suspended_count" | "completedJobs" | "externalJobs" | "extendedJobs">;
+}, "jobs" | "loading" | "extendedJobs" | "minTs" | "maxTs" | "jobKinds" | "queue_count" | "suspended_count" | "completedJobs" | "externalJobs">;
 type JobsLoader = ReturnType<typeof JobsLoader>;
 export default JobsLoader;

package/package/components/runs/NoWorkerWithTagWarning.svelte

@@ -1,15 +1,25 @@
 <script lang="ts">import { WorkerService } from '../../gen';
 import { AlertTriangle } from 'lucide-svelte';
 import Popover from '../Popover.svelte';
-import { onDestroy } from 'svelte';
+import { onDestroy, untrack } from 'svelte';
 let { tag, tagLabel = undefined } = $props();
 let noWorkerWithTag = $state(false);
 let timeout = undefined;
 let visible = true;
+let customTag = $derived.by(() => {
+    if (tag.includes('$workspace') || tag.includes('$args'))
+        return;
+    if (tag.includes('(')) {
+        return tag.split('(')[0];
+    }
+    return tag;
+});
 async function lookForTag() {
     try {
-        const existsWorkerWithTag = await WorkerService.existsWorkersWithTags({ tags: tag });
-        noWorkerWithTag = !existsWorkerWithTag[tag];
+        if (!customTag)
+            return;
+        const existsWorkerWithTag = await WorkerService.existsWorkersWithTags({ tags: customTag });
+        noWorkerWithTag = !existsWorkerWithTag[customTag];
         if (noWorkerWithTag) {
             timeout = setTimeout(() => {
                 if (visible) {
@@ -22,7 +32,10 @@ async function lookForTag() {
         console.error(err);
     }
 }
-lookForTag();
+$effect(() => {
+    customTag;
+    untrack(() => lookForTag());
+});
 onDestroy(() => {
     visible = false;
     if (timeout) {
@@ -35,7 +48,7 @@ onDestroy(() => {
 	<Popover notClickable placement="top">
 		<AlertTriangle size={16} class="text-yellow-500" />
 		{#snippet text()}
-			No worker with {tagLabel ?? 'tag'} <b>{tag}</b> is currently running.
+			No worker with {tagLabel ?? 'tag'} <b>{customTag}</b> is currently running.
 		{/snippet}
 	</Popover>
 {/if}

package/package/components/runs/RunBadges.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">import Tooltip from '../meltComponents/Tooltip.svelte';
+import PreprocessedArgsDisplay from './PreprocessedArgsDisplay.svelte';
+import { truncateHash } from '../../utils';
+import { base } from '$app/paths';
+import { truncateRev } from '../../utils';
+import WorkerHostname from '../WorkerHostname.svelte';
+import { workspaceStore } from '../../stores';
+import Badge from '../common/badge/Badge.svelte';
+let { job, displayPersistentScriptDefinition, openPersistentScriptDrawer, concurrencyKey, showScriptHash = true, verySmall = false } = $props();
+</script>
+
+{#if job.script_hash && showScriptHash && job.job_kind !== 'aiagent'}
+	{#if job.job_kind == 'script'}
+		<a href="{base}/scripts/get/{job.script_hash}?workspace={$workspaceStore}"
+			><Badge color="gray" {verySmall}>{truncateHash(job.script_hash)}</Badge></a
+		>
+	{:else}
+		<div>
+			<Badge color="gray" {verySmall}>{truncateHash(job.script_hash)}</Badge>
+		</div>
+	{/if}
+{/if}
+{#if job && 'job_kind' in job}
+	<div>
+		<Badge color="blue" {verySmall}>{job.job_kind}</Badge>
+	</div>
+{/if}
+{#if job && job.flow_status && job.job_kind === 'script'}
+	<PreprocessedArgsDisplay preprocessed={job.preprocessed} />
+{/if}
+{#if displayPersistentScriptDefinition}
+	<button onclick={() => openPersistentScriptDrawer?.()}>
+		<Badge color="red">persistent</Badge>
+	</button>
+{/if}
+{#if job && 'priority' in job}
+	<div>
+		<Badge color="blue" {verySmall}>priority: {job.priority}</Badge>
+	</div>
+{/if}
+{#if job.tag}
+	<!-- for related places search: ADD_NEW_LANG -->
+	<div>
+		<Badge color="indigo" {verySmall}>Tag: {job.tag}</Badge>
+	</div>
+{/if}
+{#if !job.visible_to_owner}
+	<div>
+		<Badge color="red" {verySmall}>
+			only visible to you
+			<Tooltip>
+				{#snippet text()}
+					The option to hide this run from the owner of this script or flow was activated
+				{/snippet}
+			</Tooltip>
+		</Badge>
+	</div>
+{/if}
+{#if job?.['labels'] && Array.isArray(job?.['labels']) && job?.['labels'].length > 0}
+	{#each job?.['labels'] as label}
+		<div>
+			<Badge {verySmall}>Label: {label}</Badge>
+		</div>
+	{/each}
+{/if}
+{#if concurrencyKey}
+	<div>
+		<Tooltip notClickable>
+			{#snippet text()}
+				This job has concurrency limits enabled with the key
+				<a
+					href={`${base}/runs/?job_kinds=all&graph=ConcurrencyChart&concurrency_key=${concurrencyKey}`}
+				>
+					{concurrencyKey}
+				</a>
+			{/snippet}
+			<a
+				href={`${base}/runs/?job_kinds=all&graph=ConcurrencyChart&concurrency_key=${concurrencyKey}`}
+			>
+				<Badge {verySmall}>Concurrency: {truncateRev(concurrencyKey, 20)}</Badge></a
+			>
+		</Tooltip>
+	</div>
+{/if}
+{#if job?.worker}
+	<div>
+		<Tooltip notClickable>
+			{#snippet text()}
+				worker:
+				<a href={`${base}/runs/?job_kinds=all&worker=${job?.worker}`}>
+					{job?.worker}
+				</a><br />
+				<WorkerHostname worker={job?.worker!} minTs={job?.['created_at']} />
+			{/snippet}
+			<a href={`${base}/runs/?job_kinds=all&worker=${job?.worker}`}>
+				<Badge {verySmall}>Worker: {truncateRev(job?.worker, 20)}</Badge></a
+			>
+		</Tooltip>
+	</div>
+{/if}

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

@@ -0,0 +1,12 @@
+import type { Job } from '../../gen';
+interface Props {
+    job: Job;
+    displayPersistentScriptDefinition?: boolean;
+    openPersistentScriptDrawer?: () => void;
+    concurrencyKey?: string;
+    showScriptHash?: boolean;
+    verySmall?: boolean;
+}
+declare const RunBadges: import("svelte").Component<Props, {}, "">;
+type RunBadges = ReturnType<typeof RunBadges>;
+export default RunBadges;