style: benchmark progress

This commit is contained in:
jialin
2026-02-03 20:50:40 +08:00
parent 42f24245b5
commit 5ad9ac277c
3 changed files with 43 additions and 120 deletions
@@ -32,106 +32,6 @@ const useBenchmarkColumns = (params: {
)
},
...columns,
// {
// 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',
// ellipsis: {
// showTitle: false
// },
// width: 120,
// render: (value: number, record: ListItem) => (
// <span className="flex-center gap-8">
// <StatusTag
// statusValue={{
// status: BenchmarkStatus[value],
// text: BenchmarkStatusLabelMap[value],
// message: record.state_message || undefined
// }}
// />
// {record.progress !== undefined && record.progress < 100 && (
// <Progress
// type="circle"
// percent={_.round(record.progress, 0)}
// size={20}
// />
// )}
// </span>
// )
// },
// {
// title: intl.formatMessage({ id: 'benchmark.table.gpu' }),
// dataIndex: 'gpu_summary',
// sorter: tableSorter(1),
// render: (text: string) => (
// <AutoTooltip ghost minWidth={20}>
// {text}
// </AutoTooltip>
// )
// },
// {
// title: 'TPS',
// dataIndex: 'tokens_per_second_mean',
// sorter: tableSorter(1),
// render: (text: string) => (
// <AutoTooltip ghost minWidth={20}>
// {_.round(text, 2)}
// </AutoTooltip>
// )
// },
// {
// title: (
// <span className="flex-column">
// <span>{intl.formatMessage({ id: 'benchmark.table.ttft' })}</span>
// <span>
// {intl.formatMessage({ id: 'benchmark.table.avg' })} (ms)
// </span>
// </span>
// ),
// dataIndex: 'time_to_first_token_mean',
// sorter: tableSorter(1),
// render: (text: string) => (
// <AutoTooltip ghost minWidth={20}>
// {_.round(text, 2)}
// </AutoTooltip>
// )
// },
// {
// title: (
// <span className="flex-column">
// <span>{intl.formatMessage({ id: 'benchmark.table.tpot' })}</span>
// <span>
// {intl.formatMessage({ id: 'benchmark.table.avg' })} (ms)
// </span>
// </span>
// ),
// dataIndex: 'time_per_output_token_mean',
// sorter: tableSorter(1),
// render: (text: string) => (
// <AutoTooltip ghost minWidth={20}>
// {_.round(text, 2)}
// </AutoTooltip>
// )
// },
{
title: intl.formatMessage({ id: 'common.table.operation' }),
dataIndex: 'operations',
@@ -3,12 +3,15 @@ import StatusTag from '@/components/status-tag';
import { tableSorter } from '@/config/settings';
import ColumnSettings from '@/pages/_components/column-settings';
import { useIntl } from '@umijs/max';
import { Progress } from 'antd';
import dayjs from 'dayjs';
import _, { round } from 'lodash';
import React from 'react';
import styled from 'styled-components';
import { BenchmarkStatus, BenchmarkStatusLabelMap } from '../config';
import {
BenchmarkStatus,
BenchmarkStatusLabelMap,
BenchmarkStatusValueMap
} from '../config';
import { BenchmarkListItem as ListItem } from '../config/types';
const allFields = [
@@ -58,6 +61,35 @@ const defaultColumns: string[] = [
];
const fixedColumns: string[] = [];
const BenchmarkStateTag = (props: { data: ListItem }) => {
const { data } = props;
if (!data.state) {
return null;
}
return (
<StatusTag
download={
data.state === BenchmarkStatusValueMap.Running
? { percent: data.progress || 0 }
: undefined
}
statusValue={{
status:
data.state === BenchmarkStatusValueMap.Running &&
data.progress === 100
? BenchmarkStatus[BenchmarkStatusValueMap.Completed]
: BenchmarkStatus[data.state],
text: BenchmarkStatusLabelMap[data.state],
message:
data.state === BenchmarkStatusValueMap.Running &&
data.progress === 100
? ''
: data.state_message
}}
/>
);
};
const useColumnSettings = (options: {
contentHeight: number;
clusterList: Global.BaseOption<number>[];
@@ -312,22 +344,7 @@ const useColumnSettings = (options: {
width: 120,
dataIndex: 'state',
render: (value: number, record: ListItem) => (
<span className="flex-center gap-8">
<StatusTag
statusValue={{
status: BenchmarkStatus[value],
text: BenchmarkStatusLabelMap[value],
message: record.state_message || undefined
}}
/>
{record.progress !== undefined && record.progress < 100 && (
<Progress
type="circle"
percent={_.round(record.progress, 0)}
size={20}
/>
)}
</span>
<BenchmarkStateTag data={record} />
)
},
{