Add toggle between two graphs

windmill-labs · May 13, 2024 · ed6e087 · ed6e087
1 parent f7318e6
commit ed6e087
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 21 deletions.
diff --git a/frontend/src/lib/components/runs/JobLoader.svelte b/frontend/src/lib/components/runs/JobLoader.svelte
@@ -277,7 +277,6 @@
 	}
 
 	function updateConcurrencyKeyMap() {
-		console.log(concurrencyIntervals)
 		for (const vec of [concurrencyIntervals?.running_jobs, concurrencyIntervals?.completed_jobs]) {
 			if (vec == undefined) continue
 			for (const interval of vec) {
@@ -326,17 +325,19 @@
 						permissioned_as: '-',
 						tag: '-',
 						job_kind: 'flow',
-						duration_ms: x.ended_at && x.started_at ? ((new Date(x.ended_at)).getTime() - (new Date(x.started_at).getTime())): 0
+						duration_ms:
+							x.ended_at && x.started_at
+								? new Date(x.ended_at).getTime() - new Date(x.started_at).getTime()
+								: 0
 					} as Job)
 			)
 		let ret: Job[] = []
 		if (externalQueued) {
-		ret=	ret.concat(externalQueued)
+			ret = ret.concat(externalQueued)
 		}
 		if (externalCompleted) {
-	ret = 		ret.concat(externalCompleted)
+			ret = ret.concat(externalCompleted)
 		}
-		console.log(externalCompleted)
 		externalJobs = ret
 	}
 

diff --git a/frontend/src/lib/components/runs/RunsTable.svelte b/frontend/src/lib/components/runs/RunsTable.svelte
@@ -21,7 +21,6 @@
 	let containsLabel = false
 	function groupJobsByDay(jobs: Job[]): Record<string, Job[]> {
 		const groupedLogs: Record<string, Job[]> = {}
-		console.log(jobs)
 
 		if (!jobs) return groupedLogs
 
@@ -64,7 +63,6 @@
 			.forEach((key) => {
 				sortedLogs[key] = groupedLogs[key]
 			})
-		console.log(sortedLogs)
 
 		return sortedLogs
 	}

diff --git a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
@@ -100,6 +100,11 @@
 	let jobLoader: JobLoader | undefined = undefined
 	let externalJobs: Job[] | undefined;
 
+	let graphIsRunsChart: boolean = true
+	let graph: 'RunChart' | 'ConcurrencyChart'
+
+	$: graph  = graphIsRunsChart ? 'RunChart' : 'ConcurrencyChart'
+
 	let manualDatePicker: ManuelDatePicker
 
 	$: (user ||
@@ -369,6 +374,7 @@
 	<div class="w-full h-screen">
 		<div class="px-2">
 			<div class="flex items-center space-x-2 flex-row justify-between">
+				<div class="flex-col">
 				<div class="flex flex-row flex-wrap justify-between py-2 my-4 px-4 gap-1 items-center">
 					<h1
 						class={twMerge(
@@ -385,6 +391,12 @@
 						All past and schedule executions of scripts and flows, including previews. You only see
 						your own runs or runs of groups you belong to unless you are an admin.
 					</Tooltip>
+				</div>
+					<Toggle
+						size={'xs'}
+						bind:checked={graphIsRunsChart}
+						options={{ right: 'Run Durations', left: "Concurrency"}}
+					/>
 				</div>
 				<RunsFilter
 					bind:isSkipped
@@ -409,7 +421,7 @@
 		</div>
 
 		<div class="p-2 w-full">
-			{#if false}
+			{#if graph === 'RunChart'}
 				<RunChart
 					minTimeSet={minTs}
 					maxTimeSet={maxTs}
@@ -421,7 +433,7 @@
 						jobLoader?.loadJobs(minTs, maxTs, true)
 					}}
 				/>
-			{:else}
+			{:else if graph === 'ConcurrencyChart'}
 				<ConcurrentJobsChart
 					minTimeSet={minTs}
 					maxTimeSet={maxTs}
@@ -546,6 +558,7 @@
 						<RunsTable
 							{jobs}
 							{externalJobs}
+							showExternalJobs={!graphIsRunsChart}
 							activeLabel={label}
 							bind:selectedId
 							bind:selectedWorkspace
@@ -613,19 +626,33 @@
 					on:change={reloadJobsWithoutFilterError}
 				/>
 			</div>
-		</div>RunChart
+		</div>
 		<div class="p-2 w-full">
-			<RunChart
-				minTimeSet={minTs}
-				maxTimeSet={maxTs}
-				maxIsNow={maxTs == undefined}
-				jobs={completedJobs}
-				on:zoom={async (e) => {
-					minTs = e.detail.min.toISOString()
-					maxTs = e.detail.max.toISOString()
-					jobLoader?.loadJobs(minTs, maxTs, true)
-				}}
-			/>
+			{#if graph === 'RunChart'}
+				<RunChart
+					minTimeSet={minTs}
+					maxTimeSet={maxTs}
+					maxIsNow={maxTs == undefined}
+					jobs={completedJobs}
+					on:zoom={async (e) => {
+						minTs = e.detail.min.toISOString()
+						maxTs = e.detail.max.toISOString()
+						jobLoader?.loadJobs(minTs, maxTs, true)
+					}}
+				/>
+			{:else if graph === 'ConcurrencyChart'}
+				<ConcurrentJobsChart
+					minTimeSet={minTs}
+					maxTimeSet={maxTs}
+					maxIsNow={maxTs == undefined}
+					{concurrencyIntervals}
+					on:zoom={async (e) => {
+						minTs = e.detail.min.toISOString()
+						maxTs = e.detail.max.toISOString()
+						jobLoader?.loadJobs(minTs, maxTs, true)
+					}}
+				/>
+			{/if}
 		</div>
 		<div class="flex flex-col gap-4 md:flex-row w-full p-4">
 			<div class="flex items-center flex-row gap-2 grow">