add full logline stories

kestra-io · Jan 17, 2025 · 7f048af · 7f048af
1 parent 51088c8
commit 7f048af
Show file tree

Hide file tree

Showing 3 changed files with 204 additions and 171 deletions.
diff --git a/ui/src/components/logs/LogLine.stories.js b/ui/src/components/logs/LogLine.stories.js
diff --git a/ui/src/components/logs/LogLine.vue b/ui/src/components/logs/LogLine.vue
@@ -8,7 +8,7 @@
         <el-icon v-if="cursor" class="icon_container" :style="{color: iconColor}" :size="25">
             <MenuRight />
         </el-icon>
-        <span :class="levelClasses" class="border header-badge log-level el-tag noselect">{{ log.level }}</span>
+        <span :style="levelStyle" class="el-tag log-level">{{ log.level }}</span>
         <div class="log-content d-inline-block">
             <span v-if="title" class="fw-bold">{{ log.taskId ?? log.flowId ?? "" }}</span>
             <div
@@ -131,9 +131,13 @@
                 }
                 return metaWithValue;
             },
-            levelClasses() {
+            levelStyle() {
                 const lowerCaseLevel = this.log?.level?.toLowerCase();
-                return `log-content-${lowerCaseLevel} log-border-${lowerCaseLevel} log-bg-${lowerCaseLevel}`;
+                return {
+                    "border-color": `var(--ks-log-border-${lowerCaseLevel})`,
+                    "color": `var(--ks-log-content-${lowerCaseLevel})`,
+                    "background-color": `var(--ks-log-background-${lowerCaseLevel})`,
+                };
             },
             filtered() {
                 return (
@@ -239,16 +243,7 @@ div.line {
             border-radius: 4px;
         }
     }
-
-    .noselect {
-        user-select: none;
-        color: $white;
-
-        html:not(.dark) & {
-            color: $black;
-        }
-    }
-
+    
     .message {
         line-height: 1.8;
     }
@@ -257,5 +252,11 @@ div.line {
         display: inline;
         margin-bottom: 0;
     }
+
+    .log-level {
+        padding: 0.25rem;
+        border: 1px solid var(--ks-border-primary);
+        user-select: none;
+    }
 }
-</style>
+</style>