peng.peng
2 years ago
6 changed files with 213 additions and 14 deletions
@ -1,7 +1,185 @@ |
|||||
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 './style.less'; |
||||
function AcquisitionLog(props) { |
function AcquisitionLog(props) { |
||||
return <>采集日志</> |
const { loading, clientHeight, actions, dispatch, dataSources, adapters, tasks } = props; |
||||
|
const [pageSize, setPageSize] = useState(10); |
||||
|
const [currentPage, setCurrentPage] = useState(1); |
||||
|
const [searchValue, setSearchValue] = useState('') |
||||
|
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 columns = [ |
||||
|
{ |
||||
|
title: '任务名称', |
||||
|
dataIndex: 'taskName', |
||||
|
}, |
||||
|
{ |
||||
|
title: '数据源名称', |
||||
|
dataIndex: 'dataSourceName', |
||||
|
render: (text, record) => { |
||||
|
return record?.dataSource?.name |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
title: '适配器类型', |
||||
|
dataIndex: 'adapter', |
||||
|
render: (text, record) => { |
||||
|
const adapterInfo = record?.dataSource?.adapter |
||||
|
return adapterInfo?.adapterName |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
title: '采集方式', |
||||
|
dataIndex: 'control', |
||||
|
render: (text, record) => { |
||||
|
const adapterInfo = record?.dataSource?.adapter |
||||
|
return adapterInfo?.mode |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
title: '执行周期', |
||||
|
dataIndex: 'cron', |
||||
|
// render: (text, record) => {
|
||||
|
// return transCron(record?.cron);
|
||||
|
// }
|
||||
|
}, |
||||
|
{ |
||||
|
title: '重复次数', |
||||
|
dataIndex: 'retryCount', |
||||
|
}, |
||||
|
{ |
||||
|
title: '时间间隔(分钟)', |
||||
|
dataIndex: 'retryTime', |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
title: '操作', |
||||
|
width: 300, |
||||
|
key: 'option', |
||||
|
valueType: 'option', |
||||
|
render: (text, record) => { |
||||
|
const options = []; |
||||
|
options.push(<a onClick={() => { |
||||
|
const param = { id: record.id } |
||||
|
dispatch(actions.metadataAcquisition.runTask(param)) |
||||
|
}} style={{ marginRight: 8 }}>立即执行</a>) |
||||
|
|
||||
|
const enabledText = record?.enabled ? '禁用' : '启用'; |
||||
|
options.push(<a onClick={() => { |
||||
|
dispatch(actions.metadataAcquisition.modifyTask(record?.id, { enabled: !record?.enabled }, '采集任务' + enabledText)).then(res => { |
||||
|
if (res.success) { |
||||
|
queryData(); |
||||
|
} |
||||
|
}) |
||||
|
}} style={{ marginRight: 8 }}>{enabledText}</a>) |
||||
|
|
||||
|
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={<><div>是否确认删除该采集任务?</div> |
||||
|
<div>(将同步删除该任务采集日志)</div></>} |
||||
|
onConfirm={() => handleDelete(record.id)} |
||||
|
okText="是" |
||||
|
cancelText="否" |
||||
|
> |
||||
|
<a>删除</a> |
||||
|
</Popconfirm>) |
||||
|
|
||||
|
return options; |
||||
|
|
||||
|
}, |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
return <Spin spinning={loading}> |
||||
|
<Row className='protable-title'> |
||||
|
<Input |
||||
|
value={searchValue} onChange={e => { setSearchValue(e.target.value) }} |
||||
|
style={{ width: 220, marginRight: 15 }} placeholder="数据源或任务名称" /> |
||||
|
<Button onClick={() => { queryData() }} type='primary'>查询</Button> |
||||
|
</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,
|
||||
|
defaultPageSize: 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} |
||||
|
/> |
||||
|
</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 connect(mapStateToProps)(AcquisitionLog); |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
export default AcquisitionLog |
|
Loading…
Reference in new issue