fix: benchmark detail envs gpus list

src/pages/benchmark/components/environment/index.tsx

@@ -1,5 +1,6 @@
 import RowChildren from '@/components/seal-table/components/row-children';
 import SealTable from '@/components/seal-table/index';
+import TableContext from '@/components/seal-table/table-context';
 import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
 import useMemoizedFn from 'ahooks/lib/useMemoizedFn';
 import { Col, Row } from 'antd';
@@ -18,6 +19,12 @@ const Container = styled.div`
   gap: 16px;
 `;
 
+const GPURowWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
 /**
  *
  * @returns display worker info and gpu info.
@@ -53,8 +60,8 @@ const Environment: React.FC = () => {
     return workerMap.get(workerID) || undefined;
   };
 
-  const findGPUByWorkerName = (name: string): GPUData[] => {
+  const findGPUByGPUIds = (ids: string[]): GPUData[] => {
-    return gpuList.filter((gpu) => gpu.worker_name === name);
+    return gpuList.filter((gpu) => ids.includes(gpu.id));
   };
 
   // main worker
@@ -66,7 +73,7 @@ const Environment: React.FC = () => {
       return null;
     }
 
-    const gpuData = findGPUByWorkerName(mainworker.name);
+    const gpuData = findGPUByGPUIds(instanceData.gpu_ids);
 
     return {
       ...mainworker,
@@ -88,7 +95,7 @@ const Environment: React.FC = () => {
       if (!subWorker) {
         return null;
       }
-      const gpuData = findGPUByWorkerName(subWorker.name);
+      const gpuData = findGPUByGPUIds(worker.gpu_ids);
 
       return {
         ...subWorker,
@@ -103,61 +110,92 @@ const Environment: React.FC = () => {
     return [mainWorker, ...subWorkerList].filter(Boolean) as WorkerData[];
   }, [mainWorker, subWorkerList]);
 
-  const handleToggleExpandAll = useMemoizedFn((expanded: boolean) => {
+  const allChildren = useMemo(() => {
-    const keys = dataList?.map((item) => item.id);
+    return dataList.reduce<GPUData[]>(
-    handleExpandAll(expanded, keys);
+      (
-  });
+        acc,
+        worker: {
+          children?: GPUData[];
+          [key: string]: any;
+        }
+      ) => {
+        if (worker.children && worker.children.length > 0) {
+          acc.push(...(worker.children as GPUData[]));
+        }
+        return acc;
+      },
+      []
+    );
+  }, [dataList]);
 
   const loadChildren = useMemoizedFn(async (record: any) => {
     return record.children || [];
   });
 
+  const handleToggleExpandAll = useMemoizedFn(async (expanded: boolean) => {
+    const keys = dataList?.map((item) => item.id);
+    handleExpandAll(expanded, keys);
+  });
+
   const renderChildren = useMemoizedFn((list: any[]) => {
     return (
       <div style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}>
         <GPUHeader columns={GPUColumns}></GPUHeader>
-        <RowChildren>
+        <GPURowWrapper>
           {list.map((gpu) => (
-            <Row key={gpu.id} style={{ width: '100%' }} align="middle">
+            <RowChildren key={gpu.id}>
-              {GPUColumns.map((col) => (
+              <Row key={gpu.id} style={{ width: '100%' }} align="middle">
-                <Col key={col.key} span={col.span} style={{ ...col.colStyle }}>
+                {GPUColumns.map((col) => (
-                  <span
+                  <Col
-                    style={{
+                    key={col.key}
-                      display: 'flex',
+                    span={col.span}
-                      alignItems: 'flex-start',
+                    style={{ ...col.colStyle }}
-                      gap: 4,
-                      flexDirection: 'column'
-                    }}
                   >
-                    {col.render
+                    <span
-                      ? col.render(gpu[col.dataIndex], gpu)
+                      style={{
-                      : gpu[col.dataIndex]}
+                        display: 'flex',
-                  </span>
+                        alignItems: 'flex-start',
-                </Col>
+                        gap: 4,
-              ))}
+                        flexDirection: 'column'
-            </Row>
+                      }}
+                    >
+                      {col.render
+                        ? col.render(gpu[col.dataIndex], gpu)
+                        : gpu[col.dataIndex]}
+                    </span>
+                  </Col>
+                ))}
+              </Row>
+            </RowChildren>
           ))}
-        </RowChildren>
+        </GPURowWrapper>
       </div>
     );
   });
 
   return (
     <Container>
-      <SealTable
+      <TableContext.Provider
-        rowKey="id"
+        value={{
-        loadChildren={loadChildren}
+          allChildren: allChildren
-        expandedRowKeys={expandedRowKeys}
+        }}
-        onExpand={handleExpandChange}
+      >
-        onExpandAll={handleToggleExpandAll}
+        <SealTable
-        renderChildren={renderChildren}
+          rowKey="id"
-        showSorterTooltip={false}
+          loadChildren={loadChildren}
-        dataSource={dataList}
+          expandedRowKeys={expandedRowKeys}
-        loading={false}
+          onExpand={handleExpandChange}
-        loadend={true}
+          onExpandAll={handleToggleExpandAll}
-        columns={workerColumns}
+          renderChildren={renderChildren}
-        expandable={true}
+          showSorterTooltip={false}
-      ></SealTable>
+          childParentKey="worker_id"
+          dataSource={dataList}
+          loading={false}
+          loadend={true}
+          columns={workerColumns}
+          expandable={true}
+        ></SealTable>
+      </TableContext.Provider>
     </Container>
   );
 };

src/pages/benchmark/hooks/use-benchmark-columns.tsx

@@ -43,7 +43,7 @@ const useBenchmarkColumns = (params: {
           </Typography.Text>
         ),
         dataIndex: 'operations',
-        width: 100,
+        width: 140,
         render: (value: string, record: ListItem) => (
           <RowActions record={record} handleSelect={handleSelect}></RowActions>
         )