fix: ui issues

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

@@ -25,7 +25,7 @@ const RightActions: React.FC<RightActionsProps> = ({
 }) => {
   const ButtonList = [
     {
-      label: 'common.button.export',
+      label: 'benchmark.table.export.results',
       key: 'export',
       icon: (
         <IconFont type="icon-export" style={{ lineHeight: 1, fontSize: 16 }} />

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

@@ -8,17 +8,6 @@ import { BenchmarkStatusValueMap } from '../config';
 import { BenchmarkListItem as ListItem } from '../config/types';
 
 const actionList = [
-  {
-    key: 'edit',
-    label: 'common.button.edit',
-    icon: icons.EditOutlined
-  },
-  {
-    label: 'common.button.stop',
-    key: 'stop',
-    icon: icons.Stop,
-    status: [BenchmarkStatusValueMap.QUEUED, BenchmarkStatusValueMap.Running]
-  },
   {
     label: 'common.button.viewlog',
     key: 'viewlog',
@@ -30,9 +19,20 @@ const actionList = [
     ],
     icon: <IconFont type="icon-logs" />
   },
+  {
+    key: 'edit',
+    label: 'common.button.edit',
+    icon: icons.EditOutlined
+  },
+  {
+    label: 'common.button.stop',
+    key: 'stop',
+    icon: icons.Stop,
+    status: [BenchmarkStatusValueMap.QUEUED, BenchmarkStatusValueMap.Running]
+  },
   {
     key: 'export',
-    label: 'common.button.export',
+    label: 'benchmark.table.export.results',
     icon: (
       <IconFont type="icon-export" style={{ lineHeight: 1, fontSize: 16 }} />
     )

src/pages/benchmark/forms/model-instance.tsx

@@ -3,19 +3,22 @@ import { PageAction } from '@/config';
 import useAppUtils from '@/hooks/use-app-utils';
 import {
   InstanceStatusMap,
-  InstanceStatusMapValue
+  InstanceStatusMapValue,
+  modelCategoriesMap
 } from '@/pages/llmodels/config';
 import { useBenchmarkTargetInstance } from '@/pages/llmodels/hooks/use-run-benchmark';
 import { useQueryModelInstancesList } from '@/pages/llmodels/services/use-query-model-instances';
 import { useQueryModelList } from '@/pages/llmodels/services/use-query-model-list';
 import { useIntl } from '@umijs/max';
-import { Form } from 'antd';
+import { Form, Tooltip } from 'antd';
 import React, { useEffect } from 'react';
 import { useFormContext } from '../config/form-context';
 import { FormData } from '../config/types';
 
+// benchmark.form.nonLlmModel.tips
 const InstanceNode = (props: any) => {
   const { data: instance } = props;
+  const intl = useIntl();
   return instance.isLeaf ? (
     <span className="flex-center">
       {instance.label}
@@ -24,7 +27,17 @@ const InstanceNode = (props: any) => {
       )}
     </span>
   ) : (
-    <span>{instance.label}</span>
+    <>
+      {instance.disabled ? (
+        <Tooltip
+          title={intl.formatMessage({ id: 'benchmark.form.nonLlmModel.tips' })}
+        >
+          <span>{instance.label}</span>
+        </Tooltip>
+      ) : (
+        <span>{instance.label}</span>
+      )}
+    </>
   );
 };
 
@@ -99,6 +112,7 @@ const ModelInstanceForm: React.FC = () => {
       .map((model: any) => ({
         label: model.name,
         value: model.name,
+        disabled: modelCategoriesMap.llm !== model.categories?.[0],
         id: model.id,
         isLeaf: false,
         children: []
@@ -109,12 +123,17 @@ const ModelInstanceForm: React.FC = () => {
     }
 
     // preload instances for the first model
-    const instanceList = await fetchInstanceList({ id: modelOptions[0]?.id });
+    const selectedllmModel = modelOptions.find((model) => !model.disabled);
+    if (!selectedllmModel) {
+      setModelList(modelOptions);
+      return;
+    }
+    const instanceList = await fetchInstanceList({ id: selectedllmModel.id });
     const instanceOptions = instanceList.map((instance: any) =>
       renderInstance(instance)
     );
-    if (modelOptions[0]) {
-      modelOptions[0].children = [...instanceOptions] as never[];
+    if (selectedllmModel) {
+      selectedllmModel.children = [...instanceOptions] as never[];
     }
 
     // init form value for model instance
@@ -127,8 +146,8 @@ const ModelInstanceForm: React.FC = () => {
       });
     } else {
       handleOnChange(
-        [modelOptions[0].value, instanceOptions[0]?.value],
-        [modelOptions[0], instanceOptions[0]]
+        [selectedllmModel.value, instanceOptions[0]?.value],
+        [selectedllmModel, instanceOptions[0]]
       );
     }
 

src/pages/benchmark/index.tsx

@@ -147,7 +147,7 @@ const Benchmark: React.FC = () => {
     } else if (val === 'stop') {
       handleStopBenchmark(row.id);
     } else if (val === 'export') {
-      exportData([row.id]);
+      exportData([row.id], row.name);
     }
   });
 
@@ -192,7 +192,11 @@ const Benchmark: React.FC = () => {
   });
 
   const handleExportData = () => {
-    exportData(rowSelection.selectedRowKeys);
+    const firstSelectedRow = dataSource.dataList.find(
+      (item) => item.id === rowSelection.selectedRowKeys[0]
+    );
+    const name = firstSelectedRow ? firstSelectedRow.name : 'benchmark';
+    exportData(rowSelection.selectedRowKeys, name);
   };
 
   return (

src/pages/benchmark/services/use-export-benchmark.ts

@@ -1,6 +1,7 @@
 import { GPUSTACK_API_BASE_URL } from '@/config/settings';
 import { downloadFile } from '@/utils/download-stream';
 import { message } from 'antd';
+import dayjs from 'dayjs';
 import { EXPORT_BENCHMARK_LIST } from '../apis';
 
 const matchFilename = (disposition: string | null): string | undefined => {
@@ -12,7 +13,9 @@ const matchFilename = (disposition: string | null): string | undefined => {
 };
 
 export function useExportBenchmark() {
-  const exportData = async (data: any[]) => {
+  const exportData = async (data: any[], name: string) => {
+    const date = dayjs().format('YYYYMMDD_HHmmss');
+    const fileName = `${name || 'benchmark'}_${date}`;
     try {
       const res = await fetch(
         `${GPUSTACK_API_BASE_URL}${EXPORT_BENCHMARK_LIST}`,
@@ -26,8 +29,7 @@ export function useExportBenchmark() {
       );
       // header
       const contentDispostion = res.headers.get('content-Disposition');
-      const filename =
-        matchFilename(contentDispostion) || `benchmark-export.yml`;
+      const filename = matchFilename(contentDispostion) || `${fileName}.yml`;
       if (res.ok) {
         const blob = await res.blob();
         downloadFile(blob, filename);