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

fix: details layout

Browse Source
This commit is contained in:
jialin
2026-01-30 18:48:55 +08:00
parent 5747cae87a
commit d173e2d49b
14 changed files with 103 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/benchmark/apis/index.ts
+10
View File
@@ -120,3 +120,13 @@ export async function exportBenchmarkList(
cancelToken: options?.token
});
}
export async function stopBenchmark(params: {
id: number;
data: Record<string, any>;
}) {
return request(`${BENCHMARKS_API}/${params.id}/state`, {
method: 'PATCH',
data: params.data
});
}
src/pages/benchmark/components/environment/index.tsx
+5 -7
View File
@@ -40,11 +40,9 @@ const Environment: React.FC = () => {
}, [snapshot]);
const subWorkers = useMemo(() => {
const [[mainWorkerName, mainWorkerInfo]] = Object.entries(snapshot.workers);
const [[instanceName, instanceData]] = Object.entries(snapshot.instances);
const subOrdinaryWorkers = Object.values(snapshot.instances).filter(
(instance) => instance.worker_name === mainWorkerName
);
const subOrdinaryWorkers = instanceData?.subordinate_workers || [];
return subOrdinaryWorkers.map((worker) => {
const gpuData = Object.values(snapshot.gpus).filter(
@@ -130,7 +128,7 @@ const Environment: React.FC = () => {
return (
<AutoTooltip
ghost
>{`${record.os.name} (${record.os.version})`}</AutoTooltip>
>{`${record.os?.name || ''} (${record.os?.version || ''})`}</AutoTooltip>
);
}
},
@@ -140,7 +138,7 @@ const Environment: React.FC = () => {
key: 'runtime_version',
span: 3,
render: (val: any, record: any) => {
return <AutoTooltip ghost>{record.runtime_version}</AutoTooltip>;
return <AutoTooltip ghost>{record.runtime_version || ''}</AutoTooltip>;
}
},
{
@@ -149,7 +147,7 @@ const Environment: React.FC = () => {
key: 'driver_version',
span: 3,
render: (val: any, record: any) => {
return <AutoTooltip ghost>{record.driver_version}</AutoTooltip>;
return <AutoTooltip ghost>{record.driver_version || ''}</AutoTooltip>;
}
},
{
src/pages/benchmark/components/row-actions.tsx
+7 -1
View File
@@ -13,6 +13,12 @@ const actionList = [
label: 'common.button.edit',
icon: icons.EditOutlined
},
{
label: 'common.button.stop',
key: 'stop',
icon: icons.Stop,
status: [BenchmarkStatusValueMap.Claimed, BenchmarkStatusValueMap.Running]
},
{
label: 'common.button.viewlog',
key: 'viewlog',
@@ -55,7 +61,7 @@ const RowActions: React.FC<RowActionsProps> = (props) => {
const { onDownloadLog, contextHolder } = useDownloadLogs();
const actions = actionList.filter((action) => {
if (action.key === 'viewlog' || action.key === 'download') {
if (action.status && action.status.length > 0) {
return action.status?.includes(record.state);
}
src/pages/benchmark/components/summary/instance.tsx
+11 -3
View File
@@ -64,12 +64,20 @@ const Instance: React.FC = () => {
key: '1',
label: 'Backend Parameters',
children: (
<Flex gap={8} wrap="wrap">
<Flex
gap={8}
wrap="wrap"
style={{
backgroundColor: 'var(--ant-color-fill-quaternary)',
padding: '4px',
borderRadius: '2px'
}}
>
{instanceData?.backend_parameters?.map(
(param: string, index: number) => (
<Tag key={index} style={{ margin: 0 }}>
<span key={index} style={{ margin: 0 }}>
{param}
</Tag>
</span>
)
)}
</Flex>
src/pages/benchmark/components/summary/metrics-result.tsx
+9 -8
View File
@@ -142,7 +142,7 @@ const requestFields = [
dataIndex: 'total_requests',
path: 'total_requests',
precision: 0,
render: (value: number) => round(value, 0),
render: (value: number) => round(value, 0) || 0,
unit: ''
},
{
@@ -151,7 +151,7 @@ const requestFields = [
dataIndex: 'successful_requests',
path: ['raw_metrics', 'benchmarks', '0'],
render: (value: number) =>
round(_.get(value, ['metrics', 'request_totals', 'successful']), 0),
round(_.get(value, ['metrics', 'request_totals', 'successful']), 0) || 0,
precision: 0,
color: 'var(--ant-color-success)',
unit: ''
@@ -162,7 +162,7 @@ const requestFields = [
dataIndex: 'failed_requests',
path: ['raw_metrics', 'benchmarks', '0'],
render: (value: number) =>
round(_.get(value, ['metrics', 'request_totals', 'errored']), 0),
round(_.get(value, ['metrics', 'request_totals', 'errored']), 0) || 0,
precision: 0,
color: 'var(--ant-color-error)',
unit: ''
@@ -173,7 +173,8 @@ const requestFields = [
dataIndex: 'request_concurrency',
path: ['raw_metrics', 'benchmarks', '0'],
render: (value: number) =>
round(_.get(value, 'metrics.request_concurrency.successful.mean'), 0),
round(_.get(value, 'metrics.request_concurrency.successful.mean'), 0) ||
0,
precision: 0,
unit: ''
}
@@ -281,15 +282,15 @@ const PercentileResult: React.FC = () => {
<Box>
<Descriptions
styles={descriptionStyles}
title="Throughput"
items={throughputItems}
title="Latency"
items={latencyItems}
colon={false}
column={1}
></Descriptions>
<Descriptions
styles={descriptionStyles}
title="Latency"
items={latencyItems}
title="Throughput"
items={throughputItems}
colon={false}
column={1}
></Descriptions>
src/pages/benchmark/components/summary/percentile-result.tsx
+2 -1
View File
@@ -85,7 +85,7 @@ const PercentileResult: React.FC = () => {
title: 'Percentile',
dataIndex: 'percentile',
render: (value: string) => (
<span style={{ fontWeight: 500 }}>{value}</span>
<span style={{ fontWeight: 400 }}>{value}</span>
)
},
...columns
@@ -100,6 +100,7 @@ const PercentileResult: React.FC = () => {
},
cell: {
fontWeight: 400,
height: 40,
borderBottom: '1px solid var(--ant-color-split)'
}
},
src/pages/benchmark/components/summary/title.tsx
+9 -9
View File
@@ -1,4 +1,3 @@
import { BulbOutlined } from '@ant-design/icons';
import styled from 'styled-components';
const Content = styled.div`
@@ -8,14 +7,15 @@ const Content = styled.div`
`;
const Title: React.FC<{ children: React.ReactNode }> = ({ children }) => {
return (
<Content>
<BulbOutlined
style={{ marginRight: 8, color: 'var(--ant-color-text-tertiary)' }}
/>
{children}
</Content>
);
// return (
// <Content>
// <BulbOutlined
// style={{ marginRight: 8, color: 'var(--ant-color-text-tertiary)' }}
// />
// {children}
// </Content>
// );
return <span></span>;
};
export default Title;
src/pages/benchmark/config/detail-types.ts
+1 -1
View File
@@ -31,7 +31,7 @@ export interface InstancesData {
env: any;
extended_kv_cache: any;
speculative_config: any;
subordinate_workers: any;
subordinate_workers: any[];
}
export interface WorkerData {
src/pages/benchmark/forms/dataset.tsx
+2
View File
@@ -1,5 +1,6 @@
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import { PageAction } from '@/config';
import useAppUtils from '@/hooks/use-app-utils';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
@@ -77,6 +78,7 @@ const DatasetForm: React.FC = () => {
]}
>
<SealSelect
disabled={action === PageAction.EDIT}
onChange={handleProfileChange}
options={profilesOptions}
label={intl.formatMessage({ id: 'benchmark.form.profile' })}
src/pages/benchmark/forms/index.tsx
+5 -1
View File
@@ -78,7 +78,11 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
useEffect(() => {
if (action === PageAction.EDIT && currentData) {
form.setFieldsValue({
...currentData
...currentData,
model_instance: [
currentData.model_name,
currentData.model_instance_name
]
});
}
}, [form, currentData, action]);
src/pages/benchmark/forms/model-instance.tsx
+2
View File
@@ -1,4 +1,5 @@
import SealCascader from '@/components/seal-form/seal-cascader';
import { PageAction } from '@/config';
import useAppUtils from '@/hooks/use-app-utils';
import {
InstanceStatusMap,
@@ -133,6 +134,7 @@ const ModelInstanceForm: React.FC = () => {
<SealCascader
required
showSearch
disabled={action === PageAction.EDIT}
loading={modelLoading || instanceLoading}
changeOnSelect={false}
expandTrigger="hover"
src/pages/benchmark/forms/random-settings.tsx
+9 -2
View File
@@ -1,9 +1,11 @@
import SealInputNumber from '@/components/seal-form/input-number';
import SealSelect from '@/components/seal-form/seal-select';
import { PageAction } from '@/config';
import useAppUtils from '@/hooks/use-app-utils';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import React from 'react';
import React, { useMemo } from 'react';
import { useFormContext } from '../config/form-context';
import { FormData } from '../config/types';
const RandomSettingsForm: React.FC<{
@@ -13,11 +15,16 @@ const RandomSettingsForm: React.FC<{
}> = (props) => {
const { datasetList, datasetLoading, handleOnDataSetChange } = props;
const intl = useIntl();
const { action, open } = useFormContext();
const form = Form.useFormInstance();
const profile = Form.useWatch('profile', form);
const { getRuleMessage } = useAppUtils();
const disabled = profile !== 'Custom' && Boolean(profile);
const disabled = useMemo(() => {
return (
(profile !== 'Custom' && Boolean(profile)) || action === PageAction.EDIT
);
}, [profile, action]);
return (
<>
src/pages/benchmark/index.tsx
+4
View File
@@ -30,6 +30,7 @@ import useCreateBenchmark from './hooks/use-create-benchmark';
import useViewLogs from './hooks/use-view-logs';
import { useExportBenchmark } from './services/use-export-benchmark';
import useQueryDataset from './services/use-query-dataset';
import useStopBenchmark from './services/use-stop-benchmark';
const Benchmark: React.FC = () => {
const {
@@ -63,6 +64,7 @@ const Benchmark: React.FC = () => {
const { openViewLogsModal, closeViewLogsModal, openViewLogsModalStatus } =
useViewLogs();
const { SettingsButton, selectedColumns } = useColumnSettings();
const { handleStopBenchmark } = useStopBenchmark();
const { datasetList, fetchDatasetData } = useQueryDataset();
const { exportData } = useExportBenchmark();
@@ -114,6 +116,8 @@ const Benchmark: React.FC = () => {
handleDelete({ ...row, name: row.name });
} else if (val === 'viewlog') {
openViewLogsModal(row);
} else if (val === 'stop') {
handleStopBenchmark(row.id);
}
});
src/pages/benchmark/services/use-stop-benchmark.ts
+27
View File
@@ -0,0 +1,27 @@
import { useIntl } from '@umijs/max';
import { message } from 'antd';
import { stopBenchmark } from '../apis';
import { BenchmarkStatusValueMap } from '../config';
const useStopBenchmark = () => {
const intl = useIntl();
const handleStopBenchmark = async (id: number) => {
try {
await stopBenchmark({
id,
data: {
state: BenchmarkStatusValueMap.Stopped
}
});
message.success(intl.formatMessage({ id: 'common.message.success' }));
} catch (error) {}
};
const handleBatchStopBenchmark = async (ids: number[]) => {};
return {
handleStopBenchmark
};
};
export default useStopBenchmark;