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

import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import {deployAll, graphqlUrl, storeFile, copyCos} from "../../../config";
import {ADD_APIGROUP, ADD_APIGWPATH, ADD_DEPLOY, ADD_PROJECT, SHOW_CLOUD} from "../../../gql";
import {CloudConfig} from "../../../login/CloudConfig";
import {Button, message, Modal, Icon, Steps, Row, Col} from 'antd';
import {FormattedMessage} from 'react-intl';
import {request} from 'graphql-request'
import {idGen} from "../../../func";
import axios from 'axios';
import './index.css';

const Step = Steps.Step;
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
            disableDeployButton: false,
            deployFailed: 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`, `${bucketName}/html/index.html`, `${bucketName}/wx-config.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.history.push({
                                    pathname: `/common/deploy`,
                                    state: {
                                        // 处理传回数据，直接拼接
                                        url: `http://${subDomain}/test/`
                                    }
                                });
                            })
                            .catch(err => {
                                console.log(err);
                            });
                    } else {
                        console.log('deployAll 失败');
                        _this.setState({
                            deployFailed: true,
                            disableDeployButton: false
                        })
                    }

                })
                .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, deployFailed} = 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>

                <Row>
                    <Col span={9} offset={2}>
                        <div className='step-kind'>
                            发布体验
                        </div>
                        <Steps direction="vertical" current={2}>
                            <Step title=<Step00/> />
                            <Step title=<Step01/> />
                        </Steps>
                    </Col>
                    <Col span={9} offset={2}>
                        <div className='step-kind'>
                            发布上线
                        </div>
                        <Steps direction="vertical" current={5}>
                            <Step title=<Step10/> />
                            <Step title=<Step11 getCloudDetail={this.getCloudDetail} userID={userID}/> />
                            <Step title=<Step12/> />
                            <Step title=<Step13/> />
                            <Step title=<Step14/> />
                        </Steps>
                    </Col>
                </Row>
            </div>
        )
    }
}

export default UserCustom;

class CloudQueryAndConfig extends Component {
    constructor(props) {
        super(props);
        this.state = {
            cloudName: props.cloudName,
            userID: props.userID,
            cloudID: '',
            secretID: '',
            secretKey: '',
            appId: '',
            visible: false,
            confirmLoading: false,
        }
    }

    searchCloud = () => {
        this._isMounted = true;
        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;
                    if (this._isMounted) {
                        this.setState({
                            cloudID: id,
                            secretID: secretId,
                            secretKey,
                            appId,
                        });
                    }
                    this.props.getCloudDetail(id, secretId, secretKey, appId);
                } else if (clouds.length > 1) {
                    console.log('数据库有多个同一云服务商的 key');
                } else {
                    if (this._isMounted) {
                        console.log('数据库没有云服务商的 key');
                    }
                }
            }
        )
    };

    showModal = () => {
        if(this.state.userID) {
            this.setState({
                visible: true,
            });
        } else {
            message.warning('请先登录');
        }
    };

    handleCancel = () => {
        this.setState({
            visible: false,
        });
        this.props.reCheck();
    };

    componentWillMount() {
        this.searchCloud();
        this._isMounted = true;
    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    componentWillReceiveProps(next) {
        this.setState({
            cloudName: next.cloudName,
            userID: next.userID,
        }, this.searchCloud);
    }

    render() {
        let {visible, confirmLoading, cloudName} = this.state;
        return (
            <div>
                <Button type='primary' onClick={this.showModal}>点击填写</Button>

                <Modal
                    title="云服务商秘钥设置"
                    visible={visible}
                    confirmLoading={confirmLoading}
                    footer={null}
                    onCancel={this.handleCancel}
                >
                    <CloudConfig cloudName={cloudName}/>
                </Modal>
            </div>
        )
    }
}

const Step00 = (props) => (
    <div className='step-block'>
        <Button type="primary" size='large' style={{borderRadius: 10}}>一键部署</Button>
        <div style={{fontSize: 16}}>
            默认部署至腾讯云. 亚马逊，阿里云等请联系我们
        </div>
    </div>
);

const Step01 = (props) => (
    <div className='step-block'>
        扫码查看结果
    </div>
);

const Step10 = (props) => (
    <div className='step-block'>
        第一步：注册腾讯云账户
        <Button style={{marginLeft: 20}}>使用帮助</Button>
    </div>
);

class Step11 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            check: 0
        }
    }

    render() {
        let {userID, getCloudDetail} = this.props;
        let {check} = this.state;
        return (
            <div className='step-block'>
                第二步：填写腾讯云秘钥，一键部署
                <Button style={{marginLeft: 20}}>使用帮助</Button>
                <div>
                    <CloudQueryAndConfig
                        userID={userID}
                        getCloudDetail={getCloudDetail}
                        cloudName='tencent'
                        check={check}
                        reCheck={() => {
                            this.setState({check: check + 1})
                        }}
                    />
                </div>
            </div>
        )
    }
}

const Step12 = (props) => (
    <div className='step-block'>
        第三步：注册微信公众号/小程序
        <Button style={{marginLeft: 20}}>使用帮助</Button>
    </div>
);

const Step13 = (props) => (
    <div className='step-block'>
        第四步：微信公众号/小程序 后台填写配置
        <Button style={{marginLeft: 20}}>使用帮助</Button>
    </div>
);

const Step14 = (props) => (
    <div className='step-block'>
        开始使用
    </div>
);