Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(integrationCenter): add integration center module (#683)
* feat(integrationCenter): add integration center module * feat(integrationCenter): modify mock data && i18 * feat(integrationCenter): fix detail
- Loading branch information
1 parent
2cf3d28
commit 1aa32bd
Showing
9 changed files
with
291 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,147 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { Form, Select, Input, Button } from 'antd'; | ||
|
|
||
| const FormItem = Form.Item; | ||
| const Option = Select.Option; | ||
| const formMap = { | ||
| git: [ | ||
| { | ||
| label: 'URL', | ||
| key: 'url', | ||
| }, | ||
| { | ||
| label: 'Token', | ||
| key: 'Token', | ||
| }, | ||
| ], | ||
| imagesregistry: [ | ||
| { | ||
| label: intl.get('integration.dataform.registryaddress'), | ||
| key: 'registryAddress', | ||
| }, | ||
| { | ||
| label: intl.get('integration.dataform.username'), | ||
| key: 'username', | ||
| }, | ||
| { | ||
| label: intl.get('integration.dataform.pwd'), | ||
| key: 'pwd', | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| class DataForm extends React.Component { | ||
| static propTypes = { | ||
| form: PropTypes.object, | ||
| onSubmit: PropTypes.func, | ||
| onCancel: PropTypes.func, | ||
| }; | ||
| state = { | ||
| inputList: [], | ||
| }; | ||
|
|
||
| componentDidMount() { | ||
| this.resetForm(); | ||
| } | ||
|
|
||
| componentWillUnmount() { | ||
| this.resetForm(); | ||
| } | ||
|
|
||
| resetForm = () => { | ||
| const { resetFields } = this.props.form; | ||
| this.setState({ inputList: [] }); | ||
| resetFields(); | ||
| }; | ||
|
|
||
| handleSubmit = e => { | ||
| const { onSubmit } = this.props; | ||
| e.preventDefault(); | ||
| this.props.form.validateFields((err, values) => { | ||
| if (!err) { | ||
| // TODO post request | ||
| this.resetForm(); | ||
| onSubmit(); | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| handleCancle = () => { | ||
| const { onCancel } = this.props; | ||
| this.resetForm(); | ||
| onCancel(); | ||
| }; | ||
|
|
||
| handleSelectChange = value => { | ||
| this.setState({ | ||
| inputList: formMap[value], | ||
| }); | ||
| }; | ||
|
|
||
| renderFormInputs = () => { | ||
| const { inputList } = this.state; | ||
| const { getFieldDecorator } = this.props.form; | ||
| return ( | ||
| inputList.length > 0 && | ||
| inputList.map((v, i) => ( | ||
| <FormItem | ||
| key={i} | ||
| label={v.label} | ||
| labelCol={{ span: 5 }} | ||
| wrapperCol={{ span: 12 }} | ||
| > | ||
| {getFieldDecorator(v.key)(<Input autoComplete="off" />)} | ||
| </FormItem> | ||
| )) | ||
| ); | ||
| }; | ||
|
|
||
| render() { | ||
| const { getFieldDecorator } = this.props.form; | ||
| const { inputList } = this.state; | ||
| return ( | ||
| <Form onSubmit={this.handleSubmit}> | ||
| <FormItem | ||
| label={intl.get('integration.type')} | ||
| labelCol={{ span: 5 }} | ||
| wrapperCol={{ span: 12 }} | ||
| > | ||
| {getFieldDecorator('type', { | ||
| rules: [ | ||
| { | ||
| required: true, | ||
| message: intl.get('integration.dataform.datasourcetype'), | ||
| }, | ||
| ], | ||
| })( | ||
| <Select | ||
| placeholder={intl.get('integration.dataform.datasourcetype')} | ||
| onChange={this.handleSelectChange} | ||
| > | ||
| <Option value="git">git</Option> | ||
| <Option value="imagesregistry"> | ||
| {intl.get('integration.dataform.imagesregistry')} | ||
| </Option> | ||
| </Select> | ||
| )} | ||
| </FormItem> | ||
| {this.renderFormInputs()} | ||
| <Form.Item wrapperCol={{ span: 8, offset: 10 }}> | ||
| <Button style={{ marginRight: '10px' }} onClick={this.handleCancle}> | ||
| {intl.get('integration.dataform.cancel')} | ||
| </Button> | ||
| <Button | ||
| disabled={inputList.length <= 0} | ||
| type="primary" | ||
| htmlType="submit" | ||
| > | ||
| {intl.get('integration.dataform.confirm')} | ||
| </Button> | ||
| </Form.Item> | ||
| </Form> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default Form.create()(DataForm); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import React from 'react'; | ||
| import { Table, Button, Modal } from 'antd'; | ||
| import { inject, observer } from 'mobx-react'; | ||
| import IntegrationForm from './DataForm'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| @inject('integration') | ||
| @observer | ||
| class List extends React.Component { | ||
| static propTypes = { | ||
| integration: PropTypes.object, | ||
| }; | ||
| state = { visible: false }; | ||
| componentDidMount() { | ||
| this.props.integration.getIntegrationList(); | ||
| } | ||
| addDataSource = () => { | ||
| this.setState({ | ||
| visible: true, | ||
| }); | ||
| }; | ||
| handleOk = e => { | ||
| this.setState({ | ||
| visible: false, | ||
| }); | ||
| }; | ||
|
|
||
| handleCancel = e => { | ||
| this.setState({ | ||
| visible: false, | ||
| }); | ||
| }; | ||
| render() { | ||
| const { integration } = this.props; | ||
| const columns = [ | ||
| { | ||
| title: intl.get('name'), | ||
| dataIndex: 'name', | ||
| key: 'name', | ||
| }, | ||
| { | ||
| title: intl.get('integration.type'), | ||
| dataIndex: 'type', | ||
| key: 'type', | ||
| }, | ||
| { | ||
| title: intl.get('integration.creationTime'), | ||
| dataIndex: 'time', | ||
| key: 'time', | ||
| }, | ||
| ]; | ||
| return ( | ||
| <div> | ||
| <div className="head-bar"> | ||
| <h2>{intl.get('integration.datasource')}</h2> | ||
| <Button type="primary" onClick={this.addDataSource}> | ||
| {intl.get('operation.add')} | ||
| </Button> | ||
| </div> | ||
| <Table columns={columns} dataSource={integration.integrationList} /> | ||
| <Modal | ||
| ref="modal" | ||
| title={intl.get('integration.adddatasource')} | ||
| visible={this.state.visible} | ||
| footer={null} | ||
| onCancel={this.handleCancel} | ||
| > | ||
| <IntegrationForm | ||
| onSubmit={this.handleOk} | ||
| onCancel={this.handleCancel} | ||
| /> | ||
| </Modal> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default List; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| import Integration from './component/List'; | ||
| export default Integration; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,8 @@ | ||
| import workflow from './workflow'; | ||
| import integration from './integration'; | ||
|
|
||
| const stores = { | ||
| workflow, | ||
| integration, | ||
| }; | ||
| export default stores; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { observable, useStrict, action } from 'mobx'; | ||
|
|
||
| useStrict(true); | ||
|
|
||
| class Integration { | ||
| @observable integrationList = []; | ||
| @action.bound | ||
| getIntegrationList(workflowId) { | ||
| this.integrationList = [ | ||
| { | ||
| name: 'svn-2', | ||
| type: 'svn-1', | ||
| time: '2018-12-21', | ||
| }, | ||
| ]; | ||
| return; | ||
| } | ||
| } | ||
|
|
||
| export default new Integration(); |