windmill-components 1.309.7 → 1.352.0

package/package/components/FlowGraphViewerStep.svelte

@@ -8,11 +8,12 @@ import typescript from 'svelte-highlight/languages/typescript';
 import FlowPathViewer from './flows/content/FlowPathViewer.svelte';
 import SchemaViewer from './SchemaViewer.svelte';
 import { scriptPathToHref } from '../scripts';
-import { cleanExpr } from '../utils';
+import { cleanExpr, copyToClipboard } from '../utils';
 import { hubBaseUrlStore } from '../stores';
 import { twMerge } from 'tailwind-merge';
 import FlowModuleScript from './flows/content/FlowModuleScript.svelte';
-export let flow;
+import { Copy } from 'lucide-svelte';
+export let schema = undefined;
 export let stepDetail = undefined;
 let codeViewer;
 </script>
@@ -31,7 +32,7 @@ let codeViewer;
 						<IconedPath path={stepDetail?.value?.path ?? ''} />
 					</a>
 				</div>
-				<div class="text-2xs mb-4">
+				<div class="text-2xs mb-4 mt-2">
 					<h3 class="mb-2">Step Inputs</h3>
 
 					<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
@@ -48,7 +49,7 @@ let codeViewer;
 					</div>
 				{/if}
 			{:else if stepDetail.value.type == 'rawscript'}
-				<div class="text-2xs mb-4">
+				<div class="text-2xs mb-4 mt-2">
 					<h3 class="mb-2">Step Inputs</h3>
 					<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
 				</div>
@@ -57,6 +58,16 @@ let codeViewer;
 				<span class="!text-xs">
 					<HighlightCode language={stepDetail.value.language} code={stepDetail.value.content} />
 				</span>
