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
2025-12-11 13:33:41 +08:00
parent 3328828da6
commit b38bc8a207
15 changed files with 106 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/seal-table/styles/header.less
+1
View File
@@ -4,6 +4,7 @@
display: flex;
align-items: center;
justify-content: flex-start;
height: 50px;
padding-inline: var(--ant-table-cell-padding-inline);
&::before {
src/hooks/use-table-fetch.ts
+10 -4
View File
@@ -1,6 +1,5 @@
import useSetChunkRequest from '@/hooks/use-chunk-request';
import useTableRowSelection from '@/hooks/use-table-row-selection';
import useTableSort from '@/hooks/use-table-sort';
import useUpdateChunkedList from '@/hooks/use-update-chunk-list';
import { handleBatchRequest } from '@/utils';
import _ from 'lodash';
@@ -52,8 +51,12 @@ export default function useTableFetch<T>(
const chunkRequedtRef = useRef<any>(null);
const modalRef = useRef<any>(null);
const rowSelection = useTableRowSelection();
const { sortOrder, setSortOrder } = useTableSort({
defaultSortOrder: 'descend'
const [sortOrder, setSortOrder] = useState<{
order?: 'ascend' | 'descend' | null;
columnKey?: string;
}>({
order: null,
columnKey: undefined
});
// for skeleton loading
@@ -235,7 +238,10 @@ export default function useTableFetch<T>(
};
const handleTableChange = (pagination: any, filters: any, sorter: any) => {
setSortOrder(sorter.order);
setSortOrder({
order: sorter.order,
columnKey: sorter.columnKey || sorter.field
});
};
const handleSearch = () => {
src/pages/api-keys/hooks/use-keys-columns.tsx
+8 -3
View File
@@ -3,7 +3,6 @@ import AutoTooltip from '@/components/auto-tooltip';
import DropdownButtons from '@/components/drop-down-buttons';
import icons from '@/components/icon-font/icons';
import { useIntl } from '@umijs/max';
import type { SortOrder } from 'antd/es/table/interface';
import { ColumnsType } from 'antd/lib/table';
import dayjs from 'dayjs';
import { useMemo } from 'react';
@@ -11,7 +10,10 @@ import { ListItem } from '../config/types';
interface ColumnsHookProps {
handleSelect: (val: string, record: ListItem) => void;
sortOrder: SortOrder;
sortOrder: {
order?: 'ascend' | 'descend' | null;
columnKey?: string;
};
}
const actionList: Global.ActionItem[] = [
@@ -91,7 +93,10 @@ const useModelsColumns = ({
dataIndex: 'created_at',
key: 'created_at',
defaultSortOrder: 'descend',
sortOrder,
sortOrder:
sortOrder.order && sortOrder.columnKey === 'created_at'
? sortOrder.order
: null,
sorter: false,
ellipsis: {
showTitle: false
src/pages/api-keys/index.tsx
+1
View File
@@ -139,6 +139,7 @@ const APIKeys: React.FC = () => {
dataSource={dataSource.dataList}
rowSelection={rowSelection}
loading={dataSource.loading}
sortDirections={['ascend', 'descend', 'ascend']}
rowKey="id"
onChange={handleTableChange}
pagination={{
src/pages/cluster-management/hooks/use-credential-columns.tsx
+8 -2
View File
@@ -10,7 +10,10 @@ import { ProviderLabelMap, credentialActionList } from '../config';
import { CredentialListItem as ListItem } from '../config/types';
const useCredentialColumns = (
sortOrder: SortOrder,
sortOrder: {
order?: SortOrder;
columnKey?: string;
},
handleSelect: (val: string, record: ListItem) => void
): ColumnsType<ListItem> => {
const intl = useIntl();
@@ -36,7 +39,10 @@ const useCredentialColumns = (
dataIndex: 'created_at',
showSorterTooltip: false,
defaultSortOrder: 'descend',
sortOrder: sortOrder,
sortOrder:
sortOrder.order && sortOrder.columnKey === 'created_at'
? sortOrder.order
: null,
sorter: false,
ellipsis: {
showTitle: false
src/pages/llmodels/components/table-list.tsx
+10 -4
View File
@@ -12,7 +12,6 @@ import { PageActionType } from '@/config/types';
import useBodyScroll from '@/hooks/use-body-scroll';
import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
import useTableRowSelection from '@/hooks/use-table-row-selection';
import useTableSort from '@/hooks/use-table-sort';
import NoResult from '@/pages/_components/no-result';
import PageBox from '@/pages/_components/page-box';
import { ListItem as WorkerListItem } from '@/pages/resources/config/types';
@@ -148,8 +147,12 @@ const Models: React.FC<ModelsProps> = ({
removeExpandedRowKey,
expandedRowKeys
} = useExpandedRowKeys(expandAtom);
const { sortOrder, setSortOrder } = useTableSort({
defaultSortOrder: 'descend'
const [sortOrder, setSortOrder] = useState<{
columnKey: string;
order: 'ascend' | 'descend' | null;
}>({
order: null,
columnKey: ''
});
const [apiAccessInfo, setAPIAccessInfo] = useState<any>({
@@ -216,7 +219,10 @@ const Models: React.FC<ModelsProps> = ({
};
const handleOnSort = (dataIndex: string, order: any) => {
setSortOrder(order);
setSortOrder({
columnKey: dataIndex,
order: order
});
};
const handleOnCell = useMemoizedFn(async (record: any, extra: any) => {
src/pages/llmodels/hooks/use-models-columns.tsx
+13 -2
View File
@@ -34,7 +34,10 @@ const setModelActionList = (record: any) => {
interface ModelsColumnsHookProps {
handleSelect: (val: string, record: ListItem) => void;
sortOrder: SortOrder;
sortOrder: {
columnKey: string;
order: SortOrder;
};
clusterList: Global.BaseOption<
number,
{ provider: string; state: string | number }
@@ -54,6 +57,11 @@ const useModelsColumns = ({
title: intl.formatMessage({ id: 'common.table.name' }),
dataIndex: 'name',
key: 'name',
sortOrder:
sortOrder.order && sortOrder.columnKey === 'name'
? sortOrder.order
: null,
sorter: false,
span: 5,
render: (text: string, record: ListItem) => (
<span className="flex-center" style={{ maxWidth: '100%' }}>
@@ -122,7 +130,10 @@ const useModelsColumns = ({
dataIndex: 'created_at',
key: 'created_at',
defaultSortOrder: 'descend',
sortOrder,
sortOrder:
sortOrder.order && sortOrder.columnKey === 'created_at'
? sortOrder.order
: null,
sorter: false,
span: 4,
render: (text: number) => (
src/pages/resources/components/gpus.tsx
+3
View File
@@ -16,6 +16,7 @@ const GPUList: React.FC = () => {
dataSource,
queryParams,
extraStatus,
sortOrder,
handlePageChange,
handleTableChange,
handleQueryChange,
@@ -71,6 +72,7 @@ const GPUList: React.FC = () => {
const columns = useGPUColumns({
clusterList,
loadend: dataSource.loadend,
sortOrder,
firstLoad: extraStatus.firstLoad
});
@@ -100,6 +102,7 @@ const GPUList: React.FC = () => {
<Table
columns={columns}
style={{ width: '100%' }}
sortDirections={['ascend', 'descend', 'ascend']}
tableLayout={dataSource.loadend ? 'auto' : 'fixed'}
dataSource={dataSource.dataList}
loading={dataSource.loading}
src/pages/resources/components/model-files.tsx
+2
View File
@@ -52,6 +52,7 @@ const ModelFiles = () => {
dataSource,
rowSelection,
queryParams,
sortOrder,
modalRef,
fetchData,
handleDelete,
@@ -276,6 +277,7 @@ const ModelFiles = () => {
const columns = useFilesColumns({
handleSelect,
sortOrder,
workersList
});
src/pages/resources/components/workers.tsx
+3
View File
@@ -36,6 +36,7 @@ const Workers: React.FC = () => {
queryParams,
modalRef,
extraStatus,
sortOrder,
handleDelete,
handleDeleteBatch,
fetchData,
@@ -238,6 +239,7 @@ const Workers: React.FC = () => {
clusterData,
loadend: dataSource.loadend,
firstLoad: extraStatus.firstLoad,
sortOrder,
handleSelect
});
@@ -267,6 +269,7 @@ const Workers: React.FC = () => {
<ConfigProvider renderEmpty={renderEmpty}>
<Table
columns={columns}
sortDirections={['ascend', 'descend', 'ascend']}
tableLayout={dataSource.loadend ? 'auto' : 'fixed'}
style={{ width: '100%' }}
dataSource={dataSource.dataList}
src/pages/resources/hooks/use-files-columns.tsx
+10 -2
View File
@@ -255,8 +255,12 @@ const getWorkerName = (
const useFilesColumns = (props: {
handleSelect: (action: string, record: ListItem) => void;
workersList: Global.BaseOption<number>[];
sortOrder: {
order?: 'ascend' | 'descend' | null;
columnKey?: string;
};
}): ColumnsType<ListItem> => {
const { workersList, handleSelect } = props;
const { workersList, sortOrder, handleSelect } = props;
const intl = useIntl();
return useMemo(() => {
@@ -337,6 +341,10 @@ const useFilesColumns = (props: {
ellipsis: {
showTitle: false
},
sortOrder:
sortOrder.order && sortOrder.columnKey === 'created_at'
? sortOrder.order
: null,
render: (text: number) => (
<AutoTooltip ghost minWidth={20}>
{dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
@@ -355,7 +363,7 @@ const useFilesColumns = (props: {
)
}
];
}, [intl, workersList, handleSelect]);
}, [intl, sortOrder, workersList, handleSelect]);
};
export default useFilesColumns;
src/pages/resources/hooks/use-gpu-columns.tsx
+11 -2
View File
@@ -39,8 +39,12 @@ const useGPUColumns = (props: {
loadend: boolean;
firstLoad: boolean;
clusterList: Global.BaseOption<number>[];
sortOrder: {
order?: 'ascend' | 'descend' | null;
columnKey?: string;
};
}): ColumnsType<GPUDeviceItem> => {
const { clusterList, loadend, firstLoad } = props;
const { clusterList, loadend, firstLoad, sortOrder } = props;
const intl = useIntl();
return useMemo(() => {
@@ -49,6 +53,11 @@ const useGPUColumns = (props: {
title: intl.formatMessage({ id: 'common.table.name' }),
dataIndex: 'name',
width: 240,
sorter: false,
sortOrder:
sortOrder.order && sortOrder.columnKey === 'name'
? sortOrder.order
: null,
render: (text: string, record: GPUDeviceItem) => (
<AutoTooltip ghost maxWidth={240}>
{text}
@@ -138,7 +147,7 @@ const useGPUColumns = (props: {
}
}
];
}, [intl, clusterList, loadend, firstLoad]);
}, [intl, sortOrder, clusterList, loadend, firstLoad]);
};
export default useGPUColumns;
src/pages/resources/hooks/use-worker-columns.tsx
+11 -1
View File
@@ -212,6 +212,7 @@ const useWorkerColumns = ({
clusterData,
loadend,
firstLoad,
sortOrder,
handleSelect
}: {
clusterData: {
@@ -220,6 +221,10 @@ const useWorkerColumns = ({
};
loadend: boolean;
firstLoad: boolean;
sortOrder: {
order?: 'ascend' | 'descend' | null;
columnKey?: string;
};
handleSelect: (action: string, record: ListItem) => void;
}): ColumnsType<ListItem> => {
const intl = useIntl();
@@ -230,6 +235,11 @@ const useWorkerColumns = ({
title: intl.formatMessage({ id: 'common.table.name' }),
dataIndex: 'name',
width: 100,
sorter: false,
sortOrder:
sortOrder.order && sortOrder.columnKey === 'name'
? sortOrder.order
: null,
render: (text: string) => (
<AutoTooltip ghost maxWidth={240}>
{text}
@@ -352,7 +362,7 @@ const useWorkerColumns = ({
)
}
],
[intl, clusterData, loadend, firstLoad, handleSelect]
[intl, sortOrder, clusterData, loadend, firstLoad, handleSelect]
);
};
src/pages/users/hooks/use-users-columns.tsx
+14 -3
View File
@@ -6,7 +6,6 @@ import icons from '@/components/icon-font/icons';
import { useIntl, useModel } from '@umijs/max';
import { useMemoizedFn } from 'ahooks';
import { Tag } from 'antd';
import type { SortOrder } from 'antd/es/table/interface';
import { ColumnsType } from 'antd/lib/table';
import dayjs from 'dayjs';
import { useMemo } from 'react';
@@ -14,7 +13,10 @@ import { ListItem } from '../config/types';
interface ColumnsHookProps {
handleSelect: (val: string, record: ListItem) => void;
sortOrder: SortOrder;
sortOrder: {
order?: 'ascend' | 'descend' | null;
columnKey?: string;
};
}
const actionList: Global.ActionItem[] = [
@@ -69,6 +71,12 @@ const useUsersColumns = ({
title: intl.formatMessage({ id: 'common.table.name' }),
dataIndex: 'username',
key: 'username',
defaultSortOrder: 'descend',
sortOrder:
sortOrder.order && sortOrder.columnKey === 'username'
? sortOrder.order
: null,
sorter: false,
render: (text: string, record: ListItem) => (
<AutoTooltip ghost style={{ maxWidth: 400 }}>
{text}
@@ -177,7 +185,10 @@ const useUsersColumns = ({
key: 'created_at',
defaultSortOrder: 'descend',
showSorterTooltip: false,
sortOrder,
sortOrder:
sortOrder.order && sortOrder.columnKey === 'created_at'
? sortOrder.order
: null,
sorter: false,
ellipsis: {
showTitle: false
src/pages/users/index.tsx
+1
View File
@@ -188,6 +188,7 @@ const Users: React.FC = () => {
dataSource={dataList}
rowSelection={rowSelection}
loading={dataSource.loading}
sortDirections={['ascend', 'descend', 'ascend']}
rowKey="id"
onChange={handleTableChange}
pagination={{