- {params?.map((param: SupportModelParams) => (
+ {params?.map((param: ConfigurableParams) => (
{param.label || param.param_name}}
@@ -122,4 +135,4 @@ function ModelParams({ params, form }: { params: Array | nul
);
}
-export default ModelParams;
+export default ConfigurableForm;
diff --git a/web/components/model/nested-form-fields.tsx b/web/components/common/nested-form-fields.tsx
similarity index 95%
rename from web/components/model/nested-form-fields.tsx
rename to web/components/common/nested-form-fields.tsx
index 734f470f3..b286338b5 100644
--- a/web/components/model/nested-form-fields.tsx
+++ b/web/components/common/nested-form-fields.tsx
@@ -1,10 +1,10 @@
-import { SupportModelParams } from '@/types/model';
+import { ConfigurableParams } from '@/types/common';
import { Checkbox, Form, FormInstance, Input, InputNumber, Select } from 'antd';
import React, { useEffect, useState } from 'react';
interface NestedFormFieldsProps {
parentName: string;
- fields: Record;
+ fields: Record;
form: FormInstance;
}
const NestedFormFields: React.FC = ({ parentName, fields, form }) => {
@@ -39,7 +39,7 @@ const NestedFormFields: React.FC = ({ parentName, fields,
});
};
- const renderFormItem = (param: SupportModelParams) => {
+ const renderFormItem = (param: ConfigurableParams) => {
const type = param.param_type.toLowerCase();
// Use the complete field path
const fieldPath = [parentName, param.param_name];
diff --git a/web/components/database/database-form.tsx b/web/components/database/database-form.tsx
new file mode 100644
index 000000000..638c8fa15
--- /dev/null
+++ b/web/components/database/database-form.tsx
@@ -0,0 +1,149 @@
+import { apiInterceptors, postDbAdd, postDbEdit, postDbTestConnect } from '@/client/api';
+import { ConfigurableParams } from '@/types/common';
+import { DBOption, DBType } from '@/types/db';
+import { Button, Form, Input, Select, message } from 'antd';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import ConfigurableForm from '../common/configurable-form';
+
+const { Option } = Select;
+const FormItem = Form.Item;
+
+interface DatabaseFormProps {
+ onCancel: () => void;
+ onSuccess: () => void;
+ dbTypeList: DBOption[];
+ editValue?: string;
+ choiceDBType?: DBType;
+ getFromRenderData?: ConfigurableParams[];
+ dbNames?: string[];
+ description?: string; // Add description prop
+}
+
+function DatabaseForm({
+ onCancel,
+ onSuccess,
+ dbTypeList,
+ editValue,
+ choiceDBType,
+ getFromRenderData,
+ dbNames = [],
+ description = '', // Default value for description
+}: DatabaseFormProps) {
+ const { t } = useTranslation();
+ const [form] = Form.useForm();
+ const [loading, setLoading] = useState(false);
+ const [selectedType, setSelectedType] = useState(choiceDBType);
+ const [params, setParams] = useState | null>(getFromRenderData || null);
+ console.log('dbTypeList', dbTypeList);
+ console.log('editValue', editValue);
+ console.log('choiceDBType', choiceDBType);
+
+ useEffect(() => {
+ if (choiceDBType) {
+ setSelectedType(choiceDBType);
+ }
+ }, [choiceDBType]);
+
+ useEffect(() => {
+ if (editValue && getFromRenderData) {
+ setParams(getFromRenderData);
+ // set description
+ form.setFieldValue('description', description);
+ }
+ }, [editValue, getFromRenderData, description, form]);
+
+ const handleTypeChange = (value: DBType) => {
+ setSelectedType(value);
+ form.resetFields(['params']);
+
+ const selectedDBType = dbTypeList.find(type => type.value === value);
+ if (selectedDBType?.parameters) {
+ setParams(selectedDBType.parameters);
+ }
+ };
+
+ const handleSubmit = async (formValues: any) => {
+ try {
+ setLoading(true);
+
+ console.log('dbNames:', dbNames);
+
+ // Check if database name is duplicated
+ // if (!editValue && dbNames.includes(values.database)) {
+ // message.error(t('database_name_exists'));
+ // return;
+ // }
+
+ const { description, type, ...values } = formValues;
+
+ const data = {
+ type: selectedType,
+ params: values,
+ description: description || '',
+ };
+
+ // If in edit mode, add id
+ if (editValue) {
+ data.id = editValue;
+ }
+
+ console.log('Form submitted:', data);
+
+ const [testErr] = await apiInterceptors(postDbTestConnect(data));
+ if (testErr) return;
+ const [err] = await apiInterceptors((editValue ? postDbEdit : postDbAdd)(data));
+ if (err) {
+ message.error(err.message);
+ return;
+ }
+ message.success(t(editValue ? 'update_success' : 'create_success'));
+ onSuccess?.();
+ } catch (error) {
+ console.error('Failed to submit form:', error);
+ message.error(t(editValue ? 'update_failed' : 'create_failed'));
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+
+ );
+}
+
+export default DatabaseForm;
diff --git a/web/components/database/form-dialog.tsx b/web/components/database/form-dialog.tsx
index b1f6e183b..1eb095d75 100644
--- a/web/components/database/form-dialog.tsx
+++ b/web/components/database/form-dialog.tsx
@@ -1,217 +1,54 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import { addOmcDB, apiInterceptors, getSupportDBList, postDbAdd, postDbEdit, postDbTestConnect } from '@/client/api';
-import { isFileDb } from '@/pages/construct/database';
-import { DBOption, DBType, DbListResponse, PostDbParams } from '@/types/db';
-import { useDebounceFn } from 'ahooks';
-import { Button, Form, Input, InputNumber, Modal, Select, Spin, Tooltip, message } from 'antd';
-import { useEffect, useMemo, useState } from 'react';
+import { ConfigurableParams } from '@/types/common';
+import { DBOption, DBType } from '@/types/db';
+import { Modal } from 'antd';
import { useTranslation } from 'react-i18next';
+import DatabaseForm from './database-form';
-type DBItem = DbListResponse[0] & { db_arn?: string };
-
-interface Props {
- dbTypeList: DBOption[];
+interface NewFormDialogProps {
open: boolean;
+ onClose: () => void;
+ onSuccess: () => void;
+ dbTypeList: DBOption[];
+ editValue?: string;
choiceDBType?: DBType;
- editValue?: DBItem;
- dbNames: string[];
- onSuccess?: () => void;
- onClose?: () => void;
+ getFromRenderData?: ConfigurableParams[];
+ dbNames?: string[];
+ dbTypeData?: DBOption[];
+ description?: string;
}
-function FormDialog({ open, choiceDBType, dbTypeList, editValue, dbNames, onClose, onSuccess }: Props) {
- const [loading, setLoading] = useState(false);
+function FormDialog({
+ open,
+ onClose,
+ onSuccess,
+ dbTypeList,
+ editValue,
+ choiceDBType,
+ getFromRenderData,
+ dbNames,
+ description,
+}: NewFormDialogProps) {
const { t } = useTranslation();
- const [form] = Form.useForm();
- const dbType = Form.useWatch('db_type', form);
- const [omcDBList, setOmcDBList] = useState([]);
- const [omcListLoading, setOmcListLoading] = useState(false);
- const fileDb = useMemo(() => isFileDb(dbTypeList, dbType), [dbTypeList, dbType]);
- useEffect(() => {
- if (choiceDBType) {
- form.setFieldValue('db_type', choiceDBType);
- }
- }, [choiceDBType]);
-
- useEffect(() => {
- if (editValue) {
- form.setFieldsValue({ ...editValue });
- if (editValue.db_type === 'omc') {
- form.setFieldValue('db_arn', editValue.db_path);
- }
- }
- }, [editValue]);
-
- useEffect(() => {
- if (!open) {
- form.resetFields();
- }
- }, [open]);
-
- const onFinish = async (val: DBItem) => {
- const { db_host, db_path, db_port, db_type, ...params } = val;
- setLoading(true);
-
- if (db_type === 'omc') {
- const item = omcDBList?.find((item: any) => item.arn === val.db_name) as any;
-
- try {
- const [err] = await apiInterceptors(
- addOmcDB({
- db_type: 'omc',
- file_path: val.db_arn || '',
- comment: val.comment,
- db_name: item?.dbName || val.db_name,
- }),
- );
- if (err) {
- message.error(err.message);
- return;
- }
- message.success('success');
- onSuccess?.();
- } catch (e: any) {
- message.error(e.message);
- } finally {
- setLoading(false);
- }
- }
- if (!editValue && dbNames.some(item => item === params.db_name)) {
- message.error('The database already exists!');
- return;
- }
- const data: PostDbParams = {
- db_host: fileDb ? undefined : db_host,
- db_port: fileDb ? undefined : db_port,
- db_type: db_type,
- file_path: fileDb ? db_path : undefined,
- ...params,
- };
- try {
- const [testErr] = await apiInterceptors(postDbTestConnect(data));
- if (testErr) return;
- const [err] = await apiInterceptors((editValue ? postDbEdit : postDbAdd)(data));
- if (err) {
- message.error(err.message);
- return;
- }
- message.success('success');
- onSuccess?.();
- } catch (e: any) {
- message.error(e.message);
- } finally {
- setLoading(false);
- }
- };
-
- const { run: fetchOmcList } = useDebounceFn(
- async (name: string) => {
- setOmcListLoading(true);
- const [_, data = []] = (await apiInterceptors(getSupportDBList(name))) as any;
- setOmcListLoading(false);
-
- setOmcDBList(data.map((item: any) => ({ ...item, label: item.dbName, value: item.arn })));
- },
- {
- wait: 500,
- },
- );
-
- const lockDBType = useMemo(() => !!editValue || !!choiceDBType, [editValue, choiceDBType]);
return (
-