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 {Layout, Button, message, Modal, Icon, Steps, Row, Col, Radio, Input} from 'antd';
import {FormattedMessage} from 'react-intl';
import {request} from 'graphql-request'
import {idGen} from "../../../func";
import axios from 'axios';
import './index.css';

const {Content} = Layout;
const Step = Steps.Step;
const RadioGroup = Radio.Group;
axios.defaults.withCredentials = true;

class UserCustom extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userID: props.userID,
            bucketName: props.bucketName,
            cloudName: 'tencent',
            disableDeployButton: false,
            deployFailed: false,
            cloudID: '',
            secretID: '',
            secretKey: '',
            appId: ''
        };

        console.log(this.state, 'userCustom state')
    }

    getCloudDetail = (cloudID, secretID, secretKey, appId) => {
        this.setState({
            cloudID,
            secretID,
            secretKey,
            appId
        })
    };

    componentWillMount() {
        this._isMounted = true;
    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    render() {
        let {disableDeployButton, userID, cloudID, bucketName, deployFailed, appId, secretID, secretKey} = this.state;
        return (
            <Content className="content">
                <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
                                          getPrimaryConfigDetail={this.getPrimaryConfigDetail}
                                          userID={userID}
                                          bucketName={bucketName}
                                          secretID={secretID}
                                          secretKey={secretKey}
                                          appId={appId}
                                          cloudID={cloudID}
                                      />
                                />
                            </Steps>
                        </Col>
                    </Row>
                </div>
            </Content>
        )
    }
}

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

class NameAndDB extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userID: props.userID,
            visible: false,
            confirmLoading: false,
            customName: props.bucketName + '-' + props.userID,
            dbKind: 'fc-db',
            host: '',
            db: '',
            username: '',
            password: '',
            admin: '',
            disableDeployButton: false
        }
    }


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

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

    componentWillMount() {
        this._isMounted = true;
    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    deploy = (userID, dbKind, bucketName, customName, cloudID) => {
        this._isMounted = true;
        let _this = this;

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

    storeEdnAndDeploy = (secretID='AKIDkYBvY0LOJ2bzCDmnMjz4xgFertmVJlVE', secretKey='zwjKk29TdcYP8g2FG5kCSWmz3wcH92lN', appId='1254337200', bucketName, dbKind, userID, admin, username, password, db, host, customName, cloudID) => {
        // 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' +
            ' :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   "${admin}"\n` +
            ` :u    "${username}"\n` +
            ` :p   "${password}"\n` +
            ` :host "${host}"}}\n` +
            ` :db-name "${db}"}`;

        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(userID, dbKind, bucketName, customName, cloudID);
            }
        });
    }

    render() {
        let {
            visible,
            confirmLoading,
            userID,
            dbKind,
            host,
            db,
            username,
            password,
            admin,
            customName,
            disableDeployButton
        } = this.state;
        let {secretID, secretKey, appId, bucketName, cloudID} = this.props
        return (
            <div>
                <Button type='primary' onClick={this.showModal}>开始部署</Button>

                <Modal
                    title="名称和数据库配置"
                    visible={visible}
                    confirmLoading={confirmLoading}
                    footer={null}
                    onCancel={this.handleCancel}
                >
                    <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={this.state.customName}
                                       onChange={(e) => {
                                           this.setState({customName: e.target.value})
                                       }}/>
                            </div>
                        </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>

                        {
                            this.state.dbKind === 'mongodb' ?
                                <div>
                                    <div>
                                        <span className='item-title-cloud'>地址</span>
                                        <Input style={{width: 250}} value={this.state.host}
                                               onChange={(e) => {
                                                   this.setState({host: e.target.value})
                                               }}
                                        />
                                    </div>

                                    <div>
                                        <span className='item-title-cloud'>数据库名称</span>
                                        <Input style={{width: 250}} value={this.state.db}
                                               onChange={(e) => {
                                                   this.setState({db: e.target.value})
                                               }}
                                        />
                                    </div>

                                    <div>
                                        <span className='item-title-cloud'>验证数据库</span>
                                        <Input style={{width: 250}} value={this.state.admin}
                                               onChange={(e) => {
                                                   this.setState({admin: e.target.value})
                                               }}
                                        />
                                    </div>

                                    <div>
                                        <span className='item-title-cloud'>用户名</span>
                                        <Input style={{width: 250}} value={this.state.username}
                                               onChange={(e) => {
                                                   this.setState({username: e.target.value})
                                               }}
                                        />
                                    </div>

                                    <div>
                                        <span className='item-title-cloud'>密码</span>
                                        <Input type='password' style={{width: 250}} value={this.state.password}
                                               onChange={(e) => {
                                                   this.setState({password: e.target.value})
                                               }}
                                        />
                                    </div>
                                </div>
                                :
                                ''
                        }

                        {
                            disableDeployButton?
                                '正在部署...'
                                :
                                <Button type='primary' onClick={() => {
                                    this.storeEdnAndDeploy(secretID, secretKey, appId, bucketName, dbKind, userID, admin, username, password, db, host, customName, cloudID)
                                }}>开始部署</Button>

                        }

                    </div>
                </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>
            <Button type='primary'>填写配置</Button>
        </div>
    </div>
);

const Step14 = (props) => (
    <div className='step-block'>
        开始使用
        <div>
            <NameAndDB
                userID={props.userID}
                bucketName={props.bucketName}
                secretID={props.secretID}
                secretKey={props.secretKey}
                appId={props.appId}
                cloudID={props.cloudID}
            />
        </div>
    </div>
);