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/api-keys/hooks/use-keys-columns.tsx
+11 -10
View File
@@ -10,10 +10,7 @@ import { ListItem } from '../config/types';
interface ColumnsHookProps {
handleSelect: (val: string, record: ListItem) => void;
sortOrder: {
order?: 'ascend' | 'descend' | null;
columnKey?: string;
};
sortOrder: string;
}
const actionList: Global.ActionItem[] = [
@@ -42,6 +39,9 @@ const useModelsColumns = ({
title: intl.formatMessage({ id: 'common.table.name' }),
dataIndex: 'name',
key: 'name',
sorter: {
multiple: 1
},
render: (text: string, record: ListItem) => (
<AutoTooltip ghost style={{ maxWidth: 400 }}>
{text}
@@ -52,6 +52,9 @@ const useModelsColumns = ({
title: intl.formatMessage({ id: 'apikeys.form.expiretime' }),
dataIndex: 'expires_at',
key: 'expires_at',
sorter: {
multiple: 2
},
render: (text: string, record: ListItem) => (
<AutoTooltip ghost>
{text
@@ -93,11 +96,9 @@ const useModelsColumns = ({
dataIndex: 'created_at',
key: 'created_at',
defaultSortOrder: 'descend',
sortOrder:
sortOrder.order && sortOrder.columnKey === 'created_at'
? sortOrder.order
: null,
sorter: false,
sorter: {
multiple: 3
},
ellipsis: {
showTitle: false
},
@@ -120,7 +121,7 @@ const useModelsColumns = ({
)
}
];
}, [sortOrder, intl, handleSelect]);
}, [intl, handleSelect]);
};
export default useModelsColumns;
src/pages/api-keys/index.tsx
+6 -2
View File
@@ -17,6 +17,7 @@ import useKeysColumns from './hooks/use-keys-columns';
const APIKeys: React.FC = () => {
const {
TABLE_SORT_DIRECTIONS,
dataSource,
rowSelection,
queryParams,
@@ -32,7 +33,10 @@ const APIKeys: React.FC = () => {
} = useTableFetch<ListItem>({
fetchAPI: queryApisKeysList,
deleteAPI: deleteApisKey,
contentForDelete: 'apikeys.table.apikeys'
contentForDelete: 'apikeys.table.apikeys',
defaultQueryParams: {
sort_by: '-created_at'
}
});
const intl = useIntl();
@@ -139,7 +143,7 @@ const APIKeys: React.FC = () => {
dataSource={dataSource.dataList}
rowSelection={rowSelection}
loading={dataSource.loading}
sortDirections={['ascend', 'descend', 'ascend']}
sortDirections={TABLE_SORT_DIRECTIONS}
rowKey="id"
onChange={handleTableChange}
pagination={{
src/pages/cluster-management/clusters.tsx
+13 -1
View File
@@ -4,7 +4,9 @@ import IconFont from '@/components/icon-font';
import { FilterBar } from '@/components/page-tools';
import SealTable from '@/components/seal-table';
import TableContext from '@/components/seal-table/table-context';
import { TableOrder } from '@/components/seal-table/types';
import { PageAction } from '@/config';
import { TABLE_SORT_DIRECTIONS } from '@/config/settings';
import type { PageActionType } from '@/config/types';
import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
import useTableFetch from '@/hooks/use-table-fetch';
@@ -54,6 +56,7 @@ const Clusters: React.FC = () => {
rowSelection,
queryParams,
modalRef,
handleTableChange,
handleDelete,
handleDeleteBatch,
fetchData,
@@ -65,7 +68,10 @@ const Clusters: React.FC = () => {
deleteAPI: deleteCluster,
watch: true,
API: CLUSTERS_API,
contentForDelete: 'menu.clusterManagement.clusters'
contentForDelete: 'menu.clusterManagement.clusters',
defaultQueryParams: {
sort_by: '-created_at'
}
});
const { watchDataList: allWorkerPoolList } = useWatchList(WORKER_POOLS_API);
const [expandAtom] = useAtom(expandKeysAtom);
@@ -227,6 +233,10 @@ const Clusters: React.FC = () => {
}
);
const handleOnSortChange = (order: TableOrder | Array<TableOrder>) => {
handleTableChange({}, {}, order);
};
const setDisableExpand = (row: ClusterListItem) => {
return (
row.provider !== ProviderValueMap.DigitalOcean ||
@@ -314,10 +324,12 @@ const Clusters: React.FC = () => {
<SealTable
rowKey="id"
loadChildren={getWorkerPoolList}
sortDirections={TABLE_SORT_DIRECTIONS}
expandedRowKeys={expandedRowKeys}
onExpand={handleExpandChange}
onExpandAll={handleToggleExpandAll}
renderChildren={renderChildren}
onTableSort={handleOnSortChange}
dataSource={dataSource.dataList}
loading={dataSource.loading}
loadend={dataSource.loadend}
src/pages/cluster-management/credentials.tsx
+4 -1
View File
@@ -58,7 +58,10 @@ const Credentials: React.FC = () => {
} = useTableFetch<ListItem>({
fetchAPI: queryCredentialList,
deleteAPI: deleteCredential,
contentForDelete: 'menu.clusterManagement.credentials'
contentForDelete: 'menu.clusterManagement.credentials',
defaultQueryParams: {
sort_by: '-created_at'
}
});
const [isFromCluster, setIsFromCluster] = useAtom(fromClusterCreationAtom);
const intl = useIntl();
src/pages/cluster-management/hooks/use-cluster-columns.tsx
+10
View File
@@ -33,6 +33,9 @@ const useClusterColumns = (
{
title: intl.formatMessage({ id: 'common.table.name' }),
dataIndex: 'name',
sorter: {
multiple: 1
},
span: 3,
render: (text: string, record: ClusterListItem) => (
<AutoTooltip ghost>{text}</AutoTooltip>
@@ -41,6 +44,9 @@ const useClusterColumns = (
{
title: intl.formatMessage({ id: 'clusters.table.provider' }),
dataIndex: 'provider',
sorter: {
multiple: 2
},
span: 4,
render: (value: string) => (
<AutoTooltip ghost minWidth={20}>
@@ -86,6 +92,10 @@ const useClusterColumns = (
{
title: intl.formatMessage({ id: 'common.table.createTime' }),
dataIndex: 'created_at',
defaultSortOrder: 'descend',
sorter: {
multiple: 5
},
span: 4,
render: (value: string) => (
<AutoTooltip ghost minWidth={20}>
src/pages/cluster-management/hooks/use-credential-columns.tsx
+7 -5
View File
@@ -23,6 +23,9 @@ const useCredentialColumns = (
{
title: intl.formatMessage({ id: 'common.table.name' }),
dataIndex: 'name',
sorter: {
multiple: 1
},
render: (text: string) => (
<AutoTooltip ghost minWidth={20}>
{text}
@@ -32,6 +35,7 @@ const useCredentialColumns = (
{
title: intl.formatMessage({ id: 'clusters.table.provider' }),
dataIndex: 'provider',
sorter: false,
render: (value: string) => <span>{ProviderLabelMap[value]}</span>
},
{
@@ -39,11 +43,9 @@ const useCredentialColumns = (
dataIndex: 'created_at',
showSorterTooltip: false,
defaultSortOrder: 'descend',
sortOrder:
sortOrder.order && sortOrder.columnKey === 'created_at'
? sortOrder.order
: null,
sorter: false,
sorter: {
multiple: 3
},
ellipsis: {
showTitle: false
},
src/pages/llmodels/components/table-list.tsx
+10 -13
View File
@@ -6,7 +6,9 @@ import { PageSize } from '@/components/logs-viewer/config';
import PageTools from '@/components/page-tools';
import BaseSelect from '@/components/seal-form/base/select';
import SealTable from '@/components/seal-table';
import { TableOrder } from '@/components/seal-table/types';
import { PageAction } from '@/config';
import { TABLE_SORT_DIRECTIONS } from '@/config/settings';
import { PageActionType } from '@/config/types';
import useBodyScroll from '@/hooks/use-body-scroll';
import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
@@ -75,6 +77,8 @@ interface ModelsProps {
handleOnToggleExpandAll: () => void;
onStop?: (ids: number[]) => void;
onStart?: () => void;
onTableSort?: (order: TableOrder | Array<TableOrder>) => void;
sortOrder: string[];
queryParams: {
page: number;
perPage: number;
@@ -114,6 +118,8 @@ const Models: React.FC<ModelsProps> = ({
handleClusterChange,
onStop,
onStart,
onTableSort,
sortOrder,
deleteIds,
dataSource,
queryParams,
@@ -148,13 +154,6 @@ const Models: React.FC<ModelsProps> = ({
removeExpandedRowKey,
expandedRowKeys
} = useExpandedRowKeys(expandAtom);
const [sortOrder, setSortOrder] = useState<{
columnKey: string;
order: 'ascend' | 'descend' | null;
}>({
order: null,
columnKey: ''
});
const [apiAccessInfo, setAPIAccessInfo] = useState<any>({
show: false,
@@ -219,11 +218,8 @@ const Models: React.FC<ModelsProps> = ({
currentData.current = data;
};
const handleOnSort = (dataIndex: string, order: any) => {
setSortOrder({
columnKey: dataIndex,
order: order
});
const handleOnSort = (order: TableOrder | Array<TableOrder>) => {
onTableSort?.(order);
};
const handleOnCell = useMemoizedFn(async (record: any, extra: any) => {
@@ -710,6 +706,7 @@ const Models: React.FC<ModelsProps> = ({
<SealTable
columns={columns}
sortDirections={TABLE_SORT_DIRECTIONS}
dataSource={dataSource}
rowSelection={rowSelection}
expandedRowKeys={expandedRowKeys}
@@ -720,7 +717,7 @@ const Models: React.FC<ModelsProps> = ({
rowKey="id"
childParentKey="model_id"
expandable={true}
onSort={handleOnSort}
onTableSort={handleOnSort}
onCell={handleOnCell}
pollingChildren={false}
watchChildren={true}
src/pages/llmodels/hooks/use-models-columns.tsx
+20 -19
View File
@@ -6,7 +6,6 @@ import { OPENAI_COMPATIBLE } from '@/config/settings';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Tooltip } from 'antd';
import type { SortOrder } from 'antd/es/table/interface';
import dayjs from 'dayjs';
import _ from 'lodash';
import { useMemo } from 'react';
@@ -34,10 +33,7 @@ const setModelActionList = (record: any) => {
interface ModelsColumnsHookProps {
handleSelect: (val: string, record: ListItem) => void;
sortOrder: {
columnKey: string;
order: SortOrder;
};
sortOrder: string[];
clusterList: Global.BaseOption<
number,
{ provider: string; state: string | number }
@@ -57,11 +53,9 @@ const useModelsColumns = ({
title: intl.formatMessage({ id: 'common.table.name' }),
dataIndex: 'name',
key: 'name',
sortOrder:
sortOrder.order && sortOrder.columnKey === 'name'
? sortOrder.order
: null,
sorter: false,
sorter: {
multiple: 1
},
span: 5,
render: (text: string, record: ListItem) => (
<span className="flex-center" style={{ maxWidth: '100%' }}>
@@ -74,8 +68,11 @@ const useModelsColumns = ({
},
{
title: intl.formatMessage({ id: 'clusters.title' }),
dataIndex: 'cluster',
key: 'cluster',
dataIndex: 'cluster_id',
key: 'cluster_id',
sorter: {
multiple: 2
},
span: 3,
render: (text: string, record: ListItem) => (
<span className="flex flex-column" style={{ width: '100%' }}>
@@ -90,6 +87,9 @@ const useModelsColumns = ({
title: intl.formatMessage({ id: 'models.form.source' }),
dataIndex: 'source',
key: 'source',
sorter: {
multiple: 3
},
span: 5,
render: (text: string, record: ListItem) => (
<span className="flex flex-column" style={{ width: '100%' }}>
@@ -111,9 +111,12 @@ const useModelsColumns = ({
<QuestionCircleOutlined className="m-l-5" />
</Tooltip>
),
dataIndex: 'replicas',
key: 'replicas',
dataIndex: 'ready_replicas',
key: 'ready_replicas',
align: 'center',
sorter: {
multiple: 4
},
span: 4,
editable: {
valueType: 'number',
@@ -130,11 +133,9 @@ const useModelsColumns = ({
dataIndex: 'created_at',
key: 'created_at',
defaultSortOrder: 'descend',
sortOrder:
sortOrder.order && sortOrder.columnKey === 'created_at'
? sortOrder.order
: null,
sorter: false,
sorter: {
multiple: 5
},
span: 4,
render: (text: number) => (
<AutoTooltip ghost>
src/pages/llmodels/index.tsx
+25 -1
View File
@@ -1,5 +1,7 @@
import TableContext from '@/components/seal-table/table-context';
import { TableOrder } from '@/components/seal-table/types';
import useSetChunkRequest from '@/hooks/use-chunk-request';
import { useTableMultiSort } from '@/hooks/use-table-sort';
import useUpdateChunkedList from '@/hooks/use-update-chunk-list';
import { useMemoizedFn } from 'ahooks';
import _ from 'lodash';
@@ -15,6 +17,7 @@ import TableList from './components/table-list';
import { ListItem } from './config/types';
const Models: React.FC = () => {
const { sortOrder, handleMultiSortChange } = useTableMultiSort();
const { setChunkRequest, createAxiosToken } = useSetChunkRequest();
const { setChunkRequest: setModelInstanceChunkRequest } =
useSetChunkRequest();
@@ -43,7 +46,8 @@ const Models: React.FC = () => {
perPage: 10,
search: '',
cluster_id: 0,
categories: []
categories: [],
sort_by: '-created_at'
});
const { updateChunkedList, cacheDataListRef } = useUpdateChunkedList({
@@ -96,6 +100,7 @@ const Models: React.FC = () => {
perPage: number;
search: string;
categories: any[];
sort_by: string;
};
}) => {
const { loadingVal, query } = params || {};
@@ -294,6 +299,23 @@ const Models: React.FC = () => {
});
};
const handleOnSortChange = (order: TableOrder | Array<TableOrder>) => {
const sortKeys = handleMultiSortChange(order);
setQueryParams((pre: any) => {
return {
...pre,
sort_by: sortKeys.join(',')
};
});
fetchData({
query: {
...queryParams,
page: 1,
sort_by: sortKeys.join(',')
}
});
};
useEffect(() => {
let timer: any = null;
// fetch data first time
@@ -397,6 +419,8 @@ const Models: React.FC = () => {
onCancelViewLogs={handleOnCancelViewLogs}
onStop={handleSearchBySilent}
onStart={handleSearchBySilent}
onTableSort={handleOnSortChange}
sortOrder={sortOrder}
queryParams={queryParams}
loading={dataSource.loading}
loadend={dataSource.loadend}
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
src/pages/users/hooks/use-users-columns.tsx
+17 -13
View File
@@ -71,12 +71,9 @@ 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,
sorter: {
multiple: 1
},
render: (text: string, record: ListItem) => (
<AutoTooltip ghost style={{ maxWidth: 400 }}>
{text}
@@ -85,8 +82,11 @@ const useUsersColumns = ({
},
{
title: intl.formatMessage({ id: 'users.table.role' }),
dataIndex: 'role',
key: 'role',
dataIndex: 'is_admin',
key: 'is_admin',
sorter: {
multiple: 6
},
ellipsis: {
showTitle: false
},
@@ -125,6 +125,9 @@ const useUsersColumns = ({
title: intl.formatMessage({ id: 'users.form.source' }),
dataIndex: 'source',
key: 'source',
sorter: {
multiple: 3
},
ellipsis: {
showTitle: false
},
@@ -138,6 +141,9 @@ const useUsersColumns = ({
title: intl.formatMessage({ id: 'users.table.status' }),
dataIndex: 'is_active',
key: 'is_active',
sorter: {
multiple: 4
},
ellipsis: {
showTitle: false
},
@@ -185,11 +191,9 @@ const useUsersColumns = ({
key: 'created_at',
defaultSortOrder: 'descend',
showSorterTooltip: false,
sortOrder:
sortOrder.order && sortOrder.columnKey === 'created_at'
? sortOrder.order
: null,
sorter: false,
sorter: {
multiple: 5
},
ellipsis: {
showTitle: false
},
src/pages/users/index.tsx
+6 -2
View File
@@ -2,6 +2,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 type { PageActionType } from '@/config/types';
import useTableFetch from '@/hooks/use-table-fetch';
import { useIntl, useModel } from '@umijs/max';
@@ -38,7 +39,10 @@ const Users: React.FC = () => {
} = useTableFetch<ListItem>({
fetchAPI: queryUsersList,
deleteAPI: deleteUser,
contentForDelete: 'users.table.user'
contentForDelete: 'users.table.user',
defaultQueryParams: {
sort_by: '-created_at'
}
});
const { initialState } = useModel('@@initialState') || {};
@@ -188,7 +192,7 @@ const Users: React.FC = () => {
dataSource={dataList}
rowSelection={rowSelection}
loading={dataSource.loading}
sortDirections={['ascend', 'descend', 'ascend']}
sortDirections={TABLE_SORT_DIRECTIONS}
rowKey="id"
onChange={handleTableChange}
pagination={{