fix: show skipped label on flow progress bar (#8973)

* fix: show skipped label on flow progress bar for skipped flows

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* refactor: narrow is_skipped via 'in' operator on Job union

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ruben Fiszel
2026-04-29 15:53:34 +00:00
committed by GitHub
co-authored by Claude Opus 4.7
parent 4098793db2
commit 8627d3c5ae
2 changed files with 19 additions and 7 deletions
@@ -33,13 +33,15 @@
let isWaitingForEvents = $state(false)
let isCanceled = $state(false)
let isScheduled = $state(false)
let isSkipped = $state(false)
let progressBar = $state<ProgressBar | undefined>(undefined)
function updateJobProgress(job: Job) {
// Check if job is scheduled for later
const isJobScheduled = Boolean('running' in job && 'scheduled_for' in job &&
job.scheduled_for && forLater(job.scheduled_for))
const isJobScheduled = Boolean(
'running' in job && 'scheduled_for' in job && job.scheduled_for && forLater(job.scheduled_for)
)
isScheduled = isJobScheduled
const modules = job?.flow_status?.modules
@@ -113,6 +115,7 @@
currentStepId = newCurrentStepId
isWaitingForEvents = newIsWaitingForEvents
isCanceled = job?.canceled || false
isSkipped = 'is_skipped' in job && Boolean(job.is_skipped)
}
export function reset() {
@@ -126,6 +129,7 @@
isWaitingForEvents = false
isCanceled = false
isScheduled = false
isSkipped = false
}
$effect(() => {
job && updateJobProgress(job)
@@ -149,4 +153,5 @@
{isWaitingForEvents}
{isCanceled}
{isScheduled}
{isSkipped}
/>
@@ -34,6 +34,8 @@
isCanceled?: boolean
// Whether the job is scheduled for later
isScheduled?: boolean
// Whether the job was skipped (early-stop labelled as skipped)
isSkipped?: boolean
}
let {
@@ -53,7 +55,8 @@
showStepId = false,
isWaitingForEvents = false,
isCanceled = false,
isScheduled = false
isScheduled = false,
isSkipped = false
}: Props = $props()
let duration = 200
@@ -149,13 +152,15 @@
: 'text-blue-700 dark:text-blue-200'}"
>
<div class={twMerge(slim ? 'text-xs' : 'text-sm', 'flex items-center gap-1')}>
{#if status == 'running' && !isCanceled && !isScheduled}
{#if status == 'running' && !isCanceled && !isScheduled && !isSkipped}
<Loader2 class="animate-spin" size={14} />
{/if}
{#key status + isWaitingForEvents + stepId + isCanceled + isScheduled}
{#key status + isWaitingForEvents + stepId + isCanceled + isScheduled + isSkipped}
<span in:fade={{ duration: 150 }}>
{#if status == 'error'}
Error occurred
{:else if isSkipped}
Skipped
{:else if status == 'done' && isCanceled}
Canceled
{:else if status == 'done'}
@@ -171,9 +176,11 @@
{:else if hideStepTitle}
{isCanceled ? 'Canceled' : 'Running'}
{:else if subIndexIsPercent}
{(isCanceled ? 'Canceled at ' : '') + `Step ${index + 1} (${subIndex !== undefined ? subIndex + '%' : ''})`}
{(isCanceled ? 'Canceled at ' : '') +
`Step ${index + 1} (${subIndex !== undefined ? subIndex + '%' : ''})`}
{:else}
{(isCanceled ? 'Canceled at ' : '') + `Step ${index + 1}${subIndex !== undefined ? `.${subIndex + 1}` : ''}`}
{(isCanceled ? 'Canceled at ' : '') +
`Step ${index + 1}${subIndex !== undefined ? `.${subIndex + 1}` : ''}`}
{/if}
</span>
{/key}