github.com/pingcap/tiflow@v0.0.0-20240520035814-5bf52d54e205/dm/ui/src/components/CreateOrUpdateSource/index.tsx (about)

     1  import React, { useEffect, useMemo } from 'react'
     2  import { useTranslation } from 'react-i18next'
     3  
     4  import { Form, Row, Col, Button, Input, InputNumber, Switch } from '~/uikit'
     5  import { Source } from '~/models/source'
     6  
     7  const defaultFormValues: Partial<Source> = {
     8    source_name: '',
     9    host: '',
    10    port: 3306,
    11    password: '',
    12    enable_gtid: false,
    13    enable: false,
    14  
    15    relay_config: {
    16      enable_relay: false,
    17    },
    18  }
    19  
    20  const CreateOrUpdateSource: React.FC<{
    21    onSubmit?: (values: Source) => void
    22    onCancel?: () => void
    23    currentSource?: Source | null
    24  }> = ({ onCancel, onSubmit, currentSource }) => {
    25    const [t] = useTranslation()
    26    const initialValues = useMemo(
    27      () => ({ ...defaultFormValues, ...currentSource }),
    28      [currentSource]
    29    )
    30    const [form] = Form.useForm()
    31  
    32    useEffect(() => {
    33      form.resetFields()
    34    }, [initialValues])
    35  
    36    return (
    37      <Form
    38        layout="vertical"
    39        form={form}
    40        onFinish={onSubmit}
    41        initialValues={initialValues}
    42      >
    43        <Row gutter={32}>
    44          <Col span={12}>
    45            <section>
    46              <h1 className="font-bold text-lg">{t('basic info')}</h1>
    47              <Form.Item
    48                name="source_name"
    49                label={t('source name')}
    50                tooltip={t('source form name tooltip')}
    51                rules={[
    52                  { required: true, message: t('source name is required') },
    53                ]}
    54              >
    55                <Input
    56                  placeholder="mysql-01"
    57                  disabled={!!initialValues.source_name}
    58                />
    59              </Form.Item>
    60  
    61              <Form.Item
    62                name="host"
    63                label={t('host')}
    64                tooltip={t('source form host tooltip')}
    65                rules={[{ required: true, message: t('host is required') }]}
    66              >
    67                <Input placeholder="1.1.1.1" />
    68              </Form.Item>
    69  
    70              <Form.Item
    71                name="port"
    72                label={t('port')}
    73                rules={[{ required: true, message: t('port is required') }]}
    74              >
    75                <InputNumber placeholder="3306" />
    76              </Form.Item>
    77  
    78              <Form.Item
    79                name="user"
    80                label={t('user name')}
    81                tooltip={t('source form user tooltip')}
    82                rules={[{ required: true, message: t('user name is required') }]}
    83              >
    84                <Input placeholder="root" />
    85              </Form.Item>
    86  
    87              <Form.Item
    88                name="password"
    89                label={t('password')}
    90                tooltip={t('source form password tooltip')}
    91                rules={[{ required: true, message: t('password is required') }]}
    92              >
    93                <Input type="password" />
    94              </Form.Item>
    95  
    96              <Form.Item
    97                name="enable_gtid"
    98                label="GTID"
    99                valuePropName="checked"
   100                tooltip={t('source form gtid tooltip')}
   101              >
   102                <Switch defaultChecked={false} />
   103              </Form.Item>
   104            </section>
   105          </Col>
   106  
   107          <Col span={12}>
   108            <section>
   109              <h1 className="font-bold text-lg">{t('tls config (optional)')}</h1>
   110              <Form.Item name={['security', 'ssl_ca_content']} label="SSL CA">
   111                <Input.TextArea placeholder="ca.pem" />
   112              </Form.Item>
   113  
   114              <Form.Item name={['security', 'ssl_cert_content']} label="SSL CERT">
   115                <Input.TextArea placeholder="cert.pem" />
   116              </Form.Item>
   117  
   118              <Form.Item name={['security', 'ssl_key_content']} label="SSL KEY">
   119                <Input.TextArea placeholder="key.pem" />
   120              </Form.Item>
   121            </section>
   122  
   123            <section>
   124              <h1 className="font-bold text-lg">
   125                {t('relay config (optional)')}
   126              </h1>
   127              <Form.Item
   128                name={['relay_config', 'enable_relay']}
   129                label={t('enable relay')}
   130                valuePropName="checked"
   131              >
   132                <Switch defaultChecked={false} />
   133              </Form.Item>
   134            </section>
   135          </Col>
   136        </Row>
   137  
   138        <div className="flex items-center justify-end p-4">
   139          <Button onClick={onCancel} className="!mr-4">
   140            {t('cancel')}
   141          </Button>
   142          <Button type="primary" htmlType="submit">
   143            {t('save')}
   144          </Button>
   145        </div>
   146      </Form>
   147    )
   148  }
   149  
   150  export default CreateOrUpdateSource