feat(ui): display color on log

kestra-io · Mar 14, 2022 · a697274 · a697274
1 parent 4b29949
commit a697274
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 1 deletion.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@vue/composition-api": "^1.4.5",
+    "ansi-to-html": "^0.7.2",
     "axios": "^0.25.0",
     "bootstrap": "^4.6.1",
     "bootstrap-vue": "^2.21.2",

diff --git a/ui/src/components/logs/LogLine.vue b/ui/src/components/logs/LogLine.vue
@@ -10,10 +10,13 @@
                 {{ meta.value }}
             </span>
         </span>
-        <span class="message">{{ log.message }}</span>
+        <span class="message" v-html="message" />
     </div>
 </template>
 <script>
+    import Convert from "ansi-to-html"
+    let convert = new Convert();
+
     export default {
         props: {
             log: {
@@ -66,6 +69,9 @@
                     this.log.message.toLowerCase().includes(this.filter)
                 );
             },
+            message() {
+                return convert.toHtml(this.log.message);
+            }
         },
     };
 </script>