windmill-components 1.655.1 → 1.665.0

package/package/components/WorkflowTimeline.svelte

@@ -1,10 +1,26 @@
 <script lang="ts">import { base } from '../base';
-import { displayDate, msToSec } from '../utils';
+import { displayDate, msToSec, emptyString } from '../utils';
 import { onDestroy } from 'svelte';
 import { getDbClockNow } from '../forLater';
-import { Loader2 } from 'lucide-svelte';
+import { ChevronDown, ChevronRight, Loader2, Moon, ShieldCheck } from 'lucide-svelte';
 import TimelineBar from './TimelineBar.svelte';
-let { flow_status, flowDone = false } = $props();
+import LogViewer from './LogViewer.svelte';
+import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
+import { CheckCircle2, XCircle } from 'lucide-svelte';
+import { JobService } from '../gen';
+import { enterpriseLicense, userStore, workspaceStore } from '../stores';
+import { Button } from './common';
+import { Alert } from './common';
+import SchemaForm from './SchemaForm.svelte';
+import { sendUserToast } from '../toast';
+let { flow_status, flowDone = false, stepResults = {}, result = undefined, success = true, autoExpandResult = false, jobId = undefined } = $props();
+let resultExpanded = $state(false);
+// Auto-expand result row when job completes (only if requested)
+$effect(() => {
+    if (autoExpandResult && flowDone && result !== undefined) {
+        resultExpanded = true;
+    }
+});
 let now = $state(getDbClockNow().getTime());
 let interval = setInterval(() => {
     if (!max) {
@@ -13,28 +29,129 @@ let interval = setInterval(() => {
 }, 30);
 onDestroy(() => {
     interval && clearInterval(interval);
+    pollInterval && clearInterval(pollInterval);
 });
 let min = $derived(Object.values(flow_status).reduce((a, b) => Math.min(a, b.scheduled_for ? new Date(b.scheduled_for).getTime() : Infinity), Infinity));
 let max = $derived(flowDone
-    ? Object.values(flow_status).reduce((a, b) => Math.max(a, b.started_at ? new Date(b.started_at).getTime() + (b.duration_ms ?? 0) : 0), 0)
+    ? Object.values(flow_status).reduce((a, b) => {
+        if (!b.started_at)
+            return a;
+        const startedAt = new Date(b.started_at).getTime();
+        // For cancelled steps without duration_ms, use `now` as end time
+        const endAt = b.duration_ms != undefined ? startedAt + b.duration_ms : now;
+        return Math.max(a, endAt);
+    }, 0)
     : undefined);
 let total = $derived(flowDone && max ? max - min : Math.max(now - min, 2000));
+// Collapsible state
+let expandedRows = $state({});
+let childJobs = $state({});
+let loadingJobs = $state({});
+function isStep(key) {
+    return key.startsWith('_step/');
+}
+function stepKey(key) {
+    return key.slice('_step/'.length);
+}
+function toggleRow(id) {
+    expandedRows[id] = !expandedRows[id];
+    if (expandedRows[id] && !isStep(id) && !childJobs[id]) {
+        fetchChildJob(id);
+    }
+}
+async function fetchChildJob(id) {
+    const ws = $workspaceStore;
+    if (!ws)
+        return;
+    loadingJobs[id] = true;
+    try {
+        const job = await JobService.getJob({ workspace: ws, id });
+        childJobs[id] = job;
+    }
+    catch (e) {
+        console.error(`Failed to fetch job ${id}:`, e);
+    }
+    finally {
+        loadingJobs[id] = false;
+    }
+}
+// Poll for updates on expanded in-progress jobs
+let pollInterval = setInterval(() => {
+    for (const [id, v] of Object.entries(flow_status)) {
+        if (isStep(id))
+            continue;
+        const isRunning = !flowDone && v.duration_ms == undefined && v.started_at != undefined;
+        if (expandedRows[id] && isRunning) {
+            fetchChildJob(id);
+        }
+    }
+}, 2000);
+// Approval action state
+let approvalLoading = $state({});
+let approvalFormArgs = $state({});
+async function handleApprove(key, formSchema) {
+    const ws = $workspaceStore;
+    if (!ws || !jobId)
+        return;
+    approvalLoading[key] = true;
+    try {
+        const payload = formSchema && Object.keys(formSchema).length > 0 ? (approvalFormArgs[key] ?? {}) : undefined;
+        await JobService.resumeSuspended({
+            workspace: ws,
+            jobId: jobId,
+            requestBody: { payload, approved: true }
+        });
+        sendUserToast('Approval submitted');
+    }
+    catch (e) {
+        sendUserToast(e?.body ?? e?.message ?? 'Failed to approve', true);
+    }
+    finally {
+        approvalLoading[key] = false;
+    }
+}
+let cancelLoading = $state(false);
+async function handleCancel() {
+    const ws = $workspaceStore;
+    if (!ws || !jobId)
+        return;
+    cancelLoading = true;
+    try {
+        await JobService.resumeSuspended({
+            workspace: ws,
+            jobId: jobId,
+            requestBody: { approved: false }
+        });
+        sendUserToast('Job cancelled');
+    }
+    catch (e) {
+        sendUserToast(e?.body ?? e?.message ?? 'Failed to cancel', true);
+    }
+    finally {
+        cancelLoading = false;
+    }
+}
 </script>
 
 {#if flow_status}
 	<div class="divide-y border-b">
-		<div class="px-2 py-2 grid grid-cols-12 w-full"
-			><div></div>
-			<div class="col-span-11 pt-1 px-2 flex text-2xs text-secondary justify-between"
-				><div>{min ? displayDate(new Date(min), true) : ''}</div>{#if max && min}<div
-						class="hidden lg:block">{msToSec(max - min)}s</div
-					>
-				{/if}<div class="flex gap-1 items-center font-mono"
-					>{max ? displayDate(new Date(max), true) : ''}{#if !max && min}{#if now}
+		<div class="px-2 py-2 grid grid-cols-12 w-full">
+			<div></div>
+			<div class="col-span-11 pt-1 px-2 flex text-2xs text-secondary justify-between">
+				<div>{min ? displayDate(new Date(min), true) : ''}</div>
+				{#if max && min}
+					<div class="hidden lg:block">{msToSec(max - min)}s</div>
+				{/if}
+				<div class="flex gap-1 items-center font-mono">
+					{max ? displayDate(new Date(max), true) : ''}
+					{#if !max && min}
+						{#if now}
 							{msToSec(now - min, 3)}s
-						{/if}<Loader2 size={14} class="animate-spin" />{/if}</div
-				></div
-			>
+						{/if}
+						<Loader2 size={14} class="animate-spin" />
+					{/if}
+				</div>
+			</div>
 		</div>
 		<div class="flex flex-row-reverse items-center text-sm text-secondary p-2">
 			<div class="flex gap-4 items-center text-2xs">
@@ -42,61 +159,272 @@ let total = $derived(flowDone && max ? max - min : Math.max(now - min, 2000));
 					<div>Waiting for executor</div>
 					<div class="h-4 w-4 bg-gray-500"></div>
 				</div>
-
 				<div class="flex gap-2 items-center">
 					<div>Execution</div>
 					<div class="h-4 w-4 bg-blue-500/90"></div>
 				</div>
 			</div>
 		</div>
-		{#each Object.entries(flow_status) as [k, v] (k)}
-			<div class="overflow-auto max-h-60 shadow-inner dark:shadow-gray-700 relative">
-				<div class="px-2 py-2 text-xs grid grid-cols-6 w-full gap-1">
-					<a target="_blank" class="inline-flex gap-2 items-baseline" href="{base}/run/{k}"
-						>{v.name ?? k}</a
+		{#each Object.entries(flow_status).sort(([, a], [, b]) => {
+			const ta = new Date(a.started_at ?? a.scheduled_for ?? 0).getTime()
+			const tb = new Date(b.started_at ?? b.scheduled_for ?? 0).getTime()
+			return ta - tb
+		}) as [k, v] (k)}
+			{@const isInlineStep = isStep(k)}
+			{@const isSleep = (v as any).sleep_duration_s != undefined}
+			{@const isApproval = (v as any).approval === true}
+			{@const isRunning = !flowDone && v.duration_ms == undefined && v.started_at != undefined}
+			{@const isDone = v.duration_ms != undefined || flowDone}
+			{@const isExpanded = expandedRows[k] ?? false}
+			<div class="border-b last:border-b-0">
+				{#if isSleep}
+					<div class="w-full px-2 py-1.5 text-xs flex items-center gap-2 text-tertiary">
+						<div class="w-3 flex-shrink-0"></div>
+						<Moon size={12} class="flex-shrink-0" />
+						<span class="italic">sleep ({(v as any).sleep_duration_s}s)</span>
+					</div>
+				{:else if isApproval}
+					{@const selfApprovalDisabled = (v as any).self_approval_disabled === true}
+					{@const formSchema = (v as any).form?.schema ?? (v as any).form}
+					{@const hasForm =
+						formSchema && typeof formSchema === 'object' && Object.keys(formSchema).length > 0}
+					{@const canApprove = !isDone && jobId}
+					<div class="w-full px-2 py-1.5 text-xs">
+						<div class="flex items-center gap-2">
+							<div class="w-3 flex-shrink-0"></div>
+							<ShieldCheck
+								size={12}
+								class="flex-shrink-0 {isDone ? 'text-green-600' : 'text-yellow-500'}"
+							/>
+							<span class="italic text-secondary">
+								{v.name ?? stepKey(k)}
+							</span>
+							{#if !isDone}
+								<span class="text-tertiary flex items-center gap-1">
+									<Loader2 size={12} class="animate-spin" />
+									waiting
+								</span>
+								{#if canApprove}
+									<div class="ml-auto flex gap-1">
+										<Button
+											variant="default"
+											unifiedSize="sm"
+											disabled={approvalLoading[k]}
+											onclick={() => handleApprove(k, formSchema)}
+										>
+											Approve
+										</Button>
+										<Button
+											variant="default"
+											unifiedSize="sm"
+											disabled={approvalLoading[k] || cancelLoading}
+											onclick={() => handleCancel()}
+										>
+											Reject
+										</Button>
+									</div>
+								{/if}
+							{:else}
+								<span class="text-tertiary">{msToSec(v.duration_ms ?? 0)}s</span>
+							{/if}
+						</div>
+						{#if canApprove && selfApprovalDisabled && $userStore?.is_admin}
+							<div class="mt-1 ml-5 text-yellow-600 text-2xs">
+								Self-approval is disabled but allowed because you are an admin/owner
+							</div>
+						{/if}
+						{#if canApprove && hasForm}
+							<div class="mt-2 ml-5 max-w-md">
+								{#if emptyString($enterpriseLicense)}
+									<Alert
+										type="warning"
+										title="Adding a form to the approval page is an EE feature"
+									/>
+								{:else}
+									<SchemaForm
+										onlyMaskPassword
+										noVariablePicker
+										schema={{
+											properties: formSchema,
+											order: Object.keys(formSchema)
+										}}
+										bind:args={approvalFormArgs[k]}
+									/>
+								{/if}
+							</div>
+						{/if}
+					</div>
+				{:else}
+					<button
+						class="w-full px-2 py-2 text-xs hover:bg-surface-hover cursor-pointer flex items-center gap-2"
+						onclick={() => toggleRow(k)}
 					>
-					<div class="col-span-5 flex min-h-6 w-full">
-						{#if min && total}
-							{@const scheduledFor = v?.scheduled_for
-								? new Date(v?.scheduled_for).getTime()
-								: undefined}
-							{@const startedAt = v?.started_at ? new Date(v?.started_at).getTime() : undefined}
+						<div class="inline-flex gap-1 items-center flex-shrink-0">
+							<div class="w-3 flex-shrink-0">
+								{#if isExpanded}
+									<ChevronDown size={12} />
+								{:else}
+									<ChevronRight size={12} />
+								{/if}
+							</div>
+							{#if isInlineStep}
+								<span class="whitespace-nowrap text-secondary italic">
+									{v.name ?? stepKey(k)}
+								</span>
+							{:else}
+								<a
+									target="_blank"
+									class="inline-flex gap-2 items-baseline hover:underline whitespace-nowrap"
+									href="{base}/run/{k}"
+									onclick={(e) => e.stopPropagation()}
+								>
+									{v.name ?? k}
+								</a>
+							{/if}
+						</div>
+						<div class="flex items-center pt-1 min-h-6 w-full min-w-0">
+							{#if min && total}
+								{@const scheduledFor = v?.scheduled_for
+									? new Date(v?.scheduled_for).getTime()
+									: undefined}
+								{@const startedAt = v?.started_at ? new Date(v?.started_at).getTime() : undefined}
+								{@const waitingLen = scheduledFor
+									? startedAt
+										? startedAt - scheduledFor
+										: now - scheduledFor
+									: 0}
 
-							{@const waitingLen = scheduledFor
-								? startedAt
-									? startedAt - scheduledFor
-									: now - scheduledFor
-								: 0}
+								<div class="flex w-full">
+									{#if isInlineStep}
+										<!-- Inline steps have no waiting phase -->
+										{#if startedAt}
+											<TimelineBar
+												position="center"
+												id={k}
+												{total}
+												{min}
+												started_at={startedAt}
+												len={v.duration_ms ?? now - startedAt}
+												running={!flowDone && v.duration_ms == undefined}
+											/>
+										{/if}
+									{:else}
+										<TimelineBar
+											position="left"
+											id={k}
+											{total}
+											{min}
+											gray
+											started_at={scheduledFor}
+											len={waitingLen < 100 ? 0 : waitingLen - 100}
+											running={!flowDone && startedAt == undefined}
+										/>
+										{#if startedAt}
+											<TimelineBar
+												position={waitingLen < 100 ? 'center' : 'right'}
+												id={k}
+												{total}
+												{min}
+												concat
+												started_at={startedAt}
+												len={v.duration_ms ?? now - startedAt}
+												running={!flowDone && v.duration_ms == undefined}
+											/>
+										{/if}
+									{/if}
+								</div>
+							{/if}
+						</div>
+					</button>
 
-							<div class="flex w-full">
-								<TimelineBar
-									position="left"
-									id={k}
-									{total}
-									{min}
-									gray
-									started_at={scheduledFor}
-									len={waitingLen < 100 ? 0 : waitingLen - 100}
-									running={startedAt == undefined}
-								/>
-								{#if startedAt}
-									<TimelineBar
-										position={waitingLen < 100 ? 'center' : 'right'}
-										id={k}
-										{total}
-										{min}
-										concat
-										started_at={startedAt}
-										len={v.duration_ms ?? now - startedAt}
-										running={v.duration_ms == undefined}
-									/>
+					{#if isExpanded}
+						<div class="border-t bg-surface-secondary px-4 py-2">
+							{#if isInlineStep}
+								<!-- Inline step: show result from checkpoint -->
+								{@const result = stepResults[stepKey(k)]}
+								{#if isDone && result !== undefined}
+									<div>
+										<div class="text-2xs text-secondary font-semibold mb-1"> Result </div>
+										<div class="max-h-40 overflow-auto">
+											<ObjectViewer json={result} pureViewer />
+										</div>
+									</div>
+								{:else}
+									<div class="text-xs text-secondary py-1"> Step completed (no result) </div>
 								{/if}
-							</div>
-						{/if}</div
-					></div
-				>
+							{:else if loadingJobs[k] && !childJobs[k]}
+								<div class="flex items-center gap-2 text-xs text-secondary py-1">
+									<Loader2 size={12} class="animate-spin" />
+									Loading...
+								</div>
+							{:else if childJobs[k]}
+								{@const job = childJobs[k]}
+								<!-- Logs -->
+								{#if job.logs || isRunning}
+									<div class="mb-2">
+										<div class="text-2xs text-secondary font-semibold mb-1"> Logs </div>
+										<LogViewer
+											content={job.logs ?? ''}
+											jobId={k}
+											isLoading={isRunning}
+											small
+											tag={job.tag}
+											download={false}
+											noMaxH={false}
+										/>
+									</div>
+								{/if}
+
+								<!-- Result -->
+								{#if isDone && job.result !== undefined}
+									<div>
+										<div class="text-2xs text-secondary font-semibold mb-1"> Result </div>
+										<div class="max-h-40 overflow-auto">
+											<ObjectViewer json={job.result} pureViewer />
+										</div>
+									</div>
+								{/if}
+							{:else}
+								<div class="text-xs text-secondary py-1">No data available</div>
+							{/if}
+						</div>
+					{/if}
+				{/if}
 			</div>
 		{/each}
+		{#if flowDone && result !== undefined}
+			<div class="border-b last:border-b-0">
+				<button
+					class="w-full px-2 py-2 text-xs hover:bg-surface-hover cursor-pointer flex items-center gap-2"
+					onclick={() => (resultExpanded = !resultExpanded)}
+				>
+					<div class="inline-flex gap-1 items-center flex-shrink-0">
+						<div class="w-3 flex-shrink-0">
+							{#if resultExpanded}
+								<ChevronDown size={12} />
+							{:else}
+								<ChevronRight size={12} />
+							{/if}
+						</div>
+						<span class="whitespace-nowrap font-semibold flex items-center gap-1">
+							{#if success}
+								<CheckCircle2 size={12} class="text-green-600" />
+							{:else}
+								<XCircle size={12} class="text-red-600" />
+							{/if}
+							Result
+						</span>
+					</div>
+				</button>
+				{#if resultExpanded}
+					<div class="border-t bg-surface-secondary px-4 py-2">
+						<div class="max-h-60 overflow-auto">
+							<ObjectViewer json={result} pureViewer />
+						</div>
+					</div>
+				{/if}
+			</div>
+		{/if}
 	</div>
 {:else}
 	<Loader2 class="animate-spin" />

package/package/components/WorkflowTimeline.svelte.d.ts

@@ -1,7 +1,12 @@
-import type { WorkflowStatus } from '../gen';
+import { type WorkflowStatus } from '../gen';
 interface Props {
     flow_status: Record<string, WorkflowStatus>;
     flowDone?: boolean;
+    stepResults?: Record<string, any>;
+    result?: any;
+    success?: boolean;
+    autoExpandResult?: boolean;
+    jobId?: string;
 }
 declare const WorkflowTimeline: import("svelte").Component<Props, {}, "">;
 type WorkflowTimeline = ReturnType<typeof WorkflowTimeline>;

package/package/components/WorkspaceDependenciesEditor.svelte

@@ -29,6 +29,18 @@ export function getWorkspaceDependenciesPath(name, language) {
 export function getDisplayName(deps) {
     return deps.name || `Default (${deps.language})`;
 }
+function getEditorLang(language) {
+    switch (language) {
+        case 'bun':
+        case 'php':
+        case 'powershell':
+            return 'json';
+        case 'python3':
+            return 'plaintext';
+        default:
+            return 'markdown';
+    }
+}
 export function getFileExtension(language) {
     switch (language) {
         case 'python3':
@@ -39,6 +51,8 @@ export function getFileExtension(language) {
         // 	return 'go.mod'
         case 'php':
             return 'composer.json';
+        case 'powershell':
+            return 'modules.json';
         default:
             return null;
     }
@@ -96,7 +110,8 @@ const LANGUAGE_OPTIONS = [
     { value: 'python3', label: 'Python' },
     { value: 'bun', label: 'TypeScript (Bun/Bunnative)' },
     // { value: 'go', label: 'Go' },
-    { value: 'php', label: 'PHP' }
+    { value: 'php', label: 'PHP' },
+    { value: 'powershell', label: 'PowerShell' }
 ];
 // Default templates for each language
 const LANGUAGE_TEMPLATES = {
@@ -134,6 +149,12 @@ numpy>=1.24.0
     "vlucas/phpdotenv": "^5.6",
     "symfony/console": "^6.4"
   }
+}`,
+    powershell: `{
+  "modules": {
+    "PSWriteColor": "*",
+    "ImportExcel": "7.8.6"
+  }
 }`
 };
 let workspaceDependencies = $state({
@@ -434,7 +455,7 @@ function cancelDeploy() {
 						<Module.default
 							bind:this={editor}
 							autoHeight
-							lang="markdown"
+							lang={getEditorLang(workspaceDependencies.language)}
 							code={workspaceDependencies.content}
 							on:change={(e) => handleEditorChange(e.detail)}
 							fixedOverflowWidgets={false}
@@ -442,6 +463,15 @@ function cancelDeploy() {
 						/>
 					{/await}
 				</div>
+				{#if workspaceDependencies.language === 'powershell'}
+					<div class="text-sm text-tertiary mt-2">
+						JSON object with a <code>"modules"</code> key mapping module names to versions. Use
+						<code>"*"</code>
+						or <code>null</code> for latest version, or a specific version string to pin. These
+						modules are merged with script-level
+						<code>Import-Module</code> statements at runtime (workspace versions take precedence).
+					</div>
+				{/if}
 			</Section>
 		</div>
 

package/package/components/apps/components/display/dbtable/DeleteRow.svelte

@@ -33,8 +33,8 @@ export async function triggerDelete(dbInput, table, allColumns, data) {
             onCancel: () => {
                 sendUserToast('Error deleting row', true);
             },
-            onError: () => {
-                sendUserToast('Error updating row', true);
+            onError: (e) => {
+                sendUserToast(`Error deleting row: ${e?.message ?? e}`, true);
             }
         });
     }

package/package/components/apps/components/display/dbtable/InsertRowRunnable.svelte

@@ -33,8 +33,8 @@ export async function insertRow(dbInput, workspace, table, columns, values) {
             onCancel: () => {
                 sendUserToast('Error inserting row', true);
             },
-            onError: () => {
-                sendUserToast('Error inserting row', true);
+            onError: (e) => {
+                sendUserToast(`Error inserting row: ${e?.message ?? e}`, true);
             }
         });
     }

package/package/components/apps/components/display/dbtable/UpdateCell.svelte

@@ -33,8 +33,8 @@ export async function triggerUpdate(dbInput, table, column, allColumns, valueToU
             onCancel: () => {
                 sendUserToast('Error updating value', true);
             },
-            onError: () => {
-                sendUserToast('Error updating value', true);
+            onError: (e) => {
+                sendUserToast(`Error updating value: ${e?.message ?? e}`, true);
             }
         });
     }