api数据源映射

src/model/datasource.js

@@ -128,6 +128,14 @@ export function* updateEtlSystemMapping(payload) {
   return yield call(service.updateEtlSystemMapping, payload);
 }
 
+export function* getApiDataSourceMappingList(payload) {
+  return yield call(service.getApiDataSourceMappingList, payload);
+}
+
+export function* updateApiDataSourcesMapping(payload) {
+  return yield call(service.updateApiDataSourcesMapping, payload);
+}
+
 export function* getPermissions(payload) {
   return yield call(service.getPermissions, payload);
 }
\ No newline at end of file

src/service/datasourcemanager.js

@@ -124,6 +124,14 @@ export function updateEtlSystemMapping(payload) {
   return PostJSON("/metadataharvester/etlSystemMapping/update", payload);
 }
 
+export function getApiDataSourceMappingList(payload) {
+  return PostJSON("/metadataharvester/apiDataSourcesMapping/list", payload);
+}
+
+export function updateApiDataSourcesMapping(payload) {
+  return PostJSON("/metadataharvester/apiDataSourcesMapping/update", payload);
+}
+
 export function getPermissions(payload) {
   return GetJSON("/metadataharvester/auth/getAllowButtons", payload);
 }
\ No newline at end of file

src/view/Manage/DatasourceManage/Component/APIConfigModal.jsx

