fix: logs scrollbar ux

src/components/auto-tooltip/index.tsx

@@ -13,6 +13,7 @@ import React, {
 interface AutoTooltipProps extends Omit<TagProps, 'title'> {
   children: React.ReactNode;
   maxWidth?: number | string;
+  minWidth?: number | string;
   color?: string;
   style?: React.CSSProperties;
   ghost?: boolean;
@@ -24,6 +25,7 @@ interface AutoTooltipProps extends Omit<TagProps, 'title'> {
 const AutoTooltip: React.FC<AutoTooltipProps> = ({
   children,
   maxWidth = '100%',
+  minWidth,
   ghost = false,
   title,
   showTitle = false,
@@ -61,6 +63,7 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
   const tagStyle = useMemo(
     () => ({
       maxWidth,
+      minWidth,
       overflow: 'hidden',
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap' as const,

src/components/logs-viewer/index.tsx

@@ -15,9 +15,10 @@ interface LogsViewerProps {
 }
 const LogsViewer: React.FC<LogsViewerProps> = (props) => {
   const { height, url } = props;
-  const { initialize, updateScrollerPosition } = useOverlayScroller({
-    theme: 'os-theme-light'
-  });
+  const { initialize, updateScrollerPosition, scrollEventElement } =
+    useOverlayScroller({
+      theme: 'os-theme-light'
+    });
   const { isClean, parseAnsi } = useParseAnsi();
   const { setChunkFetch } = useSetChunkFetch();
   const chunkRequedtRef = useRef<any>(null);
@@ -25,7 +26,6 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
   const cacheDataRef = useRef<any>('');
   const uidRef = useRef<any>(0);
   const [logs, setLogs] = useState<any[]>([]);
-  const autoScroll = useRef(true);
   const stopScroll = useRef(false);
 
   const setId = () => {
@@ -33,10 +33,6 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
     return uidRef.current;
   };
 
-  const clearScreen = () => {
-    cacheDataRef.current = '';
-  };
-
   const updateContent = useCallback(
     (data: string) => {
       if (isClean(data)) {
@@ -44,7 +40,7 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
       } else {
         cacheDataRef.current += data;
       }
-      const res = parseAnsi(cacheDataRef.current, setId, clearScreen);
+      const res = parseAnsi(cacheDataRef.current, setId);
       setLogs(res);
     },
     [setLogs, setId]
@@ -65,10 +61,17 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
 
   const debounceResetStopScroll = _.debounce(() => {
     stopScroll.current = false;
-  }, 3000);
+  }, 30000);
   const handleOnWheel = useCallback(
     (e: any) => {
-      stopScroll.current = true;
+      const scrollTop = scrollEventElement.scrollTop;
+      const scrollHeight = scrollEventElement.scrollHeight;
+      const clientHeight = scrollEventElement.clientHeight;
+      if (scrollTop + clientHeight >= scrollHeight) {
+        stopScroll.current = false;
+      } else {
+        stopScroll.current = true;
+      }
       debounceResetStopScroll();
     },
     [debounceResetStopScroll]
@@ -91,7 +94,7 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
     if (logs.length && !stopScroll.current) {
       updateScrollerPosition(0);
     }
-  }, [logs, autoScroll.current, stopScroll.current]);
+  }, [logs, stopScroll.current]);
 
   return (
     <div className="logs-viewer-wrap-w2">

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

@@ -17,138 +17,135 @@ const useParseAnsi = () => {
     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');
+  const parseAnsi = useCallback((inputStr: string, setId: () => number) => {
+    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');
 
-      lastIndex.current = 0;
+    lastIndex.current = 0;
 
-      // 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('');
+    // 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;
+    };
 
-      // handle the remaining text
-      output += handleText(input.slice(lastIndex.current));
+    let output = ''; // output text
 
-      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()
+    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
       });
 
-      return result;
-    },
-    []
-  );
+      // 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('');
+      }
+    }
+
+    // handle the remaining text
+    output += handleText(input.slice(lastIndex.current));
+
+    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 };
 };

src/components/version-info/index.tsx

@@ -61,7 +61,12 @@ const VersionInfo: React.FC<{ intl: any }> = ({ intl }) => {
                   { version: currentVersion }
                 )}
           </span>
-          <Button type="link" href={externalLinks.release} target="_blank">
+          <Button
+            type="link"
+            href={externalLinks.release}
+            target="_blank"
+            style={{ paddingInline: 0 }}
+          >
             {intl.formatMessage({ id: 'common.text.changelog' })}
           </Button>
         </div>