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/components/seal-table/components/header.tsx
+5 -3
View File
@@ -1,15 +1,16 @@
import { Col, Row } from 'antd';
import React from 'react';
import { SealColumnProps } from '../types';
import { OnSortFn, SealColumnProps } from '../types';
import TableHeader from './table-header';
interface HeaderProps {
columns: SealColumnProps[];
onSort?: (dataIndex: string, order: any) => void;
sortDirections?: ('ascend' | 'descend' | null)[];
onSort?: OnSortFn;
}
const Header: React.FC<HeaderProps> = (props) => {
const { onSort } = props;
const { onSort, sortDirections } = props;
return (
<Row className="row">
@@ -32,6 +33,7 @@ const Header: React.FC<HeaderProps> = (props) => {
sorter={sorter}
dataIndex={dataIndex}
sortOrder={sortOrder}
sortDirections={sortDirections}
width={width}
defaultSortOrder={defaultSortOrder}
title={title}
src/components/seal-table/components/table-header.tsx
+29 -9
View File
@@ -14,19 +14,39 @@ const TableHeader: React.FC<TableHeaderProps> = (props) => {
firstCell,
lastCell,
sortOrder,
sortDirections = ['ascend', 'descend', null],
defaultSortOrder,
onSort,
sorter,
sorter = false,
width,
dataIndex
} = props;
const handleOnSort = () => {
if (sortOrder === 'ascend') {
onSort?.(dataIndex, 'descend');
} else {
onSort?.(dataIndex, 'ascend');
}
const [currentSortOrder, setCurrentSortOrder] = React.useState<
'ascend' | 'descend' | null
>(sortOrder || defaultSortOrder || null);
const getNextSortOrder = (currentOrder: 'ascend' | 'descend' | null) => {
const index = sortDirections.indexOf(currentOrder);
const nextIndex = (index + 1) % sortDirections.length;
return sortDirections[nextIndex];
};
const handleOnSort = () => {
setCurrentSortOrder((prev) => {
const next = getNextSortOrder(prev);
onSort?.(
{
columnKey: dataIndex,
field: dataIndex,
order: next
},
sorter
);
return next;
});
};
return (
<div
style={{ width, ...style }}
@@ -47,12 +67,12 @@ const TableHeader: React.FC<TableHeaderProps> = (props) => {
<span className="sorter">
<CaretUpOutlined
className={classNames('sorter-up', {
'sorter-active': sortOrder === 'ascend'
'sorter-active': currentSortOrder === 'ascend'
})}
></CaretUpOutlined>
<CaretDownOutlined
className={classNames('sorter-down', {
'sorter-active': sortOrder === 'descend'
'sorter-active': currentSortOrder === 'descend'
})}
></CaretDownOutlined>
</span>
src/components/seal-table/index.tsx
+12 -2
View File
@@ -7,6 +7,7 @@ import HeaderPrefix from './components/header-prefix';
import TableBody from './components/table-body';
import './styles/index.less';
import { SealColumnProps, SealTableProps } from './types';
import useSorter from './use-sorter';
const Wrapper = styled.div<{ $token: any }>`
--ant-table-cell-padding-inline: ${(props) =>
@@ -32,7 +33,7 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
childParentKey,
onExpand,
onExpandAll,
onSort,
onTableSort,
onCell,
expandedRowKeys,
loading,
@@ -43,10 +44,15 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
rowSelection,
pagination,
empty,
sortDirections,
renderChildren,
loadChildren,
loadChildrenAPI
} = props;
const { handleOnTableSort } = useSorter({
onTableSort,
columns
});
const { token } = theme.useToken();
const parsedColumns = useMemo(() => {
if (columns) return columns;
@@ -156,7 +162,11 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
disabled={!props.dataSource?.length}
hasColumns={parsedColumns.length > 0}
></HeaderPrefix>
<Header onSort={onSort} columns={parsedColumns}></Header>
<Header
onSort={handleOnTableSort}
columns={parsedColumns}
sortDirections={sortDirections}
></Header>
</div>
<Spin spinning={loading}>
<TableBody
src/components/seal-table/types.ts
+27 -5
View File
@@ -1,5 +1,14 @@
import React from 'react';
export type OnSortFn = (
order: {
columnKey: string;
field: string;
order: 'ascend' | 'descend' | null;
},
sorter: boolean | { multiple?: number }
) => void;
export interface CellContentProps {
dataIndex: string;
render?: (text: any, record: any) => React.ReactNode;
@@ -20,7 +29,7 @@ export interface SealColumnProps {
span: number;
align?: 'left' | 'center' | 'right';
headerStyle?: React.CSSProperties;
sorter?: boolean;
sorter?: boolean | { multiple?: number };
defaultSortOrder?: 'ascend' | 'descend';
editable?:
| boolean
@@ -34,17 +43,23 @@ export interface SealColumnProps {
}
export interface TableHeaderProps {
sorter?: boolean;
defaultSortOrder?: 'ascend' | 'descend';
sorter?: boolean | { multiple?: number };
sortDirections?: ('ascend' | 'descend' | null)[];
defaultSortOrder?: 'ascend' | 'descend' | null;
sortOrder?: 'ascend' | 'descend' | null;
dataIndex: string;
onSort?: (dataIndex: string, order: 'ascend' | 'descend') => void;
onSort?: OnSortFn;
title: React.ReactNode;
style?: React.CSSProperties;
firstCell?: boolean;
lastCell?: boolean;
align?: 'left' | 'center' | 'right';
width?: number | string;
sortedDataIndexList?: Array<{
columnKey: string;
field: string;
order: 'ascend' | 'descend' | null;
}>;
}
export interface RowSelectionProps {
@@ -54,7 +69,14 @@ export interface RowSelectionProps {
removeSelectedKeys: (rowKeys: React.Key[]) => void;
onChange: (selectedRowKeys: React.Key[], selectedRows: any[]) => void;
}
export type TableOrder = {
columnKey?: string;
field?: string;
order: 'ascend' | 'descend' | null;
};
export interface SealTableProps {
sortDirections?: ('ascend' | 'descend' | null)[];
columns?: SealColumnProps[];
childParentKey?: string;
expandedRowKeys?: React.Key[];
@@ -68,7 +90,7 @@ export interface SealTableProps {
loading?: boolean;
loadend?: boolean;
onCell?: (record: any, dataIndex: string) => void;
onSort?: (dataIndex: string, order: 'ascend' | 'descend') => void;
onTableSort?: (order: TableOrder | Array<TableOrder>) => void;
onExpand?: (expanded: boolean, record: any, rowKey: any) => void;
onExpandAll?: (expanded: boolean) => void;
renderChildren?: (
src/components/seal-table/use-sorter.ts
+84
View File
@@ -0,0 +1,84 @@
import { isBoolean } from 'lodash';
import { useRef } from 'react';
import { SealColumnProps, TableOrder } from './types';
const initSorterList = (columns: SealColumnProps[]) => {
const list = columns.filter((col) => col.defaultSortOrder);
if (list.length === 0) {
return [];
}
return list.map((col) => ({
columnKey: col.key || col.dataIndex,
field: col.dataIndex,
order: col.defaultSortOrder || null
}));
};
export default function useSorter(options: {
onTableSort?: (TableOrder: TableOrder | Array<TableOrder>) => void;
columns?: SealColumnProps[];
}) {
const { onTableSort, columns } = options;
const sorterListRef = useRef<TableOrder | Array<TableOrder>>(
initSorterList(columns || [])
);
const handleOnTableSort = (
order: TableOrder,
sorter: boolean | { multiple?: number }
) => {
let currentOrder: TableOrder = { ...order };
if (order.order === null) {
currentOrder = {
columnKey: undefined,
field: undefined,
order: null
};
}
// single column sort
if (isBoolean(sorter)) {
sorterListRef.current = currentOrder;
onTableSort?.(sorterListRef.current);
return;
}
// multi column sort
if (sorter && typeof sorter === 'object' && sorter.multiple) {
if (!Array.isArray(sorterListRef.current)) {
if (
sorterListRef.current.columnKey === currentOrder.columnKey ||
sorterListRef.current.field === currentOrder.field
) {
// remove the sorter if order is null
sorterListRef.current = {
...currentOrder
};
} else {
sorterListRef.current = [sorterListRef.current, { ...currentOrder }];
}
} else if (Array.isArray(sorterListRef.current)) {
const existingIndex = sorterListRef.current.findIndex(
(item) =>
item.columnKey === order.columnKey || item.field === order.field
);
if (existingIndex !== -1) {
sorterListRef.current.splice(existingIndex, 1);
sorterListRef.current.push({ ...currentOrder });
} else {
sorterListRef.current.push({ ...currentOrder });
}
}
}
onTableSort?.(sorterListRef.current);
};
return {
sorterListRef,
handleOnTableSort
};
}
src/config/settings.ts
+7
View File
@@ -9,3 +9,10 @@ export const DEFAULT_ENTER_PAGE = {
export const GPUSTACK_API_BASE_URL = 'v2';
export const OPENAI_COMPATIBLE = 'v1';
type SortDirection = 'ascend' | 'descend' | null;
export const TABLE_SORT_DIRECTIONS: SortDirection[] = [
'ascend',
'descend',
null
];
src/hooks/use-table-fetch.ts
+18 -11
View File
@@ -1,3 +1,4 @@
import { TABLE_SORT_DIRECTIONS } from '@/config/settings';
import useSetChunkRequest from '@/hooks/use-chunk-request';
import useTableRowSelection from '@/hooks/use-table-row-selection';
import useUpdateChunkedList from '@/hooks/use-update-chunk-list';
@@ -5,6 +6,7 @@ import { handleBatchRequest } from '@/utils';
import _ from 'lodash';
import qs from 'query-string';
import { useEffect, useRef, useState } from 'react';
import { useTableMultiSort } from './use-table-sort';
type EventsType = 'CREATE' | 'UPDATE' | 'DELETE' | 'INSERT';
@@ -51,13 +53,7 @@ export default function useTableFetch<T>(
const chunkRequedtRef = useRef<any>(null);
const modalRef = useRef<any>(null);
const rowSelection = useTableRowSelection();
const [sortOrder, setSortOrder] = useState<{
order?: 'ascend' | 'descend' | null;
columnKey?: string;
}>({
order: null,
columnKey: undefined
});
const { sortOrder, handleMultiSortChange } = useTableMultiSort();
// for skeleton loading
const [extraStatus, setExtraStatus] = useState<Record<string, any>>({
@@ -81,6 +77,7 @@ export default function useTableFetch<T>(
page: 1,
perPage: 10,
search: '',
sort_by: '',
...defaultQueryParams
});
@@ -106,7 +103,6 @@ export default function useTableFetch<T>(
const updateHandler = (list: any) => {
_.each(list, (data: any) => {
console.log('list================:', list);
updateChunkedList(data);
});
};
@@ -238,9 +234,19 @@ export default function useTableFetch<T>(
};
const handleTableChange = (pagination: any, filters: any, sorter: any) => {
setSortOrder({
order: sorter.order,
columnKey: sorter.columnKey || sorter.field
const sortKeys = handleMultiSortChange(sorter);
setQueryParams((pre: any) => {
return {
...pre,
sort_by: sortKeys.join(',')
};
});
fetchData({
query: {
...queryParams,
page: 1,
sort_by: sortKeys.join(',')
}
});
};
@@ -337,6 +343,7 @@ export default function useTableFetch<T>(
queryParams,
modalRef,
extraStatus,
TABLE_SORT_DIRECTIONS,
setQueryParams,
handleDelete,
handleDeleteBatch,
src/hooks/use-table-sort.ts
+29
View File
@@ -23,3 +23,32 @@ export default function useTableSort({
setSortOrder: handleSortChange
};
}
type orderType = {
columnKey?: string;
field?: string;
order: SortOrder;
};
export function useTableMultiSort() {
const [sortOrder, setSortOrder] = useState<string[]>([]);
const handleMultiSortChange = (order: orderType | orderType[]) => {
const sortOrders = Array.isArray(order) ? order : [order];
const sortOrderMap: string[] = [];
sortOrders.forEach((item) => {
const key = item.columnKey || item.field;
if (key) {
sortOrderMap.push(item.order === 'descend' ? `-${key}` : key);
}
});
setSortOrder(sortOrderMap);
return sortOrderMap;
};
return {
sortOrder,
handleMultiSortChange
};
}
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={{