fix(frontend): Fix code display + use async/await in fetch examples (#…

…2150) * fix(frontend): Fix code display + use async/await in fetch examples * fix(frontend): Fix all fetch code * fix(frontend): Add missing quote * fix(frontend): fix async code * fix(frontend): fix waitForCompletion callback * fix(frontend): Correcltly encode payload * fix(frontend): Correcltly encode payload
windmill-labs · Aug 23, 2023 · 2f9177f · 2f9177f
1 parent fd30274
commit 2f9177f
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 54 deletions.
diff --git a/frontend/src/lib/components/FlowGraphViewer.svelte b/frontend/src/lib/components/FlowGraphViewer.svelte
@@ -14,6 +14,8 @@
 	import { cleanExpr } from '$lib/utils'
 	import { createEventDispatcher } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
+	import FlowModuleScript from './flows/content/FlowModuleScript.svelte'
+
 	export let flow: {
 		summary: string
 		description?: string
@@ -197,6 +199,8 @@
 								src="https://hub.windmill.dev/embed/script/{stepDetail.value?.path?.substring(4)}"
 							/>
 						</div>
+					{:else}
+						<FlowModuleScript path={stepDetail.value.path} />
 					{/if}
 				{:else if stepDetail.value.type == 'forloopflow'}
 					<div>

diff --git a/frontend/src/lib/components/details/WebhooksPanel.svelte b/frontend/src/lib/components/details/WebhooksPanel.svelte
@@ -71,40 +71,87 @@
 		}
 		return headers
 	}
