style: benchmark progress

src/components/status-tag/index.tsx

@@ -3,6 +3,7 @@ import { StatusType } from '@/config/types';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { Button, Divider, Tooltip } from 'antd';
 import classNames from 'classnames';
+import _ from 'lodash';
 import React, { useMemo } from 'react';
 import 'simplebar-react/dist/simplebar.min.css';
 import styled from 'styled-components';
@@ -91,8 +92,13 @@ const StatusTag: React.FC<StatusTagProps> = ({
     if (download && percent > 0 && percent <= 100) {
       return (
         <>
-          <span className="progress">{download?.percent || 0}%</span>
+          <span className="progress">
-          <span className="download" style={{ width: `${percent}%` }}></span>
+            {_.round(download?.percent, 0) || 0}%
+          </span>
+          <span
+            className="download"
+            style={{ width: `${_.round(percent, 0)}%` }}
+          ></span>
         </>
       );
     }

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

@@ -32,106 +32,6 @@ const useBenchmarkColumns = (params: {
         )
       },
       ...columns,
-      // {
-      //   title: intl.formatMessage({ id: 'benchmark.table.model' }),
-      //   dataIndex: 'model_name',
-      //   sorter: tableSorter(1),
-      //   render: (text: string) => (
-      //     <AutoTooltip ghost minWidth={20}>
-      //       {text}
-      //     </AutoTooltip>
-      //   )
-      // },
-      // {
-      //   title: intl.formatMessage({ id: 'benchmark.table.dataset' }),
-      //   dataIndex: 'dataset_name',
-      //   sorter: tableSorter(1),
-      //   render: (text: string) => (
-      //     <AutoTooltip ghost minWidth={20}>
-      //       {text}
-      //     </AutoTooltip>
-      //   )
-      // },
-      // {
-      //   title: intl.formatMessage({ id: 'common.table.status' }),
-      //   dataIndex: 'state',
-      //   ellipsis: {
-      //     showTitle: false
-      //   },
-      //   width: 120,
-      //   render: (value: number, record: ListItem) => (
-      //     <span className="flex-center gap-8">
-      //       <StatusTag
-      //         statusValue={{
-      //           status: BenchmarkStatus[value],
-      //           text: BenchmarkStatusLabelMap[value],
-      //           message: record.state_message || undefined
-      //         }}
-      //       />
-      //       {record.progress !== undefined && record.progress < 100 && (
-      //         <Progress
-      //           type="circle"
-      //           percent={_.round(record.progress, 0)}
-      //           size={20}
-      //         />
-      //       )}
-      //     </span>
-      //   )
-      // },
-      // {
-      //   title: intl.formatMessage({ id: 'benchmark.table.gpu' }),
-      //   dataIndex: 'gpu_summary',
-      //   sorter: tableSorter(1),
-      //   render: (text: string) => (
-      //     <AutoTooltip ghost minWidth={20}>
-      //       {text}
-      //     </AutoTooltip>
-      //   )
-      // },
-      // {
-      //   title: 'TPS',
-      //   dataIndex: 'tokens_per_second_mean',
-      //   sorter: tableSorter(1),
-      //   render: (text: string) => (
-      //     <AutoTooltip ghost minWidth={20}>
-      //       {_.round(text, 2)}
-      //     </AutoTooltip>
-      //   )
-      // },
-      // {
-      //   title: (
-      //     <span className="flex-column">
-      //       <span>{intl.formatMessage({ id: 'benchmark.table.ttft' })}</span>
-      //       <span>
-      //         {intl.formatMessage({ id: 'benchmark.table.avg' })} (ms)
-      //       </span>
-      //     </span>
-      //   ),
-      //   dataIndex: 'time_to_first_token_mean',
-      //   sorter: tableSorter(1),
-      //   render: (text: string) => (
-      //     <AutoTooltip ghost minWidth={20}>
-      //       {_.round(text, 2)}
-      //     </AutoTooltip>
-      //   )
-      // },
-      // {
-      //   title: (
-      //     <span className="flex-column">
-      //       <span>{intl.formatMessage({ id: 'benchmark.table.tpot' })}</span>
-      //       <span>
-      //         {intl.formatMessage({ id: 'benchmark.table.avg' })} (ms)
-      //       </span>
-      //     </span>
-      //   ),
-      //   dataIndex: 'time_per_output_token_mean',
-      //   sorter: tableSorter(1),
-      //   render: (text: string) => (
-      //     <AutoTooltip ghost minWidth={20}>
-      //       {_.round(text, 2)}
-      //     </AutoTooltip>
-      //   )
-      // },
       {
         title: intl.formatMessage({ id: 'common.table.operation' }),
         dataIndex: 'operations',

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

@@ -3,12 +3,15 @@ import StatusTag from '@/components/status-tag';
 import { tableSorter } from '@/config/settings';
 import ColumnSettings from '@/pages/_components/column-settings';
 import { useIntl } from '@umijs/max';
-import { Progress } from 'antd';
 import dayjs from 'dayjs';
 import _, { round } from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
-import { BenchmarkStatus, BenchmarkStatusLabelMap } from '../config';
+import {
+  BenchmarkStatus,
+  BenchmarkStatusLabelMap,
+  BenchmarkStatusValueMap
+} from '../config';
 import { BenchmarkListItem as ListItem } from '../config/types';
 
 const allFields = [
@@ -58,6 +61,35 @@ const defaultColumns: string[] = [
 ];
 const fixedColumns: string[] = [];
 
+const BenchmarkStateTag = (props: { data: ListItem }) => {
+  const { data } = props;
+  if (!data.state) {
+    return null;
+  }
+  return (
+    <StatusTag
+      download={
+        data.state === BenchmarkStatusValueMap.Running
+          ? { percent: data.progress || 0 }
+          : undefined
+      }
+      statusValue={{
+        status:
+          data.state === BenchmarkStatusValueMap.Running &&
+          data.progress === 100
+            ? BenchmarkStatus[BenchmarkStatusValueMap.Completed]
+            : BenchmarkStatus[data.state],
+        text: BenchmarkStatusLabelMap[data.state],
+        message:
+          data.state === BenchmarkStatusValueMap.Running &&
+          data.progress === 100
+            ? ''
+            : data.state_message
+      }}
+    />
+  );
+};
+
 const useColumnSettings = (options: {
   contentHeight: number;
   clusterList: Global.BaseOption<number>[];
@@ -312,22 +344,7 @@ const useColumnSettings = (options: {
       width: 120,
       dataIndex: 'state',
       render: (value: number, record: ListItem) => (
-        <span className="flex-center gap-8">
+        <BenchmarkStateTag data={record} />
-          <StatusTag
-            statusValue={{
-              status: BenchmarkStatus[value],
-              text: BenchmarkStatusLabelMap[value],
-              message: record.state_message || undefined
-            }}
-          />
-          {record.progress !== undefined && record.progress < 100 && (
-            <Progress
-              type="circle"
-              percent={_.round(record.progress, 0)}
-              size={20}
-            />
-          )}
-        </span>
       )
     },
     {