fix: details layout

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

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

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