github/DB-GPT
1
0
Fork 0
mirror of https://github.com/csunny/DB-GPT.git synced 2025-09-06 19:40:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): Unified frontend code style (#1923)

Browse Source 
Co-authored-by: Fangyin Cheng <staneyffer@gmail.com>
Co-authored-by: 谨欣 <echo.cmy@antgroup.com>
Co-authored-by: 严志勇 <yanzhiyong@tiansuixiansheng.com>
Co-authored-by: yanzhiyong <932374019@qq.com>
This commit is contained in:
Dreammy23
2024-08-30 14:03:06 +08:00
committed by GitHub
parent f866580703
commit 471689ba20
247 changed files with 4960 additions and 4546 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
web/components/database/form-dialog.tsx
View File

@@ -1,11 +1,11 @@
/* 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 { addOmcDB, apiInterceptors, getSupportDBList, postDbAdd, postDbEdit, postDbTestConnect } from '@/client/api';
import { DBOption, DBType, DbListResponse, PostDbParams } from '@/types/db';
import { isFileDb } from '@/pages/construct/database';
import { useTranslation } from 'react-i18next';
import { useDebounceFn } from 'ahooks';
type DBItem = DbListResponse[0] & { db_arn?: string };
@@ -77,7 +77,7 @@ function FormDialog({ open, choiceDBType, dbTypeList, editValue, dbNames, onClos
setLoading(false);
}
}
if (!editValue && dbNames.some((item) => item === params.db_name)) {
if (!editValue && dbNames.some(item => item === params.db_name)) {
message.error('The database already exists!');
return;
}
@@ -104,11 +104,11 @@ function FormDialog({ open, choiceDBType, dbTypeList, editValue, dbNames, onClos
setLoading(false);
}
};
console.log(form.getFieldValue('db_type'));
const { run: fetchOmcList } = useDebounceFn(
async (name: string) => {
setOmcListLoading(true);
const [error, data = []] = (await apiInterceptors(getSupportDBList(name))) as any;
const [_, data = []] = (await apiInterceptors(getSupportDBList(name))) as any;
setOmcListLoading(false);
setOmcDBList(data.map((item: any) => ({ ...item, label: item.dbName, value: item.arn })));
@@ -117,47 +117,51 @@ function FormDialog({ open, choiceDBType, dbTypeList, editValue, dbNames, onClos
wait: 500,
},
);
console.log('omcDBList', omcDBList);
const lockDBType = useMemo(() => !!editValue || !!choiceDBType, [editValue, choiceDBType]);
return (
<Modal open={open} width={800} title={editValue ? t('Edit') : t('create_database')} maskClosable={false} footer={null} onCancel={onClose}>
<Form form={form} className="pt-2" labelCol={{ span: 6 }} labelAlign="left" onFinish={onFinish}>
<Form.Item name="db_type" label="DB Type" className="mb-6" rules={[{ required: true }]}>
<Modal
open={open}
width={800}
title={editValue ? t('Edit') : t('create_database')}
maskClosable={false}
footer={null}
onCancel={onClose}
>
<Form form={form} className='pt-2' labelCol={{ span: 6 }} labelAlign='left' onFinish={onFinish}>
<Form.Item name='db_type' label='DB Type' className='mb-6' rules={[{ required: true }]}>
<Select aria-readonly={lockDBType} disabled={lockDBType} options={dbTypeList} />
</Form.Item>
{form.getFieldValue('db_type') === 'omc' ? (
<Form.Item name="db_name" label="DB Name" className="mb-6" rules={[{ required: true }]}>
<Form.Item name='db_name' label='DB Name' className='mb-6' rules={[{ required: true }]}>
<Select
optionRender={(option, { index }) => {
const item = omcDBList[index] as any;
return (
<div key={option.value} className="flex flex-col">
<span className="text-[18px]">{item?.dbName}</span>
<div key={option.value} className='flex flex-col'>
<span className='text-[18px]'>{item?.dbName}</span>
<span>
<span>env: </span>
<span className="text-gray-500">{item.env}</span>
<span className='text-gray-500'>{item.env}</span>
</span>
<span>
<span>account: </span>
<span className="text-gray-500">{item.account}</span>
<span className='text-gray-500'>{item.account}</span>
</span>
<span>
<span>searchName: </span>
<Tooltip title={item.searchName}>
<span className="text-gray-500">{item.searchName}</span>
<span className='text-gray-500'>{item.searchName}</span>
</Tooltip>
</span>
</div>
);
}}
notFoundContent={omcListLoading ? <Spin size="small" /> : null}
notFoundContent={omcListLoading ? <Spin size='small' /> : null}
showSearch
options={omcDBList}
onSearch={fetchOmcList}
onSelect={(searchName) => {
console.log(searchName, 'searchName');
onSelect={searchName => {
const item = omcDBList?.find((item: any) => item.value === searchName) as any;
form.setFieldsValue({
db_arn: item?.arn,
@@ -166,44 +170,44 @@ function FormDialog({ open, choiceDBType, dbTypeList, editValue, dbNames, onClos
/>
</Form.Item>
) : (
<Form.Item name="db_name" label="DB Name" className="mb-6" rules={[{ required: true }]}>
<Form.Item name='db_name' label='DB Name' className='mb-3' rules={[{ required: true }]}>
<Input readOnly={!!editValue} disabled={!!editValue} />
</Form.Item>
)}
{fileDb === true && (
<Form.Item name="db_path" label="Path" className="mb-6" rules={[{ required: true }]}>
<Form.Item name='db_path' label='Path' className='mb-6' rules={[{ required: true }]}>
<Input />
</Form.Item>
)}
{fileDb === false && form.getFieldValue('db_type') !== 'omc' && (
<>
<Form.Item name="db_user" label="Username" className="mb-6" rules={[{ required: true }]}>
<Form.Item name='db_user' label='Username' className='mb-6' rules={[{ required: true }]}>
<Input />
</Form.Item>
<Form.Item name="db_pwd" label="Password" className="mb-6" rules={[{ required: false }]}>
<Input type="password" />
<Form.Item name='db_pwd' label='Password' className='mb-6' rules={[{ required: false }]}>
<Input type='password' />
</Form.Item>
<Form.Item name="db_host" label="Host" className="mb-6" rules={[{ required: true }]}>
<Form.Item name='db_host' label='Host' className='mb-6' rules={[{ required: true }]}>
<Input />
</Form.Item>
<Form.Item name="db_port" label="Port" className="mb-6" rules={[{ required: true }]}>
<Form.Item name='db_port' label='Port' className='mb-6' rules={[{ required: true }]}>
<InputNumber min={1} step={1} max={65535} />
</Form.Item>
</>
)}
{form.getFieldValue('db_type') === 'omc' && (
<Form.Item name="db_arn" label="Arn" className="mb-6" rules={[{ required: true }]}>
<Form.Item name='db_arn' label='Arn' className='mb-6' rules={[{ required: true }]}>
<Input />
</Form.Item>
)}
<Form.Item name="comment" label="Remark" className="mb-6">
<Form.Item name='comment' label='Remark' className='mb-6'>
<Input />
</Form.Item>
<Form.Item className="flex flex-row-reverse pt-1 mb-0">
<Button htmlType="submit" type="primary" size="middle" className="mr-1" loading={loading}>
<Form.Item className='flex flex-row-reverse pt-1 mb-0'>
<Button htmlType='submit' type='primary' size='middle' className='mr-1' loading={loading}>
Save
</Button>
<Button size="middle" onClick={onClose}>
<Button size='middle' onClick={onClose}>
Cancel
</Button>
</Form.Item>