page change

src/app/basicVersion/exampleShow/ExampleDetail.js

@@ -1,43 +1,24 @@
 import React, {Component} from 'react';
-import {Layout, Button, notification, Spin, Row, Col, Icon, message, Input, Radio, Modal} from 'antd';
+import {Layout, Button, notification, Row, Col, Icon, message, Radio} from 'antd';
 import {getCookie} from "../../../cookie";
-import {graphqlUrl, storeFile} from "../../../config";
-import {SEARCH_APIGROUP, SHOW_CLOUD} from "../../../gql";
+import {graphqlUrl} from "../../../config";
+import {SEARCH_APIGROUP} from "../../../gql";
 import {request} from 'graphql-request'
-import axios from 'axios';
-import {deployAll} from "../../../config";
-import {ADD_APIGWPATH, ADD_APIGROUP, ADD_DEPLOY, ADD_PROJECT} from "../../../gql";
-import {idGen} from "../../../func";
 import {FormattedMessage} from 'react-intl';
 import copy from 'copy-to-clipboard';
-import {CloudConfig} from '../../../login/CloudConfig';
+import UserCustom from './UserCustom';
 
 const {Content} = Layout;
-const RadioGroup = Radio.Group;
-axios.defaults.withCredentials = true;
 
 class ExampleDetail extends Component {
     constructor() {
         super();
         this.state = {
             userID: '',
-            check: 0,
-
-            disableDeployButton: false,
-            domain: '',
-
-            cloudName: 'tencent',
-
-            customName: '',
             bucketName: '',
-            dbKind: 'fc-db', // mongodb fc-db
+            domain: '',
+            showCustom: false
         };
-        this.cloudState = {
-            cloudID: '',
-            secretID: '',
-            secretKey: '',
-            appId: ''
-        }
     }
 
     componentWillMount() {
@@ -88,364 +69,85 @@ class ExampleDetail extends Component {
                 })
             }
         })
-
     }
 
     componentWillUnmount() {
         this._isMounted = false;
     }
 