+import { useEffect, useState, useContext, useMemo } from 'react';
+import { Modal, Select, Pagination } from 'antd';
+
+import ResizeableTable from '../../ResizeableTable';
+import { AppContext } from '../../../../App';
+import { dispatch } from '../../../../model';
+import { DataSourceSelect } from './ETLConfigModal';
+
+const { Option } = Select;
+
+const FC = (props) => {
+  const { visible, onCancel, id } = props;
+
+  const { env } = useContext(AppContext);
+
+  const [loading, setLoading] = useState(false);
+  const [pagination, setPagination] = useState({pageNum: 1, pageSize: 20});
+  const [datasources, setDatasources] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [apiMapping, setApiMapping] = useState([]);
+
+  const {pageNum, pageSize} = pagination;
+
+  useEffect(() => {
+    if (visible) {
+      getDatasourcesByEnv();
+    }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible, env])
+
+  useEffect(() => {
+    if (visible) {
+      getApiDataSourceMappingList();
+    }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible, id, pagination])
+
+  const columns = useMemo(() => {
+    return ([
+      {
+        title: '序号',
+        dataIndex: 'key',
+        render: (text, record, index) => {
+          return (index+1).toString();
+        },
+        width: 60,
+        ellipsis: true,
+      },
+      {
+        title: 'API数据源名称',
+        dataIndex: 'dataSourceName',
+        width: 200,
+        ellipsis: true,
+      },
+      {
+        title: 'API数据源别名',
+        dataIndex: 'dataSourceAliasName',
+        width: 200,
+        ellipsis: true,
+      },
+      {
+        title: 'API数据源URL',
+        dataIndex: 'dataSourceUrl',
+        width: 200,
+        ellipsis: true,
+      },
+      {
+        title: 'API数据源Driven',
+        dataIndex: 'dataSourceDriven',
+        width: 100,
+        ellipsis: true,
+      },
+      {
+        title: '数据源名称',
+        dataIndex: 'replaceDatasourceName',
+        width: 200,
+        ellipsis: true,
+        render: (text, record, index) => {
+          return (
+            <DataSourceSelect datasources={datasources||[]} defaultValue={text} onChange={(value) => { onDatasouceChange(value, index); }} />
+          );
+        }
+      },
+      {
+        title: 'IP',
+        dataIndex: 'replaceSystemIp',
+        width: 200,
+        ellipsis: true,
+      },
+      {
+        title: '端口',
+        dataIndex: 'replaceSystemPort',
+        width: 100,
+        ellipsis: true,
+      },
+      {
+        title: '数据库',
+        dataIndex: 'replaceSystemDb',
+        width: 100,
+        ellipsis: true,
+      },
+      {
+        title: '数据库类型',
+        dataIndex: 'replaceSystemDbType',
+        width: 100,
+        ellipsis: true,
+      }
+    ]);
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [datasources]);
+
+  const tableData = useMemo(() => {
+    const newTableData = [...apiMapping];
+    (newTableData||[]).forEach(item => {
+      let targetSystem = {};
+      datasources.forEach(datasource => {
+        datasource.targetParameters.forEach(param => {
+          if (param.name==='name' && param.value===item.replaceDatasourceName) {
+            targetSystem = datasource;
+          }
+        })
+      });
+
+      (targetSystem.targetParameters||[]).forEach(param => {
+        if (param.name === 'ip') {
+          item.replaceSystemIp = param.value;
+        } else if (param.name === 'port') {
+          item.replaceSystemPort = param.value;
+        } else if (param.name === 'db') {
+          item.replaceSystemDb = param.value;
+        } else if (param.name === 'dbType') {
+          item.replaceSystemDbType = param.value;
+        }
+      });
+    });
+
+    return newTableData;
+  }, [datasources, apiMapping])
+
+  const getDatasourcesByEnv = () => {
+    dispatch({
+      type: 'datasource.getAllDatasources',
+      payload: {
+        namespace: env?.domainId
+      },
+      callback: data => {
+        setDatasources(data||[]);
+      }
+    });
+  }
+
+  const getApiDataSourceMappingList = () => {
+    setLoading(true);
+    dispatch({
+      type: 'datasource.getApiDataSourceMappingList',
+      payload: {
+        params: {
+          page: pageNum,
+          size: pageSize
+        },
+        data: {
+          targetId: id
+        }
+      },
+      callback: data => {
+        setLoading(false);
+        setApiMapping(data.content||[]);
+        setTotal(data.totalElements||0);
+      },
+      error: () => {
+        setLoading(false);
+      }
+    });
+  }
+
+  const onDatasouceChange = (value, index) => {
+    const newApi = {...apiMapping[index], replaceDatasourceName: value||''};
+
+    setLoading(true);
+    dispatch({
+      type: 'datasource.updateApiDataSourcesMapping',
+      payload: {
+        data: newApi
+      },
+      callback: data => {
+        setLoading(false);
+        getApiDataSourceMappingList();
+      },
+      error: () => {
+        setLoading(false);
+      }
+    });
+
+  }
+
+  const changeCurrent = (page,size) => {
+    setPagination({ pageNum: page, pageSize: size });
+  }
+
+  return (
+    <Modal 
+      className='etl-config-modal'
+      visible={visible}
+      title='API数据源映射配置'
+      width='80%'
+      onCancel={() => { 
+        setPagination({...pagination, pageNum: 1});
+        onCancel && onCancel(); 
+      }}
+      footer={null}
+    >
+      <ResizeableTable 
+        rowKey='id'
+        columns={columns}
+        dataSource={tableData}
+        pagination={false}
+        loading={loading}
+        scroll={{ y: 'calc(70vh)' }}
+      />
+      <Pagination
+        size="small"
+        className="text-center m-3"
+        showSizeChanger
+        showQuickJumper
+        onChange={changeCurrent}
+        onShowSizeChange={changeCurrent}
+        current={pageNum}
+        pageSize={pageSize}
+        defaultCurrent={1}
+        total={total}
+        showTotal={total => `共 ${total} 条`}
+      />
+    </Modal>
+  );
+}
+
+export default FC
\ No newline at end of file

src/view/Manage/DatasourceManage/Component/DatasourceList.jsx

@@ -6,7 +6,7 @@ import DatasourceItem from './DatasourceItem';
 
 const DatasourceList = (props) => {
 
-  const { loading, data, onETLConfig, onEdit, onAddTask, onDelete, idBindTasksNeedRefresh, scope, database } = props;
+  const { loading, data, onETLConfig, onAPIConfig, onEdit, onAddTask, onDelete, idBindTasksNeedRefresh, scope, database } = props;
 
   const [ expandedBindId, setExpandedBindId ] = useState({});
 
@@ -56,7 +56,12 @@ const DatasourceList = (props) => {
                   <Space className='mx-3' style={{ marginLeft: 'auto' }} size='small'>
                     {
                       (item.type === 'EtlTarget') && <Tooltip placement='bottom' title={'ETL映射配置'}>
-                        <Button icon={<SettingOutlined />} size='small' onClick={() => { onETLConfig && onETLConfig(item); }} />
+                        <Button icon={<SettingOutlined />} size='small' onClick={() => { onETLConfig?.(item); }} />
+                      </Tooltip>
+                    }
+                    {
+                      (item.type === 'DataServiceApiTarget') && <Tooltip placement='bottom' title='API数据源映射配置'>
+                        <Button icon={<SettingOutlined />} size='small' onClick={() => { onAPIConfig?.(item); }} />
                       </Tooltip>
                     }
                     <Tooltip placement='bottom' title={'修改'}>

src/view/Manage/DatasourceManage/Component/ETLConfigModal.jsx

@@ -7,7 +7,7 @@ import { dispatch } from '../../../../model';
 
 const { Option } = Select;
 
-const DataSourceSelect = (props) => {
+export const DataSourceSelect = (props) => {
   const {datasources, onChange, defaultValue} = props;
 
   const [value, setValue] = useState('');

src/view/Manage/DatasourceManage/index.jsx

@@ -3,6 +3,7 @@ import { Space, Select, Button, Modal, TreeSelect } from 'antd';
 
 import DatasourceList from './Component/DatasourceList';
 import ETLConfigModal from './Component/ETLConfigModal';
+import APIConfigModal from './Component/ApiConfigModal';
 import UpdateDatasourceModal from './Component/UpdateDatasourceModal';
 import ScheduleCURDModal from './Component/ScheduleCURDModal';
 import TaskLogsModal from './Component/TaskLogsModal';
@@ -42,6 +43,7 @@ const DatasourceManage = (props) => {
   const [ scheduleCURDModalVisible, setScheduleCURDModalVisible ] = useState(false);
   const [ updateTaskModalVisible, setUpdateTaskModalVisible ] = useState(false);
   const [ etlConfigModalVisible, setEtlConfigModalVisible ] = useState(false);
+  const [ apiConfigModalVisible, setApiConfigModalVisible ] = useState(false);
   const [ updateTaskModalAction, setUpdateTaskModalAction ] = useState('');
   const [ taskLogsModalVisible, setTaskLogsModalVisible ] = useState(false);
   const [ taskLogModalVisible, setTaskLogModalVisible ] = useState(false);
@@ -234,6 +236,11 @@ const DatasourceManage = (props) => {
     setEtlConfigModalVisible(true);
   }
 
+  const configAPIDatasource = (datasource) => {
+    setCurrentDatasourceId(datasource.id);
+    setApiConfigModalVisible(true);
+  }
+
   const editDatasource = (datasource) => {
     setCurrentDatasourceId(datasource.id);
     setUpdateDatasourceModalAction('edit');
@@ -433,6 +440,7 @@ const DatasourceManage = (props) => {
           database={selectedDatabaseKey}
           idBindTasksNeedRefresh={currentDatasourceIdBindTasksNeedRefresh}
           onETLConfig={configETLDatasource}
+          onAPIConfig={configAPIDatasource}
           onEdit={editDatasource}
           onAddTask={addTask}
           onDelete={deleteDatasource}
@@ -481,6 +489,14 @@ const DatasourceManage = (props) => {
         id={currentDatasourceId}
         onCancel={onEtlConfigModalCancel}
       />
+
+      <APIConfigModal
+        visible={apiConfigModalVisible}
+        id={currentDatasourceId}
+        onCancel={() => {
+          setApiConfigModalVisible(false)
+        }}
+      />
       
       {contextHolder}  
     </div>