From a97448f19d6eab52db86aed436b4333046f253c5 Mon Sep 17 00:00:00 2001
From: Ludovic DEHON <tchiot.ludo@gmail.com>
Date: Thu, 23 Jan 2025 22:44:23 +0100
Subject: [PATCH] fix(ui): proper log display without multiple line

---
 ui/src/components/executions/TaskRunLine.vue | 10 ++++++-
 ui/src/components/logs/LogLine.vue           | 28 +++++++++++++-------
 ui/src/components/logs/LogsWrapper.vue       | 16 +++++------
 ui/src/components/logs/TaskRunDetails.vue    |  7 +++--
 ui/src/utils/markdown.js                     |  2 +-
 5 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/ui/src/components/executions/TaskRunLine.vue b/ui/src/components/executions/TaskRunLine.vue
index 0b4788129b5..dfa8692ba41 100644
--- a/ui/src/components/executions/TaskRunLine.vue
+++ b/ui/src/components/executions/TaskRunLine.vue
@@ -398,7 +398,15 @@
 
     .attempt-header {
         .el-select {
-            width: 8rem;
+            width: 10rem;
+            height: 24px;
+            margin-top: 0.35rem;
+
+            :deep(.el-select__wrapper) {
+                height: 24px;
+                min-height: 24px;
+            }
+
         }
 
         .attempt-number {
diff --git a/ui/src/components/logs/LogLine.vue b/ui/src/components/logs/LogLine.vue
index 7c8ee2ccb0a..70a13b48198 100644
--- a/ui/src/components/logs/LogLine.vue
+++ b/ui/src/components/logs/LogLine.vue
@@ -1,7 +1,7 @@
 <template>
     <div
         class="py-2 line font-monospace"
-        :class="{['log-border-' + log.level.toLowerCase()]: cursor && log.level !== undefined}"
+        :class="{['log-border-' + log.level.toLowerCase()]: cursor && log.level !== undefined, ['key-' + $.vnode.key]: true}"
         v-if="filtered"
         :style="logLineStyle"
     >
@@ -30,7 +30,11 @@
                     </span>
                 </span>
             </div>
-            <div ref="lineContent" v-html="renderedMarkdown" />
+            <div
+                ref="lineContent"
+                :class="{'d-inline': metaWithValue.length === 0, 'me-3': metaWithValue.length === 0}"
+                v-html="renderedMarkdown"
+            />
         </div>
     </div>
 </template>
@@ -185,31 +189,37 @@
     };
 </script>
 <style scoped lang="scss">
-@import "@kestra-io/ui-libs/src/scss/variables";
-
 div.line {
     cursor: text;
     white-space: pre-wrap;
     word-break: break-all;
     display: flex;
-    align-items: center;
-    gap: $spacer;
+    align-items: flex-start;
+    gap: 1rem;
 
     border-left-width: 2px !important;
     border-left-style: solid;
     border-left-color: transparent;
 
-    .icon_container{
+    border-top: 1px solid var(--ks-border-primary);
+
+    // hack for class containing 0
+    &[class*="-0"] {
+        border-top: 0;
+    }
+
+    .icon_container {
         margin-left: -0.90rem;
     }
 
     .log-level {
         padding: .25rem;
+        margin-top: 0.25rem;
     }
 
     .log-content {
         .header > * + * {
-            margin-left: $spacer;
+            margin-left: 1rem;
         }
     }
 
@@ -243,7 +253,7 @@ div.line {
             border-radius: 4px;
         }
     }
-    
+
     .message {
         line-height: 1.8;
     }
diff --git a/ui/src/components/logs/LogsWrapper.vue b/ui/src/components/logs/LogsWrapper.vue
index 87700b7044e..1bac1661240 100644
--- a/ui/src/components/logs/LogsWrapper.vue
+++ b/ui/src/components/logs/LogsWrapper.vue
@@ -28,14 +28,14 @@
                 <template #table v-if="logs !== undefined && logs.length > 0">
                     <div v-loading="isLoading">
                         <div class="logs-wrapper">
-                            <template v-for="(log, i) in logs" :key="`${log.taskRunId}-${i}`">
-                                <log-line
-                                    level="TRACE"
-                                    filter=""
-                                    :exclude-metas="isFlowEdit ? ['namespace', 'flowId'] : []"
-                                    :log="log"
-                                />
-                            </template>
+                            <log-line
+                                v-for="(log, i) in logs"
+                                :key="`${log.taskRunId}-${i}`"
+                                level="TRACE"
+                                filter=""
+                                :exclude-metas="isFlowEdit ? ['namespace', 'flowId'] : []"
+                                :log="log"
+                            />
                         </div>
                     </div>
                 </template>
diff --git a/ui/src/components/logs/TaskRunDetails.vue b/ui/src/components/logs/TaskRunDetails.vue
index 6dc5625538e..ec50bfc85eb 100644
--- a/ui/src/components/logs/TaskRunDetails.vue
+++ b/ui/src/components/logs/TaskRunDetails.vue
@@ -695,6 +695,10 @@
             margin-bottom: 0;
             border: 1px solid var(--ks-border-primary);
 
+            :deep(.el-card__body) {
+                padding: 0;
+            }
+
             .attempt-wrapper & {
                 border-radius: .25rem;
             }
@@ -704,7 +708,7 @@
             }
 
             .attempt-header {
-                padding: .5rem;
+                padding: 0 .5rem .5rem;
                 border-bottom: 1px solid var(--ks-border-primary);
             }
 
@@ -728,7 +732,6 @@
         .log-lines {
             max-height: 50vh;
             transition: max-height 0.2s ease-out;
-            margin-top: .5rem;
 
             .line {
                 padding: 1rem;
diff --git a/ui/src/utils/markdown.js b/ui/src/utils/markdown.js
index db698cc3fb9..8e66a2e7886 100644
--- a/ui/src/utils/markdown.js
+++ b/ui/src/utils/markdown.js
@@ -23,7 +23,7 @@ export async function render(markdown, options = {}) {
     let md;
     if (options.onlyLink) {
         md = new markdownIt("zero");
-        md.enable(["link", "linkify", "entity", "html_inline", "newline"]);
+        md.enable(["link", "linkify", "entity", "html_inline"]);
     } else {
         md = new markdownIt();
     }