Show workflow state in ui and collapse completed workflows (#1383)

Fixes #1371

Co-authored-by: Anbraten <anton@ju60.de>
This commit is contained in:
Divya Jain 2022-11-05 06:48:16 +05:30 committed by GitHub
parent df5225ff18
commit a94b756cc4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 1 deletions

View file

@ -73,6 +73,15 @@
class="transition-transform duration-150 min-w-6 h-6"
:class="{ 'transform rotate-90': !stepsCollapsed[step.id] }"
/>
<div
class="min-w-2 h-2 rounded-full -ml-0.75"
:class="{
'bg-lime-400': ['success'].includes(step.state),
'bg-gray-400': ['pending', 'skipped'].includes(step.state),
'bg-red-400': ['killed', 'error', 'failure', 'blocked', 'declined'].includes(step.state),
'bg-blue-400': ['started', 'running'].includes(step.state),
}"
/>
<span class="truncate">{{ step.name }}</span>
</button>
</div>
@ -137,5 +146,12 @@ defineEmits<{
const pipeline = toRef(props, 'pipeline');
const { prettyRef } = usePipeline(pipeline);
const stepsCollapsed = ref<Record<PipelineStep['id'], boolean>>({});
const stepsCollapsed = ref<Record<PipelineStep['id'], boolean>>(
props.pipeline.steps && props.pipeline.steps.length > 1
? (props.pipeline.steps || []).reduce(
(collapsed, step) => ({ ...collapsed, [step.id]: !['started', 'running', 'pending'].includes(step.state) }),
{},
)
: {},
);
</script>

View file

@ -2,6 +2,7 @@
<div class="flex flex-col flex-grow">
<div class="flex w-full min-h-0 flex-grow">
<PipelineStepList
v-if="pipeline?.steps?.length || 0 > 0"
v-model:selected-step-id="selectedStepId"
:class="{ 'hidden md:flex': pipeline.status === 'blocked' }"
:pipeline="pipeline"