root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: benchmark list

Browse Source
This commit is contained in:
jialin
2026-01-30 18:48:55 +08:00
parent 8b282afb03
commit 37b814b70a
29 changed files with 1034 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/benchmark/hooks/use-benchmark-columns.tsx
+176
View File
@@ -0,0 +1,176 @@
// columns.ts
import AutoTooltip from '@/components/auto-tooltip';
import DropdownButtons from '@/components/drop-down-buttons';
import icons from '@/components/icon-font/icons';
import StatusTag from '@/components/status-tag';
import { tableSorter } from '@/config/settings';
import { useIntl } from '@umijs/max';
import { ColumnsType } from 'antd/es/table';
import dayjs from 'dayjs';
import { useMemo } from 'react';
import { BenchmarkStatus, BenchmarkStatusLabelMap } from '../config';
import { BenchmarkListItem as ListItem } from '../config/types';
const actionList = [
{
key: 'edit',
label: 'common.button.edit',
icon: icons.EditOutlined
},
{
key: 'delete',
label: 'common.button.delete',
icon: icons.DeleteOutlined,
props: {
danger: true
}
}
];
const useBenchmarkColumns = (
sortOrder: string[],
handleSelect: (val: string, record: ListItem) => void
): ColumnsType<ListItem> => {
const intl = useIntl();
return useMemo(() => {
return [
{
title: intl.formatMessage({ id: 'common.table.name' }),
dataIndex: 'name',
sorter: tableSorter(1),
render: (text: string) => (
<AutoTooltip ghost minWidth={20}>
{text}
</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'benchmark.table.model' }),
dataIndex: 'model_name',
sorter: tableSorter(1),
render: (text: string) => (
<AutoTooltip ghost minWidth={20}>
{text}
</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'benchmark.table.dataset' }),
dataIndex: 'dataset_name',
sorter: tableSorter(1),
render: (text: string) => (
<AutoTooltip ghost minWidth={20}>
{text}
</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'common.table.status' }),
dataIndex: 'state',
render: (value: number, record: ListItem) => (
<StatusTag
statusValue={{
status: BenchmarkStatus[value],
text: BenchmarkStatusLabelMap[value],
message: record.state_message || undefined
}}
/>
)
},
{
title: intl.formatMessage({ id: 'benchmark.table.requestRate' }),
dataIndex: 'request_rate',
sorter: tableSorter(1),
render: (text: string) => (
<AutoTooltip ghost minWidth={20}>
{text}
</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'benchmark.table.gpu' }),
dataIndex: 'gpu_summary',
sorter: tableSorter(1),
render: (text: string) => (
<AutoTooltip ghost minWidth={20}>
{text}
</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'benchmark.table.itl' }),
dataIndex: 'itl',
sorter: tableSorter(1),
render: (text: string) => (
<AutoTooltip ghost minWidth={20}>
{text}
</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'benchmark.table.tpot' }),
dataIndex: 'tpot',
sorter: tableSorter(1),
render: (text: string) => (
<AutoTooltip ghost minWidth={20}>
{text}
</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'benchmark.table.ttft' }),
dataIndex: 'ttft',
sorter: tableSorter(1),
render: (text: string) => (
<AutoTooltip ghost minWidth={20}>
{text}
</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'benchmark.table.rps' }),
dataIndex: 'requests_per_second',
sorter: tableSorter(1),
render: (text: string) => (
<AutoTooltip ghost minWidth={20}>
{text}
</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'benchmark.table.tps' }),
dataIndex: 'tokens_per_second',
sorter: tableSorter(1),
render: (text: string) => (
<AutoTooltip ghost minWidth={20}>
{text}
</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'common.table.createTime' }),
dataIndex: 'created_at',
sorter: tableSorter(3),
render: (value: string) => (
<span>{dayjs(value).format('YYYY-MM-DD HH:mm:ss')}</span>
)
},
{
title: intl.formatMessage({ id: 'common.table.operation' }),
dataIndex: 'operations',
ellipsis: {
showTitle: false
},
render: (value: string, record: ListItem) => (
<DropdownButtons
items={actionList}
onSelect={(val) => handleSelect(val, record)}
></DropdownButtons>
)
}
];
}, [intl, handleSelect]);
};
export default useBenchmarkColumns;
src/pages/benchmark/hooks/use-create-benchmark.ts
+46
View File
@@ -0,0 +1,46 @@
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import { useState } from 'react';
import { BenchmarkListItem as ListItem } from '../config/types';
const useCreateBenchmark = () => {
const [openModalStatus, setOpenModalStatus] = useState<{
open: boolean;
action: PageActionType;
currentData?: ListItem;
title: string;
}>({
open: false,
action: PageAction.CREATE,
currentData: undefined,
title: ''
});
const openModal = (action: PageActionType, title: string, row?: ListItem) => {
setOpenModalStatus({
...openModalStatus,
open: true,
title: title,
action,
currentData: row
});
};
const closeModal = () => {
setOpenModalStatus({
open: false,
action: PageAction.CREATE,
currentData: undefined,
title: ''
});
};
return {
openBenchmarkModalStatus: openModalStatus,
setOpenBenchmarkModalStatus: setOpenModalStatus,
openBenchmarkModal: openModal,
closeBenchmarkModal: closeModal
};
};
export default useCreateBenchmark;
src/pages/benchmark/hooks/use-create-compare.ts
+40
View File
@@ -0,0 +1,40 @@
import { PageActionType } from '@/config/types';
import { useState } from 'react';
import { BenchmarkListItem as ListItem } from '../config/types';
const useCreateCompare = () => {
const [openModalStatus, setOpenModalStatus] = useState<{
open: boolean;
currentData?: ListItem[];
}>({
open: false,
currentData: undefined
});
const openModal = (
action: PageActionType,
title: string,
rows?: ListItem[]
) => {
setOpenModalStatus({
open: true,
currentData: rows
});
};
const closeModal = () => {
setOpenModalStatus({
open: false,
currentData: undefined
});
};
return {
openCompareModalStatus: openModalStatus,
setOpenCompareModalStatus: setOpenModalStatus,
openCompareModal: openModal,
closeCompareModal: closeModal
};
};
export default useCreateCompare;