数据源接口对接调整

app/components/chart/list.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+class chartList extends React.Component {
+    constructor() {
+        
+    }
+}
+
+export default chartList;

app/components/common/navigator.jsx

@@ -17,7 +17,7 @@ class Navigator extends React.Component {
             mode="horizontal"
         >     
             <Menu.Item key="mypage">
-                <Link to='/home'><Icon type="home" />我的</Link>
+                <Link to='/'><Icon type="home" />主页</Link>
             </Menu.Item>
             <Menu.Item key="dashboards">
                 <Icon type="desktop" />看板与报告

app/components/datasource/columnConfig.jsx

@@ -91,13 +91,13 @@ class DataSourceColumnConfig extends React.Component {
             }
         }, {
             title: '数据类型',
-            dataIndex: 'columnType',
-            key: 'columnType',
+            dataIndex: 'dataType',
+            key: 'dataType',
             width: 80
         }, {
             title: '分析类型',
-            dataIndex: 'dataType',
-            key: 'dataType',
+            dataIndex: 'columnType',
+            key: 'columnType',
             width: 80,
             render: (text, record) => {
                 return (
@@ -107,9 +107,9 @@ class DataSourceColumnConfig extends React.Component {
                         onChange={(value) => {
                             let columns = dataSource.newOne.columns.map(c => {
                                 if(c.key == record.key) {
-                                    c.dataType = value;
-                                    c.groupable = c.dataType == 'categorical';
-                                    c.bucketizable = ['time', 'scale', 'ordinal'].indexOf(record.dataType) != -1;
+                                    c.columnType = value;
+                                    c.groupable = c.columnType == 'categorical';
+                                    c.bucketizable = ['time', 'scale', 'ordinal'].indexOf(record.columnType) != -1;
                                 }
                                 return c;
                             });
@@ -125,11 +125,11 @@ class DataSourceColumnConfig extends React.Component {
                             <SelectOption value='ordinal' key='ordinal'>序值</SelectOption>,
                             <SelectOption value='string' key='string'>字符串</SelectOption>
                         ].map((s, i) => {
-                            if(record.columnType=='VARCHAR2' && [0,2,5].indexOf(i) != -1) {
+                            if(record.dataType=='VARCHAR2' && [0,2,5].indexOf(i) != -1) {
                                 return s;
-                            }else if(record.columnType=='DATE' && [1].indexOf(i) != -1) {
+                            }else if(record.dataType=='DATE' && [1].indexOf(i) != -1) {
                                 return s;
-                            }else if(record.columnType=='NUMBER' && [0,2,3,4,5].indexOf(i) != -1) {
+                            }else if(record.dataType=='NUMBER' && [0,2,3,4,5].indexOf(i) != -1) {
                                 return s;
                             }else {
                                 return null
@@ -145,7 +145,7 @@ class DataSourceColumnConfig extends React.Component {
             key: 'groupable',
             width: 50,
             className: 'column-groupable',
-            render: (value, record) => <Switch disabled={record.dataType!='categorical'} checked={value} onChange={(checked) => {
+            render: (value, record) => <Switch disabled={record.columnType!='categorical'} checked={value} onChange={(checked) => {
                 let columns = dataSource.newOne.columns.map(c => {
                     if(c.key == record.key) {
                         c.groupable = checked;
@@ -161,7 +161,7 @@ class DataSourceColumnConfig extends React.Component {
             width: 50,
             className: 'column-bucketizable',
             render: (value, record) => <Switch
-                disabled={['time', 'scale', 'ordinal'].indexOf(record.dataType)==-1}
+                disabled={['time', 'scale', 'ordinal'].indexOf(record.columnType)==-1}
                 checked={value}
                 defaultChecked={true}
                 onChange={(checked) => {
@@ -197,6 +197,7 @@ class DataSourceColumnConfig extends React.Component {
             }
         }];
 
+        console.log(dataSource.newOne.type);
         return (
             <div>
                 {

app/components/datasource/dataConnectBox.jsx

@@ -16,11 +16,11 @@ const DataConnectBox = ({operation, dispatch, dataConnect, visibleBox, hideBox,
         wrapperCol: { span: 20 },
     };
 
-    const okHandler = () => {
+    const okHandler = (model) => {
         if(operation == 'create') {
             dispatch({ type: 'dataConnect/remoteAdd' });
         }else if(operation == 'modify') {
-            dispatch({ type: 'dataConnect/modify' });
+            dispatch({ type: 'dataConnect/remoteModify', code: model.code });
         }
         hideBox();
     }
@@ -30,7 +30,7 @@ const DataConnectBox = ({operation, dispatch, dataConnect, visibleBox, hideBox,
             className='newdataconnect-box'
             title={`${operation=='create'?'新增':'修改'}数据库连接配置`}
             visible={visibleBox}
-            onOk={() => {okHandler()}}
+            onOk={() => {okHandler(dataConnect.newOne)}}
             onCancel={hideBox}
             maskClosable={false}
             destroyOnClose={true}

app/components/datasource/dataSourceDetail.jsx

@@ -19,35 +19,45 @@ class DataSourceDetail extends React.Component {
             mode: props.match.params.code&&props.match.params.code=='create'?'create':'modify',
             type: props.match.params.type,
             code: props.match.params.code,
-            current: 0
+            tab: props.match.params.tab,
+            current: ['base', 'column', 'access'].indexOf(props.match.params.tab)
         }
     }
 
     componentDidMount() {
-        this.props.dispatch({ type: 'dataSource/setNewModelField', name: 'type', value: this.props.match.params.type });
-        this.props.dispatch({ type: 'dataSource/setNewModelField', name: 'code', value: this.props.match.params.code });
+        this.props.dispatch({ type: 'dataSource/setNewModelFields', fields: [
+            { name: 'type', value: this.props.match.params.type },
+            { name: 'code', value: this.props.match.params.code }
+        ] });
     }
 
     next() {
-        const current = this.state.current + 1;
-        this.setState({ current });
+        const { type, current } = this.state;
+        this.setState({ current: current + 1 });
+        let step = ['base', 'column', 'access'][current + 1];
+        this.props.dispatch({ type: 'main/redirect', path: '/datasource/' + type + '/create/' + step })
     }
 
     prev() {
-        const current = this.state.current - 1;
-        this.setState({ current });
+        const { type, current } = this.state;
+        this.setState({ current: current - 1 });
+        let step = ['base', 'column', 'access'][current - 1];
+        this.props.dispatch({ type: 'main/redirect', path: '/datasource/' + type + '/create/' + step })
     }
 
     render() {
         const { dispatch } = this.props;
-        const { mode, current } = this.state;
+        const { type, mode, code, tab, current } = this.state;
         const steps = [{
+            tabName: 'base',
             title: '属性配置',
             content: <BaseConfig/>
         }, {
+            tabName: 'column',
             title: '数据列配置',
             content: <ColumnConfig />
         }, {
+            tabName: 'access',
             title: '权限配置',
             content: <AccessConfig />
         }];
@@ -75,15 +85,25 @@ class DataSourceDetail extends React.Component {
                             {
                                 current === steps.length - 1
                                 && <Button type="primary" onClick={() => {
-                                    dispatch({ type: 'dataSource/add' })
-                                    dispatch({ type: 'main/redirect', path: { pathname: '/dataSource' } });
+                                    dispatch({ type: 'dataSource/remoteAdd' })
+                                    dispatch({ type: 'main/redirect', path: { pathname: '/datasource' } });
                                 }}>完成</Button>
                             }
                         </div>
                     </div>) : (
-                        <Tabs defaultActiveKey="tab-0" type="card">
+                        <Tabs activeKey={tab} type="card"
+                            onChange={(key) => {
+                                dispatch({ type: 'main/redirect', path: '/datasource/' + type + '/' + code + '/' + key })
+                                this.setState({
+                                    tab: key
+                                })
+                            }}
+                            tabBarExtraContent={<Button onClick={() => {
+                                dispatch({ type: 'dataSource/remoteModify', code: this.props.match.params.code });
+                            }}>保存修改</Button>}
+                        >
                             {steps.map((item, index) => {
-                                return <TabPane className='tab-datasource' key={'tab-' + index} tab={item.title}>
+                                return <TabPane className='tab-datasource' key={item.tabName} tab={item.title}>
                                     {item.content}
                                 </TabPane>
                             })}

app/components/datasource/datasource.jsx

@@ -86,23 +86,25 @@ class DataSource extends React.Component {
                 <Menu.Item
                     onClick={(e) => {
                         let selectedModel = dataSource.list.find((i) => { return i.code == selectedDataSourceCode })
-                        dispatch({ type: 'dataSource/setNewModel', model: selectedModel });
-                        dispatch({type: 'main/redirect', path: {pathname: '/datasource/'+ selectedModel.type +'/' + selectedModel.code}});
+                        dispatch({type: 'main/redirect', path: {pathname: '/datasource/'+ selectedModel.type +'/' + selectedModel.code + '/base'}});
                     }}>
                     <Icon type="info-circle-o" />属性设置
                 </Menu.Item>
-                <Menu.Item>
-                    {/* <Link to='/dataSource/1111'> */}
-                        <Icon type="table" />数据列设置
-                    {/* </Link> */}
+                <Menu.Item onClick={() => {
+                    let selectedModel = dataSource.list.find((i) => { return i.code == selectedDataSourceCode })
+                    dispatch({type: 'main/redirect', path: {pathname: '/datasource/'+ selectedModel.type +'/' + selectedModel.code + '/column'}});
+                }}>
+                    <Icon type="table" />数据列设置
                 </Menu.Item>
                 <Menu.Item><Icon type="search" />预览数据</Menu.Item>
-                <Menu.Item><Icon type="lock" />权限设置</Menu.Item>
+                <Menu.Item onClick={() => {
+                    let selectedModel = dataSource.list.find((i) => { return i.code == selectedDataSourceCode })
+                    dispatch({type: 'main/redirect', path: {pathname: '/datasource/'+ selectedModel.type +'/' + selectedModel.code + '/access'}});
+                }}><Icon type="lock" />权限设置</Menu.Item>
                 <Menu.Divider />
                 <Menu.Item
                     onClick={(e) => {
-                        let selectedModel = dataSource.list.find((i) => { return i.code == selectedDataSourceCode })
-                        dispatch({ type: 'dataSource/delete', model: selectedModel });
+                        dispatch({ type: 'dataSource/remoteDelete', code: selectedDataSourceCode });
                     }}
                 ><Icon type="delete" />删除</Menu.Item>
             </Menu>
@@ -243,9 +245,6 @@ class DataSource extends React.Component {
                 defaultActiveKey="1"
                 tabBarExtraContent={
                     <div className='datasource-tabs-tools'>
-                        <Button onClick={()=>{
-                            dispatch({type: activeTab=='dataConnect'?'dataConnect/remoteList':'dataSource/testData'});
-                        }}>测试数据</Button>
                         <Search
                             placeholder="请输入关键字"
                             onSearch={value => console.log(value)}
@@ -266,6 +265,7 @@ class DataSource extends React.Component {
                             </Button>
                         </Dropdown>
                         <Button style={{ display: activeTab=='dataConnect'?'inline-block':'none' }} onClick={(e) => {
+                            dispatch({ type: 'dataConnect/resetNewModel' });
                             this.showDataConnectBox('create')
                         }}>
                             <Icon type="plus" />添加数据连接

app/constants/url.js

@@ -1,18 +1,26 @@
-const BASE_URL = 'http://192.168.253.38:8080';
+const BASE_URL = 'http://192.168.253.129:8080';
 
 /**后台接口地址 */
 const URLS = {
     
     DATASOURCE_ADD: BASE_URL + '/inputDataConnector', // 新增数据源
 
-    DATASOURCE_UPDATE: BASE_URL + '/updateDate', // 修改数据源
+    DATASOURCE_UPDATE: BASE_URL + '/updateData', // 修改数据源
+
+    DATASOURCE_DELETE: BASE_URL + '/delDataConnector', // 删除数据源
 
     DATASOURCE_LIST: BASE_URL + '/getListDataConnector', // 获得数据源列表
 
+    DATASOURCE_DETAIL: BASE_URL + '/getDataConnector', // 获得单个数据源详细数据
+
     DATASOURCE_QUERY_COLUMNS: BASE_URL + '/implementSql', // 根据sql请求列数据信息
 
     DATACONNECT_ADD: BASE_URL + '/inputDatabases', // 新增数据连接配置
 
+    DATACONNECT_UPDATE: BASE_URL + '/updatabases', // 修改数据连接配置
+
+    DATACONNECT_DELETE: BASE_URL + '/delDatabases', // 删除数据连接配置
+
     DATACONNECT_LIST: BASE_URL + '/getDatabases', // 获得数据连接列表
 
     CHART_BAR_OPTION: BASE_URL + '/showHistogram', // 请求柱状图展示数据

app/models/dataConnect.js

@@ -77,7 +77,7 @@ export default {
         }
     },
     effects: {
-        *remoteList(action, { select, call, put, takeEvery, takeLatest }) {
+        *fetchList(action, { select, call, put, takeEvery, takeLatest }) {
             try {
                 const res = yield call(service.fetch, {
                     url: URLS.DATACONNECT_LIST,
@@ -86,7 +86,7 @@ export default {
                 let data = res.data.data.map((r, i) => {
                     return {
                         key: i,
-                        id: r.id,
+                        code: r.id,
                         name: r.name,
                         dbName: r.dataName,
                         dbType: r.databaseType,
@@ -128,6 +128,47 @@ export default {
                 //yield takeLatest({ type: 'loadList', data: [] });
             }
         },
+        *remoteModify(action, { select, call, put }) {
+            try{
+                const dataConnect = yield select(state => state.present.dataConnect);
+                let model = dataConnect.newOne;
+                const code = action.code;
+                let list = dataConnect.list;
+    
+    
+                let data = {
+                    id: code,
+                    name: model.name,
+                    addrass: model.address,
+                    port: model.port,
+                    databaseType: model.dbType,
+                    dataName: model.dbName,
+                    userName: model.userName,
+                    passWord: model.password,
+                    note: model.description
+                };
+                console.log(data);
+                const res = yield call(service.fetch, {
+                    url: URLS.DATACONNECT_UPDATE,
+                    body: data
+                });
+                if(!res.err && res.data.code > 0) {
+                    list = list.map(l => {
+                        if(l.code == action.code) {
+                            l = model;
+                        }
+                        return l;
+                    });
+                    yield put({ type: 'list', data: list });
+                    message.success('修改成功');
+                }else {
+                    message.error('修改失败');
+    
+                }
+            }catch(e) {
+                message.error('修改失败');
+            }
+        },
         *remoteDelete(action, { select, call, put, takeEvery, takeLatest }) {
             const model = action.model;
             try {
@@ -145,10 +186,8 @@ export default {
     },
     subscriptions: {
         setup({ dispatch, history }) {
+            dispatch({ type: 'fetchList' })
             return history.listen(({ pathname, query }) => {
-                if (pathname.startsWith('/datasource')) {
-                    dispatch({ type: 'remoteList' })
-                }
             })
         }
     }

app/models/dataSource.js

@@ -101,23 +101,24 @@ export default {
         }
     },
     effects: {
-        *remoteList(action, { select, call, put, takeEvery, takeLatest }) {
+        *fetchList(action, { select, call, put, takeEvery, takeLatest }) {
             try {
                 const res = yield call(service.fetch, {
                     url: URLS.DATASOURCE_LIST,
                     body: {}
                 });
                 let data = res.data.data.map((r, i) => {
-                    // r.dbConfig = JSON.parse(r.dbConfig);
+                    let dbConfig = JSON.parse(r.dbConfig);
+                    let tags = JSON.parse(r.dataTag);
                     return {
-                        key: i,
+                        key: r.dataId,
                         code: r.dataId,
                         name: r.dataName,
                         type: r.type || 'database',
-                        dbType: 'oracle',
+                        dbType: dbConfig.databaseType,
                         creator: r.createBy,
                         createTime: new Date(r.createDate),
-                        tags: ['tttt', 'accc'],
+                        tags: tags,
                         description: r.note
                     }
                 });
@@ -130,6 +131,107 @@ export default {
             }
             
         },
+        *remoteAdd(action, { select, call, put }) {
+            const dataSource = yield select(state => state.present.dataSource);
+            const model = dataSource.newOne;
+            try {
+                const data = {
+                    dataName: model.name,
+                    note: model.description,
+                    loadObject: model.target,
+                    dataTag: model.tags,
+                    type: model.type,
+                    createBy: 'admin',
+                    dbConfig: {
+                        addrass: model.address,
+                        port: model.port,
+                        databaseType: model.dbType,
+                        dataName: model.dbName,
+                        userName: model.userName,
+                        passWord: model.password
+                    },
+                    columnConfig: model.columns.map((c, i) => {
+                        return {
+                            columnName: c.name,
+                            columnLable: c.alias,
+                            dataType: c.dataType,
+                            columnType: c.columnType,
+                            isGroup: c.groupable?'1':'0',
+                            isSubsection: c.bucketizable?'1':'0',
+                            isOpen: c.using?'1':'0',
+                            remarks: c.description
+                        }
+                    })
+                };
+                console.log(data);
+                const res = yield call(service.fetch, {
+                    url: URLS.DATASOURCE_ADD,
+                    body: data
+                });
+                if(!res.err && res.data.code > 0) {
+                    message.success('新增成功!');
+                    yield put({ type: 'fetchList' });
+                }else {
+                    message.error('新增失败!');
+                }
+            }catch(e) {
+                message.error('新增失败!');
+
+            }
+        },
+        *remoteDetail(action, { select, call, put }) {
+            const dataSource = yield select(state => state.present.dataSource);
+            const model = dataSource.newOne;
+            const code = action.code;
+            if(model.code == code){
+                return
+            }
+            try {
+                const res = yield call(service.fetch, {
+                    url: URLS.DATASOURCE_DETAIL,
+                    body: code
+                });
+                let resData = res.data.data;
+                let columnConfig = JSON.parse(resData.columnConfig);
+                let dbConfig = JSON.parse(resData.dbConfig);
+                let tags = JSON.parse(resData.dataTag);
+                let data = {
+                    code: resData.dataId,
+                    name: resData.dataName,
+                    type: resData.type,
+                    dbType: dbConfig.databaseType,
+                    dbName: dbConfig.dataName,
+                    address: dbConfig.addrass,
+                    port: dbConfig.port,
+                    target: resData.loadObject,
+                    creator: resData.createBy,
+                    createTime: new Date(resData.createDate),
+                    userName: dbConfig.userName,
+                    password: dbConfig.passWord,
+                    tags: tags,
+                    description: resData.note,
+                    columns: columnConfig.map((c, i) => {
+                        return {
+                            key: i,
+                            using: c.isOpen=='1'?true:false,
+                            name: c.columnName,
+                            alias: c.columnLable,
+                            dataType: c.dataType,
+                            columnType: c.columnType,
+                            groupable: c.isGroup=='1'?true:false,
+                            bucketizable: c.isSubsection=='1'?true:false,
+                            description: c.remarks
+                        }
+                    })
+                }
+                console.log(data);
+                yield put({ type: 'setNewModel', model: data });
+            }catch(e) {
+                message.error('失败');
+                console.log(e);
+                yield put({ type: 'list', data: [] });
+            }
+        },
         *importNewModelColumns(action, { select, call, put }) {
             const dataSource = yield select(state => state.present.dataSource);
             const sqlStr = dataSource.newOne.target;
@@ -141,18 +243,18 @@ export default {
             });
             console.log(res);
 
-            const getDataType = (columnType) => {
-                let dataType = 'string';
-                if(columnType == 'VARCHAR2') {
-                    dataType = 'categorical';
-                }else if(columnType == 'NUMBER') {
-                    dataType = 'scale'
-                }else if(columnType == 'DATE') {
-                    dataType = 'time'
-                }else if(columnType == 'NUMBER') {
-                    dataType = 'scale'
+            const getColumnType = (dataType) => {
+                let columnType = 'string';
+                if(dataType == 'VARCHAR2') {
+                    columnType = 'categorical';
+                }else if(dataType == 'NUMBER') {
+                    columnType = 'scale'
+                }else if(dataType == 'DATE') {
+                    columnType = 'time'
+                }else if(dataType == 'NUMBER') {
+                    columnType = 'scale'
                 }
-                return dataType;
+                return columnType;
             }
 
             if(!res.err && res.data.code > 0) {
@@ -162,8 +264,8 @@ export default {
                         using: true,
                         name: d.columnName,
                         alias: d.remarks?d.remarks.substring(0, 10):'',
-                        columnType: d.columnType,
-                        dataType: getDataType(d.columnType),
+                        dataType: d.columnType,
+                        columnType: getColumnType(d.columnType),
                         groupable: d.columnType == 'VARCHAR2',
                         bucketizable: d.columnType == 'NUMBER',
                         description: d.remarks
@@ -172,15 +274,95 @@ export default {
                 yield put({ type: 'setNewModelField', name: 'columns', value: columns });
             }else {
                 yield put({ type: 'setNewModelField', name: 'columns', value: [] });
-                // 弹出错误提示
+                message.error('请求数据错误');
+            }
+        },
+        *remoteDelete(action, { select, call, put }) {
+            const res = yield call(service.fetch, {
+                url: URLS.DATASOURCE_DELETE,
+                body: [action.code]
+            });
+            yield put({ type: 'fetchList' });
+        },
+        *remoteModify(action, { select, call, put }) {
+            try{
+                const dataSource = yield select(state => state.present.dataSource);
+                let model = dataSource.newOne;
+                const code = action.code;
+                let list = dataSource.list;
+    
+    
+                let data = {
+                    dataId: code,
+                    dataName: model.name,
+                    note: model.description,
+                    loadObject: model.target,
+                    dataTag: model.tags,
+                    type: model.type,
+                    createBy: 'admin',
+                    dbConfig: {
+                        addrass: model.address,
+                        port: model.port,
+                        databaseType: model.dbType,
+                        dataName: model.dbName,
+                        userName: model.userName,
+                        passWord: model.password
+                    },
+                    columnConfig: model.columns.map((c, i) => {
+                        return {
+                            columnName: c.name,
+                            columnLable: c.alias,
+                            dataType: c.dataType,
+                            columnType: c.columnType,
+                            isGroup: c.groupable?'1':'0',
+                            isSubsection: c.bucketizable?'1':'0',
+                            isOpen: c.using?'1':'0',
+                            remarks: c.description
+                        }
+                    })
+                };
+                console.log(data);
+                const res = yield call(service.fetch, {
+                    url: URLS.DATASOURCE_UPDATE,
+                    body: data
+                });
+                if(!res.err && res.data.code > 0) {
+                    list = list.map(l => {
+                        if(l.code == action.code) {
+                            l = model;
+                        }
+                        return l;
+                    });
+                    yield put({ type: 'list', data: list });
+                    message.success('修改成功');
+                }else {
+                    message.error('修改失败');
+    
+                }
+            }catch(e) {
+                message.error('修改失败');
             }
         }
     },
     subscriptions: {
         setup({ dispatch, history }) {
+            dispatch({ type: 'fetchList' })
             return history.listen(({ pathname, query }) => {
-                if(pathname.startsWith('/datasource')) {
-                    dispatch({ type: 'remoteList' })
+                let detail = pathname.match(/datasource\/(\w+)\/(\w+)/);
+                if(detail) {
+                    if(pathname.match(/datasource\/(\w+)\/(\w+)\/(\w+)/)) {
+                        detail = pathname.match(/datasource\/(\w+)\/(\w+)\/(\w+)/);
+                        let type = detail[1];
+                        let code = detail[2];
+                        let tab = detail[3];
+                        console.log(type, code, tab);
+                        if(code != 'create') {
+                            dispatch({ type: 'remoteDetail', code: code })
+                        }
+                    }else {
+                        // 缺省跳转到属性配置tab
+                        dispatch({ type: 'main/redirect', path: pathname + (pathname.endsWith('/') ? '' : '/') + 'base' })
+                    }
                 }
             })
         }

app/models/main.js

@@ -3,12 +3,18 @@ import { routerRedux } from 'dva/router'
 export default {
     namespace: 'main',
     state: {
+        path: '/'
     },
     reducers: {
+        setPath(state, action) {
+            return { state, path: action.path };
+        }
     },
     effects: {
         * redirect (action, { put }) {
-            yield put(routerRedux.push(action.path || '/'));
+            const path = action.path;
+            yield put(routerRedux.push(path || '/'));
+            yield put({ type: 'setPath', path });
         },
     }
 };

app/routes/mainLayout.js

@@ -20,7 +20,7 @@ const MainLayout = (history) => {
                 <Switch>
                     <Route exact path='/' component={Welcome}/>
                     <Route exact sensitive path='/datasource' component={DataSource}/>
-                    <Route sensitive path='/datasource/:type/:code' component={DataSourceDetail}/>
+                    <Route sensitive path='/datasource/:type/:code/:tab' component={DataSourceDetail}/>
                 </Switch>
             </Content>
         </Layout>