chore: detail api

src/pages/benchmark/forms/basic.tsx

@@ -1,11 +1,16 @@
 import LabelSelector from '@/components/label-selector';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
+import { PageAction } from '@/config';
 import useAppUtils from '@/hooks/use-app-utils';
+import { ClusterStatusValueMap } from '@/pages/cluster-management/config';
+import { useQueryClusterList } from '@/pages/cluster-management/services/use-query-cluster-list';
+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 _ from 'lodash';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useFormContext } from '../config/form-context';
 import { FormData } from '../config/types';
 
@@ -14,12 +19,81 @@ const BasicForm: React.FC = () => {
   const form = Form.useFormInstance();
   const labels = Form.useWatch('labels', form);
   const { getRuleMessage } = useAppUtils();
-  const { modelList, modelInstanceList, clusterList } = useFormContext();
+  const { action, open } = useFormContext();
+  const {
+    loading: clusterLoading,
+    fetchClusterList,
+    cancelRequest: cancelClusterRequest,
+    clusterList
+  } = useQueryClusterList();
+  const {
+    loading: modelLoading,
+    fetchModelList,
+    cancelRequest: cancelModelRequest,
+    modelList
+  } = useQueryModelList();
+  const {
+    loading: instanceLoading,
+    fetchInstanceList,
+    cancelRequest: cancelInstanceRequest,
+    instanceList
+  } = useQueryModelInstancesList();
 
   const handleLabelsChange = (labels: object) => {
     form.setFieldValue('labels', labels);
   };
 
+  const onModelListOpenChange = async (open: boolean) => {
+    if (open && modelList.length === 0) {
+      await form.validateFields(['cluster_id']);
+      const cluster_id = form.getFieldValue('cluster_id');
+      if (cluster_id) {
+        fetchModelList({ page: -1, cluster_id });
+      }
+    }
+  };
+
+  const onInstanceOpenChange = async (open: boolean) => {
+    if (open && instanceList.length === 0) {
+      const model_id = form.getFieldValue('model_id');
+      await form.validateFields(['model_name']);
+      if (model_id) fetchInstanceList({ id: model_id });
+    }
+  };
+
+  const handleOnModelChange = (value: string, option: any) => {
+    form.setFieldValue('model_id', option?.id);
+  };
+
+  useEffect(() => {
+    const initClusterId = (list: any[]) => {
+      // Find default cluster
+      const defaultCluster = list?.find((item) => item.is_default);
+      if (defaultCluster) {
+        return defaultCluster.id;
+      }
+
+      const cluster_id =
+        list?.find((item) => item.state === ClusterStatusValueMap.Ready)?.id ||
+        list?.[0]?.id;
+
+      return cluster_id;
+    };
+    fetchClusterList({ page: -1 }).then((list) => {
+      if (list.length > 0 && action === PageAction.CREATE) {
+        form.setFieldValue('cluster_id', initClusterId(list));
+      }
+    });
+  }, [form, action]);
+
+  useEffect(() => {
+    if (!open) {
+      cancelClusterRequest();
+      cancelModelRequest();
+      cancelInstanceRequest();
+    }
+  }, [open]);
+
   return (
     <>
       <Form.Item<FormData>
@@ -47,13 +121,14 @@ const BasicForm: React.FC = () => {
         ]}
       >
         <SealSelect
+          loading={clusterLoading}
           options={clusterList}
           label={intl.formatMessage({ id: 'clusters.title' })}
           required
         ></SealSelect>
       </Form.Item>
       <Form.Item<FormData>
-        name="model_id"
+        name="model_name"
         rules={[
           {
             required: true,
@@ -62,11 +137,21 @@ const BasicForm: React.FC = () => {
         ]}
       >
         <SealSelect
-          options={modelList}
+          loading={modelLoading}
+          options={modelList.map((item) => ({
+            ...item,
+            label: item.name,
+            value: item.name
+          }))}
+          onOpenChange={onModelListOpenChange}
+          onChange={handleOnModelChange}
           label={intl.formatMessage({ id: 'benchmark.table.model' })}
           required
         ></SealSelect>
       </Form.Item>
+      <Form.Item<FormData> name="model_id" hidden={true}>
+        <SealInput.Input></SealInput.Input>
+      </Form.Item>
       <Form.Item<FormData>
         name="model_instance_name"
         rules={[
@@ -77,7 +162,9 @@ const BasicForm: React.FC = () => {
         ]}
       >
         <SealSelect
-          options={modelInstanceList}
+          loading={instanceLoading}
+          options={instanceList}
+          onOpenChange={onInstanceOpenChange}
           label={intl.formatMessage({ id: 'benchmark.table.instance' })}
           required
         ></SealSelect>

src/pages/benchmark/forms/dataset.tsx

@@ -1,16 +1,42 @@
+import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { profileOptions } from '../config';
+import { useFormContext } from '../config/form-context';
 import { FormData } from '../config/types';
+import useQueryDataset from '../services/use-query-dataset';
 import RandomSettingsForm from './random-settings';
 
 const DatasetForm: React.FC = () => {
   const intl = useIntl();
   const form = Form.useFormInstance();
   const { getRuleMessage } = useAppUtils();
+  const { action, open } = useFormContext();
+  const {
+    dataList: datasetList,
+    loading: datasetLoading,
+    fetchData,
+    cancelRequest: cancelDatasetRequest
+  } = useQueryDataset();
+
+  const handleOnDataSetChange = (value: any, option: any) => {
+    form.setFieldValue('dataset_id', option?.data?.id);
+  };
+
+  const handleOnDatasetOpenChange = async (open: boolean) => {
+    if (!datasetList.length && open) {
+      await fetchData({ page: -1 });
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      cancelDatasetRequest();
+    }
+  }, [open]);
 
   return (
     <>
@@ -40,11 +66,20 @@ const DatasetForm: React.FC = () => {
         ]}
       >
         <SealSelect
-          options={[]}
+          options={datasetList.map((item) => ({
+            label: item.name,
+            value: item.name
+          }))}
+          loading={datasetLoading}
+          onChange={handleOnDataSetChange}
+          onOpenChange={handleOnDatasetOpenChange}
           label={intl.formatMessage({ id: 'benchmark.table.dataset' })}
           required
         ></SealSelect>
       </Form.Item>
+      <Form.Item<FormData> hidden name="dataset_id">
+        <SealInput.Input></SealInput.Input>
+      </Form.Item>
       <RandomSettingsForm></RandomSettingsForm>
       <Form.Item<FormData>
         name="request_rate"

src/pages/benchmark/forms/index.tsx

@@ -22,6 +22,7 @@ interface ProviderFormProps {
   ref?: any;
   action: PageActionType;
   currentData?: ListItem; // Used when action is EDIT
+  open?: boolean;
   onFinish: (values: FormData) => Promise<void>;
 }
 
@@ -31,9 +32,10 @@ const TABKeysMap = {
 };
 
 const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
-  const { action, currentData, onFinish } = props;
+  const { action, currentData, onFinish, open } = props;
   const intl = useIntl();
   const [form] = Form.useForm();
+
   const { getScrollElementScrollableHeight } = useWrapperContext();
   const [activeKey, setActiveKey] = useState<string[]>([TABKeysMap.PROFILE]);
   const scrollTabsRef = useRef<any>(null);
@@ -91,7 +93,12 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
       }}
       getScrollElementScrollableHeight={getScrollElementScrollableHeight}
     >
-      <FormContext.Provider value={{ action }}>
+      <FormContext.Provider
+        value={{
+          action,
+          open
+        }}
+      >
         <Form form={form} onFinish={onFinish} initialValues={{}}>
           <Basic />
           <CollapsePanel

src/pages/benchmark/forms/random-settings.tsx

@@ -14,7 +14,7 @@ const DatasetForm: React.FC = () => {
   return (
     <>
       <Form.Item<FormData>
-        name="input_length"
+        name="dataset_prompt_tokens"
         rules={[
           {
             required: true,
@@ -26,13 +26,22 @@ const DatasetForm: React.FC = () => {
         ]}
       >
         <SealSelect
-          options={[]}
+          options={[
+            {
+              label: '100',
+              value: 100
+            },
+            {
+              label: '128',
+              value: 128
+            }
+          ]}
           label={intl.formatMessage({ id: 'benchmark.table.inputTokenLength' })}
           required
         ></SealSelect>
       </Form.Item>
       <Form.Item<FormData>
-        name="output_length"
+        name="dataset_output_tokens"
         rules={[
           {
             required: true,
@@ -44,7 +53,16 @@ const DatasetForm: React.FC = () => {
         ]}
       >
         <SealSelect
-          options={[]}
+          options={[
+            {
+              label: '4',
+              value: 4
+            },
+            {
+              label: '8',
+              value: 8
+            }
+          ]}
           label={intl.formatMessage({
             id: 'benchmark.table.outputTokenLength'
           })}