feat: add planned later toggle on runs

frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte

@@ -7,6 +7,7 @@
 
 	export let date: string | undefined
 	export let label: string
+	export let useDropdown: boolean = false
 
 	const dispatch = createEventDispatcher()
 	let input: HTMLInputElement
@@ -33,6 +34,7 @@
 		<div class="pb-1 text-sm text-secondary">{label}</div>
 		<div class="flex w-full">
 			<DateTimeInput
+				{useDropdown}
 				value={date}
 				on:change={(e) => {
 					date = e.detail

frontend/src/lib/components/runs/JobLoader.svelte

@@ -14,7 +14,8 @@
 	export let path: string | null
 	export let success: 'success' | 'failure' | 'running' | undefined = undefined
 	export let isSkipped: boolean = false
-	export let showSchedules: boolean = false
+	export let showSchedules: boolean = true
+	export let showFutureJobs: boolean = true
 	export let argFilter: string | undefined
 	export let resultFilter: string | undefined = undefined
 	export let schedulePath: string | undefined = undefined
@@ -45,6 +46,7 @@
 			jobKinds &&
 			user &&
 			folder &&
+			showFutureJobs != undefined &&
 			showSchedules != undefined &&
 			allWorkspaces != undefined &&
 			argFilter != undefined &&
@@ -110,6 +112,7 @@
 			isFlowStep: jobKindsCat != 'all' ? false : undefined,
 			label: label === null || label === '' ? undefined : label,
 			isNotSchedule: showSchedules == false ? true : undefined,
+			scheduledForBeforeNow: showFutureJobs == false ? true : undefined,
 			args:
 				argFilter && argFilter != '{}' && argFilter != '' && argError == '' ? argFilter : undefined,
 			result:

frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte

@@ -30,7 +30,7 @@
 	import { twMerge } from 'tailwind-merge'
 	import ManuelDatePicker from '$lib/components/runs/ManuelDatePicker.svelte'
 	import JobLoader from '$lib/components/runs/JobLoader.svelte'
-	import { Calendar } from 'lucide-svelte'
+	import { Calendar, Clock } from 'lucide-svelte'
 
 	let jobs: Job[] | undefined
 	let selectedId: string | undefined = undefined
@@ -51,12 +51,18 @@
 			? $page.url.searchParams.get('is_skipped') == 'true'
 			: false
 
-	let showSchedules: boolean | undefined =
+	let showSchedules: boolean =
 		$page.url.searchParams.get('show_schedules') != undefined
 			? $page.url.searchParams.get('show_schedules') == 'true'
 			: localStorage.getItem('show_schedules_in_run') == 'false'
 			? false
 			: true
+	let showFutureJobs: boolean =
+		$page.url.searchParams.get('show_future_jobs') != undefined
+			? $page.url.searchParams.get('show_future_jobs') == 'true'
+			: localStorage.getItem('show_future_jobs') == 'false'
+			? false
+			: true
 
 	let argFilter: any = $page.url.searchParams.get('arg')
 		? JSON.parse(decodeURIComponent($page.url.searchParams.get('arg') ?? '{}'))
@@ -98,6 +104,7 @@
 		success !== undefined ||
 		isSkipped ||
 		showSchedules ||
+		showFutureJobs ||
 		argFilter ||
 		resultFilter ||
 		schedulePath ||
@@ -141,6 +148,12 @@
 			searchParams.delete('show_schedules')
 		}
 
+		if (showFutureJobs) {
+			searchParams.set('show_future_jobs', showFutureJobs.toString())
+		} else {
+			searchParams.delete('show_future_jobs')
+		}
+
 		if (allWorkspaces && $workspaceStore == 'admins') {
 			searchParams.set('all_workspaces', allWorkspaces.toString())
 			searchParams.set('workspace', 'admins')
@@ -265,6 +278,8 @@
 		folder = null
 		label = e.detail
 	}
+
+	let calendarChangeTimeout: NodeJS.Timeout | undefined = undefined
 </script>
 
 <JobLoader
@@ -279,6 +294,7 @@
 	{argFilter}
 	{resultFilter}
 	{showSchedules}
+	{showFutureJobs}
 	{schedulePath}
 	{jobKindsCat}
 	computeMinAndMax={manualDatePicker?.computeMinMax}
@@ -394,10 +410,21 @@
 						localStorage.setItem('show_schedules_in_run', showSchedules ? 'true' : 'false')
 					}}
 				/>
