fix: log pagination

web/src/components/LogsTable.js

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import {
   API,
-  copy, getTodayStartTimestamp,
+  copy,
+  getTodayStartTimestamp,
   isAdmin,
   showError,
   showSuccess,
-  timestamp2string
+  timestamp2string,
 } from '../helpers';
 
 import {
@@ -29,7 +30,7 @@ import {
   stringToColor,
 } from '../helpers/render';
 import Paragraph from '@douyinfe/semi-ui/lib/es/typography/paragraph';
-import {getLogOther} from "../helpers/other.js";
+import { getLogOther } from '../helpers/other.js';
 
 const { Header } = Layout;
 
@@ -144,27 +145,27 @@ function renderUseTime(type) {
 
 function renderFirstUseTime(type) {
   let time = parseFloat(type) / 1000.0;
-  time = time.toFixed(1)
+  time = time.toFixed(1);
   if (time < 3) {
     return (
-        <Tag color='green' size='large'>
-          {' '}
-          {time} s{' '}
-        </Tag>
+      <Tag color='green' size='large'>
+        {' '}
+        {time} s{' '}
+      </Tag>
     );
   } else if (time < 10) {
     return (
-        <Tag color='orange' size='large'>
-          {' '}
-          {time} s{' '}
-        </Tag>
+      <Tag color='orange' size='large'>
+        {' '}
+        {time} s{' '}
+      </Tag>
     );
   } else {
     return (
-        <Tag color='red' size='large'>
-          {' '}
-          {time} s{' '}
-        </Tag>
+      <Tag color='red' size='large'>
+        {' '}
+        {time} s{' '}
+      </Tag>
     );
   }
 }
@@ -281,22 +282,22 @@ const LogsTable = () => {
         if (record.is_stream) {
           let other = getLogOther(record.other);
           return (
-              <div>
-                <Space>
-                  {renderUseTime(text)}
-                  {renderFirstUseTime(other.frt)}
-                  {renderIsStream(record.is_stream)}
-                </Space>
-              </div>
+            <div>
+              <Space>
+                {renderUseTime(text)}
+                {renderFirstUseTime(other.frt)}
+                {renderIsStream(record.is_stream)}
+              </Space>
+            </div>
           );
         } else {
           return (
-              <div>
-                <Space>
-                  {renderUseTime(text)}
-                  {renderIsStream(record.is_stream)}
-                </Space>
-              </div>
+            <div>
+              <Space>
+                {renderUseTime(text)}
+                {renderIsStream(record.is_stream)}
+              </Space>
+            </div>
           );
         }
       },
@@ -344,7 +345,7 @@ const LogsTable = () => {
         if (record.other !== '') {
           let other = JSON.parse(record.other);
           if (other === null) {
-            return <></>
+            return <></>;
           }
           if (other.admin_info !== undefined) {
             if (
@@ -414,8 +415,6 @@ const LogsTable = () => {
   const [activePage, setActivePage] = useState(1);
   const [logCount, setLogCount] = useState(ITEMS_PER_PAGE);
   const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
-  const [searchKeyword, setSearchKeyword] = useState('');
-  const [searching, setSearching] = useState(false);
   const [logType, setLogType] = useState(0);
   const isAdminUser = isAdmin();
   let now = new Date();
@@ -451,9 +450,7 @@ const LogsTable = () => {
     let localEndTimestamp = Date.parse(end_timestamp) / 1000;
     let url = `/api/log/self/stat?type=${logType}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
     url = encodeURI(url);
-    let res = await API.get(
-      url,
-    );
+    let res = await API.get(url);
     const { success, message, data } = res.data;
     if (success) {
       setStat(data);
@@ -467,9 +464,7 @@ const LogsTable = () => {
     let localEndTimestamp = Date.parse(end_timestamp) / 1000;
     let url = `/api/log/stat?type=${logType}&username=${username}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}&channel=${channel}`;
     url = encodeURI(url);
-    let res = await API.get(
-      url,
-    );
+    let res = await API.get(url);
     const { success, message, data } = res.data;
     if (success) {
       setStat(data);
@@ -521,10 +516,7 @@ const LogsTable = () => {
       logs[i].timestamp2string = timestamp2string(logs[i].created_at);
       logs[i].key = '' + logs[i].id;
     }
-    // data.key = '' + data.id
     setLogs(logs);
-    setLogCount(logs.length + ITEMS_PER_PAGE);
-    // console.log(logCount);
   };
 
   const loadLogs = async (startIdx, pageSize, logType = 0) => {
@@ -542,37 +534,28 @@ const LogsTable = () => {
     const res = await API.get(url);
     const { success, message, data } = res.data;
     if (success) {
-      if (startIdx === 0) {
-        setLogsFormat(data);
-      } else {
-        let newLogs = [...logs];
-        newLogs.splice(startIdx * pageSize, data.length, ...data);
-        setLogsFormat(newLogs);
-      }
+      const newPageData = data.items;
+      setActivePage(data.page);
+      setPageSize(data.page_size);
+      setLogCount(data.total);
+
+      setLogsFormat(newPageData);
     } else {
       showError(message);
     }
     setLoading(false);
   };
 
-  const pageData = logs.slice(
-    (activePage - 1) * pageSize,
-    activePage * pageSize,
-  );
-
   const handlePageChange = (page) => {
     setActivePage(page);
-    if (page === Math.ceil(logs.length / pageSize) + 1) {
-      // In this case we have to load more data and then append them.
-      loadLogs(page - 1, pageSize, logType).then((r) => {});
-    }
+    loadLogs(page, pageSize, logType).then((r) => {});
   };
 
   const handlePageSizeChange = async (size) => {
     localStorage.setItem('page-size', size + '');
     setPageSize(size);
     setActivePage(1);
-    loadLogs(0, size)
+    loadLogs(activePage, size)
       .then()
       .catch((reason) => {
         showError(reason);
@@ -580,27 +563,24 @@ const LogsTable = () => {
   };
 
   const refresh = async () => {
-    // setLoading(true);
     setActivePage(1);
     handleEyeClick();
-    await loadLogs(0, pageSize, logType);
+    await loadLogs(activePage, pageSize, logType);
   };
 
   const copyText = async (text) => {
     if (await copy(text)) {
       showSuccess('已复制：' + text);
     } else {
-      // setSearchKeyword(text);
       Modal.error({ title: '无法复制到剪贴板，请手动复制', content: text });
     }
   };
 
   useEffect(() => {
-    // console.log('default effect')
     const localPageSize =
       parseInt(localStorage.getItem('page-size')) || ITEMS_PER_PAGE;
     setPageSize(localPageSize);
-    loadLogs(0, localPageSize)
+    loadLogs(activePage, localPageSize)
       .then()
       .catch((reason) => {
         showError(reason);
@@ -608,25 +588,6 @@ const LogsTable = () => {
     handleEyeClick();
   }, []);
 
-  const searchLogs = async () => {
-    if (searchKeyword === '') {
-      // if keyword is blank, load files instead.
-      await loadLogs(0, pageSize);
-      setActivePage(1);
-      return;
-    }
-    setSearching(true);
-    const res = await API.get(`/api/log/self/search?keyword=${searchKeyword}`);
-    const { success, message, data } = res.data;
-    if (success) {
-      setLogs(data);
-      setActivePage(1);
-    } else {
-      showError(message);
-    }
-    setSearching(false);
-  };
-
   return (
     <>
       <Layout>
@@ -719,15 +680,13 @@ const LogsTable = () => {
             >
               查询
             </Button>
-            <Form.Section>
-
-            </Form.Section>
+            <Form.Section></Form.Section>
           </>
         </Form>
         <Table
           style={{ marginTop: 5 }}
           columns={columns}
-          dataSource={pageData}
+          dataSource={logs}
           pagination={{
             currentPage: activePage,
             pageSize: pageSize,
@@ -735,7 +694,7 @@ const LogsTable = () => {
             pageSizeOpts: [10, 20, 50, 100],
             showSizeChanger: true,
             onPageSizeChange: (size) => {
-              handlePageSizeChange(size).then();
+              handlePageSizeChange(size);
             },
             onPageChange: handlePageChange,
           }}