refactor(usage): switch breakdown dimension from model to route

Align with gpustack backend commits 7b57cd3b (add route dimension to
usage breakdown) and 51fd25c8 (use model_route_id as models_called):

* group_by, filters, and BreakdownItem now use the `route` dimension;
  `models` filter cascader is replaced with a flat `routes` selector
  (routes have no provider/cluster grouping).
* Tab / group_by option / column header keep the user-facing "模型 / Model"
  wording — only the underlying data dimension changed.
* Drop cluster_name / provider_type columns from the breakdown table;
  drop api_keys_used column per design.
* Fix pre-existing excel export bug in use-export-table — string
  dataIndex was lodash-joined char-by-char ("input_tokens" →
  "i_n_p_u_t..."), array dataIndex was used as a flat key against nested
  rows. Rebuilt around buildSheetMeta that emits a stable field key plus
  a formatMap using _.get(row, path) for nested values. Sheet name kept
  as `models` to match the visible column label.
This commit is contained in:
Yuxing Deng
2026-05-19 16:50:42 +08:00
parent 0274bcb8cd
commit 38107a67fe
15 changed files with 135 additions and 254 deletions
+7 -7
View File
@@ -6,17 +6,17 @@ import { Table } from 'antd';
import _ from 'lodash';
import { useEffect, useRef, useState } from 'react';
import { BreakdownItem, FilterOptionType } from '../config/types';
import useUsersColumns from '../hooks/use-models-columns';
import useModelsColumns from '../hooks/use-models-columns';
import useQueryBreakdownList from '../services/use-query-breakdown-list';
import getBreakdownRowKey from '../utils/get-breakdown-row-key';
const Models: React.FC<{
models: FilterOptionType[];
routes: FilterOptionType[];
dateRange: { start_date: string; end_date: string };
scope: string;
pageResetKey?: number;
refreshKey?: number;
}> = ({ models, dateRange, scope, pageResetKey = 0, refreshKey = 0 }) => {
}> = ({ routes, dateRange, scope, pageResetKey = 0, refreshKey = 0 }) => {
const intl = useIntl();
const { loading, dataSource, fetchData } = useQueryBreakdownList({
@@ -51,7 +51,7 @@ const Models: React.FC<{
}));
};
const columns = useUsersColumns();
const columns = useModelsColumns();
useEffect(() => {
if (queryParams.page !== 1) {
@@ -89,9 +89,9 @@ const Models: React.FC<{
fetchData({
...queryParams,
group_by: ['model'],
group_by: ['route'],
filters: {
models
routes
},
scope: scope,
...dateRange
@@ -99,7 +99,7 @@ const Models: React.FC<{
}, [
dateRange.end_date,
dateRange.start_date,
models,
routes,
queryParams.page,
queryParams.perPage,
queryParams.sort_by,