fix: benchmark detail styles
This commit is contained in:
jialin
@@ -102,7 +102,7 @@ const useBenchmarkColumns = (
|
||||
title: (
|
||||
<span className="flex-column">
|
||||
<span>{intl.formatMessage({ id: 'benchmark.table.itl' })}</span>
|
||||
<span>avg (ms)</span>
|
||||
<span>Avg (ms)</span>
|
||||
</span>
|
||||
),
|
||||
dataIndex: 'inter_token_latency_mean',
|
||||
@@ -117,7 +117,7 @@ const useBenchmarkColumns = (
|
||||
title: (
|
||||
<span className="flex-column">
|
||||
<span>{intl.formatMessage({ id: 'benchmark.table.tpot' })}</span>
|
||||
<span>avg (ms)</span>
|
||||
<span>Avg (ms)</span>
|
||||
</span>
|
||||
),
|
||||
dataIndex: 'time_per_output_token_mean',
|
||||
@@ -132,7 +132,7 @@ const useBenchmarkColumns = (
|
||||
title: (
|
||||
<span className="flex-column">
|
||||
<span>{intl.formatMessage({ id: 'benchmark.table.ttft' })}</span>
|
||||
<span>avg (ms)</span>
|
||||
<span>Avg (ms)</span>
|
||||
</span>
|
||||
),
|
||||
dataIndex: 'time_to_first_token_mean',
|
||||
|
||||
@@ -1,43 +1,57 @@
|
||||
import { SettingOutlined } from '@ant-design/icons';
|
||||
import ColumnSettings from '@/pages/_components/column-settings';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button, Checkbox, Col, Popover, Row, Tooltip } from 'antd';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Container = styled.div`
|
||||
max-height: 450px;
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
.title {
|
||||
font-weight: 500;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.btn-wrapper {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top: 1px solid var(--ant-color-split);
|
||||
padding-top: 12px;
|
||||
}
|
||||
.buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
`;
|
||||
|
||||
const useColumnSettings = () => {
|
||||
const useColumnSettings = (options: { contentHeight: number }) => {
|
||||
const intl = useIntl();
|
||||
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const { contentHeight } = options;
|
||||
const [selectedColumns, setSelectedColumns] = React.useState<string[]>([]);
|
||||
|
||||
const handleToggle = () => {
|
||||
setOpen(!open);
|
||||
const handleOnChange = (columns: string[]) => {
|
||||
setSelectedColumns(columns);
|
||||
console.log('selected columns:', columns);
|
||||
};
|
||||
|
||||
const allColumns = [
|
||||
const resultColumns = [
|
||||
{
|
||||
title: intl.formatMessage({ id: 'benchmark.table.rps' }),
|
||||
dataIndex: 'requests_per_second_mean'
|
||||
},
|
||||
{
|
||||
title: 'Throughput',
|
||||
dataIndex: 'throughput_mean'
|
||||
},
|
||||
{
|
||||
title: 'Throughput request',
|
||||
dataIndex: 'throughput_request_mean'
|
||||
},
|
||||
{
|
||||
title: 'Generated Tokens',
|
||||
dataIndex: 'generated_tokens_mean'
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'benchmark.table.tps' }),
|
||||
dataIndex: 'tokens_per_second_mean'
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'benchmark.table.itl' }),
|
||||
dataIndex: 'inter_token_latency_mean'
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'benchmark.table.tpot' }),
|
||||
dataIndex: 'time_per_output_token_mean'
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'benchmark.table.ttft' }),
|
||||
dataIndex: 'time_to_first_token_mean'
|
||||
},
|
||||
{
|
||||
title: 'Latency Avg',
|
||||
dataIndex: 'latency_mean'
|
||||
}
|
||||
];
|
||||
|
||||
const metadataColumns = [
|
||||
{
|
||||
title: intl.formatMessage({ id: 'clusters.title' }),
|
||||
dataIndex: 'cluster_id'
|
||||
@@ -58,26 +72,6 @@ const useColumnSettings = () => {
|
||||
title: intl.formatMessage({ id: 'benchmark.table.dataset' }),
|
||||
dataIndex: 'dataset_name'
|
||||
},
|
||||
{
|
||||
title: 'Latency',
|
||||
dataIndex: 'latency_mean'
|
||||
},
|
||||
{
|
||||
title: 'Throughput',
|
||||
dataIndex: 'throughput_mean'
|
||||
},
|
||||
{
|
||||
title: 'Throughput request',
|
||||
dataIndex: 'throughput_request_mean'
|
||||
},
|
||||
{
|
||||
title: 'generated tokens',
|
||||
dataIndex: 'generated_tokens_mean'
|
||||
},
|
||||
{
|
||||
title: 'ITL Avg',
|
||||
dataIndex: 'inter_token_latency_mean'
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'common.table.status' }),
|
||||
dataIndex: 'state'
|
||||
@@ -90,26 +84,6 @@ const useColumnSettings = () => {
|
||||
title: intl.formatMessage({ id: 'benchmark.table.gpu' }),
|
||||
dataIndex: 'gpu_summary'
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'benchmark.table.itl' }),
|
||||
dataIndex: 'inter_token_latency_mean'
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'benchmark.table.tpot' }),
|
||||
dataIndex: 'time_per_output_token_mean'
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'benchmark.table.ttft' }),
|
||||
dataIndex: 'time_to_first_token_mean'
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'benchmark.table.rps' }),
|
||||
dataIndex: 'requests_per_second_mean'
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'benchmark.table.tps' }),
|
||||
dataIndex: 'tokens_per_second_mean'
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'common.table.createTime' }),
|
||||
dataIndex: 'created_at'
|
||||
@@ -120,76 +94,23 @@ const useColumnSettings = () => {
|
||||
}
|
||||
];
|
||||
|
||||
const contentRender = () => {
|
||||
return (
|
||||
<Container>
|
||||
<div className="title">Column Settings</div>
|
||||
<Checkbox.Group
|
||||
value={selectedColumns}
|
||||
onChange={(checkedValues) => {
|
||||
setSelectedColumns(checkedValues as string[]);
|
||||
}}
|
||||
>
|
||||
<Row>
|
||||
{allColumns.map((col) => (
|
||||
<Col key={col.dataIndex} span={12}>
|
||||
<Checkbox value={col.dataIndex} style={{ marginBottom: 8 }}>
|
||||
<span className="text-secondary">{col.title}</span>
|
||||
</Checkbox>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</Checkbox.Group>
|
||||
<div className="btn-wrapper">
|
||||
<Button
|
||||
size="middle"
|
||||
onClick={() => {
|
||||
setSelectedColumns([]);
|
||||
}}
|
||||
>
|
||||
Clear All
|
||||
</Button>
|
||||
<div className="buttons">
|
||||
<Button
|
||||
size="middle"
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
setSelectedColumns(allColumns.map((col) => col.dataIndex));
|
||||
}}
|
||||
>
|
||||
Select All
|
||||
</Button>
|
||||
<Button
|
||||
size="middle"
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
setSelectedColumns(allColumns.map((col) => col.dataIndex));
|
||||
}}
|
||||
>
|
||||
Confirm
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
const SettingsButton = (
|
||||
<Popover
|
||||
trigger={'click'}
|
||||
arrow={false}
|
||||
placement="bottomRight"
|
||||
content={contentRender()}
|
||||
styles={{
|
||||
root: {
|
||||
width: '420px'
|
||||
<ColumnSettings
|
||||
contentHeight={contentHeight}
|
||||
selectedColumns={selectedColumns}
|
||||
onChange={handleOnChange}
|
||||
grouped={true}
|
||||
columns={[
|
||||
{
|
||||
title: 'Benchmark Results',
|
||||
children: resultColumns
|
||||
},
|
||||
{
|
||||
title: 'Metadata',
|
||||
children: metadataColumns
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Tooltip title="Column Settings">
|
||||
<Button onClick={handleToggle} icon={<SettingOutlined />}></Button>
|
||||
</Tooltip>
|
||||
</Popover>
|
||||
]}
|
||||
></ColumnSettings>
|
||||
);
|
||||
|
||||
return {
|
||||
|
||||
Reference in New Issue
Block a user