fix: custom versin configs
This commit is contained in:
jialin
@@ -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
|
||||
rotate={isOpen ? 180 : 0}
|
||||
type="icon-down"
|
||||
style={{
|
||||
cursor: disabled ? 'not-allowed' : 'pointer',
|
||||
fontSize: 12
|
||||
}}
|
||||
/>
|
||||
{showExpandIcon && (
|
||||
<IconFont
|
||||
rotate={isOpen ? 180 : 0}
|
||||
type="icon-down"
|
||||
style={{
|
||||
cursor: disabled ? 'not-allowed' : 'pointer',
|
||||
fontSize: 12
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{title && <div>{title}</div>}
|
||||
</div>
|
||||
{subtitle && <div className={styles.subtitle}>{subtitle}</div>}
|
||||
|
||||
@@ -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;
|
||||
@@ -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:
|
||||
values.build_in_version_configs?.[key]?.backend_list || [],
|
||||
build_in_frameworks:
|
||||
values.build_in_version_configs?.[key]?.build_in_frameworks || [],
|
||||
is_built_in: true
|
||||
}));
|
||||
|
||||
|
||||
@@ -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'
|
||||
],
|
||||
[]
|
||||
);
|
||||
|
||||
|
||||
@@ -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:
|
||||
currentData.build_in_version_configs[key].backend_list || [],
|
||||
build_in_frameworks:
|
||||
currentData.build_in_version_configs[key].build_in_frameworks || [],
|
||||
is_built_in: true
|
||||
}));
|
||||
form.setFieldsValue({
|
||||
|
||||
@@ -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
|
||||
`;
|
||||
|
||||
@@ -36,12 +36,9 @@
|
||||
"type": ["string", "null"],
|
||||
"description": "start command"
|
||||
},
|
||||
"backend_list": {
|
||||
"type": "array",
|
||||
"items": {
|
||||
"type": "string"
|
||||
},
|
||||
"description": "backend list"
|
||||
"custom_framework": {
|
||||
"type": ["string", "null"],
|
||||
"description": "custom framework"
|
||||
}
|
||||
},
|
||||
"required": ["image_name", "run_command"],
|
||||
|
||||
@@ -27,12 +27,9 @@
|
||||
"type": ["string", "null"],
|
||||
"description": "start command"
|
||||
},
|
||||
"backend_list": {
|
||||
"type": "array",
|
||||
"items": {
|
||||
"type": "string"
|
||||
},
|
||||
"description": "backend list"
|
||||
"custom_framework": {
|
||||
"type": ["string", "null"],
|
||||
"description": "custom framework"
|
||||
}
|
||||
},
|
||||
"required": ["image_name", "run_command"],
|
||||
|
||||
@@ -31,12 +31,9 @@
|
||||
"type": ["string", "null"],
|
||||
"description": "start command"
|
||||
},
|
||||
"backend_list": {
|
||||
"type": "array",
|
||||
"items": {
|
||||
"type": "string"
|
||||
},
|
||||
"description": "backend list"
|
||||
"custom_framework": {
|
||||
"type": ["string", "null"],
|
||||
"description": "custom framework"
|
||||
}
|
||||
},
|
||||
"required": ["image_name", "run_command"],
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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) {
|
||||
setActiveKey([...new Set([...activeKey, 'version_configs'])]);
|
||||
if (versionError) {
|
||||
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>
|
||||
|
||||
<CollapsePanel
|
||||
<VersionsForm
|
||||
action={action}
|
||||
currentData={currentData}
|
||||
activeKey={activeKey}
|
||||
accordion={false}
|
||||
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>
|
||||
></VersionsForm>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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`
|
||||
line-height: 1;
|
||||
color: var(--ant-color-text-tertiary);
|
||||
margin-bottom: 20px;
|
||||
font-size: var(--font-size-base);
|
||||
const VersionItemWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
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) => {
|
||||
setCollapseKey(open ? [key] : []);
|
||||
const onToggle = (open: boolean, key: number) => {
|
||||
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 }) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
marginBottom: '24px'
|
||||
}}
|
||||
>
|
||||
<Title>
|
||||
<span>Version Configurations</span>
|
||||
<Button
|
||||
onClick={() => handleAdd(add)}
|
||||
variant="filled"
|
||||
color="default"
|
||||
>
|
||||
<PlusOutlined /> Add Version
|
||||
</Button>
|
||||
</Title>
|
||||
{fields.map(({ key, name, ...restField }, index) => (
|
||||
<>
|
||||
<CollapsibleContainer
|
||||
collapsible={true}
|
||||
key={key}
|
||||
defaultOpen
|
||||
open={collapseKey.includes(String(key))}
|
||||
title={<span>{version_configs[name]?.version_no}</span>}
|
||||
subtitle={
|
||||
version_configs[name]?.image_name && (
|
||||
<span style={{ marginLeft: 20 }}>
|
||||
{version_configs[name]?.image_name}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
onToggle={(open) => onToggle(open, key + '')}
|
||||
deleteBtn={false}
|
||||
right={
|
||||
<div className="flex-center gap-8">
|
||||
<span
|
||||
className="flex-center"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{!currentData?.is_build_in && (
|
||||
<Form.Item
|
||||
{...restField}
|
||||
name={[name, 'is_default']}
|
||||
valuePropName="checked"
|
||||
initialValue={false}
|
||||
noStyle
|
||||
>
|
||||
<Radio
|
||||
onChange={(e: any) =>
|
||||
handleSetDefaultVersion(e, index)
|
||||
}
|
||||
>
|
||||
Default Version
|
||||
</Radio>
|
||||
</Form.Item>
|
||||
)}
|
||||
</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
|
||||
<>
|
||||
<Form.Item name="version_configs" hidden></Form.Item>
|
||||
<Form.Item name="build_in_version_configs" hidden></Form.Item>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
marginBottom: '24px'
|
||||
}}
|
||||
>
|
||||
<Title>
|
||||
<span>Versions Config</span>
|
||||
<Button onClick={handleAdd} variant="filled" color="default">
|
||||
<PlusOutlined /> Add Version
|
||||
</Button>
|
||||
</Title>
|
||||
{buildInVersionConfigs?.map((item: any, index: number) => (
|
||||
<>
|
||||
<VersionItemWrapper>
|
||||
<VersionItem data={item} />
|
||||
</VersionItemWrapper>
|
||||
<Divider
|
||||
className="divider"
|
||||
style={{
|
||||
borderTop: '1px dashed var(--ant-color-border)'
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
))}
|
||||
{version_configs?.map((item: any, index: number) => (
|
||||
<>
|
||||
<CollapsibleContainer
|
||||
collapsible={true}
|
||||
showExpandIcon={true}
|
||||
key={index}
|
||||
defaultOpen
|
||||
open={collapseKey.has(index)}
|
||||
title={
|
||||
<Label>
|
||||
<span>Version:</span>
|
||||
<span>{item.version_no}</span>
|
||||
</Label>
|
||||
}
|
||||
subtitle={
|
||||
item.image_name && (
|
||||
<ImageInner>
|
||||
<span>Image:</span>
|
||||
<AutoTooltip ghost maxWidth={280}>
|
||||
{item.image_name}
|
||||
</AutoTooltip>
|
||||
</ImageInner>
|
||||
)
|
||||
}
|
||||
onToggle={(open) => onToggle(open, index)}
|
||||
deleteBtn={false}
|
||||
right={
|
||||
<div className="flex-center gap-8">
|
||||
<span
|
||||
className="flex-center"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<SealInput.TextArea label="Execution Command"></SealInput.TextArea>
|
||||
</Form.Item>
|
||||
</CollapsibleContainer>
|
||||
{index < fields.length - 1 && (
|
||||
<Divider
|
||||
className="divider"
|
||||
style={{ borderTop: '1px dashed var(--ant-color-border)' }}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
{!currentData?.is_build_in && (
|
||||
<Form.Item
|
||||
name={['version_configs', index, 'is_default']}
|
||||
valuePropName="checked"
|
||||
initialValue={false}
|
||||
noStyle
|
||||
>
|
||||
<Radio
|
||||
onChange={(e: any) =>
|
||||
handleSetDefaultVersion(e, index)
|
||||
}
|
||||
>
|
||||
Default Version
|
||||
</Radio>
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
@@ -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;
|
||||
@@ -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
|
||||
};
|
||||
@@ -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;
|
||||
@@ -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]
|
||||
);
|
||||
}
|
||||
@@ -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;
|
||||
Reference in New Issue
Block a user