windmill-components 1.379.3 → 1.382.1

package/package/components/ArgInput.svelte

@@ -364,8 +364,24 @@ $: shouldDispatchChanges && debounced(value);
 															enum_={itemsType?.enum ?? []}
 															enumLabels={extra['enumLabels']}
 														/>
-													{:else if itemsType?.type == 'resource' && itemsType?.resourceType}
-														<ResourcePicker bind:value={v} resourceType={itemsType?.resourceType} />
+													{:else if itemsType?.type == 'resource' && itemsType?.resourceType && resourceTypes?.includes(itemsType.resourceType)}
+														<ObjectResourceInput
+															bind:value={v}
+															format={'resource-' + itemsType?.resourceType}
+															defaultValue={undefined}
+														/>
+													{:else if itemsType?.type == 'resource'}
+														<JsonEditor
+															bind:editor
+															on:focus={(e) => {
+																dispatch('focus')
+															}}
+															on:blur={(e) => {
+																dispatch('blur')
+															}}
+															code={JSON.stringify(v, null, 2)}
+															bind:value={v}
+														/>
 													{:else if itemsType?.type === 'object' && itemsType?.properties}
 														<div class="p-8 border rounded-md w-full">
 															<SchemaForm
@@ -412,7 +428,20 @@ $: shouldDispatchChanges && debounced(value);
 										if (value == undefined || !Array.isArray(value)) {
 											value = []
 										}
-										value = value.concat('')
+										if (itemsType?.type == 'number') {
+											value = value.concat(0)
+										} else if (
+											itemsType?.type == 'object' ||
+											(itemsType?.type == 'resource' &&
+												!(
+													itemsType?.resourceType &&
+													resourceTypes?.includes(itemsType?.resourceType)
+												))
+										) {
+											value = value.concat({})
+										} else {
+											value = value.concat('')
+										}
 									}}
 									id="arg-input-add-item"
 									startIcon={{ icon: Plus }}
@@ -452,6 +481,7 @@ $: shouldDispatchChanges && debounced(value);
 					{disablePortal}
 					{format}
 					bind:value
