Repository: kestra-io/kestra
Issue: Metrics view from logs lead to undefined
Labels: bug
enhancement
frontend

### Expected Behavior

Clicking on "Metrics" from the dropdown menu in logs tab should display metrics for this taskrun

### Actual Behaviour

Greyed screen with nothing displayed due to undefined:
![image](https://github.com/kestra-io/kestra/assets/37618489/4936cc0d-c5dd-4068-b4bf-1f7ddb51e428)

### Steps To Reproduce

Create an execution of flow
Go to Logs tab
Click on "Metrics" dropdown of any taskrun

### Environment Information

- Kestra Version: 0.9.0-SNAPSHOT

### Example flow

_No response_

Issue comments:
This is due to the fact that we are not setting taskrun in the state for the Logs view while we do it on the Gantt tab

Pull request review comments:

Patch that resolved the issue:
diff --git a/ui/src/components/executions/Gantt.vue b/ui/src/components/executions/Gantt.vue
index 38596f8038..28afff99f9 100644
--- a/ui/src/components/executions/Gantt.vue
+++ b/ui/src/components/executions/Gantt.vue
@@ -54,6 +54,7 @@
                             :exclude-metas="['namespace', 'flowId', 'taskId', 'executionId']"
                             level="TRACE"
                             @follow="forwardEvent('follow', $event)"
+                            :hide-others-on-select="true"
                         />
                     </td>
                 </tr>
@@ -101,7 +102,7 @@
             this.paint();
         },
         computed: {
-            ...mapState("execution", ["taskRun", "execution"]),
+            ...mapState("execution", ["execution", "taskRun"]),
             taskRunsCount() {
                 return this.execution && this.execution.taskRunList ? this.execution.taskRunList.length : 0
             },
diff --git a/ui/src/components/graph/TreeTaskNode.vue b/ui/src/components/graph/TreeTaskNode.vue
index 90d0799ca1..c5d8756aa2 100644
--- a/ui/src/components/graph/TreeTaskNode.vue
+++ b/ui/src/components/graph/TreeTaskNode.vue
@@ -130,6 +130,7 @@
                     :exclude-metas="['namespace', 'flowId', 'taskId', 'executionId']"
                     :level="logLevel"
                     @follow="forwardEvent('follow', $event)"
+                    :hide-others-on-select="true"
                 />
             </el-drawer>
         </template>
diff --git a/ui/src/components/logs/LogList.vue b/ui/src/components/logs/LogList.vue
index 113cd7dbce..fa0b89ea27 100644
--- a/ui/src/components/logs/LogList.vue
+++ b/ui/src/components/logs/LogList.vue
@@ -45,7 +45,7 @@
                                     <status :status="attempt.state.current" />
                                 </div>
 
-                                <el-dropdown trigger="click">
+                                <el-dropdown trigger="click" @visibleChange="onTaskSelect($event, currentTaskRun)">
                                     <el-button type="default">
                                         <DotsVertical title="" />
                                     </el-button>
@@ -173,6 +173,10 @@
                 type: Array,
                 default: () => [],
             },
+            hideOthersOnSelect: {
+                type: Boolean,
+                default: false
+            }
         },
         data() {
             return {
@@ -217,6 +221,10 @@
                 this.$emit(type, event);
             },
             displayTaskRun(currentTaskRun) {
+                if(!this.hideOthersOnSelect){
+                    return true;
+                }
+
                 if (this.taskRun && this.taskRun.id !== currentTaskRun.id) {
                     return false;
                 }
@@ -224,7 +232,8 @@
                 if (this.task && this.task.id !== currentTaskRun.taskId) {
                     return false;
                 }
-                return  true;
+
+                return true;
             },
             toggleShowOutput(taskRun) {
                 this.showOutputs[taskRun.id] = !this.showOutputs[taskRun.id];
@@ -292,6 +301,11 @@
                         log.attemptNumber === attemptNumber
                     );
                 });
+            },
+            onTaskSelect(dropdownVisible, task){
+                if(dropdownVisible && this.taskRun?.id !== task.id) {
+                    this.$store.commit("execution/setTaskRun", task);
+                }
             }
         },
         beforeUnmount() {


Test patch: