From a94b756cc4d60ce907f42a8240321259a9be88cc Mon Sep 17 00:00:00 2001
From: Divya Jain <dvjn.dev+git@gmail.com>
Date: Sat, 5 Nov 2022 06:48:16 +0530
Subject: [PATCH] Show workflow state in ui and collapse completed workflows
 (#1383)

Fixes #1371

Co-authored-by: Anbraten <anton@ju60.de>
---
 .../repo/pipeline/PipelineStepList.vue         | 18 +++++++++++++++++-
 web/src/views/repo/pipeline/Pipeline.vue       |  1 +
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/web/src/components/repo/pipeline/PipelineStepList.vue b/web/src/components/repo/pipeline/PipelineStepList.vue
index 3723b4198..c1e1e013c 100644
--- a/web/src/components/repo/pipeline/PipelineStepList.vue
+++ b/web/src/components/repo/pipeline/PipelineStepList.vue
@@ -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>
diff --git a/web/src/views/repo/pipeline/Pipeline.vue b/web/src/views/repo/pipeline/Pipeline.vue
index 7ad2aa166..0727fe8ef 100644
--- a/web/src/views/repo/pipeline/Pipeline.vue
+++ b/web/src/views/repo/pipeline/Pipeline.vue
@@ -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"