online/src/app/basicVersion/exampleShow/UserCustom.js

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>
        )
    }
}