From 096227e3da309f0dcc0848932169aa04dc363eaa Mon Sep 17 00:00:00 2001 From: jialin Date: Fri, 6 Feb 2026 18:30:48 +0800 Subject: [PATCH] fix: benchmark tooltip issues --- src/components/page-tools/index.tsx | 2 +- src/locales/en-US/backends.ts | 2 +- src/locales/en-US/benchmark.ts | 4 +- src/locales/ja-JP/backends.ts | 2 +- src/locales/ja-JP/benchmark.ts | 4 +- src/locales/ru-RU/backends.ts | 4 +- src/locales/ru-RU/benchmark.ts | 4 +- src/locales/zh-CN/backends.ts | 2 +- src/locales/zh-CN/benchmark.ts | 4 +- src/pages/_components/column-settings.tsx | 2 +- .../components/summary/metrics-result.tsx | 51 +++------- .../benchmark/hooks/use-benchmark-columns.tsx | 7 +- .../benchmark/hooks/use-column-settings.tsx | 95 ++++++++++++++++--- .../maas-provider/forms/advance-config.tsx | 5 +- 14 files changed, 119 insertions(+), 69 deletions(-) diff --git a/src/components/page-tools/index.tsx b/src/components/page-tools/index.tsx index 2eb2fa08..8f08f3dd 100644 --- a/src/components/page-tools/index.tsx +++ b/src/components/page-tools/index.tsx @@ -157,7 +157,7 @@ export const FilterBar: React.FC = (props) => { actionType === 'dropdown' ? ( diff --git a/src/pages/benchmark/components/summary/metrics-result.tsx b/src/pages/benchmark/components/summary/metrics-result.tsx index ef281d96..002611f1 100644 --- a/src/pages/benchmark/components/summary/metrics-result.tsx +++ b/src/pages/benchmark/components/summary/metrics-result.tsx @@ -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 ? ( - - {render(_.get(detailData, path) ?? 0)}{' '} - ({unit}) - - ) : ( - render(_.get(detailData, path) ?? 0) - ) - }) - ); const throughputItems = throughputColumns.map( ({ title, dataIndex, path, render, unit }) => ({ @@ -215,8 +190,8 @@ const PercentileResult: React.FC = () => { @@ -231,8 +206,8 @@ const PercentileResult: React.FC = () => { > diff --git a/src/pages/benchmark/hooks/use-benchmark-columns.tsx b/src/pages/benchmark/hooks/use-benchmark-columns.tsx index c09633cf..6c27fa16 100644 --- a/src/pages/benchmark/hooks/use-benchmark-columns.tsx +++ b/src/pages/benchmark/hooks/use-benchmark-columns.tsx @@ -38,14 +38,11 @@ const useBenchmarkColumns = (params: { ...columns, { title: ( - + {intl.formatMessage({ id: 'common.table.operation' })} - + ), dataIndex: 'operations', - ellipsis: { - showTitle: false - }, render: (value: string, record: ListItem) => ( ) diff --git a/src/pages/benchmark/hooks/use-column-settings.tsx b/src/pages/benchmark/hooks/use-column-settings.tsx index 7fe04bcf..c0286347 100644 --- a/src/pages/benchmark/hooks/use-column-settings.tsx +++ b/src/pages/benchmark/hooks/use-column-settings.tsx @@ -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) => ( - {_.round(text, 2)} + {_.round(text, 2) || '-'} ) }, @@ -158,7 +175,7 @@ const useColumnSettings = (options: { unit: 'ms', render: (text: number) => ( - {_.round(text, 2)} + {_.round(text, 2) || '-'} ) }, @@ -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) => ( - {_.round(text, 2)} + {_.round(text, 2) || '-'} ) }, @@ -193,9 +210,14 @@ const useColumnSettings = (options: { path: 'tokens_per_second_mean', unit: 'Tokens/s', sorter: tableSorter(1), - render: (text: number) => ( - - {_.round(text, 2)} + render: (text: number, record: any) => ( + } + > + {_.round(text, 2) || '-'} ) }, @@ -213,7 +235,7 @@ const useColumnSettings = (options: { unit: 'Tokens/s', render: (value: number) => ( - {round(value, 2)} + {round(value, 2) || 0} ) }, @@ -231,7 +253,7 @@ const useColumnSettings = (options: { unit: 'Tokens/s', render: (value: number) => ( - {round(value, 2)} + {round(value, 2) || 0} ) }, @@ -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: ( - + {intl.formatMessage({ id: 'clusters.title' })} - + ), dataIndex: 'cluster_id', render: (text: number) => ( @@ -266,8 +327,10 @@ const useColumnSettings = (options: { ) }, { - title: renderTitle( - intl.formatMessage({ id: 'benchmark.detail.modelName' }) + title: ( + + {intl.formatMessage({ id: 'benchmark.detail.modelName' })} + ), dataIndex: 'model_name', sorter: tableSorter(1), @@ -287,7 +350,11 @@ const useColumnSettings = (options: { ) }, { - title: renderTitle(intl.formatMessage({ id: 'benchmark.form.profile' })), + title: ( + + {intl.formatMessage({ id: 'benchmark.form.profile' })} + + ), dataIndex: 'profile', render: (text: string) => ( diff --git a/src/pages/maas-provider/forms/advance-config.tsx b/src/pages/maas-provider/forms/advance-config.tsx index 37a9dae0..6d342ece 100644 --- a/src/pages/maas-provider/forms/advance-config.tsx +++ b/src/pages/maas-provider/forms/advance-config.tsx @@ -8,7 +8,8 @@ import React, { forwardRef, useImperativeHandle } from 'react'; import APIKeys from './api-keys'; import ProxyConfig from './proxy-config'; -const referLink = `https://higress.cn/docs/latest/plugins/ai/api-provider/ai-proxy/?spm=36971b57.3562eb7c.0.0.31764f5f7uLs2F#%E6%8F%90%E4%BE%9B%E5%95%86%E7%89%B9%E6%9C%89%E9%85%8D%E7%BD%AE`; +const referLinkZh = `https://higress.cn/docs/latest/plugins/ai/api-provider/ai-proxy/?spm=36971b57.3562eb7c.0.0.31764f5f7uLs2F#%E6%8F%90%E4%BE%9B%E5%95%86%E7%89%B9%E6%9C%89%E9%85%8D%E7%BD%AE`; +const referLinkEn = `https://higress.cn/en/docs/latest/plugins/ai/api-provider/ai-proxy/?spm=36971b57.4a688c53.0.0.64ac436ewz1xGA`; const AdvanceConfig: React.FC<{ action: PageActionType; @@ -19,6 +20,8 @@ const AdvanceConfig: React.FC<{ const editorRef = React.useRef(null); const [fileContent, setFileContent] = React.useState(''); + const referLink = intl.locale === 'zh-CN' ? referLinkZh : referLinkEn; + useImperativeHandle(ref, () => ({ getYamlValue: () => { return editorRef.current?.getValue();