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

style: detail layout

Browse Source
This commit is contained in:
jialin
2026-01-30 18:48:55 +08:00
parent 667751dc5f
commit 5747cae87a
23 changed files with 506 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/benchmark/components/summary/metrics-result.tsx
+219 -98
View File
@@ -1,25 +1,46 @@
import { Descriptions } from 'antd';
import _, { round } from 'lodash';
import React from 'react';
import styled from 'styled-components';
import { useDetailContext } from '../../config/detail-context';
import Section from './section';
import Title from './title';
const Card = styled.div`
height: 78px;
padding: 12px 16px;
border: 1px solid var(--ant-color-border);
border-radius: var(--ant-border-radius);
background-color: var(--ant-color-bg-container);
`;
const Box = styled.div`
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
`;
const DescWrapper = styled.div`
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 24px;
`;
const columns = [
{
title: 'Duration (s)',
dataIndex: 'duration',
path: ['raw_metrics', 'benchmarks', '0', 'duration'],
unit: 's',
render: (value: number) => round(value, 2)
},
// {
// title: 'Duration',
// dataIndex: 'duration',
// path: ['raw_metrics', 'benchmarks', '0', 'duration'],
// unit: 's',
// render: (value: number) => round(value, 2)
// },
{
title: 'Total Requests',
dataIndex: 'total_requests',
path: 'total_requests',
unit: '',
render: (value: number) => round(value, 0)
},
// {
// title: 'Total Requests',
// dataIndex: 'total_requests',
// path: 'total_requests',
// unit: '',
// render: (value: number) => round(value, 0)
// },
{
title: 'Total token throughput',
dataIndex: 'tokens_per_second_mean',
@@ -28,18 +49,25 @@ const columns = [
render: (value: number) => round(value, 2)
},
{
title: 'Success Requests',
dataIndex: 'successful_requests',
path: ['raw_metrics', 'benchmarks', '0'],
unit: '',
render: (value: number) => {
return (
<span style={{ color: 'var(--ant-color-success)' }}>
{_.get(value, 'metrics.request_totals.successful')}
</span>
);
}
title: 'Prompt token throughput ',
dataIndex: 'prompt_tokens_per_second_mean',
path: 'prompt_tokens_per_second_mean',
unit: 'Tokens/s',
render: (value: number) => round(value, 2)
},
// {
// title: 'Success Requests',
// dataIndex: 'successful_requests',
// path: ['raw_metrics', 'benchmarks', '0'],
// unit: '',
// render: (value: number) => {
// return (
// <span style={{ color: 'var(--ant-color-success)' }}>
// {_.get(value, 'metrics.request_totals.successful')}
// </span>
// );
// }
// },
{
title: 'Output token throughput',
@@ -51,65 +79,103 @@ const columns = [
];
const columnsSub = [
// {
// title: 'Failed Requests',
// dataIndex: 'failed_requests',
// path: ['raw_metrics', 'benchmarks', '0'],
// unit: '',
// render: (value: number) => {
// return (
// <span style={{ color: 'var(--ant-color-error)' }}>
// {_.get(value, 'metrics.request_totals.errored')}
// </span>
// );
// }
// },
// {
// 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: 'Failed Requests',
dataIndex: 'failed_requests',
path: ['raw_metrics', 'benchmarks', '0'],
unit: '',
render: (value: number) => {
return (
<span style={{ color: 'var(--ant-color-error)' }}>
{_.get(value, 'metrics.request_totals.errored')}
</span>
);
}
},
{
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 ',
dataIndex: 'prompt_tokens_per_second_mean',
path: 'prompt_tokens_per_second_mean',
unit: 'Tokens/s',
render: (value: number) => round(value, 2)
},
{
title: 'Average Request Latency (ms)',
title: 'Average Request Latency',
dataIndex: 'request_latency_mean',
path: 'request_latency_mean',
unit: 'ms',
render: (value: number) => round(value, 2)
},
{
title: 'Average Time To First Token (ms)',
title: 'Average Time To First Token',
dataIndex: 'time_to_first_token_mean',
path: 'time_to_first_token_mean',
unit: 'ms',
render: (value: number) => round(value, 2)
},
{
title: 'Average Time Per Output Token (ms)',
title: 'Average Time Per Output Token',
dataIndex: 'time_per_output_token_mean',
path: 'time_per_output_token_mean',
unit: 'ms',
render: (value: number) => round(value, 2)
},
{
title: '',
dataIndex: '',
path: '',
unit: '',
render: (_: number) => ''
title: 'Average Inter Token Latency',
dataIndex: 'inter_token_latency_mean',
path: 'inter_token_latency_mean',
unit: 'ms',
render: (value: number) => round(value, 2)
}
];
const requestFields = [
{
label: 'Total Requests',
key: 'total_requests',
dataIndex: 'total_requests',
path: 'total_requests',
precision: 0,
render: (value: number) => round(value, 0),
unit: ''
},
{
label: 'Success Requests',
key: 'total_requests',
dataIndex: 'successful_requests',
path: ['raw_metrics', 'benchmarks', '0'],
render: (value: number) =>
round(_.get(value, ['metrics', 'request_totals', 'successful']), 0),
precision: 0,
color: 'var(--ant-color-success)',
unit: ''
},
{
label: 'Failed Requests',
key: 'total_requests',
dataIndex: 'failed_requests',
path: ['raw_metrics', 'benchmarks', '0'],
render: (value: number) =>
round(_.get(value, ['metrics', 'request_totals', 'errored']), 0),
precision: 0,
color: 'var(--ant-color-error)',
unit: ''
},
{
label: 'Concurrency',
key: 'request_concurrency',
dataIndex: 'request_concurrency',
path: ['raw_metrics', 'benchmarks', '0'],
render: (value: number) =>
round(_.get(value, 'metrics.request_concurrency.successful.mean'), 0),
precision: 0,
unit: ''
}
];
@@ -148,39 +214,94 @@ const PercentileResult: React.FC = () => {
})
);
const throughputItems = columns.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 latencyItems = columnsSub.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 requestItems = requestFields.map(
({ label, dataIndex, path, render, unit, color }) => ({
key: dataIndex,
label: label,
children: unit ? (
<span className="flex-center" style={{ color: color }}>
{render(_.get(detailData, path) ?? 0)}{' '}
<span className="m-l-4">({unit})</span>
</span>
) : (
<span style={{ color: color }}>
{render(_.get(detailData, path) ?? 0)}
</span>
)
})
);
const descriptionStyles = {
header: {
marginBottom: 8
},
title: {
fontWeight: 500,
color: 'var(--ant-color-text-secondary)',
fontSize: 14
},
content: {
justifyContent: 'flex-start'
}
};
return (
<Section title="Metrics Result" minHeight={210}>
{/* <Table
size="small"
columns={[
{
title: 'Metrics',
dataIndex: 'metrics'
},
...columns
]}
dataSource={buildPercentileTable(metrics)}
rowKey="percentile"
pagination={false}
styles={{
body: {
cell: {
height: 54
}
}
}}
></Table> */}
<Descriptions
items={items}
colon={false}
column={2}
styles={{
content: {
justifyContent: 'flex-end'
}
}}
></Descriptions>
</Section>
<div>
<Title>Metrics</Title>
<Box>
<Descriptions
styles={descriptionStyles}
title="Throughput"
items={throughputItems}
colon={false}
column={1}
></Descriptions>
<Descriptions
styles={descriptionStyles}
title="Latency"
items={latencyItems}
colon={false}
column={1}
></Descriptions>
<Descriptions
styles={descriptionStyles}
title="Requests"
items={requestItems}
colon={false}
column={1}
></Descriptions>
</Box>
</div>
);
};