windmill-components 1.623.1 → 1.642.0

package/package/components/runs/JobRunsPreview.svelte

@@ -1,55 +1,70 @@
-<script lang="ts">import { base } from '../../base';
-import { ConcurrencyGroupsService } from '../../gen';
+<script lang="ts">import { ConcurrencyGroupsService } from '../../gen';
 import JobLoader from '../JobLoader.svelte';
 import DisplayResult from '../DisplayResult.svelte';
 import JobArgs from '../JobArgs.svelte';
 import LogViewer from '../LogViewer.svelte';
-import { Badge, Button, Skeleton, Tab, Tabs } from '../common';
+import { Skeleton, Tab, Tabs } from '../common';
 import HighlightCode from '../HighlightCode.svelte';
-import { forLater } from '../../forLater';
-import FlowProgressBar from '../flows/FlowProgressBar.svelte';
 import FlowStatusViewer from '../FlowStatusViewer.svelte';
-import DurationMs from '../DurationMs.svelte';
 import { workspaceStore } from '../../stores';
 import WorkflowTimeline from '../WorkflowTimeline.svelte';
-import Popover from '../Popover.svelte';
-import { isFlowPreview, isScriptPreview, truncateRev } from '../../utils';
-import { createEventDispatcher, setContext, untrack } from 'svelte';
-import { Calendar, ListFilter, LoaderCircle } from 'lucide-svelte';
+import { isFlowPreview, isScriptPreview } from '../../utils';
+import { setContext, untrack, createEventDispatcher } from 'svelte';
+import { LoaderCircle } from 'lucide-svelte';
 import FlowAssetsHandler, { initFlowGraphAssetsCtx } from '../flows/FlowAssetsHandler.svelte';
 import JobAssetsViewer from '../assets/JobAssetsViewer.svelte';
-let { id, blankLink = false, workspace } = $props();
+import JobDetailHeader from './JobDetailHeader.svelte';
+import FlowExecutionStatus from './FlowExecutionStatus.svelte';
+let { id, workspace } = $props();
+const dispatch = createEventDispatcher();
 let job = $state(undefined);
-let result = $state();
-function onDone(job) {
-    result = job['result'];
-}
 let currentJob = $state(undefined);
+let loadError = $state(undefined);
+let isLoadingJobDetails = $state(false);
 let lastJobId = $state(undefined);
 let concurrencyKey = $state(undefined);
 async function getConcurrencyKey(job) {
     lastJobId = job.id;
     concurrencyKey = await ConcurrencyGroupsService.getConcurrencyKey({ id: job.id });
 }
-let viewTab = $state('result');
+let viewTab = $state('logs');
 setContext('FlowGraphAssetContext', initFlowGraphAssetsCtx({ getModules: () => job?.raw_flow?.modules ?? [] }));
 function asWorkflowStatus(x) {
     return x;
 }
