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

     1  import React from 'react'
     2  import { useTranslation } from 'react-i18next'
     3  
     4  import { Form, Input, Button, InputNumber } from '~/uikit'
     5  import { StepCompnent } from '~/components/CreateOrUpdateTask/shared'
     6  
     7  const TargetInfo: StepCompnent = ({ prev, initialValues }) => {
     8    const [t] = useTranslation()
     9    return (
    10      <Form
    11        wrapperCol={{ span: 16 }}
    12        labelCol={{ span: 4 }}
    13        initialValues={initialValues}
    14        validateTrigger="onBlur"
    15        name="targetInfo"
    16      >
    17        <div className="flex">
    18          <div className="flex-1">
    19            <Form.Item
    20              label={t('host')}
    21              name={['target_config', 'host']}
    22              tooltip={t('create task target host tooltip')}
    23              rules={[{ required: true, message: t('host is required') }]}
    24            >
    25              <Input placeholder="1.1.1.1" />
    26            </Form.Item>
    27  
    28            <Form.Item
    29              label={t('port')}
    30              name={['target_config', 'port']}
    31              tooltip={t('create task target port tooltip')}
    32              rules={[{ required: true, message: t('port is required') }]}
    33            >
    34              <InputNumber min={1} max={65535} />
    35            </Form.Item>
    36  
    37            <Form.Item
    38              label={t('user name')}
    39              name={['target_config', 'user']}
    40              tooltip={t('create task target user tooltip')}
    41              rules={[
    42                {
    43                  required: true,
    44                  whitespace: true,
    45                  message: t('user name is required'),
    46                },
    47              ]}
    48            >
    49              <Input placeholder="root" />
    50            </Form.Item>
    51  
    52            <Form.Item
    53              label={t('password')}
    54              tooltip={t('create task target password tooltip')}
    55              name={['target_config', 'password']}
    56            >
    57              <Input type="password" />
    58            </Form.Item>
    59          </div>
    60          <div className="flex-1">
    61            <Form.Item
    62              label="SSL CA"
    63              name={['target_config', 'security', 'ssl_ca_content']}
    64            >
    65              <Input.TextArea />
    66            </Form.Item>
    67  
    68            <Form.Item
    69              label="SSL CERT"
    70              name={['target_config', 'security', 'ssl_cert_content']}
    71            >
    72              <Input.TextArea />
    73            </Form.Item>
    74  
    75            <Form.Item
    76              label="SSL KEY"
    77              name={['target_config', 'security', 'ssl_key_content']}
    78            >
    79              <Input.TextArea />
    80            </Form.Item>
    81          </div>
    82        </div>
    83        <Form.Item>
    84          <Button className="mr-4" onClick={prev}>
    85            {t('previous')}
    86          </Button>
    87          <Button type="primary" htmlType="submit">
    88            {t('next')}
    89          </Button>
    90        </Form.Item>
    91      </Form>
    92    )
    93  }
    94  
    95  export default TargetInfo