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

     1  import React from 'react'
     2  import { useTranslation } from 'react-i18next'
     3  import { useNavigate } from 'react-router-dom'
     4  
     5  import { Form, Input, Select, Button } from '~/uikit'
     6  import { TaskMode, TaskShardMode } from '~/models/task'
     7  import { StepCompnent } from '~/components/CreateOrUpdateTask/shared'
     8  
     9  const BasicInfo: StepCompnent = ({ initialValues, isEditing }) => {
    10    const [t] = useTranslation()
    11    const navigate = useNavigate()
    12  
    13    return (
    14      <Form
    15        wrapperCol={{ span: 16 }}
    16        labelCol={{ span: 4 }}
    17        name="basicInfo"
    18        initialValues={initialValues}
    19      >
    20        <Form.Item
    21          label={t('task name')}
    22          required
    23          name="name"
    24          tooltip={t('create task name tooltip')}
    25          rules={[
    26            {
    27              required: true,
    28              whitespace: true,
    29              message: t('task name is required'),
    30            },
    31          ]}
    32        >
    33          <Input placeholder="task 1" disabled={isEditing} />
    34        </Form.Item>
    35  
    36        <Form.Item
    37          label={t('task mode')}
    38          name="task_mode"
    39          tooltip={
    40            <div className="whitespace-pre-line">
    41              {t('create task mode tooltip')}
    42            </div>
    43          }
    44        >
    45          <Select placeholder="all" disabled={isEditing}>
    46            {Object.values(TaskMode).map(mode => (
    47              <Select.Option key={mode} value={mode}>
    48                {mode}
    49              </Select.Option>
    50            ))}
    51          </Select>
    52        </Form.Item>
    53  
    54        <Form.Item
    55          label={t('task shard mode')}
    56          name="shard_mode"
    57          tooltip={
    58            <div className="whitespace-pre-line">
    59              {t('create task shard mode tooltip')}
    60            </div>
    61          }
    62        >
    63          <Select placeholder={TaskShardMode.PESSIMISTIC}>
    64            {Object.values(TaskShardMode).map(mode => (
    65              <Select.Option key={mode} value={mode}>
    66                {mode}
    67              </Select.Option>
    68            ))}
    69          </Select>
    70        </Form.Item>
    71  
    72        <Form.Item
    73          label={t('meta db')}
    74          name="meta_schema"
    75          tooltip={t('create task meta db tooltip')}
    76        >
    77          <Input placeholder="dm_meta" disabled={isEditing} />
    78        </Form.Item>
    79  
    80        <Form.Item
    81          label={t('data dir')}
    82          tooltip={t('create task data_dir tooltip')}
    83          name={['source_config', 'full_migrate_conf', 'data_dir']}
    84        >
    85          <Input placeholder="./dump_data " />
    86        </Form.Item>
    87  
    88        <Form.Item>
    89          <Button className="mr-4" onClick={() => navigate('/migration/task')}>
    90            {t('cancel')}
    91          </Button>
    92  
    93          <Button type="primary" htmlType="submit">
    94            {t('next')}
    95          </Button>
    96        </Form.Item>
    97      </Form>
    98    )
    99  }
   100  
   101  export default BasicInfo