fix: log pagination

fbac8c8c · QuentinHsu · 89ad43e4 · fbac8c8c
Commit fbac8c8c authored Aug 11, 2024 by QuentinHsu
Hide whitespace changes
Inline Side-by-side

Showing with 46 additions and 87 deletions

web/src/components/LogsTable.js
+46 -87

No files found.
--- a/web/src/components/LogsTable.js
+++ b/web/src/components/LogsTable.js
 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'>
+      <Tag color='green' size='large'>
-          {' '}
+        {' '}
-          {time} s{' '}
+        {time} s{' '}
-        </Tag>
+      </Tag>
    );
  } else if (time < 10) {
    return (
-        <Tag color='orange' size='large'>
+      <Tag color='orange' size='large'>
-          {' '}
+        {' '}
-          {time} s{' '}
+        {time} s{' '}
-        </Tag>
+      </Tag>
    );
  } else {
    return (
-        <Tag color='red' size='large'>
+      <Tag color='red' size='large'>
-          {' '}
+        {' '}
-          {time} s{' '}
+        {time} s{' '}
-        </Tag>
+      </Tag>
    );
  }
 }
@@ -281,22 +282,22 @@ const LogsTable = () => {
        if (record.is_stream) {
          let other = getLogOther(record.other);
          return (
-              <div>
+            <div>
-                <Space>
+              <Space>
-                  {renderUseTime(text)}
+                {renderUseTime(text)}
-                  {renderFirstUseTime(other.frt)}
+                {renderFirstUseTime(other.frt)}
-                  {renderIsStream(record.is_stream)}
+                {renderIsStream(record.is_stream)}
-                </Space>
+              </Space>
-              </div>
+            </div>
          );
        } else {
          return (
-              <div>
+            <div>
-                <Space>
+              <Space>
-                  {renderUseTime(text)}
+                {renderUseTime(text)}
-                  {renderIsStream(record.is_stream)}
+                {renderIsStream(record.is_stream)}
-                </Space>
+              </Space>
-              </div>
+            </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(
+    let res = await API.get(url);
-      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(
+    let res = await API.get(url);
-      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) {
+      const newPageData = data.items;
-        setLogsFormat(data);
+      setActivePage(data.page);
-      } else {
+      setPageSize(data.page_size);
-        let newLogs = [...logs];
+      setLogCount(data.total);
-        newLogs.splice(startIdx * pageSize, data.length, ...data);
-        setLogsFormat(newLogs);
+      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) {
+    loadLogs(page, pageSize, logType).then((r) => {});
-      // In this case we have to load more data and then append them.
-      loadLogs(page - 1, 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,
          }}