Repository: kestra-io/kestra
Issue: Trigger execution from webui don't display the execution when some lag 
Labels: bug

When we create the execution from the webui, the execution is created and return directly. 
But the indexer could not have the time to index the execution on the backend. 
This lead by a 404 on `/api/v1/executions/{{executionId}}` and the ui freeze here.

Difficult use case here, I think the better will be to use only the execution return during the creation and reach the updated information from the listen url (without trying to reach the url below). 
This will lead to no dependency on indexer on this part of the webui. 

Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/ui/src/components/executions/ExecutionRoot.vue b/ui/src/components/executions/ExecutionRoot.vue
index fbd5d94cb5..c906e692d5 100644
--- a/ui/src/components/executions/ExecutionRoot.vue
+++ b/ui/src/components/executions/ExecutionRoot.vue
@@ -24,6 +24,7 @@ import Trigger from "vue-material-design-icons/Cogs";
 import BottomLine from "../layout/BottomLine";
 import FlowActions from "../flows/FlowActions";
 import RouteContext from "../../mixins/routeContext";
+import { mapState } from "vuex";
 
 export default {
     mixins: [RouteContext],
@@ -42,7 +43,9 @@ export default {
         };
     },
     created() {
-        this.$store.dispatch("execution/loadExecution", this.$route.params);
+        if (!this.execution) {
+            this.$store.dispatch("execution/loadExecution", this.$route.params);
+        }
         this.$store
             .dispatch("execution/followExecution", this.$route.params)
             .then(sse => {
@@ -63,6 +66,7 @@ export default {
         }
     },
     computed: {
+        ...mapState("execution", ["execution"]),
         routeInfo() {
             return {
                 title: this.$t("execution"),
@@ -72,7 +76,7 @@ export default {
                         link: {
                             name: "flowsList",
                             query: {
-                                namespace: this.$route.params.namespace
+                                namespace: this.$route.params.flowId
                             }
                         }
                     },
@@ -81,7 +85,7 @@ export default {
                         link: {
                             name: "flow",
                             params: {
-                                namespace: this.$route.params.namespace,
+                                namespace: this.$route.params.flowId,
                                 id: this.$route.params.flowId
                             }
                         }
@@ -123,6 +127,7 @@ export default {
     },
     beforeDestroy() {
         this.sse.close();
+        this.$store.commit("execution/setExecution", undefined);
     }
 };
 </script>
diff --git a/ui/src/components/executions/Overview.vue b/ui/src/components/executions/Overview.vue
index 78ea12b9a9..d894e71cd5 100644
--- a/ui/src/components/executions/Overview.vue
+++ b/ui/src/components/executions/Overview.vue
@@ -27,14 +27,14 @@ export default {
             const delta = ts(stopTs) - ts(startTs);
             const duration = this.$moment.duration(delta);
             const humanDuration = humanizeDuration(duration);
-            console.log(duration);
+            const stepCount = this.execution.taskRunList ? this.execution.taskRunList.length : 0
             return [
                 {key: this.$t('namespace'), value: this.execution.namespace},
                 {key: this.$t('flow'), value: this.execution.flowId},
                 {key: this.$t('created date'), value: startTs},
                 {key: this.$t('updated date'), value: stopTs},
                 {key: this.$t('duration'), value: humanDuration},
-                {key: this.$t('steps'), value: this.execution.taskRunList.length},
+                {key: this.$t('steps'), value: stepCount},
             ]
         }
     }
@@ -43,6 +43,5 @@ export default {
 <style scoped lang="scss">
     /deep/ thead {
         display: none;
-
     }
 </style>
\ No newline at end of file
diff --git a/ui/src/components/flows/ExecutionConfiguration.vue b/ui/src/components/flows/ExecutionConfiguration.vue
index a4037d69b8..6e163b9fa5 100644
--- a/ui/src/components/flows/ExecutionConfiguration.vue
+++ b/ui/src/components/flows/ExecutionConfiguration.vue
@@ -116,6 +116,7 @@
                             toaster: "b-toaster-top-right",
                             variant: "success"
                         });
+                        this.$store.commit('execution/setExecution', response.data)
                         this.$router.push({name: 'execution', params: response.data})
                     });
             }


Test patch: