fix: custom versin configs

src/components/collapse-container/index.tsx

@@ -18,6 +18,7 @@ const CardStyled = styled(Card)`
     background-color: var(--ant-color-fill-quaternary);
     border-bottom: none;
     border-radius: var(--ant-border-radius);
+    padding: 0 16px;
     &:hover {
       background-color: var(--ant-color-fill-secondary);
       .del-btn {
@@ -72,6 +73,7 @@ export interface CollapsibleContainerProps {
   defaultOpen?: boolean;
   open?: boolean;
   collapsible?: boolean;
+  showExpandIcon?: boolean;
   onToggle?: (open: boolean) => void;
   disabled?: boolean;
   variant?: 'outlined' | 'borderless' | undefined;
@@ -88,6 +90,7 @@ export default function CollapsibleContainer({
   open,
   onToggle,
   disabled = false,
+  showExpandIcon = true,
   variant = 'borderless',
   className = '',
   collapsible,
@@ -120,14 +123,16 @@ export default function CollapsibleContainer({
       <div className={styles.title} onClick={toggle}>
         <div className={styles.left}>
           <div className={styles.expandIcon}>
-            <IconFont
+            {showExpandIcon && (
-              rotate={isOpen ? 180 : 0}
+              <IconFont
-              type="icon-down"
+                rotate={isOpen ? 180 : 0}
-              style={{
+                type="icon-down"
-                cursor: disabled ? 'not-allowed' : 'pointer',
+                style={{
-                fontSize: 12
+                  cursor: disabled ? 'not-allowed' : 'pointer',
-              }}
+                  fontSize: 12
-            />
+                }}
+              />
+            )}
             {title && <div>{title}</div>}
           </div>
           {subtitle && <div className={styles.subtitle}>{subtitle}</div>}

src/pages/backends/backend-create.tsx

@@ -1,249 +0,0 @@
-import { PageAction } from '@/config';
-import { PageActionType } from '@/config/types';
-import ClusterSteps from '@/pages/cluster-management/components/cluster-steps';
-import FooterButtons from '@/pages/cluster-management/components/footer-buttons';
-import { PageContainer } from '@ant-design/pro-components';
-import { useIntl, useNavigate, useSearchParams } from '@umijs/max';
-import _ from 'lodash';
-import React, { useMemo, useRef, useState } from 'react';
-import styled from 'styled-components';
-import { createBackend } from './apis';
-import { FormData } from './config/types';
-import { moduleMap, moduleRegistry } from './step-forms/module-registry';
-import useStepList from './step-forms/use-step-list';
-
-const Container = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-const Nav = styled.div`
-  display: flex;
-  align-items: center;
-  height: 72px;
-  font-weight: 400;
-  font-size: 20px;
-  color: var(--ant-color-text-tertiary);
-  .level-2 {
-    color: var(--ant-color-text);
-    font-weight: 600;
-  }
-`;
-
-const Content = styled.div`
-  width: 600px;
-`;
-
-const HeaderContainer = styled.div`
-  position: relative;
-  display: grid;
-  grid-template-columns: 1fr;
-  align-items: center;
-  padding-inline: var(--layout-content-header-inlinepadding);
-  .text {
-    margin-right: 16px;
-    padding-right: 16px;
-    border-right: 1px solid var(--ant-color-split);
-    font-weight: 600;
-    font-size: 20px;
-    margin-right: 32px;
-  }
-`;
-
-const ClusterCreate = () => {
-  const intl = useIntl();
-  const startStep = 0;
-  const steps = useStepList();
-  const [searchParams] = useSearchParams();
-  const action =
-    (searchParams.get('action') as PageActionType) || PageAction.CREATE;
-  const navigate = useNavigate();
-
-  const [currentStep, setCurrentStep] = useState<number>(startStep);
-
-  const [extraData, setExtraData] = useState<FormData>({
-    default_version: ''
-  } as FormData);
-  const [formValues, setFormValues] = useState<Record<string, any>>({});
-
-  const formRefs: Record<string, any> = {
-    [moduleMap.BasicForm]: useRef<any>(null),
-    [moduleMap.ParamertersForm]: useRef<any>(null),
-    [moduleMap.VersionConfigForm]: useRef<any>(null)
-  };
-
-  const handleStepChange = (newStep: number) => {
-    setCurrentStep(newStep);
-    console.log('step========', newStep);
-  };
-
-  const getFormFieldsValue = () => {
-    setFormValues((prev) => {
-      const newFormValues = _.cloneDeep(prev);
-      for (const [formKey, formRef] of Object.entries(formRefs)) {
-        const formValues = formRef?.current?.getFieldsValue?.();
-        if (formValues) {
-          newFormValues[formKey] = formValues;
-        }
-      }
-      return newFormValues;
-    });
-  };
-
-  const onPrevious = () => {
-    getFormFieldsValue();
-    setCurrentStep((prev) => Math.max(prev - 1, 0));
-  };
-
-  const validateForms = async () => {
-    const step = steps[currentStep];
-    const formKeys = step?.showForms || [];
-    if (formKeys?.length > 0) {
-      const results = await Promise.allSettled(
-        formKeys.map((key) => formRefs[key].current?.validateFields())
-      );
-
-      console.log('results========', results);
-
-      const resultsMap = new Map<string, any>();
-      results.forEach((result, index) => {
-        if (result.status === 'rejected') {
-          const values = result.reason?.values || {};
-          resultsMap.set(formKeys[index], values);
-        } else if (result.status === 'fulfilled') {
-          resultsMap.set(formKeys[index], result.value);
-        }
-      });
-      const newValues = _.merge(formValues, Object.fromEntries(resultsMap));
-
-      setFormValues(newValues);
-
-      const isValid = results.every((result) => result.status === 'fulfilled');
-      if (!isValid) {
-        return false;
-      }
-      return Object.assign({}, ...Object.values(newValues));
-    }
-    return true;
-  };
-
-  const onNext = async (callback?: (values: FormData) => void) => {
-    try {
-      const result = await validateForms();
-      console.log('results========2', result);
-      if (result) {
-        await callback?.(result as FormData);
-        const step = steps[currentStep];
-        step.beforeNext?.();
-        setCurrentStep((prev) => Math.min(prev + 1, steps.length - 1));
-      }
-    } catch (error) {
-      console.log('next error:', error);
-    }
-  };
-
-  const resetForm = () => {
-    setFormValues({});
-    for (const [formKey, formRef] of Object.entries(formRefs)) {
-      formRefs[formKey] = React.createRef();
-    }
-  };
-
-  const renderForms = () => {
-    const step = steps[currentStep];
-    const formKeys = step?.showForms || [];
-    if (formKeys.length === 0) {
-      return null;
-    }
-
-    return formKeys.map((key) => {
-      console.log('renderForms key========', key, formValues);
-      const FormComponent = moduleRegistry[key];
-      return FormComponent ? (
-        <FormComponent
-          key={key}
-          ref={formRefs[key]}
-          action={action}
-          currentData={formValues[key]}
-        />
-      ) : null;
-    });
-  };
-
-  const showButtons = useMemo(() => {
-    const step = steps[currentStep];
-    return step?.showButtons ? step?.showButtons?.() : {};
-  }, [currentStep, steps]);
-
-  const submit = async (values: FormData) => {
-    const data = {
-      ...extraData,
-      ...(typeof values === 'object' ? values : {})
-    };
-    const res = await createBackend({ data });
-
-    return true;
-  };
-
-  const handleSubmit = async () => {
-    onNext(submit);
-  };
-
-  const handleCancel = () => {
-    navigate(-1);
-  };
-
-  return (
-    <PageContainer
-      ghost
-      footer={[
-        <FooterButtons
-          key="buttons"
-          onPrevious={onPrevious}
-          onNext={onNext}
-          handleCancel={handleCancel}
-          handleSubmit={handleSubmit}
-          showButtons={showButtons}
-        />
-      ]}
-      header={{
-        title: false,
-        style: {
-          paddingInline: 'var(--layout-content-header-inlinepadding)'
-        },
-        breadcrumb: {}
-      }}
-      pageHeaderRender={() => (
-        <HeaderContainer>
-          <Nav>
-            <span className="level-1">Backends</span>
-            <span
-              style={{
-                marginInline: 20,
-                color: 'var(--ant-color-split)'
-              }}
-            >
-              /
-            </span>
-            <span className="level-2">
-              {intl.formatMessage({ id: 'common.button.create' })}
-            </span>
-          </Nav>
-          <ClusterSteps
-            steps={steps}
-            currentStep={currentStep}
-            onChange={handleStepChange}
-          ></ClusterSteps>
-        </HeaderContainer>
-      )}
-    >
-      <Container>
-        <Content>{renderForms()}</Content>
-      </Container>
-    </PageContainer>
-  );
-};
-
-export default ClusterCreate;

src/pages/backends/components/add-modal.tsx

@@ -53,7 +53,6 @@ const AddModal: React.FC<AddModalProps> = (props) => {
   const [activeKey, setActiveKey] = useState<string>('form');
   const [yamlContent, setYamlContent] = useState<string>('');
   const [formContent, setFormContent] = useState<FormData>({} as FormData);
-  const tabsRef = useRef<any>(null);
 
   const onOk = () => {
     if (activeKey === 'yaml') {
@@ -73,6 +72,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
       (acc: Record<string, any>, curr) => {
         if (curr.version_no) {
           acc[curr.version_no] = {
+            custom_framework: curr.custom_framework,
             image_name: curr.image_name,
             run_command: curr.run_command
           };
@@ -99,6 +99,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
           version_no: key,
           image_name: values.version_configs?.[key]?.image_name,
           run_command: values.version_configs?.[key]?.run_command,
+          custom_framework: values.version_configs?.[key]?.custom_framework,
           is_default: key === values.default_version
         })
       );
@@ -110,8 +111,8 @@ const AddModal: React.FC<AddModalProps> = (props) => {
         image_name: values.build_in_version_configs?.[key]?.image_name,
         run_command: values.build_in_version_configs?.[key]?.run_command,
         is_default: key === values.default_version,
-        backend_list:
+        build_in_frameworks:
-          values.build_in_version_configs?.[key]?.backend_list || [],
+          values.build_in_version_configs?.[key]?.build_in_frameworks || [],
         is_built_in: true
       }));
 

src/pages/backends/components/backend-card.tsx

@@ -137,7 +137,11 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
     if (data.is_build_in) {
       const backendList = _.get(
         data,
-        ['build_in_version_configs', data.default_version, 'backend_list'],
+        [
+          'build_in_version_configs',
+          data.default_version,
+          'build_in_frameworks'
+        ],
         []
       );
 

src/pages/backends/components/view-builtin-versions-modal.tsx

@@ -25,8 +25,8 @@ const ViewBuiltinVersionsModal: React.FC<ViewBuiltinVersionsModalProps> = ({
         image_name: currentData.build_in_version_configs[key].image_name,
         run_command: currentData.build_in_version_configs[key].run_command,
         is_default: key === currentData.default_version,
-        backend_list:
+        build_in_frameworks:
-          currentData.build_in_version_configs[key].backend_list || [],
+          currentData.build_in_version_configs[key].build_in_frameworks || [],
         is_built_in: true
       }));
       form.setFieldsValue({

src/pages/backends/config/index.ts

@@ -38,13 +38,6 @@ export const backendActions = [
     icon: icons.EditOutlined,
     locale: false
   },
-  {
-    label: 'View Built-in Versions',
-    value: 'view_versions',
-    key: 'view_versions',
-    icon: icons.Version,
-    locale: false
-  },
   {
     label: 'Export YAML',
     value: 'yaml',
@@ -123,6 +116,28 @@ export const backendFields = [
   'version_configs',
   'default_backend_parameters'
 ];
+export const frameworks = [
+  {
+    label: 'CUDA',
+    value: 'cuda'
+  },
+  {
+    label: 'ROCm',
+    value: 'rocm'
+  },
+  {
+    label: 'CANN',
+    value: 'cann'
+  },
+  {
+    label: 'DTK',
+    value: 'dtk'
+  },
+  {
+    label: 'CoreX',
+    value: 'corex'
+  }
+];
 
 export const yamlTemplate = `# backend configuration template
 backend_name: SGLang
