From d8eb92e3e5485ba7807ea5d977d4635a1d74cf20 Mon Sep 17 00:00:00 2001
From: Guillaume Bouvignies <guillaume@windmill.dev>
Date: Mon, 18 Dec 2023 16:16:25 +0100
Subject: [PATCH] fix: Persistent script spinner (#2879)

---
 .../components/PersistentScriptDrawer.svelte  | 76 ++++++++++++-------
 .../flows/content/FlowModuleComponent.svelte  |  2 +-
 .../(root)/(logged)/run/[...run]/+page.svelte |  2 +-
 3 files changed, 52 insertions(+), 28 deletions(-)

diff --git a/frontend/src/lib/components/PersistentScriptDrawer.svelte b/frontend/src/lib/components/PersistentScriptDrawer.svelte
index 47e1bced08..08afd16ecc 100644
--- a/frontend/src/lib/components/PersistentScriptDrawer.svelte
+++ b/frontend/src/lib/components/PersistentScriptDrawer.svelte
@@ -6,13 +6,14 @@
 	import { workspaceStore } from '$lib/stores'
 	import { displayDate, sleep, sendUserToast } from '$lib/utils'
 	import TableCustom from './TableCustom.svelte'
-	import { Hourglass, Loader2, Play } from 'lucide-svelte'
+	import { Hourglass, Loader2, Play, RefreshCw } from 'lucide-svelte'
 
 	let dispatch = createEventDispatcher()
 	let drawer: Drawer
 
 	let script: Script
 	let loadQueuedJobs = true
+	let queuedJobsLoading = false
 	let queuedJobs: {
 		status: 'running' | 'queued'
 		jobId: string
@@ -24,30 +25,44 @@
 
 	async function continuouslyLoadQueuedJobs() {
 		while (loadQueuedJobs) {
-			let qjs = await JobService.listQueue({
-				workspace: $workspaceStore ?? '',
-				orderDesc: false,
-				scriptPathExact: script.path
-			})
-			let loadingQueuedJobs: {
-				status: 'running' | 'queued'
-				jobId: string
-				scheduledFor: string
-				scriptHash: string
-			}[] = []
-			for (const qj of qjs) {
-				loadingQueuedJobs.push({
-					status: qj.started_at ? 'running' : 'queued',
-					jobId: qj.id,
-					scriptHash: qj.script_hash ?? '',
-					scheduledFor: displayDate(qj.scheduled_for, true)
-				})
-			}
-			queuedJobs = loadingQueuedJobs
+			loadQueuedJobsOnce()
 			await sleep(3 * 1000)
 		}
 	}
 
+	async function loadQueuedJobsOnce() {
+		if (queuedJobsLoading) {
+			return
+		}
+		const timeStart = new Date().getTime()
+		queuedJobsLoading = true
+		let qjs = await JobService.listQueue({
+			workspace: $workspaceStore ?? '',
+			orderDesc: false,
+			scriptPathExact: script.path
+		})
+		let loadingQueuedJobs: {
+			status: 'running' | 'queued'
+			jobId: string
+			scheduledFor: string
+			scriptHash: string
+		}[] = []
+		for (const qj of qjs) {
+			loadingQueuedJobs.push({
+				status: qj.started_at ? 'running' : 'queued',
+				jobId: qj.id,
+				scriptHash: qj.script_hash ?? '',
+				scheduledFor: displayDate(qj.scheduled_for, true)
+			})
+		}
+		queuedJobs = loadingQueuedJobs
+		const endStart = new Date().getTime()
+		// toggle queuedJobsLoading to false in 1 secs to let some time for the animation to play
+		setTimeout(() => {
+			queuedJobsLoading = false
+		}, 1000 - (endStart - timeStart))
+	}
+
 	async function scaleToZero() {
 		cancellingInProgress = true
 		await JobService.cancelPersistentQueuedJobs({
@@ -66,7 +81,6 @@
 			console.log('Unable to open persistent script drawer without a proper script definition')
 			return
 		}
-		console.log('opening drawer')
 		script = persistentScript!
 		loadQueuedJobs = true
 		continuouslyLoadQueuedJobs()
@@ -75,7 +89,6 @@
 
 	async function exit() {
 		loadQueuedJobs = false
-		console.log('closing drawer')
 		drawer.closeDrawer?.()
 	}
 </script>
@@ -94,9 +107,20 @@
 		on:close={exit}
 		tooltip="Manage runs of persistent scripts. Scaling a persistent script to zero will cancel all current runs of this script based on the script path."
 	>
-		<h2 class="flex gap-2 items-center">
-			<Loader2 class={loadQueuedJobs ? 'animate-spin' : ''} />Queued jobs for {script.path}
-		</h2>
+		<div class="flex gap-2 items-center justify-between">
+			<h2>
+				Queued jobs for {script.path}
+			</h2>
+			<Button
+				color="light"
+				size="md"
+				btnClasses="w-full h-8"
+				variant="border"
+				on:click={loadQueuedJobsOnce}
+			>
+				<RefreshCw class={queuedJobsLoading ? 'animate-spin' : ''} size="xs" />Refresh
+			</Button>
+		</div>
 		<TableCustom>
 			<tr slot="header-row">
 				<th class="text-xs">Script Hash</th>
diff --git a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
index f1d2b3e6c7..e4b15aa803 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
@@ -458,7 +458,7 @@
 										</Section>
 									{:else if advancedSelected === 'runtime' && advancedRuntimeSelected === 'lifetime'}
 										<div>
-											<FlowModuleDeleteAfterUse bind:flowModule />
+											<FlowModuleDeleteAfterUse bind:flowModule disabled={!$enterpriseLicense} />
 										</div>
 									{:else if advancedSelected === 'cache'}
 										<div>
diff --git a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
index 441b7a5464..e7c48975b8 100644
--- a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
@@ -256,7 +256,7 @@
 					color="blue"
 					size="md"
 					startIcon={{ icon: Activity }}
-					on:click|once={() => {
+					on:click={() => {
 						persistentScriptDrawer.open?.(persistentScriptDefinition)
 					}}
 				>