diff --git a/controller/log.go b/controller/log.go index 3e9721a..3902810 100644 --- a/controller/log.go +++ b/controller/log.go @@ -10,9 +10,13 @@ import ( func GetAllLogs(c *gin.Context) { p, _ := strconv.Atoi(c.Query("p")) + pageSize, _ := strconv.Atoi(c.Query("page_size")) if p < 0 { p = 0 } + if pageSize < 0 { + pageSize = common.ItemsPerPage + } logType, _ := strconv.Atoi(c.Query("type")) startTimestamp, _ := strconv.ParseInt(c.Query("start_timestamp"), 10, 64) endTimestamp, _ := strconv.ParseInt(c.Query("end_timestamp"), 10, 64) @@ -20,7 +24,7 @@ func GetAllLogs(c *gin.Context) { tokenName := c.Query("token_name") modelName := c.Query("model_name") channel, _ := strconv.Atoi(c.Query("channel")) - logs, err := model.GetAllLogs(logType, startTimestamp, endTimestamp, modelName, username, tokenName, p*common.ItemsPerPage, common.ItemsPerPage, channel) + logs, err := model.GetAllLogs(logType, startTimestamp, endTimestamp, modelName, username, tokenName, p*pageSize, pageSize, channel) if err != nil { c.JSON(http.StatusOK, gin.H{ "success": false, @@ -38,16 +42,23 @@ func GetAllLogs(c *gin.Context) { func GetUserLogs(c *gin.Context) { p, _ := strconv.Atoi(c.Query("p")) + pageSize, _ := strconv.Atoi(c.Query("page_size")) if p < 0 { p = 0 } + if pageSize < 0 { + pageSize = common.ItemsPerPage + } + if pageSize > 100 { + pageSize = 100 + } userId := c.GetInt("id") logType, _ := strconv.Atoi(c.Query("type")) startTimestamp, _ := strconv.ParseInt(c.Query("start_timestamp"), 10, 64) endTimestamp, _ := strconv.ParseInt(c.Query("end_timestamp"), 10, 64) tokenName := c.Query("token_name") modelName := c.Query("model_name") - logs, err := model.GetUserLogs(userId, logType, startTimestamp, endTimestamp, modelName, tokenName, p*common.ItemsPerPage, common.ItemsPerPage) + logs, err := model.GetUserLogs(userId, logType, startTimestamp, endTimestamp, modelName, tokenName, p*pageSize, pageSize) if err != nil { c.JSON(http.StatusOK, gin.H{ "success": false, diff --git a/web/src/components/LogsTable.js b/web/src/components/LogsTable.js index 9fb7e3c..3e2b474 100644 --- a/web/src/components/LogsTable.js +++ b/web/src/components/LogsTable.js @@ -1,26 +1,13 @@ import React, {useEffect, useState} from 'react'; -import {Label} from 'semantic-ui-react'; import {API, copy, isAdmin, showError, showSuccess, timestamp2string} from '../helpers'; import {Table, Avatar, Tag, Form, Button, Layout, Select, Popover, Modal, Spin, Space} from '@douyinfe/semi-ui'; import {ITEMS_PER_PAGE} from '../constants'; import {renderNumber, renderQuota, stringToColor} from '../helpers/render'; -import { - IconAt, - IconHistogram, - IconGift, - IconKey, - IconUser, - IconLayers, - IconSetting, - IconCreditCard, - IconSemiLogo, - IconHome, - IconMore -} from '@douyinfe/semi-icons'; import Paragraph from "@douyinfe/semi-ui/lib/es/typography/paragraph"; const {Header} = Layout; + function renderTimestamp(timestamp) { return ( <> @@ -221,7 +208,8 @@ const LogsTable = () => { title: '详情', dataIndex: 'content', render: (text, record, index) => { - return + return {text} } @@ -234,6 +222,7 @@ const LogsTable = () => { const [loadingStat, setLoadingStat] = useState(false); 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); @@ -327,16 +316,16 @@ const LogsTable = () => { // console.log(logCount); } - const loadLogs = async (startIdx) => { + const loadLogs = async (startIdx, pageSize) => { setLoading(true); let url = ''; let localStartTimestamp = Date.parse(start_timestamp) / 1000; let localEndTimestamp = Date.parse(end_timestamp) / 1000; if (isAdminUser) { - url = `/api/log/?p=${startIdx}&type=${logType}&username=${username}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}&channel=${channel}`; + url = `/api/log/?p=${startIdx}&page_size=${pageSize}&type=${logType}&username=${username}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}&channel=${channel}`; } else { - url = `/api/log/self/?p=${startIdx}&type=${logType}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`; + url = `/api/log/self/?p=${startIdx}&page_size=${pageSize}&type=${logType}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`; } const res = await API.get(url); const {success, message, data} = res.data; @@ -345,7 +334,7 @@ const LogsTable = () => { setLogsFormat(data); } else { let newLogs = [...logs]; - newLogs.splice(startIdx * ITEMS_PER_PAGE, data.length, ...data); + newLogs.splice(startIdx * pageSize, data.length, ...data); setLogsFormat(newLogs); } } else { @@ -354,21 +343,32 @@ const LogsTable = () => { setLoading(false); }; - const pageData = logs.slice((activePage - 1) * ITEMS_PER_PAGE, activePage * ITEMS_PER_PAGE); + const pageData = logs.slice((activePage - 1) * pageSize, activePage * pageSize); const handlePageChange = page => { setActivePage(page); - if (page === Math.ceil(logs.length / ITEMS_PER_PAGE) + 1) { + if (page === Math.ceil(logs.length / pageSize) + 1) { // In this case we have to load more data and then append them. - loadLogs(page - 1).then(r => { + loadLogs(page - 1, pageSize).then(r => { }); } }; + const handlePageSizeChange = async (size) => { + localStorage.setItem('page-size', size + '') + setPageSize(size) + setActivePage(1) + loadLogs(0, size) + .then() + .catch((reason) => { + showError(reason); + }) + }; + const refresh = async () => { // setLoading(true); setActivePage(1); - await loadLogs(0); + await loadLogs(0, pageSize); }; const copyText = async (text) => { @@ -380,14 +380,25 @@ const LogsTable = () => { } } + // useEffect(() => { + // refresh().then(); + // }, [logType]); + useEffect(() => { - refresh().then(); - }, [logType]); + // console.log('default effect') + const localPageSize = parseInt(localStorage.getItem('page-size')) || ITEMS_PER_PAGE; + setPageSize(localPageSize) + loadLogs(0, localPageSize) + .then() + .catch((reason) => { + showError(reason); + }); + }, []); const searchLogs = async () => { if (searchKeyword === '') { // if keyword is blank, load files instead. - await loadLogs(0); + await loadLogs(0, pageSize); setActivePage(1); return; } @@ -403,39 +414,16 @@ const LogsTable = () => { setSearching(false); }; - const handleKeywordChange = async (e, {value}) => { - setSearchKeyword(value.trim()); - }; - - const sortLog = (key) => { - if (logs.length === 0) return; - setLoading(true); - let sortedLogs = [...logs]; - if (typeof sortedLogs[0][key] === 'string') { - sortedLogs.sort((a, b) => { - return ('' + a[key]).localeCompare(b[key]); - }); - } else { - sortedLogs.sort((a, b) => { - if (a[key] === b[key]) return 0; - if (a[key] > b[key]) return -1; - if (a[key] < b[key]) return 1; - }); - } - if (sortedLogs[0].id === logs[0].id) { - sortedLogs.reverse(); - } - setLogs(sortedLogs); - setLoading(false); - }; - return ( <>

使用明细（总消耗额度： - {showStat?renderQuota(stat.quota):"点击查看"} + {showStat ? renderQuota(stat.quota) : "点击查看"} ）

@@ -477,9 +465,13 @@ const LogsTable = () => { { + handlePageSizeChange(size).then() + }, onPageChange: handlePageChange, }}/>