@@ -134,9 +149,11 @@ version_configs:
   v0.0.1:
     image_name: lm/sglang
     run_command: run sglang
+    custom_framework: cuda
   v0.0.2:
     image_name: lm/sglang
-    run_command: run sglang
+    run_command:
+    custom_framework:
 default_backend_parameters:
   - --host
   `;

src/pages/backends/config/schema/create.json

@@ -36,12 +36,9 @@
               "type": ["string", "null"],
               "description": "start command"
             },
-            "backend_list": {
+            "custom_framework": {
-              "type": "array",
+              "type": ["string", "null"],
-              "items": {
+              "description": "custom framework"
-                "type": "string"
-              },
-              "description": "backend list"
             }
           },
           "required": ["image_name", "run_command"],

src/pages/backends/config/schema/update-builtin.json

@@ -27,12 +27,9 @@
               "type": ["string", "null"],
               "description": "start command"
             },
-            "backend_list": {
+            "custom_framework": {
-              "type": "array",
+              "type": ["string", "null"],
-              "items": {
+              "description": "custom framework"
-                "type": "string"
-              },
-              "description": "backend list"
             }
           },
           "required": ["image_name", "run_command"],

src/pages/backends/config/schema/update-custom.json

@@ -31,12 +31,9 @@
               "type": ["string", "null"],
               "description": "start command"
             },
-            "backend_list": {
+            "custom_framework": {
-              "type": "array",
+              "type": ["string", "null"],
-              "items": {
+              "description": "custom framework"
-                "type": "string"
-              },
-              "description": "backend list"
             }
           },
           "required": ["image_name", "run_command"],

src/pages/backends/config/types.ts

@@ -2,7 +2,8 @@ export interface VersionConfigs {
   image_name: string;
   run_command: string;
   is_default: boolean;
-  backend_list?: string[];
+  build_in_frameworks?: string[];
+  custom_framework: string;
   version_no?: string;
   is_built_in?: boolean;
 }

src/pages/backends/forms/built-in-versions.tsx

@@ -8,13 +8,13 @@ const ItemWrapper = styled.div`
   flex-direction: column;
   align-items: flex-start;
   gap: 8px;
