新增 删除数据源提交

api/app/lib/controllers/metadataAcquisition/adapter.js

@@ -65,7 +65,6 @@ function getAdapters(opts) {
     }
 }
 
-
 module.exports = {
     checkConnect,
     addAdapter,

api/app/lib/controllers/metadataAcquisition/dataSource.js

@@ -61,7 +61,53 @@ function getDataSource(opts) {
 }
 
 
+// 修改数据源
+function editDataSource(opts) {
+    return async function (ctx, next) {
+
+        try {
+            const models = ctx.fs.dc.models;
+            const { id } = ctx.params;
+            const body = ctx.request.body;
+            await models.DataSource.update(
+                body,
+                { where: { id: id, } }
+            )
+            ctx.status = 204;
+            ctx.body = { message: '修改数据源成功' }
+        } catch (error) {
+            ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
+            ctx.status = 400;
+            ctx.body = { message: '修改数据源失败' }
+        }
+    }
+}
+
+// 删除数据源
+function deleteDataSource(opts) {
+    return async function (ctx, next) {
+
+        try {
+            const models = ctx.fs.dc.models;
+            const { id } = ctx.params;
+            await models.DataSource.destroy({
+                where: {
+                    id: id
+                }
+            })
+            ctx.status = 204;
+            ctx.body = { message: '删除数据源成功' }
+        } catch (error) {
+            ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
+            ctx.status = 400;
+            ctx.body = { message: '删除数据源失败' }
+        }
+    }
+}
+
 module.exports = {
     addDataSource,
-    getDataSource
+    getDataSource,
+    editDataSource,
+    deleteDataSource
 }

api/app/lib/routes/metadataAcquisition/dataSource.js

@@ -4,11 +4,19 @@ const dataSource = require('../../controllers/metadataAcquisition/dataSource');
 
 module.exports = function (app, router, opts, AuthCode) {
 
-    app.fs.api.logAttr['POST/meta/acq/dataSource'] = { content: '增加模型信息', visible: true };
+    app.fs.api.logAttr['POST/meta/acq/dataSource'] = { content: '增加数据源信息', visible: true };
     router.post('/meta/acq/dataSource', dataSource.addDataSource(opts))
 
     //获取数据源列表
     app.fs.api.logAttr['GET/meta/acq/dataSources'] = { content: '获取数据源列表', visible: true };
     router.get('/meta/acq/dataSources', dataSource.getDataSource(opts));
 
+    // 修改数据源信息
+    app.fs.api.logAttr['PUT/acq/dataSource/:id'] = { content: '修改数据源信息', visible: true };
+    router.put('/acq/dataSource/:id', dataSource.editDataSource(opts))
+
+    // 删除数据源信息
+    app.fs.api.logAttr['DEL/acq/dataSource/:id'] = { content: '删除数据源信息', visible: true };
+    router.del('acq/dataSource/:id', dataSource.deleteDataSource(opts))
+
 };

web/client/src/sections/metadataAcquisition/actions/dataSource.js

@@ -8,7 +8,7 @@ export function addDataSource(params, msg) {
         type: 'post',
         data: params,
         dispatch,
-        actionType: 'ADD_ADAPTER',
+        actionType: 'ADD_DATSOURCE',
         url: ApiTable.addDataSource,
         msg: {
             option: msg || '新增数据源',
@@ -28,4 +28,29 @@ export function getDataSources(query) {
     });
 }
 
+export function deleteDataSource(id) {
+    return (dispatch) => basicAction({
+        type: 'del',
+        dispatch,
+        actionType: 'DELETE_ACQ_DATASOURCE',
+        url: ApiTable.modifyDataSource.replace('{id}', id),
+        msg: {
+            option: '模型删除',
+        },
+    });
+}
+
+export function modifyDataSource(id, params, msg) {
+    return (dispatch) => basicAction({
+        type: 'put',
+        data: params,
+        dispatch,
+        actionType: 'MODIFY_ACQ_DATASOURCE',
+        url: ApiTable.modifyDataSource.replace('{id}', id),
+        msg: {
+            option: msg || '模型编辑',
+        },
+    });
+}
+
 

web/client/src/sections/metadataAcquisition/components/adapterStep.js

@@ -4,25 +4,27 @@ import { Steps, Row, Col, Table, Button } from 'antd'
 import { STEP_CONFIG } from './steps/index';
 
 const AdapterStep = (props) => {
-    const { type } = props;
+    const {
+        type = 'postgre',
+        stepProps = 3,//步骤配置 适配器显示3步 数据源显示2步
+        currentChange
+    } = props;
     const [current, setCurrent] = useState(0);
     const [stepOneValues, setStepOneValues] = useState();
     const [stepTwoValues, setStepTwoValues] = useState({});
     const { StepOne, StepTwo, StepThree } = STEP_CONFIG[type]; //记录第一页表单数据用于切换步骤时展示上一次填写的值
 
+    useEffect(() => {
+        currentChange(current)
+    }, [current]);
+
     const next = () => {
-        current < 2 && setCurrent(current + 1);
+        (current < 2 && current < stepProps - 1) && setCurrent(current + 1);
     };
     const prev = () => {
         setCurrent(current - 1);
     };
 
-    const stepOneValuesFinish = (values) => {
-        setStepOneValues(values)
-    }
-    const stepTwoValuesFinish = (values) => {
-        setStepTwoValues(values)
-    }
     const onFinish = () => {
         props.onFinish({
             stepOneValues,
@@ -30,6 +32,14 @@ const AdapterStep = (props) => {
         })
     }
 
+    const stepOneValuesFinish = (values) => {
+        setStepOneValues(values)
+    }
+    const stepTwoValuesFinish = (values) => {
+        stepProps == 2 ? onFinish() : setStepTwoValues(values)
+    }
+
+
     const steps = [
         {
             title: '配置数据源基本信息',
@@ -51,7 +61,7 @@ const AdapterStep = (props) => {
     }));
 
     return <>
-        <Steps current={current} items={items} />
+        {stepProps == 3 && <Steps current={current} items={items} />}
         <div className="steps-content">{steps[current].content}</div>
     </>
 }

web/client/src/sections/metadataAcquisition/components/dataSourceManagementModal.js

@@ -0,0 +1,32 @@
+import React, { useEffect, useState } from 'react'
+import { Tabs, Card, Modal } from 'antd'
+import AdapterStep from './adapterStep';
+import { BellOutlined } from '@ant-design/icons'
+
+function DataSourceModal(props) {
+    const { visible, editData, onFinish, onCancel } = props;
+    const [current, setCurrent] = useState(0);
+    // const onFinish = () => { }
+    return <>
+        <Modal
+            title={editData ? '编辑数据源' : "新建数据源"}
+            onCancel={() => { onCancel() }}
+            open={visible}
+            footer={null}
+            width={1200}
+            destroyOnClose={true}
+        >
+            <div style={{ fontSize: 17 }}><BellOutlined />数据源基本信息</div>
+            <AdapterStep
+                type={'postgre'} //当前卡片的key （目前只有postgre,支持后续扩展）
+                onFinish={onFinish}
+                stepProps={2}
+                currentChange={c => { setCurrent(c) }}
+                {...props}
+            />
+        </Modal>
+    </>
+
+}
+
+export default DataSourceModal

web/client/src/sections/metadataAcquisition/components/steps/postgre/stepOne.js

@@ -17,7 +17,7 @@ function StepOne(props) {
         mode: '数据库连接',
         source: '库表/目录1',
     }
-    const formItemLayout = { labelCol: { span: 4 }, wrapperCol: { span: 10 } };
+    const formItemLayout = { labelCol: { span: 3 }, wrapperCol: { span: 10 } };
     return <>
         <ProForm
             title={''}

web/client/src/sections/metadataAcquisition/constants/adapter.js

@@ -0,0 +1,5 @@
+//关系型数据库卡片配置
+export const RELATION_DATABASE_TOOL_CONFIG = [{
+    key: 'postgre', // key与详情配置（adapterDetail）中的key需一直否则无法查看详情页
+    name: 'PostgreSQL采集适配器',
+}]

web/client/src/sections/metadataAcquisition/containers/adapter.js

@@ -4,11 +4,7 @@ import { Tabs, Card, Modal } from 'antd'
 import { DatabaseOutlined } from '@ant-design/icons'
 import AdapterStep from '../components/adapterStep';
 import moment from 'moment';
-//关系型数据库卡片配置
+import { RELATION_DATABASE_TOOL_CONFIG } from '../constants/adapter';
-const RELATION_DATABASE_TOOL_CONFIG = [{
-    key: 'postgre', // key与详情配置（adapterDetail）中的key需一直否则无法查看详情页
-    name: 'PostgreSQL采集适配器',
-}]
 
 const LatestMetadata = (props) => {
     const { history, actions, dispatch, adapters } = props;
@@ -39,8 +35,7 @@ const LatestMetadata = (props) => {
 
     const onFinish = (values) => {
         const { stepOneValues, stepTwoValues } = values;
-        const adapterName = RELATION_DATABASE_TOOL_CONFIG?.find(x => x.key == isModalOpen)?.name;
+        const adapterInfo = adapters?.find(x => x.adapterName == x.name == stepOneValues?.adapter)
-        const adapterInfo = adapters?.find(x => x.adapterName == adapterName)
         if (adapterInfo) {
             dispatch(actions.metadataAcquisition.addDataSource({
                 name: stepOneValues?.name,

web/client/src/sections/metadataAcquisition/containers/dataSourceManagement.js

@@ -3,12 +3,17 @@ 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 DataSourceModal from '../components/dataSourceManagementModal';
+import { RELATION_DATABASE_TOOL_CONFIG } from '../constants/adapter';
+
 import './style.less';
 function DataSourceManagement(props) {
     const { loading, clientHeight, actions, dispatch, dataSources, adapters } = 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,
@@ -25,7 +30,7 @@ function DataSourceManagement(props) {
     }, [pageSize, currentPage]);
 
     const handleDelete = (id) => {
-        dispatch(actions.metadataManagement.deleteMetaModel(id)).then(() => {
+        dispatch(actions.metadataAcquisition.deleteDataSource(id)).then(() => {
             queryData();
         });
     };
@@ -86,7 +91,7 @@ function DataSourceManagement(props) {
                     <Popconfirm
                         key="del"
                         placement="top"
-                        title="是否确认删除该模型？"
+                        title="是否确认删除该数据源？"
                         onConfirm={() => handleDelete(record.id)}
                         okText="是"
                         cancelText="否"
@@ -99,10 +104,29 @@ function DataSourceManagement(props) {
             },
         },
     ];
-    
+
+    const onFinish = (values) => {
+        const { stepOneValues, stepTwoValues } = values;
+        const adapterInfo = adapters?.find(x => x.adapterName == stepOneValues?.adapter)
+        if (adapterInfo) {
+            dispatch(actions.metadataAcquisition.addDataSource({
+                name: stepOneValues?.name,
+                audited: true,
+                adapter: adapterInfo?.id,
+                mountPath: 1,
+                description: stepOneValues?.description,
+                config: stepTwoValues,
+                time: moment()
+            })).then(res => {
+                setVisible(false)
+                queryData();
+            })
+        }
+    }
+
     return <Spin spinning={loading}>
         <Row className='protable-title'>
-            <Col span={12}><Button type='primary'>新建</Button></Col>
+            <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>
@@ -142,6 +166,21 @@ function DataSourceManagement(props) {
             dataSource={dataSources?.rows || []}
             options={false}
         />
+
+        {
+            visible && <DataSourceModal
+                onCancel={
+                    () => {
+                        setVisible(false)
+                        setEditData(null)
+                    }
+                }
+                editData={editData}
+                visible={visible}
+                onFinish={onFinish}
+                {...props}
+            />
+        }
     </Spin>
 
 }