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

feat: usage

Browse Source
This commit is contained in:
jialin
2026-04-22 13:16:48 +08:00
committed by jialin
parent b057d52499
commit 7d75714662
37 changed files with 2199 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/usage/hooks/use-apikeys-columns.tsx
+99
View File
@@ -0,0 +1,99 @@
// columns.ts
import AutoTooltip from '@/components/auto-tooltip';
import { tableSorter } from '@/config/settings';
import { useIntl } from '@umijs/max';
import { useMemo } from 'react';
import { BreakdownItem as ListItem } from '../config/types';
const useModelsColumns = (): Array<{
title: string;
dataIndex: string;
key: string;
}> => {
const intl = useIntl();
return useMemo(() => {
return [
{
title: intl.formatMessage({ id: 'common.table.name' }),
dataIndex: 'api_key_name',
key: 'api_key_name',
sorter: tableSorter(1),
render: (text: string, record: ListItem) => (
<span className="flex items-center">
<AutoTooltip ghost style={{ maxWidth: 400 }}>
<span className="text-primary">{text}</span>
</AutoTooltip>
</span>
)
},
{
title: 'User',
dataIndex: 'user_name',
key: 'user_name',
render: (text: string, record: ListItem) => (
<AutoTooltip ghost style={{ maxWidth: 400 }}>
{text || '-'}
</AutoTooltip>
)
},
{
title: 'Models Used',
dataIndex: 'models_called',
key: 'models_called',
sorter: tableSorter(2),
render: (text: string, record: ListItem) => (
<AutoTooltip ghost>{text || '-'}</AutoTooltip>
)
},
{
title: 'Input Tokens',
dataIndex: 'input_tokens',
key: 'input_tokens',
render: (text: string[], record: ListItem) => (
<AutoTooltip ghost>{text}</AutoTooltip>
)
},
{
title: 'Output Tokens',
dataIndex: 'output_tokens',
key: 'output_tokens',
render: (text: string[], record: ListItem) => (
<AutoTooltip ghost>{text}</AutoTooltip>
)
},
{
title: 'Total Tokens',
dataIndex: 'total_tokens',
key: 'total_tokens',
sorter: tableSorter(3),
ellipsis: {
showTitle: false
},
render: (text: number) => <AutoTooltip ghost>{text}</AutoTooltip>
},
{
title: 'API Requests',
dataIndex: 'api_requests',
key: 'api_requests',
sorter: tableSorter(3),
ellipsis: {
showTitle: false
},
render: (text: number) => <AutoTooltip ghost>{text}</AutoTooltip>
},
{
title: 'Last Active',
dataIndex: 'last_active',
key: 'last_active',
sorter: tableSorter(3),
ellipsis: {
showTitle: false
},
render: (text: number) => <AutoTooltip ghost>{text}</AutoTooltip>
}
];
}, [intl]);
};
export default useModelsColumns;
src/pages/usage/hooks/use-export-table.tsx
+76
View File
@@ -0,0 +1,76 @@
import {
apiKeysTableDataAtom,
modelsTableDataAtom,
usersTableDataAtom
} from '@/atoms/usage';
import { exportJsonToExcel } from '@/utils/excel-reader';
import { useStore } from 'jotai';
import useAPIKeysColumns from './use-apikeys-columns';
import useModelsColumns from './use-models-columns';
import useUsersColumns from './use-users-columns';
const useExportTable = () => {
const store = useStore();
const modelsColumns = useModelsColumns();
const apiKeysColumns = useAPIKeysColumns();
const usersColumns = useUsersColumns();
const exportTable = () => {
const usersTableData = store.get(usersTableDataAtom);
const apiKeysTableData = store.get(apiKeysTableDataAtom);
const modelsTableData = store.get(modelsTableDataAtom);
exportJsonToExcel({
fileName: 'table_data.xlsx',
sheets: [
{
jsonData: modelsTableData.dataList || [],
sheetName: 'models',
fields: modelsColumns
.map((col: any) => col.dataIndex)
.filter(Boolean) as string[],
fieldLabels: modelsColumns.reduce(
(map, col) => {
map[col.dataIndex] = col.title;
return map;
},
{} as Record<string, any>
),
formatMap: {}
},
{
jsonData: apiKeysTableData.dataList || [],
sheetName: 'api_keys',
fields: apiKeysColumns
.map((col: any) => col.dataIndex)
.filter(Boolean) as string[],
fieldLabels: apiKeysColumns.reduce(
(map, col) => {
map[col.dataIndex] = col.title;
return map;
},
{} as Record<string, any>
),
formatMap: {}
},
{
jsonData: usersTableData.dataList || [],
sheetName: 'users',
fields: usersColumns
.map((col: any) => col.dataIndex)
.filter(Boolean) as string[],
fieldLabels: usersColumns.reduce(
(map, col) => {
map[col.dataIndex] = col.title;
return map;
},
{} as Record<string, any>
),
formatMap: {}
}
]
});
};
return { exportTable };
};
export default useExportTable;
src/pages/usage/hooks/use-models-columns.tsx
+103
View File
@@ -0,0 +1,103 @@
// columns.ts
import AutoTooltip from '@/components/auto-tooltip';
import { tableSorter } from '@/config/settings';
import { useIntl } from '@umijs/max';
import { useMemo } from 'react';
import { BreakdownItem as ListItem } from '../config/types';
interface ColumnsHookProps {
sortOrder: string[];
}
const useModelsColumns = (): Array<{
title: string;
dataIndex: string;
key: string;
}> => {
const intl = useIntl();
return useMemo(() => {
return [
{
title: intl.formatMessage({ id: 'common.table.name' }),
dataIndex: 'model_name',
key: 'model_name',
sorter: tableSorter(1),
render: (text: string, record: ListItem) => (
<span className="flex items-center">
<AutoTooltip ghost style={{ maxWidth: 400 }}>
<span className="text-primary">{text}</span>
</AutoTooltip>
</span>
)
},
{
title: 'Provider',
dataIndex: 'provider',
key: 'provider',
render: (text: string, record: ListItem) => (
<AutoTooltip ghost style={{ maxWidth: 400 }}>
{text || '-'}
</AutoTooltip>
)
},
{
title: 'Cluster',
dataIndex: 'cluster_name',
key: 'cluster_name',
sorter: tableSorter(2),
render: (text: string, record: ListItem) => (
<AutoTooltip ghost>{text || '-'}</AutoTooltip>
)
},
{
title: 'Input Tokens',
dataIndex: 'input_tokens',
key: 'input_tokens',
render: (text: string[], record: ListItem) => (
<AutoTooltip ghost>{text}</AutoTooltip>
)
},
{
title: 'Output Tokens',
dataIndex: 'output_tokens',
key: 'output_tokens',
render: (text: string[], record: ListItem) => (
<AutoTooltip ghost>{text}</AutoTooltip>
)
},
{
title: 'Total Tokens',
dataIndex: 'total_tokens',
key: 'total_tokens',
sorter: tableSorter(3),
ellipsis: {
showTitle: false
},
render: (text: number) => <AutoTooltip ghost>{text}</AutoTooltip>
},
{
title: 'API Requests',
dataIndex: 'api_requests',
key: 'api_requests',
sorter: tableSorter(3),
ellipsis: {
showTitle: false
},
render: (text: number) => <AutoTooltip ghost>{text}</AutoTooltip>
},
{
title: 'Last Active',
dataIndex: 'last_active',
key: 'last_active',
sorter: tableSorter(3),
ellipsis: {
showTitle: false
},
render: (text: number) => <AutoTooltip ghost>{text}</AutoTooltip>
}
];
}, [intl]);
};
export default useModelsColumns;
src/pages/usage/hooks/use-users-columns.tsx
+103
View File
@@ -0,0 +1,103 @@
// columns.ts
import AutoTooltip from '@/components/auto-tooltip';
import { tableSorter } from '@/config/settings';
import { useIntl } from '@umijs/max';
import { useMemo } from 'react';
import { BreakdownItem as ListItem } from '../config/types';
interface ColumnsHookProps {
sortOrder: string[];
}
const useModelsColumns = (): Array<{
title: string;
dataIndex: string;
key: string;
}> => {
const intl = useIntl();
return useMemo(() => {
return [
{
title: intl.formatMessage({ id: 'common.table.name' }),
dataIndex: 'user_name',
key: 'user_name',
sorter: tableSorter(1),
render: (text: string, record: ListItem) => (
<span className="flex items-center">
<AutoTooltip ghost style={{ maxWidth: 400 }}>
<span className="text-primary">{text}</span>
</AutoTooltip>
</span>
)
},
{
title: 'Models Used',
dataIndex: 'models_called',
key: 'models_called',
render: (text: string, record: ListItem) => (
<AutoTooltip ghost style={{ maxWidth: 400 }}>
{text || '-'}
</AutoTooltip>
)
},
{
title: 'API Keys Used',
dataIndex: 'api_keys_used',
key: 'api_keys_used',
sorter: tableSorter(2),
render: (text: string, record: ListItem) => (
<AutoTooltip ghost>{text || '-'}</AutoTooltip>
)
},
{
title: 'Input Tokens',
dataIndex: 'input_tokens',
key: 'input_tokens',
render: (text: string[], record: ListItem) => (
<AutoTooltip ghost>{text}</AutoTooltip>
)
},
{
title: 'Output Tokens',
dataIndex: 'output_tokens',
key: 'output_tokens',
render: (text: string[], record: ListItem) => (
<AutoTooltip ghost>{text}</AutoTooltip>
)
},
{
title: 'Total Tokens',
dataIndex: 'total_tokens',
key: 'total_tokens',
sorter: tableSorter(3),
ellipsis: {
showTitle: false
},
render: (text: number) => <AutoTooltip ghost>{text}</AutoTooltip>
},
{
title: 'API Requests',
dataIndex: 'api_requests',
key: 'api_requests',
sorter: tableSorter(3),
ellipsis: {
showTitle: false
},
render: (text: number) => <AutoTooltip ghost>{text}</AutoTooltip>
},
{
title: 'Last Active',
dataIndex: 'last_active',
key: 'last_active',
sorter: tableSorter(3),
ellipsis: {
showTitle: false
},
render: (text: number) => <AutoTooltip ghost>{text}</AutoTooltip>
}
];
}, [intl]);
};
export default useModelsColumns;