chore: export action for benchmark item

src/components/icon-font/index.tsx

@@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons';
 // import './iconfont/iconfont.js';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4613488_pxk0gz02dig.js'
+  scriptUrl: '//at.alicdn.com/t/c/font_4613488_lqs6kytf9t8.js'
 });
 
 export default IconFont;

src/pages/benchmark/components/right-actions.tsx

@@ -1,9 +1,6 @@
 import DropdownButtons from '@/components/drop-down-buttons';
-import {
+import IconFont from '@/components/icon-font';
-  DeleteOutlined,
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
-  DownloadOutlined,
-  PlusOutlined
-} from '@ant-design/icons';
 import { Button, Space } from 'antd';
 import React from 'react';
 
@@ -30,7 +27,9 @@ const RightActions: React.FC<RightActionsProps> = ({
     {
       label: 'common.button.export',
       key: 'export',
-      icon: <DownloadOutlined />
+      icon: (
+        <IconFont type="icon-export" style={{ lineHeight: 1, fontSize: 16 }} />
+      )
     },
     {
       label: 'common.button.delete',

src/pages/benchmark/components/row-actions.tsx

@@ -30,6 +30,13 @@ const actionList = [
     ],
     icon: <IconFont type="icon-logs" />
   },
+  {
+    key: 'export',
+    label: 'common.button.export',
+    icon: (
+      <IconFont type="icon-export" style={{ lineHeight: 1, fontSize: 16 }} />
+    )
+  },
   {
     label: 'common.button.downloadLog',
     key: 'download',

src/pages/benchmark/details.tsx

@@ -13,6 +13,7 @@ import ViewLogsModal from './components/view-logs-modal';
 import DetailContext from './config/detail-context';
 import { BenchmarkListItem } from './config/types';
 import useViewLogs from './hooks/use-view-logs';
+import { useExportBenchmark } from './services/use-export-benchmark';
 import useQueryBenchmarkList from './services/use-query-benchmarks';
 import useQueryDetail from './services/use-query-detail';
 import useStopBenchmark from './services/use-stop-benchmark';
@@ -30,6 +31,7 @@ const Details: React.FC = () => {
   const { openViewLogsModal, closeViewLogsModal, openViewLogsModalStatus } =
     useViewLogs();
   const { handleStopBenchmark } = useStopBenchmark();
+  const { exportData } = useExportBenchmark();
   const [searchParams] = useSearchParams();
   const name = searchParams.get('name');
   const id = searchParams.get('id');
@@ -89,6 +91,8 @@ const Details: React.FC = () => {
       openViewLogsModal(row);
     } else if (val === 'stop') {
       handleStopBenchmark(row.id);
+    } else if (val === 'export') {
+      exportData([row.id]);
     }
   });
 

src/pages/benchmark/hooks/use-column-settings.tsx

@@ -11,6 +11,33 @@ import styled from 'styled-components';
 import { BenchmarkStatus, BenchmarkStatusLabelMap } from '../config';
 import { BenchmarkListItem as ListItem } from '../config/types';
 
+const allFields = [
+  'cluster_id',
+  'model_name',
+  'dataset_name',
+  'profile',
+  'gpu_summary',
+  'state',
+  'request_rate',
+  'request_latency_mean',
+  'tokens_per_second_mean',
+  'time_to_first_token_mean',
+  'time_per_output_token_mean',
+  'inter_token_latency_mean',
+  'requests_per_second_mean',
+  'input_tokens_per_second_mean',
+  'output_tokens_per_second_mean',
+  'total_requests',
+  'successful_requests',
+  'failed_requests',
+  'request_concurrency',
+  'created_at'
+];
+
+const fieldSortPos: Record<string, number> = Object.fromEntries(
+  allFields.map((field, index) => [field, index + 1])
+);
+
 const SubTitleWrapper = styled.span.attrs({
   className: 'sub-title'
 })`
@@ -68,31 +95,16 @@ const useColumnSettings = (options: {
           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',
@@ -107,7 +119,6 @@ const useColumnSettings = (options: {
       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',
@@ -122,7 +133,6 @@ const useColumnSettings = (options: {
       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',
@@ -131,7 +141,6 @@ const useColumnSettings = (options: {
     },
     {
       title: 'RPS',
-      pos: 16,
       dataIndex: 'requests_per_second_mean',
       sorter: tableSorter(1),
       render: (text: string) => (
@@ -140,6 +149,23 @@ const useColumnSettings = (options: {
         </AutoTooltip>
       )
     },
+    {
+      title: renderTitle(
+        `${intl.formatMessage({ id: 'benchmark.detail.throughput.totalToken' })}`,
+        {
+          subTitle: '(Tokens/s)'
+        }
+      ),
+      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(
         `${intl.formatMessage({
@@ -149,7 +175,6 @@ const useColumnSettings = (options: {
           subTitle: '(Tokens/s)'
         }
       ),
-      pos: 17,
       dataIndex: 'input_tokens_per_second_mean',
       path: 'input_tokens_per_second_mean',
       unit: 'Tokens/s',
@@ -168,7 +193,6 @@ const useColumnSettings = (options: {
           subTitle: '(Tokens/s)'
         }
       ),
-      pos: 18,
       dataIndex: 'output_tokens_per_second_mean',
       path: 'output_tokens_per_second_mean',
       unit: 'Tokens/s',
@@ -182,8 +206,6 @@ const useColumnSettings = (options: {
       title: renderTitle(
         intl.formatMessage({ id: 'benchmark.detail.requests.total' })
       ),
-      pos: 19,
-      key: 'total_requests',
       dataIndex: 'total_requests',
       path: 'total_requests',
       precision: 0,
@@ -198,8 +220,6 @@ const useColumnSettings = (options: {
       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) =>
@@ -213,8 +233,6 @@ const useColumnSettings = (options: {
       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) =>
@@ -229,8 +247,6 @@ const useColumnSettings = (options: {
           id: 'benchmark.detail.requests.concurrency'
         })
       ),
-      pos: 22,
-      key: 'request_concurrency',
       dataIndex: 'request_concurrency',
       path: ['raw_metrics', 'benchmarks', '0'],
       render: (value: number) =>
@@ -252,22 +268,12 @@ const useColumnSettings = (options: {
         </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',
+      sorter: tableSorter(1),
       render: (text: string) => (
         <AutoTooltip ghost minWidth={20}>
           {text}
@@ -276,7 +282,6 @@ const useColumnSettings = (options: {
     },
     {
       title: renderTitle(intl.formatMessage({ id: 'benchmark.table.dataset' })),
-      pos: 4,
       dataIndex: 'dataset_name',
       render: (text: string) => (
         <AutoTooltip ghost minWidth={20}>
@@ -286,7 +291,6 @@ const useColumnSettings = (options: {
     },
     {
       title: renderTitle(intl.formatMessage({ id: 'benchmark.form.profile' })),
-      pos: 5,
       dataIndex: 'profile',
       render: (text: string) => (
         <AutoTooltip ghost minWidth={20}>
@@ -296,7 +300,6 @@ const useColumnSettings = (options: {
     },
     {
       title: renderTitle(intl.formatMessage({ id: 'benchmark.table.gpu' })),
-      pos: 6,
       dataIndex: 'gpu_summary',
       render: (text: string) => (
         <AutoTooltip ghost minWidth={20}>
@@ -306,7 +309,6 @@ const useColumnSettings = (options: {
     },
     {
       title: renderTitle(intl.formatMessage({ id: 'common.table.status' })),
-      pos: 7,
       width: 120,
       dataIndex: 'state',
       render: (value: number, record: ListItem) => (
@@ -332,7 +334,6 @@ const useColumnSettings = (options: {
       title: renderTitle(
         intl.formatMessage({ id: 'benchmark.table.requestRate' })
       ),
-      pos: 8,
       dataIndex: 'request_rate',
       render: (text: string) => (
         <AutoTooltip ghost minWidth={20}>
@@ -342,7 +343,6 @@ const useColumnSettings = (options: {
     },
     {
       title: renderTitle(intl.formatMessage({ id: 'common.table.createTime' })),
-      pos: 23,
       dataIndex: 'created_at',
       sorter: tableSorter(6),
       render: (value: string) => (
@@ -368,7 +368,10 @@ const useColumnSettings = (options: {
       selectedColumns.includes(col.dataIndex as string)
     );
     // Sort by pos
-    selected.sort((a, b) => (a.pos || 0) - (b.pos || 0));
+    selected.sort(
+      (a, b) =>
+        (fieldSortPos[a.dataIndex] || 0) - (fieldSortPos[b.dataIndex] || 0)
+    );
     return selected;
   }, [selectedColumns, clusterList]);
 

src/pages/benchmark/index.tsx

@@ -146,6 +146,8 @@ const Benchmark: React.FC = () => {
       openViewLogsModal(row);
     } else if (val === 'stop') {
       handleStopBenchmark(row.id);
+    } else if (val === 'export') {
+      exportData([row.id]);
     }
   });