refactor: env detail
This commit is contained in:
@@ -1,5 +1,4 @@
|
||||
import IconFont from '@/components/icon-font';
|
||||
import { RightOutlined } from '@ant-design/icons';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button, Checkbox } from 'antd';
|
||||
import _ from 'lodash';
|
||||
@@ -88,14 +87,34 @@ const HeaderPrefix: React.FC<HeaderPrefixProps> = (props) => {
|
||||
}
|
||||
if (expandable) {
|
||||
return (
|
||||
<div className="header-row-prefix-wrapper">
|
||||
{_.isBoolean(expandable) ? (
|
||||
<Button type="text" size="small">
|
||||
<RightOutlined />
|
||||
</Button>
|
||||
) : (
|
||||
expandable
|
||||
)}
|
||||
<div
|
||||
className="header-row-prefix-wrapper flex-center"
|
||||
style={{ paddingLeft: 16 }}
|
||||
>
|
||||
<span style={{ marginRight: 5 }}>
|
||||
{_.isBoolean(expandable) ? (
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
onClick={handleToggleExpand}
|
||||
style={{ paddingInline: 6 }}
|
||||
>
|
||||
{expandAll ? (
|
||||
<IconFont
|
||||
type="icon-collapse_all"
|
||||
className="font-size-16"
|
||||
></IconFont>
|
||||
) : (
|
||||
<IconFont
|
||||
type="icon-uncollapse_all"
|
||||
className="font-size-16"
|
||||
></IconFont>
|
||||
)}
|
||||
</Button>
|
||||
) : (
|
||||
expandable
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -27,7 +27,7 @@ const Wrapper = styled.div<{ $token: any }>`
|
||||
props.$token.tableHeaderIconHoverColor};
|
||||
`;
|
||||
|
||||
const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
|
||||
const SealTable: React.FC<SealTableProps & { pagination?: PaginationProps }> = (
|
||||
props
|
||||
) => {
|
||||
const {
|
||||
|
||||
@@ -84,11 +84,12 @@ export function useQueryDataList<ListItem, Params = any>(option: {
|
||||
|
||||
export function useQueryData<Detail, Params = any>(option: {
|
||||
key: string;
|
||||
delay?: number;
|
||||
fetchDetail: (params: Params, options?: any) => Promise<Detail>;
|
||||
getData?: (response: Detail) => any;
|
||||
errorMsg?: string;
|
||||
}) {
|
||||
const { key, fetchDetail, getData, errorMsg } = option;
|
||||
const { key, fetchDetail, getData, errorMsg, delay } = option;
|
||||
const axiosTokenRef = useRef<CancelTokenSource | null>(null);
|
||||
const [detailData, setDetailData] = useState<Detail>({} as Detail);
|
||||
|
||||
@@ -105,6 +106,12 @@ export function useQueryData<Detail, Params = any>(option: {
|
||||
...(extra || {})
|
||||
});
|
||||
|
||||
if (delay) {
|
||||
await new Promise((resolve) => {
|
||||
setTimeout(resolve, delay);
|
||||
});
|
||||
}
|
||||
|
||||
setDetailData(getData ? getData(res) : res);
|
||||
|
||||
return res;
|
||||
|
||||
@@ -7,9 +7,9 @@ export default {
|
||||
'benchmark.table.dataset': 'Dataset',
|
||||
'benchmark.table.requestRate': 'Request Rate',
|
||||
'benchmark.table.gpu': 'GPU ',
|
||||
'benchmark.table.tpot': 'TPOT (ms)',
|
||||
'benchmark.table.itl': 'ITL (ms)',
|
||||
'benchmark.table.ttft': 'TTFT (ms)',
|
||||
'benchmark.table.tpot': 'TPOT',
|
||||
'benchmark.table.itl': 'ITL',
|
||||
'benchmark.table.ttft': 'TTFT',
|
||||
'benchmark.table.rps': 'Requests/s',
|
||||
'benchmark.table.tps': 'Tokens/s',
|
||||
'benchmark.table.inputLen': 'Input Length',
|
||||
|
||||
@@ -7,9 +7,9 @@ export default {
|
||||
'benchmark.table.dataset': 'Dataset',
|
||||
'benchmark.table.requestRate': 'Request Rate',
|
||||
'benchmark.table.gpu': 'GPU ',
|
||||
'benchmark.table.tpot': 'TPOT (ms)',
|
||||
'benchmark.table.itl': 'ITL (ms)',
|
||||
'benchmark.table.ttft': 'TTFT (ms)',
|
||||
'benchmark.table.tpot': 'TPOT',
|
||||
'benchmark.table.itl': 'ITL',
|
||||
'benchmark.table.ttft': 'TTFT',
|
||||
'benchmark.table.rps': 'Requests/s',
|
||||
'benchmark.table.tps': 'Tokens/s',
|
||||
'benchmark.table.inputLen': 'Input Length',
|
||||
|
||||
@@ -7,9 +7,9 @@ export default {
|
||||
'benchmark.table.dataset': 'Dataset',
|
||||
'benchmark.table.requestRate': 'Request Rate',
|
||||
'benchmark.table.gpu': 'GPU ',
|
||||
'benchmark.table.tpot': 'TPOT (ms)',
|
||||
'benchmark.table.itl': 'ITL (ms)',
|
||||
'benchmark.table.ttft': 'TTFT (ms)',
|
||||
'benchmark.table.tpot': 'TPOT',
|
||||
'benchmark.table.itl': 'ITL',
|
||||
'benchmark.table.ttft': 'TTFT',
|
||||
'benchmark.table.rps': 'Requests/s',
|
||||
'benchmark.table.tps': 'Tokens/s',
|
||||
'benchmark.table.inputLen': 'Input Length',
|
||||
|
||||
@@ -7,9 +7,9 @@ export default {
|
||||
'benchmark.table.dataset': '数据集',
|
||||
'benchmark.table.requestRate': '请求率',
|
||||
'benchmark.table.gpu': 'GPU ',
|
||||
'benchmark.table.tpot': 'TPOT (ms)',
|
||||
'benchmark.table.itl': 'ITL (ms)',
|
||||
'benchmark.table.ttft': 'TTFT (ms)',
|
||||
'benchmark.table.tpot': 'TPOT',
|
||||
'benchmark.table.itl': 'ITL',
|
||||
'benchmark.table.ttft': 'TTFT',
|
||||
'benchmark.table.rps': '请求数/秒',
|
||||
'benchmark.table.tps': 'Tokens/秒',
|
||||
'benchmark.table.inputLen': '输入长度',
|
||||
|
||||
@@ -1,8 +1,13 @@
|
||||
import { Tag } from 'antd';
|
||||
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 useMemoizedFn from 'ahooks/lib/useMemoizedFn';
|
||||
import { Col, Row } from 'antd';
|
||||
import React, { useMemo } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { useDetailContext } from '../../config/detail-context';
|
||||
import WorkerData from './worker-data';
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
@@ -14,74 +19,209 @@ const Environment: React.FC = () => {
|
||||
const { detailData } = useDetailContext();
|
||||
const { snapshot } = detailData;
|
||||
|
||||
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
|
||||
);
|
||||
|
||||
return {
|
||||
workerData: workerInfo,
|
||||
gpuData: [...gpuData, ...gpuData]
|
||||
...workerInfo,
|
||||
isMain: true,
|
||||
children: gpuData
|
||||
};
|
||||
}, [snapshot]);
|
||||
|
||||
const subWorkers = useMemo(() => {
|
||||
const [[mainWorkerName, mainWorkerInfo]] = Object.entries(snapshot.workers);
|
||||
// const subWorkers = useMemo(() => {
|
||||
// const [[mainWorkerName, mainWorkerInfo]] = Object.entries(snapshot.workers);
|
||||
|
||||
const subOrdinaryWorkers = Object.values(snapshot.instances).filter(
|
||||
(instance) => instance.worker_name === mainWorkerName
|
||||
// const subOrdinaryWorkers = Object.values(snapshot.instances).filter(
|
||||
// (instance) => instance.worker_name === mainWorkerName
|
||||
// );
|
||||
|
||||
// return subOrdinaryWorkers.map((worker) => {
|
||||
// const gpuData = Object.values(snapshot.gpus).filter(
|
||||
// (gpu) => gpu.worker_name === worker.worker_name
|
||||
// );
|
||||
|
||||
// return {
|
||||
// ...worker,
|
||||
// isMain: false,
|
||||
// children: gpuData
|
||||
// };
|
||||
// });
|
||||
// }, [snapshot, mainWorker]);
|
||||
|
||||
const GPUColumns = [
|
||||
{
|
||||
title: 'GPU Name',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
span: 6,
|
||||
colStyle: { paddingLeft: 16 },
|
||||
render: (value: string, record: any) => (
|
||||
<AutoTooltip ghost>{value}</AutoTooltip>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: 'Vendor',
|
||||
dataIndex: 'vendor',
|
||||
key: 'vendor',
|
||||
span: 4,
|
||||
colStyle: { paddingLeft: 46 }
|
||||
},
|
||||
{
|
||||
title: 'VRAM',
|
||||
dataIndex: 'memory_total',
|
||||
key: 'memory_total',
|
||||
label: 'VRAM',
|
||||
span: 3,
|
||||
render: (value: number, record: any) => convertFileSize(value)
|
||||
},
|
||||
{
|
||||
title: 'Cores',
|
||||
dataIndex: 'core_total',
|
||||
key: 'core_total',
|
||||
label: 'Cores',
|
||||
span: 3
|
||||
},
|
||||
{
|
||||
title: 'Runtime Version',
|
||||
dataIndex: 'runtime_version',
|
||||
key: 'runtime_version',
|
||||
span: 4
|
||||
},
|
||||
{
|
||||
title: 'Driver Version',
|
||||
dataIndex: 'driver_version',
|
||||
key: 'driver_version',
|
||||
span: 4,
|
||||
colStyle: { paddingLeft: 35 }
|
||||
}
|
||||
];
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'Worker Name',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
span: 6
|
||||
},
|
||||
{
|
||||
title: 'System',
|
||||
dataIndex: 'os',
|
||||
key: 'system',
|
||||
span: 4,
|
||||
render: (os: { name: string; version: string }, record: any) => {
|
||||
return `${record.os.name}`;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Version',
|
||||
dataIndex: 'version',
|
||||
key: 'version',
|
||||
span: 6,
|
||||
render: (val: any, record: any) => {
|
||||
return <AutoTooltip ghost>{record.os.version}</AutoTooltip>;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'CPU Count',
|
||||
dataIndex: 'cpu_total',
|
||||
key: 'cpu_total',
|
||||
span: 4
|
||||
},
|
||||
{
|
||||
title: 'Memory',
|
||||
dataIndex: 'memory_total',
|
||||
key: 'memory_total',
|
||||
span: 4,
|
||||
render: (value: number) => convertFileSize(value)
|
||||
}
|
||||
];
|
||||
|
||||
const dataList = useMemo(() => {
|
||||
return [mainWorker];
|
||||
}, [mainWorker]);
|
||||
|
||||
const handleToggleExpandAll = useMemoizedFn((expanded: boolean) => {
|
||||
const keys = dataList?.map((item) => item.id);
|
||||
handleExpandAll(expanded, keys);
|
||||
});
|
||||
|
||||
const loadChildren = useMemoizedFn(async (record: any) => {
|
||||
return record.children || [];
|
||||
});
|
||||
|
||||
const renderChildren = useMemoizedFn((list: any[]) => {
|
||||
return (
|
||||
<div style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}>
|
||||
<RowChildren>
|
||||
{list.map((gpu) => (
|
||||
<Row key={gpu.id} style={{ width: '100%' }} align="middle">
|
||||
{GPUColumns.map((col) => (
|
||||
<Col key={col.key} span={col.span} style={{ ...col.colStyle }}>
|
||||
<span
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
gap: 4,
|
||||
flexDirection: 'column'
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
color: 'var(--ant-color-text-tertiary)',
|
||||
fontSize: 12
|
||||
}}
|
||||
>
|
||||
{col.title}
|
||||
</span>
|
||||
{col.render
|
||||
? col.render((gpu as any)[col.dataIndex], gpu)
|
||||
: (gpu as any)[col.dataIndex]}
|
||||
</span>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
))}
|
||||
</RowChildren>
|
||||
</div>
|
||||
);
|
||||
|
||||
return subOrdinaryWorkers.map((worker) => {
|
||||
const gpuData = Object.values(snapshot.gpus).filter(
|
||||
(gpu) => gpu.worker_name === worker.worker_name
|
||||
);
|
||||
|
||||
return {
|
||||
workerData: worker,
|
||||
gpuData: gpuData
|
||||
};
|
||||
});
|
||||
}, [snapshot, mainWorker]);
|
||||
});
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<WorkerData
|
||||
{/* <WorkerData
|
||||
workerData={mainWorker.workerData}
|
||||
gpuData={mainWorker.gpuData}
|
||||
gpuData={mainWorker.children}
|
||||
title={
|
||||
<div className="flex-center gap-8">
|
||||
<Tag color="geekblue">Main</Tag>
|
||||
<span>{mainWorker?.workerData?.name}</span>
|
||||
</div>
|
||||
}
|
||||
></WorkerData>
|
||||
<WorkerData
|
||||
workerData={mainWorker.workerData}
|
||||
gpuData={mainWorker.gpuData}
|
||||
title={
|
||||
<div className="flex-center gap-8">
|
||||
<Tag
|
||||
style={{
|
||||
backgroundColor: 'var(--ant-color-fill-secondary)',
|
||||
color: 'var(--ant-color-text-tertiary)'
|
||||
}}
|
||||
>
|
||||
Sub
|
||||
</Tag>
|
||||
<span>{mainWorker?.workerData?.name}</span>
|
||||
</div>
|
||||
}
|
||||
></WorkerData>
|
||||
{/* {subWorkers?.map?.((worker, index) => (
|
||||
<WorkerData
|
||||
key={index}
|
||||
workerData={worker.workerData}
|
||||
gpuData={worker.gpuData}
|
||||
></WorkerData>
|
||||
))} */}
|
||||
></WorkerData> */}
|
||||
<SealTable
|
||||
rowKey="id"
|
||||
loadChildren={loadChildren}
|
||||
expandedRowKeys={expandedRowKeys}
|
||||
onExpand={handleExpandChange}
|
||||
onExpandAll={handleToggleExpandAll}
|
||||
renderChildren={renderChildren}
|
||||
showSorterTooltip={false}
|
||||
dataSource={dataList}
|
||||
loading={false}
|
||||
loadend={true}
|
||||
columns={columns}
|
||||
childParentKey="id"
|
||||
expandable={true}
|
||||
></SealTable>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -45,7 +45,7 @@ const Benchmark: React.FC = () => {
|
||||
];
|
||||
|
||||
return (
|
||||
<Section title="Benchmark Parameters">
|
||||
<Section title="Benchmark Parameters" minHeight={132}>
|
||||
<Descriptions
|
||||
items={items}
|
||||
colon={false}
|
||||
|
||||
@@ -144,7 +144,7 @@ const Instance: React.FC = () => {
|
||||
}, [detailData]);
|
||||
|
||||
return (
|
||||
<Section title="Model Instance">
|
||||
<Section title="Model Instance" minHeight={220}>
|
||||
<Descriptions
|
||||
items={items}
|
||||
colon={false}
|
||||
|
||||
@@ -12,18 +12,7 @@ const columns = [
|
||||
unit: 's',
|
||||
render: (value: number) => round(value, 2)
|
||||
},
|
||||
{
|
||||
title: 'Concurrency',
|
||||
dataIndex: 'request_concurrency',
|
||||
path: ['raw_metrics', 'benchmarks', '0'],
|
||||
unit: '',
|
||||
render: (value: number) => {
|
||||
return round(
|
||||
_.get(value, 'metrics.request_concurrency.successful.mean'),
|
||||
0
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Total Requests',
|
||||
dataIndex: 'total_requests',
|
||||
@@ -31,6 +20,13 @@ const columns = [
|
||||
unit: '',
|
||||
render: (value: number) => round(value, 0)
|
||||
},
|
||||
{
|
||||
title: 'Total token throughput',
|
||||
dataIndex: 'tokens_per_second_mean',
|
||||
path: 'tokens_per_second_mean',
|
||||
unit: 'Tokens/s',
|
||||
render: (value: number) => round(value, 2)
|
||||
},
|
||||
{
|
||||
title: 'Success Requests',
|
||||
dataIndex: 'successful_requests',
|
||||
@@ -44,6 +40,17 @@ const columns = [
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Output token throughput',
|
||||
dataIndex: 'output_tokens_per_second_mean',
|
||||
path: 'output_tokens_per_second_mean',
|
||||
unit: 'Tokens/s',
|
||||
render: (value: number) => round(value, 2)
|
||||
}
|
||||
];
|
||||
|
||||
const columnsSub = [
|
||||
{
|
||||
title: 'Failed Requests',
|
||||
dataIndex: 'failed_requests',
|
||||
@@ -58,27 +65,22 @@ const columns = [
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Output token throughput (t/s)',
|
||||
dataIndex: 'output_tokens_per_second_mean',
|
||||
path: 'output_tokens_per_second_mean',
|
||||
unit: 't/s',
|
||||
render: (value: number) => round(value, 2)
|
||||
}
|
||||
];
|
||||
|
||||
const columnsSub = [
|
||||
{
|
||||
title: 'Total token throughput (t/s)',
|
||||
dataIndex: 'tokens_per_second_mean',
|
||||
path: 'tokens_per_second_mean',
|
||||
unit: 't/s',
|
||||
render: (value: number) => round(value, 2)
|
||||
title: 'Concurrency',
|
||||
dataIndex: 'request_concurrency',
|
||||
path: ['raw_metrics', 'benchmarks', '0'],
|
||||
unit: '',
|
||||
render: (value: number) => {
|
||||
return round(
|
||||
_.get(value, 'metrics.request_concurrency.successful.mean'),
|
||||
0
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Request token throughput (t/s)',
|
||||
title: 'Request token throughput ',
|
||||
dataIndex: 'prompt_tokens_per_second_mean',
|
||||
path: 'prompt_tokens_per_second_mean',
|
||||
unit: 't/s',
|
||||
unit: 'Tokens/s',
|
||||
render: (value: number) => round(value, 2)
|
||||
},
|
||||
{
|
||||
@@ -135,14 +137,19 @@ const PercentileResult: React.FC = () => {
|
||||
({ title, dataIndex, path, render, unit }) => ({
|
||||
key: dataIndex,
|
||||
label: title,
|
||||
children: unit
|
||||
? render(_.get(detailData, path) ?? 0) + ` (${unit})`
|
||||
: render(_.get(detailData, path) ?? 0)
|
||||
children: unit ? (
|
||||
<span className="flex-center">
|
||||
{render(_.get(detailData, path) ?? 0)}{' '}
|
||||
<span className="m-l-4">({unit})</span>
|
||||
</span>
|
||||
) : (
|
||||
render(_.get(detailData, path) ?? 0)
|
||||
)
|
||||
})
|
||||
);
|
||||
|
||||
return (
|
||||
<Section title="Metrics Result" minHeight={200}>
|
||||
<Section title="Metrics Result" minHeight={210}>
|
||||
{/* <Table
|
||||
size="small"
|
||||
columns={[
|
||||
|
||||
@@ -76,7 +76,7 @@ const PercentileResult: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Section title="Percentiles Result">
|
||||
<Section title="Percentiles Result" minHeight={240}>
|
||||
<Table
|
||||
size="small"
|
||||
columns={[
|
||||
@@ -90,6 +90,17 @@ const PercentileResult: React.FC = () => {
|
||||
rowKey="percentile"
|
||||
pagination={false}
|
||||
styles={{
|
||||
// header: {
|
||||
// row: {
|
||||
// background: 'none',
|
||||
// borderBottom: '1px solid var(--ant-color-split)'
|
||||
// },
|
||||
// cell: {
|
||||
// background: 'none',
|
||||
// paddingBottom: 0,
|
||||
// borderBottom: '1px solid var(--ant-color-split)'
|
||||
// }
|
||||
// },
|
||||
body: {
|
||||
cell: {
|
||||
height: 54
|
||||
|
||||
@@ -81,7 +81,7 @@ export interface FormData {
|
||||
dataset_output_tokens: number;
|
||||
total_requests: number;
|
||||
request_rate: number;
|
||||
seed: number;
|
||||
dataset_seed: number;
|
||||
model_instance?: string;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import AutoComplete from '@/components/seal-form/auto-complete';
|
||||
import SealInput from '@/components/seal-form/seal-input';
|
||||
import SealSelect from '@/components/seal-form/seal-select';
|
||||
import useAppUtils from '@/hooks/use-app-utils';
|
||||
@@ -32,30 +31,17 @@ const DatasetForm: React.FC = () => {
|
||||
} = useQueryProfiles();
|
||||
|
||||
const handleOnDataSetChange = (value: any, option: any) => {
|
||||
if (value === 'Custom') {
|
||||
form.setFieldsValue({
|
||||
profile: ProfileValueMap.Custom,
|
||||
dataset_id: null
|
||||
});
|
||||
} else {
|
||||
form.setFieldsValue({
|
||||
profile: ProfileValueMap.Custom,
|
||||
dataset_id: option?.data?.id,
|
||||
dataset_prompt_tokens: option?.prompt_tokens,
|
||||
dataset_output_tokens: option?.output_tokens,
|
||||
request_rate: null,
|
||||
total_requests: null
|
||||
});
|
||||
}
|
||||
form.setFieldsValue({
|
||||
dataset_id: option?.data?.id,
|
||||
dataset_prompt_tokens: option?.prompt_tokens,
|
||||
dataset_output_tokens: option?.output_tokens,
|
||||
request_rate: null,
|
||||
total_requests: null
|
||||
});
|
||||
};
|
||||
|
||||
const handleProfileChange = (value: string, option: any) => {
|
||||
if (value === ProfileValueMap.Custom) {
|
||||
form.setFieldsValue({
|
||||
dataset_name: 'Custom',
|
||||
dataset_id: null
|
||||
});
|
||||
} else {
|
||||
if (value !== ProfileValueMap.Custom) {
|
||||
const dataset_id = datasetList.find(
|
||||
(item) => item.label === option.config?.dataset_name
|
||||
)?.value;
|
||||
@@ -97,31 +83,17 @@ const DatasetForm: React.FC = () => {
|
||||
required
|
||||
></SealSelect>
|
||||
</Form.Item>
|
||||
<Form.Item<FormData>
|
||||
name="dataset_name"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: getRuleMessage('select', 'benchmark.table.dataset')
|
||||
}
|
||||
]}
|
||||
>
|
||||
<AutoComplete
|
||||
options={datasetList.map((item) => ({
|
||||
...item,
|
||||
label: item.label,
|
||||
value: item.label
|
||||
}))}
|
||||
loading={datasetLoading}
|
||||
onChange={handleOnDataSetChange}
|
||||
label={intl.formatMessage({ id: 'benchmark.table.dataset' })}
|
||||
required
|
||||
></AutoComplete>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item<FormData> hidden name="dataset_id">
|
||||
<SealInput.Input></SealInput.Input>
|
||||
</Form.Item>
|
||||
{profile === 'Custom' && <RandomSettingsForm></RandomSettingsForm>}
|
||||
{profile === 'Custom' && (
|
||||
<RandomSettingsForm
|
||||
datasetList={datasetList}
|
||||
datasetLoading={datasetLoading}
|
||||
handleOnDataSetChange={handleOnDataSetChange}
|
||||
></RandomSettingsForm>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -130,7 +130,7 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
|
||||
dataset_output_tokens: null,
|
||||
total_requests: null,
|
||||
request_rate: null,
|
||||
seed: null
|
||||
dataset_seed: null
|
||||
}}
|
||||
>
|
||||
<Basic />
|
||||
|
||||
@@ -1,11 +1,17 @@
|
||||
import SealInputNumber from '@/components/seal-form/input-number';
|
||||
import SealSelect from '@/components/seal-form/seal-select';
|
||||
import useAppUtils from '@/hooks/use-app-utils';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Form } from 'antd';
|
||||
import React from 'react';
|
||||
import { FormData } from '../config/types';
|
||||
|
||||
const RandomSettingsForm: React.FC = () => {
|
||||
const RandomSettingsForm: React.FC<{
|
||||
datasetList: Global.BaseOption<number | string>[];
|
||||
datasetLoading: boolean;
|
||||
handleOnDataSetChange: (value: any, option: any) => void;
|
||||
}> = (props) => {
|
||||
const { datasetList, datasetLoading, handleOnDataSetChange } = props;
|
||||
const intl = useIntl();
|
||||
const form = Form.useFormInstance();
|
||||
const profile = Form.useWatch('profile', form);
|
||||
@@ -15,6 +21,28 @@ const RandomSettingsForm: React.FC = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form.Item<FormData>
|
||||
name="dataset_name"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: getRuleMessage('select', 'benchmark.table.dataset')
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SealSelect
|
||||
disabled={disabled}
|
||||
options={datasetList?.map((item) => ({
|
||||
...item,
|
||||
label: item.label,
|
||||
value: item.label
|
||||
}))}
|
||||
loading={datasetLoading}
|
||||
onChange={handleOnDataSetChange}
|
||||
label={intl.formatMessage({ id: 'benchmark.table.dataset' })}
|
||||
required
|
||||
></SealSelect>
|
||||
</Form.Item>
|
||||
<Form.Item<FormData>
|
||||
name="dataset_prompt_tokens"
|
||||
rules={[
|
||||
@@ -53,7 +81,7 @@ const RandomSettingsForm: React.FC = () => {
|
||||
></SealInputNumber>
|
||||
</Form.Item>
|
||||
<Form.Item<FormData>
|
||||
name="seed"
|
||||
name="dataset_seed"
|
||||
getValueProps={(value) => ({ value: value || null })}
|
||||
>
|
||||
<SealInputNumber
|
||||
|
||||
@@ -5,7 +5,6 @@ import { tableSorter } from '@/config/settings';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Typography } from 'antd';
|
||||
import { ColumnsType } from 'antd/es/table';
|
||||
import dayjs from 'dayjs';
|
||||
import _ from 'lodash';
|
||||
import { useMemo } from 'react';
|
||||
import RowActions from '../components/row-actions';
|
||||
@@ -70,16 +69,16 @@ const useBenchmarkColumns = (
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'benchmark.table.requestRate' }),
|
||||
dataIndex: 'request_rate',
|
||||
sorter: tableSorter(1),
|
||||
render: (text: string) => (
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
{text}
|
||||
</AutoTooltip>
|
||||
)
|
||||
},
|
||||
// {
|
||||
// title: intl.formatMessage({ id: 'benchmark.table.requestRate' }),
|
||||
// dataIndex: 'request_rate',
|
||||
// sorter: tableSorter(1),
|
||||
// render: (text: string) => (
|
||||
// <AutoTooltip ghost minWidth={20}>
|
||||
// {text}
|
||||
// </AutoTooltip>
|
||||
// )
|
||||
// },
|
||||
{
|
||||
title: intl.formatMessage({ id: 'benchmark.table.gpu' }),
|
||||
dataIndex: 'gpu_summary',
|
||||
@@ -91,7 +90,12 @@ const useBenchmarkColumns = (
|
||||
)
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'benchmark.table.itl' }),
|
||||
title: (
|
||||
<span className="flex-column">
|
||||
<span>{intl.formatMessage({ id: 'benchmark.table.itl' })}</span>
|
||||
<span>avg (ms)</span>
|
||||
</span>
|
||||
),
|
||||
dataIndex: 'inter_token_latency_mean',
|
||||
sorter: tableSorter(1),
|
||||
render: (text: string) => (
|
||||
@@ -101,7 +105,12 @@ const useBenchmarkColumns = (
|
||||
)
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'benchmark.table.tpot' }),
|
||||
title: (
|
||||
<span className="flex-column">
|
||||
<span>{intl.formatMessage({ id: 'benchmark.table.tpot' })}</span>
|
||||
<span>avg (ms)</span>
|
||||
</span>
|
||||
),
|
||||
dataIndex: 'time_per_output_token_mean',
|
||||
sorter: tableSorter(1),
|
||||
render: (text: string) => (
|
||||
@@ -111,7 +120,12 @@ const useBenchmarkColumns = (
|
||||
)
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'benchmark.table.ttft' }),
|
||||
title: (
|
||||
<span className="flex-column">
|
||||
<span>{intl.formatMessage({ id: 'benchmark.table.ttft' })}</span>
|
||||
<span>avg (ms)</span>
|
||||
</span>
|
||||
),
|
||||
dataIndex: 'time_to_first_token_mean',
|
||||
sorter: tableSorter(1),
|
||||
render: (text: string) => (
|
||||
@@ -140,16 +154,16 @@ const useBenchmarkColumns = (
|
||||
</AutoTooltip>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'common.table.createTime' }),
|
||||
dataIndex: 'created_at',
|
||||
sorter: tableSorter(3),
|
||||
render: (value: string) => (
|
||||
<AutoTooltip ghost>
|
||||
{dayjs(value).format('YYYY-MM-DD HH:mm:ss')}
|
||||
</AutoTooltip>
|
||||
)
|
||||
},
|
||||
// {
|
||||
// title: intl.formatMessage({ id: 'common.table.createTime' }),
|
||||
// dataIndex: 'created_at',
|
||||
// sorter: tableSorter(3),
|
||||
// render: (value: string) => (
|
||||
// <AutoTooltip ghost>
|
||||
// {dayjs(value).format('YYYY-MM-DD HH:mm:ss')}
|
||||
// </AutoTooltip>
|
||||
// )
|
||||
// },
|
||||
{
|
||||
title: intl.formatMessage({ id: 'common.table.operation' }),
|
||||
dataIndex: 'operations',
|
||||
|
||||
@@ -1,11 +1,9 @@
|
||||
import { useQueryDataList } from '@/hooks/use-query-data-list';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { useState } from 'react';
|
||||
import { queryDatasetList } from '../apis';
|
||||
import { DatasetListItem } from '../config/types';
|
||||
|
||||
const useQueryDataset = () => {
|
||||
const intl = useIntl();
|
||||
const { dataList, loading, fetchData, cancelRequest } = useQueryDataList<
|
||||
DatasetListItem,
|
||||
Global.SearchParams
|
||||
@@ -29,13 +27,7 @@ const useQueryDataset = () => {
|
||||
value: item.id
|
||||
})) || [];
|
||||
|
||||
setDatasetList([
|
||||
...list,
|
||||
{
|
||||
label: intl.formatMessage({ id: 'backend.custom' }),
|
||||
value: 'Custom'
|
||||
}
|
||||
]);
|
||||
setDatasetList([...list]);
|
||||
};
|
||||
|
||||
return {
|
||||
|
||||
Reference in New Issue
Block a user