fix testjobloader when running many interleaving computations

frontend/src/lib/components/LogViewer.svelte

@@ -55,8 +55,7 @@
 			>{#if content}<span>{content}</span>{:else if isLoading}<Icon
 					data={faSpinner}
 					class="animate-spin"
-				/>{:else}
-				<span class="text-gray-600">No logs are available yet</span>{/if}</pre
+				/>{:else}<span class="text-gray-600">No logs are available yet</span>{/if}</pre
 		>
 	</div>
 </div>

frontend/src/lib/components/ModulePreview.svelte

@@ -30,17 +30,18 @@
 
 	export async function runTest(args: any) {
 		const val = mod.value
+		let jobId: string | undefined = undefined
 		if (val.type == 'rawscript') {
-			await testJobLoader?.runPreview(val.path, val.content, val.language, args)
+			jobId = await testJobLoader?.runPreview(val.path, val.content, val.language, args)
 		} else if (val.type == 'script') {
 			const script = val.hash
 				? await ScriptService.getScriptByHash({ workspace: $workspaceStore!, hash: val.hash })
 				: await getScriptByPath(val.path)
-			await testJobLoader?.runPreview(val.path, script.content, script.language, args)
+			jobId = await testJobLoader?.runPreview(val.path, script.content, script.language, args)
 		} else {
 			throw Error('not testable module type')
 		}
-		sendUserToast(`started test ${truncateRev(testJob?.id ?? '', 10)}`)
+		sendUserToast(`started test ${truncateRev(jobId ?? '', 10)}`)
 	}
 
 	function jobDone() {

frontend/src/lib/components/TestJobLoader.svelte

@@ -24,22 +24,16 @@
 	let ITERATIONS_BEFORE_SLOW_REFRESH = 10
 	let ITERATIONS_BEFORE_SUPER_SLOW_REFRESH = 100
 
+	let stopCurrentIteration = false
+
 	export async function abstractRun(fn: () => Promise<string>) {
 		try {
-			intervalId && (await clearIntervalAsync(intervalId))
-
-			if (isLoading && job) {
-				await JobService.cancelQueuedJob({
-					workspace: workspace!,
-					id: job.id,
-					requestBody: {}
-				})
-			}
+			await clearCurrentJob()
 			isLoading = true
-
 			const testId = await fn()
 
 			await watchJob(testId)
+			return testId
 		} catch (err) {
 			isLoading = false
 			throw err
@@ -49,8 +43,8 @@
 	export async function runScriptByPath(
 		path: string | undefined,
 		args: Record<string, any>
-	): Promise<void> {
-		abstractRun(() =>
+	): Promise<string> {
+		return abstractRun(() =>
 			JobService.runScriptByPath({
 				workspace: $workspaceStore!,
 				path: path ?? '',
@@ -62,8 +56,8 @@
 	export async function runFlowByPath(
 		path: string | undefined,
 		args: Record<string, any>
-	): Promise<void> {
-		abstractRun(() =>
+	): Promise<string> {
+		return abstractRun(() =>
 			JobService.runFlowByPath({
 				workspace: $workspaceStore!,
 				path: path ?? '',
@@ -77,8 +71,8 @@
 		code: string,
 		lang: 'deno' | 'go' | 'python3' | 'bash',
 		args: Record<string, any>
-	): Promise<void> {
-		abstractRun(() =>
+	): Promise<string> {
+		return abstractRun(() =>
 			JobService.runScriptPreview({
 				workspace: $workspaceStore!,
 				requestBody: {
@@ -105,10 +99,26 @@
 		console.log('cancelled')
 	}
 
-	export async function watchJob(testId: string) {
-		intervalId && (await clearIntervalAsync(intervalId))
+	export async function clearCurrentJob() {
+		if (intervalId) {
+			const interval = intervalId
+			intervalId = undefined
+			stopCurrentIteration = true
+			if (isLoading && job) {
+				await JobService.cancelQueuedJob({
+					workspace: workspace!,
+					id: job.id,
+					requestBody: {}
+				})
+			}
+			await clearIntervalAsync(interval)
+		}
+		stopCurrentIteration = false
 		job = undefined
-		syncIteration = 0
+		isLoading = false
+	}
+
+	export async function watchJob(testId: string) {
 		const isCompleted = await loadTestJob(testId)
 		if (!isCompleted) {
 			isLoading = true
@@ -143,7 +153,7 @@
 			if (job?.type === 'CompletedJob') {
 				//only CompletedJob has success property
 				isCompleted = true
-				intervalId && (await clearIntervalAsync(intervalId))
+				intervalId && clearIntervalAsync(intervalId!)
 				if (isLoading) {
 					dispatch('done', job)
 					isLoading = false
@@ -151,7 +161,7 @@
 			}
 			notfound = false
 		} catch (err) {
-			intervalId && (await clearIntervalAsync(intervalId))
+			intervalId && clearIntervalAsync(intervalId!)
 			isLoading = false
 			if (err.status === 404) {
 				notfound = true
@@ -162,18 +172,21 @@
 	}
 
 	async function syncer(id: string): Promise<void> {
+		syncIteration++
 		if (syncIteration == ITERATIONS_BEFORE_SLOW_REFRESH) {
-			intervalId && (await clearIntervalAsync(intervalId))
+			intervalId && clearIntervalAsync(intervalId!)
 			intervalId = setIntervalAsync(async () => await syncer(id), 500)
 		} else if (syncIteration == ITERATIONS_BEFORE_SUPER_SLOW_REFRESH) {
-			intervalId && (await clearIntervalAsync(intervalId))
+			intervalId && clearIntervalAsync(intervalId!)
 			intervalId = setIntervalAsync(async () => await syncer(id), 2000)
 		}
-		syncIteration++
+		if (stopCurrentIteration) {
+			return
+		}
 		await loadTestJob(id)
 	}
 
 	onDestroy(async () => {
-		intervalId && (await clearIntervalAsync(intervalId))
+		await clearCurrentJob()
 	})
 </script>

frontend/src/routes/(root)/(logged)/user/(user)/login/+page.svelte

@@ -41,7 +41,7 @@
 	const providersType = providers.map((p) => p.type as string)
 
 	let showPassword = false
-	let logins: string[] = []
+	let logins: string[] | undefined = undefined
 
 	async function login(): Promise<void> {
 		const requestBody = {
@@ -119,31 +119,36 @@
 <!-- Enable submit form on enter -->
 <CenteredModal title="Login">
 	<div class="justify-center text-center flex flex-col">
-		{#each providers as { type, icon, name }}
-			{#if logins.includes(type)}
+		{#if !logins}
+			{#each Array(4) as _}
+				<Skeleton layout={[0.5, [2.375]]} />
+			{/each}
+		{:else}
+			{#each providers as { type, icon, name }}
+				{#if logins.includes(type)}
+					<Button
+						color="dark"
+						variant="border"
+						endIcon={{ icon }}
+						btnClasses="mt-2 w-full !border-gray-300"
+						on:click={() => storeRedirect(type)}
+					>
+						{name}
+					</Button>
+				{/if}
+			{/each}
+
+			{#each logins.filter((x) => !providersType.includes(x)) as login}
 				<Button
 					color="dark"
 					variant="border"
-					endIcon={{ icon }}
 					btnClasses="mt-2 w-full !border-gray-300"
-					on:click={() => storeRedirect(type)}
+					on:click={() => storeRedirect(login)}
 				>
-					{name}
+					{login}
 				</Button>
-			{:else}
-				<Skeleton layout={[0.5, [2.375]]} />
-			{/if}
-		{/each}
-		{#each logins.filter((x) => !providersType.includes(x)) as login}
-			<Button
-				color="dark"
-				variant="border"
-				btnClasses="mt-2 w-full !border-gray-300"
-				on:click={() => storeRedirect(login)}
-			>
-				{login}
-			</Button>
-		{/each}
+			{/each}
+		{/if}
 	</div>
 	<div class="center-center my-6">
 		<Button
@@ -151,7 +156,9 @@
 			color="blue"
 			variant="border"
 			btnClasses="!border-none"
-			on:click={() => {showPassword = !showPassword}}
+			on:click={() => {
+				showPassword = !showPassword
+			}}
 		>
 			Login without third-party
 		</Button>
@@ -169,12 +176,7 @@
 			</label>
 			<label class="block ">
 				<span class="text-gray-700 text-sm">Password</span>
-				<input
-					type="password"
-					on:keyup={handleKeyUp}
-					bind:value={password}
-					id="password"
-				/>
+				<input type="password" on:keyup={handleKeyUp} bind:value={password} id="password" />
 			</label>
 			<div class="flex justify-end pt-4">
 				<Button id="login2" on:click={login}>Login</Button>