-    deploy = () => {
-        this._isMounted = true;
-        let _this = this;
-        let {userID, dbKind, bucketName, customName} = this.state;
-        let {cloudID} = this.cloudState;
-
-        if (bucketName === '') {
-            console.log('state, 没有传值');
-        } else {
-
-            // 开始调用
-            console.log('开始调用');
-            this.setState({
-                disableDeployButton: true
-            });
-
-            let now = new Date().getTime(),
-                functionName = this.state.userID + '_' + customName,
-                serviceName = this.state.userID + '_' + customName,
-                resources = [`${bucketName}/schema.edn`, `${bucketName}/resolve-map.edn`, `${bucketName}/${dbKind}/${userID}/deploy-conf.edn`];
-
-            if (dbKind === 'mongodb') {
-                resources.push(`${bucketName}/${dbKind}/${userID}/mongo-config.edn`)
-            }
-
-
-            console.log('now', now, 'functionName', functionName, 'serviceName', serviceName, 'resources', resources);
-            axios.post(deployAll,
-                {
-                    'fc-name': functionName,
-                    'bucket': dbKind === 'mongodb' ? 'native-fc' : 'fcdb-deploy',
-                    'object-file': 'fc-only.zip',
-                    'res-bucket': 'case',
-                    'resources': resources,
-                    'service-name': serviceName,
-                    'path': "/*"
-                })
-                .then(function (response) {
-                    console.log('response', response);
-                    if (response['data']['apigw-result'] && response['data']['fc-result']) {
-                        // 处理数据
-                        let result = response['data']['apigw-result'];
-                        let apiData = result['api-info'];
-                        let serviceData = result['service-info'];
-
-                        // 存数据
-                        let pathID = idGen('path'),
-                            groupID = idGen('group'),
-                            deployID = idGen('deploy'),
-                            projectID = idGen('project');
-
-                        let {apiId, path, method} = apiData;
-                        let {serviceName, serviceId, subDomain} = serviceData;
-
-                        let pathVarObj = {
-                            id: idGen('path'),
-                            user_id: userID,
-                            apiGWGroup_id: pathID,
-                            deploy_id: deployID,
-                            apiGWName: functionName,
-                            requestMethod: method,
-                            apiGWPath: path,
-                            apiId: apiId,
-                            apiGWDesc: '',
-                            serviceType: 'SCF',
-                            timeout: 300,
-                            createdAt: now,
-                            updatedAt: ''
-                        };
-
-                        let projectVarObj = {
-                            id: projectID,
-                            projectType: 'case',
-                            cloud_id: cloudID,
-                            user_id: userID,
-                            projectName: functionName,
-                            database_id: '',
-                            apiGWGroup_id: '',
-                            deploy_id: '',
-                            case_id: '',
-                            wxConfig_id: '',
-                            schema_id: '',
-                            createdAt: now,
-                            updatedAt: '',
-                            projectStatus: 'deployed'
-                        };
-
-                        let groupVarObj = {
-                            id: groupID,
-                            cloud_id: cloudID,
-                            user_id: userID,
-                            userStatus: '',
-                            userDomain: '',
-                            groupName: serviceName,
-                            frontType: '',
-                            region: '',
-                            environmentName: '',
-                            defaultDomain: subDomain,
-                            status: '',
-                            serviceId: serviceId,
-                            createdAt: now,
-                            updatedAt: ''
-                        };
-
-                        let deployVarObj = {
-                            id: deployID,
-                            cloud_id: cloudID,
-                            functionName,
-                            cosObjectName: '',
-                            region: '',
-                            cosBucketRegion: '',
-                            description: '',
-                            cosBucketName: '',
-                            vpcId: '',
-                            subnetId: '',
-                            memorySize: 512,
-                            timeout: 300,
-                            handler: '',
-                            serviceName: "",
-                            fc_id: '',
-                            createdAt: now,
-                            updatedAt: ''
-                        };
-
-                        let add_apigwpath = request(graphqlUrl, ADD_APIGWPATH, pathVarObj),
-                            add_project = request(graphqlUrl, ADD_PROJECT, projectVarObj),
-                            add_apigroup = request(graphqlUrl, ADD_APIGROUP, groupVarObj),
-                            add_deploy = request(graphqlUrl, ADD_DEPLOY, deployVarObj);
-
-                        Promise.all([add_apigwpath, add_project, add_apigroup, add_deploy])
-                            .then(value => {
-                                console.log(value);
-
-                                // 展示数据
-                                if (_this._isMounted) {
-                                    _this.setState({
-                                        disableDeployButton: false
-                                    });
-                                }
-
-                                _this.props.changeTabBar('my-deploy');
-                                _this.props.history.push({
-                                    pathname: `/common/deploy`,
-                                    state: {
-                                        // 处理传回数据，直接拼接
-                                        url: `http://${subDomain}/test/graphql`
-                                    }
-                                });
-                            })
-                            .catch(err => {
-                                console.log(err);
-                            });
-                    } else {
-                        console.log('deployAll 失败');
-                    }
-
-                })
-                .catch(function (error) {
-                    console.log('axios error', error);
-                });
-        }
-    };
-
-    getCloudDetail = (cloudID, secretID, secretKey, appId) => {
-        this.cloudState = {
-            cloudID,
-            secretID,
-            secretKey,
-            appId
-        }
+    backToMe = () => {
+        this.setState({
+            showCustom: false
+        })
     };
 
     render() {
-        let {userID, disableDeployButton, bucketName, dbKind, domain, showCustom, cloudName, check} = this.state;
-        let {appId, secretID, secretKey} = this.cloudState;
+        let {userID, bucketName, domain, showCustom} = this.state;
         return (
             <div className={'deploy-choose-cloud'}>
                 <Layout style={{padding: '24px', minHeight: '300px'}}>
                     <Content style={{padding: '20px 50px', background: '#fff'}}>
-
-                        <div>
-                            <div className={'schema-name'}><FormattedMessage id='case graphql domain'/></div>
-                            <div className={'schema-table-list-title'}>
-                                <Row>
-                                    <Col span={15}><span className={'schema-table-title'}><FormattedMessage
-                                        id='defaultDomain'/></span></Col>
-                                </Row>
-                            </div>
-                            <div className={'schema-table-list-content'}>
-                                <Row>
-                                    <Col span={15}>
-                                        <span className={'schema-table-content'}>{domain} </span>
-                                        <Icon type="copy" theme="twoTone" onClick={() => {
-                                            copy(domain);
-                                            message.success('复制成功.');
-                                        }}/>
-                                    </Col>
-                                </Row>
-                            </div>
-                        </div>
-
-
-                        <div style={{marginTop: 20, fontSize: 20}}>
-                            <div className={'schema-name'}><FormattedMessage id='detail'/></div>
-                            这里巴拉巴拉
-                        </div>
-
-
-                        <div style={{marginTop: 20}}>
-                            {
-                                !showCustom ?
-                                    <div className={'choose-cloud-button-group'}>
-                                        <Button className={'choose-cloud-button'} type='primary' onClick={() => {
-                                            if (userID === '') {
-                                                notification['warning']({
-                                                    message: '需要登录',
-                                                    description: '后续使用，需要先登录',
-                                                });
-
-                                                this.props.history.push({
-                                                    pathname: `/login`
-                                                })
-                                            } else {
-                                                this.setState({
-                                                    showCustom: true
-                                                })
-                                            }
-                                        }}>自定义参数设置</Button>
-                                    </div>
-                                    :
+                        {
+                            !showCustom ?
+                                <div>
                                     <div>
-                                        <hr/>
-                                        <div>
-                                            <div className={'schema-name'}><FormattedMessage id='Name'/></div>
-                                            <div>
-                                                <span className='item-title-cloud'><FormattedMessage id='name'/>:</span>
-                                                <Input style={{width: 250}} value={this.state.customName}
-                                                       onChange={(e) => {
-                                                           this.setState({customName: e.target.value})
-                                                       }}/>
-                                            </div>
+                                        <div className={'schema-name'}><FormattedMessage id='case graphql domain'/>
                                         </div>
-                                        <div style={{marginTop: 20}}>
-                                            <div className={'schema-name'}><FormattedMessage id='Cloud Setting'/></div>
-                                            <RadioGroup
-                                                onChange={(e) => {
-                                                    this.setState({cloudName: e.target.value})
-                                                }}
-                                                value={this.state.cloudName}
-                                            >
-                                                <Radio value={'tencent'}><FormattedMessage id='tencent cloud'/></Radio>
-                                                <Radio value={'aliyun'}><FormattedMessage id='aliyun'/></Radio>
-                                                <Radio value={'amazon'}><FormattedMessage id='amazon cloud'/></Radio>
-                                            </RadioGroup>;
-                                            {/*
-                                                该处设置 check 属性，就是为了：当点击取消后，能够再次查询
-                                             */}
-                                            <CloudQueryAndConfig
-                                                userID={userID}
-                                                getCloudDetail={this.getCloudDetail}
-                                                cloudName={cloudName}
-                                                check={check}
-                                                reCheck={() => {
-                                                    this.setState({check: check + 1})
-                                                }}/>
+                                        <div className={'schema-table-list-title'}>
+                                            <Row>
+                                                <Col span={15}><span className={'schema-table-title'}><FormattedMessage
+                                                    id='defaultDomain'/></span></Col>
+                                            </Row>
                                         </div>
-                                        <div style={{marginTop: 20}}>
-                                            <div className={'schema-name'}><FormattedMessage id='DB Choose'/></div>
-                                            <RadioGroup onChange={(e) => {
-                                                this.setState({dbKind: e.target.value})
-                                            }} value={this.state.dbKind}>
-                                                <Radio value='fc-db'>fc-db</Radio>
-                                                <Radio value='mongodb'>mongodb</Radio>
-                                            </RadioGroup>
+                                        <div className={'schema-table-list-content'}>
+                                            <Row>
+                                                <Col span={15}>
+                                                    <span className={'schema-table-content'}>{domain} </span>
+                                                    <Icon type="copy" theme="twoTone" onClick={() => {
+                                                        copy(domain);
+                                                        message.success('复制成功.');
+                                                    }}/>
+                                                </Col>
+                                            </Row>
                                         </div>
-                                        {
-                                            disableDeployButton ?
-                                                <Spin/>
-                                                :
-                                                <Button style={{marginTop: 20}} type='primary' onClick={() => {
-                                                    if (appId && secretID && secretKey) {
-                                                        this.setState({
-                                                            disableDeployButton: true
-                                                        });
-
-                                                        // store *.edn to cos
-                                                        let deployConf = dbKind === 'mongodb' ?
-                                                            ` {:secretId "${secretID}"\n` +
-                                                            ` :secretKey "${secretKey}"\n` +
-                                                            ` :appId "${appId}"\n` +
-                                                            ' :region "ap-beijing" \n' +
-                                                            ' }\n'
-                                                            :
-                                                            ` {:secretId "${secretID}"\n` +
-                                                            ` :secretKey "${secretKey}"\n` +
-                                                            ` :appId "${appId}"\n` +
-                                                            ' :region "ap-beijing"\n' +
-                                                            ' :bucket "fc-db"\n' +
-                                                            ' :trustStore "/etc/ssl/certs/java/cacerts"\n' +
-                                                            ` :fc-db-store "save/${bucketName}.dat"\n` +
-                                                            ' :fc-db-dir "fc-db"\n' +
-                                                            ' :graphql-url "http://orderfcdb.ioobot.cn/graphql"\n' +
-                                                            ' :local-tmp-dir "/tmp"\n' +
-                                                            ' :local-db-file "fcdb.dat"\n' +
-                                                            ' :update-tx? true \n' +
-                                                            ' :force-down? true\n' +
-                                                            ' }';
-
-                                                        let a = axios.post(storeFile, {
-                                                            'file-name': `${bucketName}/${dbKind}/${userID}/deploy-conf.edn`,
-                                                            bucket: 'case',
-                                                            cont: deployConf
-                                                        });
+                                    </div>
 
-                                                        let cont = '{:uri {\n' +
-                                                            ':auth {:admin-db   "order"\n' +
-                                                            ' :u    "ly"\n' +
-                                                            ' :p   "autorunC1705"\n' +
-                                                            ' :host "119.27.174.13"}}\n' +
-                                                            ' :db-name "order"}';
 
-                                                        let b = dbKind === 'mongodb' ?
-                                                            axios.post(storeFile, {
-                                                                'file-name': `${bucketName}/${dbKind}/${userID}/mongo-config.edn`,
-                                                                bucket: 'case',
-                                                                cont
-                                                            })
-                                                            :
-                                                            Promise.resolve({status: 200});
+                                    <div style={{marginTop: 20, fontSize: 20}}>
+                                        <div className={'schema-name'}><FormattedMessage id='detail'/></div>
+                                        这里巴拉巴拉
+                                    </div>
 
-                                                        Promise.all([a, b]).then(value => {
-                                                            if (value.every(res => res.status === 200)) {
-                                                                console.log('store file success , start deploying');
-                                                                this.deploy();
-                                                            }
-                                                        });
-                                                    } else {
-                                                        notification['warning']({
-                                                            message: '需要填写配置',
-                                                            description: '后续使用，需要先填写配置',
-                                                        });
 
-                                                        this.props.history.push({
-                                                            pathname: `/login/cloud`
-                                                        })
-                                                    }
-                                                }}>部署</Button>
-                                        }
+                                    <div style={{marginTop: 20}}>
+                                        <div className={'choose-cloud-button-group'}>
+                                            <Button className={'choose-cloud-button'} type='primary' onClick={() => {
+                                                if (userID === '') {
+                                                    notification['warning']({
+                                                        message: '需要登录',
+                                                        description: '后续使用，需要先登录',
+                                                    });
+
+                                                    this.props.history.push({
+                                                        pathname: `/login`
+                                                    })
+                                                } else {
+                                                    this.setState({
+                                                        showCustom: true
+                                                    })
+                                                }
+                                            }}>自定义参数设置</Button>
+                                        </div>
                                     </div>
-                            }
-                        </div>
+                                </div>
+                                :
+                                <UserCustom
+                                    userID={userID}
+                                    bucketName={bucketName}
+                                    history={this.props.history}
+                                    backToMe={this.backToMe}
+                                />
+                        }
                     </Content>
                 </Layout>
             </div>
@@ -453,105 +155,4 @@ class ExampleDetail extends Component {
     }
 }
 
-export default ExampleDetail
-
-class CloudQueryAndConfig extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            cloudName: props.cloudName,
-            userID: props.userID,
-            cloudID: '',
-            secretID: '',
-            secretKey: '',
-            appId: '',
-            showCloudConfigTip: false,
-
-            visible: false,
-            confirmLoading: false,
-        }
-    }
-
-    searchCloud = () => {
-        let {userID, cloudName} = this.state;
-        // 如果登录，查询该用户是否设置 cloud
-        request(graphqlUrl, SHOW_CLOUD, {user_id: userID}).then(data => {
-                let clouds = data.cloud_by_props.filter(cloud => cloud.cloudName === cloudName);
-                // 如果限制一个云服务商一个 cloud，那么就是clouds[0]
-                if (clouds.length === 1) {
-                    let cloud = clouds[0];
-                    let {id, secretId, secretKey, appId} = cloud;
-                    this.setState({
-                        cloudID: id,
-                        secretID: secretId,
-                        secretKey,
-                        appId
-                    });
-                    this.props.getCloudDetail(id, secretId, secretKey, appId);
-                    this.setState({
-                        showCloudConfigTip: false
-                    })
-                } else if (clouds.length > 1) {
-                    console.log('数据库有多个同一云服务商的 key');
-                } else {
-                    this.setState({
-                        showCloudConfigTip: true
-                    })
-                }
-            }
-        )
-    };
-
-    componentWillMount() {
-        this.searchCloud()
-    }
-
-    componentWillReceiveProps(next) {
-        console.log(next);
-        this.setState({
-            cloudName: next.cloudName,
-            userID: next.userID,
-        }, this.searchCloud);
-    }
-
-    showModal = () => {
-        this.setState({
-            visible: true,
-        });
-    };
-
-    handleCancel = () => {
-        this.setState({
-            visible: false,
-        });
-        this.props.reCheck();
-    };
-
-
-    render() {
-        let {showCloudConfigTip, visible, confirmLoading} = this.state;
-        return (
-            <div>
-                {
-                    showCloudConfigTip ?
-                        <div>
-                            <Button type="danger" size="small" onClick={this.showModal}>
-                                <FormattedMessage id='no this cloud, click to save'/>
-                            </Button>
-                            <Modal
-                                title="设置 cloud"
-                                visible={visible}
-                                confirmLoading={confirmLoading}
-                                footer={null}
-                                onCancel={this.handleCancel}
-                            >
-                                <CloudConfig/>
-                            </Modal>
-                        </div>
-                        :
-                        ''
-                }
-            </div>
-        )
-    }
-}
+export default ExampleDetail

