feat(ui): new gantt layout to display taskrun state & duration with a…

…lso attempts one close #6103
kestra-io · Jan 23, 2025 · f08bd94 · f08bd94
1 parent 699e232
commit f08bd94
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 49 deletions.
diff --git a/ui/src/components/executions/TaskRunLine.vue b/ui/src/components/executions/TaskRunLine.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="attempt-header">
+    <div class="taskrun-header">
         <div>
             <el-icon
                 v-if="!taskRunId && shouldDisplayChevron(currentTaskRun)"
@@ -20,6 +20,7 @@
                 :icons="icons"
             />
         </div>
+
         <div
             class="task-id flex-grow-1"
             :id="`attempt-${selectedAttemptNumberByTaskRunId[currentTaskRun.id]}-${currentTaskRun.id}`"
@@ -47,33 +48,19 @@
 
         <div class="task-duration d-none d-md-inline-block">
             <small class="me-1">
-                <duration :histories="selectedAttempt(currentTaskRun).state.histories" />
+                <duration :histories="currentTaskRun.state.histories" />
             </small>
         </div>
 
         <div class="task-status">
-            <status size="small" :status="selectedAttempt(currentTaskRun).state.current" />
+            <status size="small" :status="currentTaskRun.state.current" />
         </div>
 
         <slot name="buttons" />
 
-        <el-select
-            class="d-none d-md-inline-block attempt-select"
-            :model-value="selectedAttemptNumberByTaskRunId[currentTaskRun.id]"
-            @change="forwardEvent('swapDisplayedAttempt', {taskRunId: currentTaskRun.id, attemptNumber: $event})"
-            :disabled="!currentTaskRun.attempts || currentTaskRun.attempts?.length <= 1"
-        >
-            <el-option
-                v-for="(_, index) in attempts(currentTaskRun)"
-                :key="`attempt-${index}-${currentTaskRun.id}`"
-                :value="index"
-                :label="`${$t('attempt')} ${index + 1}`"
-            />
-        </el-select>
-
         <el-dropdown trigger="click">
             <el-button type="default" class="task-run-buttons">
-                <DotsHorizontal title="" />
+                <DotsVertical title="" />
             </el-button>
             <template #dropdown>
                 <el-dropdown-menu>
@@ -137,6 +124,33 @@
             </template>
         </el-dropdown>
     </div>
+    <div class="attempt-header">
+        <el-select
+            class="d-none d-md-inline-block attempt-select"
+            :model-value="selectedAttemptNumberByTaskRunId[currentTaskRun.id]"
+            @change="forwardEvent('swapDisplayedAttempt', {taskRunId: currentTaskRun.id, attemptNumber: $event})"
+            :disabled="!currentTaskRun.attempts || currentTaskRun.attempts?.length <= 1"
+        >
+            <el-option
+                v-for="(_, index) in attempts(currentTaskRun)"
+                :key="`attempt-${index}-${currentTaskRun.id}`"
+                :value="index"
+                :label="`${$t('attempt')} ${index + 1}`"
+            />
+        </el-select>
+
+        <div class="flex-grow-1" />
+
+        <div class="task-duration d-none d-md-inline-block">
+            <small class="me-1">
+                <duration :histories="selectedAttempt(currentTaskRun).state.histories" />
+            </small>
+        </div>
+
+        <div class="task-status">
+            <status size="small" :status="selectedAttempt(currentTaskRun).state.current" />
+        </div>
+    </div>
 </template>
 <script>
     import Restart from "./Restart.vue";
@@ -146,7 +160,7 @@
     import ChangeStatus from "./ChangeStatus.vue";
     import TaskEdit from "../flows/TaskEdit.vue";
     import SubFlowLink from "../flows/SubFlowLink.vue";
-    import DotsHorizontal from "vue-material-design-icons/DotsHorizontal.vue";
+    import DotsVertical from "vue-material-design-icons/DotsVertical.vue";
     import ChevronDown from "vue-material-design-icons/ChevronDown.vue";
     import Clock from "vue-material-design-icons/Clock.vue";
     import Outputs from "./Outputs.vue";
@@ -169,7 +183,7 @@
             Outputs,
             Clock,
             ChevronDown,
-            DotsHorizontal,
+            DotsVertical,
             SubFlowLink,
             TaskEdit,
             ChangeStatus,
@@ -319,33 +333,47 @@
 <style scoped lang="scss">
     @import "@kestra-io/ui-libs/src/scss/variables";
 
-    .attempt-header {
+    .task-duration {
+        padding: .375rem 0;
+    }
+
+    .taskrun-header, .attempt-header {
         display: flex;
         gap: .5rem;
+        padding: 0.5rem 1rem;
+        border-bottom: 1px solid var(--ks-border-primary);
 
         > * {
             display: flex;
             align-items: center;
         }
 
-        .el-select {
-            width: 8rem;
+        small {
+            font-family: var(--bs-font-monospace);
+            font-size: var(--font-size-xs)
         }
 
-        .attempt-number {
-            background: var(--bs-gray-400);
-            padding: .375rem .75rem;
+        .task-duration small {
             white-space: nowrap;
+            color: var(--ks-content-secondary);
         }
 
-        .task-id, .task-duration {
-            padding: .375rem 0;
+    }
+
+    .taskrun-header {
+        background-color: var(--ks-background-table-header);
+        .task-icon {
+            width: 36px;
+            padding: 6px 6px 6px 0;
+            border-radius: $border-radius-lg;
+            margin-left: -0.5rem;
         }
 
         .task-id {
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
+            padding: .375rem 0;
 
             span span {
                 color: var(--ks-content-primary);
@@ -357,26 +385,8 @@
             }
         }
 
-        .task-icon {
-            width: 36px;
-            padding: 6px;
-            border-radius: $border-radius-lg;
-        }
-
-        small {
-            font-family: var(--bs-font-monospace);
-            font-size: var(--font-size-xs)
-        }
-
-        .task-duration small {
-            white-space: nowrap;
-
-            color: var(--ks-content-secondary);
-        }
-
         .task-run-buttons {
-            padding: .5rem;
-            height: 100%;
+            padding: 0 .5rem;
             border: 1px solid rgba($white, .05);
             background-color: var(--ks-button-background-secondary) !important;
             // FIXME: what does this mean?
@@ -385,6 +395,18 @@
             }
         }
     }
+
+    .attempt-header {
+        .el-select {
+            width: 8rem;
+        }
+
+        .attempt-number {
+            background: var(--bs-gray-400);
+            padding: .375rem .75rem;
+            white-space: nowrap;
+        }
+    }
 </style>
 
 <style lang="scss">

diff --git a/ui/src/components/logs/TaskRunDetails.vue b/ui/src/components/logs/TaskRunDetails.vue
@@ -698,7 +698,7 @@
             .attempt-wrapper & {
                 border-radius: .25rem;
             }
-            
+
             tbody:last-child & {
                 border-bottom: 1px solid var(--ks-border-primary);
             }
@@ -731,7 +731,7 @@
             margin-top: .5rem;
 
             .line {
-                padding: .5rem;
+                padding: 1rem;
 
                 &.cursor {
                     background-color: var(--bs-gray-300)