diff --git a/src/config/settings.ts b/src/config/settings.ts index da93e20f..4f859e19 100644 --- a/src/config/settings.ts +++ b/src/config/settings.ts @@ -11,8 +11,18 @@ 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 ]; + +export const tableSorter = (order: number | boolean) => { + if (typeof order === 'number') { + return { + multiple: order + }; + } + return order; +}; diff --git a/src/pages/api-keys/hooks/use-keys-columns.tsx b/src/pages/api-keys/hooks/use-keys-columns.tsx index 4aecd379..7deb0758 100644 --- a/src/pages/api-keys/hooks/use-keys-columns.tsx +++ b/src/pages/api-keys/hooks/use-keys-columns.tsx @@ -2,6 +2,7 @@ import AutoTooltip from '@/components/auto-tooltip'; import DropdownButtons from '@/components/drop-down-buttons'; import icons from '@/components/icon-font/icons'; +import { tableSorter } from '@/config/settings'; import { useIntl } from '@umijs/max'; import { ColumnsType } from 'antd/lib/table'; import dayjs from 'dayjs'; @@ -39,9 +40,7 @@ const useModelsColumns = ({ title: intl.formatMessage({ id: 'common.table.name' }), dataIndex: 'name', key: 'name', - sorter: { - multiple: 1 - }, + sorter: tableSorter(1), render: (text: string, record: ListItem) => ( {text} @@ -52,9 +51,7 @@ const useModelsColumns = ({ title: intl.formatMessage({ id: 'apikeys.form.expiretime' }), dataIndex: 'expires_at', key: 'expires_at', - sorter: { - multiple: 2 - }, + sorter: tableSorter(2), render: (text: string, record: ListItem) => ( {text @@ -96,9 +93,7 @@ const useModelsColumns = ({ dataIndex: 'created_at', key: 'created_at', defaultSortOrder: 'descend', - sorter: { - multiple: 3 - }, + sorter: tableSorter(3), ellipsis: { showTitle: false }, diff --git a/src/pages/cluster-management/hooks/use-cluster-columns.tsx b/src/pages/cluster-management/hooks/use-cluster-columns.tsx index d46fea3c..37c99999 100644 --- a/src/pages/cluster-management/hooks/use-cluster-columns.tsx +++ b/src/pages/cluster-management/hooks/use-cluster-columns.tsx @@ -3,6 +3,7 @@ import AutoTooltip from '@/components/auto-tooltip'; import DropdownButtons from '@/components/drop-down-buttons'; import { SealColumnProps } from '@/components/seal-table/types'; import StatusTag from '@/components/status-tag'; +import { tableSorter } from '@/config/settings'; import { useIntl } from '@umijs/max'; import dayjs from 'dayjs'; import { useMemo } from 'react'; @@ -33,9 +34,7 @@ const useClusterColumns = ( { title: intl.formatMessage({ id: 'common.table.name' }), dataIndex: 'name', - sorter: { - multiple: 1 - }, + sorter: tableSorter(1), span: 3, render: (text: string, record: ClusterListItem) => ( {text} @@ -44,9 +43,7 @@ const useClusterColumns = ( { title: intl.formatMessage({ id: 'clusters.table.provider' }), dataIndex: 'provider', - sorter: { - multiple: 2 - }, + sorter: tableSorter(2), span: 4, render: (value: string) => ( @@ -93,9 +90,7 @@ const useClusterColumns = ( title: intl.formatMessage({ id: 'common.table.createTime' }), dataIndex: 'created_at', defaultSortOrder: 'descend', - sorter: { - multiple: 5 - }, + sorter: tableSorter(5), span: 4, render: (value: string) => ( diff --git a/src/pages/cluster-management/hooks/use-credential-columns.tsx b/src/pages/cluster-management/hooks/use-credential-columns.tsx index d1ea6d51..5860377c 100644 --- a/src/pages/cluster-management/hooks/use-credential-columns.tsx +++ b/src/pages/cluster-management/hooks/use-credential-columns.tsx @@ -1,6 +1,7 @@ // columns.ts import AutoTooltip from '@/components/auto-tooltip'; import DropdownButtons from '@/components/drop-down-buttons'; +import { tableSorter } from '@/config/settings'; import { useIntl } from '@umijs/max'; import { ColumnsType } from 'antd/es/table'; import type { SortOrder } from 'antd/es/table/interface'; @@ -23,9 +24,7 @@ const useCredentialColumns = ( { title: intl.formatMessage({ id: 'common.table.name' }), dataIndex: 'name', - sorter: { - multiple: 1 - }, + sorter: tableSorter(1), render: (text: string) => ( {text} @@ -43,9 +42,7 @@ const useCredentialColumns = ( dataIndex: 'created_at', showSorterTooltip: false, defaultSortOrder: 'descend', - sorter: { - multiple: 3 - }, + sorter: tableSorter(3), ellipsis: { showTitle: false }, diff --git a/src/pages/llmodels/hooks/use-models-columns.tsx b/src/pages/llmodels/hooks/use-models-columns.tsx index 95d628e4..9f7bd6a9 100644 --- a/src/pages/llmodels/hooks/use-models-columns.tsx +++ b/src/pages/llmodels/hooks/use-models-columns.tsx @@ -2,7 +2,7 @@ import AutoTooltip from '@/components/auto-tooltip'; import DropdownButtons from '@/components/drop-down-buttons'; import { SealColumnProps } from '@/components/seal-table/types'; -import { OPENAI_COMPATIBLE } from '@/config/settings'; +import { OPENAI_COMPATIBLE, tableSorter } from '@/config/settings'; import { QuestionCircleOutlined } from '@ant-design/icons'; import { useIntl } from '@umijs/max'; import { Tooltip } from 'antd'; @@ -53,9 +53,7 @@ const useModelsColumns = ({ title: intl.formatMessage({ id: 'common.table.name' }), dataIndex: 'name', key: 'name', - sorter: { - multiple: 1 - }, + sorter: tableSorter(1), span: 5, render: (text: string, record: ListItem) => ( @@ -70,9 +68,7 @@ const useModelsColumns = ({ title: intl.formatMessage({ id: 'clusters.title' }), dataIndex: 'cluster_id', key: 'cluster_id', - sorter: { - multiple: 2 - }, + sorter: tableSorter(2), span: 3, render: (text: string, record: ListItem) => ( @@ -87,9 +83,7 @@ const useModelsColumns = ({ title: intl.formatMessage({ id: 'models.form.source' }), dataIndex: 'source', key: 'source', - sorter: { - multiple: 3 - }, + sorter: tableSorter(3), span: 5, render: (text: string, record: ListItem) => ( @@ -114,9 +108,7 @@ const useModelsColumns = ({ dataIndex: 'ready_replicas', key: 'ready_replicas', align: 'center', - sorter: { - multiple: 4 - }, + sorter: tableSorter(4), span: 4, editable: { valueType: 'number', @@ -133,9 +125,7 @@ const useModelsColumns = ({ dataIndex: 'created_at', key: 'created_at', defaultSortOrder: 'descend', - sorter: { - multiple: 5 - }, + sorter: tableSorter(5), span: 4, render: (text: number) => ( diff --git a/src/pages/resources/hooks/use-files-columns.tsx b/src/pages/resources/hooks/use-files-columns.tsx index 2cd39416..46ffeddc 100644 --- a/src/pages/resources/hooks/use-files-columns.tsx +++ b/src/pages/resources/hooks/use-files-columns.tsx @@ -2,6 +2,7 @@ import AutoTooltip from '@/components/auto-tooltip'; import DropdownButtons from '@/components/drop-down-buttons'; import { TooltipOverlayScroller } from '@/components/overlay-scroller'; import StatusTag from '@/components/status-tag'; +import { tableSorter } from '@/config/settings'; import { modelSourceMap } from '@/pages/llmodels/config'; import { modelFileActions } from '@/pages/llmodels/config/button-actions'; import { convertFileSize } from '@/utils'; @@ -265,9 +266,7 @@ const useFilesColumns = (props: { { title: intl.formatMessage({ id: 'models.form.source' }), dataIndex: 'source', - sorter: { - multiple: 1 - }, + sorter: tableSorter(1), ellipsis: { showTitle: false }, @@ -286,9 +285,7 @@ const useFilesColumns = (props: { { title: intl.formatMessage({ id: 'resources.worker' }), dataIndex: 'worker_id', - sorter: { - multiple: 2 - }, + sorter: tableSorter(2), width: '18%', ellipsis: { showTitle: false @@ -312,9 +309,7 @@ const useFilesColumns = (props: { { title: intl.formatMessage({ id: 'resources.modelfiles.form.path' }), dataIndex: 'resolved_paths', - sorter: { - multiple: 3 - }, + sorter: tableSorter(3), width: '20%', ellipsis: { showTitle: false @@ -344,9 +339,7 @@ const useFilesColumns = (props: { dataIndex: 'created_at', defaultSortOrder: 'descend', key: 'created_at', - sorter: { - multiple: 4 - }, + sorter: tableSorter(4), width: 180, ellipsis: { showTitle: false diff --git a/src/pages/resources/hooks/use-gpu-columns.tsx b/src/pages/resources/hooks/use-gpu-columns.tsx index 213245d9..f6b1ed12 100644 --- a/src/pages/resources/hooks/use-gpu-columns.tsx +++ b/src/pages/resources/hooks/use-gpu-columns.tsx @@ -1,6 +1,7 @@ import AutoTooltip from '@/components/auto-tooltip'; import ProgressBar from '@/components/progress-bar'; import InfoColumn from '@/components/simple-table/info-column'; +import { tableSorter } from '@/config/settings'; import { convertFileSize } from '@/utils'; import { useIntl } from '@umijs/max'; import { ColumnsType } from 'antd/lib/table'; @@ -50,9 +51,7 @@ const useGPUColumns = (props: { title: intl.formatMessage({ id: 'common.table.name' }), dataIndex: 'name', width: 240, - sorter: { - multiple: 1 - }, + sorter: tableSorter(1), render: (text: string, record: GPUDeviceItem) => ( {text} @@ -62,17 +61,13 @@ const useGPUColumns = (props: { { title: intl.formatMessage({ id: 'resources.table.index' }), dataIndex: 'index', - sorter: { - multiple: 2 - }, + sorter: tableSorter(2), render: (text: string, record: GPUDeviceItem) => {text} }, { title: intl.formatMessage({ id: 'clusters.title' }), dataIndex: 'cluster_id', - sorter: { - multiple: 3 - }, + sorter: tableSorter(3), ellipsis: { showTitle: false }, @@ -85,9 +80,7 @@ const useGPUColumns = (props: { { title: intl.formatMessage({ id: 'resources.worker' }), dataIndex: 'worker_name', - sorter: { - multiple: 4 - }, + sorter: tableSorter(4), ellipsis: { showTitle: false }, @@ -98,9 +91,7 @@ const useGPUColumns = (props: { { title: intl.formatMessage({ id: 'resources.table.vender' }), dataIndex: 'vendor', - sorter: { - multiple: 5 - } + sorter: tableSorter(5) }, { title: `${intl.formatMessage({ id: 'resources.table.temperature' })} (°C)`, @@ -113,9 +104,7 @@ const useGPUColumns = (props: { title: `${intl.formatMessage({ id: 'resources.table.utilization' })}`, dataIndex: 'core.utilization_rate', key: 'core.utilization_rate', - sorter: { - multiple: 6 - }, + sorter: tableSorter(6), render: (text: number, record: GPUDeviceItem) => { return ( <> @@ -134,9 +123,7 @@ const useGPUColumns = (props: { title: intl.formatMessage({ id: 'resources.table.vramutilization' }), dataIndex: 'memory.utilization_rate', key: 'memory.utilization_rate', - sorter: { - multiple: 7 - }, + sorter: tableSorter(7), render: (text: number, record: GPUDeviceItem, index: number) => { return ( ( {text} @@ -301,9 +300,7 @@ const useWorkerColumns = ({ { title: intl.formatMessage({ id: 'common.table.status' }), dataIndex: 'state', - sorter: { - multiple: 2 - }, + sorter: tableSorter(2), render: (_, record) => ( ( {renderIP(text, record)} @@ -331,9 +326,7 @@ const useWorkerColumns = ({ { title: 'CPU', dataIndex: 'status.cpu.utilization_rate', - sorter: { - multiple: 4 - }, + sorter: tableSorter(4), render: (text: string, record) => statusAvailable(record) ? ( statusAvailable(record) ? ( ( {text} @@ -84,9 +83,7 @@ const useUsersColumns = ({ title: intl.formatMessage({ id: 'users.table.role' }), dataIndex: 'is_admin', key: 'is_admin', - sorter: { - multiple: 6 - }, + sorter: tableSorter(6), ellipsis: { showTitle: false }, @@ -125,9 +122,7 @@ const useUsersColumns = ({ title: intl.formatMessage({ id: 'users.form.source' }), dataIndex: 'source', key: 'source', - sorter: { - multiple: 3 - }, + sorter: tableSorter(3), ellipsis: { showTitle: false }, @@ -141,9 +136,7 @@ const useUsersColumns = ({ title: intl.formatMessage({ id: 'users.table.status' }), dataIndex: 'is_active', key: 'is_active', - sorter: { - multiple: 4 - }, + sorter: tableSorter(4), ellipsis: { showTitle: false }, @@ -191,9 +184,7 @@ const useUsersColumns = ({ key: 'created_at', defaultSortOrder: 'descend', showSorterTooltip: false, - sorter: { - multiple: 5 - }, + sorter: tableSorter(5), ellipsis: { showTitle: false },