fix: fixes log levels that have ansi color by stripping (#3400)

assets/components/LogViewer/ComplexLogItem.vue

@@ -19,14 +19,15 @@
           <template v-else-if="Array.isArray(value)">
             <span class="font-bold" v-html="JSON.stringify(value)"> </span>
           </template>
-          <span class="font-bold" v-html="value" v-else></span>
+          <span class="font-bold" v-html="stripAnsi(value.toString())" v-else></span>
         </li>
         <li class="text-light" v-if="Object.keys(validValues).length === 0">all values are hidden</li>
       </ul>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
+import stripAnsi from "strip-ansi";
 import { type ComplexLogEntry } from "@/models/LogEntry";
 import LogDetails from "./LogDetails.vue";
 

internal/docker/level_guesser.go

@@ -63,13 +63,14 @@ func guessLogLevel(logEvent *LogEvent) string {
 		if value == nil {
 			return "unknown"
 		}
+
 		if level, ok := value.Get("level"); ok {
 			if level, ok := level.(string); ok {
-				return strings.ToLower(level)
+				return normalizeLogLevel(level)
 			}
 		} else if severity, ok := value.Get("severity"); ok {
 			if severity, ok := severity.(string); ok {
-				return strings.ToLower(severity)
+				return normalizeLogLevel(severity)
 			}
 		}
 
@@ -78,9 +79,9 @@ func guessLogLevel(logEvent *LogEvent) string {
 			return "unknown"
 		}
 		if level, ok := value.Get("level"); ok {
-			return strings.ToLower(level)
+			return normalizeLogLevel(level)
 		} else if severity, ok := value.Get("severity"); ok {
-			return strings.ToLower(severity)
+			return normalizeLogLevel(severity)
 		}
 
 	case map[string]interface{}:
@@ -95,3 +96,13 @@ func guessLogLevel(logEvent *LogEvent) string {
 
 	return "unknown"
 }
+
+func normalizeLogLevel(level string) string {
+	level = stripANSI(level)
+	level = strings.ToLower(level)
+	if _, ok := SupportedLogLevels[level]; ok {
+		return level
+	}
+
+	return "unknown"
+}