Repository: kestra-io/kestra
Issue: Task Logs: add a logo of the current task

A log tabs of an execution add the logo of the current task type for each rows

Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/ui/src/components/graph/TreeNode.vue b/ui/src/components/graph/TreeNode.vue
index 60cc45659a..f66557a1f3 100644
--- a/ui/src/components/graph/TreeNode.vue
+++ b/ui/src/components/graph/TreeNode.vue
@@ -269,7 +269,7 @@
         > .icon {
             width: 35px;
             height: 53px;
-            background: var(--white);
+            background: var(--bs-white);
             position: relative;
         }
 
@@ -279,11 +279,6 @@
             border-right: 1px solid var(--bs-border-color);
         }
 
-        .icon {
-            html.dark & {
-                background-color: var(--bs-gray-700);
-            }
-        }
 
         .is-success {
             background-color: var(--green);
diff --git a/ui/src/components/logs/LogList.vue b/ui/src/components/logs/LogList.vue
index 143a53d906..19ba6e7779 100644
--- a/ui/src/components/logs/LogList.vue
+++ b/ui/src/components/logs/LogList.vue
@@ -11,7 +11,9 @@
                                 <div class="attempt-number me-1">
                                     {{ $t("attempt") }} {{ index + 1 }}
                                 </div>
-
+                                <div class="task-icon me-1" v-loading="this.tasksIcons[currentTaskRun.id] === undefined">
+                                    <task-icon :cls="tasksIcons[currentTaskRun.id]" only-icon />
+                                </div>
                                 <div class="task-id flex-grow-1" :id="`attempt-${index}-${currentTaskRun.id}`">
                                     <el-tooltip :persistent="false" transition="" :hide-after="0">
                                         <template #content>
@@ -83,10 +85,12 @@
                                             />
 
                                             <task-edit
+                                                :read-only="true"
                                                 component="el-dropdown-item"
                                                 :task-id="currentTaskRun.taskId"
                                                 :flow-id="execution.flowId"
                                                 :namespace="execution.namespace"
+                                                :revision="execution.flowRevision"
                                             />
                                         </el-dropdown-menu>
                                     </template>
@@ -127,6 +131,7 @@
     import SubFlowLink from "../flows/SubFlowLink.vue"
     import TaskEdit from "../flows/TaskEdit.vue";
     import Duration from "../layout/Duration.vue";
+    import TaskIcon from "../plugins/TaskIcon.vue";
 
     export default {
         components: {
@@ -140,7 +145,8 @@
             Status,
             SubFlowLink,
             TaskEdit,
-            Duration
+            Duration,
+            TaskIcon
         },
         props: {
             level: {
@@ -173,6 +179,7 @@
                 showOutputs: {},
                 showMetrics: {},
                 fullscreen: false,
+                tasksIcons: {}
             };
         },
         watch: {
@@ -189,6 +196,18 @@
             if (!this.fullScreenModal) {
                 this.loadLogs();
             }
+            if (this.execution){
+                for(let currentTaskRun of this.execution.taskRunList){
+                    this.$store.dispatch("flow/loadTask", {
+                        namespace: currentTaskRun.namespace,
+                        id: currentTaskRun.flowId,
+                        taskId: currentTaskRun.taskId,
+                        revision: currentTaskRun.revision
+                    }).then(value => {
+                        this.tasksIcons[currentTaskRun.id] = value.type
+                    })
+                }
+            }
         },
         computed: {
             ...mapState("execution", ["execution", "taskRun", "task", "logs"]),
@@ -273,7 +292,7 @@
                         log.attemptNumber === attemptNumber
                     );
                 });
-            },
+            }
         },
         beforeUnmount() {
             if (this.sse) {
@@ -316,6 +335,12 @@
                 text-overflow: ellipsis;
             }
 
+            .task-icon {
+                width: 36px;
+                background: var(--bs-white);
+                padding: 6px;
+            }
+
             small {
                 color: var(--bs-gray-500);
             }
diff --git a/ui/src/components/plugins/Plugin.vue b/ui/src/components/plugins/Plugin.vue
index c25e5c1981..34681137f7 100644
--- a/ui/src/components/plugins/Plugin.vue
+++ b/ui/src/components/plugins/Plugin.vue
@@ -101,13 +101,13 @@
 
         mark {
             background: var(--bs-success);
-            color: var(--white);
+            color: var(--bs-white);
             font-size: var(--font-size-sm);
             padding: 2px 8px 2px 8px;
             border-radius: var(--bs-border-radius-sm);
 
             * {
-                color: var(--white) !important;
+                color: var(--bs-white) !important;
             }
         }
 


Test patch: