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

feat: table list sorter

Browse Source
This commit is contained in:
jialin
2025-12-21 21:37:05 +08:00
parent 6738dfe0d3
commit 23a761226a
25 changed files with 417 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/resources/components/gpus.tsx
+2 -1
View File
@@ -1,5 +1,6 @@
import IconFont from '@/components/icon-font';
import { FilterBar } from '@/components/page-tools';
import { TABLE_SORT_DIRECTIONS } from '@/config/settings';
import useTableFetch from '@/hooks/use-table-fetch';
import NoResult from '@/pages/_components/no-result';
import PageBox from '@/pages/_components/page-box';
@@ -102,7 +103,7 @@ const GPUList: React.FC = () => {
<Table
columns={columns}
style={{ width: '100%' }}
sortDirections={['ascend', 'descend', 'ascend']}
sortDirections={TABLE_SORT_DIRECTIONS}
tableLayout={dataSource.loadend ? 'auto' : 'fixed'}
dataSource={dataSource.dataList}
loading={dataSource.loading}
src/pages/resources/components/model-files.tsx
+6 -1
View File
@@ -3,6 +3,7 @@ import DeleteModal from '@/components/delete-modal';
import IconFont from '@/components/icon-font';
import { FilterBar } from '@/components/page-tools';
import { PageAction } from '@/config';
import { TABLE_SORT_DIRECTIONS } from '@/config/settings';
import useAppUtils from '@/hooks/use-app-utils';
import useBodyScroll from '@/hooks/use-body-scroll';
import useTableFetch from '@/hooks/use-table-fetch';
@@ -67,7 +68,10 @@ const ModelFiles = () => {
deleteAPI: deleteModelFile,
API: MODEL_FILES_API,
watch: true,
contentForDelete: 'resources.modelfiles.modelfile'
contentForDelete: 'resources.modelfiles.modelfile',
defaultQueryParams: {
sort_by: '-created_at'
}
});
const intl = useIntl();
const { showSuccess } = useAppUtils();
@@ -316,6 +320,7 @@ const ModelFiles = () => {
<Table
rowKey="id"
tableLayout="fixed"
sortDirections={TABLE_SORT_DIRECTIONS}
style={{ width: '100%' }}
onChange={handleTableChange}
dataSource={dataSource.dataList}
src/pages/resources/components/workers.tsx
+6 -2
View File
@@ -1,5 +1,6 @@
import DeleteModal from '@/components/delete-modal';
import { FilterBar } from '@/components/page-tools';
import { TABLE_SORT_DIRECTIONS } from '@/config/settings';
import useTableFetch from '@/hooks/use-table-fetch';
import PageBox from '@/pages/_components/page-box';
import { queryClusterList } from '@/pages/cluster-management/apis';
@@ -51,7 +52,10 @@ const Workers: React.FC = () => {
events: ['UPDATE', 'DELETE', 'INSERT'],
contentForDelete: 'resources.worker',
watch: true,
API: WORKERS_API
API: WORKERS_API,
defaultQueryParams: {
sort_by: '-created_at'
}
});
const { TerminalPanel, terminals, handleAddTerminal } = useTerminalTabs();
const { MaintenanceModal, handleStopMaintenance, setOpenStatus } =
@@ -270,7 +274,7 @@ const Workers: React.FC = () => {
<ConfigProvider renderEmpty={renderEmpty}>
<Table
columns={columns}
sortDirections={['ascend', 'descend', 'ascend']}
sortDirections={TABLE_SORT_DIRECTIONS}
tableLayout={dataSource.loadend ? 'auto' : 'fixed'}
style={{ width: '100%' }}
dataSource={dataSource.dataList}
src/pages/resources/hooks/use-files-columns.tsx
+17 -11
View File
@@ -255,10 +255,7 @@ const getWorkerName = (
const useFilesColumns = (props: {
handleSelect: (action: string, record: ListItem) => void;
workersList: Global.BaseOption<number>[];
sortOrder: {
order?: 'ascend' | 'descend' | null;
columnKey?: string;
};
sortOrder: string[];
}): ColumnsType<ListItem> => {
const { workersList, sortOrder, handleSelect } = props;
const intl = useIntl();
@@ -268,6 +265,9 @@ const useFilesColumns = (props: {
{
title: intl.formatMessage({ id: 'models.form.source' }),
dataIndex: 'source',
sorter: {
multiple: 1
},
ellipsis: {
showTitle: false
},
@@ -285,7 +285,10 @@ const useFilesColumns = (props: {
},
{
title: intl.formatMessage({ id: 'resources.worker' }),
dataIndex: 'worker_name',
dataIndex: 'worker_id',
sorter: {
multiple: 2
},
width: '18%',
ellipsis: {
showTitle: false
@@ -309,6 +312,9 @@ const useFilesColumns = (props: {
{
title: intl.formatMessage({ id: 'resources.modelfiles.form.path' }),
dataIndex: 'resolved_paths',
sorter: {
multiple: 3
},
width: '20%',
ellipsis: {
showTitle: false
@@ -336,15 +342,15 @@ const useFilesColumns = (props: {
{
title: intl.formatMessage({ id: 'common.table.createTime' }),
dataIndex: 'created_at',
sorter: false,
defaultSortOrder: 'descend',
key: 'created_at',
sorter: {
multiple: 4
},
width: 180,
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')}
@@ -363,7 +369,7 @@ const useFilesColumns = (props: {
)
}
];
}, [intl, sortOrder, workersList, handleSelect]);
}, [intl, workersList, handleSelect]);
};
export default useFilesColumns;
src/pages/resources/hooks/use-gpu-columns.tsx
+28 -15
View File
@@ -39,10 +39,7 @@ const useGPUColumns = (props: {
loadend: boolean;
firstLoad: boolean;
clusterList: Global.BaseOption<number>[];
sortOrder: {
order?: 'ascend' | 'descend' | null;
columnKey?: string;
};
sortOrder: string[];
}): ColumnsType<GPUDeviceItem> => {
const { clusterList, loadend, firstLoad, sortOrder } = props;
const intl = useIntl();
@@ -53,11 +50,9 @@ 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,
sorter: {
multiple: 1
},
render: (text: string, record: GPUDeviceItem) => (
<AutoTooltip ghost maxWidth={240}>
{text}
@@ -67,11 +62,17 @@ const useGPUColumns = (props: {
{
title: intl.formatMessage({ id: 'resources.table.index' }),
dataIndex: 'index',
sorter: {
multiple: 2
},
render: (text: string, record: GPUDeviceItem) => <span>{text}</span>
},
{
title: intl.formatMessage({ id: 'clusters.title' }),
dataIndex: 'cluster_id',
sorter: {
multiple: 3
},
ellipsis: {
showTitle: false
},
@@ -84,6 +85,9 @@ const useGPUColumns = (props: {
{
title: intl.formatMessage({ id: 'resources.worker' }),
dataIndex: 'worker_name',
sorter: {
multiple: 4
},
ellipsis: {
showTitle: false
},
@@ -93,7 +97,10 @@ const useGPUColumns = (props: {
},
{
title: intl.formatMessage({ id: 'resources.table.vender' }),
dataIndex: 'vendor'
dataIndex: 'vendor',
sorter: {
multiple: 5
}
},
{
title: `${intl.formatMessage({ id: 'resources.table.temperature' })} (°C)`,
@@ -104,8 +111,11 @@ const useGPUColumns = (props: {
},
{
title: `${intl.formatMessage({ id: 'resources.table.utilization' })}`,
dataIndex: 'gpuUtil',
key: 'gpuUtil',
dataIndex: 'core.utilization_rate',
key: 'core.utilization_rate',
sorter: {
multiple: 6
},
render: (text: number, record: GPUDeviceItem) => {
return (
<>
@@ -122,8 +132,11 @@ const useGPUColumns = (props: {
},
{
title: intl.formatMessage({ id: 'resources.table.vramutilization' }),
dataIndex: 'VRAM',
key: 'VRAM',
dataIndex: 'memory.utilization_rate',
key: 'memory.utilization_rate',
sorter: {
multiple: 7
},
render: (text: number, record: GPUDeviceItem, index: number) => {
return (
<ProgressBar
@@ -147,7 +160,7 @@ const useGPUColumns = (props: {
}
}
];
}, [intl, sortOrder, clusterList, loadend, firstLoad]);
}, [intl, clusterList, loadend, firstLoad]);
};
export default useGPUColumns;
src/pages/resources/hooks/use-worker-columns.tsx
+18 -11
View File
@@ -239,10 +239,7 @@ const useWorkerColumns = ({
};
loadend: boolean;
firstLoad: boolean;
sortOrder: {
order?: 'ascend' | 'descend' | null;
columnKey?: string;
};
sortOrder: string[];
handleSelect: (action: string, record: ListItem) => void;
}): ColumnsType<ListItem> => {
const intl = useIntl();
@@ -277,11 +274,9 @@ const useWorkerColumns = ({
title: intl.formatMessage({ id: 'common.table.name' }),
dataIndex: 'name',
width: 100,
sorter: false,
sortOrder:
sortOrder.order && sortOrder.columnKey === 'name'
? sortOrder.order
: null,
sorter: {
multiple: 1
},
render: (text: string) => (
<AutoTooltip ghost maxWidth={240}>
{text}
@@ -306,6 +301,9 @@ const useWorkerColumns = ({
{
title: intl.formatMessage({ id: 'common.table.status' }),
dataIndex: 'state',
sorter: {
multiple: 2
},
render: (_, record) => (
<StatusTag
maxTooltipWidth={400}
@@ -321,6 +319,9 @@ const useWorkerColumns = ({
{
title: 'IP',
dataIndex: 'ip',
sorter: {
multiple: 3
},
render: (text: string, record) => (
<AutoTooltip ghost maxWidth={240}>
{renderIP(text, record)}
@@ -329,7 +330,10 @@ const useWorkerColumns = ({
},
{
title: 'CPU',
dataIndex: 'cpu',
dataIndex: 'status.cpu.utilization_rate',
sorter: {
multiple: 4
},
render: (text: string, record) =>
statusAvailable(record) ? (
<ProgressBar
@@ -341,7 +345,10 @@ const useWorkerColumns = ({
},
{
title: intl.formatMessage({ id: 'resources.table.memory' }),
dataIndex: 'memory',
dataIndex: 'status.memory.utilization_rate',
sorter: {
multiple: 5
},
render: (_, record) =>
statusAvailable(record) ? (
<ProgressBar