fix: details layout

src/pages/benchmark/apis/index.ts

@@ -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

@@ -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(
+    const subOrdinaryWorkers = instanceData?.subordinate_workers || [];
-      (instance) => instance.worker_name === mainWorkerName
-    );
 
     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

@@ -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

@@ -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

@@ -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"
+          title="Latency"
-          items={throughputItems}
+          items={latencyItems}
           colon={false}
           column={1}
         ></Descriptions>
         <Descriptions
           styles={descriptionStyles}
-          title="Latency"
+          title="Throughput"
-          items={latencyItems}
+          items={throughputItems}
           colon={false}
           column={1}
         ></Descriptions>

src/pages/benchmark/components/summary/percentile-result.tsx

@@ -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

@@ -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 (
+  // return (
-    <Content>
+  //   <Content>
-      <BulbOutlined
+  //     <BulbOutlined
-        style={{ marginRight: 8, color: 'var(--ant-color-text-tertiary)' }}
+  //       style={{ marginRight: 8, color: 'var(--ant-color-text-tertiary)' }}
-      />
+  //     />
-      {children}
+  //     {children}
-    </Content>
+  //   </Content>
-  );
+  // );
+  return <span></span>;
 };
 
 export default Title;

src/pages/benchmark/config/detail-types.ts

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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;