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 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) { |
import './style.less'; |
||||
return <>采集任务配置</> |
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