style: backend list styles

2025-10-13 14:40:26 +08:00
parent 0dfe77df37
commit eb509166ee
18 changed files with 209 additions and 360 deletions
@@ -1,318 +0,0 @@
-import IconFont from '@/components/icon-font';
-import LabelSelector from '@/components/label-selector';
-import CheckboxField from '@/components/seal-form/checkbox-field';
-import SealSelect from '@/components/seal-form/seal-select';
-import TooltipList from '@/components/tooltip-list';
-import { PageActionType } from '@/config/types';
-import { useIntl } from '@umijs/max';
-import { Collapse, Form, FormInstance } from 'antd';
-import _ from 'lodash';
-import { useCallback, useMemo } from 'react';
-import {
-  getBackendParamsTips,
-  modelCategories,
-  placementStrategyOptions,
-  ScheduleValueMap
-} from '../config';
-import BackendParameters, {
-  backendOptionsMap
-} from '../config/backend-parameters';
-import { useFormContext } from '../config/form-context';
-import { FormData } from '../config/types';
-import Backend from '../forms/backend';
-import BackendParametersList from '../forms/backend-parameters-list';
-import Performance from '../forms/performance';
-import dataformStyles from '../style/data-form.less';
-
-interface AdvanceConfigProps {
-  isGGUF: boolean;
-  form: FormInstance;
-  gpuOptions: Array<any>;
-  action: PageActionType;
-  source: string;
-}
-
-const placementStrategyTips = [
-  {
-    title: 'Spread',
-    tips: 'resources.form.spread.tips'
-  },
-  {
-    title: 'Binpack',
-    tips: 'resources.form.binpack.tips'
-  }
-];
-
-const AdvanceConfig = () => {
-  const intl = useIntl();
-  const form = Form.useFormInstance();
-  const wokerSelector = Form.useWatch('worker_selector', form);
-  const EnviromentVars = Form.useWatch('env', form);
-  const scheduleType = Form.useWatch('scheduleType', form);
-  const backend = Form.useWatch('backend', form);
-  const backend_parameters = Form.useWatch('backend_parameters', form);
-  const categories = Form.useWatch('categories', form);
-  const backend_version = Form.useWatch('backend_version', form);
-  const placement_strategy = Form.useWatch('placement_strategy', form);
-  const gpuSelectorIds = Form.useWatch(['gpu_selector', 'gpu_ids'], form);
-  const worker_selector = Form.useWatch('worker_selector', form);
-  const { onValuesChange, gpuOptions, source, isGGUF } = useFormContext();
-
-  const paramsConfig = useMemo(() => {
-    return _.get(BackendParameters, backend, []);
-  }, [backend]);
-
-  const backendParamsTips = useMemo(() => {
-    return getBackendParamsTips(backend);
-  }, [backend]);
-
-  const handleWorkerLabelsChange = useCallback(
-    (labels: Record<string, any>) => {
-      form.setFieldValue('worker_selector', labels);
-    },
-    []
-  );
-  const handleEnviromentVarsChange = useCallback(
-    (labels: Record<string, any>) => {
-      form.setFieldValue('env', labels);
-    },
-    []
-  );
-
-  const handleBackendParametersChange = useCallback((list: string[]) => {
-    form.setFieldValue('backend_parameters', list);
-  }, []);
-
-  const handleBackendParametersOnBlur = () => {
-    onValuesChange?.({}, form.getFieldsValue());
-  };
-
-  const handleDeleteBackendParameters = (index: number) => {
-    onValuesChange?.({}, form.getFieldsValue());
-  };
-
-  const onSelectorChange = (field: string, allowEmpty?: boolean) => {
-    const workerSelector = form.getFieldValue(field);
-    // check if all keys have values
-    const hasEmptyValue = _.some(_.keys(workerSelector), (k: string) => {
-      return !workerSelector[k];
-    });
-    if (!hasEmptyValue || allowEmpty) {
-      onValuesChange?.({}, form.getFieldsValue());
-    }
-  };
-
-  const handleSelectorOnBlur = () => {
-    onSelectorChange('worker_selector');
-  };
-
-  const handleDeleteWorkerSelector = (index: number) => {
-    onValuesChange?.({}, form.getFieldsValue());
-  };
-
-  const handleEnvSelectorOnBlur = () => {
-    onSelectorChange('env', true);
-  };
-
-  const handleDeleteEnvSelector = (index: number) => {
-    onValuesChange?.({}, form.getFieldsValue());
-  };
-
-  const collapseItems = useMemo(() => {
-    const children = (
-      <>
-        <Form.Item<FormData> name="categories">
-          <SealSelect
-            allowNull
-            label={intl.formatMessage({
-              id: 'models.form.categories'
-            })}
-            options={modelCategories}
-          ></SealSelect>
-        </Form.Item>
-        <Backend></Backend>
-        {scheduleType === ScheduleValueMap.Auto && (
-          <>
-            <Form.Item<FormData> name="placement_strategy">
-              <SealSelect
-                label={intl.formatMessage({
-                  id: 'resources.form.placementStrategy'
-                })}
-                options={placementStrategyOptions}
-                description={
-                  <TooltipList list={placementStrategyTips}></TooltipList>
-                }
-              ></SealSelect>
-            </Form.Item>
-            <Form.Item<FormData>
-              name="worker_selector"
-              rules={[
-                ({ getFieldValue }) => ({
-                  validator(rule, value) {
-                    if (
-                      getFieldValue('scheduleType') === ScheduleValueMap.Auto &&
-                      _.keys(value).length > 0
-                    ) {
-                      if (_.some(_.keys(value), (k: string) => !value[k])) {
-                        return Promise.reject(
-                          intl.formatMessage(
-                            {
-                              id: 'common.validate.value'
-                            },
-                            {
-                              name: intl.formatMessage({
-                                id: 'models.form.selector'
-                              })
-                            }
-                          )
-                        );
-                      }
-                    }
-                    return Promise.resolve();
-                  }
-                })
-              ]}
-            >
-              <LabelSelector
-                label={intl.formatMessage({
-                  id: 'resources.form.workerSelector'
-                })}
-                labels={wokerSelector}
-                onChange={handleWorkerLabelsChange}
-                onBlur={handleSelectorOnBlur}
-                onDelete={handleDeleteWorkerSelector}
-                description={
-                  <span>
-                    {intl.formatMessage({
-                      id: 'resources.form.workerSelector.description'
-                    })}
-                  </span>
-                }
-              ></LabelSelector>
-            </Form.Item>
-          </>
-        )}
-
-        <BackendParametersList></BackendParametersList>
-        <Form.Item<FormData> name="env">
-          <LabelSelector
-            label={intl.formatMessage({
-              id: 'models.form.env'
-            })}
-            labels={EnviromentVars}
-            btnText={intl.formatMessage({ id: 'common.button.vars' })}
-            onBlur={handleEnvSelectorOnBlur}
-            onDelete={handleDeleteEnvSelector}
-            onChange={handleEnviromentVarsChange}
-          ></LabelSelector>
-        </Form.Item>
-
-        {scheduleType === ScheduleValueMap.Auto &&
-          [backendOptionsMap.vllm, backendOptionsMap.ascendMindie].includes(
-            backend
-          ) && (
-            <div style={{ paddingBottom: 22, paddingLeft: 10 }}>
-              <Form.Item<FormData>
-                name="distributed_inference_across_workers"
-                valuePropName="checked"
-                style={{ padding: '0 10px', marginBottom: 0 }}
-                noStyle
-              >
-                <CheckboxField
-                  description={intl.formatMessage({
-                    id: 'models.form.distribution.tips'
-                  })}
-                  label={intl.formatMessage({
-                    id: 'resources.form.enableDistributedInferenceAcrossWorkers'
-                  })}
-                ></CheckboxField>
-              </Form.Item>
-            </div>
-          )}
-        <div style={{ paddingBottom: 22, paddingLeft: 10 }}>
-          <Form.Item<FormData>
-            name="restart_on_error"
-            valuePropName="checked"
-            style={{ padding: '0 10px', marginBottom: 0 }}
-            noStyle
-          >
-            <CheckboxField
-              description={intl.formatMessage({
-                id: 'models.form.restart.onerror.tips'
-              })}
-              label={intl.formatMessage({
-                id: 'models.form.restart.onerror'
-              })}
-            ></CheckboxField>
-          </Form.Item>
-        </div>
-      </>
-    );
-    return [
-      {
-        key: '2',
-        label: (
-          <span
-            style={{ fontWeight: 'var(--font-weight-medium)' }}
-            className="font-size-14"
-          >
-            Performance
-          </span>
-        ),
-        forceRender: true,
-        children: <Performance></Performance>
-      },
-      {
-        key: '1',
-        label: (
-          <span
-            style={{ fontWeight: 'var(--font-weight-medium)' }}
-            className="font-size-14"
-          >
-            {intl.formatMessage({ id: 'resources.form.advanced' })}
-          </span>
-        ),
-        forceRender: true,
-        children
-      }
-    ];
-  }, [
-    form,
-    source,
-    intl,
-    gpuOptions,
-    paramsConfig,
-    scheduleType,
-    wokerSelector,
-    backend,
-    backend_parameters,
-    isGGUF,
-    categories,
-    backend_version,
-    placement_strategy,
-    gpuSelectorIds,
-    EnviromentVars,
-    worker_selector
-  ]);
-
-  return (
-    <Collapse
-      expandIconPosition="start"
-      bordered={false}
-      ghost
-      accordion
-      destroyOnHidden={false}
-      className={dataformStyles['advanced-collapse']}
-      expandIcon={({ isActive }) => (
-        <IconFont
-          type="icon-down"
-          rotate={isActive ? 0 : -90}
-          style={{ fontSize: '14px' }}
-        ></IconFont>
-      )}
-      items={collapseItems}
-    ></Collapse>
-  );
-};
-
-export default AdvanceConfig;
@@ -20,10 +20,10 @@ import { backendOptionsMap } from '../config/backend-parameters';
 import { CatalogFormContext } from '../config/form-context';
 import { CatalogSpec, FormData, ListItem, SourceType } from '../config/types';
 import { generateGPUIds } from '../config/utils';
