fix: add a button to last page on logs

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

@@ -1,4 +1,8 @@
-import { DownOutlined, UpOutlined } from '@ant-design/icons';
+import {
+  DownOutlined,
+  UpOutlined,
+  VerticalLeftOutlined
+} from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Tooltip } from 'antd';
 import React from 'react';
@@ -10,10 +14,11 @@ interface LogsPaginationProps {
   pageSize?: number;
   onPrev?: () => void;
   onNext?: () => void;
+  onBackend?: () => void;
 }
 
 const LogsPagination: React.FC<LogsPaginationProps> = (props) => {
-  const { page, total, pageSize, onNext, onPrev } = props;
+  const { page, total, pageSize, onNext, onPrev, onBackend } = props;
   const intl = useIntl();
 
   const handleOnPrev = () => {
@@ -27,6 +32,7 @@ const LogsPagination: React.FC<LogsPaginationProps> = (props) => {
   return (
     <div className="pagination">
       <Tooltip
+        placement="left"
         title={intl.formatMessage(
           { id: 'models.logs.pagination.prev' },
           { lines: pageSize }
@@ -46,21 +52,37 @@ const LogsPagination: React.FC<LogsPaginationProps> = (props) => {
         <span className="total">{total}</span>
       </span>
       {page < total && (
-        <Tooltip
-          title={intl.formatMessage(
-            { id: 'models.logs.pagination.next' },
-            { lines: pageSize }
-          )}
-        >
-          <Button
-            onClick={handleOnNext}
-            type="text"
-            shape="circle"
-            style={{ color: 'rgba(255,255,255,.7)' }}
+        <>
+          <Tooltip
+            placement="left"
+            title={intl.formatMessage(
+              { id: 'models.logs.pagination.next' },
+              { lines: pageSize }
+            )}
           >
-            <DownOutlined />
-          </Button>
-        </Tooltip>
+            <Button
+              onClick={handleOnNext}
+              type="text"
+              shape="circle"
+              style={{ color: 'rgba(255,255,255,.7)' }}
+            >
+              <DownOutlined />
+            </Button>
+          </Tooltip>
+          <Tooltip
+            title={intl.formatMessage({ id: 'models.logs.pagination.last' })}
+            placement="left"
+          >
+            <Button
+              onClick={onBackend}
+              type="text"
+              shape="circle"
+              style={{ color: 'rgba(255,255,255,.7)', marginTop: 10 }}
+            >
+              <VerticalLeftOutlined rotate={90} />
+            </Button>
+          </Tooltip>
+        </>
       )}
     </div>
   );

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

@@ -150,5 +150,10 @@ self.onmessage = function (event) {
     content: item.content,
     uid: item.uid
   }));
+  console.log('result===', result);
   self.postMessage(result);
 };
+
+self.onerror = function (event) {
+  console.error('parse logs error===', event);
+};

src/components/logs-viewer/styles/pagination.less

@@ -11,6 +11,10 @@
     background-color: rgba(71, 71, 71, 100%) !important;
   }
 
+  .ant-btn {
+    background-color: rgba(71, 71, 71, 50%) !important;
+  }
+
   .pages {
     display: flex;
     justify-content: center;

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

@@ -49,6 +49,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
   useImperativeHandle(ref, () => ({
     abort() {
       chunkRequedtRef.current?.current?.abort?.();
+      logParseWorker.current?.terminate?.();
     }
   }));
 
@@ -65,6 +66,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
 
     logParseWorker.current.onmessage = (event: any) => {
       const res = event.data;
+      console.log('res===', res);
       setLogs(res);
     };
 
@@ -73,7 +75,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
         logParseWorker.current.terminate();
       }
     };
-  }, [setLogs, logParseWorker.current]);
+  }, []);
 
   const debounceLoading = _.debounce(() => {
     setLoading(false);
@@ -88,26 +90,26 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
 
   const getLastPage = (data: string) => {
     const list = _.split(data.trim(), '\n');
-
-    if (!enableScorllLoad) {
-      return list.join('\n');
-    }
-
-    if (list.length <= pageSize) {
-      setTotalPage(1);
-      return data;
-    }
-
+    let result = '';
+    console.log('getlastPage===', list.length, enableScorllLoad, pageSize);
     setLoading(true);
-    const totalPage = Math.ceil(list.length / pageSize);
-    setTotalPage(totalPage);
-    setPage(() => totalPage);
-    pageRef.current = totalPage;
-    totalPageRef.current = totalPage;
-    const lastPage = list.slice(-pageSize).join('\n');
-    console.log('list.length===', list.length, totalPage, page);
+    if (!enableScorllLoad) {
+      result = list.join('\n');
+    } else if (list.length <= pageSize) {
+      setTotalPage(1);
+      result = data;
+    } else {
+      const totalPage = Math.ceil(list.length / pageSize);
+      setTotalPage(totalPage);
+      setPage(() => totalPage);
+      pageRef.current = totalPage;
+      totalPageRef.current = totalPage;
+      const lastPage = list.slice(-pageSize).join('\n');
+
+      result = lastPage;
+    }
     debounceLoading();
-    return lastPage;
+    return result;
   };
 
   const getCurrentPage = () => {
@@ -116,7 +118,6 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
     if (newPage < 1) {
       newPage = 1;
     }
-    console.log('currentpage===', newPage);
     const start = (newPage - 1) * pageSize;
     const end = newPage * pageSize;
     const currentPage = list.slice(start, end).join('\n');
@@ -164,6 +165,20 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
     });
   }, [totalPage, page, pageSize]);
 
+  const handleonBackend = useCallback(() => {
+    const list = _.split(cacheDataRef.current.trim(), '\n');
+    let newPage = totalPage;
+    const start = (newPage - 1) * pageSize;
+    const end = newPage * pageSize;
+    const nextPage = list.slice(start, end).join('\n');
+    setPage(() => newPage);
+    setScrollPos(['bottom', newPage]);
+    pageRef.current = newPage;
+    logParseWorker.current.postMessage({
+      inputStr: nextPage
+    });
+  }, [totalPage, page, pageSize]);
+
   const debounceParseData = _.debounce(() => {
     if (pageRef.current === totalPageRef.current) {
       logParseWorker.current.postMessage({
@@ -175,20 +190,25 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
   }, 100);
 
   const updateContent = (inputStr: string) => {
-    console.log('inputStr===', inputStr);
     const data = inputStr.replace(replaceLineRegex, '\n');
     if (isClean(data)) {
       cacheDataRef.current = data;
     } else {
       cacheDataRef.current += data;
     }
-    console.log('page===', pageRef.current, totalPageRef.current);
-    debounceParseData();
+    if (pageRef.current === totalPageRef.current) {
+      logParseWorker.current.postMessage({
+        inputStr: getLastPage(cacheDataRef.current)
+      });
+    } else {
+      getCurrentPage();
+    }
   };
 
   const createChunkConnection = async () => {
     cacheDataRef.current = '';
     chunkRequedtRef.current?.current?.abort?.();
+
     chunkRequedtRef.current = setChunkFetch({
       url,
       params: {
@@ -287,6 +307,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
                 pageSize={pageSize}
                 onNext={getNextPage}
                 onPrev={getPrePage}
+                onBackend={handleonBackend}
               ></LogsPagination>
             </div>
           </div>