fix: add decorations for parse ansi color in log-viewer (#286)

Signed-off-by: Zzde <zhangxh1997@gmail.com>

Author: zxh326

ui/src/components/log-viewer.tsx

@@ -15,6 +15,12 @@ import type { editor } from 'monaco-editor'
 import { useTranslation } from 'react-i18next'
 
 import { TERMINAL_THEMES, TerminalTheme } from '@/types/themes'
+import {
+  AnsiState,
+  generateAnsiCss,
+  getAnsiClassNames,
+  parseAnsi,
+} from '@/lib/ansi-parser'
 import { useLogsWebSocket } from '@/lib/api'
 import { toSimpleContainer } from '@/lib/k8s'
 import { Button } from '@/components/ui/button'
@@ -109,6 +115,8 @@ export function LogViewer({
   })
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null)
   const [logCount, setLogCount] = useState(0) // Track log count for re-rendering
+  const ansiStateRef = useRef<AnsiState>({})
+  const decorationIdsRef = useRef<string[]>([])
 
   const [selectPodName, setSelectPodName] = useState<string | undefined>(
     podName || pods?.[0]?.metadata?.name || undefined
@@ -183,17 +191,26 @@ export function LogViewer({
   const appendLog = useCallback(
     (log: string) => {
       setLogCount((count) => count + 1)
+
+      const { segments, finalState } = parseAnsi(log, ansiStateRef.current)
+      ansiStateRef.current = finalState
+
+      const plainText = segments.map((s) => s.text).join('')
+
       if (filterTerm) {
-        if (!log.toLocaleLowerCase().includes(filterTerm)) {
+        if (!plainText.toLocaleLowerCase().includes(filterTerm.toLowerCase())) {
           return
         }
       }
+
       if (editorRef.current) {
         const model = editorRef.current.getModel()
         if (model) {
           const lineCount = model.getLineCount()
           const lineMaxColumn = model.getLineMaxColumn(lineCount)
           const prefix = model.getValueLength() === 0 ? '' : '\n'
+
+          const textToInsert = `${prefix}${plainText}`
           model.applyEdits([
             {
               range: {
@@ -202,10 +219,54 @@ export function LogViewer({
                 startLineNumber: lineCount,
                 endLineNumber: lineCount,
               },
-              text: `${prefix}${log}`,
+              text: textToInsert,
               forceMoveMarkers: true,
             },
           ])
+
+          const newDecorations: editor.IModelDeltaDecoration[] = []
+
+          // Starting position for decorations
+          let currentLine = lineCount
+          let currentColumn = lineMaxColumn
+
+          if (prefix === '\n') {
+            currentLine++
+            currentColumn = 1
+          }
+
+          segments.forEach((segment) => {
+            const lines = segment.text.split('\n')
+            const endLine = currentLine + lines.length - 1
+            const endColumn =
+              lines.length === 1
+                ? currentColumn + lines[0].length
+                : lines[lines.length - 1].length + 1
+
+            const className = getAnsiClassNames(segment.styles)
+            if (className) {
+              newDecorations.push({
+                range: {
+                  startLineNumber: currentLine,
+                  startColumn: currentColumn,
+                  endLineNumber: endLine,
+                  endColumn: endColumn,
+                },
+                options: {
+                  inlineClassName: className,
+                },
+              })
+            }
+
+            currentLine = endLine
+            currentColumn = endColumn
+          })
+
+          if (newDecorations.length > 0) {
+            const newIds = model.deltaDecorations([], newDecorations)
+            decorationIdsRef.current.push(...newIds)
+          }
+
           const visibleRange = editorRef.current.getVisibleRanges()[0]
           if (visibleRange?.endLineNumber + 2 >= lineCount) {
             editorRef.current.revealLine(model.getLineCount())
@@ -221,6 +282,8 @@ export function LogViewer({
 
   const cleanLog = useCallback(() => {
     setLogCount(0)
+    ansiStateRef.current = {}
+    decorationIdsRef.current = []
     if (editorRef.current) {
       const model = editorRef.current.getModel()
       if (model) {
@@ -396,6 +459,7 @@ export function LogViewer({
     <Card
       className={`h-full flex flex-col py-4 gap-0 ${isFullscreen ? 'fixed inset-0 z-50 m-0 rounded-none' : ''} ${wordWrap ? 'whitespace-pre-wrap' : 'whitespace-pre'} `}
     >
+      <style>{generateAnsiCss()}</style>
       <CardHeader>
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">

ui/src/lib/ansi-parser.ts

@@ -48,7 +48,7 @@ const ANSI_BG_COLORS = {
   107: '#ffffff', // bright white
 } as const
 
-interface AnsiState {
+export interface AnsiState {
   color?: string
   backgroundColor?: string
   bold?: boolean
@@ -64,9 +64,12 @@ interface ParsedSegment {
 /**
  * Parse ANSI escape sequences in a string and return styled segments
  */
-export function parseAnsi(text: string): ParsedSegment[] {
+export function parseAnsi(
+  text: string,
+  initialState: AnsiState = {}
+): { segments: ParsedSegment[]; finalState: AnsiState } {
   const segments: ParsedSegment[] = []
-  let currentState: AnsiState = {}
+  let currentState: AnsiState = { ...initialState }
   let currentText = ''
 
   // Regex to match ANSI escape sequences - using Unicode escape instead of hex
@@ -112,7 +115,7 @@ export function parseAnsi(text: string): ParsedSegment[] {
     })
   }
 
-  return segments
+  return { segments, finalState: currentState }
 }
 
 /**
@@ -210,3 +213,55 @@ export function ansiStateToCss(state: AnsiState): React.CSSProperties {
 export function stripAnsi(text: string): string {
   return text.replace(new RegExp('\u001b\\[[0-9;]*m', 'g'), '')
 }
+
+/**
+ * Generate CSS class names for an AnsiState
+ */
+export function getAnsiClassNames(state: AnsiState): string {
+  const classes: string[] = []
+
+  if (state.color) {
+    // Find the code for this color
+    const code = Object.entries(ANSI_COLORS).find(
+      ([, value]) => value === state.color
+    )?.[0]
+    if (code) classes.push(`ansi-fg-${code}`)
+  }
+
+  if (state.backgroundColor) {
+    const code = Object.entries(ANSI_BG_COLORS).find(
+      ([, value]) => value === state.backgroundColor
+    )?.[0]
+    if (code) classes.push(`ansi-bg-${code}`)
+  }
+
+  if (state.bold) classes.push('ansi-bold')
+  if (state.italic) classes.push('ansi-italic')
+  if (state.underline) classes.push('ansi-underline')
+
+  return classes.join(' ')
+}
+
+/**
+ * Generate CSS styles for all ANSI classes
+ */
+export function generateAnsiCss(): string {
+  let css = ''
+
+  // Foreground colors
+  Object.entries(ANSI_COLORS).forEach(([code, color]) => {
+    css += `.ansi-fg-${code} { color: ${color} !important; }\n`
+  })
+
+  // Background colors
+  Object.entries(ANSI_BG_COLORS).forEach(([code, color]) => {
+    css += `.ansi-bg-${code} { background-color: ${color} !important; }\n`
+  })
+
+  // Styles
+  css += '.ansi-bold { font-weight: bold !important; }\n'
+  css += '.ansi-italic { font-style: italic !important; }\n'
+  css += '.ansi-underline { text-decoration: underline !important; }\n'
+
+  return css
+}