chore: set col order

This commit is contained in:
jialin
2025-12-21 21:37:05 +08:00
parent 23a761226a
commit 42f8e6a6d9
9 changed files with 52 additions and 103 deletions
+10
View File
@@ -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;
};
@@ -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) => (
<AutoTooltip ghost style={{ maxWidth: 400 }}>
{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) => (
<AutoTooltip ghost>
{text
@@ -96,9 +93,7 @@ const useModelsColumns = ({
dataIndex: 'created_at',
key: 'created_at',
defaultSortOrder: 'descend',
sorter: {
multiple: 3
},
sorter: tableSorter(3),
ellipsis: {
showTitle: false
},
@@ -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) => (
<AutoTooltip ghost>{text}</AutoTooltip>
@@ -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) => (
<AutoTooltip ghost minWidth={20}>
@@ -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) => (
<AutoTooltip ghost minWidth={20}>
@@ -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) => (
<AutoTooltip ghost minWidth={20}>
{text}
@@ -43,9 +42,7 @@ const useCredentialColumns = (
dataIndex: 'created_at',
showSorterTooltip: false,
defaultSortOrder: 'descend',
sorter: {
multiple: 3
},
sorter: tableSorter(3),
ellipsis: {
showTitle: false
},
@@ -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) => (
<span className="flex-center" style={{ maxWidth: '100%' }}>
@@ -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) => (
<span className="flex flex-column" style={{ width: '100%' }}>
@@ -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) => (
<span className="flex flex-column" style={{ width: '100%' }}>
@@ -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) => (
<AutoTooltip ghost>
@@ -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
+8 -21
View File
@@ -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) => (
<AutoTooltip ghost maxWidth={240}>
{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) => <span>{text}</span>
},
{
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 (
<ProgressBar
@@ -4,6 +4,7 @@ import LabelsCell from '@/components/label-cell';
import ProgressBar from '@/components/progress-bar';
import InfoColumn from '@/components/simple-table/info-column';
import StatusTag from '@/components/status-tag';
import { tableSorter } from '@/config/settings';
import { convertFileSize } from '@/utils';
import {
DeleteOutlined,
@@ -274,9 +275,7 @@ const useWorkerColumns = ({
title: intl.formatMessage({ id: 'common.table.name' }),
dataIndex: 'name',
width: 100,
sorter: {
multiple: 1
},
sorter: tableSorter(1),
render: (text: string) => (
<AutoTooltip ghost maxWidth={240}>
{text}
@@ -301,9 +300,7 @@ const useWorkerColumns = ({
{
title: intl.formatMessage({ id: 'common.table.status' }),
dataIndex: 'state',
sorter: {
multiple: 2
},
sorter: tableSorter(2),
render: (_, record) => (
<StatusTag
maxTooltipWidth={400}
@@ -319,9 +316,7 @@ const useWorkerColumns = ({
{
title: 'IP',
dataIndex: 'ip',
sorter: {
multiple: 3
},
sorter: tableSorter(3),
render: (text: string, record) => (
<AutoTooltip ghost maxWidth={240}>
{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) ? (
<ProgressBar
@@ -346,9 +339,7 @@ const useWorkerColumns = ({
{
title: intl.formatMessage({ id: 'resources.table.memory' }),
dataIndex: 'status.memory.utilization_rate',
sorter: {
multiple: 5
},
sorter: tableSorter(5),
render: (_, record) =>
statusAvailable(record) ? (
<ProgressBar
+6 -15
View File
@@ -3,6 +3,7 @@ import AutoTooltip from '@/components/auto-tooltip';
import DropdownButtons from '@/components/drop-down-buttons';
import IconFont from '@/components/icon-font';
import icons from '@/components/icon-font/icons';
import { tableSorter } from '@/config/settings';
import { useIntl, useModel } from '@umijs/max';
import { useMemoizedFn } from 'ahooks';
import { Tag } from 'antd';
@@ -71,9 +72,7 @@ const useUsersColumns = ({
title: intl.formatMessage({ id: 'common.table.name' }),
dataIndex: 'username',
key: 'username',
sorter: {
multiple: 1
},
sorter: tableSorter(1),
render: (text: string, record: ListItem) => (
<AutoTooltip ghost style={{ maxWidth: 400 }}>
{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
},