Commit fa6906ad by zhaochengxiang

数据源增加系统

parent 3f11b2e7
import * as service from '../service/datasourcemanager'; import * as service from '../service/datasourcemanager';
import { call } from 'redux-saga/effects'; import { call } from 'redux-saga/effects';
export function *getScopesAndSupportedTargetTypes() {
const scopes = yield call(service.getScopes);
const typies = yield call(service.getSupportedTargetTypes);
return { scopes, typies };
}
export function* getAllSupportedDatasourceTypies() { export function* getAllSupportedDatasourceTypies() {
return yield call(service.getAllSupportedDatasourceTypies); return yield call(service.getAllSupportedDatasourceTypies);
} }
......
import { PostJSON, GetJSON, Post, Delete } from "../util/axios" import { PostJSON, GetJSON, Post, Delete } from "../util/axios"
export function getScopes() {
return GetJSON("/authservice/personal/joinedScopes");
}
export function getAllSupportedDatasourceTypies() { export function getAllSupportedDatasourceTypies() {
return GetJSON("/metadataharvester/datasource/getAllSupportedDatasourceTypies"); return GetJSON("/metadataharvester/datasource/getAllSupportedDatasourceTypies");
} }
......
import React, { useState } from 'react'; import React, { useState } from 'react';
import { List, Space, Button, Tooltip } from "antd"; import { List, Space, Button, Tooltip } from "antd";
import { EditOutlined, DiffOutlined, DeleteOutlined, DatabaseOutlined, ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons'; import { EditOutlined, DiffOutlined, DeleteOutlined, ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
import DatasourceItem from './DatasourceItem'; import DatasourceItem from './DatasourceItem';
......
...@@ -8,7 +8,7 @@ import { showMessage } from '../../../../util'; ...@@ -8,7 +8,7 @@ import { showMessage } from '../../../../util';
const { Option } = Select; const { Option } = Select;
const UpdateDatasourceModal = (props) => { const UpdateDatasourceModal = (props) => {
const { visible, onCancel, databases, action, id } = props; const { visible, onCancel, databases, action, id, scope } = props;
const [ selectedDatabaseKey, setSelectedDatabaseKey ] = useState(''); const [ selectedDatabaseKey, setSelectedDatabaseKey ] = useState('');
const [ allSupportedDatasourceTypies, setAllSupportedDatasourceTypies ] = useState([]); const [ allSupportedDatasourceTypies, setAllSupportedDatasourceTypies ] = useState([]);
...@@ -118,11 +118,24 @@ const UpdateDatasourceModal = (props) => { ...@@ -118,11 +118,24 @@ const UpdateDatasourceModal = (props) => {
//深拷贝 //深拷贝
let newDatasource = JSON.parse(JSON.stringify(currentSupportedDatasourceTypies)); let newDatasource = JSON.parse(JSON.stringify(currentSupportedDatasourceTypies));
newDatasource = {...newDatasource, ...{
namespace: ((scope||[]).length>0?scope[0]:''),
scope: ((scope||[]).length>2?scope[2]:'')
}};
if (action === 'edit') { if (action === 'edit') {
newDatasource = {...newDatasource, ...currentDatasource}; newDatasource = {...newDatasource, ...currentDatasource};
} }
newDatasource && (newDatasource.targetParameters||[]).forEach(item => { newDatasource && (newDatasource.targetParameters||[]).forEach(item => {
if (item.selectMode === null && item.required) {
item.needEnc = true;
if (action === 'edit') {
item.needEnc = (item.value!==datasourceRow[item.name]);
}
}
item.value = datasourceRow[item.name]||''; item.value = datasourceRow[item.name]||'';
if (item.selectMode === 'file') { if (item.selectMode === 'file') {
const index = (fileListBindName||[]).findIndex(_item => _item.name===item.name); const index = (fileListBindName||[]).findIndex(_item => _item.name===item.name);
...@@ -133,6 +146,13 @@ const UpdateDatasourceModal = (props) => { ...@@ -133,6 +146,13 @@ const UpdateDatasourceModal = (props) => {
}); });
newDatasource && newDatasource.credential && (newDatasource.credential.credentialParameters||[]).forEach(item => { newDatasource && newDatasource.credential && (newDatasource.credential.credentialParameters||[]).forEach(item => {
if (item.selectMode === null && item.required) {
item.needEnc = true;
if (action === 'edit') {
item.needEnc = (item.value!==credentialRow[item.name]);
}
}
item.value = credentialRow[item.name]||''; item.value = credentialRow[item.name]||'';
if (item.selectMode === 'file') { if (item.selectMode === 'file') {
const index = (fileListBindName||[]).findIndex(_item => _item.name===item.name); const index = (fileListBindName||[]).findIndex(_item => _item.name===item.name);
...@@ -169,9 +189,17 @@ const UpdateDatasourceModal = (props) => { ...@@ -169,9 +189,17 @@ const UpdateDatasourceModal = (props) => {
const newDatasource = {...currentSupportedDatasourceTypies}; const newDatasource = {...currentSupportedDatasourceTypies};
newDatasource && (newDatasource.targetParameters||[]).forEach(item => { newDatasource && (newDatasource.targetParameters||[]).forEach(item => {
item.value = datasourceRow[item.name]; if (item.selectMode === null && item.required) {
item.needEnc = true;
if (action === 'edit') {
item.needEnc = (item.value!==datasourceRow[item.name]);
}
}
item.value = datasourceRow[item.name]||'';
if (item.selectMode === 'file') { if (item.selectMode === 'file') {
const index = (fileListBindName||[]).findIndex(_item => _item.name===item.name); const index = (fileListBindName||[]).findIndex(_item => _item.name===item.name);
if (index !== -1) { if (index !== -1) {
item.value = fileListBindName[index].data||''; item.value = fileListBindName[index].data||'';
} }
...@@ -179,7 +207,14 @@ const UpdateDatasourceModal = (props) => { ...@@ -179,7 +207,14 @@ const UpdateDatasourceModal = (props) => {
}); });
newDatasource && newDatasource.credential && (newDatasource.credential.credentialParameters||[]).forEach(item => { newDatasource && newDatasource.credential && (newDatasource.credential.credentialParameters||[]).forEach(item => {
item.value = credentialRow[item.name]; if (item.selectMode === null && item.required) {
item.needEnc = true;
if (action === 'edit') {
item.needEnc = (item.value!==credentialRow[item.name]);
}
}
item.value = credentialRow[item.name]||'';
if (item.selectMode === 'file') { if (item.selectMode === 'file') {
const index = (fileListBindName||[]).findIndex(_item => _item.name===item.name); const index = (fileListBindName||[]).findIndex(_item => _item.name===item.name);
if (index !== -1) { if (index !== -1) {
......
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Space, Select, Button, Modal } from 'antd'; import { Space, Select, Button, Modal, Cascader } from 'antd';
import DatasourceList from './Component/DatasourceList'; import DatasourceList from './Component/DatasourceList';
import UpdateDatasourceModal from './Component/UpdateDatasourceModal'; import UpdateDatasourceModal from './Component/UpdateDatasourceModal';
...@@ -13,11 +13,13 @@ const { Option } = Select; ...@@ -13,11 +13,13 @@ const { Option } = Select;
const DatasourceManage = () => { const DatasourceManage = () => {
const [ scopes, setScopes ] = useState([]);
const [ selectedScope, setSelectedScope] = useState([]);
const [ rawSupportDatabases, setRawSupportDatabases ] = useState([]); const [ rawSupportDatabases, setRawSupportDatabases ] = useState([]);
const [ supportDatabases, setSupportDatabases ] = useState([]); const [ supportDatabases, setSupportDatabases ] = useState([]);
const [ datasources, setDatasources ] = useState([]); const [ datasources, setDatasources ] = useState([]);
const [ filterDatasources, setFilterDatasources ] = useState([]); const [ filterDatasources, setFilterDatasources ] = useState([]);
const [ selectedDatabaseKey, setSelectedDatabaseKey ] = useState(''); const [ selectedDatabaseKey, setSelectedDatabaseKey ] = useState('all');
const [ loadingDatabases, setLoadingDatabases ] = useState(false); const [ loadingDatabases, setLoadingDatabases ] = useState(false);
const [ loadingDatasources, setLoadingDatasources ] = useState(false); const [ loadingDatasources, setLoadingDatasources ] = useState(false);
const [ updateDatasourceModalVisible, setUpdateDatasourceModalVisible ] = useState(false); const [ updateDatasourceModalVisible, setUpdateDatasourceModalVisible ] = useState(false);
...@@ -31,21 +33,28 @@ const DatasourceManage = () => { ...@@ -31,21 +33,28 @@ const DatasourceManage = () => {
const [modal, contextHolder] = Modal.useModal(); const [modal, contextHolder] = Modal.useModal();
useEffect(() => { useEffect(() => {
getSupportDatabasesThenGetAllDatasources(); getScopesAndSupportDatabases();
//eslint-disable-next-line react-hooks/exhaustive-deps //eslint-disable-next-line react-hooks/exhaustive-deps
}, []) }, [])
const getSupportDatabasesThenGetAllDatasources = () => { useEffect(() => {
if ((selectedScope||[]).length>0) {
getAllDatasources();
}
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [ selectedScope ])
const getScopesAndSupportDatabases = () => {
setLoadingDatabases(true); setLoadingDatabases(true);
dispatch({ dispatch({
type: 'datasource.getSupportedTargetTypes', type: 'datasource.getScopesAndSupportedTargetTypes',
callback: data => { callback: data => {
setLoadingDatabases(false); setLoadingDatabases(false);
setRawSupportDatabases(data||[]); convertScopes(data.scopes||[]);
setSupportDatabases([{ targetType: 'all', targetName: '全部类型' }, ...(data||[])]); setRawSupportDatabases(data.typies||[]);
setSupportDatabases([{ targetType: 'all', targetName: '全部类型' }, ...(data.typies||[])]);
setSelectedDatabaseKey('all'); setSelectedDatabaseKey('all');
getAllDatasources('all');
}, },
error: () => { error: () => {
setLoadingDatabases(false); setLoadingDatabases(false);
...@@ -53,17 +62,62 @@ const DatasourceManage = () => { ...@@ -53,17 +62,62 @@ const DatasourceManage = () => {
}) })
} }
const getAllDatasources = (dbKey = selectedDatabaseKey) => { const convertScopes = (data) => {
const newScopes = [...(data||[])];
const defaultScope = [];
newScopes.forEach((item, index) => {
item.value = item.domainId;
item.label = item.domainName||'';
item.children = [];
if (index === 0) {
defaultScope.push(item.domainId);
}
(item.catalogs||[]).forEach((catalog, _index) => {
if (_index === 0) {
item.children.push({ label: '领域', disabled: true });
}
if (index===0 && _index===0) {
defaultScope.push(catalog.catalogId);
}
const children = [];
(catalog.scopes||[]).forEach((scope, __index) => {
if (__index === 0) {
children.push({ label: '系统', disabled: true });
}
if (index===0 && _index===0 && __index===0) {
defaultScope.push(scope.scopeId);
}
children.push({ value: scope.scopeId, label: scope.scopeName||'' });
})
item.children.push({ value: catalog.catalogId, label: catalog.catalogName||'', children });
})
})
setScopes([{ label: '环境', disabled: true }, ...newScopes]);
setSelectedScope(defaultScope);
}
const getAllDatasources = () => {
setLoadingDatasources(true); setLoadingDatasources(true);
dispatch({ dispatch({
type: 'datasource.getAllDatasources', type: 'datasource.getAllDatasources',
payload: { payload: {
namespace: (selectedScope.length>0?selectedScope[0]:''),
scope: (selectedScope.length>2?selectedScope[2]:'')
}, },
callback: data => { callback: data => {
setLoadingDatasources(false); setLoadingDatasources(false);
setDatasources(data); setDatasources(data);
setFilterDatasources((data||[]).filter(item=>dbKey==='all'||item.type===dbKey)); setFilterDatasources((data||[]).filter(item=>selectedDatabaseKey==='all'||item.type===selectedDatabaseKey));
}, },
error: () => { error: () => {
setLoadingDatasources(false); setLoadingDatasources(false);
...@@ -71,6 +125,10 @@ const DatasourceManage = () => { ...@@ -71,6 +125,10 @@ const DatasourceManage = () => {
}) })
} }
const onScopeChange = (value) => {
setSelectedScope(value);
}
const onDatabaseChange = (value) => { const onDatabaseChange = (value) => {
setSelectedDatabaseKey(value); setSelectedDatabaseKey(value);
setFilterDatasources((datasources||[]).filter(item=>value==='all'||item.type===value)); setFilterDatasources((datasources||[]).filter(item=>value==='all'||item.type===value));
...@@ -183,7 +241,15 @@ const DatasourceManage = () => { ...@@ -183,7 +241,15 @@ const DatasourceManage = () => {
}} }}
> >
<Space> <Space>
<span>数据库类型:</span> <span>系统:</span>
<Cascader
options={scopes}
expandTrigger="hover"
onChange={onScopeChange}
value={selectedScope}
allowClear={false}
/>
<span>数据源类型:</span>
<Select <Select
loading={loadingDatabases} loading={loadingDatabases}
value={selectedDatabaseKey} value={selectedDatabaseKey}
...@@ -222,6 +288,7 @@ const DatasourceManage = () => { ...@@ -222,6 +288,7 @@ const DatasourceManage = () => {
<UpdateDatasourceModal <UpdateDatasourceModal
visible={updateDatasourceModalVisible} visible={updateDatasourceModalVisible}
id={currentDatasourceId} id={currentDatasourceId}
scope={selectedScope}
databases={rawSupportDatabases} databases={rawSupportDatabases}
action={updateDatasourceModalAction} action={updateDatasourceModalAction}
onCancel={onUpdateDatasourceModalCancel} onCancel={onUpdateDatasourceModalCancel}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment