fix(ui): amend flow concurrency overview

closes #6811
kestra-io · Jan 23, 2025 · 0a047a7 · 0a047a7
1 parent 8e5ffe8
commit 0a047a7
Showing 1 changed file with 48 additions and 34 deletions.
diff --git a/ui/src/components/flows/FlowConcurrency.vue b/ui/src/components/flows/FlowConcurrency.vue
@@ -1,37 +1,39 @@
 <template>
-    <div v-if="flow.concurrency && !runningCountSet" :class="{'d-none': !runningCountSet}">
-        <el-card class="mb-1">
-            <div class="row mb-3">
-                <span class="col d-flex align-items-center">
-                    <h5 class="m-3">RUNNING</h5> {{ runningCount }} / {{ flow.concurrency.limit }} {{ $t('active-slots') }}
-                </span>
-                <span class="col d-flex justify-content-end align-items-center">
-                    {{ $t('behavior') }}: <status class="mx-2" :status="flow.concurrency.behavior" />
-                </span>
-            </div>
-            <div class="progressbar mb-3">
-                <el-progress :stroke-width="40" color="#5BB8FF" :percentage="progress" :show-text="false" />
-            </div>
-        </el-card>
-        <el-card>
-            <executions
-                :restore-url="false"
-                :topbar="false"
-                :namespace="flow.namespace"
-                :flow-id="flow.id"
-                is-concurrency
-                :statuses="[State.QUEUED, State.RUNNING, State.PAUSED]"
-                @state-count="setRunningCount"
-                :filter="false"
-            />
-        </el-card>
-    </div>
-    <empty-state
-        v-else-if="runningCount === 0"
-        :title="$t('concurrency-view.title_no_executions')"
-        :description="$t('concurrency-view.desc_no_executions')"
-        :image="noConcurrencyImage"
-    />
+    <template v-if="flow.concurrency">
+        <div v-if="runningCount > 0 || !runningCountSet" :class="{'d-none': !runningCountSet}">
+            <el-card class="mb-3">
+                <div class="row mb-3">
+                    <span class="col d-flex align-items-center">
+                        <h5 class="m-3">RUNNING</h5> {{ runningCount }}/{{ flow.concurrency.limit }} {{ $t('active-slots') }}
+                    </span>
+                    <span class="col d-flex justify-content-end align-items-center">
+                        {{ $t('behavior') }}: <status class="mx-2" :status="flow.concurrency.behavior" size="small" />
+                    </span>
+                </div>
+                <div class="progressbar mb-3">
+                    <el-progress :stroke-width="16" color="#5BB8FF" :percentage="progress" :show-text="false" />
+                </div>
+            </el-card>
+            <el-card>
+                <executions
+                    :restore-url="false"
+                    :topbar="false"
+                    :namespace="flow.namespace"
+                    :flow-id="flow.id"
+                    is-concurrency
+                    :statuses="[State.QUEUED, State.RUNNING, State.PAUSED]"
+                    @state-count="setRunningCount"
+                    :filter="false"
+                />
+            </el-card>
+        </div>
+        <empty-state
+            v-else
+            :title="$t('concurrency-view.title_no_executions')"
+            :description="$t('concurrency-view.desc_no_executions')"
+            :image="noConcurrencyImage"
+        />
+    </template>
     <empty-state
         v-else
         :title="$t('concurrency-view.title_no_limit')"
@@ -49,11 +51,13 @@
     import noConcurrencyImage from "../../assets/no_concurrency.svg";
 
     export default {
+        inheritAttrs: false,
         components: {
-            Status, 
+            Status,
             Executions,
             EmptyState
         },
+        emits: ["expand-subflow"],
         data() {
             return {
                 runningCount: 0,
@@ -87,4 +91,14 @@
         height: 100%;
         width: 100%;
     }
+    h5 {
+        font-weight: bold;
+        margin-left: 0 !important;
+    }
+
+    :deep(.el-progress) {
+        .el-progress-bar, .el-progress-bar__outer, .el-progress-bar__inner {
+            border-radius: var(--bs-border-radius);
+        }
+    }
 </style>