+					bind:editor
 					{showSchemaExplorer}
 				/>
 			{:else if inputCat == 'resource-object' && format.split('-').length > 1 && format

package/package/components/DisplayResult.svelte

@@ -68,9 +68,14 @@ function checkIfS3(result, keys) {
 let is_render_all = false;
 let download_as_csv = false;
 function inferResultKind(result) {
-    if (result == 'WINDMILL_TOO_BIG') {
-        largeObject = true;
-        return 'json';
+    try {
+        if (result == 'WINDMILL_TOO_BIG') {
+            largeObject = true;
+            return 'json';
+        }
+    }
+    catch (err) {
+        return 'nondisplayable';
     }
     if (result !== undefined) {
         download_as_csv = false;
@@ -189,7 +194,13 @@ function inferResultKind(result) {
 let jsonViewer;
 let s3FileViewer;
 function toJsonStr(result) {
-    return JSON.stringify(result ?? null, null, 4) ?? 'null';
+    try {
+        // console.log(result)
+        return JSON.stringify(result ?? null, null, 4) ?? 'null';
+    }
+    catch (e) {
+        return 'error stringifying object: ' + e.toString();
+    }
 }
 function contentOrRootString(obj) {
     if (typeof obj === 'string') {
@@ -297,7 +308,8 @@ let seeS3PreviewFileFromList = '';
 			/>
 		{/each}</div
 	>
-{:else}<div
+{:else if resultKind == 'nondisplayable'}<div class="text-red-400">Non displayable object</div
+	>{:else}<div
 		class="inline-highlight relative grow {['plain', 'markdown'].includes(resultKind ?? '')
 			? ''
 			: 'min-h-[200px]'}"

package/package/components/ErrorOrRecoveryHandler.svelte

@@ -9,8 +9,9 @@ import { FlowService, JobService, ScriptService, WorkspaceService } from '../gen
 import { inferArgs } from '../infer';
 import { hubBaseUrlStore } from '../stores';
 import { CheckCircle2, Loader2, RotateCw, XCircle } from 'lucide-svelte';
-const slackRecoveryHandler = 'hub/2430/slack/schedule-recovery-handler-slack';
-const slackHandlerScriptPath = 'hub/6512/workspace-or-schedule-error-handler-slack';
+import { hubPaths } from '../hub';
+const slackRecoveryHandler = hubPaths.slackRecoveryHandler;
+const slackHandlerScriptPath = hubPaths.slackErrorHandler;
 export let errorOrRecovery;
 export let isEditable;
 export let slackToggleText = 'Enable';

package/package/components/FlowBuilder.svelte

@@ -146,14 +146,17 @@ async function saveDraft(forceSave = false) {
                 path: $pathStore
             }
         };
+        let savedAtNewPath = false;
         if (newFlow) {
             dispatch('saveInitial', $pathStore);
         }
         else if (savedFlow?.draft_only && $pathStore !== initialPath) {
+            savedAtNewPath = true;
             initialPath = $pathStore;
             // this is so we can use the flow builder outside of sveltekit
             dispatch('saveDraftOnlyAtNewPath', { path: $pathStore, selectedId: getSelectedId() });
         }
+        dispatch('saveDraft', { path: $pathStore, savedAtNewPath, newFlow });
         sendUserToast('Saved as draft');
     }
     catch (error) {

package/package/components/FlowBuilder.svelte.d.ts

@@ -29,6 +29,7 @@ declare const __propDef: {
         historyRestore: CustomEvent<any>;
         saveInitial: CustomEvent<any>;
         saveDraftOnlyAtNewPath: CustomEvent<any>;
+        saveDraft: CustomEvent<any>;
         deploy: CustomEvent<any>;
         details: CustomEvent<any>;
     } & {

package/package/components/FlowGraphViewer.svelte

@@ -1,7 +1,8 @@
-<script>import { FlowGraph } from './graph';
-import { createEventDispatcher } from 'svelte';
+<script>import { createEventDispatcher } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import FlowGraphViewerStep from './FlowGraphViewerStep.svelte';
+import FlowGraphV2 from './graph/FlowGraphV2.svelte';
+import { dfs } from './flows/dfs';
 export let flow;
 export let overflowAuto = false;
 export let noSide = false;
@@ -17,16 +18,16 @@ const dispatch = createEventDispatcher();
 			class="{noSide ? 'col-span-3' : 'sm:col-span-2 col-span-3'} w-full border max-h-full"
 			class:overflow-auto={overflowAuto}
 		>
-			<FlowGraph
+			<FlowGraphV2
 				{download}
 				minHeight={400}
 				modules={flow?.value?.modules}
 				failureModule={flow?.value?.failure_module}
 				on:select={(e) => {
-					stepDetail = e.detail
+					const mod = dfs(flow?.value?.modules ?? [], (m) => m).find((m) => m?.id === e?.detail)
+					stepDetail = mod ?? e.detail
 					dispatch('select', stepDetail)
 				}}
-				rebuildOnChange={flow}
 			/>
 		</div>
 	{/if}

package/package/components/FlowJobResult.svelte

@@ -6,6 +6,7 @@ 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;
@@ -13,6 +14,7 @@ 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;
@@ -71,9 +73,9 @@ async function getLogs() {
 		{/if}
 	</div>
 	<div class="overflow-auto {col ? '' : 'max-h-80'} relative">
-		<div class="absolute z-40 text-sm top-1.5 left-2"
+		<div class="absolute z-40 text-xs top-0 left-1"
 			><button class="" on:click={drawer.openDrawer}>explore all steps' logs</button></div
 		>
-		<LogViewer content={logs ?? ''} {jobId} isLoading={false} tag={undefined} />
+		<LogViewer content={logs ?? ''} {jobId} isLoading={waitingForExecutor} {tag} />
 	</div>
 </div>

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

@@ -3,6 +3,7 @@ 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;
@@ -10,6 +11,7 @@ declare const __propDef: {
         loading: boolean;
         filename?: string | undefined;
         jobId?: string | undefined;
+        tag?: string | undefined;
         workspaceId?: string | undefined;
         refreshLog?: boolean | undefined;
         durationStates: Writable<Record<string, DurationStatus>> | undefined;

package/package/components/FlowStatusViewerInner.svelte

@@ -8,7 +8,7 @@ import { onDestroy } from 'svelte';
 import { Badge, Button, Tab } from './common';
 import DisplayResult from './DisplayResult.svelte';
 import Tabs from './common/tabs/Tabs.svelte';
-import { FlowGraph } from './graph';
+import {} from './graph';
 import ModuleStatus from './ModuleStatus.svelte';
 import { emptyString, msToSec, truncateRev } from '../utils';
 import JobArgs from './JobArgs.svelte';
@@ -20,6 +20,7 @@ import { dfs } from './flows/dfs';
 import { writable } from 'svelte/store';
 import Alert from './common/alert/Alert.svelte';
 import FlowGraphViewerStep from './FlowGraphViewerStep.svelte';
+import FlowGraphV2 from './graph/FlowGraphV2.svelte';
 const dispatch = createEventDispatcher();
 let { flowStateStore, retryStatus, suspendStatus } = getContext('FlowStatusViewer');
 export let jobId;
@@ -115,7 +116,7 @@ function updateInnerModules() {
         innerModules.forEach((mod, i) => {
             if (mod.type === 'WaitingForEvents' &&
                 $localModuleStates?.[innerModules?.[i - 1]?.id ?? '']?.type == 'Success') {
-                setModuleState(mod.id ?? '', { type: mod.type, args: job?.args });
+                setModuleState(mod.id ?? '', { type: mod.type, args: job?.args, tag: job?.tag });
             }
             else if (mod.type === 'WaitingForExecutor' &&
                 $localModuleStates[mod.id ?? '']?.scheduled_for == undefined) {
@@ -130,7 +131,8 @@ function updateInnerModules() {
                         scheduled_for: job?.['scheduled_for'],
                         job_id: job?.id,
                         parent_module: mod['parent_module'],
-                        args: job?.args
+                        args: job?.args,
+                        tag: job?.tag
                     };
                     setModuleState(mod.id ?? '', newState);
                 })
@@ -309,6 +311,7 @@ function onJobsLoaded(mod, job, force) {
                 job_id: job.id,
                 logs: job.logs,
                 args: job.args,
+                tag: job.tag,
                 started_at,
                 parent_module: mod['parent_module']
             }, force);
@@ -324,6 +327,7 @@ function onJobsLoaded(mod, job, force) {
                 logs: job.logs,
                 result: job['result'],
                 job_id: job.id,
+                tag: job.tag,
                 parent_module: mod['parent_module'],
                 duration_ms: job['duration_ms'],
                 started_at: started_at,
@@ -464,6 +468,7 @@ function loadPreviousIters(lenToAdd) {
 }
 let stepDetail = undefined;
 let storedListJobs = {};
+let wrapperHeight = 0;
 </script>
 
 {#if notAnonynmous}
@@ -521,6 +526,7 @@ let storedListJobs = {};
 							<FlowJobResult
 								workspaceId={job?.workspace_id}
 								jobId={job?.id}
+								tag={job?.tag}
 								loading={job['running'] == true}
 								result={job.result}
 								logs={job.logs}
@@ -774,7 +780,7 @@ let storedListJobs = {};
 	{#if render}
 		{#if job.raw_flow && !isListJob}
 			<div class="{selected != 'graph' ? 'hidden' : ''} grow mt-4">
-				<div class="grid grid-cols-3 border h-full">
+				<div class="grid grid-cols-3 border h-full" bind:clientHeight={wrapperHeight}>
 					<div class="col-span-2 bg-surface-secondary">
 						<div class="flex flex-col">
 							{#each Object.values($retryStatus) as count}
@@ -793,8 +799,9 @@ let storedListJobs = {};
 							{/each}
 						</div>
 
-						<FlowGraph
+						<FlowGraphV2
 							download
+							minHeight={wrapperHeight}
 							success={jobId != undefined && isSuccess(job?.['success'])}
 							flowModuleStates={$localModuleStates}
 							on:select={(e) => {
@@ -819,6 +826,7 @@ let storedListJobs = {};
 							}}
 							on:selectedIteration={(e) => {
 								let detail = e.detail
+
 								setModuleState(detail.moduleId, {
 									selectedForloop: detail.id,
 									selectedForloopIndex: detail.index
@@ -826,7 +834,6 @@ let storedListJobs = {};
 								globalRefreshes[detail.moduleId]?.({ job: detail.id, index: detail.index })
 							}}
 							modules={job.raw_flow?.modules ?? []}
-							failureModule={job.raw_flow?.failure_module}
 						/>
 					</div>
 					<div
@@ -860,6 +867,7 @@ let storedListJobs = {};
 											jobId={job?.id}
 											filename={job.id}
 											loading={job['running']}
+											tag={job?.tag}
 											noBorder
 											col
 											result={job['result']}
@@ -923,14 +931,17 @@ let storedListJobs = {};
 												/>
 											</div>
 										{/if}
+
 										<FlowJobResult
 											workspaceId={job?.workspace_id}
 											jobId={node.job_id}
 											noBorder
 											loading={node.type != 'Success' && node.type != 'Failure'}
+											waitingForExecutor={node.type == 'WaitingForExecutor'}
 											refreshLog={node.type == 'InProgress'}
 											col
 											result={node.result}
+											tag={node.tag}
 											logs={node.logs}
 											durationStates={localDurationStatuses}
 										/>

package/package/components/FlowViewer.svelte

@@ -72,6 +72,7 @@ function toAny(x) {
 				{:else}
 					<div class="text-secondary text-xs italic mb-4">No inputs</div>
 				{/if}
+
 				<FlowGraphViewer download {noSide} {flow} overflowAuto />
 			</div>
 		</TabContent>

package/package/components/HighlightCode.svelte

@@ -67,7 +67,7 @@ $: lang = getLang(language);
 		}}
 		iconOnly
 	/>
-	{#if code?.length < 5000}
+	{#if code?.length < 10000}
 		{#if !lines}
 			<Highlight class="nowrap {$$props.class}" language={lang} {code} />
 		{:else}
@@ -76,7 +76,7 @@ $: lang = getLang(language);
 			</Highlight>
 		{/if}
 	{:else}
-		<pre class="overflow-auto max-h-screen {$$props.class}"
+		<pre class="overflow-auto max-h-screen text-xs {$$props.class}"
 			><code class="language-{language}">{code}</code></pre
 		>
 	{/if}

package/package/components/ModulePreviewForm.svelte

@@ -35,7 +35,7 @@ $: {
     }
 }
 function plugIt(argName) {
-    args[argName] = evalValue(argName, mod, testStepStore, pickableProperties, true);
+    args[argName] = structuredClone(evalValue(argName, mod, testStepStore, pickableProperties, true));
     try {
         editor?.[argName]?.setCode(JSON.stringify(args[argName], null, 4));
     }

package/package/components/ObjectResourceInput.svelte

@@ -1,11 +1,14 @@
-<script>import ResourcePicker from './ResourcePicker.svelte';
+<script>import JsonEditor from './apps/editor/settingsPanel/inputEditor/JsonEditor.svelte';
+import ResourcePicker from './ResourcePicker.svelte';
 import S3ObjectPicker from './S3ObjectPicker.svelte';
+import SimpleEditor from './SimpleEditor.svelte';
 export let format;
 export let value;
 export let disablePortal = false;
 export let showSchemaExplorer = false;
 export let selectFirst = false;
 export let defaultValue;
+export let editor = undefined;
 function isString(value) {
     return typeof value === 'string' || value instanceof String;
 }
@@ -32,7 +35,7 @@ $: value && valueToPath();
 <div class="flex flex-row w-full flex-wrap gap-x-2 gap-y-0.5">
 	{#if format === 'resource-s3_object'}
 		<S3ObjectPicker bind:value />
-	{:else}
+	{:else if value == undefined || typeof value === 'string'}
 		<ResourcePicker
 			{selectFirst}
 			{disablePortal}
@@ -45,5 +48,7 @@ $: value && valueToPath();
 			resourceType={format.split('-').length > 1 ? format.substring('resource-'.length) : undefined}
 			{showSchemaExplorer}
 		/>
+	{:else}
+		<JsonEditor bind:editor code={JSON.stringify(value, null, 2)} bind:value />
 	{/if}
 </div>

package/package/components/ObjectResourceInput.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponent } from "svelte";
+import SimpleEditor from './SimpleEditor.svelte';
 declare const __propDef: {
     props: {
         format: string;
@@ -7,6 +8,7 @@ declare const __propDef: {
         showSchemaExplorer?: boolean | undefined;
         selectFirst?: boolean | undefined;
         defaultValue: any;
+        editor?: SimpleEditor | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/ResourcePicker.svelte

@@ -9,6 +9,7 @@ import DBSchemaExplorer from './DBSchemaExplorer.svelte';
 import DarkModeObserver from './DarkModeObserver.svelte';
 import { Pen, Plus, RotateCw } from 'lucide-svelte';
 import ResourceEditorDrawer from './ResourceEditorDrawer.svelte';
+import { sendUserToast } from '../toast';
 const dispatch = createEventDispatcher();
 export let initialValue = undefined;
 export let value = initialValue;
@@ -33,27 +34,36 @@ let collection = valueSelect ? [valueSelect] : [];
 export async function askNewResource() {
     appConnect?.open?.(resourceType, expressOAuthSetup);
 }
+let loading = true;
 async function loadResources(resourceType) {
-    const nc = (await ResourceService.listResource({
-        workspace: $workspaceStore,
-        resourceType
-    }))
-        .filter((x) => x.resource_type != 'state' && x.resource_type != 'cache')
-        .map((x) => ({
-        value: x.path,
-        label: x.path,
-        type: x.resource_type
-    }));
-    // TODO check if this is needed
-    if (!nc.find((x) => x.value == value) && (initialValue || value)) {
-        nc.push({ value: value ?? initialValue, label: value ?? initialValue, type: '' });
+    loading = true;
+    try {
+        const nc = (await ResourceService.listResource({
+            workspace: $workspaceStore,
+            resourceType
+        }))
+            .filter((x) => x.resource_type != 'state' && x.resource_type != 'cache')
+            .map((x) => ({
+            value: x.path,
+            label: x.path,
+            type: x.resource_type
+        }));
+        // TODO check if this is needed
+        if (!nc.find((x) => x.value == value) && (initialValue || value)) {
+            nc.push({ value: value ?? initialValue, label: value ?? initialValue, type: '' });
+        }
+        collection = nc;
+        if (collection.length == 1 && selectFirst && valueSelect == undefined) {
+            value = collection[0].value;
+            valueType = collection[0].type;
+            valueSelect = collection[0];
+        }
     }
-    collection = nc;
-    if (collection.length == 1 && selectFirst && valueSelect == undefined) {
-        value = collection[0].value;
-        valueType = collection[0].type;
-        valueSelect = collection[0];
+    catch (e) {
+        sendUserToast('Failed to load resource types', true);
+        console.error(e);
     }
+    loading = false;
 }
 $: $workspaceStore && loadResources(resourceType);
 $: dispatch('change', value);
@@ -115,46 +125,48 @@ let darkMode = false;
 					? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
 					: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
 			/>
-		{:else}
+		{:else if !loading}
 			<div class="text-2xs text-tertiary mr-2">0 found</div>
 		{/if}
 
-		{#if value && value != ''}
-			<Button
-				{disabled}
-				color="light"
-				variant="border"
-				size="xs"
-				on:click={() => resourceEditor?.initEdit?.(value ?? '')}
-				startIcon={{ icon: Pen }}
-				iconOnly
-			/>
-		{/if}
+		{#if !loading}
+			{#if value && value != ''}
+				<Button
+					{disabled}
+					color="light"
+					variant="border"
+					size="xs"
+					on:click={() => resourceEditor?.initEdit?.(value ?? '')}
+					startIcon={{ icon: Pen }}
+					iconOnly
+				/>
+			{/if}
 
-		{#if resourceType?.includes(',')}
-			{#each resourceType.split(',') as rt}
+			{#if resourceType?.includes(',')}
+				{#each resourceType.split(',') as rt}
+					<Button
+						{disabled}
+						color="light"
+						variant="border"
+						size="xs"
+						on:click={() => appConnect?.open?.(rt)}
+						startIcon={{ icon: Plus }}>{rt}</Button
+					>
+				{/each}
+			{:else}
 				<Button
 					{disabled}
 					color="light"
 					variant="border"
 					size="xs"
-					on:click={() => appConnect?.open?.(rt)}
-					startIcon={{ icon: Plus }}>{rt}</Button
+					on:click={() => appConnect?.open?.(resourceType, expressOAuthSetup)}
+					startIcon={{ icon: Plus }}
+					iconOnly={collection?.length > 0}
+					>{#if collection?.length == 0}
+						Add a {resourceType} resource
+					{/if}</Button
 				>
-			{/each}
-		{:else}
-			<Button
-				{disabled}
-				color="light"
-				variant="border"
-				size="xs"
-				on:click={() => appConnect?.open?.(resourceType, expressOAuthSetup)}
-				startIcon={{ icon: Plus }}
-				iconOnly={collection?.length > 0}
-				>{#if collection?.length == 0}
-					Add a {resourceType} resource
-				{/if}</Button
-			>
+			{/if}
 		{/if}
 
 		<Button