chore: logs style

src/components/logs-viewer/index.tsx

@@ -1,13 +1,11 @@
 import useSetChunkFetch from '@/hooks/use-chunk-fetch';
 import useOverlayScroller from '@/hooks/use-overlay-scroller';
-import { FitAddon } from '@xterm/addon-fit';
-import { Terminal } from '@xterm/xterm';
 import '@xterm/xterm/css/xterm.css';
 import classNames from 'classnames';
 import _ from 'lodash';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import './index.less';
-import parseAnsi from './parse-ansi';
+import useParseAnsi from './parse-ansi';
 
 interface LogsViewerProps {
   height: number;
@@ -20,15 +18,14 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
   const { initialize, updateScrollerPosition } = useOverlayScroller({
     theme: 'os-theme-light'
   });
+  const { isClean, parseAnsi } = useParseAnsi();
   const { setChunkFetch } = useSetChunkFetch();
   const chunkRequedtRef = useRef<any>(null);
   const scroller = useRef<any>({});
-  const termRef = useRef<any>({});
-  const termwrapRef = useRef<any>({});
-  const fitAddonRef = useRef<any>({});
   const cacheDataRef = useRef<any>('');
   const uidRef = useRef<any>(0);
   const [logs, setLogs] = useState<any[]>([]);
+  const autoScroll = useRef(true);
 
   const setId = () => {
     uidRef.current += 1;
@@ -41,7 +38,11 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
 
   const updateContent = useCallback(
     (data: string) => {
-      cacheDataRef.current += data;
+      if (isClean(data)) {
+        cacheDataRef.current = data;
+      } else {
+        cacheDataRef.current += data;
+      }
       const res = parseAnsi(cacheDataRef.current, setId, clearScreen);
       setLogs(res);
     },
@@ -61,28 +62,6 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
     });
   };
 
