Fixed incomplete rendering of Gantt for the executions

kestra-io · Jan 27, 2025 · f691f7e · f691f7e
1 parent 125a277
commit f691f7e
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 21 deletions.
diff --git a/ui/src/components/executions/Gantt.vue b/ui/src/components/executions/Gantt.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-card id="gantt" shadow="never" v-if="execution && flow">
+    <el-card id="gantt" shadow="never" v-if="execution && flow && execution.taskRunList">
         <template #header>
             <div class="d-flex">
                 <duration class="th text-end" :histories="execution.state.histories" />
@@ -44,9 +44,9 @@
                                         <template #content>
                                             <span>This task has {{ item.attempts }} attempts.</span>
                                         </template>
-                                        <Warning 
-                                            v-if="item.attempts > 1" 
-                                            class="attempt_warn me-3" 
+                                        <Warning
+                                            v-if="item.attempts > 1"
+                                            class="attempt_warn me-3"
                                         />
                                     </el-tooltip>
                                 </div>
@@ -118,26 +118,40 @@
                 dates: [],
                 duration: undefined,
                 selectedTaskRuns: [],
-                taskTypesToExclude: ["io.kestra.plugin.core.flow.ForEachItem$ForEachItemSplit", "io.kestra.plugin.core.flow.ForEachItem$ForEachItemMergeOutputs", "io.kestra.plugin.core.flow.ForEachItem$ForEachItemExecutable", "io.kestra.core.tasks.flows.ForEachItem$ForEachItemSplit", "io.kestra.core.tasks.flows.ForEachItem$ForEachItemMergeOutputs", "io.kestra.core.tasks.flows.ForEachItem$ForEachItemExecutable"]
+                taskTypesToExclude: ["io.kestra.plugin.core.flow.ForEachItem$ForEachItemSplit", "io.kestra.plugin.core.flow.ForEachItem$ForEachItemMergeOutputs", "io.kestra.plugin.core.flow.ForEachItem$ForEachItemExecutable", "io.kestra.core.tasks.flows.ForEachItem$ForEachItemSplit", "io.kestra.core.tasks.flows.ForEachItem$ForEachItemMergeOutputs", "io.kestra.core.tasks.flows.ForEachItem$ForEachItemExecutable"],
+                debouncedCompute: null,
+                debounceDelay: 50
             };
         },
         watch: {
             execution(newValue, oldValue) {
-                if (oldValue.id !== newValue.id && !this.realTime) {
+                if(this.debouncedCompute){
+                    clearTimeout(this.debouncedCompute)
+                }
+                if (oldValue && newValue.id !== oldValue.id && !this.realTime) {
                     this.realTime = true;
                     this.selectedTaskRuns = [];
                     this.paint();
                 }
-                if(newValue.state?.current === State.SUCCESS){
-                    this.compute()
+
+                if(newValue?.taskRunList){
+                    this.debouncedCompute = setTimeout(() => {
+                        if(newValue?.state?.current === State.SUCCESS){
+                            this.compute()
+                        } else {
+                            this.paint()
+                        }
+                    }, this.debounceDelay);
                 }
             },
             forEachItemsTaskRunIds: {
                 handler(newValue, oldValue) {
-                    if (newValue.length > 0) {
-                        const newEntriesAmount = newValue.length - (oldValue?.length ?? 0);
-                        for (let i = newValue.length - newEntriesAmount; i < newValue.length; i++) {
-                            this.selectedTaskRuns.push(newValue[i].id);
+                    if(JSON.stringify(newValue) !== JSON.stringify(oldValue)){
+                        if (newValue.length > 0) {
+                            const newEntriesAmount = newValue.length - (oldValue?.length ?? 0);
+                            for (let i = newValue.length - newEntriesAmount; i < newValue.length; i++) {
+                                this.selectedTaskRuns.push(newValue[i].id);
+                            }
                         }
                     }
                 },
@@ -171,6 +185,10 @@
                 return this.execution ? ts(this.execution.state.histories[0].date) : 0;
             },
             tasks () {
+                if(!this.execution?.taskRunList){
+                    return [];
+                }
+
                 const rootTasks = []
                 const childTasks = []
                 const sortedTasks = []
@@ -229,6 +247,9 @@
                 repaint();
             },
             compute() {
+                if (!this.tasks || this.tasks.length === 0){
+                    return;
+                }
                 this.computeSeries();
                 this.computeDates();
             },
@@ -246,10 +267,9 @@
                 }));
             },
             computeSeries() {
-                if (!this.execution) {
+                if (!this.execution || !this.tasks || this.tasks.length === 0) {
                     return;
                 }
-
                 if (!State.isRunning(this.execution.state.current)) {
                     this.stopRealTime();
                 }
@@ -307,6 +327,9 @@
                 this.series = series;
             },
             computeDates() {
+                if (!this.tasks || this.tasks.length === 0){
+                    return;
+                }
                 const ticks = 5;
                 const date = ts => this.$moment(ts).format("h:mm:ss");
                 const start = this.start;
@@ -316,6 +339,7 @@
                     dates.push(date(start + i * delta));
                 }
                 this.dates = dates;
+                console.log("Dates after compute", this.dates)
             },
             onTaskSelect(taskRunId) {
                 if(this.selectedTaskRuns.includes(taskRunId)) {
@@ -334,6 +358,7 @@
             }
         },
         unmounted() {
+            clearTimeout(this.debouncedCompute)
             this.stopRealTime();
         }
     };

diff --git a/ui/src/components/layout/Duration.vue b/ui/src/components/layout/Duration.vue
@@ -27,9 +27,9 @@
             }
         },
         watch: {
-            histories(newValue, oldValue) {
-                if (oldValue[0].date !== newValue[0].date) {
-                    this.paint()
+            histories(newValue){
+                if(newValue && newValue.length > 0){
+                    this.computeDuration()
                 }
             },
         },
@@ -40,23 +40,23 @@
             }
         },
         mounted() {
-            this.paint()
+            this.paint();
         },
         computed: {
             start() {
                 return this.histories && this.histories.length && ts(this.histories[0].date);
             },
 
             lastStep() {
-                return this.histories[this.histories.length - 1]
+                return this.histories[this.histories?.length - 1]
             }
         },
         methods: {
             paint() {
                 if (!this.refreshHandler) {
                     this.refreshHandler = setInterval(() => {
                         this.computeDuration()
-                        if (this.histories && !State.isRunning(this.lastStep.state)) {
+                        if(this.histories && !State.isRunning(this.lastStep.state)){
                             this.cancel();
                         }
                     }, 100);
@@ -107,4 +107,4 @@
         margin-right: 5px;
     }
 }
-</style>
+</style>