feat: table list sorter

src/pages/resources/hooks/use-files-columns.tsx

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

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

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