-const dispatch = createEventDispatcher();
+function handleFilterByConcurrencyKey(key) {
+    dispatch('filterByConcurrencyKey', key);
+}
+function handleFilterByWorker(worker) {
+    dispatch('filterByWorker', worker);
+}
 $effect(() => {
     if (currentJob?.id == id) {
         job = currentJob;
     }
 });
 $effect(() => {
-    id &&
-        jobLoader &&
+    if (id && jobLoader) {
+        loadError = undefined;
+        isLoadingJobDetails = true;
         untrack(() => jobLoader?.watchJob(id, {
             done(x) {
-                onDone(x);
+                loadError = undefined;
+                isLoadingJobDetails = false;
+            },
+            doneError({ error }) {
+                // Only show error state if we couldn't load the job data
+                // If the job failed but we have the job object, let it display normally
+                if (!currentJob) {
+                    loadError = error?.body || error?.message || 'Failed to load job details';
+                }
+                isLoadingJobDetails = false;
+            },
+            change() {
+                isLoadingJobDetails = false;
             }
         }));
+    }
 });
 $effect(() => {
     job?.id && lastJobId !== job.id && untrack(() => job && getConcurrencyKey(job));
@@ -59,11 +74,13 @@ let jobLoader = $state(undefined);
 let tabsHeight = $state({
     codeHeight: 0,
     logsHeight: 0,
-    assetsHeight: 0,
-    resultHeight: 0
+    assetsHeight: 0
 });
-let minTabHeight = $derived(Math.max(tabsHeight.codeHeight, tabsHeight.logsHeight, tabsHeight.assetsHeight, tabsHeight.resultHeight));
+let minTabHeight = $derived(Math.max(tabsHeight.codeHeight, tabsHeight.logsHeight, tabsHeight.assetsHeight));
 let jobIsLoading = $state(false);
+// Flow execution status state
+let suspendStatus = $state({ val: {} });
+let isOwner = $state(false);
 </script>
 
 <JobLoader
@@ -73,90 +90,56 @@ let jobIsLoading = $state(false);
 	bind:this={jobLoader}
 />
 
-<div class="h-full overflow-y-auto">
-	<div class="flex flex-col gap-2 items-start p-4 pb-8 min-h-full">
-		{#if job}
-			<div class="flex gap-2 flex-wrap">
-				{#if job?.['priority']}
-					<Badge color="red">
-						priority: {job?.['priority']}
-					</Badge>
-				{/if}
-				{#if job && 'duration_ms' in job && job.duration_ms != undefined}
-					<DurationMs
-						duration_ms={job.duration_ms}
-						self_wait_time_ms={job?.self_wait_time_ms}
-						aggregate_wait_time_ms={job?.aggregate_wait_time_ms}
+<div class="h-full">
+	<div class="flex flex-col items-start pb-4 min-h-full">
+		{#if isLoadingJobDetails}
+			<div class="w-full flex-1 flex items-center justify-center">
+				<div class="text-center">
+					<LoaderCircle size={32} class="animate-spin text-primary mx-auto" />
+					<div class="text-secondary text-sm mt-2">Loading job details...</div>
+				</div>
+			</div>
+		{:else if loadError}
+			<div class="w-full h-full flex items-center justify-center">
+				<div class="text-center">
+					<div class="text-red-500 text-lg font-semibold mb-2">Error loading job</div>
+					<div class="text-secondary text-sm">{loadError}</div>
+				</div>
+			</div>
+		{:else if job}
+			{@const isFlow = job?.job_kind == 'flow' || isFlowPreview(job?.job_kind)}
+			<JobDetailHeader
+				{job}
+				compact
+				{concurrencyKey}
+				onFilterByConcurrencyKey={handleFilterByConcurrencyKey}
+				onFilterByWorker={handleFilterByWorker}
+			/>
+
+			<!-- Workflow timeline -->
+			{#if job?.workflow_as_code_status}
+				<div class="py-2">
+					<WorkflowTimeline
+						flow_status={asWorkflowStatus(job.workflow_as_code_status)}
+						flowDone={job.type == 'CompletedJob'}
+					/>
+				</div>
+			{/if}
+			<div class="w-full mt-2">
+				{#if isFlow}
+					<FlowExecutionStatus
+						{job}
+						workspaceId={job?.workspace_id}
+						{isOwner}
+						innerModules={job?.flow_status?.modules}
+						{suspendStatus}
 					/>
-				{/if}
-				{#if job?.['mem_peak']}
-					<Badge large>
-						Mem: {job?.['mem_peak'] ? `${(job['mem_peak'] / 1024).toPrecision(4)}MB` : 'N/A'}
-					</Badge>
-				{/if}
-				{#if workspace && $workspaceStore != workspace}
-					<Badge large>
-						Workspace: {workspace}
-					</Badge>
-				{/if}
-				{#if job.tag}
-					<Badge large>
-						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}
-				{#if concurrencyKey}
-					<Popover notClickable>
-						{#snippet text()}
-							This job has concurrency limits enabled with the key:
-							<Button
-								class="inline-text"
-								size="xs2"
-								color="light"
-								on:click={() => {
-									dispatch('filterByConcurrencyKey', concurrencyKey)
-								}}
-							>
-								{concurrencyKey}
-								<ListFilter class="inline-block" size={10} />
-							</Button>
-						{/snippet}
-						<Badge large>Concurrency: {truncateRev(concurrencyKey, 20)}</Badge>
-					</Popover>
-				{/if}
-				{#if job?.worker}
-					<Popover notClickable>
-						{#snippet text()}
-							This job was run on worker:
-							<Button
-								class="inline-text"
-								size="xs2"
-								color="light"
-								on:click={() => {
-									dispatch('filterByWorker', job?.worker)
-								}}
-							>
-								{job?.worker}
-								<ListFilter class="inline-block" size={10} />
-							</Button>
-						{/snippet}
-						<Badge large>Worker: {truncateRev(job.worker, 20)}</Badge>
-					</Popover>
 				{/if}
 			</div>
-			<a
-				href="{base}/run/{job?.id}?workspace={job?.workspace_id}"
-				class="text-xs font-semibold"
-				target={blankLink ? '_blank' : undefined}
-			>
-				ID: {job?.id ?? ''}
-			</a>
 
-			<div class="w-full">
+			<!-- Job inputs -->
+			<div class="w-full mt-4">
+				<div class="text-xs text-emphasis font-semibold mb-1">Inputs</div>
 				<JobArgs
 					id={job?.id}
 					workspace={job?.workspace_id ?? $workspaceStore ?? 'no_w'}
@@ -164,127 +147,100 @@ let jobIsLoading = $state(false);
 				/>
 			</div>
 
-			{#if job && 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}
-				<div
-					class="flex flex-row gap-4 items-center mb-1 w-full bg-surface-tertiary rounded-md p-4 border"
-				>
-					<Calendar size={16} class="text-accent" />
-					<div class="flex flex-col gap-1">
-						<span class="text-2xs font-normal text-secondary">Job is scheduled for</span>
-						<span class="text-xs font-semibold text-emphasis"
-							>{new Date(job?.['scheduled_for']).toLocaleString()}</span
-						>
-					</div>
-				</div>
-			{/if}
-
-			<div class="w-full rounded-md min-h-full">
-				{#if job?.workflow_as_code_status}
-					<WorkflowTimeline
-						flow_status={asWorkflowStatus(job.workflow_as_code_status)}
-						flowDone={job.type == 'CompletedJob'}
+			<!-- Job execution content -->
+			<div class="w-full mt-6">
+				{#if isFlow}
+					<FlowStatusViewer
+						jobId={job.id}
+						workspaceId={job.workspace_id}
+						initialJob={job}
+						bind:isOwner
+						wideResults
 					/>
-				{/if}
-
-				{#if job?.type === 'CompletedJob'}
-					{#if job?.job_kind == 'flow' || isFlowPreview(job?.job_kind)}
-						<div class="w-full mt-8 mb-20">
-							<FlowStatusViewer
-								jobId={job.id}
-								workspaceId={job.workspace_id}
-								wideResults
-								initialJob={job}
-							></FlowStatusViewer>
-						</div>
-					{:else}
-						<Tabs bind:selected={viewTab}>
-							<Tab value="result" label="Results" />
-							<Tab value="logs" label="Logs" />
-							<Tab value="assets" label="Assets" />
-							{#if isScriptPreview(job?.job_kind)}
-								<Tab value="code" label="Code" />
+				{:else if job?.type === 'CompletedJob'}
+					<!-- Result Section (moved outside tabs) -->
+					<div class="w-full mb-6">
+						<h3 class="text-xs font-semibold text-emphasis mb-1">Result</h3>
+						<div class="border rounded-md bg-surface-tertiary p-4 overflow-auto max-h-[400px]">
+							{#if job.result_stream || (job.type == 'CompletedJob' && job.result !== undefined)}
+								<DisplayResult
+									workspaceId={job?.workspace_id}
+									jobId={job?.id}
+									result={job?.result}
+									disableExpand
+									language={job?.language}
+								/>
+							{:else}
+								<div class="text-secondary">No output is available yet</div>
 							{/if}
-						</Tabs>
+						</div>
+					</div>
 
-						<Skeleton loading={!job} layout={[[5]]} />
-						{#if job}
-							<div class="flex flex-col border rounded-md p-2 mt-2 overflow-auto">
-								{#if viewTab == 'logs'}
-									<div
-										class="w-full"
-										bind:clientHeight={tabsHeight.logsHeight}
-										style="min-height: {minTabHeight}px"
-									>
-										<LogViewer
-											jobId={job.id}
-											duration={job?.['duration_ms']}
-											mem={job?.['mem_peak']}
-											isLoading={job?.['running'] == false}
-											content={job?.logs}
-											tag={job?.tag}
-										/>
-									</div>
-								{:else if viewTab == 'assets'}
-									<div
-										class="w-full h-full"
-										bind:clientHeight={tabsHeight.assetsHeight}
-										style="min-height: {minTabHeight}px"
-									>
-										<JobAssetsViewer {job} />
-									</div>
-								{:else if viewTab == 'code'}
-									<div
-										class="text-xs"
-										bind:clientHeight={tabsHeight.codeHeight}
-										style="min-height: {minTabHeight}px"
-									>
-										{#if job && 'raw_code' in job && job.raw_code}
-											<div class="text-xs">
-												<HighlightCode lines language={job.language} code={job.raw_code} />
-											</div>
-										{:else if job}
-											<span class="text-sm">No code available</span>
-										{:else}
-											<Skeleton layout={[[5]]} />
-										{/if}
-									</div>
-								{:else if job !== undefined && (job.result_stream || (job.type == 'CompletedJob' && job.result !== undefined))}
-									<div
-										class="w-full"
-										bind:clientHeight={tabsHeight.resultHeight}
-										style="min-height: {minTabHeight}px"
-									>
-										<DisplayResult
-											workspaceId={job?.workspace_id}
-											jobId={job?.id}
-											{result}
-											disableExpand
-											language={job?.language}
-										/>
-									</div>
-								{:else if job}
-									No output is available yet
-								{/if}
-							</div>
+					<Tabs bind:selected={viewTab}>
+						<Tab value="logs" label="Logs" />
+						<Tab value="assets" label="Assets" />
+						{#if isScriptPreview(job?.job_kind)}
+							<Tab value="code" label="Code" />
 						{/if}
-					{/if}
-				{:else if job && `running` in job ? job.running : false}
-					{#if job?.job_kind == 'flow' || isFlowPreview(job?.job_kind)}
-						<div class="flex flex-col gap-2 w-full">
-							<FlowProgressBar {job} class="py-4" />
-							<FlowStatusViewer jobId={job.id} workspaceId={job.workspace_id} initialJob={job} />
+					</Tabs>
+
+					<Skeleton loading={!job} layout={[[5]]} />
+					{#if job}
+						<div class="flex flex-col rounded-md mt-2 overflow-auto">
+							{#if viewTab == 'logs'}
+								<div
+									class="w-full"
+									bind:clientHeight={tabsHeight.logsHeight}
+									style="min-height: {minTabHeight}px"
+								>
+									<LogViewer
+										jobId={job.id}
+										duration={job?.['duration_ms']}
+										mem={job?.['mem_peak']}
+										isLoading={job?.['running'] == false}
+										content={job?.logs}
+										tag={job?.tag}
+									/>
+								</div>
+							{:else if viewTab == 'assets'}
+								<div
+									class="w-full h-full"
+									bind:clientHeight={tabsHeight.assetsHeight}
+									style="min-height: {minTabHeight}px"
+								>
+									<JobAssetsViewer {job} />
+								</div>
+							{:else if viewTab == 'code'}
+								<div
+									class="text-xs"
+									bind:clientHeight={tabsHeight.codeHeight}
+									style="min-height: {minTabHeight}px"
+								>
+									{#if job && 'raw_code' in job && job.raw_code}
+										<div class="text-xs">
+											<HighlightCode lines language={job.language} code={job.raw_code} />
+										</div>
+									{:else if job}
+										<span class="text-sm">No code available</span>
+									{:else}
+										<Skeleton layout={[[5]]} />
+									{/if}
+								</div>
+							{:else}
+								<div class="w-full p-4 text-secondary">Select a tab to view content</div>
+							{/if}
 						</div>
-					{:else}
-						<div class="text-sm font-semibold text-primary mb-1"> Job is still running </div>
-						<LogViewer
-							jobId={job?.id}
-							duration={job?.['duration_ms']}
-							mem={job?.['mem_peak']}
-							content={job?.logs}
-							isLoading={job?.['running'] == false}
-							tag={job?.tag}
-						/>
 					{/if}
+				{:else if job && `running` in job ? job.running : false}
+					<div class="text-sm font-semibold text-primary mb-1"> Job is still running </div>
+					<LogViewer
+						jobId={job?.id}
+						duration={job?.['duration_ms']}
+						mem={job?.['mem_peak']}
+						content={job?.logs}
+						isLoading={job?.['running'] == false}
+						tag={job?.tag}
+					/>
 				{/if}
 			</div>
 		{:else if jobIsLoading}

package/package/components/runs/JobRunsPreview.svelte.d.ts

@@ -1,6 +1,5 @@
 interface Props {
     id: string;
-    blankLink?: boolean;
     workspace: string | undefined;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {

package/package/components/runs/JobStatusIcon.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">import Badge from '../common/badge/Badge.svelte';
+import { forLater } from '../../forLater';
+import { Calendar, Check, FastForward, Hourglass, Play, ShieldQuestion, X } from 'lucide-svelte';
+let { job, isExternal = false, roundedFull = false } = $props();
+</script>
+
+<div class="flex items-center justify-start">
+	{#if isExternal}
+		<Badge color="gray" {roundedFull} baseClass={roundedFull ? '' : '!px-1.5'}>
+			<ShieldQuestion size={14} />
+		</Badge>
+	{:else if 'success' in job && job.success}
+		{#if job.is_skipped}
+			<Badge color="green" {roundedFull} baseClass={roundedFull ? '' : ''}>
+				<FastForward size={14} />
+			</Badge>
+		{:else}
+			<Badge color="green" {roundedFull} baseClass={roundedFull ? '' : '!px-1.5'}>
+				<Check size={14} />
+			</Badge>
+		{/if}
+	{:else if 'success' in job}
+		<Badge color="red" {roundedFull} baseClass={roundedFull ? '' : '!px-1.5'}>
+			<X size={14} />
+		</Badge>
+	{:else if 'running' in job && job.running && job.suspend}
+		<Badge color="violet" {roundedFull} baseClass={roundedFull ? '' : '!px-1.5'} title="Suspended">
+			<Hourglass size={14} />
+		</Badge>
+	{:else if 'running' in job && job.running}
+		<Badge color="yellow" {roundedFull} baseClass={roundedFull ? '' : '!px-1.5'}>
+			<Play size={14} />
+		</Badge>
+	{:else if job && 'running' in job && job.scheduled_for && forLater(job.scheduled_for)}
+		<Badge color="blue" {roundedFull} baseClass={roundedFull ? '' : '!px-1.5'}>
+			<Calendar size={14} />
+		</Badge>
+	{:else if job.canceled}
+		<Badge color="red" {roundedFull} baseClass={roundedFull ? '' : '!px-1.5'}>
+			<Hourglass size={14} />
+		</Badge>
+	{:else}
+		<Badge {roundedFull} baseClass={roundedFull ? '' : '!px-1.5'}>
+			<Hourglass size={14} />
+		</Badge>
+	{/if}
+</div>

package/package/components/runs/JobStatusIcon.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Job } from '../../gen';
+interface Props {
+    job: Job;
+    isExternal?: boolean;
+    roundedFull?: boolean;
+}
+declare const JobStatusIcon: import("svelte").Component<Props, {}, "">;
+type JobStatusIcon = ReturnType<typeof JobStatusIcon>;
+export default JobStatusIcon;

package/package/components/runs/NoWorkerWithTagWarning.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">import { WorkerService } from '../../gen';
+import { workspaceStore } from '../../stores';
 import { AlertTriangle } from 'lucide-svelte';
 import Popover from '../Popover.svelte';
 import { onDestroy, untrack } from 'svelte';
@@ -18,7 +19,10 @@ async function lookForTag() {
     try {
         if (!customTag)
             return;
-        const existsWorkerWithTag = await WorkerService.existsWorkersWithTags({ tags: customTag });
+        const existsWorkerWithTag = await WorkerService.existsWorkersWithTags({
+            tags: customTag,
+            workspace: $workspaceStore
+        });
         noWorkerWithTag = !existsWorkerWithTag[customTag];
         if (noWorkerWithTag) {
             timeout = setTimeout(() => {

package/package/components/runs/RunBadges.svelte

@@ -3,26 +3,29 @@ import PreprocessedArgsDisplay from './PreprocessedArgsDisplay.svelte';
 import { truncateHash } from '../../utils';
 import { base } from '$app/paths';
 import { truncateRev } from '../../utils';
-import WorkerHostname from '../WorkerHostname.svelte';
 import { workspaceStore } from '../../stores';
 import Badge from '../common/badge/Badge.svelte';
-let { job, displayPersistentScriptDefinition, openPersistentScriptDrawer, concurrencyKey, showScriptHash = true, verySmall = false } = $props();
+import Button from '../common/button/Button.svelte';
+import { ListFilter } from 'lucide-svelte';
+let { job, displayPersistentScriptDefinition, openPersistentScriptDrawer, concurrencyKey, showScriptHash = true, onFilterByConcurrencyKey, large = false } = $props();
 </script>
 
 {#if job.script_hash && showScriptHash && job.job_kind !== 'aiagent'}
 	{#if job.job_kind == 'script'}
 		<a href="{base}/scripts/get/{job.script_hash}?workspace={$workspaceStore}"
-			><Badge color="gray" {verySmall}>{truncateHash(job.script_hash)}</Badge></a
+			><Badge color="gray" title={`Script hash: ${job.script_hash}`} {large}
+				>{truncateHash(job.script_hash)}
+			</Badge></a
 		>
 	{:else}
 		<div>
-			<Badge color="gray" {verySmall}>{truncateHash(job.script_hash)}</Badge>
+			<Badge color="gray" {large}>{truncateHash(job.script_hash)}</Badge>
 		</div>
 	{/if}
 {/if}
 {#if job && 'job_kind' in job}
 	<div>
-		<Badge color="blue" {verySmall}>{job.job_kind}</Badge>
+		<Badge color="gray" {large}>Job kind: {job.job_kind}</Badge>
 	</div>
 {/if}
 {#if job && job.flow_status && job.job_kind === 'script'}
@@ -30,23 +33,23 @@ let { job, displayPersistentScriptDefinition, openPersistentScriptDrawer, concur
 {/if}
 {#if displayPersistentScriptDefinition}
 	<button onclick={() => openPersistentScriptDrawer?.()}>
-		<Badge color="red">persistent</Badge>
+		<Badge color="red" {large}>persistent</Badge>
 	</button>
 {/if}
 {#if job && 'priority' in job}
 	<div>
-		<Badge color="blue" {verySmall}>priority: {job.priority}</Badge>
+		<Badge color="blue" {large}>priority: {job.priority}</Badge>
 	</div>
 {/if}
 {#if job.tag != undefined}
 	<!-- for related places search: ADD_NEW_LANG -->
 	<div>
-		<Badge color="indigo" {verySmall}>Tag: {job.tag}</Badge>
+		<Badge color="indigo" {large}>Tag: {job.tag}</Badge>
 	</div>
 {/if}
 {#if !job.visible_to_owner}
 	<div>
-		<Badge color="red" {verySmall}>
+		<Badge color="red" {large}>
 			only visible to you
 			<Tooltip>
 				{#snippet text()}
@@ -59,7 +62,7 @@ let { job, displayPersistentScriptDefinition, openPersistentScriptDrawer, concur
 {#if job?.['labels'] && Array.isArray(job?.['labels']) && job?.['labels'].length > 0}
 	{#each job?.['labels'] as label}
 		<div>
-			<Badge {verySmall}>Label: {label}</Badge>
+			<Badge {large}>Label: {label}</Badge>
 		</div>
 	{/each}
 {/if}
@@ -67,34 +70,36 @@ let { job, displayPersistentScriptDefinition, openPersistentScriptDrawer, concur
 	<div>
 		<Tooltip notClickable>
 			{#snippet text()}
-				This job has concurrency limits enabled with the key
+				This job has concurrency limits enabled with the key:
+				{#if onFilterByConcurrencyKey}
+					<Button
+						class="inline-text"
+						size="xs2"
+						color="light"
+						onclick={() => onFilterByConcurrencyKey?.(concurrencyKey)}
+					>
+						{concurrencyKey}
+						<ListFilter class="inline-block" size={10} />
+					</Button>
+				{:else}
+					<a
+						href={`${base}/runs/?job_kinds=all&graph=ConcurrencyChart&concurrency_key=${concurrencyKey}`}
+					>
+						{concurrencyKey}
+					</a>
+				{/if}
+			{/snippet}
+			{#if onFilterByConcurrencyKey}
+				<button onclick={() => onFilterByConcurrencyKey?.(concurrencyKey)}>
+					<Badge {large}>Concurrency: {truncateRev(concurrencyKey, 20)}</Badge>
+				</button>
+			{:else}
 				<a
 					href={`${base}/runs/?job_kinds=all&graph=ConcurrencyChart&concurrency_key=${concurrencyKey}`}
 				>
-					{concurrencyKey}
+					<Badge {large}>Concurrency: {truncateRev(concurrencyKey, 20)}</Badge>
 				</a>
-			{/snippet}
-			<a
-				href={`${base}/runs/?job_kinds=all&graph=ConcurrencyChart&concurrency_key=${concurrencyKey}`}
-			>
-				<Badge {verySmall}>Concurrency: {truncateRev(concurrencyKey, 20)}</Badge></a
-			>
-		</Tooltip>
-	</div>
-{/if}
-{#if job?.worker}
-	<div>
-		<Tooltip notClickable>
-			{#snippet text()}
-				worker:
-				<a href={`${base}/runs/?job_kinds=all&worker=${job?.worker}`}>
-					{job?.worker}
-				</a><br />
-				<WorkerHostname worker={job?.worker!} minTs={job?.['created_at']} />
-			{/snippet}
-			<a href={`${base}/runs/?job_kinds=all&worker=${job?.worker}`}>
-				<Badge {verySmall}>Worker: {truncateRev(job?.worker, 20)}</Badge></a
-			>
+			{/if}
 		</Tooltip>
 	</div>
 {/if}