-				<span class="text-xs absolute -top-4">Jobs from schedules</span>
+				<span class="text-xs absolute -top-4">CRON Schedules</span>
 
 				<Calendar size={16} />
 			</div>
+			<div class="relative flex gap-2 items-center pr-8 w-40">
+				<span class="text-xs absolute -top-4">Planned later</span>
+				<Toggle
+					size="xs"
+					bind:checked={showFutureJobs}
+					on:change={() => {
+						localStorage.setItem('show_future_jobs', showFutureJobs ? 'true' : 'false')
+					}}
+				/>
+				<Clock size={16} />
+			</div>
 			<div class="flex flex-row gap-1 w-full max-w-lg">
 				<div class="relative w-full">
 					<div class="flex gap-1 relative w-full">
@@ -416,6 +443,10 @@
 							label="Min datetimes"
 							on:change={async ({ detail }) => {
 								minTs = new Date(detail).toISOString()
+								calendarChangeTimeout && clearTimeout(calendarChangeTimeout)
+								calendarChangeTimeout = setTimeout(() => {
+									jobLoader?.loadJobs(minTs, maxTs, true)
+								}, 1000)
 							}}
 						/>
 					</div>
@@ -433,6 +464,10 @@
 							label="Max datetimes"
 							on:change={async ({ detail }) => {
 								maxTs = new Date(detail).toISOString()
+								calendarChangeTimeout && clearTimeout(calendarChangeTimeout)
+								calendarChangeTimeout = setTimeout(() => {
+									jobLoader?.loadJobs(minTs, maxTs, true)
+								}, 1000)
 							}}
 						/>
 					</div>
@@ -555,17 +590,30 @@
 					on:click={async () => (cancelAllJobs = true)}>Cancel All</Button
 				>
 			</div>
-			<div class="relative flex gap-2 items-center pr-8 w-40">
-				<Toggle
-					size="xs"
-					bind:checked={showSchedules}
-					on:change={() => {
-						localStorage.setItem('show_schedules_in_run', showSchedules ? 'true' : 'false')
-					}}
-				/>
-				<span class="text-xs absolute -top-4">Schedules</span>
+			<div class="flex gap-2 py-1">
+				<div class="relative flex gap-2 items-center pr-8 w-40">
+					<Toggle
+						size="xs"
+						bind:checked={showSchedules}
+						on:change={() => {
+							localStorage.setItem('show_schedules_in_run', showSchedules ? 'true' : 'false')
+						}}
+					/>
+					<span class="text-xs absolute -top-4">Schedules</span>
 
-				<Calendar size={16} />
+					<Calendar size={16} />
+				</div>
+				<div class="relative flex gap-2 items-center pr-8 w-40">
+					<span class="text-xs absolute -top-4">Planned later</span>
+					<Toggle
+						size="xs"
+						bind:checked={showFutureJobs}
+						on:change={() => {
+							localStorage.setItem('show_future_jobs', showFutureJobs ? 'true' : 'false')
+						}}
+					/>
+					<Clock size={16} />
+				</div>
 			</div>
 			<div class="flex flex-row gap-1 w-full max-w-lg items-center">
 				<div class="relative w-full">
@@ -585,6 +633,10 @@
 							label="Min datetimes"
 							on:change={async ({ detail }) => {
 								minTs = new Date(detail).toISOString()
+								calendarChangeTimeout && clearTimeout(calendarChangeTimeout)
+								calendarChangeTimeout = setTimeout(() => {
+									jobLoader?.loadJobs(minTs, maxTs, true)
+								}, 1000)
 							}}
 						/>
 					</div>
@@ -602,6 +654,10 @@
 							label="Max datetimes"
 							on:change={async ({ detail }) => {
 								maxTs = new Date(detail).toISOString()
+								calendarChangeTimeout && clearTimeout(calendarChangeTimeout)
+								calendarChangeTimeout = setTimeout(() => {
+									jobLoader?.loadJobs(minTs, maxTs, true)
+								}, 1000)
 							}}
 						/>
 					</div>