|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import { useState, useEffect } from 'react'; |
|
|
import { useTranslation } from 'react-i18next'; |
|
|
import { Modal } from '@douyinfe/semi-ui'; |
|
|
import { |
|
|
API, |
|
|
getTodayStartTimestamp, |
|
|
isAdmin, |
|
|
showError, |
|
|
showSuccess, |
|
|
timestamp2string, |
|
|
renderQuota, |
|
|
renderNumber, |
|
|
getLogOther, |
|
|
copy, |
|
|
renderClaudeLogContent, |
|
|
renderLogContent, |
|
|
renderAudioModelPrice, |
|
|
renderClaudeModelPrice, |
|
|
renderModelPrice, |
|
|
} from '../../helpers'; |
|
|
import { ITEMS_PER_PAGE } from '../../constants'; |
|
|
import { useTableCompactMode } from '../common/useTableCompactMode'; |
|
|
|
|
|
export const useLogsData = () => { |
|
|
const { t } = useTranslation(); |
|
|
|
|
|
|
|
|
const COLUMN_KEYS = { |
|
|
TIME: 'time', |
|
|
CHANNEL: 'channel', |
|
|
USERNAME: 'username', |
|
|
TOKEN: 'token', |
|
|
GROUP: 'group', |
|
|
TYPE: 'type', |
|
|
MODEL: 'model', |
|
|
USE_TIME: 'use_time', |
|
|
PROMPT: 'prompt', |
|
|
COMPLETION: 'completion', |
|
|
COST: 'cost', |
|
|
RETRY: 'retry', |
|
|
IP: 'ip', |
|
|
DETAILS: 'details', |
|
|
}; |
|
|
|
|
|
|
|
|
const [logs, setLogs] = useState([]); |
|
|
const [expandData, setExpandData] = useState({}); |
|
|
const [showStat, setShowStat] = useState(false); |
|
|
const [loading, setLoading] = useState(false); |
|
|
const [loadingStat, setLoadingStat] = useState(false); |
|
|
const [activePage, setActivePage] = useState(1); |
|
|
const [logCount, setLogCount] = useState(0); |
|
|
const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE); |
|
|
const [logType, setLogType] = useState(0); |
|
|
|
|
|
|
|
|
const isAdminUser = isAdmin(); |
|
|
|
|
|
const STORAGE_KEY = isAdminUser |
|
|
? 'logs-table-columns-admin' |
|
|
: 'logs-table-columns-user'; |
|
|
|
|
|
|
|
|
const [stat, setStat] = useState({ |
|
|
quota: 0, |
|
|
token: 0, |
|
|
}); |
|
|
|
|
|
|
|
|
const [formApi, setFormApi] = useState(null); |
|
|
let now = new Date(); |
|
|
const formInitValues = { |
|
|
username: '', |
|
|
token_name: '', |
|
|
model_name: '', |
|
|
channel: '', |
|
|
group: '', |
|
|
dateRange: [ |
|
|
timestamp2string(getTodayStartTimestamp()), |
|
|
timestamp2string(now.getTime() / 1000 + 3600), |
|
|
], |
|
|
logType: '0', |
|
|
}; |
|
|
|
|
|
|
|
|
const [visibleColumns, setVisibleColumns] = useState({}); |
|
|
const [showColumnSelector, setShowColumnSelector] = useState(false); |
|
|
|
|
|
|
|
|
const [compactMode, setCompactMode] = useTableCompactMode('logs'); |
|
|
|
|
|
|
|
|
const [showUserInfo, setShowUserInfoModal] = useState(false); |
|
|
const [userInfoData, setUserInfoData] = useState(null); |
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
const savedColumns = localStorage.getItem(STORAGE_KEY); |
|
|
if (savedColumns) { |
|
|
try { |
|
|
const parsed = JSON.parse(savedColumns); |
|
|
const defaults = getDefaultColumnVisibility(); |
|
|
const merged = { ...defaults, ...parsed }; |
|
|
|
|
|
|
|
|
if (!isAdminUser) { |
|
|
merged[COLUMN_KEYS.CHANNEL] = false; |
|
|
merged[COLUMN_KEYS.USERNAME] = false; |
|
|
merged[COLUMN_KEYS.RETRY] = false; |
|
|
} |
|
|
setVisibleColumns(merged); |
|
|
} catch (e) { |
|
|
console.error('Failed to parse saved column preferences', e); |
|
|
initDefaultColumns(); |
|
|
} |
|
|
} else { |
|
|
initDefaultColumns(); |
|
|
} |
|
|
}, []); |
|
|
|
|
|
|
|
|
const getDefaultColumnVisibility = () => { |
|
|
return { |
|
|
[COLUMN_KEYS.TIME]: true, |
|
|
[COLUMN_KEYS.CHANNEL]: isAdminUser, |
|
|
[COLUMN_KEYS.USERNAME]: isAdminUser, |
|
|
[COLUMN_KEYS.TOKEN]: true, |
|
|
[COLUMN_KEYS.GROUP]: true, |
|
|
[COLUMN_KEYS.TYPE]: true, |
|
|
[COLUMN_KEYS.MODEL]: true, |
|
|
[COLUMN_KEYS.USE_TIME]: true, |
|
|
[COLUMN_KEYS.PROMPT]: true, |
|
|
[COLUMN_KEYS.COMPLETION]: true, |
|
|
[COLUMN_KEYS.COST]: true, |
|
|
[COLUMN_KEYS.RETRY]: isAdminUser, |
|
|
[COLUMN_KEYS.IP]: true, |
|
|
[COLUMN_KEYS.DETAILS]: true, |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const initDefaultColumns = () => { |
|
|
const defaults = getDefaultColumnVisibility(); |
|
|
setVisibleColumns(defaults); |
|
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(defaults)); |
|
|
}; |
|
|
|
|
|
|
|
|
const handleColumnVisibilityChange = (columnKey, checked) => { |
|
|
const updatedColumns = { ...visibleColumns, [columnKey]: checked }; |
|
|
setVisibleColumns(updatedColumns); |
|
|
}; |
|
|
|
|
|
|
|
|
const handleSelectAll = (checked) => { |
|
|
const allKeys = Object.keys(COLUMN_KEYS).map((key) => COLUMN_KEYS[key]); |
|
|
const updatedColumns = {}; |
|
|
|
|
|
allKeys.forEach((key) => { |
|
|
if ( |
|
|
(key === COLUMN_KEYS.CHANNEL || |
|
|
key === COLUMN_KEYS.USERNAME || |
|
|
key === COLUMN_KEYS.RETRY) && |
|
|
!isAdminUser |
|
|
) { |
|
|
updatedColumns[key] = false; |
|
|
} else { |
|
|
updatedColumns[key] = checked; |
|
|
} |
|
|
}); |
|
|
|
|
|
setVisibleColumns(updatedColumns); |
|
|
}; |
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
if (Object.keys(visibleColumns).length > 0) { |
|
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(visibleColumns)); |
|
|
} |
|
|
}, [visibleColumns]); |
|
|
|
|
|
|
|
|
const getFormValues = () => { |
|
|
const formValues = formApi ? formApi.getValues() : {}; |
|
|
|
|
|
let start_timestamp = timestamp2string(getTodayStartTimestamp()); |
|
|
let end_timestamp = timestamp2string(now.getTime() / 1000 + 3600); |
|
|
|
|
|
if ( |
|
|
formValues.dateRange && |
|
|
Array.isArray(formValues.dateRange) && |
|
|
formValues.dateRange.length === 2 |
|
|
) { |
|
|
start_timestamp = formValues.dateRange[0]; |
|
|
end_timestamp = formValues.dateRange[1]; |
|
|
} |
|
|
|
|
|
return { |
|
|
username: formValues.username || '', |
|
|
token_name: formValues.token_name || '', |
|
|
model_name: formValues.model_name || '', |
|
|
start_timestamp, |
|
|
end_timestamp, |
|
|
channel: formValues.channel || '', |
|
|
group: formValues.group || '', |
|
|
logType: formValues.logType ? parseInt(formValues.logType) : 0, |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const getLogSelfStat = async () => { |
|
|
const { |
|
|
token_name, |
|
|
model_name, |
|
|
start_timestamp, |
|
|
end_timestamp, |
|
|
group, |
|
|
logType: formLogType, |
|
|
} = getFormValues(); |
|
|
const currentLogType = formLogType !== undefined ? formLogType : logType; |
|
|
let localStartTimestamp = Date.parse(start_timestamp) / 1000; |
|
|
let localEndTimestamp = Date.parse(end_timestamp) / 1000; |
|
|
let url = `/api/log/self/stat?type=${currentLogType}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}&group=${group}`; |
|
|
url = encodeURI(url); |
|
|
let res = await API.get(url); |
|
|
const { success, message, data } = res.data; |
|
|
if (success) { |
|
|
setStat(data); |
|
|
} else { |
|
|
showError(message); |
|
|
} |
|
|
}; |
|
|
|
|
|
const getLogStat = async () => { |
|
|
const { |
|
|
username, |
|
|
token_name, |
|
|
model_name, |
|
|
start_timestamp, |
|
|
end_timestamp, |
|
|
channel, |
|
|
group, |
|
|
logType: formLogType, |
|
|
} = getFormValues(); |
|
|
const currentLogType = formLogType !== undefined ? formLogType : logType; |
|
|
let localStartTimestamp = Date.parse(start_timestamp) / 1000; |
|
|
let localEndTimestamp = Date.parse(end_timestamp) / 1000; |
|
|
let url = `/api/log/stat?type=${currentLogType}&username=${username}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}&channel=${channel}&group=${group}`; |
|
|
url = encodeURI(url); |
|
|
let res = await API.get(url); |
|
|
const { success, message, data } = res.data; |
|
|
if (success) { |
|
|
setStat(data); |
|
|
} else { |
|
|
showError(message); |
|
|
} |
|
|
}; |
|
|
|
|
|
const handleEyeClick = async () => { |
|
|
if (loadingStat) { |
|
|
return; |
|
|
} |
|
|
setLoadingStat(true); |
|
|
if (isAdminUser) { |
|
|
await getLogStat(); |
|
|
} else { |
|
|
await getLogSelfStat(); |
|
|
} |
|
|
setShowStat(true); |
|
|
setLoadingStat(false); |
|
|
}; |
|
|
|
|
|
|
|
|
const showUserInfoFunc = async (userId) => { |
|
|
if (!isAdminUser) { |
|
|
return; |
|
|
} |
|
|
const res = await API.get(`/api/user/${userId}`); |
|
|
const { success, message, data } = res.data; |
|
|
if (success) { |
|
|
setUserInfoData(data); |
|
|
setShowUserInfoModal(true); |
|
|
} else { |
|
|
showError(message); |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const setLogsFormat = (logs) => { |
|
|
let expandDatesLocal = {}; |
|
|
for (let i = 0; i < logs.length; i++) { |
|
|
logs[i].timestamp2string = timestamp2string(logs[i].created_at); |
|
|
logs[i].key = logs[i].id; |
|
|
let other = getLogOther(logs[i].other); |
|
|
let expandDataLocal = []; |
|
|
|
|
|
if (isAdminUser && (logs[i].type === 0 || logs[i].type === 2)) { |
|
|
expandDataLocal.push({ |
|
|
key: t('渠道信息'), |
|
|
value: `${logs[i].channel} - ${logs[i].channel_name || '[未知]'}`, |
|
|
}); |
|
|
} |
|
|
if (other?.ws || other?.audio) { |
|
|
expandDataLocal.push({ |
|
|
key: t('语音输入'), |
|
|
value: other.audio_input, |
|
|
}); |
|
|
expandDataLocal.push({ |
|
|
key: t('语音输出'), |
|
|
value: other.audio_output, |
|
|
}); |
|
|
expandDataLocal.push({ |
|
|
key: t('文字输入'), |
|
|
value: other.text_input, |
|
|
}); |
|
|
expandDataLocal.push({ |
|
|
key: t('文字输出'), |
|
|
value: other.text_output, |
|
|
}); |
|
|
} |
|
|
if (other?.cache_tokens > 0) { |
|
|
expandDataLocal.push({ |
|
|
key: t('缓存 Tokens'), |
|
|
value: other.cache_tokens, |
|
|
}); |
|
|
} |
|
|
if (other?.cache_creation_tokens > 0) { |
|
|
expandDataLocal.push({ |
|
|
key: t('缓存创建 Tokens'), |
|
|
value: other.cache_creation_tokens, |
|
|
}); |
|
|
} |
|
|
if (logs[i].type === 2) { |
|
|
expandDataLocal.push({ |
|
|
key: t('日志详情'), |
|
|
value: other?.claude |
|
|
? renderClaudeLogContent( |
|
|
other?.model_ratio, |
|
|
other.completion_ratio, |
|
|
other.model_price, |
|
|
other.group_ratio, |
|
|
other?.user_group_ratio, |
|
|
other.cache_ratio || 1.0, |
|
|
other.cache_creation_ratio || 1.0, |
|
|
other.cache_creation_tokens_5m || 0, |
|
|
other.cache_creation_ratio_5m || other.cache_creation_ratio || 1.0, |
|
|
other.cache_creation_tokens_1h || 0, |
|
|
other.cache_creation_ratio_1h || other.cache_creation_ratio || 1.0, |
|
|
) |
|
|
: renderLogContent( |
|
|
other?.model_ratio, |
|
|
other.completion_ratio, |
|
|
other.model_price, |
|
|
other.group_ratio, |
|
|
other?.user_group_ratio, |
|
|
other.cache_ratio || 1.0, |
|
|
false, |
|
|
1.0, |
|
|
other.web_search || false, |
|
|
other.web_search_call_count || 0, |
|
|
other.file_search || false, |
|
|
other.file_search_call_count || 0, |
|
|
), |
|
|
}); |
|
|
if (logs[i]?.content) { |
|
|
expandDataLocal.push({ |
|
|
key: t('其他详情'), |
|
|
value: logs[i].content, |
|
|
}); |
|
|
} |
|
|
} |
|
|
if (logs[i].type === 2) { |
|
|
let modelMapped = |
|
|
other?.is_model_mapped && |
|
|
other?.upstream_model_name && |
|
|
other?.upstream_model_name !== ''; |
|
|
if (modelMapped) { |
|
|
expandDataLocal.push({ |
|
|
key: t('请求并计费模型'), |
|
|
value: logs[i].model_name, |
|
|
}); |
|
|
expandDataLocal.push({ |
|
|
key: t('实际模型'), |
|
|
value: other.upstream_model_name, |
|
|
}); |
|
|
} |
|
|
let content = ''; |
|
|
if (other?.ws || other?.audio) { |
|
|
content = renderAudioModelPrice( |
|
|
other?.text_input, |
|
|
other?.text_output, |
|
|
other?.model_ratio, |
|
|
other?.model_price, |
|
|
other?.completion_ratio, |
|
|
other?.audio_input, |
|
|
other?.audio_output, |
|
|
other?.audio_ratio, |
|
|
other?.audio_completion_ratio, |
|
|
other?.group_ratio, |
|
|
other?.user_group_ratio, |
|
|
other?.cache_tokens || 0, |
|
|
other?.cache_ratio || 1.0, |
|
|
); |
|
|
} else if (other?.claude) { |
|
|
content = renderClaudeModelPrice( |
|
|
logs[i].prompt_tokens, |
|
|
logs[i].completion_tokens, |
|
|
other.model_ratio, |
|
|
other.model_price, |
|
|
other.completion_ratio, |
|
|
other.group_ratio, |
|
|
other?.user_group_ratio, |
|
|
other.cache_tokens || 0, |
|
|
other.cache_ratio || 1.0, |
|
|
other.cache_creation_tokens || 0, |
|
|
other.cache_creation_ratio || 1.0, |
|
|
other.cache_creation_tokens_5m || 0, |
|
|
other.cache_creation_ratio_5m || other.cache_creation_ratio || 1.0, |
|
|
other.cache_creation_tokens_1h || 0, |
|
|
other.cache_creation_ratio_1h || other.cache_creation_ratio || 1.0, |
|
|
); |
|
|
} else { |
|
|
content = renderModelPrice( |
|
|
logs[i].prompt_tokens, |
|
|
logs[i].completion_tokens, |
|
|
other?.model_ratio, |
|
|
other?.model_price, |
|
|
other?.completion_ratio, |
|
|
other?.group_ratio, |
|
|
other?.user_group_ratio, |
|
|
other?.cache_tokens || 0, |
|
|
other?.cache_ratio || 1.0, |
|
|
other?.image || false, |
|
|
other?.image_ratio || 0, |
|
|
other?.image_output || 0, |
|
|
other?.web_search || false, |
|
|
other?.web_search_call_count || 0, |
|
|
other?.web_search_price || 0, |
|
|
other?.file_search || false, |
|
|
other?.file_search_call_count || 0, |
|
|
other?.file_search_price || 0, |
|
|
other?.audio_input_seperate_price || false, |
|
|
other?.audio_input_token_count || 0, |
|
|
other?.audio_input_price || 0, |
|
|
other?.image_generation_call || false, |
|
|
other?.image_generation_call_price || 0, |
|
|
); |
|
|
} |
|
|
expandDataLocal.push({ |
|
|
key: t('计费过程'), |
|
|
value: content, |
|
|
}); |
|
|
if (other?.reasoning_effort) { |
|
|
expandDataLocal.push({ |
|
|
key: t('Reasoning Effort'), |
|
|
value: other.reasoning_effort, |
|
|
}); |
|
|
} |
|
|
} |
|
|
if (other?.request_path) { |
|
|
expandDataLocal.push({ |
|
|
key: t('请求路径'), |
|
|
value: other.request_path, |
|
|
}); |
|
|
} |
|
|
if (isAdminUser) { |
|
|
let localCountMode = ''; |
|
|
if (other?.admin_info?.local_count_tokens) { |
|
|
localCountMode = t('本地计费'); |
|
|
} else { |
|
|
localCountMode = t('上游返回'); |
|
|
} |
|
|
expandDataLocal.push({ |
|
|
key: t('计费模式'), |
|
|
value: localCountMode, |
|
|
}); |
|
|
} |
|
|
expandDatesLocal[logs[i].key] = expandDataLocal; |
|
|
} |
|
|
|
|
|
setExpandData(expandDatesLocal); |
|
|
setLogs(logs); |
|
|
}; |
|
|
|
|
|
|
|
|
const loadLogs = async (startIdx, pageSize, customLogType = null) => { |
|
|
setLoading(true); |
|
|
|
|
|
let url = ''; |
|
|
const { |
|
|
username, |
|
|
token_name, |
|
|
model_name, |
|
|
start_timestamp, |
|
|
end_timestamp, |
|
|
channel, |
|
|
group, |
|
|
logType: formLogType, |
|
|
} = getFormValues(); |
|
|
|
|
|
const currentLogType = |
|
|
customLogType !== null |
|
|
? customLogType |
|
|
: formLogType !== undefined |
|
|
? formLogType |
|
|
: logType; |
|
|
|
|
|
let localStartTimestamp = Date.parse(start_timestamp) / 1000; |
|
|
let localEndTimestamp = Date.parse(end_timestamp) / 1000; |
|
|
if (isAdminUser) { |
|
|
url = `/api/log/?p=${startIdx}&page_size=${pageSize}&type=${currentLogType}&username=${username}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}&channel=${channel}&group=${group}`; |
|
|
} else { |
|
|
url = `/api/log/self/?p=${startIdx}&page_size=${pageSize}&type=${currentLogType}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}&group=${group}`; |
|
|
} |
|
|
url = encodeURI(url); |
|
|
const res = await API.get(url); |
|
|
const { success, message, data } = res.data; |
|
|
if (success) { |
|
|
const newPageData = data.items; |
|
|
setActivePage(data.page); |
|
|
setPageSize(data.page_size); |
|
|
setLogCount(data.total); |
|
|
|
|
|
setLogsFormat(newPageData); |
|
|
} else { |
|
|
showError(message); |
|
|
} |
|
|
setLoading(false); |
|
|
}; |
|
|
|
|
|
|
|
|
const handlePageChange = (page) => { |
|
|
setActivePage(page); |
|
|
loadLogs(page, pageSize).then((r) => {}); |
|
|
}; |
|
|
|
|
|
const handlePageSizeChange = async (size) => { |
|
|
localStorage.setItem('page-size', size + ''); |
|
|
setPageSize(size); |
|
|
setActivePage(1); |
|
|
loadLogs(activePage, size) |
|
|
.then() |
|
|
.catch((reason) => { |
|
|
showError(reason); |
|
|
}); |
|
|
}; |
|
|
|
|
|
|
|
|
const refresh = async () => { |
|
|
setActivePage(1); |
|
|
handleEyeClick(); |
|
|
await loadLogs(1, pageSize); |
|
|
}; |
|
|
|
|
|
|
|
|
const copyText = async (e, text) => { |
|
|
e.stopPropagation(); |
|
|
if (await copy(text)) { |
|
|
showSuccess('已复制:' + text); |
|
|
} else { |
|
|
Modal.error({ title: t('无法复制到剪贴板,请手动复制'), content: text }); |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
const localPageSize = |
|
|
parseInt(localStorage.getItem('page-size')) || ITEMS_PER_PAGE; |
|
|
setPageSize(localPageSize); |
|
|
loadLogs(activePage, localPageSize) |
|
|
.then() |
|
|
.catch((reason) => { |
|
|
showError(reason); |
|
|
}); |
|
|
}, []); |
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
if (formApi) { |
|
|
handleEyeClick(); |
|
|
} |
|
|
}, [formApi]); |
|
|
|
|
|
|
|
|
const hasExpandableRows = () => { |
|
|
return logs.some( |
|
|
(log) => expandData[log.key] && expandData[log.key].length > 0, |
|
|
); |
|
|
}; |
|
|
|
|
|
return { |
|
|
|
|
|
logs, |
|
|
expandData, |
|
|
showStat, |
|
|
loading, |
|
|
loadingStat, |
|
|
activePage, |
|
|
logCount, |
|
|
pageSize, |
|
|
logType, |
|
|
stat, |
|
|
isAdminUser, |
|
|
|
|
|
|
|
|
formApi, |
|
|
setFormApi, |
|
|
formInitValues, |
|
|
getFormValues, |
|
|
|
|
|
|
|
|
visibleColumns, |
|
|
showColumnSelector, |
|
|
setShowColumnSelector, |
|
|
handleColumnVisibilityChange, |
|
|
handleSelectAll, |
|
|
initDefaultColumns, |
|
|
COLUMN_KEYS, |
|
|
|
|
|
|
|
|
compactMode, |
|
|
setCompactMode, |
|
|
|
|
|
|
|
|
showUserInfo, |
|
|
setShowUserInfoModal, |
|
|
userInfoData, |
|
|
showUserInfoFunc, |
|
|
|
|
|
|
|
|
loadLogs, |
|
|
handlePageChange, |
|
|
handlePageSizeChange, |
|
|
refresh, |
|
|
copyText, |
|
|
handleEyeClick, |
|
|
setLogsFormat, |
|
|
hasExpandableRows, |
|
|
setLogType, |
|
|
|
|
|
|
|
|
t, |
|
|
}; |
|
|
}; |
|
|
|