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

style: benchmark progress

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/components/status-tag/index.tsx
+8 -2
View File
@@ -3,6 +3,7 @@ import { StatusType } from '@/config/types';
import { InfoCircleOutlined } from '@ant-design/icons';
import { Button, Divider, Tooltip } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import React, { useMemo } from 'react';
import 'simplebar-react/dist/simplebar.min.css';
import styled from 'styled-components';
@@ -91,8 +92,13 @@ const StatusTag: React.FC<StatusTagProps> = ({
if (download && percent > 0 && percent <= 100) {
return (
<>
<span className="progress">{download?.percent || 0}%</span>
<span className="download" style={{ width: `${percent}%` }}></span>
<span className="progress">
{_.round(download?.percent, 0) || 0}%
</span>
<span
className="download"
style={{ width: `${_.round(percent, 0)}%` }}
></span>
</>
);
}
src/pages/benchmark/hooks/use-benchmark-columns.tsx
-100
View File
@@ -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',
src/pages/benchmark/hooks/use-column-settings.tsx
+35 -18
View File
@@ -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} />
)
},
{