From ec2be9c0f28682f51718150b06a4d4b982a6ff69 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Tue, 12 Mar 2024 12:15:18 -0700
Subject: [PATCH] feat: brings colors back and fixes #2639 (#2823)

---
 assets/components/LogViewer/SimpleLogItem.vue |  9 +++++++--
 internal/docker/event_generator.go            |  4 +---
 internal/docker/level_guesser.go              |  1 +
 package.json                                  |  2 ++
 pnpm-lock.yaml                                | 20 +++++++++++++++++--
 5 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/assets/components/LogViewer/SimpleLogItem.vue b/assets/components/LogViewer/SimpleLogItem.vue
index 475e5916..828c4a9f 100644
--- a/assets/components/LogViewer/SimpleLogItem.vue
+++ b/assets/components/LogViewer/SimpleLogItem.vue
@@ -5,11 +5,11 @@
     <log-level class="flex" :level="logEntry.level" :position="logEntry.position" />
     <div
       class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap"
-      v-html="markSearch(logEntry.message)"
+      v-html="colorize(logEntry.message)"
     ></div>
     <log-message-actions
       class="duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100"
-      :message="decodeXML(logEntry.message)"
+      :message="decodeXML(stripAnsi(logEntry.message))"
       :log-entry="logEntry"
     />
   </div>
@@ -17,10 +17,15 @@
 <script lang="ts" setup>
 import { SimpleLogEntry } from "@/models/LogEntry";
 import { decodeXML } from "entities";
+import AnsiConvertor from "ansi-to-html";
+import stripAnsi from "strip-ansi";
+
+const ansiConvertor = new AnsiConvertor({ escapeXML: false, fg: "var(--base-content-color)" });
 
 defineProps<{
   logEntry: SimpleLogEntry;
 }>();
 
 const { markSearch } = useSearchFilter();
+const colorize = (value: string) => markSearch(ansiConvertor.toHtml(value));
 </script>
diff --git a/internal/docker/event_generator.go b/internal/docker/event_generator.go
index 2231d87a..c555e42b 100644
--- a/internal/docker/event_generator.go
+++ b/internal/docker/event_generator.go
@@ -82,9 +82,7 @@ func (g *EventGenerator) consumeReader() {
 		message, streamType, readerError := readEvent(g.reader, g.tty)
 		if message != "" {
 			logEvent := createEvent(message, streamType)
-			if _, ok := logEvent.Message.(string); ok {
-				logEvent.Message = stripANSI(logEvent.Message.(string))
-			}
+
 			logEvent.Level = guessLogLevel(logEvent)
 			g.buffer <- logEvent
 		}
diff --git a/internal/docker/level_guesser.go b/internal/docker/level_guesser.go
index 7e4c91d1..4e5bf815 100644
--- a/internal/docker/level_guesser.go
+++ b/internal/docker/level_guesser.go
@@ -23,6 +23,7 @@ func init() {
 func guessLogLevel(logEvent *LogEvent) string {
 	switch value := logEvent.Message.(type) {
 	case string:
+		value = stripANSI(value)
 		for _, level := range LOG_LEVELS {
 			if LOG_LEVELS_PLAIN[level].MatchString(value) {
 				return level
diff --git a/package.json b/package.json
index 2f6583d9..29ba375b 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
   "@vueuse/core": "^10.9.0",
   "@vueuse/integrations": "^10.9.0",
   "@vueuse/router": "^10.9.0",
+  "ansi-to-html": "^0.7.2",
   "autoprefixer": "^10.4.18",
   "d3-array": "^3.2.4",
   "d3-ease": "^3.0.1",
@@ -57,6 +58,7 @@
   "pinia": "^2.1.7",
   "postcss": "^8.4.35",
   "splitpanes": "^3.1.5",
+  "strip-ansi": "^7.1.0",
   "tailwindcss": "^3.4.1",
   "unplugin-auto-import": "^0.17.5",
   "unplugin-icons": "^0.18.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c0b0bda1..e1270e49 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -47,6 +47,9 @@ dependencies:
   '@vueuse/router':
     specifier: ^10.9.0
     version: 10.9.0(vue-router@4.3.0)(vue@3.4.21)
+  ansi-to-html:
+    specifier: ^0.7.2
+    version: 0.7.2
   autoprefixer:
     specifier: ^10.4.18
     version: 10.4.18(postcss@8.4.35)
@@ -92,6 +95,9 @@ dependencies:
   splitpanes:
     specifier: ^3.1.5
     version: 3.1.5
+  strip-ansi:
+    specifier: ^7.1.0
+    version: 7.1.0
   tailwindcss:
     specifier: ^3.4.1
     version: 3.4.1(ts-node@10.9.2)
@@ -1856,7 +1862,6 @@ packages:
   /ansi-regex@6.0.1:
     resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
     engines: {node: '>=12'}
-    dev: true
 
   /ansi-styles@4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
@@ -1875,6 +1880,14 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /ansi-to-html@0.7.2:
+    resolution: {integrity: sha512-v6MqmEpNlxF+POuyhKkidusCHWWkaLcGRURzivcU3I9tv7k4JVhFcnukrM5Rlk2rUywdZuzYAZ+kbZqWCnfN3g==}
+    engines: {node: '>=8.0.0'}
+    hasBin: true
+    dependencies:
+      entities: 2.2.0
+    dev: false
+
   /any-promise@1.3.0:
     resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
     dev: false
@@ -2535,6 +2548,10 @@ packages:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
     dev: true
 
+  /entities@2.2.0:
+    resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
+    dev: false
+
   /entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
@@ -4324,7 +4341,6 @@ packages:
     engines: {node: '>=12'}
     dependencies:
       ansi-regex: 6.0.1
-    dev: true
 
   /strip-final-newline@2.0.0:
     resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}