Improve frontend UI

windmill-labs · May 15, 2024 · a51a5b0 · a51a5b0
1 parent df7d2c7
commit a51a5b0
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 33 deletions.
diff --git a/frontend/src/lib/components/FlowMetadata.svelte b/frontend/src/lib/components/FlowMetadata.svelte
@@ -1,24 +1,17 @@
 <script lang="ts">
-	import { ConcurrencyGroupsService, type Job } from '$lib/gen'
+	import { type Job } from '$lib/gen'
 	import JobStatus from '$lib/components/JobStatus.svelte'
 	import { displayDate } from '$lib/utils'
 	import ScheduleEditor from './ScheduleEditor.svelte'
 	import TimeAgo from './TimeAgo.svelte'
 	import { workspaceStore } from '$lib/stores'
 	import Tooltip from './Tooltip.svelte'
-	import { Clock, MemoryStick, Calendar, Bot, User, Code2, GitPullRequestClosed} from 'lucide-svelte'
+	import { Clock, MemoryStick, Calendar, Bot, User, Code2 } from 'lucide-svelte'
 	import BarsStaggered from '$lib/components/icons/BarsStaggered.svelte'
 
 	export let job: Job
 	const SMALL_ICON_SIZE = 14
 	export let scheduleEditor: ScheduleEditor
-	let lastJobId : string | undefined = undefined;
-	let concurrencyKey : string | undefined = undefined;
-	$: job?.id && lastJobId !== job.id && getConcurrencyKey()
-	async function getConcurrencyKey() {
-		lastJobId = job.id;
-		concurrencyKey = await ConcurrencyGroupsService.getConcurrencyKey({"id": job.id});
-	}
 </script>
 
 <div
@@ -37,15 +30,6 @@
 			<Tooltip>{job?.created_at}</Tooltip>
 		</span>
 	</div>