-  const initTerm = useCallback(() => {
-    termRef.current?.clear?.();
-    termRef.current?.dispose?.();
-    termRef.current = new Terminal({
-      lineHeight: 1.2,
-      fontSize: 13,
-      fontFamily:
-        "monospace,Menlo,Courier,'Courier New',Consolas,Monaco, 'Liberation Mono'",
-      disableStdin: true,
-      convertEol: true,
-      theme: {
-        background: '#1e1e1e',
-        foreground: 'rgba(255,255,255,0.8)'
-      },
-      cursorInactiveStyle: 'none',
-      smoothScrollDuration: 0
-    });
-    fitAddonRef.current = new FitAddon();
-    termRef.current.loadAddon(fitAddonRef.current);
-    termRef.current.open(termwrapRef.current);
-  }, [termwrapRef.current]);
-
   useEffect(() => {
     createChunkConnection();
     return () => {
@@ -97,10 +76,10 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
   }, [scroller.current, initialize]);
 
   useEffect(() => {
-    if (logs) {
-      updateScrollerPosition();
+    if (logs.length) {
+      updateScrollerPosition(0);
     }
-  }, [logs]);
+  }, [logs, autoScroll.current]);
 
   return (
     <div className="logs-viewer-wrap-w2">

src/components/logs-viewer/parse-ansi.ts

@@ -1,130 +1,154 @@
-const removeBrackets = (str: string) => {
-  return str?.replace?.(/^\(.*?\)/, '');
-};
-const parseAnsi = (
-  inputStr: string,
-  setId: () => number,
-  clearScreen: () => void
-) => {
-  let cursorRow = 0; // current row
-  let cursorCol = 0; // current column
-  // screen content array
-  let screen = [['']];
-  // replace carriage return and newline characters in the text
-  let input = inputStr.replace(/\r\n/g, '\n');
+import { useCallback, useRef } from 'react';
 
-  // handle the \r and \n characters in the text
-  const handleText = (text: string) => {
-    let processed = '';
-    for (let char of text) {
-      if (char === '\r') {
-        cursorCol = 0; // move to the beginning of the line
-      } else if (char === '\n') {
-        cursorRow++; // move to the next line
-        cursorCol = 0; // move to the beginning of the line
-        screen[cursorRow] = screen[cursorRow] || ['']; // create a new line if it does not exist
-      } else {
-        // add the character to the screen content array
-        screen[cursorRow][cursorCol] = char;
-        cursorCol++;
+const controlSeqRegex = /\x1b\[(\d*);?(\d*)?([A-DJKHfm])/g;
+
+const useParseAnsi = () => {
+  const lastIndex = useRef(0);
+
+  const removeBrackets = useCallback((str: string) => {
+    return str?.replace?.(/^\(.*?\)/, '');
+  }, []);
+
+  const isClean = useCallback((ansiStr: string) => {
+    let input = ansiStr.replace(/\r\n/g, '\n');
+    let match = controlSeqRegex.exec(input) || [];
+    const command = match?.[3];
+    const n = parseInt(match?.[1], 10) || 1;
+    return command === 'J' && n === 2;
+  }, []);
+
+  const parseAnsi = useCallback(
+    (inputStr: string, setId: () => number, clearScreen: () => void) => {
+      let cursorRow = 0; // current row
+      let cursorCol = 0; // current column
+      // screen content array
+      let screen = [['']];
+      // replace carriage return and newline characters in the text
+      let input = inputStr.replace(/\r\n/g, '\n');
+
+      // handle the \r and \n characters in the text
+      const handleText = (text: string) => {
+        let processed = '';
+        for (let char of text) {
+          if (char === '\r') {
+            cursorCol = 0; // move to the beginning of the line
+          } else if (char === '\n') {
+            cursorRow++; // move to the next line
+            cursorCol = 0; // move to the beginning of the line
+            screen[cursorRow] = screen[cursorRow] || ['']; // create a new line if it does not exist
+          } else {
+            // add the character to the screen content array
+            screen[cursorRow][cursorCol] = char;
+            cursorCol++;
+          }
+        }
+        return processed;
+      };
+
+      let output = ''; // output text
+
+      let match;
+
+      // ANSI color map
+      const colorMap: Record<string, string> = {
+        '30': 'black',
+        '31': 'red',
+        '32': 'green',
+        '33': 'yellow',
+        '34': 'blue',
+        '35': 'magenta',
+        '36': 'cyan',
+        '37': 'white'
+      };
+
+      let currentStyle = ''; // current text style
+
+      // match ANSI control characters
+      while ((match = controlSeqRegex.exec(input)) !== null) {
+        // handle text before the control character
+        let textBeforeControl = input.slice(lastIndex.current, match.index);
+        output += handleText(textBeforeControl); // add the processed text to the output
+        lastIndex.current = controlSeqRegex.lastIndex; // update the last index
+
+        const n = parseInt(match[1], 10) || 1;
+        const m = parseInt(match[2], 10) || 1;
+        const command = match[3];
+        console.log('command', {
+          command,
+          cursorRow,
+          n
+        });
+
+        // handle ANSI control characters
+        switch (command) {
+          case 'A': // up
+            cursorRow = Math.max(0, cursorRow - n);
+            if (cursorRow === 0) {
+              // screen = [['']];
+              // cursorCol = 0;
+            }
+            break;
+          case 'B': // down
+            cursorRow += n;
+            break;
+          case 'C': // right
+            cursorCol += n;
+            break;
+          case 'D': // left
+            cursorCol = Math.max(0, cursorCol - n);
+            break;
+          case 'H': // move the cursor to the specified position (n, m)
+            cursorRow = Math.max(0, n - 1);
+            cursorCol = Math.max(0, m - 1);
+            break;
+          case 'J': // clear the screen
+            if (n === 2) {
+              console.log('clear====');
+              screen = [['']];
+              cursorRow = 0;
+              cursorCol = 0;
+            }
+            break;
+          case 'm': // color
+            if (match[1] === '0') {
+              currentStyle = '';
+            } else if (colorMap[match[1]]) {
+              currentStyle = `color: ${colorMap[match[1]]};`;
+            }
+            break;
+        }
+
+        // check if the row and column are within the screen content array
+        while (screen.length <= cursorRow) {
+          screen.push(['']);
+        }
+        while (screen[cursorRow].length <= cursorCol) {
+          screen[cursorRow].push('');
+        }
       }
-    }
-    return processed;
-  };
 
-  // ANSI
-  const controlSeqRegex = /\x1b\[(\d*);?(\d*)?([A-DJKHfm])/g;
-  let output = ''; // output text
+      // handle the remaining text
+      output += handleText(input.slice(lastIndex.current));
 
-  let match;
-  let lastIndex = 0;
+      let result = [];
+      for (let row = 0; row < screen.length; row++) {
+        let rowContent = screen[row].join('');
+        result.push({
+          content: removeBrackets(rowContent),
+          uid: setId()
+        });
+      }
+      result.push({
+        content: output,
+        uid: setId()
+      });
 
-  // ANSI color map
-  const colorMap: Record<string, string> = {
-    '30': 'black',
-    '31': 'red',
-    '32': 'green',
-    '33': 'yellow',
-    '34': 'blue',
-    '35': 'magenta',
-    '36': 'cyan',
-    '37': 'white'
-  };
+      return result;
+    },
+    []
+  );
 
-  let currentStyle = ''; // current text style
-
-  // match ANSI control characters
-  while ((match = controlSeqRegex.exec(input)) !== null) {
-    // handle text before the control character
-    let textBeforeControl = input.slice(lastIndex, match.index);
-    output += handleText(textBeforeControl); // add the processed text to the output
-    lastIndex = controlSeqRegex.lastIndex; // update the last index
-
-    const n = parseInt(match[1], 10) || 1;
-    const m = parseInt(match[2], 10) || 1;
-    const command = match[3];
-
-    // handle ANSI control characters
-    switch (command) {
-      case 'A': // move the cursor up
-        cursorRow = Math.max(0, cursorRow - n);
-        break;
-      case 'B': // move the cursor down
-        cursorRow += n;
-        break;
-      case 'C': // move the cursor right
-        cursorCol += n;
-        break;
-      case 'D': // move the cursor left
-        cursorCol = Math.max(0, cursorCol - n);
-        break;
-      case 'H': // move the cursor to the specified position (n, m)
-        cursorRow = Math.max(0, n - 1);
-        cursorCol = Math.max(0, m - 1);
-        break;
-      case 'J': // clear the screen
-        if (n === 2) {
-          screen = [['']];
-          cursorRow = 0;
-          cursorCol = 0;
-          clearScreen?.();
-        }
-        break;
-      case 'm': // color
-        if (match[1] === '0') {
-          currentStyle = '';
-        } else if (colorMap[match[1]]) {
-          currentStyle = `color: ${colorMap[match[1]]};`;
-        }
-        break;
-    }
-
-    // check if the row and column are within the screen content array
-    while (screen.length <= cursorRow) {
-      screen.push(['']);
-    }
-    while (screen[cursorRow].length <= cursorCol) {
-      screen[cursorRow].push('');
-    }
-  }
-
-  // handle the remaining text
-  output += handleText(input.slice(lastIndex));
-
-  let result = [];
-  for (let row = 0; row < screen.length; row++) {
-    let rowContent = screen[row].join('');
-    result.push({
-      content: removeBrackets(rowContent),
-      uid: setId()
-    });
-  }
-  result.push({
-    content: output,
-    uid: setId()
-  });
-
-  return result;
+  return { parseAnsi, isClean };
 };
 
-export default parseAnsi;
+export default useParseAnsi;

src/components/logs-viewer/use-parse-byline.ts

@@ -0,0 +1,139 @@
+import { useRef, useState } from 'react';
+
+const usePaseByLine = () => {
+  const [result, setResult] = useState<any[]>([]);
+  const uidRef = useRef(0);
+
+  const cursorRow = useRef(0); // current row
+  const cursorCol = useRef(0); // current column
+  // screen.current content array
+  const screen = useRef([['']]);
+  // replace carriage return and newline characters in the text
+  // let input = inputStr.replace(/\r\n/g, '\n')
+
+  const removeBrackets = (str: string) => {
+    return str?.replace?.(/^\(\.*?\)/, '');
+  };
+
+  const setId = () => {
+    uidRef.current += 1;
+    return uidRef.current;
+  };
+
+  // handle the \r and \n characters in the text
+  const handleText = (text: string) => {
+    for (let char of text) {
+      if (char === '\r') {
+        cursorCol.current = 0; // move to the beginning of the line
+      } else if (char === '\n') {
+        cursorRow.current += 1; // move to the next line
+        cursorCol.current = 0; // move to the beginning of the line
+        screen.current[cursorRow.current] = screen.current[
+          cursorRow.current
+        ] || ['']; // create a new line if it does not exist
+      } else {
+        // add the character to the screen.current content array
+        screen.current[cursorRow.current][cursorCol.current] = char;
+        cursorCol.current += 1;
+      }
+    }
+  };
+
+  // ANSI
+  const controlSeqRegex = /\x1b\[(\d*);?(\d*)?([A-DJKHfm])/g;
+
+  // ANSI color map
+  const colorMap: Record<string, string> = {
+    '30': 'black',
+    '31': 'red',
+    '32': 'green',
+    '33': 'yellow',
+    '34': 'blue',
+    '35': 'magenta',
+    '36': 'cyan',
+    '37': 'white'
+  };
+
+  const updateResult = () => {
+    let res = [];
+    for (let row = 0; row < screen.current.length; row++) {
+      console.log('screen.current[row]', screen.current[row]);
+      let rowContent = screen.current[row].join('');
+      res.push({
+        content: removeBrackets(rowContent),
+        uid: setId()
+      });
+    }
+    console.log('res', res);
+    setResult(res);
+  };
+
+  const handleLine = (line: string) => {
+    let match;
+    let lastIndex = 0;
+    let currentStyle = ''; // current text style
+    // match ANSI control characters
+    while ((match = controlSeqRegex.exec(line)) !== null) {
+      // handle text before the control character
+      let textBeforeControl = line.slice(lastIndex, match.index);
+
+      handleText(textBeforeControl); // add the processed text to the output
+      lastIndex = controlSeqRegex.lastIndex; // update the last index
+
+      const n = parseInt(match[1], 10) || 1;
+      const m = parseInt(match[2], 10) || 1;
+      const command = match[3];
+
+      // handle ANSI control characters
+      switch (command) {
+        case 'A': // up
+          cursorRow.current = Math.max(0, cursorRow.current - n);
+          break;
+        case 'B': // down
+          cursorRow.current += n;
+          break;
+        case 'C': // right
+          cursorCol.current += n;
+          break;
+        case 'D': // left
+          cursorCol.current = Math.max(0, cursorCol.current - n);
+          break;
+        case 'H': // move the cursor to the specified position (n, m)
+          cursorRow.current = Math.max(0, n - 1);
+          cursorCol.current = Math.max(0, m - 1);
+          break;
+        case 'J': // clear the screen.current
+          if (n === 2) {
+            screen.current = [['']];
+            cursorRow.current = 0;
+            cursorCol.current = 0;
+          }
+          break;
+        case 'm': // color
+          if (match[1] === '0') {
+            currentStyle = '';
+          } else if (colorMap[match[1]]) {
+            currentStyle = `color: ${colorMap[match[1]]};`;
+          }
+          break;
+      }
+
+      // check if the row and column are within the screen.current content array
+      while (screen.current.length <= cursorRow.current) {
+        screen.current.push(['']);
+      }
+      while (screen.current[cursorRow.current].length <= cursorCol.current) {
+        screen.current[cursorRow.current].push('');
+      }
+    }
+    handleText(line.slice(lastIndex));
+    updateResult();
+  };
+
+  return {
+    handleLine,
+    result
+  };
+};
+
+export default usePaseByLine;