root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: locales

Browse Source
This commit is contained in:
jialin
2026-04-22 13:16:48 +08:00
committed by jialin
parent c92f56ec8f
commit 128f59ed6f
15 changed files with 287 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/usage/components/daily-usage.tsx
+24 -5
View File
@@ -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<DailyUsageProps> = (props) => {
const intl = useIntl();
const {
timeSeriesData,
metric,
@@ -102,8 +104,15 @@ const DailyUsage: React.FC<DailyUsageProps> = (props) => {
<div className="group">
<BaseSelect
variant="borderless"
prefix={<ControlLabel>Metric</ControlLabel>}
options={metricOptions}
prefix={
<ControlLabel>
{intl.formatMessage({ id: 'usage.filter.metric' })}
</ControlLabel>
}
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<DailyUsageProps> = (props) => {
<BaseSelect
allowClear
variant="borderless"
prefix={<ControlLabel>Group by</ControlLabel>}
options={groupByOptions}
prefix={
<ControlLabel>
{intl.formatMessage({ id: 'usage.filter.groupBy' })}
</ControlLabel>
}
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<DailyUsageProps> = (props) => {
</div>
<Segmented
size="small"
options={granularities}
options={granularities.map((item) => ({
label: intl.formatMessage({ id: item.label }),
value: item.value
}))}
value={granularity}
onChange={onGranularityChange}
></Segmented>
src/pages/usage/components/export-data.tsx
+28 -12
View File
@@ -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 <AutoTooltip ghost>{text}</AutoTooltip>;
@@ -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 <AutoTooltip ghost>{text}</AutoTooltip>;
}
},
{
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: {}
}
src/pages/usage/components/filter-bar.tsx
+32 -11
View File
@@ -36,16 +36,28 @@ interface FilterBarProps {
modelOptions: GroupOption<UsageFilterItem>[];
userOptions: OptionType[];
apiKeyOptions: GroupOption<UsageFilterItem>[];
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<FilterBarProps> = (props) => {
@@ -58,6 +70,10 @@ const FilterBar: React.FC<FilterBarProps> = (props) => {
modelOptions,
userOptions,
apiKeyOptions,
activeModels,
activeApiKeys,
handleActiveModelsChange,
handleActiveApiKeysChange,
handlePickerChange,
onDateChange,
onModelsChange,
@@ -104,8 +120,8 @@ const FilterBar: React.FC<FilterBarProps> = (props) => {
}
]
});
const [activeModels, setActiveModels] = React.useState<valueType[][]>([]);
const [activeApiKeys, setActiveApiKeys] = React.useState<valueType[][]>([]);
// const [activeModels, setActiveModels] = React.useState<valueType[][]>([]);
// const [activeApiKeys, setActiveApiKeys] = React.useState<valueType[][]>([]);
const initialInfo = useModel('@@initialState');
const { initialState } = initialInfo || {};
@@ -116,7 +132,7 @@ const FilterBar: React.FC<FilterBarProps> = (props) => {
label: (
<span className="flex-center gap-8">
<IconFont type="icon-chart-01" style={{ fontSize: 14 }} />
<span>Export Chart Data</span>
<span>{intl.formatMessage({ id: 'usage.export.chart' })}</span>
</span>
),
onClick: onExportChart
@@ -126,7 +142,7 @@ const FilterBar: React.FC<FilterBarProps> = (props) => {
label: (
<span className="flex-center gap-8">
<IconFont type="icon-table" style={{ fontSize: 14 }} />
<span>Export Table Data</span>
<span>{intl.formatMessage({ id: 'usage.export.table' })}</span>
</span>
),
onClick: onExportTable
@@ -134,13 +150,14 @@ const FilterBar: React.FC<FilterBarProps> = (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<FilterBarProps> = (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<FilterBarProps> = (props) => {
<span className="flex-center gap-8">
<span>{data.label}</span>
{data.isCurrent && (
<span className="text-tertiary"> [Current Account]</span>
<span className="text-tertiary">
{' '}
[{intl.formatMessage({ id: 'usage.user.currentAccount' })}]
</span>
)}
</span>
);
@@ -312,7 +333,7 @@ const FilterBar: React.FC<FilterBarProps> = (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<FilterBarProps> = (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<FilterBarProps> = (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<FilterBarProps> = (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 }
}}