-	{#if concurrencyKey}
-		<div class="flex flex-row gap-2 items-center">
-			<GitPullRequestClosed size={SMALL_ICON_SIZE} class="text-secondary" />
-			<span class="text-2xs text-secondary">
-				<a href={`/runs/?job_kinds=all&graph=ConcurrencyKey&concurrency_key=${concurrencyKey}`}>{concurrencyKey}</a>
-			</span>
-			<Tooltip>This job has a concurrency limit</Tooltip>
-		</div>
-	{/if}
 	{#if job && 'started_at' in job && job.started_at}
 		<div class="flex flex-row gap-2 items-center">
 			<Clock size={SMALL_ICON_SIZE} class="text-secondary" />

diff --git a/frontend/src/lib/components/runs/JobPreview.svelte b/frontend/src/lib/components/runs/JobPreview.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { type Job, type WorkflowStatus } from '../../gen'
+	import { ConcurrencyGroupsService, type Job, type WorkflowStatus } from '../../gen'
 	import TestJobLoader from '../TestJobLoader.svelte'
 	import DisplayResult from '../DisplayResult.svelte'
 	import JobArgs from '../JobArgs.svelte'
@@ -12,6 +12,8 @@
 	import DurationMs from '../DurationMs.svelte'
 	import { workspaceStore } from '$lib/stores'
 	import WorkflowTimeline from '../WorkflowTimeline.svelte'
+	import Popover from '../Popover.svelte'
+	import { truncateRev } from '$lib/utils'
 
 	export let id: string
 	export let blankLink = false
@@ -38,6 +40,14 @@
 
 	$: job?.logs == undefined && job && viewTab == 'logs' && getLogs?.()
 
+	let lastJobId: string | undefined = undefined
+	let concurrencyKey: string | undefined = undefined
+	$: job?.id && lastJobId !== job.id && getConcurrencyKey(job)
+	async function getConcurrencyKey(job: Job) {
+		lastJobId = job.id
+		concurrencyKey = await ConcurrencyGroupsService.getConcurrencyKey({ id: job.id })
+	}
+
 	let viewTab = 'result'
 
 	function asWorkflowStatus(x: any): Record<string, WorkflowStatus> {
@@ -84,6 +94,15 @@
 					<Badge baseClass="text-2xs">Label: {label}</Badge>
 				{/each}
 			{/if}
+			{#if concurrencyKey}
+				<Popover notClickable>
+					<svelte:fragment slot="text">
+						This jobs has concurrency limits enabled with the key
+						{concurrencyKey}
+					</svelte:fragment>
+					<Badge>Concurrency: {truncateRev(concurrencyKey, 20)}</Badge>
+				</Popover>
+			{/if}
 		</div>
 		<a
 			href="/run/{job?.id}?workspace={job?.workspace_id}"

diff --git a/frontend/src/routes/(root)/(logged)/concurrency_groups/+page.svelte b/frontend/src/routes/(root)/(logged)/concurrency_groups/+page.svelte
@@ -86,7 +86,7 @@
 						<tr>
 							<td>
 								<a
-									href={`/runs/?job_kinds=all&graph=ConcurrencyKey&concurrency_key=${concurrency_key}`}
+									href={`/runs/?job_kinds=all&graph=ConcurrencyChart&concurrency_key=${concurrency_key}`}
 									>{concurrency_key}
 								</a>
 							</td>

diff --git a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
@@ -6,15 +6,17 @@
 		ScriptService,
 		type Script,
 		type WorkflowStatus,
-		type NewScript
+		type NewScript,
+		ConcurrencyGroupsService
 	} from '$lib/gen'
 	import {
 		canWrite,
 		copyToClipboard,
 		displayDate,
 		emptyString,
 		encodeState,
-		truncateHash
+		truncateHash,
+		truncateRev
 	} from '$lib/utils'
 	import BarsStaggered from '$lib/components/icons/BarsStaggered.svelte'
 
@@ -81,6 +83,7 @@
 	import Toggle from '$lib/components/Toggle.svelte'
 	import WorkflowTimeline from '$lib/components/WorkflowTimeline.svelte'
 	import ScheduleEditor from '$lib/components/ScheduleEditor.svelte'
+	import Popover from '$lib/components/Popover.svelte'
 
 	let job: Job | undefined
 	let jobUpdateLastFetch: Date | undefined
@@ -101,6 +104,14 @@
 
 	$: job?.logs == undefined && job && viewTab == 'logs' && getLogs?.()
 
+	let lastJobId: string | undefined = undefined
+	let concurrencyKey: string | undefined = undefined
+	$: job?.id && lastJobId !== job.id && getConcurrencyKey(job)
+	async function getConcurrencyKey(job: Job) {
+		lastJobId = job.id
+		concurrencyKey = await ConcurrencyGroupsService.getConcurrencyKey({ id: job.id })
+	}
+
 	async function deleteCompletedJob(id: string): Promise<void> {
 		await JobService.deleteCompletedJob({ workspace: $workspaceStore!, id })
 		getJob()
@@ -649,6 +660,25 @@
 								</div>
 							{/each}
 						{/if}
+						{#if concurrencyKey}
+							<div>
+								<Popover notClickable>
+									<svelte:fragment slot="text">
+										This jobs has concurrency limits enabled with the key
+										<a
+											href={`/runs/?job_kinds=all&graph=ConcurrencyChart&concurrency_key=${concurrencyKey}`}
+										>
+											{concurrencyKey}
+										</a>
+									</svelte:fragment>
+									<a
+										href={`/runs/?job_kinds=all&graph=ConcurrencyChart&concurrency_key=${concurrencyKey}`}
+									>
+										<Badge>Concurrency: {truncateRev(concurrencyKey, 20)}</Badge></a
+									>
+								</Popover>
+							</div>
+						{/if}
 					</div>
 				{/if}
 			</div>

diff --git a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
@@ -31,7 +31,7 @@
 	import { twMerge } from 'tailwind-merge'
 	import ManuelDatePicker from '$lib/components/runs/ManuelDatePicker.svelte'
 	import JobLoader from '$lib/components/runs/JobLoader.svelte'
-	import { Calendar, Clock } from 'lucide-svelte'
+	import { AlertTriangle, Calendar, Clock } from 'lucide-svelte'
 	import ConcurrentJobsChart from '$lib/components/ConcurrentJobsChart.svelte'
 	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
@@ -120,6 +120,7 @@
 		schedulePath ||
 		jobKindsCat ||
 		concurrencyKey ||
+		graph ||
 		minTs ||
 		maxTs ||
 		allWorkspaces ||
@@ -325,6 +326,15 @@
 				return 'RunChart'
 		}
 	}
+
+	const warnJobLimitMsg =
+		'The exact number of concurrent job at the beginning of the time range may be incorrect as only the last 1000 jobs are taken into account: a job that was started earlier than this limit will not be taken into account'
+
+	$: warnJobLimit =
+		graph === 'ConcurrencyChart' &&
+		concurrencyIntervals !== undefined &&
+		(concurrencyIntervals.running_jobs.length === 1000 ||
+			concurrencyIntervals.completed_jobs.length === 1000)
 </script>
 
 <JobLoader
@@ -434,16 +444,23 @@
 
 		<div class="p-2 w-full">
 			<div class="relative z-10">
-				<div class="absolute  right-0 -mt-6">
-					<ToggleButtonGroup
-						bind:selected={graph}
-						on:selected={() => {
-							graphIsRunsChart = graph == 'RunChart'
-						}}
-					>
-						<ToggleButton value="RunChart" label="Duration" />
-						<ToggleButton value="ConcurrencyChart" label="Concurrency" />
-					</ToggleButtonGroup>
+				<div class="absolute right-0 -mt-6">
+					<div class="flex flex-row justify-between items-center">
+						<ToggleButtonGroup
+							bind:selected={graph}
+							on:selected={() => {
+								graphIsRunsChart = graph === 'RunChart'
+							}}
+						>
+							<ToggleButton value="RunChart" label="Duration" />
+							<ToggleButton
+								value="ConcurrencyChart"
+								label="Concurrency"
+								icon={warnJobLimit ? AlertTriangle : undefined}
+								tooltip={warnJobLimit ? warnJobLimitMsg : undefined}
+							/>
+						</ToggleButtonGroup>
+					</div>
 				</div>
 			</div>
 			{#if graph === 'RunChart'}