+import DataForm from '../forms';
 import { useCheckCompatibility } from '../hooks';
 import useFormInitialValues from '../hooks/use-form-initial-values';
 import CompatibilityAlert from './compatible-alert';
-import DataForm from './data-form';

 const pickFieldsFromSpec = [
  'backend_version',
@@ -11,6 +11,7 @@ import ColumnWrapper from '../../_components/column-wrapper';
 import { defaultFormValues, deployFormKeyMap, modelSourceMap } from '../config';
 import { backendOptionsMap } from '../config/backend-parameters';
 import { BackendOption, FormData, SourceType } from '../config/types';
+import DataForm from '../forms';
 import {
  MessageStatus,
  WarningStausOptions,
@@ -19,7 +20,6 @@ import {
 } from '../hooks';
 import useCheckBackend from '../hooks/use-check-backend';
 import CompatibilityAlert from './compatible-alert';
-import DataForm from './data-form';
 import GGUFResult from './gguf-result';
 import ModelCard from './model-card';
 import SearchModel from './search-model';
@@ -488,6 +488,9 @@ const AddModal: FC<AddModalProps> = (props) => {
        <FormWrapper>
          <ColumnWrapper
            paddingBottom={warningStatus.show ? 170 : 50}
+            styles={{
+              container: { paddingTop: 0 }
+            }}
            footer={
              <>
                <CompatibilityAlert
@@ -14,9 +14,9 @@ import {
 import { backendOptionsMap } from '../config/backend-parameters';
 import { BackendOption, FormData } from '../config/types';
 import { generateGPUSelector } from '../config/utils';
+import DataForm from '../forms';
 import { useCheckCompatibility } from '../hooks';
 import CompatibilityAlert from './compatible-alert';
-import DataForm from './data-form';

 type AddModalProps = {
  title: string;
@@ -17,13 +17,13 @@ import {
  SourceType
 } from '../config/types';
 import { generateGPUIds } from '../config/utils';
-import CatalogFrom from '../forms/catalog';
-import LocalPathSource from '../forms/local-path-source';
-import OnlineSource from '../forms/online-source';
 import { useGenerateGPUOptions } from '../hooks/use-form-initial-values';
+import CatalogFrom from './catalog';
+import LocalPathSource from './local-path-source';
+import OnlineSource from './online-source';
 // import AdvanceConfig from './advance-config';
-import AdvanceConfig from '../forms/advance-config';
-import Performance from '../forms/performance';
+import AdvanceConfig from './advance-config';
+import Performance from './performance';

 interface DataFormProps {
  initialValues?: any;
@@ -266,7 +266,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
            },
            {
              key: 'advance_config',
-              label: 'Advanced',
+              label: intl.formatMessage({ id: 'resources.form.advanced' }),
              forceRender: true,
              children: <AdvanceConfig></AdvanceConfig>
            }
@@ -33,6 +33,7 @@ const Performance: React.FC = () => {
  const { onQuantizationChange } = useCatalogFormContext();
  const { getRuleMessage } = useAppUtils();
  const form = Form.useFormInstance();
+  const scheduleType = Form.useWatch('scheduleType', form);

  const handleScheduleTypeChange = (value: string) => {
    if (value === ScheduleValueMap.Auto) {
@@ -61,8 +62,7 @@ const Performance: React.FC = () => {
          options={scheduleList}
        ></SealSelect>
      </Form.Item>
-      {form.getFieldValue('scheduleType') ===
-        ScheduleValueMap.SpecificGPUType && (
+      {scheduleType === ScheduleValueMap.SpecificGPUType && (
        <>
          <Form.Item name={['gpu_selector', 'gpu_type']}>
            <SealSelect
@@ -95,7 +95,7 @@ const Performance: React.FC = () => {
          </Form.Item>
        </>
      )}
-      {form.getFieldValue('scheduleType') === ScheduleValueMap.Manual &&
+      {scheduleType === ScheduleValueMap.Manual &&
        !form.getFieldValue('fix_gpu_type') && (
          <>
            <Form.Item