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.

src/pages/usage/apis/index.ts

@@ -34,7 +34,7 @@ export async function queryUsageTimeSeriesData(
     perPage?: number;
     sort_by?: string;
     filters: {
-      models?: FilterOptionType[];
+      routes?: FilterOptionType[];
       users?: FilterOptionType[];
       api_keys?: FilterOptionType[];
     };
@@ -51,7 +51,7 @@ export async function queryUsageTimeSeriesData(
 export async function queryUsageBreakdownList(
   params: Global.SearchParams & {
     filters: {
-      models?: FilterOptionType[];
+      routes?: FilterOptionType[];
       users?: FilterOptionType[];
       api_keys?: FilterOptionType[];
     };

src/pages/usage/components/breakdown-tabs.tsx

@@ -1,14 +1,12 @@
 import { useIntl } from '@umijs/max';
 import { Tabs } from 'antd';
 import React, { useMemo } from 'react';
-import { GroupOption } from '../config';
 import { UsageFilterItem } from '../config/types';
 import ApiKeysTable from '../tables/apikeys-table';
 import ModelsTable from '../tables/models-table';
 import UsersTable from '../tables/users-table';
 
 type FilterOptionType = Omit<UsageFilterItem, 'label' | 'deleted'>;
-type GroupOptionType = GroupOption<UsageFilterItem>;
 const EMPTY_FILTERS: FilterOptionType[] = [];
 
 const BreakdownTabs: React.FC<{
@@ -20,13 +18,13 @@ const BreakdownTabs: React.FC<{
   pageResetKey?: number;
   refreshKey?: number;
   filters: {
-    models?: FilterOptionType[];
+    routes?: FilterOptionType[];
     users?: FilterOptionType[];
     api_keys?: FilterOptionType[];
   };
 }> = ({ filters, dateRange, scope, pageResetKey = 0, refreshKey = 0 }) => {
   const intl = useIntl();
-  const models = filters.models || EMPTY_FILTERS;
+  const routes = filters.routes || EMPTY_FILTERS;
   const users = filters.users || EMPTY_FILTERS;
   const apiKeys = filters.api_keys || EMPTY_FILTERS;
 
@@ -39,7 +37,7 @@ const BreakdownTabs: React.FC<{
         children: (
           <ModelsTable
             key="models"
-            models={models}
+            routes={routes}
             dateRange={dateRange}
             scope={scope}
             pageResetKey={pageResetKey}
@@ -83,7 +81,7 @@ const BreakdownTabs: React.FC<{
       }
       return true;
     });
-  }, [apiKeys, dateRange, models, pageResetKey, refreshKey, scope, users]);
+  }, [apiKeys, dateRange, routes, pageResetKey, refreshKey, scope, users]);
 
   return (
     <div style={{ marginTop: 16 }}>

src/pages/usage/components/daily-usage.tsx

@@ -104,7 +104,7 @@ const DailyUsage: React.FC<DailyUsageProps> = (props) => {
       };
     }
 
-    const groupDim = groupBy as 'user' | 'model' | 'api_key' | null;
+    const groupDim = groupBy as 'user' | 'route' | 'api_key' | null;
     const isCached = metric === CACHED_METRIC;
 
     const dateSet = new Set<string>(

src/pages/usage/components/export-data.tsx

@@ -22,7 +22,7 @@ const ExportData: React.FC<{
   metaData: any;
   granularity: string;
   initialState: {
-    activeModels: ValueType[][];
+    activeRoutes: string[];
     activeApiKeys: ValueType[][];
     users: string[];
     start_date: string;
@@ -32,7 +32,7 @@ const ExportData: React.FC<{
     scope: string;
     start_date: string;
     end_date: string;
-    models: string[];
+    routes: string[];
     users: string[];
     api_keys: string[];
   };
@@ -84,7 +84,7 @@ const ExportData: React.FC<{
         ...pageParams,
         granularity: 'day',
         sort_by: '-date',
-        group_by: ['date', 'user', 'model', 'api_key'],
+        group_by: ['date', 'user', 'route', 'api_key'],
         filters: nextFilters,
         scope: initialScope,
         start_date: nextCommonFilters.start_date,
@@ -113,25 +113,12 @@ const ExportData: React.FC<{
       }
     },
     {
-      title: intl.formatMessage({ id: 'usage.table.cluster' }),
+      title: intl.formatMessage({ id: 'usage.filter.group.model' }),
-      dataIndex: ['model', 'identity', 'value', 'cluster_name'],
+      dataIndex: ['route', 'label'],
       render: (text: string) => {
         return <AutoTooltip ghost>{text}</AutoTooltip>;
       }
     },
-    {
-      title: intl.formatMessage({ id: 'dashboard.usage.export.model' }),
-      dataIndex: ['model', 'identity', 'value', 'model_name'],
-      render: (text: string, record: any) => {
-        return (
-          <AutoTooltip ghost>
-            {record?.model?.identity?.value?.provider_name
-              ? `${record?.model?.identity?.value?.provider_name}/${text}`
-              : text}
-          </AutoTooltip>
-        );
-      }
-    },
     {
       title: intl.formatMessage({ id: 'dashboard.usage.export.user' }),
       dataIndex: ['user', 'label'],
@@ -213,8 +200,7 @@ const ExportData: React.FC<{
           jsonData: (dataSource.dataList || []).map((item: any) => ({
             date: item?.date?.label,
             user: item?.user?.label,
-            cluster: item?.model?.identity?.value?.cluster_name,
+            route: item?.route?.label,
-            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,
@@ -226,7 +212,7 @@ const ExportData: React.FC<{
           fields: [
             'date',
             'user',
-            'model',
+            'route',
             'api_key',
             'input_tokens',
             'input_cached_tokens',
@@ -237,8 +223,7 @@ const ExportData: React.FC<{
           fieldLabels: {
             date: intl.formatMessage({ id: 'dashboard.usage.export.date' }),
             user: intl.formatMessage({ id: 'dashboard.usage.export.user' }),
-            cluster: intl.formatMessage({ id: 'usage.table.cluster' }),
+            route: intl.formatMessage({ id: 'usage.filter.group.model' }),
-            model: intl.formatMessage({ id: 'dashboard.usage.export.model' }),
             api_key: intl.formatMessage({ id: 'usage.table.provider' }),
             input_tokens: intl.formatMessage({
               id: 'usage.filter.inputTokens'
@@ -286,7 +271,7 @@ const ExportData: React.FC<{
       fetchExportData({
         ...INITIAL_PAGE_PARAMS,
         granularity: 'day',
-        group_by: ['date', 'user', 'model', 'api_key'],
+        group_by: ['date', 'user', 'route', 'api_key'],
         filters,
         sort_by: '-date',
         scope: initialScope,

src/pages/usage/components/filter-bar.tsx

@@ -1,5 +1,4 @@
 import useRangePickerPreset from '@/pages/dashboard/hooks/use-rangepicker-preset';
-import ProviderLogo from '@/pages/maas-provider/components/provider-logo';
 import { useModel } from '@@/plugin-model';
 import { DownloadOutlined, SyncOutlined } from '@ant-design/icons';
 import {
@@ -32,21 +31,19 @@ interface FilterBarProps {
   scope: string;
   startDate: string;
   endDate: string;
-  selectedModels: string[];
+  selectedRoutes: string[];
   selectedUsers: string[];
   selectedApiKeys: string[];
-  modelOptions: GroupOption<UsageFilterItem>[];
+  routeOptions: OptionType[];
   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;
+  onRoutesChange: (value: string[]) => void;
   onUsersChange: (value: string[]) => void;
   onApiKeysChange: (value: string[]) => void;
-  handleActiveModelsChange: (value: valueType[][]) => void;
   handleActiveApiKeysChange: (value: valueType[][]) => void;
   onExport?: () => void;
   handleSearch?: () => void;
@@ -56,7 +53,7 @@ interface FilterBarProps {
     scope: string;
     start_date: string;
     end_date: string;
-    models: string[];
+    routes: string[];
     users: string[];
     api_keys: string[];
   };
@@ -67,18 +64,17 @@ const FilterBar: React.FC<FilterBarProps> = (props) => {
     pageType = 'page',
     startDate,
     endDate,
+    selectedRoutes,
     selectedUsers,
     selectedApiKeys,
-    modelOptions,
+    routeOptions,
     userOptions,
     apiKeyOptions,
-    activeModels,
     activeApiKeys,
-    handleActiveModelsChange,
     handleActiveApiKeysChange,
     handlePickerChange,
     onDateChange,
-    onModelsChange,
+    onRoutesChange,
     onUsersChange,
     onApiKeysChange,
     onExportChart,
@@ -157,17 +153,6 @@ const FilterBar: React.FC<FilterBarProps> = (props) => {
     );
   };
 
-  const handleOnModelsChange = (value: valueType[][], selectedOptions: any) => {
-    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);
-  };
-
   const handleOnApiKeysChange = (
     value: valueType[][],
     selectedOptions: any
@@ -182,55 +167,6 @@ const FilterBar: React.FC<FilterBarProps> = (props) => {
     onApiKeysChange(selectedValues);
   };
 
-  const displayRender = (labels: any[], option: any) => {
-    return (
-      <AutoTooltip
-        ghost
-        maxWidth={150}
-        title={
-          <span>
-            {labels[0]} / {labels[1]}
-          </span>
-        }
-      >
-        {labels[0]} / {labels[1]}
-      </AutoTooltip>
-    );
-  };
-
-  const optionRender = (option: any) => {
-    const { data } = option;
-    if (!data.isParent) {
-      return (
-        <span className="flex-center gap-4">
-          <AutoTooltip ghost>{data.label}</AutoTooltip>
-          {data.deleted &&
-            renderTag(intl.formatMessage({ id: 'usage.table.deleted' }))}
-        </span>
-      );
-    }
-
-    if (data.type === 'deployments') {
-      return (
-        <span className={FilterBarCss.optionsWrapper}>
-          <ProviderLogo provider={data.type as string} />
-          <AutoTooltip ghost>
-            {intl.formatMessage({ id: 'menu.models.deployment' })}
-          </AutoTooltip>
-        </span>
-      );
-    }
-
-    return (
-      <span className={FilterBarCss.optionsWrapper}>
-        <ProviderLogo provider={data.type as string} />
-        <AutoTooltip ghost>
-          <span>{data.label}</span>
-        </AutoTooltip>
-      </span>
-    );
-  };
-
   const apiKeyOptionRender = (option: any) => {
     const { data } = option;
     if (!data.isParent) {
@@ -303,47 +239,19 @@ const FilterBar: React.FC<FilterBarProps> = (props) => {
           style={{ width: 240 }}
           onChange={onDateChange}
         />
-        <div
+        <SimpleSelect
-          style={{
+          allowClear
-            maxWidth: 400,
+          showSearch
-            flex: 1,
+          mode="multiple"
-            minWidth: 200
+          options={routeOptions}
+          placeholder={intl.formatMessage({ id: 'usage.filter.model' })}
+          styles={{
+            wrapper: { flex: 1, maxWidth: 400, minWidth: 200 }
           }}
-        >
+          value={selectedRoutes}
-          <Cascader
+          optionLabelRender={singleOptionRender}
-            showSearch
+          onChange={onRoutesChange}
-            multiple={true}
+        />
-            classNames={{
-              popup: {
-                root: 'cascader-popup-wrapper gpu-selector'
-              }
-            }}
-            styles={{
-              root: {
-                width: '100%'
-              },
-              popup: {
-                list: {
-                  flex: 1
-                },
-                listItem: {
-                  padding: '5px 10px'
-                }
-              }
-            }}
-            maxTagCount={1}
-            size="small"
-            isInFormItems={false}
-            placeholder={intl.formatMessage({ id: 'usage.filter.model' })}
-            options={modelOptions}
-            showCheckedStrategy="SHOW_CHILD"
-            displayRender={displayRender}
-            optionNode={optionRender}
-            value={activeModels}
-            onChange={handleOnModelsChange}
-            getPopupContainer={(triggerNode) => triggerNode.parentNode}
-          ></Cascader>
-        </div>
         {initialState?.currentUser?.is_admin && (
           <>
             <SimpleSelect

src/pages/usage/config/index.ts

@@ -6,7 +6,7 @@ export const groupByOptions = [
   //   label: 'None'
   // },
   {
-    value: 'model',
+    value: 'route',
     label: 'usage.filter.group.model'
   },
   {

src/pages/usage/config/types.ts

@@ -9,11 +9,13 @@ export interface UsageFilterItem {
       api_key_is_custom: boolean | null;
       provider_type: string | null;
       provider_name: string | null;
+      route_name: string | null;
     };
     current: {
       model_id: string | null;
       user_id: number | null;
       api_key_id: string | null;
+      route_id: number | null;
     };
   };
   label: string;
@@ -63,6 +65,7 @@ export type BreakdownItem = {
   provider_name: string;
   user: UsageFilterItem;
   model: UsageFilterItem;
+  route: UsageFilterItem;
   api_key: UsageFilterItem;
   date: {
     value: string;
@@ -88,6 +91,7 @@ export interface UsageMeta {
     models: UsageFilterItem[];
     users: UsageFilterItem[];
     api_keys: UsageFilterItem[];
+    routes: UsageFilterItem[];
   };
 }
 

src/pages/usage/hooks/use-export-table.tsx

@@ -10,6 +10,34 @@ import useAPIKeysColumns from './use-apikeys-columns';
 import useModelsColumns from './use-models-columns';
 import useUsersColumns from './use-users-columns';
 
+type ColumnLike = {
+  title: any;
+  dataIndex: string | string[];
+  key?: string;
+};
+
+const toFieldKey = (dataIndex: string | string[]): string =>
+  Array.isArray(dataIndex) ? dataIndex.join('_') : dataIndex;
+
+const buildSheetMeta = (columns: ColumnLike[]) => {
+  const fields: string[] = [];
+  const fieldLabels: Record<string, any> = {};
+  const formatMap: Record<string, (raw: any, row: any) => any> = {};
+
+  columns.forEach((col) => {
+    if (!col.dataIndex) return;
+    const key = toFieldKey(col.dataIndex);
+    fields.push(key);
+    fieldLabels[key] = col.title;
+    if (Array.isArray(col.dataIndex)) {
+      const path = col.dataIndex;
+      formatMap[key] = (_raw, row) => _.get(row, path);
+    }
+  });
+
+  return { fields, fieldLabels, formatMap };
+};
+
 const useExportTable = () => {
   const store = useStore();
   const modelsColumns = useModelsColumns();
@@ -20,53 +48,34 @@ const useExportTable = () => {
     const usersTableData = store.get(usersTableDataAtom);
     const apiKeysTableData = store.get(apiKeysTableDataAtom);
     const modelsTableData = store.get(modelsTableDataAtom);
+
+    const modelsMeta = buildSheetMeta(modelsColumns);
+    const apiKeysMeta = buildSheetMeta(apiKeysColumns);
+    const usersMeta = buildSheetMeta(usersColumns);
+
     exportJsonToExcel({
       fileName: 'table_data.xlsx',
       sheets: [
         {
           jsonData: modelsTableData.dataList || [],
           sheetName: 'models',
-          fields: modelsColumns
+          fields: modelsMeta.fields,
-            .map((col: any) => _.join(col.dataIndex, '_'))
+          fieldLabels: modelsMeta.fieldLabels,
-            .filter(Boolean) as string[],
+          formatMap: modelsMeta.formatMap
-          fieldLabels: modelsColumns.reduce(
-            (map, col) => {
-              map[_.join(col.dataIndex, '_')] = col.title;
-              return map;
-            },
-            {} as Record<string, any>
-          ),
-          formatMap: {}
         },
         {
           jsonData: apiKeysTableData.dataList || [],
           sheetName: 'api_keys',
-          fields: apiKeysColumns
+          fields: apiKeysMeta.fields,
-            .map((col: any) => col.dataIndex)
+          fieldLabels: apiKeysMeta.fieldLabels,
-            .filter(Boolean) as string[],
+          formatMap: apiKeysMeta.formatMap
-          fieldLabels: apiKeysColumns.reduce(
-            (map, col) => {
-              map[_.join(col.dataIndex, '_')] = col.title;
-              return map;
-            },
-            {} as Record<string, any>
-          ),
-          formatMap: {}
         },
         {
           jsonData: usersTableData.dataList || [],
           sheetName: 'users',
-          fields: usersColumns
+          fields: usersMeta.fields,
-            .map((col: any) => col.dataIndex)
+          fieldLabels: usersMeta.fieldLabels,
-            .filter(Boolean) as string[],
+          formatMap: usersMeta.formatMap
-          fieldLabels: usersColumns.reduce(
-            (map, col) => {
-              map[_.join(col.dataIndex, '_')] = col.title;
-              return map;
-            },
-            {} as Record<string, any>
-          ),
-          formatMap: {}
         }
       ]
     });

src/pages/usage/hooks/use-models-columns.tsx

@@ -1,15 +1,10 @@
 // columns.ts
-import ProviderLogo from '@/pages/maas-provider/components/provider-logo';
 import { AutoTooltip } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { Tag } from 'antd';
 import { useMemo } from 'react';
 import { BreakdownItem as ListItem } from '../config/types';
 
-interface ColumnsHookProps {
-  sortOrder: string[];
-}
-
 const useModelsColumns = (): Array<{
   title: string;
   dataIndex: string | string[];
@@ -21,8 +16,8 @@ const useModelsColumns = (): Array<{
     return [
       {
         title: intl.formatMessage({ id: 'common.table.name' }),
-        dataIndex: ['model', 'identity', 'value', 'model_name'],
+        dataIndex: ['route', 'label'],
-        key: 'model_name',
+        key: 'route_name',
         render: (text: string, record: ListItem) => (
           <span className="flex items-center">
             <AutoTooltip
@@ -32,7 +27,7 @@ const useModelsColumns = (): Array<{
             >
               <span className="text-primary">{text}</span>
             </AutoTooltip>
-            {record.model?.deleted && (
+            {record.route?.deleted && (
               <Tag
                 style={{
                   marginLeft: 8,
@@ -49,28 +44,6 @@ const useModelsColumns = (): Array<{
           </span>
         )
       },
-      {
-        title: intl.formatMessage({ id: 'usage.table.cluster' }),
-        dataIndex: ['model', 'identity', 'value', 'cluster_name'],
-        key: 'cluster_name',
-        render: (text: string, record: ListItem) => (
-          <AutoTooltip ghost>{text || '-'}</AutoTooltip>
-        )
-      },
-      {
-        title: intl.formatMessage({ id: 'usage.table.provider' }),
-        dataIndex: ['model', 'identity', 'value', 'provider_type'],
-        key: 'provider_type',
-        render: (text: string, record: ListItem) => (
-          <span className="flex-center gap-8">
-            <ProviderLogo provider={text || 'deployments'} />
-            <AutoTooltip ghost style={{ maxWidth: 400 }}>
-              {text ||
-                (!text && intl.formatMessage({ id: 'menu.models.deployment' }))}
-            </AutoTooltip>
-          </span>
-        )
-      },
       {
         title: intl.formatMessage({ id: 'usage.filter.inputTokens' }),
         dataIndex: 'input_tokens',

src/pages/usage/hooks/use-usage-filters.ts

@@ -12,6 +12,9 @@ const DefaultDateConfig = {
 type UserOptionType = UsageFilterItem & {
   value: string;
 };
+type RouteOptionType = UsageFilterItem & {
+  value: string;
+};
 type ValueType = string | number | null;
 
 type FilterOptionType = Omit<UsageFilterItem, 'label' | 'deleted'>;
@@ -23,6 +26,7 @@ interface UseUsageFiltersParams {
     models?: GroupOptionType[];
     users?: UserOptionType[];
     api_keys?: GroupOptionType[];
+    routes?: RouteOptionType[];
   };
   chartFilters: {
     metric: string;
@@ -30,7 +34,7 @@ interface UseUsageFiltersParams {
     granularity: string;
   };
   initialState?: {
-    activeModels?: ValueType[][];
+    activeRoutes?: string[];
     activeApiKeys?: ValueType[][];
     users?: string[];
     start_date?: string;
@@ -45,13 +49,13 @@ interface UseUsageFiltersParams {
   onFetchData?: (params: {
     chartFilters: UseUsageFiltersParams['chartFilters'];
     filters: {
-      models?: FilterOptionType[];
+      routes?: FilterOptionType[];
       users?: FilterOptionType[];
       api_keys?: FilterOptionType[];
     };
     commonFilters: {
       scope: string;
-      models: string[];
+      routes: string[];
       users: string[];
       api_keys: string[];
       start_date: string;
@@ -70,7 +74,7 @@ export const useUsageFilters = ({
   onFetchData
 }: UseUsageFiltersParams) => {
   const {
-    activeModels: initialActiveModels = [],
+    activeRoutes: initialActiveRoutes = [],
     activeApiKeys: initialActiveApiKeys = [],
     users: initialUsers = [],
     start_date = '',
@@ -93,7 +97,7 @@ export const useUsageFilters = ({
 
   const [commonFilters, setCommonFilters] = useState({
     scope: initialScope,
-    models: extractSelectedValues(initialActiveModels),
+    routes: initialActiveRoutes,
     users: initialUsers || [],
     api_keys: extractSelectedValues(initialActiveApiKeys),
     start_date:
@@ -104,11 +108,9 @@ export const useUsageFilters = ({
     end_date: end_date || dayjs().format('YYYY-MM-DD')
   });
 
-  const modelOptions = metaData?.models || [];
+  const routeOptions = metaData?.routes || [];
   const userOptions = metaData?.users || [];
   const apiKeyOptions = metaData?.api_keys || [];
-  const [activeModels, setActiveModels] =
-    useState<ValueType[][]>(initialActiveModels);
   const [activeApiKeys, setActiveApiKeys] =
     useState<ValueType[][]>(initialActiveApiKeys);
 
@@ -117,12 +119,11 @@ export const useUsageFilters = ({
       return;
     }
 
-    setActiveModels(initialActiveModels);
     setActiveApiKeys(initialActiveApiKeys);
     setCommonFilters((prev) => ({
       ...prev,
       scope: initialScope,
-      models: extractSelectedValues(initialActiveModels),
+      routes: initialActiveRoutes,
       users: initialUsers || [],
       api_keys: extractSelectedValues(initialActiveApiKeys),
       start_date:
@@ -135,7 +136,7 @@ export const useUsageFilters = ({
   }, [
     end_date,
     initialActiveApiKeys,
-    initialActiveModels,
+    initialActiveRoutes,
     initialUsers,
     initialScope,
     initialState,
@@ -144,17 +145,15 @@ export const useUsageFilters = ({
 
   const buildFilters = (selected: typeof commonFilters) => {
     const filters: {
-      models?: FilterOptionType[];
+      routes?: FilterOptionType[];
       users?: FilterOptionType[];
       api_keys?: FilterOptionType[];
     } = {};
 
-    if (selected.models.length > 0) {
+    if (selected.routes.length > 0) {
-      const modelsSet = new Set(selected.models);
+      const routesSet = new Set(selected.routes);
-      filters.models = modelOptions
+      filters.routes = routeOptions
-        .flatMap((group) =>
+        .filter((item) => routesSet.has(item.value))
-          group.children.filter((item) => modelsSet.has(item.value))
-        )
         .map((item) => ({
           identity: item.identity
         }));
@@ -184,7 +183,7 @@ export const useUsageFilters = ({
 
   const filters = useMemo(
     () => buildFilters(commonFilters),
-    [commonFilters, modelOptions, userOptions, apiKeyOptions]
+    [commonFilters, routeOptions, userOptions, apiKeyOptions]
   );
 
   const fetchData = (
@@ -233,16 +232,12 @@ export const useUsageFilters = ({
     }
   };
 
-  const handleActiveModelsChange = (value: ValueType[][]) => {
-    setActiveModels(value);
-  };
-
   const handleActiveApiKeysChange = (value: ValueType[][]) => {
     setActiveApiKeys(value);
   };
 
   const handleFilterChange = (
-    type: 'models' | 'users' | 'api_keys',
+    type: 'routes' | 'users' | 'api_keys',
     value: string[]
   ) => {
     const selectedValues: string[] = value.map((item) => {
@@ -267,7 +262,7 @@ export const useUsageFilters = ({
     const items = timeSeriesData?.items || [];
     const groupDim = chartFilters.group_by as
       | 'user'
-      | 'model'
+      | 'route'
       | 'api_key'
       | null;
     const metric = chartFilters.metric as keyof BreakdownItem;
@@ -327,20 +322,18 @@ export const useUsageFilters = ({
     scope: commonFilters.scope,
     startDate: commonFilters.start_date,
     endDate: commonFilters.end_date,
-    selectedModels: commonFilters.models,
+    selectedRoutes: commonFilters.routes,
     selectedUsers: commonFilters.users,
     selectedApiKeys: commonFilters.api_keys,
-    modelOptions,
+    routeOptions,
     userOptions,
     apiKeyOptions,
     activeApiKeys,
-    activeModels,
     handleSearch,
-    handleActiveModelsChange,
     handleActiveApiKeysChange,
     onScopeChange: handleScopeChange,
     onDateChange: handleDateChange,
-    onModelsChange: (value: string[]) => handleFilterChange('models', value),
+    onRoutesChange: (value: string[]) => handleFilterChange('routes', value),
     onUsersChange: (value: string[]) => handleFilterChange('users', value),
     onApiKeysChange: (value: string[]) => handleFilterChange('api_keys', value),
     onExportChart: handleOnExportChart

src/pages/usage/index.tsx

@@ -164,8 +164,8 @@ const Usage: React.FC = () => {
           filterBar.onDateChange(dates, dateStrings);
           handleBreakdownPageReset();
         }}
-        onModelsChange={(value) => {
+        onRoutesChange={(value) => {
-          filterBar.onModelsChange(value);
+          filterBar.onRoutesChange(value);
           handleBreakdownPageReset();
         }}
         onUsersChange={(value) => {
@@ -228,7 +228,7 @@ const Usage: React.FC = () => {
         handlePickerChange={handlePickerChange}
         onCancel={() => setOpenExportModal(false)}
         initialState={{
-          activeModels: filterBar.activeModels,
+          activeRoutes: filterBar.selectedRoutes,
           activeApiKeys: filterBar.activeApiKeys,
           users: commonFilters.users,
           start_date: commonFilters.start_date,

src/pages/usage/services/use-query-breakdown-list.ts

@@ -31,7 +31,7 @@ export const useQueryBreakdownList = (options?: {
     ListItem,
     Global.SearchParams & {
       filters: {
-        models?: FilterOptionType[];
+        routes?: FilterOptionType[];
         users?: FilterOptionType[];
         api_keys?: FilterOptionType[];
       };
@@ -46,7 +46,7 @@ export const useQueryBreakdownList = (options?: {
   const fetchListData = async (
     params: Global.SearchParams & {
       filters: {
-        models?: FilterOptionType[];
+        routes?: FilterOptionType[];
         users?: FilterOptionType[];
         api_keys?: FilterOptionType[];
       };

src/pages/usage/services/use-query-meta-data.ts

@@ -9,6 +9,10 @@ type UserOptionType = UsageFilterItem & {
   value: string;
 };
 
+type RouteOptionType = UsageFilterItem & {
+  value: string;
+};
+
 export default function useQueryUsageMetaData() {
   const { detailData, loading, cancelRequest, fetchData } =
     useQueryData<UsageMeta>({
@@ -20,10 +24,12 @@ export default function useQueryUsageMetaData() {
     models: GroupOption<UsageFilterItem>[];
     users: UserOptionType[];
     api_keys: GroupOption<UsageFilterItem>[];
+    routes: RouteOptionType[];
   }>({
     models: [],
     users: [],
-    api_keys: []
+    api_keys: [],
+    routes: []
   });
 
   // the current user sort in the first place
@@ -70,7 +76,12 @@ export default function useQueryUsageMetaData() {
           value: item.label,
           label: item.identity.value.api_key_name || ''
         })
-      })
+      }),
+      routes:
+        (res?.filters?.routes || []).map((item) => ({
+          ...item,
+          value: item.label
+        })) || []
     };
     setResult(data);
   };

src/pages/usage/tables/models-table.tsx

@@ -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,

src/pages/usage/utils/get-breakdown-row-key.ts

@@ -5,7 +5,7 @@ export const getBreakdownRowKey = (
   type: string
 ): string => {
   if (type === 'models') {
-    return `${record.model.label}`;
+    return `${record.route?.label || ''}`;
   }
 
   if (type === 'users') {
@@ -16,7 +16,7 @@ export const getBreakdownRowKey = (
     return `${record.api_key.label}`;
   }
 
-  return `${record.date?.value || ''}-${record.model.label}-${record.user.label}-${record.api_key.label}`;
+  return `${record.date?.value || ''}-${record.route?.label || ''}-${record.user.label}-${record.api_key.label}`;
 };
 
 export default getBreakdownRowKey;