diff --git a/src/pages/usage/components/breakdown-tabs.tsx b/src/pages/usage/components/breakdown-tabs.tsx index cafc831e..adb33cbc 100644 --- a/src/pages/usage/components/breakdown-tabs.tsx +++ b/src/pages/usage/components/breakdown-tabs.tsx @@ -1,3 +1,4 @@ +import { useIntl } from '@umijs/max'; import { Tabs } from 'antd'; import React, { useMemo } from 'react'; import { GroupOption } from '../config'; @@ -23,6 +24,7 @@ const BreakdownTabs: React.FC<{ api_keys?: FilterOptionType[]; }; }> = ({ filters, dateRange, scope, refreshKey = 0 }) => { + const intl = useIntl(); const models = filters.models || EMPTY_FILTERS; const users = filters.users || EMPTY_FILTERS; const apiKeys = filters.api_keys || EMPTY_FILTERS; @@ -31,7 +33,7 @@ const BreakdownTabs: React.FC<{ return [ { key: 'models', - label: 'Models', + label: intl.formatMessage({ id: 'usage.tabs.models' }), forceRender: true, children: ( ({ - page: 1, - perPage: 100 - }); + }>(INITIAL_PAGE_PARAMS); const { fetchData: fetchExportData, @@ -62,8 +66,6 @@ const ExportData: React.FC<{ key: 'exportTableData' }); - console.log('initialState========', initialState); - const { filters, commonFilters, filterBar } = useUsageFilters({ initialScope: initialScope, metaData, @@ -234,8 +236,9 @@ const ExportData: React.FC<{ useEffect(() => { if (open) { + setPageParams(INITIAL_PAGE_PARAMS); fetchExportData({ - ...pageParams, + ...INITIAL_PAGE_PARAMS, granularity, group_by: ['date', 'user', 'model', 'api_key'], filters, @@ -248,8 +251,6 @@ const ExportData: React.FC<{ } }, [open]); - console.log('export dataSource', filterBar); - return ( = (props) => { handlePickerChange(picker); }; + const rangePickerValue: [dayjs.Dayjs, dayjs.Dayjs] = + startDate && endDate + ? normalizeRangeValue(startDate, endDate, picker) + : [dayjs().add(-DefaultDateConfig.defaultRange, 'd'), dayjs()]; + const renderFooter = () => { return ( = (props) => {
{ + const { + activeModels: initialActiveModels = [], + activeApiKeys: initialActiveApiKeys = [], + users: initialUsers = [], + start_date = '', + end_date = '' + } = initialState || {}; const { detailData: timeSeriesData, loading, fetchData: fetchTimeSeriesData } = useQueryTimeSeriesData(); + + const extractSelectedValues = (value: ValueType[][] = []) => + value.map((item) => { + if (Array.isArray(item)) { + return item[item.length - 1] as string; + } + + return item as string; + }); + const [commonFilters, setCommonFilters] = useState({ scope: initialScope, - models: [] as string[], - users: [] as string[], - api_keys: [] as string[], - start_date: dayjs() - .subtract(DefaultDateConfig.defaultRange, 'days') - .format('YYYY-MM-DD'), - end_date: dayjs().format('YYYY-MM-DD') + models: extractSelectedValues(initialActiveModels), + users: initialUsers || [], + api_keys: extractSelectedValues(initialActiveApiKeys), + start_date: + start_date || + dayjs() + .subtract(DefaultDateConfig.defaultRange, 'days') + .format('YYYY-MM-DD'), + end_date: end_date || dayjs().format('YYYY-MM-DD') }); const modelOptions = metaData?.models || []; @@ -98,6 +116,36 @@ export const useUsageFilters = ({ const [activeApiKeys, setActiveApiKeys] = useState(initialActiveApiKeys); + useEffect(() => { + if (!initialState) { + return; + } + + setActiveModels(initialActiveModels); + setActiveApiKeys(initialActiveApiKeys); + setCommonFilters((prev) => ({ + ...prev, + scope: initialScope, + models: extractSelectedValues(initialActiveModels), + users: initialUsers || [], + api_keys: extractSelectedValues(initialActiveApiKeys), + start_date: + start_date || + dayjs() + .subtract(DefaultDateConfig.defaultRange, 'days') + .format('YYYY-MM-DD'), + end_date: end_date || dayjs().format('YYYY-MM-DD') + })); + }, [ + end_date, + initialActiveApiKeys, + initialActiveModels, + initialUsers, + initialScope, + initialState, + start_date + ]); + const buildFilters = (selected: typeof commonFilters) => { const filters: { models?: FilterOptionType[]; diff --git a/src/pages/usage/index.tsx b/src/pages/usage/index.tsx index 45d46d60..3e991446 100644 --- a/src/pages/usage/index.tsx +++ b/src/pages/usage/index.tsx @@ -201,7 +201,10 @@ const Usage: React.FC = () => { onCancel={() => setOpenExportModal(false)} initialState={{ activeModels: filterBar.activeModels, - activeApiKeys: filterBar.activeApiKeys + activeApiKeys: filterBar.activeApiKeys, + users: commonFilters.users, + start_date: commonFilters.start_date, + end_date: commonFilters.end_date }} >