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

fix: table sorter

Browse Source
This commit is contained in:
jialin
2026-04-22 13:16:48 +08:00
committed by jialin
parent 8ba77beeed
commit f566ea3b63
6 changed files with 60 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/usage/hooks/use-apikeys-columns.tsx
+4 -6
View File
@@ -1,6 +1,5 @@
// 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';
@@ -18,7 +17,6 @@ const useModelsColumns = (): Array<{
title: intl.formatMessage({ id: 'common.table.name' }),
dataIndex: ['api_key', 'identity', 'value', '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 }}>
@@ -41,7 +39,7 @@ const useModelsColumns = (): Array<{
title: intl.formatMessage({ id: 'usage.filter.modelsUsed' }),
dataIndex: 'models_called',
key: 'models_called',
sorter: tableSorter(2),
sorter: true,
render: (text: string, record: ListItem) => (
<AutoTooltip ghost>{text || '-'}</AutoTooltip>
)
@@ -50,6 +48,7 @@ const useModelsColumns = (): Array<{
title: intl.formatMessage({ id: 'usage.filter.inputTokens' }),
dataIndex: 'input_tokens',
key: 'input_tokens',
sorter: true,
render: (text: string[], record: ListItem) => (
<AutoTooltip ghost>{text}</AutoTooltip>
)
@@ -66,7 +65,7 @@ const useModelsColumns = (): Array<{
title: intl.formatMessage({ id: 'usage.filter.totalTokens' }),
dataIndex: 'total_tokens',
key: 'total_tokens',
sorter: tableSorter(3),
sorter: true,
ellipsis: {
showTitle: false
},
@@ -76,7 +75,7 @@ const useModelsColumns = (): Array<{
title: intl.formatMessage({ id: 'usage.filter.apiRequests' }),
dataIndex: 'api_requests',
key: 'api_requests',
sorter: tableSorter(3),
sorter: true,
ellipsis: {
showTitle: false
},
@@ -86,7 +85,6 @@ const useModelsColumns = (): Array<{
title: intl.formatMessage({ id: 'usage.table.lastActive' }),
dataIndex: 'last_active',
key: 'last_active',
sorter: tableSorter(3),
ellipsis: {
showTitle: false
},
src/pages/usage/hooks/use-models-columns.tsx
+4 -6
View File
@@ -1,6 +1,5 @@
// columns.ts
import AutoTooltip from '@/components/auto-tooltip';
import { tableSorter } from '@/config/settings';
import ProviderLogo from '@/pages/maas-provider/components/provider-logo';
import { useIntl } from '@umijs/max';
import { useMemo } from 'react';
@@ -23,7 +22,6 @@ const useModelsColumns = (): Array<{
title: intl.formatMessage({ id: 'common.table.name' }),
dataIndex: ['model', 'identity', 'value', 'model_name'],
key: 'model_name',
sorter: tableSorter(1),
render: (text: string, record: ListItem) => (
<span className="flex items-center">
<AutoTooltip ghost style={{ maxWidth: 400 }}>
@@ -36,7 +34,6 @@ const useModelsColumns = (): Array<{
title: intl.formatMessage({ id: 'usage.table.cluster' }),
dataIndex: ['model', 'identity', 'value', 'cluster_name'],
key: 'cluster_name',
sorter: tableSorter(2),
render: (text: string, record: ListItem) => (
<AutoTooltip ghost>{text || '-'}</AutoTooltip>
)
@@ -60,6 +57,7 @@ const useModelsColumns = (): Array<{
title: intl.formatMessage({ id: 'usage.filter.inputTokens' }),
dataIndex: 'input_tokens',
key: 'input_tokens',
sorter: true,
render: (text: string[], record: ListItem) => (
<AutoTooltip ghost>{text}</AutoTooltip>
)
@@ -68,6 +66,7 @@ const useModelsColumns = (): Array<{
title: intl.formatMessage({ id: 'usage.filter.outputTokens' }),
dataIndex: 'output_tokens',
key: 'output_tokens',
sorter: true,
render: (text: string[], record: ListItem) => (
<AutoTooltip ghost>{text}</AutoTooltip>
)
@@ -76,7 +75,7 @@ const useModelsColumns = (): Array<{
title: intl.formatMessage({ id: 'usage.filter.totalTokens' }),
dataIndex: 'total_tokens',
key: 'total_tokens',
sorter: tableSorter(3),
sorter: true,
ellipsis: {
showTitle: false
},
@@ -86,7 +85,7 @@ const useModelsColumns = (): Array<{
title: intl.formatMessage({ id: 'usage.filter.apiRequests' }),
dataIndex: 'api_requests',
key: 'api_requests',
sorter: tableSorter(3),
sorter: true,
ellipsis: {
showTitle: false
},
@@ -96,7 +95,6 @@ const useModelsColumns = (): Array<{
title: intl.formatMessage({ id: 'usage.table.lastActive' }),
dataIndex: 'last_active',
key: 'last_active',
sorter: tableSorter(3),
ellipsis: {
showTitle: false
},
src/pages/usage/hooks/use-users-columns.tsx
+6 -6
View File
@@ -1,6 +1,5 @@
// 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';
@@ -22,7 +21,6 @@ const useModelsColumns = (): Array<{
title: intl.formatMessage({ id: 'common.table.name' }),
dataIndex: ['user', 'identity', 'value', 'user_name'],
key: 'user_name',
sorter: tableSorter(1),
render: (text: string, record: ListItem) => (
<span className="flex items-center">
<AutoTooltip ghost style={{ maxWidth: 400 }}>
@@ -35,6 +33,7 @@ const useModelsColumns = (): Array<{
title: intl.formatMessage({ id: 'usage.filter.modelsUsed' }),
dataIndex: 'models_called',
key: 'models_called',
sorter: true,
render: (text: string, record: ListItem) => (
<AutoTooltip ghost style={{ maxWidth: 400 }}>
{text || '-'}
@@ -45,7 +44,7 @@ const useModelsColumns = (): Array<{
title: intl.formatMessage({ id: 'usage.table.user.apiKeysUsed' }),
dataIndex: 'api_keys_used',
key: 'api_keys_used',
sorter: tableSorter(2),
sorter: true,
render: (text: string, record: ListItem) => (
<AutoTooltip ghost>{text || '-'}</AutoTooltip>
)
@@ -54,6 +53,7 @@ const useModelsColumns = (): Array<{
title: intl.formatMessage({ id: 'usage.filter.inputTokens' }),
dataIndex: 'input_tokens',
key: 'input_tokens',
sorter: true,
render: (text: string[], record: ListItem) => (
<AutoTooltip ghost>{text}</AutoTooltip>
)
@@ -62,6 +62,7 @@ const useModelsColumns = (): Array<{
title: intl.formatMessage({ id: 'usage.filter.outputTokens' }),
dataIndex: 'output_tokens',
key: 'output_tokens',
sorter: true,
render: (text: string[], record: ListItem) => (
<AutoTooltip ghost>{text}</AutoTooltip>
)
@@ -70,7 +71,7 @@ const useModelsColumns = (): Array<{
title: intl.formatMessage({ id: 'usage.filter.totalTokens' }),
dataIndex: 'total_tokens',
key: 'total_tokens',
sorter: tableSorter(3),
sorter: true,
ellipsis: {
showTitle: false
},
@@ -80,7 +81,7 @@ const useModelsColumns = (): Array<{
title: intl.formatMessage({ id: 'usage.filter.apiRequests' }),
dataIndex: 'api_requests',
key: 'api_requests',
sorter: tableSorter(3),
sorter: true,
ellipsis: {
showTitle: false
},
@@ -90,7 +91,6 @@ const useModelsColumns = (): Array<{
title: intl.formatMessage({ id: 'usage.table.lastActive' }),
dataIndex: 'last_active',
key: 'last_active',
sorter: tableSorter(3),
ellipsis: {
showTitle: false
},
src/pages/usage/tables/apikeys-table.tsx
+15 -3
View File
@@ -32,10 +32,22 @@ const APIKeys: React.FC<{
sort_by: ''
});
const handleTableChange = (pagination: any, filters: any, sorter: any) => {};
const handlePageChange = (page: number, pageSize: number) => {};
const handleTableChange = (pagination: any, filters: any, sorter: any) => {
let sort_by =
sorter.order === 'descend' ? `-${sorter.field}` : sorter.field;
setQueryParams((prev) => ({
...prev,
sort_by
}));
};
const handlePageChange = (page: number, pageSize: number) => {
setQueryParams((prev) => ({
...prev,
page,
perPage: pageSize
}));
};
const columns = useAPIKeys();
const renderEmpty = (type?: string) => {
src/pages/usage/tables/models-table.tsx
+16 -2
View File
@@ -32,9 +32,23 @@ const Models: React.FC<{
sort_by: ''
});
const handleTableChange = (pagination: any, filters: any, sorter: any) => {};
const handleTableChange = (pagination: any, filters: any, sorter: any) => {
console.log('pagination, filters, sorter: ', pagination, filters, sorter);
let sort_by =
sorter.order === 'descend' ? `-${sorter.field}` : sorter.field;
setQueryParams((prev) => ({
...prev,
sort_by
}));
};
const handlePageChange = (page: number, pageSize: number) => {};
const handlePageChange = (page: number, pageSize: number) => {
setQueryParams((prev) => ({
...prev,
page,
perPage: pageSize
}));
};
const columns = useUsersColumns();
src/pages/usage/tables/users-table.tsx
+15 -2
View File
@@ -32,9 +32,22 @@ const Users: React.FC<{
sort_by: ''
});
const handleTableChange = (pagination: any, filters: any, sorter: any) => {};
const handleTableChange = (pagination: any, filters: any, sorter: any) => {
let sort_by =
sorter.order === 'descend' ? `-${sorter.field}` : sorter.field;
setQueryParams((prev) => ({
...prev,
sort_by
}));
};
const handlePageChange = (page: number, pageSize: number) => {};
const handlePageChange = (page: number, pageSize: number) => {
setQueryParams((prev) => ({
...prev,
page,
perPage: pageSize
}));
};
const columns = useUsersColumns();