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

fix: benchmark tooltip issues

Browse Source
This commit is contained in:
jialin
2026-02-06 18:34:20 +08:00
parent 4a582ec8b1
commit 096227e3da
14 changed files with 119 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/benchmark/components/summary/metrics-result.tsx
+13 -38
View File
@@ -108,46 +108,21 @@ const requestColumns = [
0,
precision: 0,
unit: ''
},
{
title: 'benchmark.detail.result.duration',
key: 'duration',
dataIndex: 'duration',
path: ['raw_metrics', 'benchmarks', '0', 'duration'],
precision: 0,
render: (value: number) => (value ? `${round(value, 2)} (s)` : 0),
unit: ''
}
];
const PERCENTILES = [
{ key: 'metrics', label: 'Metrics', title: 'N/A' }
] as const;
const PercentileResult: React.FC = () => {
const { detailData } = useDetailContext();
const intl = useIntl();
const metrics = detailData?.raw_metrics?.benchmarks?.[0]?.metrics || {};
const buildPercentileTable = (metrics: any) => {
return PERCENTILES.map(({ key, title }) => {
const row: any = { metrics: title };
[...throughputColumns, ...latencyColumns].forEach(
({ dataIndex, path }) => {
row[dataIndex] = _.get(detailData, path) ?? 0;
}
);
return row;
});
};
const items = [...throughputColumns, ...latencyColumns].map(
({ title, dataIndex, path, render, unit }) => ({
key: dataIndex,
label: title,
children: unit ? (
<span className="flex-center">
{render(_.get(detailData, path) ?? 0)}{' '}
<span className="m-l-4">({unit})</span>
</span>
) : (
render(_.get(detailData, path) ?? 0)
)
})
);
const throughputItems = throughputColumns.map(
({ title, dataIndex, path, render, unit }) => ({
@@ -215,8 +190,8 @@ const PercentileResult: React.FC = () => {
<Box>
<Descriptions
styles={descriptionStyles}
title={intl.formatMessage({ id: 'benchmark.detail.summary.latency' })}
items={latencyItems}
title={intl.formatMessage({ id: 'benchmark.detail.result.basic' })}
items={requestItems}
colon={false}
column={1}
></Descriptions>
@@ -231,8 +206,8 @@ const PercentileResult: React.FC = () => {
></Descriptions>
<Descriptions
styles={descriptionStyles}
title={intl.formatMessage({ id: 'benchmark.detail.summary.request' })}
items={requestItems}
title={intl.formatMessage({ id: 'benchmark.detail.summary.latency' })}
items={latencyItems}
colon={false}
column={1}
></Descriptions>
src/pages/benchmark/hooks/use-benchmark-columns.tsx
+2 -5
View File
@@ -38,14 +38,11 @@ const useBenchmarkColumns = (params: {
...columns,
{
title: (
<AutoTooltip ghost minWidth={20}>
<Typography.Text ellipsis={{ tooltip: true }}>
{intl.formatMessage({ id: 'common.table.operation' })}
</AutoTooltip>
</Typography.Text>
),
dataIndex: 'operations',
ellipsis: {
showTitle: false
},
render: (value: string, record: ListItem) => (
<RowActions record={record} handleSelect={handleSelect}></RowActions>
)
src/pages/benchmark/hooks/use-column-settings.tsx
+81 -14
View File
@@ -1,8 +1,10 @@
import AutoTooltip from '@/components/auto-tooltip';
import InfoColumn from '@/components/simple-table/info-column';
import StatusTag from '@/components/status-tag';
import { tableSorter } from '@/config/settings';
import ColumnSettings from '@/pages/_components/column-settings';
import { useIntl } from '@umijs/max';
import { Typography } from 'antd';
import dayjs from 'dayjs';
import _, { round } from 'lodash';
import React from 'react';
@@ -120,6 +122,21 @@ const useColumnSettings = (options: {
);
};
const fieldList = [
{
label: 'benchmark.detail.throughput.inputToken',
key: 'input_tokens_per_second_mean',
locale: true,
render: (val: any) => round(val, 2)
},
{
label: 'benchmark.detail.throughput.outputToken',
key: 'output_tokens_per_second_mean',
locale: true,
render: (val: any) => round(val, 2)
}
];
const resultColumns = [
{
title: renderTitle(
@@ -144,7 +161,7 @@ const useColumnSettings = (options: {
unit: 'ms',
render: (text: number) => (
<AutoTooltip ghost minWidth={20}>
{_.round(text, 2)}
{_.round(text, 2) || '-'}
</AutoTooltip>
)
},
@@ -158,7 +175,7 @@ const useColumnSettings = (options: {
unit: 'ms',
render: (text: number) => (
<AutoTooltip ghost minWidth={20}>
{_.round(text, 2)}
{_.round(text, 2) || '-'}
</AutoTooltip>
)
},
@@ -170,7 +187,7 @@ const useColumnSettings = (options: {
dataIndex: 'inter_token_latency_mean',
path: 'inter_token_latency_mean',
unit: 'ms',
render: (value: number) => round(value, 2)
render: (value: number) => round(value, 2) || '-'
},
{
title: 'RPS',
@@ -178,7 +195,7 @@ const useColumnSettings = (options: {
sorter: tableSorter(1),
render: (text: string) => (
<AutoTooltip ghost minWidth={20}>
{_.round(text, 2)}
{_.round(text, 2) || '-'}
</AutoTooltip>
)
},
@@ -193,9 +210,14 @@ const useColumnSettings = (options: {
path: 'tokens_per_second_mean',
unit: 'Tokens/s',
sorter: tableSorter(1),
render: (text: number) => (
<AutoTooltip ghost minWidth={20}>
{_.round(text, 2)}
render: (text: number, record: any) => (
<AutoTooltip
ghost
minWidth={20}
showTitle
title={<InfoColumn fieldList={fieldList} data={record}></InfoColumn>}
>
{_.round(text, 2) || '-'}
</AutoTooltip>
)
},
@@ -213,7 +235,7 @@ const useColumnSettings = (options: {
unit: 'Tokens/s',
render: (value: number) => (
<AutoTooltip ghost minWidth={20}>
{round(value, 2)}
{round(value, 2) || 0}
</AutoTooltip>
)
},
@@ -231,7 +253,7 @@ const useColumnSettings = (options: {
unit: 'Tokens/s',
render: (value: number) => (
<AutoTooltip ghost minWidth={20}>
{round(value, 2)}
{round(value, 2) || 0}
</AutoTooltip>
)
},
@@ -249,14 +271,53 @@ const useColumnSettings = (options: {
),
unit: ''
}
// {
// title: renderTitle(
// intl.formatMessage({ id: 'benchmark.detail.requests.success' })
// ),
// dataIndex: 'successful_requests',
// path: ['raw_metrics', 'benchmarks', '0'],
// render: (value: number) =>
// round(_.get(value, ['metrics', 'request_totals', 'successful']), 0) ||
// 0,
// precision: 0,
// color: 'var(--ant-color-success)',
// unit: ''
// },
// {
// title: renderTitle(
// intl.formatMessage({ id: 'benchmark.detail.requests.failed' })
// ),
// dataIndex: 'failed_requests',
// path: ['raw_metrics', 'benchmarks', '0'],
// render: (value: number) =>
// round(_.get(value, ['metrics', 'request_totals', 'errored']), 0) || 0,
// precision: 0,
// color: 'var(--ant-color-error)',
// unit: ''
// },
// {
// title: renderTitle(
// intl.formatMessage({
// id: 'benchmark.detail.requests.concurrency'
// })
// ),
// dataIndex: 'request_concurrency',
// path: ['raw_metrics', 'benchmarks', '0'],
// render: (value: number) =>
// round(_.get(value, 'metrics.request_concurrency.successful.mean'), 0) ||
// 0,
// precision: 0,
// unit: ''
// }
];
const metadataColumns = [
{
title: (
<AutoTooltip ghost minWidth={20}>
<Typography.Text ellipsis={{ tooltip: true }}>
{intl.formatMessage({ id: 'clusters.title' })}
</AutoTooltip>
</Typography.Text>
),
dataIndex: 'cluster_id',
render: (text: number) => (
@@ -266,8 +327,10 @@ const useColumnSettings = (options: {
)
},
{
title: renderTitle(
intl.formatMessage({ id: 'benchmark.detail.modelName' })
title: (
<Typography.Text ellipsis={{ tooltip: true }}>
{intl.formatMessage({ id: 'benchmark.detail.modelName' })}
</Typography.Text>
),
dataIndex: 'model_name',
sorter: tableSorter(1),
@@ -287,7 +350,11 @@ const useColumnSettings = (options: {
)
},
{
title: renderTitle(intl.formatMessage({ id: 'benchmark.form.profile' })),
title: (
<Typography.Text ellipsis={{ tooltip: true }}>
{intl.formatMessage({ id: 'benchmark.form.profile' })}
</Typography.Text>
),
dataIndex: 'profile',
render: (text: string) => (
<AutoTooltip ghost minWidth={20}>