From d173e2d49bdc616024eff9b5b8426db76c50c593 Mon Sep 17 00:00:00 2001 From: jialin Date: Thu, 29 Jan 2026 10:43:36 +0800 Subject: [PATCH] fix: details layout --- src/pages/benchmark/apis/index.ts | 10 +++++++ .../components/environment/index.tsx | 12 ++++----- .../benchmark/components/row-actions.tsx | 8 +++++- .../benchmark/components/summary/instance.tsx | 14 +++++++--- .../components/summary/metrics-result.tsx | 17 ++++++------ .../components/summary/percentile-result.tsx | 3 ++- .../benchmark/components/summary/title.tsx | 18 ++++++------- src/pages/benchmark/config/detail-types.ts | 2 +- src/pages/benchmark/forms/dataset.tsx | 2 ++ src/pages/benchmark/forms/index.tsx | 6 ++++- src/pages/benchmark/forms/model-instance.tsx | 2 ++ src/pages/benchmark/forms/random-settings.tsx | 11 ++++++-- src/pages/benchmark/index.tsx | 4 +++ .../benchmark/services/use-stop-benchmark.ts | 27 +++++++++++++++++++ 14 files changed, 103 insertions(+), 33 deletions(-) create mode 100644 src/pages/benchmark/services/use-stop-benchmark.ts diff --git a/src/pages/benchmark/apis/index.ts b/src/pages/benchmark/apis/index.ts index 791b7ac6..f7406891 100644 --- a/src/pages/benchmark/apis/index.ts +++ b/src/pages/benchmark/apis/index.ts @@ -120,3 +120,13 @@ export async function exportBenchmarkList( cancelToken: options?.token }); } + +export async function stopBenchmark(params: { + id: number; + data: Record; +}) { + return request(`${BENCHMARKS_API}/${params.id}/state`, { + method: 'PATCH', + data: params.data + }); +} diff --git a/src/pages/benchmark/components/environment/index.tsx b/src/pages/benchmark/components/environment/index.tsx index 26b5e525..93968b89 100644 --- a/src/pages/benchmark/components/environment/index.tsx +++ b/src/pages/benchmark/components/environment/index.tsx @@ -40,11 +40,9 @@ const Environment: React.FC = () => { }, [snapshot]); const subWorkers = useMemo(() => { - const [[mainWorkerName, mainWorkerInfo]] = Object.entries(snapshot.workers); + const [[instanceName, instanceData]] = Object.entries(snapshot.instances); - const subOrdinaryWorkers = Object.values(snapshot.instances).filter( - (instance) => instance.worker_name === mainWorkerName - ); + const subOrdinaryWorkers = instanceData?.subordinate_workers || []; return subOrdinaryWorkers.map((worker) => { const gpuData = Object.values(snapshot.gpus).filter( @@ -130,7 +128,7 @@ const Environment: React.FC = () => { return ( {`${record.os.name} (${record.os.version})`} + >{`${record.os?.name || ''} (${record.os?.version || ''})`} ); } }, @@ -140,7 +138,7 @@ const Environment: React.FC = () => { key: 'runtime_version', span: 3, render: (val: any, record: any) => { - return {record.runtime_version}; + return {record.runtime_version || ''}; } }, { @@ -149,7 +147,7 @@ const Environment: React.FC = () => { key: 'driver_version', span: 3, render: (val: any, record: any) => { - return {record.driver_version}; + return {record.driver_version || ''}; } }, { diff --git a/src/pages/benchmark/components/row-actions.tsx b/src/pages/benchmark/components/row-actions.tsx index d0846160..b143ac2f 100644 --- a/src/pages/benchmark/components/row-actions.tsx +++ b/src/pages/benchmark/components/row-actions.tsx @@ -13,6 +13,12 @@ const actionList = [ label: 'common.button.edit', icon: icons.EditOutlined }, + { + label: 'common.button.stop', + key: 'stop', + icon: icons.Stop, + status: [BenchmarkStatusValueMap.Claimed, BenchmarkStatusValueMap.Running] + }, { label: 'common.button.viewlog', key: 'viewlog', @@ -55,7 +61,7 @@ const RowActions: React.FC = (props) => { const { onDownloadLog, contextHolder } = useDownloadLogs(); const actions = actionList.filter((action) => { - if (action.key === 'viewlog' || action.key === 'download') { + if (action.status && action.status.length > 0) { return action.status?.includes(record.state); } diff --git a/src/pages/benchmark/components/summary/instance.tsx b/src/pages/benchmark/components/summary/instance.tsx index 31a23687..d203bb4d 100644 --- a/src/pages/benchmark/components/summary/instance.tsx +++ b/src/pages/benchmark/components/summary/instance.tsx @@ -64,12 +64,20 @@ const Instance: React.FC = () => { key: '1', label: 'Backend Parameters', children: ( - + {instanceData?.backend_parameters?.map( (param: string, index: number) => ( - + {param} - + ) )} diff --git a/src/pages/benchmark/components/summary/metrics-result.tsx b/src/pages/benchmark/components/summary/metrics-result.tsx index f1d5bc15..bb5571ef 100644 --- a/src/pages/benchmark/components/summary/metrics-result.tsx +++ b/src/pages/benchmark/components/summary/metrics-result.tsx @@ -142,7 +142,7 @@ const requestFields = [ dataIndex: 'total_requests', path: 'total_requests', precision: 0, - render: (value: number) => round(value, 0), + render: (value: number) => round(value, 0) || 0, unit: '' }, { @@ -151,7 +151,7 @@ const requestFields = [ dataIndex: 'successful_requests', path: ['raw_metrics', 'benchmarks', '0'], render: (value: number) => - round(_.get(value, ['metrics', 'request_totals', 'successful']), 0), + round(_.get(value, ['metrics', 'request_totals', 'successful']), 0) || 0, precision: 0, color: 'var(--ant-color-success)', unit: '' @@ -162,7 +162,7 @@ const requestFields = [ dataIndex: 'failed_requests', path: ['raw_metrics', 'benchmarks', '0'], render: (value: number) => - round(_.get(value, ['metrics', 'request_totals', 'errored']), 0), + round(_.get(value, ['metrics', 'request_totals', 'errored']), 0) || 0, precision: 0, color: 'var(--ant-color-error)', unit: '' @@ -173,7 +173,8 @@ const requestFields = [ dataIndex: 'request_concurrency', path: ['raw_metrics', 'benchmarks', '0'], render: (value: number) => - round(_.get(value, 'metrics.request_concurrency.successful.mean'), 0), + round(_.get(value, 'metrics.request_concurrency.successful.mean'), 0) || + 0, precision: 0, unit: '' } @@ -281,15 +282,15 @@ const PercentileResult: React.FC = () => { diff --git a/src/pages/benchmark/components/summary/percentile-result.tsx b/src/pages/benchmark/components/summary/percentile-result.tsx index 0b1b64e3..6676e038 100644 --- a/src/pages/benchmark/components/summary/percentile-result.tsx +++ b/src/pages/benchmark/components/summary/percentile-result.tsx @@ -85,7 +85,7 @@ const PercentileResult: React.FC = () => { title: 'Percentile', dataIndex: 'percentile', render: (value: string) => ( - {value} + {value} ) }, ...columns @@ -100,6 +100,7 @@ const PercentileResult: React.FC = () => { }, cell: { fontWeight: 400, + height: 40, borderBottom: '1px solid var(--ant-color-split)' } }, diff --git a/src/pages/benchmark/components/summary/title.tsx b/src/pages/benchmark/components/summary/title.tsx index 4e4f5dad..2690a475 100644 --- a/src/pages/benchmark/components/summary/title.tsx +++ b/src/pages/benchmark/components/summary/title.tsx @@ -1,4 +1,3 @@ -import { BulbOutlined } from '@ant-design/icons'; import styled from 'styled-components'; const Content = styled.div` @@ -8,14 +7,15 @@ const Content = styled.div` `; const Title: React.FC<{ children: React.ReactNode }> = ({ children }) => { - return ( - - - {children} - - ); + // return ( + // + // + // {children} + // + // ); + return ; }; export default Title; diff --git a/src/pages/benchmark/config/detail-types.ts b/src/pages/benchmark/config/detail-types.ts index 08bc636d..9b222ab2 100644 --- a/src/pages/benchmark/config/detail-types.ts +++ b/src/pages/benchmark/config/detail-types.ts @@ -31,7 +31,7 @@ export interface InstancesData { env: any; extended_kv_cache: any; speculative_config: any; - subordinate_workers: any; + subordinate_workers: any[]; } export interface WorkerData { diff --git a/src/pages/benchmark/forms/dataset.tsx b/src/pages/benchmark/forms/dataset.tsx index 30583ed2..51d4f7e0 100644 --- a/src/pages/benchmark/forms/dataset.tsx +++ b/src/pages/benchmark/forms/dataset.tsx @@ -1,5 +1,6 @@ import SealInput from '@/components/seal-form/seal-input'; import SealSelect from '@/components/seal-form/seal-select'; +import { PageAction } from '@/config'; import useAppUtils from '@/hooks/use-app-utils'; import { useIntl } from '@umijs/max'; import { Form } from 'antd'; @@ -77,6 +78,7 @@ const DatasetForm: React.FC = () => { ]} > = forwardRef((props, ref) => { useEffect(() => { if (action === PageAction.EDIT && currentData) { form.setFieldsValue({ - ...currentData + ...currentData, + model_instance: [ + currentData.model_name, + currentData.model_instance_name + ] }); } }, [form, currentData, action]); diff --git a/src/pages/benchmark/forms/model-instance.tsx b/src/pages/benchmark/forms/model-instance.tsx index fe1c0b1c..69bff340 100644 --- a/src/pages/benchmark/forms/model-instance.tsx +++ b/src/pages/benchmark/forms/model-instance.tsx @@ -1,4 +1,5 @@ import SealCascader from '@/components/seal-form/seal-cascader'; +import { PageAction } from '@/config'; import useAppUtils from '@/hooks/use-app-utils'; import { InstanceStatusMap, @@ -133,6 +134,7 @@ const ModelInstanceForm: React.FC = () => { = (props) => { const { datasetList, datasetLoading, handleOnDataSetChange } = props; const intl = useIntl(); + const { action, open } = useFormContext(); const form = Form.useFormInstance(); const profile = Form.useWatch('profile', form); const { getRuleMessage } = useAppUtils(); - const disabled = profile !== 'Custom' && Boolean(profile); + const disabled = useMemo(() => { + return ( + (profile !== 'Custom' && Boolean(profile)) || action === PageAction.EDIT + ); + }, [profile, action]); return ( <> diff --git a/src/pages/benchmark/index.tsx b/src/pages/benchmark/index.tsx index 7c4f5728..61041713 100644 --- a/src/pages/benchmark/index.tsx +++ b/src/pages/benchmark/index.tsx @@ -30,6 +30,7 @@ import useCreateBenchmark from './hooks/use-create-benchmark'; import useViewLogs from './hooks/use-view-logs'; import { useExportBenchmark } from './services/use-export-benchmark'; import useQueryDataset from './services/use-query-dataset'; +import useStopBenchmark from './services/use-stop-benchmark'; const Benchmark: React.FC = () => { const { @@ -63,6 +64,7 @@ const Benchmark: React.FC = () => { const { openViewLogsModal, closeViewLogsModal, openViewLogsModalStatus } = useViewLogs(); const { SettingsButton, selectedColumns } = useColumnSettings(); + const { handleStopBenchmark } = useStopBenchmark(); const { datasetList, fetchDatasetData } = useQueryDataset(); const { exportData } = useExportBenchmark(); @@ -114,6 +116,8 @@ const Benchmark: React.FC = () => { handleDelete({ ...row, name: row.name }); } else if (val === 'viewlog') { openViewLogsModal(row); + } else if (val === 'stop') { + handleStopBenchmark(row.id); } }); diff --git a/src/pages/benchmark/services/use-stop-benchmark.ts b/src/pages/benchmark/services/use-stop-benchmark.ts new file mode 100644 index 00000000..c2b9dbd9 --- /dev/null +++ b/src/pages/benchmark/services/use-stop-benchmark.ts @@ -0,0 +1,27 @@ +import { useIntl } from '@umijs/max'; +import { message } from 'antd'; +import { stopBenchmark } from '../apis'; +import { BenchmarkStatusValueMap } from '../config'; + +const useStopBenchmark = () => { + const intl = useIntl(); + const handleStopBenchmark = async (id: number) => { + try { + await stopBenchmark({ + id, + data: { + state: BenchmarkStatusValueMap.Stopped + } + }); + message.success(intl.formatMessage({ id: 'common.message.success' })); + } catch (error) {} + }; + + const handleBatchStopBenchmark = async (ids: number[]) => {}; + + return { + handleStopBenchmark + }; +}; + +export default useStopBenchmark;