feat: table list sorter

src/pages/llmodels/components/table-list.tsx

@@ -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

@@ -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

@@ -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}