fix: automatically update the page when scrolling

src/components/logs-viewer/index.tsx

@@ -3,7 +3,7 @@ import useOverlayScroller from '@/hooks/use-overlay-scroller';
 import '@xterm/xterm/css/xterm.css';
 import classNames from 'classnames';
 import _ from 'lodash';
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { replaceLineRegex } from './config';
 import useParseAnsi from './parse-ansi';
 import './styles/index.less';
@@ -92,13 +92,6 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
     updateScrollerPosition(0);
   }, 200);
 
-  const copyText = useMemo(() => {
-    if (!logs.length) {
-      return '';
-    }
-    return logs?.map((item) => item.content).join('\n');
-  }, [logs]);
-
   useEffect(() => {
     createChunkConnection();
     return () => {

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

@@ -14,7 +14,7 @@ import './styles/logs-list.less';
 interface LogsListProps {
   dataList: any[];
   height?: number;
-  onScroll?: (isTop: boolean) => void;
+  onScroll?: (data: { isTop: boolean; isBottom: boolean }) => void;
   diffHeight?: number;
   ref?: any;
 }
@@ -61,13 +61,26 @@ const LogsList: React.FC<LogsListProps> = forwardRef((props, ref) => {
       const scrollTop = scrollEventElement?.scrollTop;
       const scrollHeight = scrollEventElement?.scrollHeight;
       const clientHeight = scrollEventElement?.clientHeight;
-      // is scroll to bottom
+
       stopScroll.current = scrollTop + clientHeight <= scrollHeight;
+      // is scroll to bottom
+      const isBottom = scrollTop + clientHeight === scrollHeight;
       // is scroll to top
       if (scrollTop === 0) {
-        onScroll?.(true);
+        onScroll?.({
+          isTop: true,
+          isBottom: false
+        });
+      } else if (isBottom) {
+        onScroll?.({
+          isTop: false,
+          isBottom: true
+        });
       } else {
-        onScroll?.(false);
+        onScroll?.({
+          isTop: false,
+          isBottom: false
+        });
       }
       debounceResetStopScroll();
     },

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

@@ -42,6 +42,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
   const [isAtTop, setIsAtTop] = useState(false);
   const [scrollPos, setScrollPos] = useState<any[]>([]);
   const logListRef = useRef<any>(null);
+  const loadMoreDone = useRef(false);
 
   useImperativeHandle(ref, () => ({
     abort() {
@@ -171,18 +172,28 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
   };
 
   const handleOnScroll = useCallback(
-    async (isTop: boolean) => {
+    async (data: { isTop: boolean; isBottom: boolean }) => {
+      const { isTop, isBottom } = data;
       setIsAtTop(isTop);
-      if (loading || isLoadend || logs.length < pageSize || !enableScorllLoad) {
+      if (
+        loading ||
+        (logs.length > 0 && logs.length < pageSize && !loadMoreDone.current) ||
+        !enableScorllLoad
+      ) {
         return;
       }
-      if (isTop && !isLoadend) {
+
+      if (isTop && !loadMoreDone.current) {
         tail.current = undefined;
         createChunkConnection();
-        setIsLoadend(true);
+        loadMoreDone.current = true;
+      } else if (isTop && page <= totalPage && page > 1) {
+        getPrePage();
+      } else if (isBottom && page < totalPage) {
+        getNextPage();
       }
     },
-    [loading, isLoadend, logs.length, pageSize, enableScorllLoad]
+    [loading, logs.length, pageSize, enableScorllLoad, page, totalPage]
   );
 
   const debouncedScroll = useCallback(
@@ -204,9 +215,9 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
     };
   }, [url, props.params]);
 
-  useEffect(() => {
-    debouncedScroll();
-  }, [scrollPos]);
+  // useEffect(() => {
+  //   debouncedScroll();
+  // }, [scrollPos]);
 
   return (
     <div className="logs-viewer-wrap-w2">

src/components/version-info/index.less

@@ -52,7 +52,7 @@
     }
   }
 
-  .upgrade {
+  .upgrade-text {
     display: flex;
     justify-content: space-between;
     padding-block: 20px 4px;

src/components/version-info/index.tsx

@@ -52,7 +52,7 @@ const VersionInfo: React.FC<{ intl: any }> = ({ intl }) => {
         )}
       </div>
       {getAtomStorage(userAtom)?.is_admin && isProd && (
-        <div className="upgrade">
+        <div className="upgrade-text">
           <span className="m-l-5">
             {latestVersion &&
             latestVersion !== currentVersion &&