+				<h3 class="mb-2">Lockfile</h3>
+				<div>
+					{#if stepDetail.value.lock}
+						<pre class="bg-surface-secondary text-sm p-2 h-full overflow-auto w-full"
+							>{stepDetail.value.lock}</pre
+						>
+					{:else}
+						<p class="bg-surface-secondary text-sm p-2"> There is no lock file for this script </p>
+					{/if}
+				</div>
 			{/if}
 		{/if}
 	</DrawerContent>
@@ -68,11 +79,17 @@ let codeViewer;
 			<p class="font-medium text-secondary text-center pt-4 pb-8">
 				Click on a step to see its details
 			</p>
-			<h3 class="mb-2 font-semibold">Flow Inputs</h3>
-			<SchemaViewer schema={flow?.schema} />
+			{#if schema}
+				<h3 class="mb-2 font-semibold">Flow Inputs</h3>
+				<SchemaViewer {schema} />
+			{/if}
 		</div>
 	{:else if stepDetail == 'Input'}
-		<SchemaViewer schema={flow?.schema} />
+		{#if schema}
+			<SchemaViewer {schema} />
+		{:else}
+			<p class="font-medium text-secondary text-center pt-4 pb-8"> No input schema </p>
+		{/if}
 	{:else if stepDetail == 'Result'}
 		<p class="font-medium text-secondary text-center pt-4 pb-8"> End of the flow </p>
 	{:else if typeof stepDetail != 'string' && stepDetail.value}
@@ -121,12 +138,12 @@ let codeViewer;
 			</p>
 		{:else if stepDetail.value.type == 'rawscript'}
 			<div class="text-xs">
-				<h3 class="mb-2 font-semibold">Step Inputs</h3>
+				<h3 class="mb-2 font-semibold mt-2">Step Inputs</h3>
 				<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
 			</div>
 
 			<div>
-				<div class="mb-2 flex justify-between items-center">
+				<div class="mb-2 mt-4 flex justify-between items-center">
 					<h3 class="font-semibold">Code</h3>
 					<Button size="xs2" color="light" variant="contained" on:click={codeViewer.openDrawer}>
 						Expand
@@ -139,10 +156,22 @@ let codeViewer;
 						class="whitespace-pre-wrap"
 					/>
 				</div>
+				<h3 class="mb-2 mt-4">Lockfile</h3>
+				<div>
+					{#if stepDetail.value.lock}
+						<pre class="bg-surface-secondary text-xs p-2 h-full overflow-auto w-full"
+							>{stepDetail.value.lock}</pre
+						>
+					{:else}
+						<p class="bg-surface-secondary text-sm p-2">
+							There is no lockfile for this inline script
+						</p>
+					{/if}
+				</div>
 			</div>
 		{:else if stepDetail.value.type == 'script'}
 			<div class="text-2xs">
-				<h3 class="mb-2 font-semibold">Step Inputs</h3>
+				<h3 class="mb-2 font-semibold mt-2">Step Inputs</h3>
 				<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
 			</div>
 			{#if stepDetail.value.path.startsWith('hub/')}
@@ -202,6 +231,23 @@ let codeViewer;
 				{/each}
 			</div>
 		{:else if stepDetail.value.type == 'flow'}
+			<div class="text-sm mb-1 flex justify-end flex-row">
+				<Button
+					size="xs2"
+					startIcon={{ icon: Copy }}
+					color="light"
+					on:click={() => {
+						if (typeof stepDetail !== 'string') {
+							const val = stepDetail?.value
+							if (val?.type == 'flow') {
+								copyToClipboard(val.path)
+							}
+						}
+					}}
+				>
+					Copy path
+				</Button>
+			</div>
 			<FlowPathViewer noSide path={stepDetail.value.path} />
 		{/if}
 	{:else}

package/package/components/FlowGraphViewerStep.svelte.d.ts

@@ -1,13 +1,8 @@
 import { SvelteComponent } from "svelte";
-import type { FlowModule, FlowValue } from '../gen';
+import type { FlowModule } from '../gen';
 declare const __propDef: {
     props: {
-        flow: {
-            summary: string;
-            description?: string;
-            value: FlowValue;
-            schema?: any;
-        };
+        schema?: any | undefined;
         stepDetail?: FlowModule | string | undefined;
     };
     events: {

package/package/components/FlowJobResult.svelte

@@ -3,6 +3,9 @@ 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 result;
 export let logs;
 export let col = false;
@@ -12,7 +15,9 @@ export let filename = undefined;
 export let jobId = undefined;
 export let workspaceId = undefined;
 export let refreshLog = false;
+export let durationStates;
 let lastJobId = undefined;
+let drawer = undefined;
 $: jobId != lastJobId && diffJobId();
 async function diffJobId() {
     if (jobId != lastJobId) {
@@ -44,11 +49,14 @@ async function getLogs() {
 }
 </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'} shadow border border-tertiary-inverse h-full max-h-[70vh]"
+	class="grid {!col ? 'grid-cols-2' : 'grid-rows-2'} shadow border border-tertiary-inverse h-full"
 >
 	<div class="bg-surface {col ? '' : 'max-h-80'} h-full p-1 overflow-auto relative">
 		<span class="text-tertiary">Result</span>
@@ -61,6 +69,9 @@ async function getLogs() {
 		{/if}
 	</div>
 	<div class="overflow-auto {col ? '' : 'max-h-80'} h-full relative">
+		<div class="absolute z-40 text-sm top-1.5 left-2"
+			><button class="" on:click={drawer.openDrawer}>explore all steps' logs</button></div
+		>
 		<LogViewer content={logs ?? ''} {jobId} isLoading={false} tag={undefined} />
 	</div>
 </div>

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

@@ -1,4 +1,6 @@
 import { SvelteComponent } from "svelte";
+import type { DurationStatus } from './graph';
+import type { Writable } from 'svelte/store';
 declare const __propDef: {
     props: {
         result: any;
@@ -10,6 +12,7 @@ declare const __propDef: {
         jobId?: string | undefined;
         workspaceId?: string | undefined;
         refreshLog?: boolean | undefined;
+        durationStates: Writable<Record<string, DurationStatus>> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/FlowMetadata.svelte

@@ -1,5 +1,6 @@
-<script>import JobStatus from './JobStatus.svelte';
-import { displayDate } from '../utils';
+<script>import {} from '../gen';
+import JobStatus from './JobStatus.svelte';
+import { displayDate, truncateRev } from '../utils';
 import ScheduleEditor from './ScheduleEditor.svelte';
 import TimeAgo from './TimeAgo.svelte';
 import { workspaceStore } from '../stores';
@@ -8,48 +9,46 @@ import { Clock, MemoryStick, Calendar, Bot, User, Code2 } from 'lucide-svelte';
 import BarsStaggered from './icons/BarsStaggered.svelte';
 export let job;
 const SMALL_ICON_SIZE = 14;
-let scheduleEditor;
+export let scheduleEditor;
 </script>
 
-<ScheduleEditor bind:this={scheduleEditor} />
-
 <div
-	class="rounded-md p-3 bg-surface-secondary shadow-sm sm:text-sm md:text-base"
+	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" />
-		<span class="text-2xs text-secondary">
+		<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 ?? ''} />
+				Received job <TimeAgo withDate date={job.created_at ?? ''} />
 			{/if}
-			<Tooltip>{job?.created_at}</Tooltip>
+			<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">
-			<Clock size={SMALL_ICON_SIZE} class="text-secondary" />
-			<span>
+		<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 withDate agoOnlyIfRecent date={job.started_at ?? ''} />
-				<Tooltip>{job?.started_at}</Tooltip>
+				<Tooltip small>{job?.started_at}</Tooltip>
 			</span>
 		</div>
 	{/if}
 	{#if job && job['mem_peak']}
-		<div class="flex flex-row gap-2 items-center">
-			<MemoryStick size={SMALL_ICON_SIZE} class="text-secondary" />
+		<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">
-					<BarsStaggered size={SMALL_ICON_SIZE} class="text-secondary" />
-					<span>
+				<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">
 						Step of flow
 						<a href={`/run/${job.parent_job}?workspace=${$workspaceStore}`}>
 							{job.parent_job}
@@ -57,26 +56,27 @@ let scheduleEditor;
 					</span>
 				</div>
 			{:else}
-				<div class="flex flex-row gap-2 items-center">
-					<Bot size={SMALL_ICON_SIZE} class="text-secondary" />
-					<span>
+				<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={`/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 items-center">
-				<Calendar size={SMALL_ICON_SIZE} class="text-secondary" />
-				<span>
-					Triggered by the schedule:
-					<button
-						class="break-words text-sm text-blue-600 font-normal"
+			<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:
+					<a
+						href="#"
+						class="break-words text-blue-600 font-normal"
 						on:click={() =>
 							scheduleEditor?.openEdit(job.schedule_path ?? '', job.job_kind == 'flow')}
 					>
-						{job.schedule_path}
-					</button>
+						{truncateRev(job.schedule_path, 40)}
+					</a>
 				</span>
 			</div>
 		{/if}
@@ -87,28 +87,33 @@ let scheduleEditor;
 			{@const viewHref = `${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" />
+					<Code2 size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
 				{:else}
 					<BarsStaggered size={SMALL_ICON_SIZE} class="text-secondary" />
 				{/if}
-				<span>
+				<span class="truncate text-sm">
 					<a href={viewHref}>{isScript ? job?.script_hash : job?.script_path}</a>
 				</span>
 			</div>
 		{/if}
 
-		<div class="flex flex-row gap-2 items-center">
-			<User size={SMALL_ICON_SIZE} class="text-secondary" />
+		<div class="flex items-center gap-2 text-sm">
+			<User size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
 
 			<span>
-				By {job.created_by}
+				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">
+	<div class="text-secondary text-2xs pt-2 whitespace-nowrap">
 		run id:
 		<a href={`/run/${job.id}?workspace=${job.workspace_id}`}> {job.id} </a>
 	</div>

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

@@ -1,8 +1,10 @@
 import { SvelteComponent } from "svelte";
-import type { Job } from '../gen';
+import { type Job } from '../gen';
+import ScheduleEditor from './ScheduleEditor.svelte';
 declare const __propDef: {
     props: {
         job: Job;
+        scheduleEditor: ScheduleEditor;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/FlowPreviewContent.svelte

@@ -8,7 +8,7 @@ import FlowStatusViewer from '../components/FlowStatusViewer.svelte';
 import FlowProgressBar from './flows/FlowProgressBar.svelte';
 import CapturePayload from './flows/content/CapturePayload.svelte';
 import { AlertTriangle, ArrowRight, CornerDownLeft, Play, RefreshCw, X } from 'lucide-svelte';
-import { emptyString } from '../utils';
+import { emptyString, sendUserToast } from '../utils';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import SavedInputs from './SavedInputs.svelte';
 import { dfs } from './flows/dfs';
@@ -46,11 +46,18 @@ function extractFlow(previewMode) {
 }
 let lastPreviewFlow = undefined;
 export async function runPreview(args, restartedFrom) {
-    lastPreviewFlow = JSON.stringify($flowStore);
-    jobProgressReset();
-    const newFlow = extractFlow(previewMode);
-    jobId = await runFlowPreview(args, newFlow, $pathStore, restartedFrom);
-    isRunning = true;
+    try {
+        lastPreviewFlow = JSON.stringify($flowStore);
+        jobProgressReset();
+        const newFlow = extractFlow(previewMode);
+        jobId = await runFlowPreview(args, newFlow, $pathStore, restartedFrom);
+        isRunning = true;
+    }
+    catch (e) {
+        sendUserToast('Could not run preview', true, undefined, e.toString());
+        isRunning = false;
+        jobId = undefined;
+    }
 }
 function onKeyDown(event) {
     if (open) {
@@ -285,8 +292,9 @@ let inputLibraryDrawer;
 		{/if}
 		<FlowProgressBar {job} bind:reset={jobProgressReset} />
 	</div>
-	<div class="overflow-y-auto grow pr-4">
-		<div class="max-h-1/2 overflow-auto border-b">
+
+	<div class="overflow-y-auto grow flex flex-col pr-4">
+		<div class="border-b">
 			<SchemaForm
 				noVariablePicker
 				compact
@@ -295,9 +303,10 @@ let inputLibraryDrawer;
 				bind:args={$previewArgs}
 			/>
 		</div>
-		<div class="pt-4 grow">
+		<div class="pt-4 flex flex-col grow">
 			{#if jobId}
 				<FlowStatusViewer
+					wideResults
 					{flowStateStore}
 					{jobId}
 					on:jobsLoaded={({ detail }) => {

package/package/components/FlowStatusViewer.svelte

@@ -8,6 +8,7 @@ export let workspaceId = undefined;
 export let flowStateStore = writable({});
 export let selectedJobStep = undefined;
 export let isOwner = false;
+export let wideResults = false;
 let lastJobId = jobId;
 let retryStatus = writable({});
 let suspendStatus = writable({});
@@ -42,7 +43,10 @@ $: jobId && updateJobId();
 	globalDurationStatuses={[]}
 	globalModuleStates={[]}
 	bind:selectedNode={selectedJobStep}
+	on:start
+	on:done
 	{jobId}
 	{workspaceId}
 	{isOwner}
+	{wideResults}
 />

package/package/components/FlowStatusViewer.svelte.d.ts

@@ -8,8 +8,11 @@ declare const __propDef: {
         flowStateStore?: Writable<FlowState> | undefined;
         selectedJobStep?: string | undefined;
         isOwner?: boolean | undefined;
+        wideResults?: boolean | undefined;
     };
     events: {
+        start: CustomEvent<any>;
+        done: CustomEvent<any>;
         jobsLoaded: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;