+  width: 100%;
   .title {
     width: 100%;
     justify-content: space-between;
     display: flex;
     align-items: center;
     font-weight: 600;
-    margin-bottom: 8px;
   }
 `;
 
@@ -35,7 +35,8 @@ const RowWrapper = styled.div`
 
 interface VersionItemProps {
   data: {
-    backend_list: string[];
+    build_in_frameworks: string[];
+    custom_framework: string;
     version_no: string;
     image_name: string;
     run_command: string;
@@ -44,20 +45,24 @@ interface VersionItemProps {
   };
 }
 
-const VersionItem: React.FC<VersionItemProps> = ({ data }) => {
+export const VersionItem: React.FC<VersionItemProps> = ({ data }) => {
   return (
     <ItemWrapper>
       <div className="title">
         <span>{data.version_no}</span>
         {data.is_default && (
-          <ThemeTag color="geekblue" className="font-400">
+          <ThemeTag
+            color="geekblue"
+            className="font-400"
+            style={{ marginRight: 0 }}
+          >
             Default
           </ThemeTag>
         )}
       </div>
       <RowWrapper>
         <span className="text drivers">
-          {data.backend_list?.map((item) => {
+          {data.build_in_frameworks?.map((item) => {
             return (
               <ThemeTag
                 key={item}

src/pages/backends/forms/index.tsx

@@ -1,11 +1,9 @@
 import { PageActionType } from '@/config/types';
-import CollapsePanel from '@/pages/_components/collapse-panel';
 import { Form } from 'antd';
 import _ from 'lodash';
 import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
 import { FormData, ListItem } from '../config/types';
 import BasicForm from './basic';
-import BuiltInVersionsForm from './built-in-versions';
 import VersionsForm from './versions-config';
 
 type AddModalProps = {
@@ -22,19 +20,17 @@ const BackendForm: React.FC<AddModalProps> = forwardRef(
     const onFinishFailed = (errorInfo: any) => {
       const errorFields = errorInfo.errorFields || [];
       if (errorFields.length > 0) {
-        const hasVersionsError = errorFields.some((field: any) =>
+        const versionError = errorFields.find((field: any) =>
           field.name.includes('version_configs')
         );
-        if (hasVersionsError) {
+        if (versionError) {
-          setActiveKey([...new Set([...activeKey, 'version_configs'])]);
+          setActiveKey([...new Set([versionError.name[1]])]);
+        } else {
+          setActiveKey([]);
         }
       }
     };
 
-    const handleOnCollapseChange = (keys: string | string[]) => {
-      setActiveKey(Array.isArray(keys) ? keys : [keys]);
-    };
-
     useEffect(() => {
       if (currentData) {
         console.log('currentData:', currentData);
@@ -71,25 +67,11 @@ const BackendForm: React.FC<AddModalProps> = forwardRef(
         onFinishFailed={onFinishFailed}
       >
         <BasicForm action={action}></BasicForm>
-
+        <VersionsForm
-        <CollapsePanel
+          action={action}
+          currentData={currentData}
           activeKey={activeKey}
-          accordion={false}
+        ></VersionsForm>
-          onChange={handleOnCollapseChange}
-          items={[
-            ...(currentData?.is_build_in
-              ? [
-                  {
-                    key: 'builtin_version_configs',
-                    label: 'Built-in Versions',
-                    forceRender: true,
-                    children: <BuiltInVersionsForm></BuiltInVersionsForm>
-                  }
-                ]
-              : [])
-          ]}
-        ></CollapsePanel>
-        <VersionsForm action={action} currentData={currentData}></VersionsForm>
       </Form>
     );
   }

src/pages/backends/forms/versions-config.tsx

@@ -1,25 +1,36 @@
+import AutoTooltip from '@/components/auto-tooltip';
 import CollapsibleContainer from '@/components/collapse-container';
 import SealInput from '@/components/seal-form/seal-input';
+import SealSelect from '@/components/seal-form/seal-select';
 import { PageActionType } from '@/config/types';
 import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
 import { Button, Divider, Form, Radio } from 'antd';
 import _ from 'lodash';
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
+import { frameworks } from '../config';
 import { ListItem } from '../config/types';
+import { VersionItem } from './built-in-versions';
 
 const Box = styled.div`
   display: grid;
-  grid-template-columns: 200px 1fr;
+  grid-template-columns: 150px 1fr;
   gap: 16px;
   align-items: center;
 `;
 
-const ActionWrapper = styled.div`
+const Label = styled.span`
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin-top: 24px;
+  gap: 4px;
+  color: var(--ant-color-text-secondary);
+`;
+
+const ImageInner = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: 20px;
 `;
 
 const Title = styled.div`
@@ -30,23 +41,33 @@ const Title = styled.div`
   margin-bottom: 8px;
 `;
 
-const Label = styled.div`
+const VersionItemWrapper = styled.div`
-  line-height: 1;
+  display: flex;
-  color: var(--ant-color-text-tertiary);
+  flex-direction: column;
-  margin-bottom: 20px;
+  align-items: flex-start;
-  font-size: var(--font-size-base);
+  padding: 8px 16px;
+  border-radius: var(--ant-border-radius);
+  background-color: var(--ant-color-fill-quaternary);
+  width: 100%;
 `;
 
-const ItemWrapper = styled.div``;
-
 type AddModalProps = {
   action: PageActionType;
   currentData?: ListItem;
+  activeKey?: number[];
 };
-const VersionsForm: React.FC<AddModalProps> = ({ action, currentData }) => {
+const VersionsForm: React.FC<AddModalProps> = ({
+  action,
+  currentData,
+  activeKey
+}) => {
+  const defaultCollapseKey =
+    action === 'edit' ? new Set<number>() : new Set([0]);
   const form = Form.useFormInstance();
   const version_configs = Form.useWatch('version_configs', form);
-  const [collapseKey, setCollapseKey] = React.useState<string[]>(['0']);
+  const buildInVersionConfigs = Form.useWatch('build_in_version_configs', form);
+  const [collapseKey, setCollapseKey] =
+    React.useState<Set<number>>(defaultCollapseKey);
   const versionList = [
     {
       version_no: '',
@@ -86,154 +107,204 @@ const VersionsForm: React.FC<AddModalProps> = ({ action, currentData }) => {
     }
   };
 
-  const onToggle = (open: boolean, key: string) => {
+  const onToggle = (open: boolean, key: number) => {
-    setCollapseKey(open ? [key] : []);
+    setCollapseKey(open ? new Set([key]) : new Set());
   };
 
-  const handleAdd = async (add: (defaultValue?: any) => void) => {
+  const add = () => {
+    const versions = form.getFieldValue('version_configs') || [];
+    const newVersion = {
+      version_no: '',
+      image_name: '',
+      run_command: '',
+      isBuiltin: false,
+      is_default: false
+    };
+    form.setFieldValue('version_configs', [...versions, newVersion]);
+  };
+
+  const remove = (versions: any[], index: number) => {
+    const updatedVersions = versions.filter(
+      (_: any, idx: number) => idx !== index
+    );
+    // If the removed version was the default, set the first version as default
+    if (versions[index].is_default && updatedVersions.length > 0) {
+      updatedVersions[0].is_default = true;
+    }
+    form.setFieldValue('version_configs', updatedVersions);
+  };
+
+  const handleAdd = async () => {
     try {
       const isValid = await form.validateFields(['version_configs'], {
         recursive: true
       });
-      console.log('isValid:', isValid);
+      console.log('isValid:', isValid, version_configs);
       if (isValid) {
         add();
+        setTimeout(() => {
+          setCollapseKey(new Set([version_configs?.length]));
+        }, 100);
       }
     } catch (error) {
-      console.log('Validation failed:', error);
+      const errorKey = (error as any).errorFields?.[0]?.name?.[1];
+      if (typeof errorKey === 'number') {
+        setCollapseKey(new Set([errorKey]));
+      }
     }
   };
 
   useEffect(() => {
     const versions = form.getFieldValue('version_configs') || [];
-    console.log('versions:', versions);
+
     if (Array.isArray(versions) && versions.length === 0) {
       form.setFieldValue('version_configs', versionList);
     }
   }, []);
 
+  useEffect(() => {
+    if (activeKey && activeKey.length > 0) {
+      setCollapseKey(new Set(activeKey));
+    }
+  }, [activeKey]);
+
   return (
-    <Form.List name="version_configs">
+    <>
-      {(fields, { add, remove }) => {
+      <Form.Item name="version_configs" hidden></Form.Item>
-        return (
+      <Form.Item name="build_in_version_configs" hidden></Form.Item>
-          <div
+      <div
-            style={{
+        style={{
-              display: 'flex',
+          display: 'flex',
-              flexDirection: 'column',
+          flexDirection: 'column',
-              marginBottom: '24px'
+          marginBottom: '24px'
-            }}
+        }}
-          >
+      >
-            <Title>
+        <Title>
-              <span>Version Configurations</span>
+          <span>Versions Config</span>
-              <Button
+          <Button onClick={handleAdd} variant="filled" color="default">
-                onClick={() => handleAdd(add)}
+            <PlusOutlined /> Add Version
-                variant="filled"
+          </Button>
-                color="default"
+        </Title>
-              >
+        {buildInVersionConfigs?.map((item: any, index: number) => (
-                <PlusOutlined /> Add Version
+          <>
-              </Button>
+            <VersionItemWrapper>
-            </Title>
+              <VersionItem data={item} />
-            {fields.map(({ key, name, ...restField }, index) => (
+            </VersionItemWrapper>
-              <>
+            <Divider
-                <CollapsibleContainer
+              className="divider"
-                  collapsible={true}
+              style={{
-                  key={key}
+                borderTop: '1px  dashed var(--ant-color-border)'
-                  defaultOpen
+              }}
-                  open={collapseKey.includes(String(key))}
+            />
-                  title={<span>{version_configs[name]?.version_no}</span>}
+          </>
-                  subtitle={
+        ))}
-                    version_configs[name]?.image_name && (
+        {version_configs?.map((item: any, index: number) => (
-                      <span style={{ marginLeft: 20 }}>
+          <>
-                        {version_configs[name]?.image_name}
+            <CollapsibleContainer
-                      </span>
+              collapsible={true}
-                    )
+              showExpandIcon={true}
-                  }
+              key={index}
-                  onToggle={(open) => onToggle(open, key + '')}
+              defaultOpen
-                  deleteBtn={false}
+              open={collapseKey.has(index)}
-                  right={
+              title={
-                    <div className="flex-center gap-8">
+                <Label>
-                      <span
+                  <span>Version:</span>
-                        className="flex-center"
+                  <span>{item.version_no}</span>
-                        onClick={(e) => e.stopPropagation()}
+                </Label>
-                      >
+              }
-                        {!currentData?.is_build_in && (
+              subtitle={
-                          <Form.Item
+                item.image_name && (
-                            {...restField}
+                  <ImageInner>
-                            name={[name, 'is_default']}
+                    <span>Image:</span>
-                            valuePropName="checked"
+                    <AutoTooltip ghost maxWidth={280}>
-                            initialValue={false}
+                      {item.image_name}
-                            noStyle
+                    </AutoTooltip>
-                          >
+                  </ImageInner>
-                            <Radio
+                )
-                              onChange={(e: any) =>
+              }
-                                handleSetDefaultVersion(e, index)
+              onToggle={(open) => onToggle(open, index)}
-                              }
+              deleteBtn={false}
-                            >
+              right={
-                              Default Version
+                <div className="flex-center gap-8">
-                            </Radio>
+                  <span
-                          </Form.Item>
+                    className="flex-center"
-                        )}
+                    onClick={(e) => e.stopPropagation()}
-                      </span>
-                      {(fields.length > 1 || currentData?.is_build_in) && (
-                        <Button
-                          size="small"
-                          onClick={() => remove(name)}
-                          shape="circle"
-                        >
-                          <MinusOutlined />
-                        </Button>
-                      )}
-                    </div>
-                  }
-                >
-                  <Box>
-                    <Form.Item
-                      {...restField}
-                      name={[name, 'version_no']}
-                      rules={[
-                        { required: true, message: 'Version is required' }
-                      ]}
-                    >
-                      <SealInput.Input
-                        trim
-                        label="Version"
-                        required
-                      ></SealInput.Input>
-                    </Form.Item>
-                    <Form.Item
-                      {...restField}
-                      name={[name, 'image_name']}
-                      rules={[
-                        { required: true, message: 'Image Name is required' }
-                      ]}
-                    >
-                      <SealInput.Input
-                        trim
-                        label="Image Name"
-                        required
-                      ></SealInput.Input>
-                    </Form.Item>
-                  </Box>
-                  <Form.Item
-                    name={[name, 'run_command']}
-                    {...restField}
-                    noStyle
                   >
-                    <SealInput.TextArea label="Execution Command"></SealInput.TextArea>
+                    {!currentData?.is_build_in && (
-                  </Form.Item>
+                      <Form.Item
-                </CollapsibleContainer>
+                        name={['version_configs', index, 'is_default']}
-                {index < fields.length - 1 && (
+                        valuePropName="checked"
-                  <Divider
+                        initialValue={false}
-                    className="divider"
+                        noStyle
-                    style={{ borderTop: '1px  dashed var(--ant-color-border)' }}
+                      >
-                  />
+                        <Radio
-                )}
+                          onChange={(e: any) =>
-              </>
+                            handleSetDefaultVersion(e, index)
-            ))}
+                          }
-          </div>
+                        >
-        );
+                          Default Version
-      }}
+                        </Radio>
-    </Form.List>
+                      </Form.Item>
+                    )}
+                  </span>
+                  {(version_configs.length > 1 || currentData?.is_build_in) && (
+                    <Button
+                      size="small"
+                      shape="circle"
+                      onClick={() => remove(version_configs, index)}
+                    >
+                      <MinusOutlined />
+                    </Button>
+                  )}
+                </div>
+              }
+            >
+              <Box>
+                <Form.Item
+                  name={['version_configs', index, 'version_no']}
+                  rules={[{ required: true, message: 'Version is required' }]}
+                >
+                  <SealInput.Input
+                    trim
+                    label="Version"
+                    required
+                  ></SealInput.Input>
+                </Form.Item>
+                <Form.Item
+                  name={['version_configs', index, 'image_name']}
+                  rules={[
+                    { required: true, message: 'Image Name is required' }
+                  ]}
+                >
+                  <SealInput.Input
+                    trim
+                    label="Image Name"
+                    required
+                  ></SealInput.Input>
+                </Form.Item>
+              </Box>
+              <Form.Item name={['version_configs', index, 'run_command']}>
+                <SealInput.TextArea label="Execution Command"></SealInput.TextArea>
+              </Form.Item>
+              <Form.Item
+                name={['version_configs', index, 'custom_framework']}
+                style={{ marginBottom: 0 }}
+              >
+                <SealSelect label="Framework" options={frameworks} />
+              </Form.Item>
+            </CollapsibleContainer>
+            {index < version_configs.length - 1 && (
+              <Divider
+                className="divider"
+                style={{
+                  borderTop: '1px  dashed var(--ant-color-border)'
+                }}
+              />
+            )}
+          </>
+        ))}
+      </div>
+    </>
   );
 };
 

src/pages/backends/forms/versions-form.tsx

@@ -1,11 +0,0 @@
-import { Form } from 'antd';
-import React from 'react';
-import VersionsField from './versions-config';
-
-const VersionsForm: React.FC = () => {
-  return (
-    <Form>
-      <VersionsField />
-    </Form>
-  );
-};

src/pages/backends/step-forms/basic-form.tsx

@@ -1,59 +0,0 @@
-import PageTools from '@/components/page-tools';
-import { PageActionType } from '@/config/types';
-import { useIntl } from '@umijs/max';
-import { forwardRef, useImperativeHandle, useRef } from 'react';
-import styled from 'styled-components';
-import Basic from '../forms/basic';
-
-const Title = styled.span`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-weight: 700;
-  font-size: 16px;
-  .text {
-    font-size: 20px;
-  }
-`;
-interface BasicFormProps {
-  action: PageActionType;
-  currentData?: any;
-}
-
-const BasicForm = forwardRef((props: BasicFormProps, ref) => {
-  const intl = useIntl();
-  const { action, currentData } = props;
-  const formRef = useRef<any>(null);
-
-  const handleOnFinish = (values: any) => {
-    console.log(values);
-  };
-
-  useImperativeHandle(ref, () => ({
-    validateFields: formRef.current?.validateFields,
-    getFieldsValue: formRef.current?.getFieldsValue,
-    submit: formRef.current?.submit
-  }));
-
-  return (
-    <div>
-      <PageTools
-        marginBottom={16}
-        left={
-          <Title>
-            {intl.formatMessage({ id: 'clusters.create.configBasic' })}
-          </Title>
-        }
-        marginTop={0}
-      ></PageTools>
-      <Basic
-        action={action}
-        ref={formRef}
-        onFinish={handleOnFinish}
-        currentData={currentData}
-      ></Basic>
-    </div>
-  );
-});
-
-export default BasicForm;

src/pages/backends/step-forms/module-registry.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-import BasicForm from './basic-form';
-import ParamertersForm from './parameters-form';
-import VersionConfigForm from './version-config-form';
-
-export const moduleMap = {
-  BasicForm: 'BasicForm',
-  VersionConfigForm: 'VersionConfigForm',
-  ParamertersForm: 'ParamertersForm'
-};
-
-export const moduleRegistry: Record<string, React.ComponentType<any>> = {
-  [moduleMap.BasicForm]: BasicForm,
-  [moduleMap.VersionConfigForm]: VersionConfigForm,
-  [moduleMap.ParamertersForm]: ParamertersForm
-};

src/pages/backends/step-forms/parameters-form.tsx

@@ -1,55 +0,0 @@
-import PageTools from '@/components/page-tools';
-import { PageActionType } from '@/config/types';
-import { useIntl } from '@umijs/max';
-import { forwardRef, useImperativeHandle, useRef } from 'react';
-import styled from 'styled-components';
-import Parameters from '../forms/parameters';
-
-const Title = styled.span`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-weight: 700;
-  font-size: 16px;
-  .text {
-    font-size: 20px;
-  }
-`;
-interface BasicFormProps {
-  action: PageActionType;
-  currentData?: any;
-}
-
-const ParametersForm = forwardRef((props: BasicFormProps, ref) => {
-  const intl = useIntl();
-  const { action, currentData } = props;
-  const formRef = useRef<any>(null);
-
-  const handleOnFinish = (values: any) => {
-    console.log(values);
-  };
-
-  useImperativeHandle(ref, () => ({
-    validateFields: formRef.current?.validateFields,
-    getFieldsValue: formRef.current?.getFieldsValue,
-    submit: formRef.current?.submit
-  }));
-
-  return (
-    <div>
-      <PageTools
-        marginBottom={16}
-        left={<Title>Parameters Configuration</Title>}
-        marginTop={0}
-      ></PageTools>
-      <Parameters
-        action={action}
-        ref={formRef}
-        onFinish={handleOnFinish}
-        currentData={currentData}
-      ></Parameters>
-    </div>
-  );
-});
-
-export default ParametersForm;

src/pages/backends/step-forms/use-step-list.tsx

@@ -1,65 +0,0 @@
-import { useIntl, useNavigate } from '@umijs/max';
-import { useMemoizedFn } from 'ahooks';
-import { useMemo } from 'react';
-import { moduleMap } from './module-registry';
-
-export default function useStepList() {
-  const intl = useIntl();
-  const navigate = useNavigate();
-
-  const handleBack = useMemoizedFn(() => {
-    navigate(-1);
-  });
-
-  return useMemo(
-    () => [
-      {
-        title: 'Basic Info',
-        content: '',
-        showButtons: () => {
-          return {
-            previous: false,
-            next: true,
-            save: false,
-            skip: false
-          };
-        },
-        defaultShow: true,
-        showForms: [moduleMap.BasicForm],
-        showModules: []
-      },
-      {
-        title: 'Version Configuration',
-        content: '',
-        showButtons: () => {
-          return {
-            previous: true,
-            next: true,
-            save: false,
-            skip: false
-          };
-        },
-        defaultShow: true,
-        showForms: [moduleMap.VersionConfigForm],
-        showModules: []
-      },
-      {
-        title: 'Parameters',
-        content: '',
-        showButtons: () => {
-          return {
-            previous: true,
-            next: false,
-            save: true,
-            skip: false
-          };
-        },
-        defaultShow: true,
-        showForms: [moduleMap.ParamertersForm],
-        showModules: [],
-        beforeNext: handleBack
-      }
-    ],
-    [handleBack, intl]
-  );
-}

src/pages/backends/step-forms/version-config-form.tsx

@@ -1,227 +0,0 @@
-import PageTools from '@/components/page-tools';
-import { PageActionType } from '@/config/types';
-import { PlusOutlined } from '@ant-design/icons';
-import { useIntl } from '@umijs/max';
-import { Button, FormInstance } from 'antd';
-import {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState
-} from 'react';
-import styled from 'styled-components';
-import { FormData } from '../config/types';
-import VersionsConfig from '../forms/versions-config';
-
-const PoolContainer = styled.div`
-  display: flex;
-  align-items: flex-start;
-  gap: 16px;
-`;
-
-const PoolFormWrapper = styled.div`
-  flex: 1;
-  margin-bottom: 16px;
-`;
-
-const Title = styled.span`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-weight: 700;
-  font-size: 16px;
-  .text {
-    font-size: 20px;
-  }
-`;
-interface WorkerPoolsFormProps {
-  action: PageActionType;
-  currentData?: any;
-}
-
-const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => {
-  const intl = useIntl();
-  const { action, currentData } = props;
-  const countRef = useRef(0);
-  const formRefs = useRef<Record<number, FormInstance<any> | null>>({});
-  const [activeKey, setActiveKey] = useState<Set<number>>(new Set([0]));
-  const [versionConfigs, setVersionConfigs] = useState<Map<number, FormData>>(
-    new Map([
-      [
-        0,
-        {
-          version_name: '',
-          image_name: '',
-          run_command: ''
-        }
-      ]
-    ]) as Map<number, FormData>
-  );
-
-  const handleOnFinish = (values: any) => {};
-
-  const updateCount = () => {
-    countRef.current += 1;
-    return countRef.current;
-  };
-
-  const handleAddPool = () => {
-    const newId = updateCount();
-    setVersionConfigs((prev) =>
-      new Map(prev).set(newId, {
-        name: ``
-      } as FormData)
-    );
-
-    requestAnimationFrame(() => {
-      setActiveKey((prev) => new Set([newId]));
-      window.scrollTo({
-        top: document.body.scrollHeight,
-        behavior: 'smooth'
-      });
-    });
-  };
-
-  const handleRemovePool = (id: number) => {
-    if (versionConfigs.size === 1) {
-      return;
-    }
-
-    setVersionConfigs((prev) => {
-      const newList = new Map(prev);
-      newList.delete(id);
-      return newList;
-    });
-    formRefs.current[id] = null;
-  };
-
-  const gatherFormValues = (results: PromiseSettledResult<any>[]) => {
-    const resultList = results.map((result: PromiseSettledResult<any>) => {
-      if (result.status === 'fulfilled') {
-        return result.value;
-      }
-      if (result.status === 'rejected') {
-        return result.reason?.values || {};
-      }
-      return {};
-    });
-    console.log('gatherFormValues========', resultList);
-    return resultList.filter((item) => item);
-  };
-
-  const validateFields = async () => {
-    const promises = Array.from(Object.values(formRefs.current)).map((form) =>
-      form?.validateFields()
-    );
-    const results = await Promise.allSettled(promises);
-    console.log('results========0', promises, results);
-    if (results.some((result) => result.status === 'rejected')) {
-      return Promise.reject({
-        values: {
-          worker_pools: gatherFormValues(results)
-        }
-      });
-    }
-    return Promise.resolve({
-      worker_pools: gatherFormValues(results)
-    });
-  };
-
-  const setFieldsValue = (data: any) => {
-    const worker_pools = data.worker_pools || [];
-    const newWorkerPools = worker_pools.map(
-      (poolData: FormData, index: number) => [index, poolData]
-    );
-    console.log('newWorkerPools========', newWorkerPools);
-    setVersionConfigs(new Map(newWorkerPools));
-  };
-
-  const getFieldsValue = () => {
-    const values = Object.values(formRefs.current).map((form) =>
-      form?.getFieldsValue()
-    );
-    console.log('getFieldsValue========', values);
-    return {
-      worker_pools: values
-    };
-  };
-
-  const handleOnToggle = (open: boolean, key: number) => {
-    console.log('Active keys changed:', key);
-    if (open) {
-      setActiveKey((prev) => new Set([key]));
-    } else {
-      setActiveKey((prev) => {
-        const newSet = new Set(prev);
-        newSet.delete(key);
-        return newSet;
-      });
-    }
-  };
-
-  useImperativeHandle(ref, () => ({
-    submit: () => {},
-    validateFields: validateFields,
-    getFieldsValue: getFieldsValue
-  }));
-
-  useEffect(() => {
-    if (currentData) {
-      console.log('currentData===========1=', currentData);
-      setFieldsValue(currentData);
-    }
-  }, [currentData]);
-
-  return (
-    <div>
-      <PageTools
-        marginBottom={22}
-        marginTop={0}
-        left={
-          <span className="flex-center gap-16">
-            <Title>Backend Versions</Title>
-          </span>
-        }
-        right={
-          <Button
-            onClick={handleAddPool}
-            variant="filled"
-            color="default"
-            icon={<PlusOutlined />}
-          >
-            Add Version
-          </Button>
-        }
-      ></PageTools>
-
-      {Array.from(versionConfigs.keys()).map((key, index) => (
-        <PoolContainer key={key}>
-          <PoolFormWrapper>
-            <VersionsConfig
-              name={`versionForm_${key}`}
-              action={action}
-              ref={(el: any) => {
-                if (el) {
-                  formRefs.current[key] = el;
-                }
-              }}
-              collapseProps={{
-                collapsible: true,
-                open: activeKey.has(key),
-                defaultOpen: activeKey.has(key),
-                onToggle: (open: boolean) => handleOnToggle(open, key)
-              }}
-              showDelete={versionConfigs.size > 1}
-              onFinish={handleOnFinish}
-              currentData={versionConfigs.get(key)}
-              onDelete={() => handleRemovePool(key)}
-            ></VersionsConfig>
-          </PoolFormWrapper>
-        </PoolContainer>
-      ))}
-    </div>
-  );
-});
-
-export default WorkerPoolsForm;