fix: clear screen logs after loading all

src/components/logs-viewer/config.ts

@@ -2,3 +2,32 @@ export const controlSeqRegex = /\x1b\[(\d*);?(\d*)?([A-DJKHfm])/g;
 export const replaceLineRegex = /\r\n/g;
 
 export const PageSize = 500;
+
+export const throttle = <T extends (...args: any[]) => void>(
+  func: T,
+  wait: number
+): ((this: ThisParameterType<T>, ...args: Parameters<T>) => void) => {
+  let timeout: ReturnType<typeof setTimeout> | null = null;
+  let previous = Date.now();
+
+  return function (this: ThisParameterType<T>, ...args: Parameters<T>): void {
+    const now = Date.now();
+    const remaining = wait - (now - previous);
+    const context = this as ThisParameterType<T>;
+
+    if (remaining <= 0 || remaining > wait) {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = null;
+      }
+      previous = now;
+      func.apply(context, args);
+    } else if (!timeout) {
+      timeout = setTimeout(() => {
+        previous = Date.now();
+        timeout = null;
+        func.apply(context, args);
+      }, remaining);
+    }
+  };
+};

src/components/logs-viewer/logs-pagination.tsx

@@ -15,10 +15,11 @@ interface LogsPaginationProps {
   onPrev?: () => void;
   onNext?: () => void;
   onBackend?: () => void;
+  onToFirst?: () => void;
 }
 
 const LogsPagination: React.FC<LogsPaginationProps> = (props) => {
-  const { page, total, pageSize, onNext, onPrev, onBackend } = props;
+  const { page, total, pageSize, onNext, onPrev, onBackend, onToFirst } = props;
   const intl = useIntl();
 
   const handleOnPrev = () => {
@@ -32,22 +33,37 @@ const LogsPagination: React.FC<LogsPaginationProps> = (props) => {
   return (
     <div className="pagination">
       {page > 1 && (
-        <Tooltip
-          placement="left"
-          title={intl.formatMessage(
-            { id: 'models.logs.pagination.prev' },
-            { lines: pageSize }
-          )}
-        >
-          <Button
-            onClick={handleOnPrev}
-            type="text"
-            shape="circle"
-            style={{ color: 'rgba(255,255,255,.7)' }}
+        <>
+          <Tooltip
+            title={intl.formatMessage({ id: 'models.logs.pagination.first' })}
+            placement="left"
           >
-            <UpOutlined />
-          </Button>
-        </Tooltip>
+            <Button
+              onClick={onToFirst}
+              type="text"
+              shape="circle"
+              style={{ color: 'rgba(255,255,255,.7)', marginBottom: 10 }}
+            >
+              <VerticalLeftOutlined rotate={-90} />
+            </Button>
+          </Tooltip>
+          <Tooltip
+            placement="left"
+            title={intl.formatMessage(
+              { id: 'models.logs.pagination.prev' },
+              { lines: pageSize }
+            )}
+          >
+            <Button
+              onClick={handleOnPrev}
+              type="text"
+              shape="circle"
+              style={{ color: 'rgba(255,255,255,.7)' }}
+            >
+              <UpOutlined />
+            </Button>
+          </Tooltip>
+        </>
       )}
       <span className="pages">
         <span className="curr">{page}</span> /{' '}

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

@@ -22,7 +22,7 @@ class AnsiParser {
     this.cursorCol = 0;
     this.screen = [['']];
     this.rawDataRows = 0;
-    this.uid = 0;
+    this.uid = this.uid + 1;
   }
 
   private setId() {
@@ -129,14 +129,16 @@ class AnsiParser {
     this.isProcessing = true;
 
     while (this.taskQueue.length > 0) {
-      const input = this.taskQueue.join('');
-      this.taskQueue = [];
-      const result = this.processInput(input);
+      const input = this.taskQueue.shift();
 
-      self.postMessage({
-        result: result.data,
-        lines: result.lines
-      });
+      if (input) {
+        try {
+          const result = this.processInput(input);
+          self.postMessage({ result: result.data, lines: result.lines });
+        } catch (error) {
+          console.error('Error processing input:', error);
+        }
+      }
 
       await new Promise((resolve) => {
         setTimeout(resolve, 0);
@@ -144,18 +146,25 @@ class AnsiParser {
     }
 
     this.isProcessing = false;
+    if (this.taskQueue.length > 0) {
+      this.processQueue();
+    }
   }
 
   public enqueueData(input: string): void {
     this.taskQueue.push(input);
-    this.processQueue();
+    if (!this.isProcessing) {
+      this.processQueue();
+    }
   }
 }
 const parser = new AnsiParser();
 
 self.onmessage = function (event) {
-  const { inputStr } = event.data;
-
+  const { inputStr, reset } = event.data;
+  if (reset) {
+    parser.reset();
+  }
   parser.enqueueData(inputStr);
 };
 

src/components/logs-viewer/virtual-log-list.tsx

@@ -49,6 +49,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
     page: 1
   });
   const lineCountRef = useRef(0);
+  const clearScreen = useRef(false);
 
   useImperativeHandle(ref, () => ({
     abort() {
@@ -103,7 +104,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
   const handleonBackend = useCallback(() => {
     pageRef.current = totalPageRef.current;
     getCurrent();
-    setPage(pageRef.current);
+
     console.log('pageRef.current', pageRef.current);
     setScrollPos(['bottom', pageRef.current]);
     scrollPosRef.current = {
@@ -112,6 +113,17 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
     };
   }, [getCurrent]);
 
+  const handleonToFirst = useCallback(() => {
+    pageRef.current = 1;
+    getCurrent();
+    console.log('pageRef.current', pageRef.current);
+    setScrollPos(['top', pageRef.current]);
+    scrollPosRef.current = {
+      pos: 'top',
+      page: pageRef.current
+    };
+  }, [getCurrent]);
+
   const updateContent = (data: string) => {
     if (isLoadingMoreRef.current) {
       setLoading(true);
@@ -120,8 +132,10 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
       }
     }
     logParseWorker.current.postMessage({
-      inputStr: data
+      inputStr: data,
+      reset: clearScreen.current
     });
+    clearScreen.current = false;
   };
 
   const createChunkConnection = async () => {
@@ -181,6 +195,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
         createChunkConnection();
         loadMoreDone.current = true;
         isLoadingMoreRef.current = true;
+        clearScreen.current = true;
       } else if (isTop && page <= totalPage && page > 1) {
         // getPrePage();
       } else if (isBottom && page < totalPage) {
@@ -264,7 +279,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
       const start = (pageRef.current - 1) * pageSize;
       const end = pageRef.current * pageSize;
       const currentLogs = result.slice(start, end);
-
+      console.log('result+++++++', result);
       setLogs(result);
       setTotalPage(totalPageRef.current);
       setPage(pageRef.current);
@@ -309,6 +324,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
                 pageSize={pageSize}
                 onNext={getNextPage}
                 onPrev={getPrePage}
+                onToFirst={handleonToFirst}
                 onBackend={handleonBackend}
               ></LogsPagination>
             </div>