src/app/basicVersion/exampleShow/UserCustom.js

@@ -0,0 +1,449 @@
+import React, {Component} from 'react';
+import {deployAll, graphqlUrl, storeFile} from "../../../config";
+import {ADD_APIGROUP, ADD_APIGWPATH, ADD_DEPLOY, ADD_PROJECT, SHOW_CLOUD} from "../../../gql";
+import {CloudConfig} from "../../../login/CloudConfig";
+import {Button, notification, Spin, Input, Radio, Modal, Icon} from 'antd';
+import {FormattedMessage} from 'react-intl';
+import {request} from 'graphql-request'
+import {idGen} from "../../../func";
+import axios from 'axios';
+
+const RadioGroup = Radio.Group;
+axios.defaults.withCredentials = true;
+
+class UserCustom extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            userID: props.userID,
+            bucketName: props.bucketName,
+            customName: '',
+            cloudName: 'tencent',
+            dbKind: 'fc-db', // mongodb fc-db
+            check: 0,
+            disableDeployButton: false,
+        };
+
+        this.cloudState = {
+            cloudID: '',
+            secretID: '',
+            secretKey: '',
+            appId: ''
+        }
+    }
+
+    getCloudDetail = (cloudID, secretID, secretKey, appId) => {
+        this.cloudState = {
+            cloudID,
+            secretID,
+            secretKey,
+            appId
+        }
+    };
+
+    deploy = () => {
+        this._isMounted = true;
+        let _this = this;
+        let {userID, dbKind, bucketName, customName} = this.state;
+        let {cloudID} = this.cloudState;
+
+        if (bucketName === '') {
+            console.log('state, 没有传值');
+        } else {
+
+            // 开始调用
+            console.log('开始调用');
+            this.setState({
+                disableDeployButton: true
+            });
+
+            let now = new Date().getTime(),
+                functionName = userID + '_' + customName,
+                serviceName = userID + '_' + customName,
+                resources = [`${bucketName}/schema.edn`, `${bucketName}/resolve-map.edn`, `${bucketName}/${dbKind}/${userID}/deploy-conf.edn`];
+
+            if (dbKind === 'mongodb') {
+                resources.push(`${bucketName}/${dbKind}/${userID}/mongo-config.edn`)
+            }
+
+            console.log('now', now, 'functionName', functionName, 'serviceName', serviceName, 'resources', resources);
+            axios.post(deployAll,
+                {
+                    'fc-name': functionName,
+                    'bucket': dbKind === 'mongodb' ? 'native-fc' : 'fcdb-deploy',
+                    'object-file': 'fc-only.zip',
+                    'res-bucket': 'case',
+                    'resources': resources,
+                    'service-name': serviceName,
+                    'path': "/*"
+                })
+                .then(function (response) {
+                    console.log('response', response);
+                    if (response['data']['apigw-result'] && response['data']['fc-result']) {
+                        // 处理数据
+                        let result = response['data']['apigw-result'];
+                        let apiData = result['api-info'];
+                        let serviceData = result['service-info'];
+
+                        // 存数据
+                        let pathID = idGen('path'),
+                            groupID = idGen('group'),
+                            deployID = idGen('deploy'),
+                            projectID = idGen('project');
+
+                        let {apiId, path, method} = apiData;
+                        let {serviceName, serviceId, subDomain} = serviceData;
+
+                        let pathVarObj = {
+                            id: idGen('path'),
+                            user_id: userID,
+                            apiGWGroup_id: pathID,
+                            deploy_id: deployID,
+                            apiGWName: functionName,
+                            requestMethod: method,
+                            apiGWPath: path,
+                            apiId: apiId,
+                            apiGWDesc: '',
+                            serviceType: 'SCF',
+                            timeout: 300,
+                            createdAt: now,
+                            updatedAt: ''
+                        };
+
+                        let projectVarObj = {
+                            id: projectID,
+                            projectType: 'case',
+                            cloud_id: cloudID,
+                            user_id: userID,
+                            projectName: functionName,
+                            database_id: '',
+                            apiGWGroup_id: '',
+                            deploy_id: '',
+                            case_id: '',
+                            wxConfig_id: '',
+                            schema_id: '',
+                            createdAt: now,
+                            updatedAt: '',
+                            projectStatus: 'deployed'
+                        };
+
+                        let groupVarObj = {
+                            id: groupID,
+                            cloud_id: cloudID,
+                            user_id: userID,
+                            userStatus: '',
+                            userDomain: '',
+                            groupName: serviceName,
+                            frontType: '',
+                            region: '',
+                            environmentName: '',
+                            defaultDomain: subDomain,
+                            status: '',
+                            serviceId: serviceId,
+                            createdAt: now,
+                            updatedAt: ''
+                        };
+
+                        let deployVarObj = {
+                            id: deployID,
+                            cloud_id: cloudID,
+                            functionName,
+                            cosObjectName: '',
+                            region: '',
+                            cosBucketRegion: '',
+                            description: '',
+                            cosBucketName: '',
+                            vpcId: '',
+                            subnetId: '',
+                            memorySize: 512,
+                            timeout: 300,
+                            handler: '',
+                            serviceName: "",
+                            fc_id: '',
+                            createdAt: now,
+                            updatedAt: ''
+                        };
+
+                        let add_apigwpath = request(graphqlUrl, ADD_APIGWPATH, pathVarObj),
+                            add_project = request(graphqlUrl, ADD_PROJECT, projectVarObj),
+                            add_apigroup = request(graphqlUrl, ADD_APIGROUP, groupVarObj),
+                            add_deploy = request(graphqlUrl, ADD_DEPLOY, deployVarObj);
+
+                        Promise.all([add_apigwpath, add_project, add_apigroup, add_deploy])
+                            .then(value => {
+                                console.log(value);
+
+                                // 展示数据
+                                if (_this._isMounted) {
+                                    _this.setState({
+                                        disableDeployButton: false
+                                    });
+                                }
+
+                                _this.props.changeTabBar('my-deploy');
+                                _this.props.history.push({
+                                    pathname: `/common/deploy`,
+                                    state: {
+                                        // 处理传回数据，直接拼接
+                                        url: `http://${subDomain}/test/graphql`
+                                    }
+                                });
+                            })
+                            .catch(err => {
+                                console.log(err);
+                            });
+                    } else {
+                        console.log('deployAll 失败');
+                    }
+
+                })
+                .catch(function (error) {
+                    console.log('axios error', error);
+                });
+        }
+    };
+
+    componentWillMount() {
+        this._isMounted = true;
+    }
+
+    componentWillUnmount() {
+        this._isMounted = false;
+    }
+
+    render() {
+        let {cloudName, customName, disableDeployButton, userID, check, dbKind, bucketName} = this.state;
+        let {appId, secretID, secretKey} = this.cloudState;
+        return (
+            <div>
+                <div className="column-menu" onClick={() => {
+                    this.props.backToMe()
+                }}>
+                    <Icon type="left" style={{color: '#3187FA'}}/> <FormattedMessage id="back to case show"/>
+                </div>
+
+                <div>
+                    <div className={'schema-name'}><FormattedMessage id='Name'/></div>
+                    <div>
+                        <span className='item-title-cloud'><FormattedMessage id='name'/>:</span>
+                        <Input
+                            style={{width: 250}}
+                            value={customName}
+                            onChange={(e) => {
+                                this.setState({customName: e.target.value})
+                            }}/>
+                    </div>
+                </div>
+                <div style={{marginTop: 20}}>
+                    <div className={'schema-name'}><FormattedMessage id='Cloud Setting'/></div>
+                    <RadioGroup
+                        onChange={(e) => {
+                            this.setState({cloudName: e.target.value})
+                        }}
+                        value={cloudName}
+                    >
+                        <Radio value={'tencent'}><FormattedMessage id='tencent cloud'/></Radio>
+                        <Radio value={'aliyun'}><FormattedMessage id='aliyun'/></Radio>
+                        <Radio value={'amazon'}><FormattedMessage id='amazon cloud'/></Radio>
+                    </RadioGroup>
+                    {/*该处设置 check 属性，就是为了：当点击取消后，能够再次查询*/}
+                    <CloudQueryAndConfig
+                        userID={userID}
+                        getCloudDetail={this.getCloudDetail}
+                        cloudName={cloudName}
+                        check={check}
+                        reCheck={() => {
+                            this.setState({check: check + 1})
+                        }}/>
+                </div>
+                <div style={{marginTop: 20}}>
+                    <div className={'schema-name'}><FormattedMessage id='DB Choose'/></div>
+                    <RadioGroup
+                        onChange={(e) => {
+                            this.setState({dbKind: e.target.value})
+                        }}
+                        value={this.state.dbKind}
+                    >
+                        <Radio value='fc-db'>fc-db</Radio>
+                        <Radio value='mongodb'>mongodb</Radio>
+                    </RadioGroup>
+                </div>
+                {
+                    disableDeployButton ?
+                        <Spin/>
+                        :
+                        <Button style={{marginTop: 20}} type='primary' onClick={() => {
+                            if (appId && secretID && secretKey) {
+                                this.setState({
+                                    disableDeployButton: true
+                                });
+
+                                // store *.edn to cos
+                                let deployConf = dbKind === 'mongodb' ?
+                                    ` {:secretId "${secretID}"\n` +
+                                    ` :secretKey "${secretKey}"\n` +
+                                    ` :appId "${appId}"\n` +
+                                    ' :region "ap-beijing" \n' +
+                                    ' }\n'
+                                    :
+                                    ` {:secretId "${secretID}"\n` +
+                                    ` :secretKey "${secretKey}"\n` +
+                                    ` :appId "${appId}"\n` +
+                                    ' :region "ap-beijing"\n' +
+                                    ' :bucket "fc-db"\n' +
+                                    ' :trustStore "/etc/ssl/certs/java/cacerts"\n' +
+                                    ` :fc-db-store "save/${bucketName}.dat"\n` +
+                                    ' :fc-db-dir "fc-db"\n' +
+                                    ' :graphql-url "http://orderfcdb.ioobot.cn/graphql"\n' +
+                                    ' :local-tmp-dir "/tmp"\n' +
+                                    ' :local-db-file "fcdb.dat"\n' +
+                                    ' :update-tx? true \n' +
+                                    ' :force-down? true\n' +
+                                    ' }';
+
+                                let a = axios.post(storeFile, {
+                                    'file-name': `${bucketName}/${dbKind}/${userID}/deploy-conf.edn`,
+                                    bucket: 'case',
+                                    cont: deployConf
+                                });
+
+                                let cont = '{:uri {\n' +
+                                    ':auth {:admin-db   "order"\n' +
+                                    ' :u    "ly"\n' +
+                                    ' :p   "autorunC1705"\n' +
+                                    ' :host "119.27.174.13"}}\n' +
+                                    ' :db-name "order"}';
+
+                                let b = dbKind === 'mongodb' ?
+                                    axios.post(storeFile, {
+                                        'file-name': `${bucketName}/${dbKind}/${userID}/mongo-config.edn`,
+                                        bucket: 'case',
+                                        cont
+                                    })
+                                    :
+                                    Promise.resolve({status: 200});
+
+                                Promise.all([a, b]).then(value => {
+                                    if (value.every(res => res.status === 200)) {
+                                        console.log('store file success , start deploying');
+                                        this.deploy();
+                                    }
+                                });
+                            } else {
+                                notification['warning']({
+                                    message: '需要填写配置',
+                                    description: '后续使用，需要先填写配置',
+                                });
+
+                                this.props.history.push({
+                                    pathname: `/login/cloud`
+                                })
+                            }
+                        }}>部署</Button>
+                }
+            </div>
+        )
+    }
+}
+
+export default UserCustom;
+
+class CloudQueryAndConfig extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            cloudName: props.cloudName,
+            userID: props.userID,
+            cloudID: '',
+            secretID: '',
+            secretKey: '',
+            appId: '',
+            showCloudConfigTip: false,
+
+            visible: false,
+            confirmLoading: false,
+        }
+    }
+
+    searchCloud = () => {
+        let {userID, cloudName} = this.state;
+        // 如果登录，查询该用户是否设置 cloud
+        request(graphqlUrl, SHOW_CLOUD, {user_id: userID}).then(data => {
+                let clouds = data.cloud_by_props.filter(cloud => cloud.cloudName === cloudName);
+                // 如果限制一个云服务商一个 cloud，那么就是clouds[0]
+                if (clouds.length === 1) {
+                    let cloud = clouds[0];
+                    let {id, secretId, secretKey, appId} = cloud;
+                    this.setState({
+                        cloudID: id,
+                        secretID: secretId,
+                        secretKey,
+                        appId
+                    });
+                    this.props.getCloudDetail(id, secretId, secretKey, appId);
+                    this.setState({
+                        showCloudConfigTip: false
+                    })
+                } else if (clouds.length > 1) {
+                    console.log('数据库有多个同一云服务商的 key');
+                } else {
+                    this.setState({
+                        showCloudConfigTip: true
+                    })
+                }
+            }
+        )
+    };
+
+    componentWillMount() {
+        this.searchCloud()
+    }
+
+    componentWillReceiveProps(next) {
+        this.setState({
+            cloudName: next.cloudName,
+            userID: next.userID,
+        }, this.searchCloud);
+    }
+
+    showModal = () => {
+        this.setState({
+            visible: true,
+        });
+    };
+
+    handleCancel = () => {
+        this.setState({
+            visible: false,
+        });
+        this.props.reCheck();
+    };
+
+
+    render() {
+        let {showCloudConfigTip, visible, confirmLoading} = this.state;
+        return (
+            <div>
+                {
+                    showCloudConfigTip ?
+                        <div>
+                            <Button type="danger" size="small" onClick={this.showModal}>
+                                <FormattedMessage id='no this cloud, click to save'/>
+                            </Button>
+                            <Modal
+                                title="设置 cloud"
+                                visible={visible}
+                                confirmLoading={confirmLoading}
+                                footer={null}
+                                onCancel={this.handleCancel}
+                            >
+                                <CloudConfig/>
+                            </Modal>
+                        </div>
+                        :
+                        ''
+                }
+            </div>
+        )
+    }
+}

