From 128f59ed6f9de0385029d6c1937bd429f88638fd Mon Sep 17 00:00:00 2001 From: jialin Date: Tue, 21 Apr 2026 14:02:13 +0800 Subject: [PATCH] chore: locales --- src/locales/en-US/usage.ts | 28 +++++++++++- src/locales/ja-JP/usage.ts | 32 ++++++++++++-- src/locales/ru-RU/usage.ts | 32 ++++++++++++-- src/locales/tr-TR/usage.ts | 32 ++++++++++++-- src/locales/zh-CN/usage.ts | 28 +++++++++++- src/pages/usage/components/daily-usage.tsx | 29 ++++++++++--- src/pages/usage/components/export-data.tsx | 40 +++++++++++------ src/pages/usage/components/filter-bar.tsx | 43 ++++++++++++++----- src/pages/usage/config/index.ts | 31 +++++-------- src/pages/usage/hooks/use-apikeys-columns.tsx | 14 +++--- src/pages/usage/hooks/use-export-table.tsx | 9 ++-- src/pages/usage/hooks/use-models-columns.tsx | 14 +++--- src/pages/usage/hooks/use-usage-filters.ts | 10 +++++ src/pages/usage/hooks/use-users-columns.tsx | 14 +++--- src/pages/usage/index.tsx | 28 ++++++------ 15 files changed, 287 insertions(+), 97 deletions(-) diff --git a/src/locales/en-US/usage.ts b/src/locales/en-US/usage.ts index 6f441f06..607b4b3d 100644 --- a/src/locales/en-US/usage.ts +++ b/src/locales/en-US/usage.ts @@ -1,5 +1,31 @@ export default { 'usage.title': 'Usage', 'usage.filter.user': 'Filter by user', - 'usage.filter.model': 'Filter by model' + 'usage.filter.model': 'Filter by model', + 'usage.filter.apikey': 'Filter by API key', + 'usage.filter.metric': 'Metric', + 'usage.filter.groupBy': 'Group by', + 'usage.filter.group.user': 'User', + 'usage.filter.group.model': 'Model', + 'usage.filter.group.apikey': 'API Key', + 'usage.filter.inputTokens': 'Input Tokens', + 'usage.filter.outputTokens': 'Output Tokens', + 'usage.filter.totalTokens': 'Total Tokens', + 'usage.filter.apiRequests': 'API Requests', + 'usage.filter.modelsUsed': 'Models Used', + 'usage.table.user.modelsUsed': 'Models Used', + 'usage.table.user.apiKeysUsed': 'API Keys Used', + 'usage.table.lastActive': 'Last Active', + 'usage.filter.granularity': 'Granularity', + 'usage.filter.granularity.day': 'Day', + 'usage.filter.granularity.week': 'Week', + 'usage.filter.granularity.month': 'Month', + 'usage.tabs.models': 'Models', + 'usage.tabs.apikeys': 'API Keys', + 'usage.tabs.users': 'User', + 'usage.export.chart': 'Export Chart Data', + 'usage.export.table': 'Export Table Data', + 'usage.user.currentAccount': 'Current Account', + 'usage.table.cluster': 'Cluster', + 'usage.table.provider': 'Provider' }; diff --git a/src/locales/ja-JP/usage.ts b/src/locales/ja-JP/usage.ts index 05ec1ba9..607b4b3d 100644 --- a/src/locales/ja-JP/usage.ts +++ b/src/locales/ja-JP/usage.ts @@ -1,5 +1,31 @@ export default { - 'usage.title': '使用状況', - 'usage.filter.user': 'ユーザーでフィルタ', - 'usage.filter.model': 'モデルでフィルタ' + 'usage.title': 'Usage', + 'usage.filter.user': 'Filter by user', + 'usage.filter.model': 'Filter by model', + 'usage.filter.apikey': 'Filter by API key', + 'usage.filter.metric': 'Metric', + 'usage.filter.groupBy': 'Group by', + 'usage.filter.group.user': 'User', + 'usage.filter.group.model': 'Model', + 'usage.filter.group.apikey': 'API Key', + 'usage.filter.inputTokens': 'Input Tokens', + 'usage.filter.outputTokens': 'Output Tokens', + 'usage.filter.totalTokens': 'Total Tokens', + 'usage.filter.apiRequests': 'API Requests', + 'usage.filter.modelsUsed': 'Models Used', + 'usage.table.user.modelsUsed': 'Models Used', + 'usage.table.user.apiKeysUsed': 'API Keys Used', + 'usage.table.lastActive': 'Last Active', + 'usage.filter.granularity': 'Granularity', + 'usage.filter.granularity.day': 'Day', + 'usage.filter.granularity.week': 'Week', + 'usage.filter.granularity.month': 'Month', + 'usage.tabs.models': 'Models', + 'usage.tabs.apikeys': 'API Keys', + 'usage.tabs.users': 'User', + 'usage.export.chart': 'Export Chart Data', + 'usage.export.table': 'Export Table Data', + 'usage.user.currentAccount': 'Current Account', + 'usage.table.cluster': 'Cluster', + 'usage.table.provider': 'Provider' }; diff --git a/src/locales/ru-RU/usage.ts b/src/locales/ru-RU/usage.ts index a2d6d4c0..607b4b3d 100644 --- a/src/locales/ru-RU/usage.ts +++ b/src/locales/ru-RU/usage.ts @@ -1,5 +1,31 @@ export default { - 'usage.title': 'Использование', - 'usage.filter.user': 'Фильтр по пользователю', - 'usage.filter.model': 'Фильтр по модели' + 'usage.title': 'Usage', + 'usage.filter.user': 'Filter by user', + 'usage.filter.model': 'Filter by model', + 'usage.filter.apikey': 'Filter by API key', + 'usage.filter.metric': 'Metric', + 'usage.filter.groupBy': 'Group by', + 'usage.filter.group.user': 'User', + 'usage.filter.group.model': 'Model', + 'usage.filter.group.apikey': 'API Key', + 'usage.filter.inputTokens': 'Input Tokens', + 'usage.filter.outputTokens': 'Output Tokens', + 'usage.filter.totalTokens': 'Total Tokens', + 'usage.filter.apiRequests': 'API Requests', + 'usage.filter.modelsUsed': 'Models Used', + 'usage.table.user.modelsUsed': 'Models Used', + 'usage.table.user.apiKeysUsed': 'API Keys Used', + 'usage.table.lastActive': 'Last Active', + 'usage.filter.granularity': 'Granularity', + 'usage.filter.granularity.day': 'Day', + 'usage.filter.granularity.week': 'Week', + 'usage.filter.granularity.month': 'Month', + 'usage.tabs.models': 'Models', + 'usage.tabs.apikeys': 'API Keys', + 'usage.tabs.users': 'User', + 'usage.export.chart': 'Export Chart Data', + 'usage.export.table': 'Export Table Data', + 'usage.user.currentAccount': 'Current Account', + 'usage.table.cluster': 'Cluster', + 'usage.table.provider': 'Provider' }; diff --git a/src/locales/tr-TR/usage.ts b/src/locales/tr-TR/usage.ts index 00453686..607b4b3d 100644 --- a/src/locales/tr-TR/usage.ts +++ b/src/locales/tr-TR/usage.ts @@ -1,5 +1,31 @@ export default { - 'usage.title': 'Kullanım', - 'usage.filter.user': 'Kullanıcıya göre filtrele', - 'usage.filter.model': 'Modele göre filtrele' + 'usage.title': 'Usage', + 'usage.filter.user': 'Filter by user', + 'usage.filter.model': 'Filter by model', + 'usage.filter.apikey': 'Filter by API key', + 'usage.filter.metric': 'Metric', + 'usage.filter.groupBy': 'Group by', + 'usage.filter.group.user': 'User', + 'usage.filter.group.model': 'Model', + 'usage.filter.group.apikey': 'API Key', + 'usage.filter.inputTokens': 'Input Tokens', + 'usage.filter.outputTokens': 'Output Tokens', + 'usage.filter.totalTokens': 'Total Tokens', + 'usage.filter.apiRequests': 'API Requests', + 'usage.filter.modelsUsed': 'Models Used', + 'usage.table.user.modelsUsed': 'Models Used', + 'usage.table.user.apiKeysUsed': 'API Keys Used', + 'usage.table.lastActive': 'Last Active', + 'usage.filter.granularity': 'Granularity', + 'usage.filter.granularity.day': 'Day', + 'usage.filter.granularity.week': 'Week', + 'usage.filter.granularity.month': 'Month', + 'usage.tabs.models': 'Models', + 'usage.tabs.apikeys': 'API Keys', + 'usage.tabs.users': 'User', + 'usage.export.chart': 'Export Chart Data', + 'usage.export.table': 'Export Table Data', + 'usage.user.currentAccount': 'Current Account', + 'usage.table.cluster': 'Cluster', + 'usage.table.provider': 'Provider' }; diff --git a/src/locales/zh-CN/usage.ts b/src/locales/zh-CN/usage.ts index 976a48f0..3d48e851 100644 --- a/src/locales/zh-CN/usage.ts +++ b/src/locales/zh-CN/usage.ts @@ -1,5 +1,31 @@ export default { 'usage.title': '使用量', 'usage.filter.user': '按用户查询', - 'usage.filter.model': '按模型查询' + 'usage.filter.model': '按模型查询', + 'usage.filter.apikey': '按 API 密钥查询', + 'usage.filter.metric': '指标', + 'usage.filter.groupBy': '分组', + 'usage.filter.group.user': '用户', + 'usage.filter.group.model': '模型', + 'usage.filter.group.apikey': 'API 密钥', + 'usage.filter.inputTokens': '输入 Token 数', + 'usage.filter.outputTokens': '输出 Token 数', + 'usage.filter.totalTokens': '总 Token 数', + 'usage.filter.apiRequests': 'API 请求数', + 'usage.filter.modelsUsed': '使用的模型数', + 'usage.table.user.modelsUsed': '使用的模型', + 'usage.table.user.apiKeysUsed': '使用的 API 密钥', + 'usage.table.lastActive': '最后活跃时间', + 'usage.filter.granularity': '粒度', + 'usage.filter.granularity.day': '按天', + 'usage.filter.granularity.week': '按周', + 'usage.filter.granularity.month': '按月', + 'usage.tabs.models': '模型', + 'usage.tabs.apikeys': 'API 密钥', + 'usage.tabs.users': '用户', + 'usage.export.chart': '导出图表数据', + 'usage.export.table': '导出表格数据', + 'usage.user.currentAccount': '当前账户', + 'usage.table.cluster': '集群', + 'usage.table.provider': '提供商' }; diff --git a/src/pages/usage/components/daily-usage.tsx b/src/pages/usage/components/daily-usage.tsx index 92eda4ee..a941d4c6 100644 --- a/src/pages/usage/components/daily-usage.tsx +++ b/src/pages/usage/components/daily-usage.tsx @@ -2,6 +2,7 @@ import CardWrapper from '@/components/card-wrapper'; import MixLineBar from '@/components/echarts/mix-line-bar'; import BaseSelect from '@/components/seal-form/base/select'; import { baseColorMap } from '@/pages/dashboard/config'; +import { useIntl } from '@umijs/max'; import { Segmented } from 'antd'; import dayjs from 'dayjs'; import React, { useMemo } from 'react'; @@ -42,6 +43,7 @@ const labelFormatter = (v: any) => { }; const DailyUsage: React.FC = (props) => { + const intl = useIntl(); const { timeSeriesData, metric, @@ -102,8 +104,15 @@ const DailyUsage: React.FC = (props) => {
Metric} - options={metricOptions} + prefix={ + + {intl.formatMessage({ id: 'usage.filter.metric' })} + + } + options={metricOptions.map((item) => ({ + label: intl.formatMessage({ id: item.label }), + value: item.value + }))} value={metric} popupMatchSelectWidth={false} onChange={onMetricChange} @@ -113,8 +122,15 @@ const DailyUsage: React.FC = (props) => { Group by} - options={groupByOptions} + prefix={ + + {intl.formatMessage({ id: 'usage.filter.groupBy' })} + + } + options={groupByOptions.map((item) => ({ + label: intl.formatMessage({ id: item.label }), + value: item.value + }))} value={groupBy} popupMatchSelectWidth={false} onChange={handleOnGroupByChange} @@ -123,7 +139,10 @@ const DailyUsage: React.FC = (props) => {
({ + label: intl.formatMessage({ id: item.label }), + value: item.value + }))} value={granularity} onChange={onGranularityChange} > diff --git a/src/pages/usage/components/export-data.tsx b/src/pages/usage/components/export-data.tsx index b1706349..936c217e 100644 --- a/src/pages/usage/components/export-data.tsx +++ b/src/pages/usage/components/export-data.tsx @@ -23,6 +23,14 @@ const ExportData: React.FC<{ activeModels: ValueType[][]; activeApiKeys: ValueType[][]; }; + commonFilters: { + scope: string; + start_date: string; + end_date: string; + models: string[]; + users: string[]; + api_keys: string[]; + }; handlePickerChange: (picker: DateType) => void; }> = (props) => { @@ -54,6 +62,8 @@ const ExportData: React.FC<{ key: 'exportTableData' }); + console.log('initialState========', initialState); + const { filters, commonFilters, filterBar } = useUsageFilters({ initialScope: initialScope, metaData, @@ -102,7 +112,7 @@ const ExportData: React.FC<{ } }, { - title: 'Cluster', + title: intl.formatMessage({ id: 'usage.table.cluster' }), dataIndex: ['model', 'identity', 'value', 'cluster_name'], render: (text: string) => { return {text}; @@ -129,26 +139,26 @@ const ExportData: React.FC<{ } }, { - title: 'API Key', + title: intl.formatMessage({ id: 'usage.filter.group.apikey' }), dataIndex: ['api_key', 'label'], render: (text: string, record: any) => { return {text}; } }, { - title: 'Input Tokens', + title: intl.formatMessage({ id: 'usage.filter.inputTokens' }), dataIndex: 'input_tokens' }, { - title: 'Output Tokens', + title: intl.formatMessage({ id: 'usage.filter.outputTokens' }), dataIndex: 'output_tokens' }, { - title: 'Total Tokens', + title: intl.formatMessage({ id: 'usage.filter.totalTokens' }), dataIndex: 'total_tokens' }, { - title: 'API Requests', + title: intl.formatMessage({ id: 'usage.filter.apiRequests' }), dataIndex: 'api_requests' } ]; @@ -183,13 +193,19 @@ const ExportData: React.FC<{ fieldLabels: { date: intl.formatMessage({ id: 'dashboard.usage.export.date' }), user: intl.formatMessage({ id: 'dashboard.usage.export.user' }), - cluster: 'Cluster', + cluster: intl.formatMessage({ id: 'usage.table.cluster' }), model: intl.formatMessage({ id: 'dashboard.usage.export.model' }), - api_key: 'API Key', - input_tokens: 'Input Tokens', - output_tokens: 'Output Tokens', - total_tokens: 'Total Tokens', - api_requests: 'API Requests' + api_key: intl.formatMessage({ id: 'usage.table.provider' }), + input_tokens: intl.formatMessage({ + id: 'usage.filter.inputTokens' + }), + output_tokens: intl.formatMessage({ + id: 'usage.filter.outputTokens' + }), + total_tokens: intl.formatMessage({ + id: 'usage.filter.totalTokens' + }), + api_requests: intl.formatMessage({ id: 'usage.filter.apiRequests' }) }, formatMap: {} } diff --git a/src/pages/usage/components/filter-bar.tsx b/src/pages/usage/components/filter-bar.tsx index 20a2d7d5..e83c3734 100644 --- a/src/pages/usage/components/filter-bar.tsx +++ b/src/pages/usage/components/filter-bar.tsx @@ -36,16 +36,28 @@ interface FilterBarProps { modelOptions: GroupOption[]; userOptions: OptionType[]; apiKeyOptions: GroupOption[]; + activeModels: valueType[][]; + activeApiKeys: valueType[][]; handlePickerChange: (picker: DateType) => void; onScopeChange: (value: string) => void; onDateChange: (dates: any, dateStrings: [string, string]) => void; onModelsChange: (value: string[]) => void; onUsersChange: (value: string[]) => void; onApiKeysChange: (value: string[]) => void; + handleActiveModelsChange: (value: valueType[][]) => void; + handleActiveApiKeysChange: (value: valueType[][]) => void; onExport?: () => void; handleSearch?: () => void; onExportChart?: () => void; onExportTable?: () => void; + commonFilters?: { + scope: string; + start_date: string; + end_date: string; + models: string[]; + users: string[]; + api_keys: string[]; + }; } const FilterBar: React.FC = (props) => { @@ -58,6 +70,10 @@ const FilterBar: React.FC = (props) => { modelOptions, userOptions, apiKeyOptions, + activeModels, + activeApiKeys, + handleActiveModelsChange, + handleActiveApiKeysChange, handlePickerChange, onDateChange, onModelsChange, @@ -104,8 +120,8 @@ const FilterBar: React.FC = (props) => { } ] }); - const [activeModels, setActiveModels] = React.useState([]); - const [activeApiKeys, setActiveApiKeys] = React.useState([]); + // const [activeModels, setActiveModels] = React.useState([]); + // const [activeApiKeys, setActiveApiKeys] = React.useState([]); const initialInfo = useModel('@@initialState'); const { initialState } = initialInfo || {}; @@ -116,7 +132,7 @@ const FilterBar: React.FC = (props) => { label: ( - Export Chart Data + {intl.formatMessage({ id: 'usage.export.chart' })} ), onClick: onExportChart @@ -126,7 +142,7 @@ const FilterBar: React.FC = (props) => { label: ( - Export Table Data + {intl.formatMessage({ id: 'usage.export.table' })} ), onClick: onExportTable @@ -134,13 +150,14 @@ const FilterBar: React.FC = (props) => { ]; const handleOnModelsChange = (value: valueType[][], selectedOptions: any) => { - setActiveModels(value); + // setActiveModels(value); const selectedValues: string[] = value.map((item) => { if (Array.isArray(item)) { return item[item.length - 1] as string; // Get the last value in the array } return item as string; }); + handleActiveModelsChange(value); onModelsChange(selectedValues); }; @@ -148,13 +165,14 @@ const FilterBar: React.FC = (props) => { value: valueType[][], selectedOptions: any ) => { - setActiveApiKeys(value); + // setActiveApiKeys(value); const selectedValues: string[] = value.map((item) => { if (Array.isArray(item)) { return item[item.length - 1] as string; // Get the last value in the array } return item as string; }); + handleActiveApiKeysChange(value); onApiKeysChange(selectedValues); }; @@ -254,7 +272,10 @@ const FilterBar: React.FC = (props) => { {data.label} {data.isCurrent && ( - [Current Account] + + {' '} + [{intl.formatMessage({ id: 'usage.user.currentAccount' })}] + )} ); @@ -312,7 +333,7 @@ const FilterBar: React.FC = (props) => { }} maxTagCount={1} size="small" - placeholder={'Filter by model'} + placeholder={intl.formatMessage({ id: 'usage.filter.model' })} options={modelOptions} showCheckedStrategy="SHOW_CHILD" displayRender={displayRender} @@ -329,7 +350,7 @@ const FilterBar: React.FC = (props) => { showSearch mode="multiple" options={userOptions} - placeholder="Filter by user" + placeholder={intl.formatMessage({ id: 'usage.filter.user' })} styles={{ wrapper: { flex: 1, maxWidth: 240, minWidth: 150 } }} @@ -367,7 +388,7 @@ const FilterBar: React.FC = (props) => { }} maxTagCount={1} size="small" - placeholder="Filter by API key" + placeholder={intl.formatMessage({ id: 'usage.filter.apikey' })} options={apiKeyOptions} showCheckedStrategy="SHOW_CHILD" value={activeApiKeys} @@ -384,7 +405,7 @@ const FilterBar: React.FC = (props) => { mode="multiple" options={apiKeyOptions?.[0]?.children || []} maxTagCount={0} - placeholder="Filter by API key" + placeholder={intl.formatMessage({ id: 'usage.filter.apikey' })} styles={{ wrapper: { flex: 1, maxWidth: 240, minWidth: 100 } }} diff --git a/src/pages/usage/config/index.ts b/src/pages/usage/config/index.ts index b11b30de..c285731e 100644 --- a/src/pages/usage/config/index.ts +++ b/src/pages/usage/config/index.ts @@ -7,60 +7,49 @@ export const groupByOptions = [ // }, { value: 'model', - label: 'Model' + label: 'usage.filter.group.model' }, { value: 'user', - label: 'User' + label: 'usage.filter.group.user' }, { value: 'api_key', - label: 'API Key' + label: 'usage.filter.group.apikey' } ]; export const granularities = [ { value: 'day', - label: 'Day' + label: 'usage.filter.granularity.day' }, { value: 'week', - label: 'Week' + label: 'usage.filter.granularity.week' }, { value: 'month', - label: 'Month' + label: 'usage.filter.granularity.month' } ]; export const metricOptions = [ { value: 'input_tokens', - label: 'Input Tokens' + label: 'usage.filter.inputTokens' }, { value: 'output_tokens', - label: 'Output Tokens' + label: 'usage.filter.outputTokens' }, { value: 'total_tokens', - label: 'Total Tokens' + label: 'usage.filter.totalTokens' }, { value: 'api_requests', - label: 'API Requests' - } -]; - -export const scopeOptions = [ - { - value: 'all', - label: 'All Users' - }, - { - value: 'self', - label: 'My Usage' + label: 'usage.filter.apiRequests' } ]; diff --git a/src/pages/usage/hooks/use-apikeys-columns.tsx b/src/pages/usage/hooks/use-apikeys-columns.tsx index fa796f40..27234c5d 100644 --- a/src/pages/usage/hooks/use-apikeys-columns.tsx +++ b/src/pages/usage/hooks/use-apikeys-columns.tsx @@ -28,7 +28,7 @@ const useModelsColumns = (): Array<{ ) }, { - title: 'User', + title: intl.formatMessage({ id: 'usage.tabs.users' }), dataIndex: ['api_key', 'identity', 'value', 'user_name'], key: 'user_name', render: (text: string, record: ListItem) => ( @@ -38,7 +38,7 @@ const useModelsColumns = (): Array<{ ) }, { - title: 'Models Used', + title: intl.formatMessage({ id: 'usage.filter.modelsUsed' }), dataIndex: 'models_called', key: 'models_called', sorter: tableSorter(2), @@ -47,7 +47,7 @@ const useModelsColumns = (): Array<{ ) }, { - title: 'Input Tokens', + title: intl.formatMessage({ id: 'usage.filter.inputTokens' }), dataIndex: 'input_tokens', key: 'input_tokens', render: (text: string[], record: ListItem) => ( @@ -55,7 +55,7 @@ const useModelsColumns = (): Array<{ ) }, { - title: 'Output Tokens', + title: intl.formatMessage({ id: 'usage.filter.outputTokens' }), dataIndex: 'output_tokens', key: 'output_tokens', render: (text: string[], record: ListItem) => ( @@ -63,7 +63,7 @@ const useModelsColumns = (): Array<{ ) }, { - title: 'Total Tokens', + title: intl.formatMessage({ id: 'usage.filter.totalTokens' }), dataIndex: 'total_tokens', key: 'total_tokens', sorter: tableSorter(3), @@ -73,7 +73,7 @@ const useModelsColumns = (): Array<{ render: (text: number) => {text} }, { - title: 'API Requests', + title: intl.formatMessage({ id: 'usage.filter.apiRequests' }), dataIndex: 'api_requests', key: 'api_requests', sorter: tableSorter(3), @@ -83,7 +83,7 @@ const useModelsColumns = (): Array<{ render: (text: number) => {text} }, { - title: 'Last Active', + title: intl.formatMessage({ id: 'usage.table.lastActive' }), dataIndex: 'last_active', key: 'last_active', sorter: tableSorter(3), diff --git a/src/pages/usage/hooks/use-export-table.tsx b/src/pages/usage/hooks/use-export-table.tsx index ac27c169..c5df062d 100644 --- a/src/pages/usage/hooks/use-export-table.tsx +++ b/src/pages/usage/hooks/use-export-table.tsx @@ -5,6 +5,7 @@ import { } from '@/atoms/usage'; import { exportJsonToExcel } from '@/utils/excel-reader'; import { useStore } from 'jotai'; +import _ from 'lodash'; import useAPIKeysColumns from './use-apikeys-columns'; import useModelsColumns from './use-models-columns'; import useUsersColumns from './use-users-columns'; @@ -26,11 +27,11 @@ const useExportTable = () => { jsonData: modelsTableData.dataList || [], sheetName: 'models', fields: modelsColumns - .map((col: any) => col.dataIndex) + .map((col: any) => _.join(col.dataIndex, '_')) .filter(Boolean) as string[], fieldLabels: modelsColumns.reduce( (map, col) => { - map[col.dataIndex] = col.title; + map[_.join(col.dataIndex, '_')] = col.title; return map; }, {} as Record @@ -45,7 +46,7 @@ const useExportTable = () => { .filter(Boolean) as string[], fieldLabels: apiKeysColumns.reduce( (map, col) => { - map[col.dataIndex] = col.title; + map[_.join(col.dataIndex, '_')] = col.title; return map; }, {} as Record @@ -60,7 +61,7 @@ const useExportTable = () => { .filter(Boolean) as string[], fieldLabels: usersColumns.reduce( (map, col) => { - map[col.dataIndex] = col.title; + map[_.join(col.dataIndex, '_')] = col.title; return map; }, {} as Record diff --git a/src/pages/usage/hooks/use-models-columns.tsx b/src/pages/usage/hooks/use-models-columns.tsx index 1586dfa2..00a9ec24 100644 --- a/src/pages/usage/hooks/use-models-columns.tsx +++ b/src/pages/usage/hooks/use-models-columns.tsx @@ -33,7 +33,7 @@ const useModelsColumns = (): Array<{ ) }, { - title: 'Cluster', + title: intl.formatMessage({ id: 'usage.table.cluster' }), dataIndex: ['model', 'identity', 'value', 'cluster_name'], key: 'cluster_name', sorter: tableSorter(2), @@ -42,7 +42,7 @@ const useModelsColumns = (): Array<{ ) }, { - title: 'Provider', + title: intl.formatMessage({ id: 'usage.table.provider' }), dataIndex: 'provider_name', key: 'provider_name', render: (text: string, record: ListItem) => ( @@ -57,7 +57,7 @@ const useModelsColumns = (): Array<{ ) }, { - title: 'Input Tokens', + title: intl.formatMessage({ id: 'usage.filter.inputTokens' }), dataIndex: 'input_tokens', key: 'input_tokens', render: (text: string[], record: ListItem) => ( @@ -65,7 +65,7 @@ const useModelsColumns = (): Array<{ ) }, { - title: 'Output Tokens', + title: intl.formatMessage({ id: 'usage.filter.outputTokens' }), dataIndex: 'output_tokens', key: 'output_tokens', render: (text: string[], record: ListItem) => ( @@ -73,7 +73,7 @@ const useModelsColumns = (): Array<{ ) }, { - title: 'Total Tokens', + title: intl.formatMessage({ id: 'usage.filter.totalTokens' }), dataIndex: 'total_tokens', key: 'total_tokens', sorter: tableSorter(3), @@ -83,7 +83,7 @@ const useModelsColumns = (): Array<{ render: (text: number) => {text} }, { - title: 'API Requests', + title: intl.formatMessage({ id: 'usage.filter.apiRequests' }), dataIndex: 'api_requests', key: 'api_requests', sorter: tableSorter(3), @@ -93,7 +93,7 @@ const useModelsColumns = (): Array<{ render: (text: number) => {text} }, { - title: 'Last Active', + title: intl.formatMessage({ id: 'usage.table.lastActive' }), dataIndex: 'last_active', key: 'last_active', sorter: tableSorter(3), diff --git a/src/pages/usage/hooks/use-usage-filters.ts b/src/pages/usage/hooks/use-usage-filters.ts index 51014685..914d30cf 100644 --- a/src/pages/usage/hooks/use-usage-filters.ts +++ b/src/pages/usage/hooks/use-usage-filters.ts @@ -184,6 +184,14 @@ export const useUsageFilters = ({ } }; + const handleActiveModelsChange = (value: ValueType[][]) => { + setActiveModels(value); + }; + + const handleActiveApiKeysChange = (value: ValueType[][]) => { + setActiveApiKeys(value); + }; + const handleFilterChange = ( type: 'models' | 'users' | 'api_keys', value: string[] @@ -248,6 +256,8 @@ export const useUsageFilters = ({ activeApiKeys, activeModels, handleSearch, + handleActiveModelsChange, + handleActiveApiKeysChange, onScopeChange: handleScopeChange, onDateChange: handleDateChange, onModelsChange: (value: string[]) => handleFilterChange('models', value), diff --git a/src/pages/usage/hooks/use-users-columns.tsx b/src/pages/usage/hooks/use-users-columns.tsx index 704a2b8e..61b54d94 100644 --- a/src/pages/usage/hooks/use-users-columns.tsx +++ b/src/pages/usage/hooks/use-users-columns.tsx @@ -32,7 +32,7 @@ const useModelsColumns = (): Array<{ ) }, { - title: 'Models Used', + title: intl.formatMessage({ id: 'usage.filter.modelsUsed' }), dataIndex: 'models_called', key: 'models_called', render: (text: string, record: ListItem) => ( @@ -42,7 +42,7 @@ const useModelsColumns = (): Array<{ ) }, { - title: 'API Keys Used', + title: intl.formatMessage({ id: 'usage.table.user.apiKeysUsed' }), dataIndex: 'api_keys_used', key: 'api_keys_used', sorter: tableSorter(2), @@ -51,7 +51,7 @@ const useModelsColumns = (): Array<{ ) }, { - title: 'Input Tokens', + title: intl.formatMessage({ id: 'usage.filter.inputTokens' }), dataIndex: 'input_tokens', key: 'input_tokens', render: (text: string[], record: ListItem) => ( @@ -59,7 +59,7 @@ const useModelsColumns = (): Array<{ ) }, { - title: 'Output Tokens', + title: intl.formatMessage({ id: 'usage.filter.outputTokens' }), dataIndex: 'output_tokens', key: 'output_tokens', render: (text: string[], record: ListItem) => ( @@ -67,7 +67,7 @@ const useModelsColumns = (): Array<{ ) }, { - title: 'Total Tokens', + title: intl.formatMessage({ id: 'usage.filter.totalTokens' }), dataIndex: 'total_tokens', key: 'total_tokens', sorter: tableSorter(3), @@ -77,7 +77,7 @@ const useModelsColumns = (): Array<{ render: (text: number) => {text} }, { - title: 'API Requests', + title: intl.formatMessage({ id: 'usage.filter.apiRequests' }), dataIndex: 'api_requests', key: 'api_requests', sorter: tableSorter(3), @@ -87,7 +87,7 @@ const useModelsColumns = (): Array<{ render: (text: number) => {text} }, { - title: 'Last Active', + title: intl.formatMessage({ id: 'usage.table.lastActive' }), dataIndex: 'last_active', key: 'last_active', sorter: tableSorter(3), diff --git a/src/pages/usage/index.tsx b/src/pages/usage/index.tsx index 889dadcf..45d46d60 100644 --- a/src/pages/usage/index.tsx +++ b/src/pages/usage/index.tsx @@ -2,6 +2,7 @@ import { SimpleCard } from '@/components/card-wrapper/simple-card'; import { baseColorMap } from '@/pages/dashboard/config'; import { formatLargeNumber } from '@/utils'; import { useModel } from '@@/plugin-model'; +import { useIntl } from '@umijs/max'; import React, { useEffect, useMemo, useState } from 'react'; import BreakdownTabs from './components/breakdown-tabs'; import DailyUsage from './components/daily-usage'; @@ -14,6 +15,7 @@ import useQueryUsageMetaData from './services/use-query-meta-data'; type DateType = 'date' | 'week' | 'month' | 'quarter' | 'year'; const Usage: React.FC = () => { + const intl = useIntl(); const initialInfo = useModel('@@initialState'); const { initialState } = initialInfo || {}; const { exportTable } = useExportTable(); @@ -22,27 +24,27 @@ const Usage: React.FC = () => { const summaryColumns = [ { - title: 'Input Tokens', + title: intl.formatMessage({ id: 'usage.filter.inputTokens' }), dataIndex: 'input_tokens', key: 'input_tokens' }, { - title: 'Output Tokens', + title: intl.formatMessage({ id: 'usage.filter.outputTokens' }), dataIndex: 'output_tokens', key: 'output_tokens' }, { - title: 'Total Tokens', + title: intl.formatMessage({ id: 'usage.filter.totalTokens' }), dataIndex: 'total_tokens', key: 'total_tokens' }, { - title: 'API Requests', + title: intl.formatMessage({ id: 'usage.filter.apiRequests' }), dataIndex: 'api_requests', key: 'api_requests' }, { - title: 'Models Used', + title: intl.formatMessage({ id: 'usage.filter.modelsUsed' }), dataIndex: 'models_called', key: 'models_called' } @@ -90,31 +92,31 @@ const Usage: React.FC = () => { return [ { label: formatLargeNumber(summary.input_tokens) as string, - value: 'Input tokens', + value: intl.formatMessage({ id: 'usage.filter.inputTokens' }), color: baseColorMap.baseR3 // iconType: 'roundRect' }, { label: formatLargeNumber(summary.output_tokens) as string, - value: 'Output tokens', + value: intl.formatMessage({ id: 'usage.filter.outputTokens' }), color: baseColorMap.base // iconType: 'roundRect' }, { label: formatLargeNumber(summary.total_tokens) as string, - value: 'Total tokens', + value: intl.formatMessage({ id: 'usage.filter.totalTokens' }), color: baseColorMap.baseL1 // iconType: 'roundRect' }, { label: formatLargeNumber(summary.api_requests) as string, - value: 'API requests', + value: intl.formatMessage({ id: 'usage.filter.apiRequests' }), color: baseColorMap.baseR1 // iconType: 'circle' }, { label: summary.models_called.toString(), - value: 'Models used', + value: intl.formatMessage({ id: 'usage.filter.modelsUsed' }), color: baseColorMap.baseR2 // iconType: 'roundRect' } @@ -176,7 +178,9 @@ const Usage: React.FC = () => { groupBy={chartFilters.group_by} granularity={chartFilters.granularity} onMetricChange={(value) => handleChartFilterChange('metric', value)} - onGroupByChange={(value) => handleChartFilterChange('group_by', value)} + onGroupByChange={(value) => + handleChartFilterChange('group_by', value as string) + } onGranularityChange={(value) => handleChartFilterChange('granularity', value) } @@ -191,7 +195,7 @@ const Usage: React.FC = () => { metaData={metaData} granularity={chartFilters.granularity} initialScope={commonFilters.scope} - initialCommonFilters={commonFilters} + commonFilters={commonFilters} open={openExportModal} handlePickerChange={handlePickerChange} onCancel={() => setOpenExportModal(false)}