windmill-components 1.504.5 → 1.510.1

package/package/components/FlowJobResult.svelte

@@ -6,22 +6,10 @@ 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();
+import { untrack } from 'svelte';
+let { waitingForExecutor = false, result, logs = $bindable(), col = false, noBorder = false, loading, filename = undefined, jobId = undefined, tag = undefined, workspaceId = undefined, refreshLog = false, durationStates, downloadLogs = true, tagLabel = undefined } = $props();
+let lastJobId = $state(undefined);
+let drawer = $state(undefined);
 let iteration = 0;
 let logOffset = 0;
 async function diffJobId() {
@@ -53,6 +41,12 @@ async function getLogs() {
         }, iteration < 10 ? 1000 : iteration < 20 ? 2000 : 5000);
     }
 }
+$effect(() => {
+    jobId;
+    untrack(() => {
+        jobId != lastJobId && diffJobId();
+    });
+});
 </script>
 
 <Drawer bind:this={drawer}>
@@ -78,9 +72,10 @@ async function getLogs() {
 	</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
+			><button class="" onclick={drawer.openDrawer}>explore all steps' logs</button></div
 		>
 		<LogViewer
+			{tagLabel}
 			download={downloadLogs}
 			content={logs ?? ''}
 			{jobId}

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

@@ -1,19 +1,6 @@
 import type { DurationStatus } from './graph';
 import type { Writable } from 'svelte/store';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FlowJobResult: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     waitingForExecutor?: boolean;
     result: any;
     logs: string | undefined;
@@ -27,8 +14,8 @@ declare const FlowJobResult: $$__sveltets_2_IsomorphicComponent<{
     refreshLog?: boolean;
     durationStates: Writable<Record<string, DurationStatus>> | undefined;
     downloadLogs?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowJobResult = InstanceType<typeof FlowJobResult>;
+    tagLabel?: string | undefined;
+}
+declare const FlowJobResult: import("svelte").Component<Props, {}, "logs">;
+type FlowJobResult = ReturnType<typeof FlowJobResult>;
 export default FlowJobResult;

package/package/components/FlowPreviewContent.svelte

@@ -1,9 +1,9 @@
-<script lang="ts">import { run, stopPropagation } from 'svelte/legacy';
+<script lang="ts">import { stopPropagation } from 'svelte/legacy';
 import { JobService } from '../gen';
 import { workspaceStore } from '../stores';
 import { Badge, Button } from './common';
 import Popover from './meltComponents/Popover.svelte';
-import { createEventDispatcher, getContext } from 'svelte';
+import { createEventDispatcher, getContext, untrack } from 'svelte';
 import { runFlowPreview } from './flows/utils';
 import SchemaForm from './SchemaForm.svelte';
 import SchemaFormWithArgPicker from './SchemaFormWithArgPicker.svelte';
@@ -58,7 +58,7 @@ function extractFlow(previewMode) {
 }
 let lastPreviewFlow = $state(undefined);
 export async function runPreview(args, restartedFrom) {
-    if (stepHistoryLoader?.flowJobInitial) {
+    if (stepHistoryLoader?.flowJobInitial !== false) {
         stepHistoryLoader?.setFlowJobInitial(false);
     }
     try {
@@ -141,20 +141,23 @@ async function selectInput(input, type) {
 export function refresh() {
     renderCount++;
 }
-let scrollableDiv = undefined;
+let scrollableDiv = $state(undefined);
 function handleScroll() {
-    scrollTop = scrollableDiv?.scrollTop ?? 0;
+    let newScroll = scrollableDiv?.scrollTop ?? 0;
+    if (newScroll != 0 && render) {
+        scrollTop = newScroll;
+    }
 }
 function onScrollableDivChange() {
     if (scrollTop != 0 && scrollableDiv) {
         scrollableDiv.scrollTop = scrollTop;
     }
 }
-run(() => {
-    selectedJobStep !== undefined && onSelectedJobStepChange();
+$effect.pre(() => {
+    selectedJobStep !== undefined && untrack(() => onSelectedJobStepChange());
 });
-run(() => {
-    scrollableDiv && onScrollableDivChange();
+$effect(() => {
+    scrollableDiv && render && untrack(() => onScrollableDivChange());
 });
 export async function cancelTest() {
     isRunning = false;
@@ -482,7 +485,7 @@ export function flowHasChanged() {
 					wideResults
 					{flowStateStore}
 					{jobId}
-					on:done={() => {
+					on:done={(x) => {
 						isRunning = false
 						$executionCount = $executionCount + 1
 						onJobDone?.()

package/package/components/FlowPreviewContent.svelte.d.ts

@@ -54,6 +54,6 @@ declare const FlowPreviewContent: $$__sveltets_2_IsomorphicComponent<Props, {
     getIsOwner: () => boolean;
     getJob: () => Job | undefined;
     flowHasChanged: () => boolean;
-}, "initial" | "preventEscape" | "job" | "jobId" | "scrollTop" | "localDurationStatuses" | "localModuleStates" | "rightColumnSelect" | "previewMode" | "selectedJobStep" | "selectedJobStepIsTopLevel" | "selectedJobStepType" | "branchOrIterationN">;
+}, "initial" | "preventEscape" | "job" | "jobId" | "scrollTop" | "localDurationStatuses" | "rightColumnSelect" | "localModuleStates" | "selectedJobStep" | "previewMode" | "selectedJobStepIsTopLevel" | "selectedJobStepType" | "branchOrIterationN">;
 type FlowPreviewContent = InstanceType<typeof FlowPreviewContent>;
 export default FlowPreviewContent;

package/package/components/FlowPreviewResult.svelte

@@ -1,8 +1,9 @@
-<script lang="ts">import { Badge, Loader2 } from 'lucide-svelte';
+<script lang="ts">import { Loader2 } from 'lucide-svelte';
 import FlowJobResult from './FlowJobResult.svelte';
 import FlowPreviewStatus from './preview/FlowPreviewStatus.svelte';
 import FlowStatusWaitingForEvents from './FlowStatusWaitingForEvents.svelte';
 import { emptyString } from '../utils';
+import Badge from './common/badge/Badge.svelte';
 let { job, workspaceId, isOwner, hideFlowResult, hideDownloadLogs, localDurationStatuses, innerModules, suspendStatus, hideJobId, extra } = $props();
 </script>
 
@@ -52,10 +53,17 @@ let { job, workspaceId, isOwner, hideFlowResult, hideDownloadLogs, localDuration
 			{#if mod.type == 'InProgress'}
 				{@const rawMod = job.raw_flow?.modules[i]}
 
-				<div
-					><span class="inline-flex gap-1"
-						><Badge color="indigo">{mod.id}</Badge>
-						<span class="font-medium text-primary">
+				<div>
+					<span class="inline-flex gap-1">
+						<Badge
+							color="indigo"
+							wrapperClass="max-w-full"
+							baseClass="max-w-full truncate !px-1"
+							title={mod.id}
+						>
+							<span class="max-w-full text-2xs truncate">{mod.id}</span></Badge
+						>
+						<span class="font-medium text-primary mt-0.5">
 							{#if !emptyString(rawMod?.summary)}
 								{rawMod?.summary ?? ''}
 							{:else if rawMod?.value.type == 'script'}
@@ -65,7 +73,7 @@ let { job, workspaceId, isOwner, hideFlowResult, hideDownloadLogs, localDuration
 							{/if}
 						</span>
 
-						<Loader2 class="animate-spin" /></span
+						<Loader2 class="animate-spin mt-0.5" /></span
 					></div
 				>
 			{/if}

package/package/components/FlowStatusViewer.svelte

@@ -1,27 +1,9 @@
 <script lang="ts">import { writable } from 'svelte/store';
 import FlowStatusViewerInner from './FlowStatusViewerInner.svelte';
-import { createEventDispatcher, setContext } from 'svelte';
+import { createEventDispatcher, setContext, untrack } from 'svelte';
 import { isOwner as loadIsOwner } from '../utils';
 import { userStore, workspaceStore } from '../stores';
-export let jobId;
-export let initialJob = undefined;
-export let workspaceId = undefined;
-export let flowStateStore = writable({});
-export let selectedJobStep = undefined;
-export let hideFlowResult = false;
-export let hideTimeline = false;
-export let hideDownloadInGraph = false;
-export let hideNodeDefinition = false;
-export let hideJobId = false;
-export let hideDownloadLogs = false;
-export let rightColumnSelect = 'timeline';
-export let isOwner = false;
-export let wideResults = false;
-export let localModuleStates = writable({});
-export let localDurationStatuses = writable({});
-export let job = undefined;
-export let render = true;
-export let suspendStatus = writable({});
+let { jobId, initialJob = undefined, workspaceId = undefined, flowStateStore = writable({}), selectedJobStep = $bindable(undefined), hideFlowResult = false, hideTimeline = false, hideDownloadInGraph = false, hideNodeDefinition = false, hideJobId = false, hideDownloadLogs = false, rightColumnSelect = $bindable('timeline'), isOwner = $bindable(false), wideResults = false, localModuleStates = $bindable(writable({})), localDurationStatuses = $bindable(writable({})), job = $bindable(undefined), render = true, suspendStatus = $bindable(writable({})) } = $props();
 let lastJobId = jobId;
 let retryStatus = writable({});
 setContext('FlowStatusViewer', {
@@ -45,8 +27,13 @@ async function updateJobId() {
     }
 }
 const dispatch = createEventDispatcher();
-let lastScriptPath = undefined;
-$: jobId && updateJobId();
+let lastScriptPath = $state(undefined);
+$effect.pre(() => {
+    jobId;
+    untrack(() => {
+        jobId && updateJobId();
+    });
+});
 </script>
 
 <FlowStatusViewerInner
@@ -61,8 +48,8 @@ $: jobId && updateJobId();
 	}}
 	globalModuleStates={[]}
 	globalDurationStatuses={[]}
-	bind:localModuleStates
-	bind:localDurationStatuses
+	{localModuleStates}
+	{localDurationStatuses}
 	bind:selectedNode={selectedJobStep}
 	on:start
 	on:done

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

@@ -2,20 +2,7 @@ import { type Writable } from 'svelte/store';
 import type { FlowState } from './flows/flowState';
 import type { DurationStatus, GraphModuleState } from './graph';
 import type { Job } from '../gen';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FlowStatusViewer: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     jobId: string;
     initialJob?: Job | undefined;
     workspaceId?: string | undefined;
@@ -27,20 +14,34 @@ declare const FlowStatusViewer: $$__sveltets_2_IsomorphicComponent<{
     hideNodeDefinition?: boolean;
     hideJobId?: boolean;
     hideDownloadLogs?: boolean;
-    rightColumnSelect?: "timeline" | "node_status" | "node_definition" | "user_states";
+    rightColumnSelect?: 'timeline' | 'node_status' | 'node_definition' | 'user_states';
     isOwner?: boolean;
     wideResults?: boolean;
     localModuleStates?: Writable<Record<string, GraphModuleState>>;
     localDurationStatuses?: Writable<Record<string, DurationStatus>>;
     job?: Job | undefined;
     render?: boolean;
-    suspendStatus?: Writable<{}>;
-}, {
+    suspendStatus?: any;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FlowStatusViewer: $$__sveltets_2_IsomorphicComponent<Props, {
     start: CustomEvent<any>;
     done: CustomEvent<any>;
     jobsLoaded: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "job" | "isOwner" | "suspendStatus" | "localDurationStatuses" | "rightColumnSelect" | "localModuleStates" | "selectedJobStep">;
 type FlowStatusViewer = InstanceType<typeof FlowStatusViewer>;
 export default FlowStatusViewer;