From 3c5b095510c25af95f54ddb474afe3685877ff65 Mon Sep 17 00:00:00 2001 From: jialin Date: Fri, 6 Feb 2026 20:48:31 +0800 Subject: [PATCH] fix: benchmark enviroment table --- src/hooks/use-table-fetch.ts | 2 +- .../components/environment/gpu-data.tsx | 84 ------- .../components/environment/gpu-header.tsx | 39 +++ .../components/environment/index.tsx | 224 +++++------------- .../components/environment/metadata.tsx | 43 ---- .../environment/use-gpu-columns.tsx | 56 +++++ .../environment/use-worker-columns.tsx | 80 +++++++ .../components/environment/worker-data.tsx | 61 ----- .../components/summary/benchmark.tsx | 13 +- src/pages/benchmark/config/detail-types.ts | 11 +- .../benchmark/hooks/use-column-settings.tsx | 2 +- src/pages/llmodels/catalog.tsx | 3 +- 12 files changed, 258 insertions(+), 360 deletions(-) delete mode 100644 src/pages/benchmark/components/environment/gpu-data.tsx create mode 100644 src/pages/benchmark/components/environment/gpu-header.tsx delete mode 100644 src/pages/benchmark/components/environment/metadata.tsx create mode 100644 src/pages/benchmark/components/environment/use-gpu-columns.tsx create mode 100644 src/pages/benchmark/components/environment/use-worker-columns.tsx delete mode 100644 src/pages/benchmark/components/environment/worker-data.tsx diff --git a/src/hooks/use-table-fetch.ts b/src/hooks/use-table-fetch.ts index 0dddc10c..c46902df 100644 --- a/src/hooks/use-table-fetch.ts +++ b/src/hooks/use-table-fetch.ts @@ -283,7 +283,7 @@ export default function useTableFetch( } ) => { loadendRef.current = false; - const newQueryParams = { ...queryParams, ...params, page: 1 }; + const newQueryParams = { ...queryParams, ...params }; setQueryParams(newQueryParams); await fetchData({ query: newQueryParams }); if (watch && !options?.paginate) { diff --git a/src/pages/benchmark/components/environment/gpu-data.tsx b/src/pages/benchmark/components/environment/gpu-data.tsx deleted file mode 100644 index f7078a0b..00000000 --- a/src/pages/benchmark/components/environment/gpu-data.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import AutoTooltip from '@/components/auto-tooltip'; -import { convertFileSize } from '@/utils'; -import { Descriptions, DescriptionsProps } from 'antd'; -import React from 'react'; -import styled from 'styled-components'; -import { GPUData } from '../../config/detail-types'; -import Section from '../summary/section'; - -const Content = styled.div` - display: flex; - flex-direction: column; - gap: 12px; - align-items: flex-start; - .name { - font-weight: 500; - } -`; - -const Environment: React.FC = (props) => { - const items: DescriptionsProps['items'] = [ - // { - // key: '4', - // label: 'Name', - // children: {props.name} - // }, - { - key: '1', - label: 'VRAM', - children: convertFileSize(props.memory_total) - }, - { - key: '3', - label: 'Driver', - children: props.driver_version - }, - { - key: '2', - label: 'Runtime', - children: props.runtime_version - }, - { - key: '6', - label: 'Core', - children: props.core_total - }, - { - key: '5', - label: 'Vendor', - children: props.vendor - }, - { - key: '7', - label: 'GPU Type', - children: props.type - } - ]; - return ( -
- GPU {props.index} - - } - > - -
- {props.name} -
- - -
- ); -}; - -export default Environment; diff --git a/src/pages/benchmark/components/environment/gpu-header.tsx b/src/pages/benchmark/components/environment/gpu-header.tsx new file mode 100644 index 00000000..8980c00a --- /dev/null +++ b/src/pages/benchmark/components/environment/gpu-header.tsx @@ -0,0 +1,39 @@ +import { Col, Row } from 'antd'; +import React from 'react'; + +const GPUHeader: React.FC<{ + columns: { + title: string; + key: string; + span: number; + colStyle?: React.CSSProperties; + }[]; +}> = ({ columns }) => { + return ( + + {columns.map((col) => ( + + + + {col.title} + + + + ))} + + ); +}; + +export default GPUHeader; diff --git a/src/pages/benchmark/components/environment/index.tsx b/src/pages/benchmark/components/environment/index.tsx index bdedf762..c2228180 100644 --- a/src/pages/benchmark/components/environment/index.tsx +++ b/src/pages/benchmark/components/environment/index.tsx @@ -1,15 +1,16 @@ -import AutoTooltip from '@/components/auto-tooltip'; import RowChildren from '@/components/seal-table/components/row-children'; import SealTable from '@/components/seal-table/index'; import useExpandedRowKeys from '@/hooks/use-expanded-row-keys'; -import { convertFileSize } from '@/utils'; -import { useIntl } from '@umijs/max'; import useMemoizedFn from 'ahooks/lib/useMemoizedFn'; -import { Col, Row, Tag } from 'antd'; +import { Col, Row } from 'antd'; import _ from 'lodash'; import React, { useMemo } from 'react'; import styled from 'styled-components'; import { useDetailContext } from '../../config/detail-context'; +import { GPUData, WorkerData } from '../../config/detail-types'; +import GPUHeader from './gpu-header'; +import useGPUColumns from './use-gpu-columns'; +import useWorkerColumns from './use-worker-columns'; const Container = styled.div` display: flex; @@ -17,164 +18,90 @@ const Container = styled.div` gap: 16px; `; +/** + * + * @returns display worker info and gpu info. + */ + const Environment: React.FC = () => { - const intl = useIntl(); + const GPUColumns = useGPUColumns(); + const workerColumns = useWorkerColumns(); const { detailData } = useDetailContext(); const { snapshot } = detailData; + // instance info + const instanceEntry = Object.entries(snapshot.instances ?? {})[0]; + const instanceData = instanceEntry?.[1]; + const { handleExpandChange, handleExpandAll, expandedRowKeys } = useExpandedRowKeys(); - const mainWorker = useMemo(() => { - // get workers data - - const [[workerName, workerInfo]] = Object.entries(snapshot.workers); - const gpuData = Object.values(snapshot.gpus).filter( - (gpu) => gpu.worker_name === workerName + const workerMap = useMemo(() => { + return new Map( + Object.entries(snapshot.workers ?? {}).map(([workerName, workerInfo]) => [ + workerInfo.id, + workerInfo + ]) ); + }, [snapshot.workers]); + + const gpuList = useMemo(() => { + return Object.values(snapshot.gpus ?? {}) || []; + }, [snapshot.gpus]); + + const findWorkerById = (workerID: number): WorkerData | undefined => { + return workerMap.get(workerID) || undefined; + }; + + const findGPUByWorkerName = (name: string): GPUData[] => { + return gpuList.filter((gpu) => gpu.worker_name === name); + }; + + // main worker + + const mainWorker = useMemo(() => { + const mainworker = findWorkerById(instanceData.worker_id); + + if (!mainworker) { + return null; + } + + const gpuData = findGPUByWorkerName(mainworker.name); return { - ...workerInfo, + ...mainworker, ..._.pick(gpuData?.[0], ['driver_version', 'runtime_version']), isMain: true, children: gpuData }; - }, [snapshot]); + }, [snapshot.gpus, snapshot.workers, instanceData]); - const subWorkers = useMemo(() => { - const [[instanceName, instanceData]] = Object.entries(snapshot.instances); + // subordinate workers + const subWorkerList = useMemo(() => { const subOrdinaryWorkers = instanceData?.subordinate_workers || []; return subOrdinaryWorkers.map((worker) => { - const gpuData = Object.values(snapshot.gpus).filter( - (gpu) => gpu.worker_name === worker.worker_name - ); + // Find the worker info from the snapshot workers + const subWorker = findWorkerById(worker.worker_id); + + if (!subWorker) { + return null; + } + const gpuData = findGPUByWorkerName(subWorker.name); return { - ...worker, + ...subWorker, + ..._.pick(gpuData?.[0], ['driver_version', 'runtime_version']), isMain: false, children: gpuData }; }); - }, [snapshot, mainWorker]); - - const GPUColumns: { - title: string; - dataIndex: string; - key: string; - span: number; - colStyle?: React.CSSProperties; - render?: (value: any, record: any) => React.ReactNode; - }[] = [ - { - title: intl.formatMessage({ id: 'benchmark.env.gpuName' }), - dataIndex: 'name', - key: 'name', - span: 6, - colStyle: { paddingLeft: 16 }, - render: (value: string, record: any) => ( - {value} - ) - }, - { - title: intl.formatMessage({ id: 'benchmark.env.index' }), - dataIndex: 'index', - key: 'index', - span: 4, - colStyle: { paddingLeft: 48 } - }, - { - title: intl.formatMessage({ id: 'resources.table.vendor' }), - dataIndex: 'vendor', - key: 'vendor', - span: 6, - colStyle: { paddingLeft: 110 } - }, - { - title: intl.formatMessage({ id: 'resources.table.vram' }), - dataIndex: 'memory_total', - key: 'memory_total', - span: 4, - render: (value: number, record: any) => convertFileSize(value) - }, - { - title: intl.formatMessage({ id: 'resources.table.core' }), - dataIndex: 'core_total', - key: 'core_total', - span: 4, - colStyle: { paddingLeft: 36 } - } - ]; - - const columns = [ - { - title: intl.formatMessage({ id: 'benchmark.env.workerName' }), - dataIndex: 'name', - key: 'name', - span: 6, - render: (value: string, record: any) => { - return ( - <> - {value} - {record.isMain && ( - - Main - - )} - - ); - } - }, - { - title: intl.formatMessage({ id: 'benchmark.env.system' }), - dataIndex: 'os', - key: 'system', - span: 5, - render: (os: { name: string; version: string }, record: any) => { - return ( - {`${record.os?.name || ''} (${record.os?.version || ''})`} - ); - } - }, - { - title: intl.formatMessage({ id: 'benchmark.env.runtimeVersion' }), - dataIndex: 'runtime_version', - key: 'runtime_version', - span: 3, - render: (val: any, record: any) => { - return {record.runtime_version || ''}; - } - }, - { - title: intl.formatMessage({ id: 'benchmark.env.driverVersion' }), - dataIndex: 'driver_version', - key: 'driver_version', - span: 3, - render: (val: any, record: any) => { - return {record.driver_version || ''}; - } - }, - { - title: intl.formatMessage({ id: 'benchmark.env.cpuCounts' }), - dataIndex: 'cpu_total', - key: 'cpu_total', - span: 3 - }, - { - title: intl.formatMessage({ id: 'resources.table.memory' }), - dataIndex: 'memory_total', - key: 'memory_total', - span: 4, - render: (value: number) => convertFileSize(value) - } - ]; + }, [snapshot]); const dataList = useMemo(() => { - return [mainWorker, ...subWorkers]; - }, [mainWorker, subWorkers]); + return [mainWorker, ...subWorkerList].filter(Boolean) as WorkerData[]; + }, [mainWorker, subWorkerList]); const handleToggleExpandAll = useMemoizedFn((expanded: boolean) => { const keys = dataList?.map((item) => item.id); @@ -188,29 +115,7 @@ const Environment: React.FC = () => { const renderChildren = useMemoizedFn((list: any[]) => { return (
- - {GPUColumns.map((col) => ( - - - - {col.title} - - - - ))} - + {list.map((gpu) => ( @@ -250,8 +155,7 @@ const Environment: React.FC = () => { dataSource={dataList} loading={false} loadend={true} - columns={columns} - childParentKey="id" + columns={workerColumns} expandable={true} > diff --git a/src/pages/benchmark/components/environment/metadata.tsx b/src/pages/benchmark/components/environment/metadata.tsx deleted file mode 100644 index 78008626..00000000 --- a/src/pages/benchmark/components/environment/metadata.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { convertFileSize } from '@/utils'; -import { Descriptions, DescriptionsProps } from 'antd'; -import React from 'react'; -import { WorkerData } from '../../config/detail-types'; - -const Environment: React.FC = (props) => { - const { os, cpu_total, memory_total } = props; - - const items: DescriptionsProps['items'] = [ - { - key: '4', - label: 'System', - children: os.name - }, - { - key: '1', - label: 'CPU Count', - children: cpu_total - }, - { - key: '5', - label: 'Memory Total', - children: convertFileSize(memory_total) - } - ]; - return ( -
- -
- ); -}; - -export default Environment; diff --git a/src/pages/benchmark/components/environment/use-gpu-columns.tsx b/src/pages/benchmark/components/environment/use-gpu-columns.tsx new file mode 100644 index 00000000..301b287f --- /dev/null +++ b/src/pages/benchmark/components/environment/use-gpu-columns.tsx @@ -0,0 +1,56 @@ +import AutoTooltip from '@/components/auto-tooltip'; +import { convertFileSize } from '@/utils'; +import { useIntl } from '@umijs/max'; + +export default function useGPUColumns(): { + title: string; + dataIndex: string; + key: string; + span: number; + colStyle?: React.CSSProperties; + render?: (value: any, record: any) => React.ReactNode; +}[] { + const intl = useIntl(); + + return [ + { + title: intl.formatMessage({ id: 'benchmark.env.gpuName' }), + dataIndex: 'name', + key: 'name', + span: 6, + colStyle: { paddingLeft: 16 }, + render: (value: string, record: any) => ( + {value} + ) + }, + { + title: intl.formatMessage({ id: 'benchmark.env.index' }), + dataIndex: 'index', + key: 'index', + span: 4, + colStyle: { paddingLeft: 48 } + }, + { + title: intl.formatMessage({ id: 'resources.table.vendor' }), + dataIndex: 'vendor', + key: 'vendor', + span: 4, + colStyle: { paddingLeft: 110 } + }, + { + title: intl.formatMessage({ id: 'resources.table.vram' }), + dataIndex: 'memory_total', + key: 'memory_total', + colStyle: { paddingLeft: 40 }, + span: 6, + render: (value: number, record: any) => convertFileSize(value) + }, + { + title: intl.formatMessage({ id: 'resources.table.core' }), + dataIndex: 'core_total', + key: 'core_total', + span: 4, + colStyle: { paddingLeft: 36 } + } + ]; +} diff --git a/src/pages/benchmark/components/environment/use-worker-columns.tsx b/src/pages/benchmark/components/environment/use-worker-columns.tsx new file mode 100644 index 00000000..c8e1be4f --- /dev/null +++ b/src/pages/benchmark/components/environment/use-worker-columns.tsx @@ -0,0 +1,80 @@ +import AutoTooltip from '@/components/auto-tooltip'; +import { convertFileSize } from '@/utils'; +import { useIntl } from '@umijs/max'; +import { Tag } from 'antd'; + +export default function useWorkerColumns(): { + title: string; + dataIndex: string; + key: string; + span: number; + colStyle?: React.CSSProperties; + render?: (value: any, record: any) => React.ReactNode; +}[] { + const intl = useIntl(); + + return [ + { + title: intl.formatMessage({ id: 'benchmark.env.workerName' }), + dataIndex: 'name', + key: 'name', + span: 6, + render: (value: string, record: any) => { + return ( + <> + {value} + {record.isMain && ( + + Main + + )} + + ); + } + }, + { + title: intl.formatMessage({ id: 'benchmark.env.system' }), + dataIndex: 'os', + key: 'system', + span: 5, + render: (os: { name: string; version: string }, record: any) => { + return ( + {`${record.os?.name || ''} (${record.os?.version || ''})`} + ); + } + }, + { + title: intl.formatMessage({ id: 'benchmark.env.runtimeVersion' }), + dataIndex: 'runtime_version', + key: 'runtime_version', + span: 3, + render: (val: any, record: any) => { + return {record.runtime_version || ''}; + } + }, + { + title: intl.formatMessage({ id: 'benchmark.env.driverVersion' }), + dataIndex: 'driver_version', + key: 'driver_version', + span: 3, + render: (val: any, record: any) => { + return {record.driver_version || ''}; + } + }, + { + title: intl.formatMessage({ id: 'benchmark.env.cpuCounts' }), + dataIndex: 'cpu_total', + key: 'cpu_total', + span: 3 + }, + { + title: intl.formatMessage({ id: 'resources.table.memory' }), + dataIndex: 'memory_total', + key: 'memory_total', + span: 4, + render: (value: number) => convertFileSize(value) + } + ]; +} diff --git a/src/pages/benchmark/components/environment/worker-data.tsx b/src/pages/benchmark/components/environment/worker-data.tsx deleted file mode 100644 index 885a7cb4..00000000 --- a/src/pages/benchmark/components/environment/worker-data.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { Col, Row } from 'antd'; -import React from 'react'; -import styled from 'styled-components'; -import { GPUData as GPUDataType, WorkerData } from '../../config/detail-types'; -import Section from '../summary/section'; -import GPUData from './gpu-data'; -import Metadata from './metadata'; - -const Container = styled.div` - display: flex; - flex-direction: column; - border-radius: var(--ant-border-radius); - border: 1px solid var(--ant-color-border); -`; - -const Content = styled.div` - display: flex; - flex-direction: column; - gap: 16px; - padding: 16px 16px; -`; - -const Environment: React.FC<{ - workerData: WorkerData; - gpuData: GPUDataType[]; - title?: React.ReactNode; -}> = (props) => { - const { title } = props; - return ( - -
- -
- - - {props.gpuData.map((gpu, index) => ( - - - - ))} - - - - ); -}; - -export default Environment; diff --git a/src/pages/benchmark/components/summary/benchmark.tsx b/src/pages/benchmark/components/summary/benchmark.tsx index 0f4c8300..a9c75c5b 100644 --- a/src/pages/benchmark/components/summary/benchmark.tsx +++ b/src/pages/benchmark/components/summary/benchmark.tsx @@ -1,13 +1,16 @@ import { useIntl } from '@umijs/max'; -import { Descriptions, DescriptionsProps } from 'antd'; +import { Descriptions } from 'antd'; +import { DescriptionsItemType } from 'antd/es/descriptions'; import React from 'react'; +import { DatasetValueMap } from '../../config'; import { useDetailContext } from '../../config/detail-context'; const Benchmark: React.FC = () => { const intl = useIntl(); const { detailData, profilesOptions } = useDetailContext(); - const items: DescriptionsProps['items'] = [ + type ItemTyp = DescriptionsItemType & { hidden?: boolean }; + const items: ItemTyp[] = [ { key: '1', label: intl.formatMessage({ id: 'benchmark.form.profile' }), @@ -27,6 +30,7 @@ const Benchmark: React.FC = () => { label: intl.formatMessage({ id: 'benchmark.detail.inputOutputTokenLength' }), + hidden: detailData?.dataset_name === DatasetValueMap.ShareGPT, children: ( {detailData?.dataset_input_tokens || '-'} /{' '} @@ -47,6 +51,7 @@ const Benchmark: React.FC = () => { { key: '5', label: intl.formatMessage({ id: 'playground.image.params.seed' }), + hidden: detailData?.dataset_name === DatasetValueMap.ShareGPT, children: detailData?.dataset_seed || '-' } ]; @@ -54,9 +59,9 @@ const Benchmark: React.FC = () => { return (
!item.hidden)} colon={false} - column={3} + column={detailData?.dataset_name === DatasetValueMap.ShareGPT ? 2 : 3} styles={{ content: { justifyContent: 'flex-start' diff --git a/src/pages/benchmark/config/detail-types.ts b/src/pages/benchmark/config/detail-types.ts index fd5f335c..723f6a86 100644 --- a/src/pages/benchmark/config/detail-types.ts +++ b/src/pages/benchmark/config/detail-types.ts @@ -64,6 +64,11 @@ export interface GPUData { core_total: number; } +export interface Snapshot { + instances: Record; + workers: Record; + gpus: Record; +} export interface BenchmarkDetail { profile: string; dataset_seed: number; @@ -100,11 +105,7 @@ export interface BenchmarkDetail { progress: any; worker_id: number; pid: number; - snapshot: { - instances: Record; - workers: Record; - gpus: Record; - }; + snapshot: Snapshot; gpu_summary: string; gpu_vendor_summary: string; id: number; diff --git a/src/pages/benchmark/hooks/use-column-settings.tsx b/src/pages/benchmark/hooks/use-column-settings.tsx index c0286347..e722cef5 100644 --- a/src/pages/benchmark/hooks/use-column-settings.tsx +++ b/src/pages/benchmark/hooks/use-column-settings.tsx @@ -214,7 +214,7 @@ const useColumnSettings = (options: { 0} title={} > {_.round(text, 2) || '-'} diff --git a/src/pages/llmodels/catalog.tsx b/src/pages/llmodels/catalog.tsx index 580856fb..20fa83cf 100644 --- a/src/pages/llmodels/catalog.tsx +++ b/src/pages/llmodels/catalog.tsx @@ -95,7 +95,8 @@ const Catalog: React.FC = () => { const handleCategoryChange = (value: any) => { handleQueryChange({ - categories: value + categories: value, + page: 1 }); };