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

refactor: usage chart

Browse Source
This commit is contained in:
jialin
2026-04-29 09:29:04 +08:00
committed by jialin
parent e7aac14ef1
commit 26880b4612
23 changed files with 720 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/usage/apis/index.ts
+4 -5
View File
@@ -2,12 +2,11 @@ import { request } from '@umijs/max';
import {
BreakdownItem,
FilterOptionType,
TimeSeriesData,
UsageBreakdownResponse,
UsageMeta
} from '../config/types';
export const USAGE_META = '/usage/meta';
export const USAGE_TIMESERIES = '/usage/timeseries';
export const USAGE_BREAKDOWN = '/usage/breakdown';
export const MODEL_ROUTE_TARGETS = '/model-route-targets';
@@ -29,7 +28,7 @@ export async function queryUsageTimeSeriesData(
end_date: string;
scope: string;
metric: string;
group_by: string;
group_by: string[];
granularity: string;
filters: {
models?: FilterOptionType[];
@@ -38,8 +37,8 @@ export async function queryUsageTimeSeriesData(
};
},
options?: any
): Promise<TimeSeriesData> {
return request<TimeSeriesData>(USAGE_TIMESERIES, {
): Promise<UsageBreakdownResponse> {
return request<UsageBreakdownResponse>(USAGE_BREAKDOWN, {
data: params,
method: 'POST',
cancelToken: options?.token
src/pages/usage/components/daily-usage.tsx
+176 -58
View File
@@ -1,12 +1,16 @@
import { baseColorMap } from '@/pages/dashboard/config';
import { BaseSelect, CardWrapper, MixLineBarChart } from '@gpustack/core-ui';
import BarChart, { generateCoolColors } from '@/pages/_components/bar-chart';
import { BaseSelect, CardWrapper } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Segmented } from 'antd';
import dayjs from 'dayjs';
import React, { useMemo } from 'react';
import styled from 'styled-components';
import { granularities, groupByOptions, metricOptions } from '../config';
import { TimeSeriesData } from '../config/types';
import {
BreakdownItem,
UsageBreakdownResponse,
UsageFilterItem
} from '../config/types';
const ControlsWrapper = styled.div`
display: flex;
@@ -26,34 +30,41 @@ const ControlLabel = styled.span`
margin-right: 8px;
`;
function getColorForIndex(index: number) {
const hue = (index * 137.5) % 360;
return `oklch(70% 0.12 ${hue})`;
}
const colors = [
baseColorMap.base,
baseColorMap.baseR3,
baseColorMap.baseL1,
baseColorMap.baseR1,
baseColorMap.baseR2,
baseColorMap.baseL2
];
const tooltipNameMap: Record<string, string> = {
input_cached_tokens: 'usage.filter.inputTokens'
};
interface DailyUsageProps {
timeSeriesData: TimeSeriesData | null;
timeSeriesData: UsageBreakdownResponse | null;
metric: string;
groupBy: string | null;
granularity: string;
startDate: string;
endDate: string;
onMetricChange: (value: string) => void;
onGroupByChange: (value: string | null) => void;
onGranularityChange: (value: string) => void;
}
const labelFormatter = (v: any) => {
return dayjs(v).format('MM-DD');
const generateDateRange = (
start: string,
end: string,
granularity: string
): string[] => {
if (!start || !end) return [];
const unit = granularity as 'day' | 'week' | 'month';
const dates: string[] = [];
let cursor = dayjs(start);
const endDay = dayjs(end);
while (cursor.isSame(endDay, 'day') || cursor.isBefore(endDay, 'day')) {
dates.push(cursor.format('YYYY-MM-DD'));
cursor = cursor.add(1, unit);
}
return dates;
};
const CACHED_METRIC = 'input_cached_tokens';
const DailyUsage: React.FC<DailyUsageProps> = (props) => {
const intl = useIntl();
const {
@@ -61,60 +72,168 @@ const DailyUsage: React.FC<DailyUsageProps> = (props) => {
metric,
groupBy,
granularity,
startDate,
endDate,
onMetricChange,
onGroupByChange,
onGranularityChange
} = props;
const { chartData, xAxisData } = useMemo(() => {
if (!timeSeriesData?.series || timeSeriesData.series.length === 0) {
return { chartData: { line: [], bar: [] }, xAxisData: [] };
const labelFormatter = (v: any) => {
if (granularity === 'month') {
return dayjs(v).format('YYYY-MM');
}
return dayjs(v).format('MM-DD');
};
const { seriesData, xAxisData, legendData } = useMemo(() => {
const items = timeSeriesData?.items || [];
if (items.length === 0) {
return {
seriesData: [],
xAxisData: [],
legendData: []
};
}
const series = timeSeriesData.series;
const dateSet = new Set<string>();
const groupDim = groupBy as 'user' | 'model' | 'api_key' | null;
const isCached = metric === CACHED_METRIC;
for (const item of series) {
for (const point of item.timeline) {
dateSet.add(point.date);
const dateSet = new Set<string>(
generateDateRange(startDate, endDate, granularity)
);
items.forEach((item) => {
if (item.date?.value) {
dateSet.add(item.date.value);
}
}
});
// sort dates in ascending order
const xAxis = Array.from(dateSet).sort(
(a, b) => dayjs(a).valueOf() - dayjs(b).valueOf()
);
const chartSeries = series.map((item, index) => {
const timelineMap = new Map(
item.timeline.map((point) => [
point.date,
{ time: point.date, value: point.value }
])
);
const groupOrder: string[] = [];
const groupItemsMap = new Map<string, Map<string, BreakdownItem>>();
return {
name: item.label,
data: xAxis.map((date) => timelineMap.get(date) ?? null),
color: colors[index % colors.length]
};
items.forEach((item) => {
const groupLabel = groupDim
? ((item[groupDim] as UsageFilterItem)?.label ?? '-')
: '__total__';
if (!groupItemsMap.has(groupLabel)) {
groupItemsMap.set(groupLabel, new Map());
groupOrder.push(groupLabel);
}
const dateKey = item.date?.value;
if (dateKey) {
groupItemsMap.get(groupLabel)!.set(dateKey, item);
}
});
// API requests use line chart, tokens use bar chart
const metricOption = metricOptions.find((m) => m.value === metric);
const metricLabel = metricOption?.label
? intl.formatMessage({ id: metricOption.label })
: metric;
const tooltipNameId = tooltipNameMap[metric];
const tooltipName = tooltipNameId
? intl.formatMessage({ id: tooltipNameId })
: null;
const barSeries: any[] = [];
const groupColors = generateCoolColors(groupOrder.length);
groupOrder.forEach((groupLabel, groupIdx) => {
const dateMap = groupItemsMap.get(groupLabel)!;
const isTotal = groupLabel === '__total__';
const baseName = isTotal ? metricLabel : groupLabel;
const groupColor = groupColors[groupIdx];
const seriesTooltipName = isTotal ? tooltipName : null;
if (isCached) {
const uncachedLabel = intl.formatMessage({
id: 'usage.chart.uncached'
});
const cachedLabel = intl.formatMessage({
id: 'usage.chart.cached'
});
const uncachedData = xAxis.map((date) => {
const item = dateMap.get(date);
return {
time: date,
value: item
? (item.input_tokens || 0) - (item.input_cached_tokens || 0)
: 0,
stackLabel: uncachedLabel,
tooltipName: seriesTooltipName
};
});
const cachedData = xAxis.map((date) => {
const item = dateMap.get(date);
return {
time: date,
value: item ? item.input_cached_tokens || 0 : 0,
stackLabel: cachedLabel,
tooltipName: seriesTooltipName
};
});
const seriesName =
groupLabel === '__total__' ? metricLabel : groupLabel;
barSeries.push({
name: seriesName,
data: uncachedData,
color: groupColor,
stack: 'uncached'
});
barSeries.push({
name: seriesName,
data: cachedData,
color: groupColor,
stack: 'cached'
});
} else {
const data = xAxis.map((date) => {
const item = dateMap.get(date);
return {
time: date,
value: item
? (item[metric as keyof BreakdownItem] as number) || 0
: 0,
tooltipName: seriesTooltipName
};
});
barSeries.push({
name: baseName,
data,
color: groupColor,
stack: 'total'
});
}
});
const seenNames = new Set<string>();
const dedupedLegend = barSeries
.filter((s) => {
if (seenNames.has(s.name)) return false;
seenNames.add(s.name);
return true;
})
.map((s) => ({
name: s.name,
icon: metric === 'api_requests' ? 'circle' : 'roundRect'
}));
return {
chartData: { line: [], bar: chartSeries },
xAxisData: xAxis
seriesData: barSeries,
xAxisData: xAxis,
legendData: dedupedLegend
};
}, [timeSeriesData, metric]);
const legendData = useMemo(() => {
if (!timeSeriesData?.series) return [];
return timeSeriesData.series.map((item) => ({
name: item.label,
icon: metric === 'api_requests' ? 'circle' : 'roundRect'
}));
}, [timeSeriesData, metric]);
}, [timeSeriesData, metric, groupBy, granularity, startDate, endDate, intl]);
const handleOnGroupByChange = (value: string) => {
onGroupByChange(value || null);
@@ -170,14 +289,13 @@ const DailyUsage: React.FC<DailyUsageProps> = (props) => {
onChange={onGranularityChange}
></Segmented>
</ControlsWrapper>
<MixLineBarChart
chartData={chartData}
seriesData={[]}
<BarChart
seriesData={seriesData}
xAxisData={xAxisData}
height={280}
smooth={false}
legendData={legendData}
labelFormatter={labelFormatter}
legendIsolate={metric === CACHED_METRIC}
/>
</CardWrapper>
</div>
src/pages/usage/components/export-data.tsx
+64 -13
View File
@@ -147,20 +147,57 @@ const ExportData: React.FC<{
}
},
{
title: intl.formatMessage({ id: 'usage.filter.inputTokens' }),
dataIndex: 'input_tokens'
title: (
<AutoTooltip ghost>
{intl.formatMessage({ id: 'usage.filter.inputTokens' })}
</AutoTooltip>
),
width: 130,
dataIndex: 'input_tokens',
render: (text: string, record: any) => {
return <AutoTooltip ghost>{text}</AutoTooltip>;
}
},
{
title: intl.formatMessage({ id: 'usage.filter.outputTokens' }),
dataIndex: 'output_tokens'
title: (
<AutoTooltip ghost>
{intl.formatMessage({ id: 'usage.table.inputTokensCached' })}
</AutoTooltip>
),
width: 150,
dataIndex: 'input_cached_tokens',
render: (text: string, record: any) => {
return <AutoTooltip ghost>{text}</AutoTooltip>;
}
},
{
title: (
<AutoTooltip ghost>
{intl.formatMessage({ id: 'usage.filter.outputTokens' })}
</AutoTooltip>
),
dataIndex: 'output_tokens',
render: (text: string, record: any) => {
return <AutoTooltip ghost>{text}</AutoTooltip>;
}
},
{
title: intl.formatMessage({ id: 'usage.filter.totalTokens' }),
dataIndex: 'total_tokens'
dataIndex: 'total_tokens',
render: (text: string, record: any) => {
return <AutoTooltip ghost>{text}</AutoTooltip>;
}
},
{
title: intl.formatMessage({ id: 'usage.filter.apiRequests' }),
dataIndex: 'api_requests'
title: (
<AutoTooltip ghost>
{intl.formatMessage({ id: 'usage.filter.apiRequests' })}
</AutoTooltip>
),
dataIndex: 'api_requests',
render: (text: string, record: any) => {
return <AutoTooltip ghost>{text}</AutoTooltip>;
}
}
];
@@ -176,6 +213,7 @@ const ExportData: React.FC<{
model: item?.model?.identity?.value?.model_name,
api_key: item?.api_key?.label,
input_tokens: item?.input_tokens,
input_cached_tokens: item?.input_cached_tokens,
output_tokens: item?.output_tokens,
total_tokens: item?.total_tokens,
api_requests: item?.api_requests
@@ -187,6 +225,7 @@ const ExportData: React.FC<{
'model',
'api_key',
'input_tokens',
'input_cached_tokens',
'output_tokens',
'total_tokens',
'api_requests'
@@ -200,6 +239,9 @@ const ExportData: React.FC<{
input_tokens: intl.formatMessage({
id: 'usage.filter.inputTokens'
}),
input_cached_tokens: intl.formatMessage({
id: 'usage.table.inputTokensCached'
}),
output_tokens: intl.formatMessage({
id: 'usage.filter.outputTokens'
}),
@@ -276,17 +318,26 @@ const ExportData: React.FC<{
></ModalFooter>
}
>
<FilterBar
{...filterBar}
pageType="modal"
handlePickerChange={handlePickerChange}
></FilterBar>
<div
style={{
position: 'sticky',
top: 0,
zIndex: 1
}}
>
<FilterBar
{...filterBar}
pageType="modal"
handlePickerChange={handlePickerChange}
></FilterBar>
</div>
<Table
columns={exportTableColumns}
className={'scroll-table'}
tableLayout={'auto'}
style={{ width: '100%', marginTop: '16px', minHeight: 400 }}
dataSource={dataSource.dataList || []}
rowKey={getBreakdownRowKey}
rowKey={(record) => getBreakdownRowKey(record, 'export')}
loading={{
spinning: loading,
size: 'middle'
src/pages/usage/config/index.ts
+4
View File
@@ -39,6 +39,10 @@ export const metricOptions = [
value: 'input_tokens',
label: 'usage.filter.inputTokens'
},
{
value: 'input_cached_tokens',
label: 'usage.chart.inputTokensCached'
},
{
value: 'output_tokens',
label: 'usage.filter.outputTokens'
src/pages/usage/config/types.ts
+18
View File
@@ -54,6 +54,7 @@ export type BreakdownItem = {
output_tokens: number;
total_tokens: number;
api_requests: number;
input_cached_tokens: number;
avg_tokens_per_request: number;
models_called: number;
api_keys_used: number;
@@ -63,8 +64,25 @@ export type BreakdownItem = {
user: UsageFilterItem;
model: UsageFilterItem;
api_key: UsageFilterItem;
date: {
value: string;
label: string;
};
};
export interface UsageBreakdownResponse {
summary: TimeSeriesSummary;
group_by: string[];
granularity: string;
pagination: {
page: number;
perPage: number;
total: number;
totalPage: number;
};
items: BreakdownItem[];
}
export interface UsageMeta {
filters: {
models: UsageFilterItem[];
src/pages/usage/hooks/use-apikeys-columns.tsx
+9
View File
@@ -68,6 +68,15 @@ const useModelsColumns = (): Array<{
<AutoTooltip ghost>{text}</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'usage.table.inputTokensCached' }),
dataIndex: 'input_cached_tokens',
key: 'input_cached_tokens',
sorter: true,
render: (text: number, record: ListItem) => (
<AutoTooltip ghost>{text ?? '-'}</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'usage.filter.outputTokens' }),
dataIndex: 'output_tokens',
src/pages/usage/hooks/use-models-columns.tsx
+9
View File
@@ -80,6 +80,15 @@ const useModelsColumns = (): Array<{
<AutoTooltip ghost>{text}</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'usage.table.inputTokensCached' }),
dataIndex: 'input_cached_tokens',
key: 'input_cached_tokens',
sorter: true,
render: (text: number, record: ListItem) => (
<AutoTooltip ghost>{text ?? '-'}</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'usage.filter.outputTokens' }),
dataIndex: 'output_tokens',
src/pages/usage/hooks/use-usage-filters.ts
+40 -8
View File
@@ -1,12 +1,8 @@
import { exportJsonToExcel } from '@gpustack/core-ui/excel';
import dayjs from 'dayjs';
import { useEffect, useMemo, useState } from 'react';
import {
generateColumns,
GroupOption,
transformTimelineToTable
} from '../config';
import { UsageFilterItem } from '../config/types';
import { GroupOption } from '../config';
import { BreakdownItem, UsageFilterItem } from '../config/types';
import useQueryTimeSeriesData from '../services/use-query-timeseries-data';
const DefaultDateConfig = {
@@ -206,8 +202,13 @@ export const useUsageFilters = ({
return;
}
const groupByArray = currentChartFilters.group_by
? ['date', currentChartFilters.group_by]
: ['date'];
fetchTimeSeriesData({
...currentChartFilters,
group_by: groupByArray,
start_date: currentSelectedFilters.start_date,
end_date: currentSelectedFilters.end_date,
filters: nextFilters
@@ -263,8 +264,39 @@ export const useUsageFilters = ({
};
const handleOnExportChart = () => {
const columns = generateColumns(timeSeriesData?.series || []);
const tableData = transformTimelineToTable(timeSeriesData?.series || []);
const items = timeSeriesData?.items || [];
const groupDim = chartFilters.group_by as
| 'user'
| 'model'
| 'api_key'
| null;
const metric = chartFilters.metric as keyof BreakdownItem;
const dateMap: Record<string, Record<string, any>> = {};
const groupLabels = new Set<string>();
items.forEach((item) => {
const date = item.date?.value;
if (!date) return;
const groupLabel = groupDim
? ((item[groupDim] as UsageFilterItem)?.label ?? '-')
: metric;
groupLabels.add(groupLabel);
if (!dateMap[date]) dateMap[date] = { date };
dateMap[date][groupLabel] = item[metric];
});
const tableData = Object.values(dateMap).sort((a, b) =>
String(a.date).localeCompare(String(b.date))
);
const columns = [
{ title: 'Date', dataIndex: 'date' },
...Array.from(groupLabels).map((label) => ({
title: label,
dataIndex: label
}))
];
exportJsonToExcel({
fileName: `${chartFilters.metric}_${chartFilters.group_by}_${chartFilters.granularity}_${commonFilters.start_date}_${commonFilters.end_date}.xlsx`,
src/pages/usage/hooks/use-users-columns.tsx
+9
View File
@@ -77,6 +77,15 @@ const useModelsColumns = (): Array<{
<AutoTooltip ghost>{text}</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'usage.table.inputTokensCached' }),
dataIndex: 'input_cached_tokens',
key: 'input_cached_tokens',
sorter: true,
render: (text: number, record: ListItem) => (
<AutoTooltip ghost>{text ?? '-'}</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'usage.filter.outputTokens' }),
dataIndex: 'output_tokens',
src/pages/usage/index.tsx
+2
View File
@@ -202,6 +202,8 @@ const Usage: React.FC = () => {
metric={chartFilters.metric}
groupBy={chartFilters.group_by}
granularity={chartFilters.granularity}
startDate={commonFilters.start_date}
endDate={commonFilters.end_date}
onMetricChange={(value) => handleChartFilterChange('metric', value)}
onGroupByChange={(value) =>
handleChartFilterChange('group_by', value as string)
src/pages/usage/services/use-query-timeseries-data.ts
+2 -2
View File
@@ -1,10 +1,10 @@
import { useQueryData } from '@/hooks/use-query-data-list';
import { queryUsageTimeSeriesData } from '../apis';
import { TimeSeriesData } from '../config/types';
import { UsageBreakdownResponse } from '../config/types';
export default function useQueryTimeSeriesData() {
const { detailData, loading, cancelRequest, fetchData } =
useQueryData<TimeSeriesData>({
useQueryData<UsageBreakdownResponse>({
fetchDetail: queryUsageTimeSeriesData,
key: 'timeSeriesData'
});
src/pages/usage/tables/apikeys-table.tsx
+22 -24
View File
@@ -2,7 +2,7 @@ import { TABLE_SORT_DIRECTIONS } from '@/config/settings';
import PageBox from '@/pages/_components/page-box';
import { IconFont, NoResult } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { ConfigProvider, Table } from 'antd';
import { Table } from 'antd';
import _ from 'lodash';
import { useEffect, useRef, useState } from 'react';
import { FilterOptionType } from '../config/types';
@@ -108,29 +108,27 @@ const APIKeys: React.FC<{
return (
<>
<PageBox>
<ConfigProvider renderEmpty={renderEmpty}>
<Table
columns={columns}
dataSource={dataSource.dataList}
rowKey={(record) => getBreakdownRowKey(record, 'api_keys')}
loading={{
spinning: loading,
size: 'middle'
}}
sortDirections={TABLE_SORT_DIRECTIONS}
showSorterTooltip={false}
onChange={handleTableChange}
pagination={{
size: 'middle',
showSizeChanger: true,
pageSize: queryParams.perPage,
current: queryParams.page,
total: dataSource.total,
hideOnSinglePage: queryParams.perPage === 10,
onChange: handlePageChange
}}
></Table>
</ConfigProvider>
<Table
columns={columns}
dataSource={dataSource.dataList}
rowKey={(record) => getBreakdownRowKey(record, 'api_keys')}
loading={{
spinning: loading,
size: 'middle'
}}
sortDirections={TABLE_SORT_DIRECTIONS}
showSorterTooltip={false}
onChange={handleTableChange}
pagination={{
size: 'middle',
showSizeChanger: true,
pageSize: queryParams.perPage,
current: queryParams.page,
total: dataSource.total,
hideOnSinglePage: queryParams.perPage === 10,
onChange: handlePageChange
}}
></Table>
</PageBox>
</>
);
src/pages/usage/tables/models-table.tsx
+25 -25
View File
@@ -2,10 +2,10 @@ import { TABLE_SORT_DIRECTIONS } from '@/config/settings';
import PageBox from '@/pages/_components/page-box';
import { IconFont, NoResult } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { ConfigProvider, Table } from 'antd';
import { Table } from 'antd';
import _ from 'lodash';
import { useEffect, useRef, useState } from 'react';
import { FilterOptionType } from '../config/types';
import { BreakdownItem, FilterOptionType } from '../config/types';
import useUsersColumns from '../hooks/use-models-columns';
import useQueryBreakdownList from '../services/use-query-breakdown-list';
import getBreakdownRowKey from '../utils/get-breakdown-row-key';
@@ -110,29 +110,29 @@ const Models: React.FC<{
return (
<>
<PageBox>
<ConfigProvider renderEmpty={renderEmpty}>
<Table
columns={columns}
dataSource={dataSource.dataList}
rowKey={(record) => getBreakdownRowKey(record, 'models')}
loading={{
spinning: loading,
size: 'middle'
}}
sortDirections={TABLE_SORT_DIRECTIONS}
showSorterTooltip={false}
onChange={handleTableChange}
pagination={{
size: 'middle',
showSizeChanger: true,
pageSize: queryParams.perPage,
current: queryParams.page,
total: dataSource.total,
hideOnSinglePage: queryParams.perPage === 10,
onChange: handlePageChange
}}
></Table>
</ConfigProvider>
<Table
columns={columns}
dataSource={dataSource.dataList}
rowKey={(record: BreakdownItem) =>
getBreakdownRowKey(record, 'models')
}
loading={{
spinning: loading,
size: 'middle'
}}
sortDirections={TABLE_SORT_DIRECTIONS}
showSorterTooltip={false}
onChange={handleTableChange}
pagination={{
size: 'middle',
showSizeChanger: true,
pageSize: queryParams.perPage,
current: queryParams.page,
total: dataSource.total,
hideOnSinglePage: queryParams.perPage === 10,
onChange: handlePageChange
}}
></Table>
</PageBox>
</>
);
src/pages/usage/tables/users-table.tsx
+22 -24
View File
@@ -2,7 +2,7 @@ import { TABLE_SORT_DIRECTIONS } from '@/config/settings';
import PageBox from '@/pages/_components/page-box';
import { IconFont, NoResult } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { ConfigProvider, Table } from 'antd';
import { Table } from 'antd';
import _ from 'lodash';
import { useEffect, useRef, useState } from 'react';
import { FilterOptionType } from '../config/types';
@@ -111,29 +111,27 @@ const Users: React.FC<{
return (
<>
<PageBox>
<ConfigProvider renderEmpty={renderEmpty}>
<Table
columns={columns}
dataSource={dataSource.dataList}
rowKey={(record) => getBreakdownRowKey(record, 'users')}
loading={{
spinning: loading,
size: 'middle'
}}
sortDirections={TABLE_SORT_DIRECTIONS}
showSorterTooltip={false}
onChange={handleTableChange}
pagination={{
size: 'middle',
showSizeChanger: true,
pageSize: queryParams.perPage,
current: queryParams.page,
total: dataSource.total,
hideOnSinglePage: queryParams.perPage === 10,
onChange: handlePageChange
}}
></Table>
</ConfigProvider>
<Table
columns={columns}
dataSource={dataSource.dataList}
rowKey={(record) => getBreakdownRowKey(record, 'users')}
loading={{
spinning: loading,
size: 'middle'
}}
sortDirections={TABLE_SORT_DIRECTIONS}
showSorterTooltip={false}
onChange={handleTableChange}
pagination={{
size: 'middle',
showSizeChanger: true,
pageSize: queryParams.perPage,
current: queryParams.page,
total: dataSource.total,
hideOnSinglePage: queryParams.perPage === 10,
onChange: handlePageChange
}}
></Table>
</PageBox>
</>
);
src/pages/usage/utils/get-breakdown-row-key.ts
+1 -1
View File
@@ -16,7 +16,7 @@ export const getBreakdownRowKey = (
return `${record.api_key.label}`;
}
return record.last_active;
return `${record.date?.value || ''}-${record.model.label}-${record.user.label}-${record.api_key.label}`;
};
export default getBreakdownRowKey;