+
 	function fetchCode() {
-		return `${
-			requestType !== 'get_path'
-				? 'let body = JSON.stringify(' + JSON.stringify(args, null, 2) + ');'
-				: ''
-		}
-fetch(\`${url}\`, {
-	method: '${requestType === 'get_path' ? 'GET' : 'POST'}',
-	headers: ${JSON.stringify(headers(), null, 2)},
-	${requestType !== 'get_path' ? `body: body` : ''}
-}).then(
-	response => response.${webhookType === 'sync' ? 'json' : 'text'}()
-).then(data => {
-	${
-		webhookType === 'sync'
-			? 'console.log(data)'
-			: `let UUID = data;
-    let checkCompletion = setInterval(() => {
-		fetch(\`${$page.url.origin}/api/w/${$workspaceStore}/jobs_u/completed/get_result_maybe/\$\{UUID\}\`, 
-	{
-		method: 'GET',
-		headers: {
-				'Authorization': 'Bearer ${token}'
-		}
-	}).then(response => response.json())
-	.then(data => {
-		if (data.completed) {
-			console.log(data.result);
-			clearInterval(checkCompletion);
-		}
-	});
-}, 1000);`
+		if (webhookType === 'sync') {
+			return `
+export async function main() {
+  const jobTriggerResponse = await triggerJob();
+  const data = await jobTriggerResponse.json();
+  return data;
+}
+
+async function triggerJob() {
+  ${
+		requestType === 'get_path'
+			? '// Payload is a base64 encoded string of the arguments'
+			: `const body = JSON.stringify(${JSON.stringify(args, null, 2).replaceAll('\n', '\n\t')});`
 	}
-});`
+  const endpoint = \`${url}\`;
+
+  return await fetch(endpoint, {
+    method: '${requestType === 'get_path' ? 'GET' : 'POST'}',
+    headers: ${JSON.stringify(headers(), null, 2).replaceAll('\n', '\n\t\t')}${
+				requestType === 'get_path' ? '' : `,\n\t\tbody`
+			}
+  });
+}`
+		}
+
+		// Main function
+		let mainFunction = `
+export async function main() {
+  const jobTriggerResponse = await triggerJob();
+  const UUID = await jobTriggerResponse.text();
+  const jobCompletionData = await waitForJobCompletion(UUID);
+  return jobCompletionData;
+}`
+
+		// triggerJob function
+		let triggerJobFunction = `
+async function triggerJob() {
+  const body = JSON.stringify(${JSON.stringify(args, null, 2).replaceAll('\n', '\n\t')});
+  const endpoint = \`${url}\`;
+
+  return await fetch(endpoint, {
+    method: '${requestType === 'get_path' ? 'GET' : 'POST'}',
+    headers: ${JSON.stringify(headers(), null, 2).replaceAll('\n', '\n\t\t')},
+    body
+  });
+}`
+
+		// waitForJobCompletion function
+		let waitForJobCompletionFunction = `
+function waitForJobCompletion(UUID) {
+  return new Promise(async (resolve, reject) => {
+    try {
+      const endpoint = \`${
+				$page.url.origin
+			}/api/w/${$workspaceStore}/jobs_u/completed/get_result_maybe/\${UUID}\`;
+      const checkResponse = await fetch(endpoint, {
+        method: 'GET',
+        headers: ${JSON.stringify(headers(), null, 2).replaceAll('\n', '\n\t\t\t\t')}
+      });
+
+      const checkData = await checkResponse.json();
+
+      if (checkData.completed) {
+        resolve(checkData);
+      } else {
+        // If not completed, wait for a second then try again
+        setTimeout(async () => {
+          const result = await waitForJobCompletion(UUID);
+          resolve(result);
+        }, 1000);
+      }
+    } catch (error) {
+      reject(error);
+    }
+  });
+}`
+
+		// Combine and return
+		return `${mainFunction}\n\n${triggerJobFunction}\n\n${waitForJobCompletionFunction}`
 	}
 
 	function curlCode() {
@@ -127,14 +174,14 @@ ${
 		: `
 URL="${$page.url.origin}/api/w/${$workspaceStore}/jobs_u/completed/get_result_maybe/$UUID"
 while true; do
-	RESPONSE=$(curl -s -H "Authorization: Bearer $TOKEN" $URL)
-	COMPLETED=$(echo $RESPONSE | jq .completed)
-	if [ "$COMPLETED" = "true" ]; then
-		echo $RESPONSE | jq .result
-		break
-	else
-		sleep 1
-	fi
+  RESPONSE=$(curl -s -H "Authorization: Bearer $TOKEN" $URL)
+  COMPLETED=$(echo $RESPONSE | jq .completed)
+  if [ "$COMPLETED" = "true" ]; then
+    echo $RESPONSE | jq .result
+    break
+  else
+    sleep 1
+  fi
 done`
 }`
 	}
@@ -258,17 +305,18 @@ done`
 					{#key requestType}
 						{#key webhookType}
 							{#key tokenType}
-								<div
-									class="flex flex-row flex-1 h-full border p-2 rounded-md overflow-auto relative"
-									on:click={(e) => {
-										e.preventDefault()
-										copyToClipboard(fetchCode())
-									}}
-								>
-									<Highlight language={typescript} code={fetchCode()} />
-									<Clipboard size={14} class="w-8 top-2 right-2 absolute" />
-								</div>
-							{/key}{/key}{/key}
+								{#key token}
+									<div
+										class="flex flex-row flex-1 h-full border p-2 rounded-md overflow-auto relative"
+										on:click={(e) => {
+											e.preventDefault()
+											copyToClipboard(fetchCode())
+										}}
+									>
+										<Highlight language={typescript} code={fetchCode()} />
+										<Clipboard size={14} class="w-8 top-2 right-2 absolute" />
+									</div>
+								{/key}{/key}{/key}{/key}
 				{/key}
 			</TabContent>
 		</svelte:fragment>

diff --git a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
@@ -248,7 +248,7 @@
 								/>
 							{/key}
 						{:else if flowModule.value.type === 'script'}
-							<div class="border-t border-gray-200">
+							<div class="border-t">
 								{#key forceReload}
 									<FlowModuleScript path={flowModule.value.path} hash={flowModule.value.hash} />
 								{/key}

diff --git a/frontend/src/lib/components/jobs/JobPreview.svelte b/frontend/src/lib/components/jobs/JobPreview.svelte
@@ -11,7 +11,7 @@
 	import JobArgs from '../JobArgs.svelte'
 	import { writable } from 'svelte/store'
 	import LogViewer from '../LogViewer.svelte'
-	import {  msToSec } from '$lib/utils'
+	import { msToSec } from '$lib/utils'
 	import { Icon } from 'svelte-awesome'
 	import { faHourglassHalf } from '@fortawesome/free-solid-svg-icons'
 	import { Badge } from '../common'
@@ -110,7 +110,7 @@
 					>
 				</Badge>
 			</div>
-			<div class="w-1/2 h-full overflow-auto px-2 -mt-3">
+			<div class="w-1/2 h-full overflow-auto">
 				<JobArgs args={job?.args} tableClass="!pt-0 !min-w-0 !block" />
 			</div>
 			<div class="w-1/2 h-full overflow-auto p-2">