chore: profile config

2026-01-30 18:48:55 +08:00
parent 8f2eea70f6
commit 1a2e82f079
27 changed files with 730 additions and 231 deletions
@@ -5,6 +5,10 @@ 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 {
+  InstanceStatusMap,
+  InstanceStatusMapValue
+} from '@/pages/llmodels/config';
 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';
@@ -28,9 +32,9 @@ const BasicForm: React.FC = () => {
  } = useQueryClusterList();
  const {
    loading: modelLoading,
-    fetchModelList,
+    fetchData: fetchModelList,
    cancelRequest: cancelModelRequest,
-    modelList
+    dataList: modelList
  } = useQueryModelList();
  const {
    loading: instanceLoading,
@@ -65,6 +69,15 @@ const BasicForm: React.FC = () => {
    form.setFieldValue('model_id', option?.id);
  };

+  const optionRender = (option: any) => {
+    return (
+      <span className="flex-center">
+        {option.label}
+        <span className="text-tertiary m-l-4">{`[${InstanceStatusMapValue[option.data?.state]}]`}</span>
+      </span>
+    );
+  };
+
  useEffect(() => {
    const initClusterId = (list: any[]) => {
      // Find default cluster
@@ -163,7 +176,11 @@ const BasicForm: React.FC = () => {
      >
        <SealSelect
          loading={instanceLoading}
-          options={instanceList}
+          options={instanceList.map((item) => ({
+            ...item,
+            disabled: item.state !== InstanceStatusMap.Running
+          }))}
+          optionRender={optionRender}
          onOpenChange={onInstanceOpenChange}
          label={intl.formatMessage({ id: 'benchmark.table.instance' })}
          required
@@ -1,40 +1,129 @@
+import AutoComplete from '@/components/seal-form/auto-complete';
+import SealInputNumber from '@/components/seal-form/input-number';
 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 _ from 'lodash';
 import React, { useEffect } from 'react';
-import { profileOptions } from '../config';
+import { ProfileValueMap } from '../config';
 import { useFormContext } from '../config/form-context';
 import { FormData } from '../config/types';
 import useQueryDataset from '../services/use-query-dataset';
+import useQueryProfiles from '../services/use-query-profiles';
 import RandomSettingsForm from './random-settings';

+const profileFields = [
+  'dataset_prompt_tokens',
+  'dataset_output_tokens',
+  'request_rate',
+  'total_requests'
+];
+
 const DatasetForm: React.FC = () => {
  const intl = useIntl();
  const form = Form.useFormInstance();
  const { getRuleMessage } = useAppUtils();
  const { action, open } = useFormContext();
  const {
-    dataList: datasetList,
+    datasetList,
    loading: datasetLoading,
-    fetchData,
+    fetchDatasetData,
    cancelRequest: cancelDatasetRequest
  } = useQueryDataset();
+  const {
+    profilesOptions,
+    fetchProfilesData,
+    cancelRequest: cancelProfilesRequest
+  } = useQueryProfiles();
+  const profileConfigCache = React.useRef<{ [key: string]: any }>({});

  const handleOnDataSetChange = (value: any, option: any) => {
-    form.setFieldValue('dataset_id', option?.data?.id);
+    if (value === 'Custom') {
+      form.setFieldsValue({
+        profile: ProfileValueMap.Custom,
+        dataset_id: null,
+        dataset_prompt_tokens: null,
+        dataset_output_tokens: null,
+        request_rate: null,
+        total_requests: null
+      });
+    } else {
+      form.setFieldsValue({
+        profile: ProfileValueMap.Custom,
+        dataset_id: option?.data?.id,
+        dataset_prompt_tokens: option?.prompt_tokens,
+        dataset_output_tokens: option?.output_tokens,
+        request_rate: null,
+        total_requests: null
+      });
+    }
  };

-  const handleOnDatasetOpenChange = async (open: boolean) => {
-    if (!datasetList.length && open) {
-      await fetchData({ page: -1 });
+  const setCustomProfileValues = () => {
+    form.setFieldsValue({
+      dataset_name: 'Custom',
+      dataset_id: null,
+      dataset_prompt_tokens: null,
+      dataset_output_tokens: null,
+      request_rate: null,
+      total_requests: null
+    });
+  };
+
+  const handleProfileChange = (value: string, option: any) => {
+    if (value === ProfileValueMap.Custom) {
+      setCustomProfileValues();
+      profileConfigCache.current = {};
+    } else {
+      const dataset_id = datasetList.find(
+        (item) => item.label === option.config?.dataset_name
+      )?.value;
+
+      form.setFieldsValue({
+        dataset_id: dataset_id,
+        ..._.omit(option?.config, ['description', 'dataset_source'])
+      });
+
+      profileConfigCache.current = {
+        profile: value,
+        config: {
+          dataset_id: dataset_id,
+          ..._.omit(option?.config, ['description', 'dataset_source'])
+        }
+      };
    }
  };

+  const handleOnProfileConfigChange = async () => {
+    const values = form.getFieldsValue(profileFields);
+    if (
+      _.isEqual(values, {
+        ..._.pick(profileConfigCache.current.config, profileFields)
+      })
+    ) {
+      form.setFieldsValue({
+        profile: profileConfigCache.current.profile,
+        ...profileConfigCache.current.config
+      });
+      return;
+    }
+
+    form.setFieldsValue({
+      profile: 'Custom',
+      dataset_name: 'Custom'
+    });
+  };
+
  useEffect(() => {
    if (!open) {
      cancelDatasetRequest();
+      cancelProfilesRequest();
+    }
+    if (open) {
+      fetchProfilesData();
+      fetchDatasetData();
    }
  }, [open]);

@@ -51,7 +140,8 @@ const DatasetForm: React.FC = () => {
        ]}
      >
        <SealSelect
-          options={profileOptions}
+          onChange={handleProfileChange}
+          options={profilesOptions}
          label={intl.formatMessage({ id: 'benchmark.form.profile' })}
          required
        ></SealSelect>
@@ -65,51 +155,55 @@ const DatasetForm: React.FC = () => {
          }
        ]}
      >
-        <SealSelect
+        <AutoComplete
          options={datasetList.map((item) => ({
-            label: item.name,
-            value: item.name
+            ...item,
+            label: item.label,
+            value: item.label
          }))}
          loading={datasetLoading}
          onChange={handleOnDataSetChange}
-          onOpenChange={handleOnDatasetOpenChange}
          label={intl.formatMessage({ id: 'benchmark.table.dataset' })}
          required
-        ></SealSelect>
+        ></AutoComplete>
      </Form.Item>
      <Form.Item<FormData> hidden name="dataset_id">
        <SealInput.Input></SealInput.Input>
      </Form.Item>
-      <RandomSettingsForm></RandomSettingsForm>
+      <RandomSettingsForm
+        onValueChange={handleOnProfileConfigChange}
+      ></RandomSettingsForm>
      <Form.Item<FormData>
        name="request_rate"
        rules={[
          {
            required: true,
-            message: getRuleMessage('select', 'benchmark.table.requestRate')
+            message: getRuleMessage('input', 'benchmark.table.requestRate')
          }
        ]}
      >
-        <SealSelect
-          options={[]}
+        <SealInputNumber
+          min={0}
+          onChange={handleOnProfileConfigChange}
          label={intl.formatMessage({ id: 'benchmark.table.requestRate' })}
          required
-        ></SealSelect>
+        ></SealInputNumber>
      </Form.Item>
      <Form.Item<FormData>
        name="total_requests"
        rules={[
          {
            required: true,
-            message: getRuleMessage('select', 'benchmark.form.totalRequests')
+            message: getRuleMessage('input', 'benchmark.form.totalRequests')
          }
        ]}
      >
-        <SealSelect
-          options={[]}
+        <SealInputNumber
+          min={0}
+          onChange={handleOnProfileConfigChange}
          label={intl.formatMessage({ id: 'benchmark.form.totalRequests' })}
          required
-        ></SealSelect>
+        ></SealInputNumber>
      </Form.Item>
    </>
  );
@@ -99,7 +99,17 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
          open
        }}
      >
-        <Form form={form} onFinish={onFinish} initialValues={{}}>
+        <Form
+          form={form}
+          onFinish={onFinish}
+          initialValues={{
+            dataset_prompt_tokens: null,
+            dataset_output_tokens: null,
+            total_requests: null,
+            request_rate: null,
+            seed: null
+          }}
+        >
          <Basic />
          <CollapsePanel
            activeKey={activeKey}
@@ -1,12 +1,13 @@
 import SealInputNumber from '@/components/seal-form/input-number';
-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 { FormData } from '../config/types';

-const DatasetForm: React.FC = () => {
+const DatasetForm: React.FC<{
+  onValueChange?: (value: any) => void;
+}> = ({ onValueChange }) => {
  const intl = useIntl();
  const form = Form.useFormInstance();
  const { getRuleMessage } = useAppUtils();
@@ -18,27 +19,16 @@ const DatasetForm: React.FC = () => {
        rules={[
          {
            required: true,
-            message: getRuleMessage(
-              'select',
-              'benchmark.table.inputTokenLength'
-            )
+            message: getRuleMessage('input', 'benchmark.table.inputTokenLength')
          }
        ]}
      >
-        <SealSelect
-          options={[
-            {
-              label: '100',
-              value: 100
-            },
-            {
-              label: '128',
-              value: 128
-            }
-          ]}
+        <SealInputNumber
+          min={0}
          label={intl.formatMessage({ id: 'benchmark.table.inputTokenLength' })}
          required
-        ></SealSelect>
+          onChange={onValueChange}
+        ></SealInputNumber>
      </Form.Item>
      <Form.Item<FormData>
        name="dataset_output_tokens"
@@ -46,33 +36,28 @@ const DatasetForm: React.FC = () => {
          {
            required: true,
            message: getRuleMessage(
-              'select',
+              'input',
              'benchmark.table.outputTokenLength'
            )
          }
        ]}
      >
-        <SealSelect
-          options={[
-            {
-              label: '4',
-              value: 4
-            },
-            {
-              label: '8',
-              value: 8
-            }
-          ]}
+        <SealInputNumber
+          min={0}
          label={intl.formatMessage({
            id: 'benchmark.table.outputTokenLength'
          })}
          required
-        ></SealSelect>
+          onChange={onValueChange}
+        ></SealInputNumber>
      </Form.Item>
-      <Form.Item<FormData> name="seed">
+      <Form.Item<FormData>
+        name="seed"
+        getValueProps={(value) => ({ value: value || null })}
+      >
        <SealInputNumber
+          min={0}
          label={intl.formatMessage({ id: 'playground.image.params.seed' })}
-          required
        ></SealInputNumber>
      </Form.Item>
    </>