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

chore: column settings

Browse Source
This commit is contained in:
jialin
2026-02-01 20:22:25 +08:00
parent 043218937f
commit 0849a2f114
16 changed files with 611 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/seal-form/simple-select.tsx
+1 -1
View File
@@ -113,7 +113,7 @@ const SimpleSelect: React.FC<SelectProps & { ref?: any; showTags?: boolean }> =
indeterminate={allSelection.indeterminate}
onChange={handleOnCheckboxChange}
>
{intl.formatMessage({ id: 'common.checbox.all' })}
{intl.formatMessage({ id: 'common.checkbox.all' })}
</Checkbox>
</SelectAllWrapper>
)}
src/locales/en-US/benchmark.ts
+9 -8
View File
@@ -40,20 +40,21 @@ export default {
'benchmark.table.filter.bygpu': 'Filter by GPU',
'benchmark.table.filter.bymodel': 'Filter by Model',
'benchmark.table.filter.bydataset': 'Filter by Dataset',
'benchmark.table.avg': 'Average',
'benchmark.table.avg': 'Avg',
'benchmark.table.columnSettings': 'Column Settings',
'benchmark.detail.summary.results': 'Test Results',
'benchmark.detail.summary.metadata': 'Metadata',
'benchmark.detail.summary.metrics': 'Test Metrics',
'benchmark.detail.summary.latency': 'Latency',
'benchmark.detail.summary.throughput': 'Throughput',
'benchmark.detail.summary.request': 'Requests',
'benchmark.detail.avg.reqLatency': 'Average Request Latency',
'benchmark.detail.avg.ttft': 'Average TTFT',
'benchmark.detail.avg.tpot': 'Average TPOT',
'benchmark.detail.avg.itl': 'Average ITL',
'benchmark.detail.throughput.totalToken': 'Total Token Throughput',
'benchmark.detail.throughput.inputToken': 'Input Token Throughput',
'benchmark.detail.throughput.outputToken': 'Output Token Throughput',
'benchmark.detail.avg.reqLatency': 'Request Latency Avg',
'benchmark.detail.avg.ttft': 'TTFT Avg',
'benchmark.detail.avg.tpot': 'TPOT Avg',
'benchmark.detail.avg.itl': 'ITL Avg',
'benchmark.detail.throughput.totalToken': 'Total Throughput',
'benchmark.detail.throughput.inputToken': 'Input Throughput',
'benchmark.detail.throughput.outputToken': 'Output Throughput',
'benchmark.detail.requests.total': 'Total Requests',
'benchmark.detail.requests.success': 'Successful Requests',
'benchmark.detail.requests.failed': 'Failed Requests',
src/locales/en-US/common.ts
+1 -1
View File
@@ -97,7 +97,7 @@ export default {
'common.form.field.input.required': 'required',
'common.form.field.select.required': 'required',
'common.select.option': 'All',
'common.checbox.all': 'Select all',
'common.checkbox.all': 'Select all',
'common.select.all': 'All {type}',
'common.data.unkonwn': 'Unknown',
'common.data.none': 'No Data',
src/locales/ja-JP/benchmark.ts
+9 -8
View File
@@ -40,20 +40,21 @@ export default {
'benchmark.table.filter.bygpu': 'Filter by GPU',
'benchmark.table.filter.bymodel': 'Filter by Model',
'benchmark.table.filter.bydataset': 'Filter by Dataset',
'benchmark.table.avg': 'Average',
'benchmark.table.avg': 'Avg',
'benchmark.table.columnSettings': 'Column Settings',
'benchmark.detail.summary.results': 'Test Results',
'benchmark.detail.summary.metadata': 'Metadata',
'benchmark.detail.summary.metrics': 'Test Metrics',
'benchmark.detail.summary.latency': 'Latency',
'benchmark.detail.summary.throughput': 'Throughput',
'benchmark.detail.summary.request': 'Requests',
'benchmark.detail.avg.reqLatency': 'Average Request Latency',
'benchmark.detail.avg.ttft': 'Average TTFT',
'benchmark.detail.avg.tpot': 'Average TPOT',
'benchmark.detail.avg.itl': 'Average ITL',
'benchmark.detail.throughput.totalToken': 'Total Token Throughput',
'benchmark.detail.throughput.inputToken': 'Input Token Throughput',
'benchmark.detail.throughput.outputToken': 'Output Token Throughput',
'benchmark.detail.avg.reqLatency': 'Request Latency Avg',
'benchmark.detail.avg.ttft': 'TTFT Avg',
'benchmark.detail.avg.tpot': 'TPOT Avg',
'benchmark.detail.avg.itl': 'ITL Avg',
'benchmark.detail.throughput.totalToken': 'Total Throughput',
'benchmark.detail.throughput.inputToken': 'Input Throughput',
'benchmark.detail.throughput.outputToken': 'Output Throughput',
'benchmark.detail.requests.total': 'Total Requests',
'benchmark.detail.requests.success': 'Successful Requests',
'benchmark.detail.requests.failed': 'Failed Requests',
src/locales/ja-JP/common.ts
+1 -1
View File
@@ -97,7 +97,7 @@ export default {
'common.form.field.input.required': '必須',
'common.form.field.select.required': '必須',
'common.select.option': 'すべて',
'common.checbox.all': 'すべて',
'common.checkbox.all': 'すべて',
'common.select.all': 'すべての {type}',
'common.data.unkonwn': '不明',
'common.data.none': 'データなし',
src/locales/ru-RU/benchmark.ts
+9 -8
View File
@@ -40,20 +40,21 @@ export default {
'benchmark.table.filter.bygpu': 'Filter by GPU',
'benchmark.table.filter.bymodel': 'Filter by Model',
'benchmark.table.filter.bydataset': 'Filter by Dataset',
'benchmark.table.avg': 'Average',
'benchmark.table.avg': 'Avg',
'benchmark.table.columnSettings': 'Column Settings',
'benchmark.detail.summary.results': 'Test Results',
'benchmark.detail.summary.metadata': 'Metadata',
'benchmark.detail.summary.metrics': 'Test Metrics',
'benchmark.detail.summary.latency': 'Latency',
'benchmark.detail.summary.throughput': 'Throughput',
'benchmark.detail.summary.request': 'Requests',
'benchmark.detail.avg.reqLatency': 'Average Request Latency',
'benchmark.detail.avg.ttft': 'Average TTFT',
'benchmark.detail.avg.tpot': 'Average TPOT',
'benchmark.detail.avg.itl': 'Average ITL',
'benchmark.detail.throughput.totalToken': 'Total Token Throughput',
'benchmark.detail.throughput.inputToken': 'Input Token Throughput',
'benchmark.detail.throughput.outputToken': 'Output Token Throughput',
'benchmark.detail.avg.reqLatency': 'Request Latency Avg',
'benchmark.detail.avg.ttft': 'TTFT Avg',
'benchmark.detail.avg.tpot': 'TPOT Avg',
'benchmark.detail.avg.itl': 'ITL Avg',
'benchmark.detail.throughput.totalToken': 'Total Throughput',
'benchmark.detail.throughput.inputToken': 'Input Throughput',
'benchmark.detail.throughput.outputToken': 'Output Throughput',
'benchmark.detail.requests.total': 'Total Requests',
'benchmark.detail.requests.success': 'Successful Requests',
'benchmark.detail.requests.failed': 'Failed Requests',
src/locales/ru-RU/common.ts
+1 -1
View File
@@ -97,7 +97,7 @@ export default {
'common.form.field.input.required': 'обязательно',
'common.form.field.select.required': 'обязательно',
'common.select.option': 'Все',
'common.checbox.all': 'Все',
'common.checkbox.all': 'Все',
'common.select.all': 'Все {type}',
'common.data.unkonwn': 'Неизвестно',
'common.data.none': 'Нет данных',
src/locales/zh-CN/benchmark.ts
+8 -7
View File
@@ -43,17 +43,18 @@ export default {
'benchmark.table.avg': '均值',
'benchmark.table.columnSettings': '列设置',
'benchmark.detail.summary.results': '测试结果',
'benchmark.detail.summary.metadata': '元数据',
'benchmark.detail.summary.metrics': '测试指标',
'benchmark.detail.summary.latency': '延迟',
'benchmark.detail.summary.throughput': '吞吐',
'benchmark.detail.summary.request': '请求数',
'benchmark.detail.avg.reqLatency': '平均请求延迟',
'benchmark.detail.avg.ttft': '平均 TTFT',
'benchmark.detail.avg.tpot': '平均 TPOT',
'benchmark.detail.avg.itl': '平均 ITL',
'benchmark.detail.throughput.totalToken': '总 Token 吞吐量',
'benchmark.detail.throughput.inputToken': '输入 Token 吞吐量',
'benchmark.detail.throughput.outputToken': '输出 Token 吞吐量',
'benchmark.detail.avg.reqLatency': '请求延迟 均值',
'benchmark.detail.avg.ttft': 'TTFT 均值',
'benchmark.detail.avg.tpot': 'TPOT 均值',
'benchmark.detail.avg.itl': 'ITL 均值',
'benchmark.detail.throughput.totalToken': '总吞吐量',
'benchmark.detail.throughput.inputToken': '输入吞吐量',
'benchmark.detail.throughput.outputToken': '输出吞吐量',
'benchmark.detail.requests.total': '请求总数',
'benchmark.detail.requests.success': '请求成功数',
'benchmark.detail.requests.failed': '请求失败数',
src/locales/zh-CN/common.ts
+1 -1
View File
@@ -94,7 +94,7 @@ export default {
'common.data.unkonwn': '未知',
'common.data.none': '暂无',
'common.action.none': '无',
'common.checbox.all': '全选',
'common.checkbox.all': '全选',
'common.select.all': '全部{type}',
'common.button.addfile': '添加文件',
'common.logout.msg': '登出成功',
src/pages/_components/column-settings.tsx
+88 -22
View File
@@ -1,8 +1,12 @@
import OverlayScroller from '@/components/overlay-scroller';
import {
readColumnSettings,
writeColumnSettings
} from '@/utils/localstore/index';
import { SettingOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Checkbox, Col, Popover, Row, Tooltip } from 'antd';
import React from 'react';
import React, { useEffect } from 'react';
import styled from 'styled-components';
const Container = styled.div`
@@ -32,24 +36,53 @@ const Title = styled.div`
`;
const ColumnSettings: React.FC<{
width?: number;
fixedColumns?: string[];
tableName: string;
contentHeight: number;
columns: {
title: string;
title: React.ReactNode;
dataIndex?: string;
children?: { title: string; dataIndex?: string }[];
children?: { title: React.ReactNode; dataIndex?: string }[];
}[];
selectedColumns?: string[];
defaultSelectedColumns?: string[];
grouped?: boolean;
onReset?: () => void;
onChange?: (selectedColumns: string[]) => void;
}> = (props) => {
const intl = useIntl();
const { contentHeight, columns, selectedColumns, grouped, onChange } = props;
const {
tableName,
contentHeight,
width = 420,
columns,
selectedColumns,
defaultSelectedColumns,
grouped,
onReset,
onChange,
fixedColumns
} = props;
const [open, setOpen] = React.useState(false);
const [innerSelectedColumns, setInnerSelectedColumns] = React.useState<
string[]
>(defaultSelectedColumns || []);
React.useEffect(() => {
if (open) {
setInnerSelectedColumns(selectedColumns ?? defaultSelectedColumns ?? []);
}
}, [open, selectedColumns, defaultSelectedColumns]);
const handleToggle = () => {
setOpen(!open);
};
const handleDraftChange = (columns: string[]) => {
setInnerSelectedColumns(columns);
};
const handleSelectAll = () => {
if (grouped) {
const allCols: string[] = [];
@@ -60,23 +93,55 @@ const ColumnSettings: React.FC<{
}
});
});
onChange?.(allCols);
handleDraftChange(allCols);
} else {
const allCols = columns
.map((col) => col.dataIndex)
.filter((dataIndex): dataIndex is string => Boolean(dataIndex));
onChange?.(allCols);
handleDraftChange(allCols);
}
};
const handleConfirm = () => {
setOpen(false);
writeColumnSettings(tableName, innerSelectedColumns);
onChange?.(innerSelectedColumns);
};
const handleReset = () => {
const resetCols = defaultSelectedColumns ?? [];
writeColumnSettings(tableName, resetCols);
onChange?.(resetCols);
setInnerSelectedColumns(resetCols);
onReset?.();
};
const handleOpenChange = (isOpen: boolean) => {
setOpen(isOpen);
};
useEffect(() => {
const initColumns = async () => {
const stored = await readColumnSettings(tableName);
console.log('stored columns:', stored);
if (stored && stored.length > 0) {
setInnerSelectedColumns(stored);
onChange?.(stored);
} else {
setInnerSelectedColumns(defaultSelectedColumns || []);
}
};
initColumns();
}, []);
const contentRender = () => {
return (
<Container>
{!grouped && <div className="title">Column Settings</div>}
{!grouped && (
<div className="title">
{intl.formatMessage({ id: 'benchmark.table.columnSettings' })}
</div>
)}
<OverlayScroller
maxHeight={contentHeight}
styles={{
@@ -86,10 +151,8 @@ const ColumnSettings: React.FC<{
}}
>
<Checkbox.Group
value={selectedColumns}
onChange={(checkedValues) => {
onChange?.(checkedValues as string[]);
}}
value={innerSelectedColumns}
onChange={handleDraftChange}
>
<>
{grouped ? (
@@ -100,6 +163,9 @@ const ColumnSettings: React.FC<{
{row.children?.map((col) => (
<Col key={col.dataIndex} span={12}>
<Checkbox
disabled={fixedColumns?.includes(
col.dataIndex || ''
)}
value={col.dataIndex}
style={{ marginBottom: 8 }}
>
@@ -115,6 +181,7 @@ const ColumnSettings: React.FC<{
{columns.map((col) => (
<Col key={col.dataIndex} span={12}>
<Checkbox
disabled={fixedColumns?.includes(col.dataIndex || '')}
value={col.dataIndex}
style={{ marginBottom: 8 }}
>
@@ -129,20 +196,15 @@ const ColumnSettings: React.FC<{
</OverlayScroller>
<div className="btn-wrapper">
<Button
size="middle"
onClick={() => {
onChange?.([]);
}}
>
Reset
<Button size="middle" onClick={handleReset}>
{intl.formatMessage({ id: 'common.button.resetdefault' })}
</Button>
<div className="buttons">
<Button size="middle" type="primary" onClick={handleSelectAll}>
Select All
{intl.formatMessage({ id: 'common.checkbox.all' })}
</Button>
<Button size="middle" type="primary" onClick={handleConfirm}>
Confirm
{intl.formatMessage({ id: 'common.button.confirm' })}
</Button>
</div>
</div>
@@ -152,17 +214,21 @@ const ColumnSettings: React.FC<{
return (
<Popover
open={open}
onOpenChange={handleOpenChange}
trigger={'click'}
arrow={false}
placement="bottomRight"
content={contentRender()}
styles={{
root: {
width: '420px'
width: width
}
}}
>
<Tooltip title="Column Settings">
<Tooltip
title={intl.formatMessage({ id: 'benchmark.table.columnSettings' })}
>
<Button onClick={handleToggle} icon={<SettingOutlined />}></Button>
</Tooltip>
</Popover>
src/pages/benchmark/components/summary/metrics-result.tsx
+6 -6
View File
@@ -68,7 +68,7 @@ const latencyColumns = [
const requestColumns = [
{
label: 'benchmark.detail.requests.total',
title: 'benchmark.detail.requests.total',
key: 'total_requests',
dataIndex: 'total_requests',
path: 'total_requests',
@@ -77,7 +77,7 @@ const requestColumns = [
unit: ''
},
{
label: 'benchmark.detail.requests.success',
title: 'benchmark.detail.requests.success',
key: 'total_requests',
dataIndex: 'successful_requests',
path: ['raw_metrics', 'benchmarks', '0'],
@@ -88,7 +88,7 @@ const requestColumns = [
unit: ''
},
{
label: 'benchmark.detail.requests.failed',
title: 'benchmark.detail.requests.failed',
key: 'total_requests',
dataIndex: 'failed_requests',
path: ['raw_metrics', 'benchmarks', '0'],
@@ -99,7 +99,7 @@ const requestColumns = [
unit: ''
},
{
label: 'benchmark.detail.requests.concurrency',
title: 'benchmark.detail.requests.concurrency',
key: 'request_concurrency',
dataIndex: 'request_concurrency',
path: ['raw_metrics', 'benchmarks', '0'],
@@ -180,9 +180,9 @@ const PercentileResult: React.FC = () => {
);
const requestItems = requestColumns.map(
({ label, dataIndex, path, render, unit, color }) => ({
({ title, dataIndex, path, render, unit, color }) => ({
key: dataIndex,
label: intl.formatMessage({ id: label }),
label: intl.formatMessage({ id: title }),
children: unit ? (
<span className="flex-center" style={{ color: color }}>
{render(_.get(detailData, path) ?? 0)}{' '}
src/pages/benchmark/hooks/use-benchmark-columns.tsx
+98 -139
View File
@@ -1,22 +1,21 @@
// columns.ts
import AutoTooltip from '@/components/auto-tooltip';
import StatusTag from '@/components/status-tag';
import { tableSorter } from '@/config/settings';
import { useIntl } from '@umijs/max';
import { Progress, Typography } from 'antd';
import { Typography } from 'antd';
import { ColumnsType } from 'antd/es/table';
import _ from 'lodash';
import { useMemo } from 'react';
import RowActions from '../components/row-actions';
import { BenchmarkStatus, BenchmarkStatusLabelMap } from '../config';
import { BenchmarkListItem as ListItem } from '../config/types';
const useBenchmarkColumns = (
sortOrder: string[],
handleSelect: (val: string, record: ListItem) => void,
onCellClick?: (record: ListItem, dataIndex: string) => void
): ColumnsType<ListItem> => {
const useBenchmarkColumns = (params: {
sortOrder: string[];
columns: ColumnsType<ListItem>;
handleSelect: (val: string, record: ListItem) => void;
onCellClick?: (record: ListItem, dataIndex: string) => void;
}): ColumnsType<ListItem> => {
const intl = useIntl();
const { onCellClick, handleSelect, columns } = params;
return useMemo(() => {
return [
@@ -32,55 +31,10 @@ const useBenchmarkColumns = (
</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'benchmark.table.model' }),
dataIndex: 'model_name',
sorter: tableSorter(1),
render: (text: string) => (
<AutoTooltip ghost minWidth={20}>
{text}
</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'benchmark.table.dataset' }),
dataIndex: 'dataset_name',
sorter: tableSorter(1),
render: (text: string) => (
<AutoTooltip ghost minWidth={20}>
{text}
</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'common.table.status' }),
dataIndex: 'state',
ellipsis: {
showTitle: false
},
width: 120,
render: (value: number, record: ListItem) => (
<span className="flex-center gap-8">
<StatusTag
statusValue={{
status: BenchmarkStatus[value],
text: BenchmarkStatusLabelMap[value],
message: record.state_message || undefined
}}
/>
{record.progress !== undefined && record.progress < 100 && (
<Progress
type="circle"
percent={_.round(record.progress, 0)}
size={20}
/>
)}
</span>
)
},
...columns,
// {
// title: intl.formatMessage({ id: 'benchmark.table.requestRate' }),
// dataIndex: 'request_rate',
// title: intl.formatMessage({ id: 'benchmark.table.model' }),
// dataIndex: 'model_name',
// sorter: tableSorter(1),
// render: (text: string) => (
// <AutoTooltip ghost minWidth={20}>
@@ -88,88 +42,93 @@ const useBenchmarkColumns = (
// </AutoTooltip>
// )
// },
{
title: intl.formatMessage({ id: 'benchmark.table.gpu' }),
dataIndex: 'gpu_summary',
sorter: tableSorter(1),
render: (text: string) => (
<AutoTooltip ghost minWidth={20}>
{text}
</AutoTooltip>
)
},
{
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) => (
<AutoTooltip ghost minWidth={20}>
{_.round(text, 1)}
</AutoTooltip>
)
},
{
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) => (
<AutoTooltip ghost minWidth={20}>
{_.round(text, 2)}
</AutoTooltip>
)
},
{
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) => (
<AutoTooltip ghost minWidth={20}>
{_.round(text, 2)}
</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'benchmark.table.rps' }),
dataIndex: 'requests_per_second_mean',
sorter: tableSorter(1),
render: (text: string) => (
<AutoTooltip ghost minWidth={20}>
{_.round(text, 0)}
</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'benchmark.table.tps' }),
dataIndex: 'tokens_per_second_mean',
sorter: tableSorter(1),
render: (text: string) => (
<AutoTooltip ghost minWidth={20}>
{_.round(text, 2)}
</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')}
// title: intl.formatMessage({ id: 'benchmark.table.dataset' }),
// dataIndex: 'dataset_name',
// sorter: tableSorter(1),
// render: (text: string) => (
// <AutoTooltip ghost minWidth={20}>
// {text}
// </AutoTooltip>
// )
// },
// {
// title: intl.formatMessage({ id: 'common.table.status' }),
// dataIndex: 'state',
// ellipsis: {
// showTitle: false
// },
// width: 120,
// render: (value: number, record: ListItem) => (
// <span className="flex-center gap-8">
// <StatusTag
// statusValue={{
// status: BenchmarkStatus[value],
// text: BenchmarkStatusLabelMap[value],
// message: record.state_message || undefined
// }}
// />
// {record.progress !== undefined && record.progress < 100 && (
// <Progress
// type="circle"
// percent={_.round(record.progress, 0)}
// size={20}
// />
// )}
// </span>
// )
// },
// {
// title: intl.formatMessage({ id: 'benchmark.table.gpu' }),
// dataIndex: 'gpu_summary',
// sorter: tableSorter(1),
// render: (text: string) => (
// <AutoTooltip ghost minWidth={20}>
// {text}
// </AutoTooltip>
// )
// },
// {
// title: 'TPS',
// dataIndex: 'tokens_per_second_mean',
// sorter: tableSorter(1),
// render: (text: string) => (
// <AutoTooltip ghost minWidth={20}>
// {_.round(text, 2)}
// </AutoTooltip>
// )
// },
// {
// title: (
// <span className="flex-column">
// <span>{intl.formatMessage({ id: 'benchmark.table.ttft' })}</span>
// <span>
// {intl.formatMessage({ id: 'benchmark.table.avg' })} (ms)
// </span>
// </span>
// ),
// dataIndex: 'time_to_first_token_mean',
// sorter: tableSorter(1),
// render: (text: string) => (
// <AutoTooltip ghost minWidth={20}>
// {_.round(text, 2)}
// </AutoTooltip>
// )
// },
// {
// title: (
// <span className="flex-column">
// <span>{intl.formatMessage({ id: 'benchmark.table.tpot' })}</span>
// <span>
// {intl.formatMessage({ id: 'benchmark.table.avg' })} (ms)
// </span>
// </span>
// ),
// dataIndex: 'time_per_output_token_mean',
// sorter: tableSorter(1),
// render: (text: string) => (
// <AutoTooltip ghost minWidth={20}>
// {_.round(text, 2)}
// </AutoTooltip>
// )
// },
@@ -184,7 +143,7 @@ const useBenchmarkColumns = (
)
}
];
}, [intl, onCellClick, handleSelect]);
}, [intl, onCellClick, handleSelect, columns]);
};
export default useBenchmarkColumns;
src/pages/benchmark/hooks/use-column-settings.tsx
+364 -84
View File
@@ -1,112 +1,392 @@
import AutoTooltip from '@/components/auto-tooltip';
import StatusTag from '@/components/status-tag';
import { tableSorter } from '@/config/settings';
import ColumnSettings from '@/pages/_components/column-settings';
import { useIntl } from '@umijs/max';
import { Progress } from 'antd';
import dayjs from 'dayjs';
import _, { round } from 'lodash';
import React from 'react';
import styled from 'styled-components';
import { BenchmarkStatus, BenchmarkStatusLabelMap } from '../config';
import { BenchmarkListItem as ListItem } from '../config/types';
const SubTitleWrapper = styled.span`
display: list-item;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
`;
const defaultColumns: string[] = [
'model_name',
'dataset_name',
'state',
'gpu_summary',
'tokens_per_second_mean',
'time_to_first_token_mean',
'time_per_output_token_mean'
];
const fixedColumns: string[] = [];
const useColumnSettings = (options: { contentHeight: number }) => {
const intl = useIntl();
const { contentHeight } = options;
const [selectedColumns, setSelectedColumns] = React.useState<string[]>([]);
const [selectedColumns, setSelectedColumns] =
React.useState<string[]>(defaultColumns);
const renderTitle = (
title: React.ReactNode,
options?: { subTitle?: React.ReactNode }
): React.ReactNode => {
return (
<span>
<AutoTooltip
ghost
minWidth={20}
title={`${title} ${options?.subTitle || ''}`}
>
{title}
</AutoTooltip>
{options?.subTitle && (
<SubTitleWrapper>{options.subTitle}</SubTitleWrapper>
)}
</span>
);
};
const resultColumns = [
{
title: renderTitle(
`${intl.formatMessage({ id: 'benchmark.detail.summary.latency' })}`,
{
subTitle: `${intl.formatMessage({ id: 'benchmark.table.avg' })} (ms)`
}
),
pos: 11,
dataIndex: 'request_latency_mean',
path: 'request_latency_mean',
unit: 'ms',
sorter: tableSorter(1),
render: (value: number) => round(value, 2)
},
{
title: 'TPS',
pos: 12,
dataIndex: 'tokens_per_second_mean',
path: 'tokens_per_second_mean',
unit: 'Tokens/s',
sorter: tableSorter(1),
render: (text: number) => (
<AutoTooltip ghost minWidth={20}>
{_.round(text, 2)}
</AutoTooltip>
)
},
{
title: renderTitle('TTFT', {
subTitle: `${intl.formatMessage({ id: 'benchmark.table.avg' })} (ms)`
}),
pos: 13,
sorter: tableSorter(1),
dataIndex: 'time_to_first_token_mean',
path: 'time_to_first_token_mean',
unit: 'ms',
render: (text: number) => (
<AutoTooltip ghost minWidth={20}>
{_.round(text, 2)}
</AutoTooltip>
)
},
{
title: renderTitle('TPOT', {
subTitle: `${intl.formatMessage({ id: 'benchmark.table.avg' })} (ms)`
}),
pos: 14,
sorter: tableSorter(1),
dataIndex: 'time_per_output_token_mean',
path: 'time_per_output_token_mean',
unit: 'ms',
render: (text: number) => (
<AutoTooltip ghost minWidth={20}>
{_.round(text, 2)}
</AutoTooltip>
)
},
{
title: renderTitle('ITL', {
subTitle: `${intl.formatMessage({ id: 'benchmark.table.avg' })} (ms)`
}),
pos: 15,
sorter: tableSorter(1),
dataIndex: 'inter_token_latency_mean',
path: 'inter_token_latency_mean',
unit: 'ms',
render: (value: number) => round(value, 2)
},
{
title: 'RPS',
pos: 16,
dataIndex: 'requests_per_second_mean',
sorter: tableSorter(1),
render: (text: string) => (
<AutoTooltip ghost minWidth={20}>
{_.round(text, 0)}
</AutoTooltip>
)
},
{
title: renderTitle(
`${intl.formatMessage({
id: 'benchmark.detail.throughput.inputToken'
})}`,
{
subTitle: '(Tokens/s)'
}
),
pos: 17,
dataIndex: 'input_tokens_per_second_mean',
path: 'input_tokens_per_second_mean',
unit: 'Tokens/s',
render: (value: number) => (
<AutoTooltip ghost minWidth={20}>
{round(value, 2)}
</AutoTooltip>
)
},
{
title: renderTitle(
`${intl.formatMessage({
id: 'benchmark.detail.throughput.outputToken'
})}`,
{
subTitle: '(Tokens/s)'
}
),
pos: 18,
dataIndex: 'output_tokens_per_second_mean',
path: 'output_tokens_per_second_mean',
unit: 'Tokens/s',
render: (value: number) => (
<AutoTooltip ghost minWidth={20}>
{round(value, 2)}
</AutoTooltip>
)
},
{
title: renderTitle(
intl.formatMessage({ id: 'benchmark.detail.requests.total' })
),
pos: 19,
key: 'total_requests',
dataIndex: 'total_requests',
path: 'total_requests',
precision: 0,
render: (value: number) => (
<AutoTooltip ghost minWidth={20}>
{round(value, 0) || 0}
</AutoTooltip>
),
unit: ''
},
{
title: renderTitle(
intl.formatMessage({ id: 'benchmark.detail.requests.success' })
),
pos: 20,
key: 'total_requests',
dataIndex: 'successful_requests',
path: ['raw_metrics', 'benchmarks', '0'],
render: (value: number) =>
round(_.get(value, ['metrics', 'request_totals', 'successful']), 0) ||
0,
precision: 0,
color: 'var(--ant-color-success)',
unit: ''
},
{
title: renderTitle(
intl.formatMessage({ id: 'benchmark.detail.requests.failed' })
),
pos: 21,
key: 'total_requests',
dataIndex: 'failed_requests',
path: ['raw_metrics', 'benchmarks', '0'],
render: (value: number) =>
round(_.get(value, ['metrics', 'request_totals', 'errored']), 0) || 0,
precision: 0,
color: 'var(--ant-color-error)',
unit: ''
},
{
title: renderTitle(
intl.formatMessage({
id: 'benchmark.detail.requests.concurrency'
})
),
pos: 22,
key: 'request_concurrency',
dataIndex: 'request_concurrency',
path: ['raw_metrics', 'benchmarks', '0'],
render: (value: number) =>
round(_.get(value, 'metrics.request_concurrency.successful.mean'), 0) ||
0,
precision: 0,
unit: ''
}
];
const metadataColumns = [
{
title: renderTitle(intl.formatMessage({ id: 'clusters.title' })),
pos: 1,
dataIndex: 'cluster_id',
render: (text: string) => (
<AutoTooltip ghost minWidth={20}>
{text}
</AutoTooltip>
)
},
{
title: renderTitle(intl.formatMessage({ id: 'resources.worker' })),
pos: 2,
dataIndex: 'worker_id',
render: (text: string) => (
<AutoTooltip ghost minWidth={20}>
{text}
</AutoTooltip>
)
},
{
title: renderTitle(
intl.formatMessage({ id: 'benchmark.detail.modelName' })
),
pos: 3,
dataIndex: 'model_name',
render: (text: string) => (
<AutoTooltip ghost minWidth={20}>
{text}
</AutoTooltip>
)
},
{
title: renderTitle(intl.formatMessage({ id: 'benchmark.table.dataset' })),
pos: 4,
dataIndex: 'dataset_name',
render: (text: string) => (
<AutoTooltip ghost minWidth={20}>
{text}
</AutoTooltip>
)
},
{
title: renderTitle(intl.formatMessage({ id: 'benchmark.form.profile' })),
pos: 5,
dataIndex: 'profile',
render: (text: string) => (
<AutoTooltip ghost minWidth={20}>
{text}
</AutoTooltip>
)
},
{
title: renderTitle(intl.formatMessage({ id: 'benchmark.table.gpu' })),
pos: 6,
dataIndex: 'gpu_summary',
render: (text: string) => (
<AutoTooltip ghost minWidth={20}>
{text}
</AutoTooltip>
)
},
{
title: renderTitle(intl.formatMessage({ id: 'common.table.status' })),
pos: 7,
width: 120,
dataIndex: 'state',
render: (value: number, record: ListItem) => (
<span className="flex-center gap-8">
<StatusTag
statusValue={{
status: BenchmarkStatus[value],
text: BenchmarkStatusLabelMap[value],
message: record.state_message || undefined
}}
/>
{record.progress !== undefined && record.progress < 100 && (
<Progress
type="circle"
percent={_.round(record.progress, 0)}
size={20}
/>
)}
</span>
)
},
{
title: renderTitle(
intl.formatMessage({ id: 'benchmark.table.requestRate' })
),
pos: 8,
dataIndex: 'request_rate',
render: (text: string) => (
<AutoTooltip ghost minWidth={20}>
{text}
</AutoTooltip>
)
},
{
title: renderTitle(intl.formatMessage({ id: 'common.table.createTime' })),
pos: 23,
dataIndex: 'created_at',
sorter: tableSorter(6),
render: (value: string) => (
<AutoTooltip ghost minWidth={20}>
{dayjs(value).format('YYYY-MM-DD HH:mm:ss')}
</AutoTooltip>
)
}
];
const handleOnChange = (columns: string[]) => {
setSelectedColumns(columns);
console.log('selected columns:', columns);
};
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 handleOnReset = () => {
setSelectedColumns(defaultColumns);
};
const metadataColumns = [
{
title: intl.formatMessage({ id: 'clusters.title' }),
dataIndex: 'cluster_id'
},
{
title: intl.formatMessage({ id: 'resources.worker' }),
dataIndex: 'worker_id'
},
{
title: intl.formatMessage({ id: 'common.table.name' }),
dataIndex: 'name'
},
{
title: intl.formatMessage({ id: 'benchmark.table.model' }),
dataIndex: 'model_name'
},
{
title: intl.formatMessage({ id: 'benchmark.table.dataset' }),
dataIndex: 'dataset_name'
},
{
title: intl.formatMessage({ id: 'common.table.status' }),
dataIndex: 'state'
},
{
title: intl.formatMessage({ id: 'benchmark.table.requestRate' }),
dataIndex: 'request_rate'
},
{
title: intl.formatMessage({ id: 'benchmark.table.gpu' }),
dataIndex: 'gpu_summary'
},
{
title: intl.formatMessage({ id: 'common.table.createTime' }),
dataIndex: 'created_at'
},
{
title: intl.formatMessage({ id: 'common.table.operation' }),
dataIndex: 'operations'
}
];
const columns = React.useMemo(() => {
const allColumns = [...metadataColumns, ...resultColumns];
const selected = allColumns.filter((col) =>
selectedColumns.includes(col.dataIndex as string)
);
// Sort by pos
selected.sort((a, b) => (a.pos || 0) - (b.pos || 0));
console.log('columns===', selected);
return selected;
}, [selectedColumns]);
const SettingsButton = (
<ColumnSettings
tableName="benchmark"
contentHeight={contentHeight}
defaultSelectedColumns={selectedColumns}
selectedColumns={selectedColumns}
onChange={handleOnChange}
onReset={handleOnReset}
fixedColumns={fixedColumns}
grouped={true}
columns={[
{
title: 'Benchmark Results',
title: intl.formatMessage({ id: 'benchmark.detail.summary.results' }),
children: resultColumns
},
{
title: 'Metadata',
title: intl.formatMessage({
id: 'benchmark.detail.summary.metadata'
}),
children: metadataColumns
}
]}
@@ -115,7 +395,7 @@ const useColumnSettings = (options: { contentHeight: number }) => {
return {
SettingsButton,
selectedColumns
columns
};
};
src/pages/benchmark/index.tsx
+5 -4
View File
@@ -63,7 +63,7 @@ const Benchmark: React.FC = () => {
});
const { openViewLogsModal, closeViewLogsModal, openViewLogsModalStatus } =
useViewLogs();
const { SettingsButton, selectedColumns } = useColumnSettings({
const { SettingsButton, columns: selectedColumns } = useColumnSettings({
contentHeight: 320
});
const { handleStopBenchmark } = useStopBenchmark();
@@ -162,11 +162,12 @@ const Benchmark: React.FC = () => {
);
};
const columns = useBenchmarkColumns(
const columns = useBenchmarkColumns({
sortOrder,
columns: selectedColumns,
handleSelect,
handleOnCellClick
);
onCellClick: handleOnCellClick
});
const handleExportData = () => {
exportData(rowSelection.selectedRowKeys);
src/pages/login/index.tsx
-2
View File
@@ -91,8 +91,6 @@ const Login = () => {
const [userInfo, setUserInfo] = useAtom(userAtom);
const { initialState, setInitialState } = useModel('@@initialState') || {};
console.log('useSettings==========', userSettings);
const gotoDefaultPage = async (userInfo: any) => {
if (!userInfo || userInfo?.require_password_change) {
return;
src/utils/localstore/index.ts
+10
View File
@@ -37,14 +37,24 @@ const writeState = (key: string, data: any) => {
}
};
const readColumnSettings = (key: string) => {
return readState(key);
};
const writeColumnSettings = (key: string, data: any) => {
writeState(key, data);
};
export {
CRYPT_TEXT,
IS_FIRST_LOGIN,
REMEMBER_ME_KEY,
getRememberMe,
readColumnSettings,
readState,
rememberMe,
removeRememberMe,
writeColumnSettings,
writeState
};