From db23b7f5e7bca18f1f5a26af43487afeff8a1f3d Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 24 Apr 2024 11:44:29 +0200
Subject: [PATCH] improve labels handling

---
 frontend/src/lib/components/jobs/JobPreview.svelte       | 5 +++++
 frontend/src/lib/components/runs/JobPreview.svelte       | 7 ++++++-
 frontend/src/lib/components/runs/RunRow.svelte           | 7 +++++--
 .../src/routes/(root)/(logged)/run/[...run]/+page.svelte | 9 ++++++++-
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/jobs/JobPreview.svelte b/frontend/src/lib/components/jobs/JobPreview.svelte
index d72488a3d5..641874da06 100644
--- a/frontend/src/lib/components/jobs/JobPreview.svelte
+++ b/frontend/src/lib/components/jobs/JobPreview.svelte
@@ -110,6 +110,11 @@
 				{#if job?.['duration_ms']}
 					<DurationMs duration_ms={job?.['duration_ms']} />
 				{/if}
+				{#if job?.['labels'] && Array.isArray(job?.['labels']) && job?.['labels'].length > 0}
+					{#each job?.['labels'] as label}
+						<Badge>Label: {label}</Badge>
+					{/each}
+				{/if}
 			</div>
 			<div class="w-1/2 h-full overflow-auto">
 				<JobArgs args={job?.args} />
diff --git a/frontend/src/lib/components/runs/JobPreview.svelte b/frontend/src/lib/components/runs/JobPreview.svelte
index edcd07bea6..c1f5f600b2 100644
--- a/frontend/src/lib/components/runs/JobPreview.svelte
+++ b/frontend/src/lib/components/runs/JobPreview.svelte
@@ -55,7 +55,7 @@
 />
 <div class="p-4 flex flex-col gap-2 items-start h-full">
 	{#if job}
-		<div class="flex gap-2">
+		<div class="flex gap-2 flex-wrap">
 			{#if job?.['priority']}
 				<Badge color="red">
 					priority: {job?.['priority']}
@@ -79,6 +79,11 @@
 					Tag: {job.tag}
 				</Badge>
 			{/if}
+			{#if job?.['labels'] && Array.isArray(job?.['labels']) && job?.['labels'].length > 0}
+				{#each job?.['labels'] as label}
+					<Badge baseClass="text-2xs">Label: {label}</Badge>
+				{/each}
+			{/if}
 		</div>
 		<a
 			href="/run/{job?.id}?workspace={job?.workspace_id}"
diff --git a/frontend/src/lib/components/runs/RunRow.svelte b/frontend/src/lib/components/runs/RunRow.svelte
index 42eaea4dd8..6c986b7b73 100644
--- a/frontend/src/lib/components/runs/RunRow.svelte
+++ b/frontend/src/lib/components/runs/RunRow.svelte
@@ -178,13 +178,16 @@
 	{#if containsLabel}
 		<div class="w-3/12 flex justify-start">
 			{#if job && job?.['labels']}
-				<div class="flex flex-row items-center gap-1">
+				<div class="flex flex-row items-center gap-1 overflow-x-auto">
 					{#if Array.isArray(job?.['labels'])}
 						{#each job?.['labels'] as label}
 							<Button
 								variant="border"
 								size="xs2"
-								btnClasses={activeLabel == label ? 'bg-blue-50 dark:bg-blue-900/50' : undefined}
+								btnClasses={twMerge(
+									activeLabel == label ? 'bg-blue-50 dark:bg-blue-900/50' : '',
+									'!text-2xs !font-normal truncate max-w-28'
+								)}
 								color="light"
 								on:click={() => {
 									dispatch('filterByLabel', label)
diff --git a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
index 672f56c402..f1852b3485 100644
--- a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
@@ -590,7 +590,7 @@
 						<Hourglass class="text-tertiary" size={14} />
 					{/if}
 					{job.script_path ?? (job.job_kind == 'dependencies' ? 'lock dependencies' : 'No path')}
-					<div class="flex flex-row gap-2 items-center">
+					<div class="flex flex-row gap-2 items-center flex-wrap">
 						{#if job.script_hash}
 							<a href="/scripts/get/{job.script_hash}?workspace={$workspaceStore}"
 								><Badge color="gray">{truncateHash(job.script_hash)}</Badge></a
@@ -625,6 +625,13 @@
 								</Badge></div
 							>
 						{/if}
+						{#if job?.['labels'] && Array.isArray(job?.['labels']) && job?.['labels'].length > 0}
+							{#each job?.['labels'] as label}
+								<div>
+									<Badge>Label: {label}</Badge>
+								</div>
+							{/each}
+						{/if}
 					</div>
 				{/if}
 			</div>