src/language/en_US.js

@@ -172,6 +172,7 @@ const en_US = {
     'tencent cloud': 'Tencent Cloud',
     'aliyun': 'Aliyun',
     'amazon cloud': 'AWS',
-    'no this cloud, click to save': 'no this cloud, click to save'
+    'no this cloud, click to save': 'no this cloud, click to save',
+    'back to case show': 'back to case show'
 };
 export default en_US;

src/language/zh_CN.js

@@ -173,6 +173,7 @@ const zh_CN = {
     'tencent cloud': '腾讯云',
     'aliyun': '阿里云',
     'amazon cloud': 'AWS',
-    'no this cloud, click to save': '没有该服务商的 key，点我设置'
+    'no this cloud, click to save': '没有该服务商的 key，点我设置',
+    'back to case show': '返回案例'
 };
 export default zh_CN;

src/login/CloudConfig.js

@@ -1,13 +1,12 @@
 import React, {Component} from 'react';
 import {FormattedMessage} from 'react-intl';
-import {Button, Input, Spin, Icon, Row, Col} from 'antd';
+import {Button, Input, Spin, Icon} from 'antd';
 
 import {SHOW_CLOUD, ADD_CLOUD, UPDATE_CLOUD} from "../gql";
 import {request} from 'graphql-request'
 import {getCookie} from '../cookie';
 import {idGen} from "../func";
