10 changed files with 330 additions and 71 deletions
@ -0,0 +1,25 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import { Tabs, Card, Modal } from 'antd' |
|||
import AdapterStep from './adapterStep'; |
|||
import { STEP_CONFIG } from './steps/index' |
|||
function DataSourceModal(props) { |
|||
const { visible, editData, onFinish, onCancel, |
|||
type = 'postgre',//当前卡片的key （目前只有postgre,支持后续扩展）
|
|||
} = props; |
|||
const { StepThree } = STEP_CONFIG[type]; |
|||
// const onFinish = () => { }
|
|||
return <> |
|||
<Modal |
|||
title={editData ? '编辑数据源' : "新建数据源"} |
|||
onCancel={() => { onCancel() }} |
|||
open={visible} |
|||
footer={null} |
|||
width={1200} |
|||
destroyOnClose={true} |
|||
> |
|||
<StepThree next={onFinish} /> |
|||
</Modal> |
|||
</> |
|||
} |
|||
|
|||
export default DataSourceModal |
|||
@ -1,7 +1,229 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import { Spin, Popconfirm, Tree, Row, Col, Button, Input, Table } from 'antd'; |
|||
import { connect } from 'react-redux'; |
|||
import ProTable from '@ant-design/pro-table'; |
|||
import moment from 'moment'; |
|||
import TaskModal from '../components/taskModal'; |
|||
import { RELATION_DATABASE_TOOL_CONFIG } from '../constants/adapter'; |
|||
|
|||
function AcquisitionTask (props) { |
|||
return <>采集任务配置</> |
|||
import './style.less'; |
|||
function AcquisitionTask(props) { |
|||
const { loading, clientHeight, actions, dispatch, dataSources, adapters, tasks } = props; |
|||
const [pageSize, setPageSize] = useState(10); |
|||
const [currentPage, setCurrentPage] = useState(1); |
|||
const [searchValue, setSearchValue] = useState('') |
|||
const [visible, setVisible] = useState(false);//是否展示新增编辑模态框
|
|||
const [editData, setEditData] = useState(null);//模态框编辑数据
|
|||
const queryData = (search) => { |
|||
const query = { |
|||
limit: search ? 10 : pageSize || 10, |
|||
page: search ? 1 : currentPage || 1, |
|||
taskName: searchValue |
|||
} |
|||
dispatch(actions.metadataAcquisition.getTasks(query)); |
|||
} |
|||
|
|||
useEffect(() => { |
|||
dispatch(actions.metadataAcquisition.getDataSources()); |
|||
dispatch(actions.metadataAcquisition.getAdapters()) |
|||
queryData(); |
|||
}, [pageSize, currentPage]); |
|||
|
|||
const handleDelete = (id) => { |
|||
dispatch(actions.metadataAcquisition.deleteDataSource(id)).then(() => { |
|||
queryData(); |
|||
}); |
|||
}; |
|||
|
|||
const columns = [ |
|||
{ |
|||
title: '数据源名称', |
|||
dataIndex: 'taskName', |
|||
}, |
|||
{ |
|||
title: '数据源名称', |
|||
dataIndex: 'name', |
|||
}, |
|||
{ |
|||
title: '挂载点', |
|||
dataIndex: 'mountPath', |
|||
}, |
|||
{ |
|||
title: '适配器类型', |
|||
dataIndex: 'adapter', |
|||
render: (text, record) => { |
|||
const adapterInfo = adapters?.find(s => s.id == record?.adapter) |
|||
return adapterInfo?.adapterName |
|||
} |
|||
}, |
|||
{ |
|||
title: '采集方式', |
|||
dataIndex: 'control', |
|||
render: (text, record) => { |
|||
const adapterInfo = adapters?.find(s => s.id == record?.adapter) |
|||
return adapterInfo?.mode |
|||
} |
|||
}, |
|||
{ |
|||
title: '工具版本', |
|||
dataIndex: 'length', |
|||
render: (text, record) => { |
|||
const adapterInfo = adapters?.find(s => s.id == record?.adapter) |
|||
return adapterInfo?.adapterVersion |
|||
} |
|||
}, |
|||
{ |
|||
title: '修改时间', |
|||
dataIndex: 'time', |
|||
render: (text, record) => moment(record?.time).format('YYYY-MM-DD HH:mm:ss') |
|||
}, |
|||
{ |
|||
title: '描述', |
|||
dataIndex: 'description', |
|||
ellipsis: true, |
|||
search: false, |
|||
}, |
|||
{ |
|||
title: '操作', |
|||
width: 160, |
|||
key: 'option', |
|||
valueType: 'option', |
|||
render: (text, record) => { |
|||
const options = []; |
|||
options.push(<a onClick={() => { |
|||
const adapterInfo = adapters?.find(x => x.id == record?.adapter) |
|||
setVisible(true) |
|||
record.adapterInfo = adapterInfo |
|||
setEditData(record) |
|||
}} style={{ marginRight: 8 }}>编辑</a>) |
|||
options.push( |
|||
<Popconfirm |
|||
key="del" |
|||
placement="top" |
|||
title="是否确认删除该数据源？" |
|||
onConfirm={() => handleDelete(record.id)} |
|||
okText="是" |
|||
cancelText="否" |
|||
> |
|||
<a>删除</a> |
|||
</Popconfirm>) |
|||
|
|||
return options; |
|||
|
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
const onFinish = (values) => { |
|||
const { stepOneValues, stepTwoValues } = values; |
|||
const adapterInfo = adapters?.find(x => x.adapterName == stepOneValues?.adapterName) |
|||
if (adapterInfo) { |
|||
const dataToSave = { |
|||
name: stepOneValues?.name, |
|||
audited: true, |
|||
adapter: adapterInfo?.id, |
|||
mountPath: 1, |
|||
description: stepOneValues?.description, |
|||
config: stepTwoValues, |
|||
time: moment() |
|||
} |
|||
if (editData) { |
|||
dispatch(actions.metadataAcquisition.modifyTask(editData?.id, dataToSave)).then(res => { |
|||
if (res.success) { |
|||
setVisible(false); |
|||
setEditData(null); |
|||
queryData(); |
|||
} |
|||
}) |
|||
} else { |
|||
dispatch(actions.metadataAcquisition.addTask(dataToSave)).then(res => { |
|||
if (res.success) { |
|||
setVisible(false); |
|||
setEditData(null); |
|||
queryData(); |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
|
|||
return <Spin spinning={loading}> |
|||
<Row className='protable-title'> |
|||
<Col span={12}><Button type='primary' onClick={() => { setVisible(true) }}>新建</Button></Col> |
|||
<Col span={12} style={{ textAlign: 'right' }}><Input |
|||
value={searchValue} onChange={e => { setSearchValue(e.target.value) }} |
|||
style={{ width: 220, marginRight: 15 }} placeholder="数据源或任务名称" /><Button onClick={() => { queryData() }} type='primary'>查询</Button></Col> |
|||
</Row> |
|||
<ProTable |
|||
columns={columns} |
|||
dateFormatter="string" |
|||
search={false} |
|||
scroll={ |
|||
{ |
|||
scrollToFirstRowOnChange: true, |
|||
y: clientHeight - 260 |
|||
} |
|||
} |
|||
pagination={{ |
|||
size: 'large', |
|||
total: tasks?.count, |
|||
showSizeChanger: true, |
|||
// showQuickJumper: true,
|
|||
current: currentPage, |
|||
pageSize: pageSize || 10, |
|||
pageSizeOptions: [10, 20, 50], |
|||
showTotal: (total) => { |
|||
return <span style={{ fontSize: 15 }}>{`共${Math.ceil(total / pageSize)}页，${total}项`}</span> |
|||
}, |
|||
onShowSizeChange: (currentPage, pageSize) => { |
|||
setCurrentPage(currentPage); |
|||
setPageSize(pageSize); |
|||
|
|||
}, |
|||
onChange: (page, pageSize) => { |
|||
setCurrentPage(page); |
|||
setPageSize(pageSize); |
|||
|
|||
} |
|||
}} |
|||
dataSource={tasks?.rows || []} |
|||
options={false} |
|||
/> |
|||
|
|||
{ |
|||
visible && <TaskModal |
|||
onCancel={ |
|||
() => { |
|||
setVisible(false) |
|||
setEditData(null) |
|||
} |
|||
} |
|||
editData={editData} |
|||
visible={visible} |
|||
onFinish={onFinish} |
|||
{...props} |
|||
/> |
|||
} |
|||
</Spin> |
|||
|
|||
} |
|||
|
|||
function mapStateToProps(state) { |
|||
const { |
|||
auth, global, datasources, adapters, tasks |
|||
} = state; |
|||
return { |
|||
loading: datasources.isRequesting || adapters?.isRequesting, |
|||
clientHeight: global.clientHeight, |
|||
actions: global.actions, |
|||
dataSources: datasources?.data || {}, |
|||
adapters: adapters?.data || [], |
|||
tasks: tasks?.data || [], |
|||
}; |
|||
} |
|||
|
|||
export default AcquisitionTask |
|||
export default connect(mapStateToProps)(AcquisitionTask); |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
Loading…
Reference in new issue