-import {graphqlUrl, storeFile} from "../config";
-import axios from 'axios';
+import {graphqlUrl} from "../config";
 
 class CloudConfig extends Component {
     constructor(props) {
@@ -142,7 +141,6 @@ class CloudConfig extends Component {
                 {
                     this.state.show ?
                         <div>
-
                             <div style={{marginTop: 15}}>
                                 <span className='cloud-name'><FormattedMessage id="Tencent"/>: </span>
                                 <div style={{marginBottom: 15}}>
@@ -211,36 +209,36 @@ class CloudConfig extends Component {
                                 </div>
                             </div>
 
-                            <div>
-                                <span className='cloud-name'><FormattedMessage id="AWS"/>: </span>
-                                <div style={{marginBottom: 15}}>
-                                    <div>
-                                        <div style={{marginBottom: 10}}>
-                                            <span className='item-title-cloud'>ID:</span>
-                                            <Input style={{width: 250}} value={this.state.awsID}
-                                                   onChange={this.inputChange('awsID')}/>
-                                        </div>
-                                        <div style={{marginBottom: 10}}>
-                                            <span className='item-title-cloud'>Key:</span>
-                                            <Input style={{width: 250}} value={this.state.awsKey}
-                                                   onChange={this.inputChange('awsKey')}/>
-                                        </div>
-                                        {
-                                            this.state.showOK === 'amazon' ?
-                                                <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
-                                                :
-                                                this.state.showNotOK === 'amazon' ?
-                                                    <span>not ok</span>
-                                                    :
-                                                    ""
-                                        }
-                                    </div>
-                                    <Button type='primary'
-                                            onClick={this.submit(this.state.awsCLoudID, 'amazon', this.state.awsID, this.state.awsKey)}>
-                                        <FormattedMessage id="save"/>
-                                    </Button>
-                                </div>
-                            </div>
+                            {/*<div>*/}
+                                {/*<span className='cloud-name'><FormattedMessage id="AWS"/>: </span>*/}
+                                {/*<div style={{marginBottom: 15}}>*/}
+                                    {/*<div>*/}
+                                        {/*<div style={{marginBottom: 10}}>*/}
+                                            {/*<span className='item-title-cloud'>ID:</span>*/}
+                                            {/*<Input style={{width: 250}} value={this.state.awsID}*/}
+                                                   {/*onChange={this.inputChange('awsID')}/>*/}
+                                        {/*</div>*/}
+                                        {/*<div style={{marginBottom: 10}}>*/}
+                                            {/*<span className='item-title-cloud'>Key:</span>*/}
+                                            {/*<Input style={{width: 250}} value={this.state.awsKey}*/}
+                                                   {/*onChange={this.inputChange('awsKey')}/>*/}
+                                        {/*</div>*/}
+                                        {/*{*/}
+                                            {/*this.state.showOK === 'amazon' ?*/}
+                                                {/*<Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>*/}
+                                                {/*:*/}
+                                                {/*this.state.showNotOK === 'amazon' ?*/}
+                                                    {/*<span>not ok</span>*/}
+                                                    {/*:*/}
+                                                    {/*""*/}
+                                        {/*}*/}
+                                    {/*</div>*/}
+                                    {/*<Button type='primary'*/}
+                                            {/*onClick={this.submit(this.state.awsCLoudID, 'amazon', this.state.awsID, this.state.awsKey)}>*/}
+                                        {/*<FormattedMessage id="save"/>*/}
+                                    {/*</Button>*/}
+                                {/*</div>*/}
+                            {/*</div>*/}
 
                         </div>
                         :