online/src/app/common/deploy/tencent/TencentConfig.js

import React, {Component} from 'react';
import {Row, Col, Card, Button, Spin, Alert, Steps} from 'antd';
import axios from 'axios';
import APIGroupCard from './APIGroupCard';
import APIPathCard from './APIPathCard';
import DeployCard from './DeployCard';
import NotificationCard from './NotificationCard';

import {SHOW_APIGWPATH, GET_PROJECT} from "../../../../gql";
import {deployUrl} from "../../../../config";
import {FormattedMessage} from 'react-intl';
import gql from "graphql-tag";
import {Query} from "react-apollo";

const Step = Steps.Step;

class TencentConfig extends Component {
    constructor(props) {
        super(props);
        this.state = {
            region: '',
            couldDeploy: false,
            deployIdPassToPath: '',
            groupIdPassToPath: '',
            pathIdPassToConfig: '',
            currentStep: 0
        };
    }

    componentWillReceiveProps(next) {
        this.setState({
            couldDeploy: false,
            region: '',
            deployIdPassToPath: '',
            groupIdPassToPath: '',
            currentStep: 0
        });
    }


    switchRegion = (e) => {
        this.setState({
            region: e.target.value
        });
    };

    pass = (value, kind) => {
        if (kind === 'deploy')
            this.setState({
                deployIdPassToPath: value
            });
        else if (kind === 'group')
            this.setState({
                groupIdPassToPath: value
            });
        else {
            this.setState({
                pathIdPassToConfig: value
            })
        }
    };

    deployFC = (schema, deploy, api, group) => {
        console.log('schema', schema);
        console.log('deploy', deploy);
        console.log('api', api);
        console.log('group', group);
        if (schema && deploy && api && group) {
            console.log('deploying');
            // axios.get(`${deployUrl}`,
                axios.get(`http://localhost:8999/graphql/deployall`,
                {
                    // params: {
                    //     'cloud-name': 'tencent',
                    //     schema: "ecommerce_schemaID",
                    //     deploy: "deploy_1544504304478_57468453",
                    //     api: "path_1544504334478_82625598",
                    //     group: "group_1544504325443_46750115"
                    // }
                    params: {
                        'cloud-id': 'tencent_CloudID',
                        schema,
                        deploy,
                        api,
                        group
                    }
                })
                .then((res) => {
                    console.log('deploy res', res);
                })
                .catch((err) => {
                    console.log('err', err);
                    console.log('err.response', err.response);
                    console.log('err.response.data', err.response.data);
                });
        }

    };

    stepByStep = (stepNum) => {
        this.setState({
            currentStep: stepNum
        })
    };

    stepStatus = (value) => {
        if (this.state.currentStep === value)
            return '进行中';
        else if (this.state.currentStep > value)
            return '完成';
        else
            return '等待';
    };

    render() {
        let projectID = this.props.projectID ? this.props.projectID : 'ecommerce_projectID';

        return (
            <Query query={gql(GET_PROJECT)} variables={{id: projectID}}>
                {
                    ({loading, error, data}) => {
                        if (loading) {
                            return <Spin style={{marginLeft: 3}}/>
                        }
                        if (error) {
                            return 'error!';
                        }

                        let group = '',
                            deploy = '',
                            path = '',
                            schemaID = '',
                            configID = '',
                            api = '',
                            cloudID = 'tencent_CloudID';

                        let dataProject = data.project_by_id;
                        let {cloud_id, apiGWGroup_id, deploy_id, projectType, schema_id, wxConfig_id, projectName} = dataProject;

                        let defaultName = projectName;

                        if (projectType === 'graphql')
                            schemaID = schema_id.id;
                        else
                            configID = wxConfig_id.id;

                        // 如果 cloud_id 没有存储，说明尚未部署，即新的 project，使用 '视图 2'
                        // 旧的 project 使用 '视图 1'

                        if (cloud_id !== null && cloud_id.cloudName === 'tencent') {
                            group = apiGWGroup_id;
                            deploy = deploy_id;
                            cloudID = cloud_id.id;

                            return (
                                <div>
                                    {
                                        projectType === 'graphql' ?
                                            schema_id.schemaState === 'ok' ?
                                                ''
                                                :
                                                this.props.trialcase ?
                                                    ''
                                                    :
                                                    <div style={{marginBottom: 10}}>
                                                        <Alert message="数据表结构不符合规范，暂不能部署，请修改" type="warning"
                                                               banner closable/>
                                                    </div>
                                            :
                                            ''
                                    }
                                    <div style={{padding: '30px'}}>
                                        <Row gutter={16}>
                                            <Col span={14}>
                                                <FormattedMessage id="fc Deploy">
                                                    {
                                                        msg =>
                                                            <Card title={msg} style={{marginBottom: 10}}>
                                                                <DeployCard
                                                                    deploy={deploy}
                                                                    switchRegion={this.switchRegion}
                                                                    region={this.state.region}
                                                                    defalutName={defaultName}
                                                                    userID={this.props.userID}
                                                                    cloudID={cloudID}
                                                                    trialcase={this.props.trialcase}
                                                                    pass={this.pass}
                                                                    projectID={projectID}
                                                                />
                                                            </Card>
                                                    }
                                                </FormattedMessage>
                                                <FormattedMessage id="API Group">
                                                    {
                                                        msg =>
                                                            <Card title={msg} style={{marginBottom: 10}}>
                                                                <APIGroupCard
                                                                    group={group}
                                                                    userID={this.props.userID}
                                                                    switchRegion={this.switchRegion}
                                                                    region={this.state.region}
                                                                    cloudID={cloudID}
                                                                    trialcase={this.props.trialcase}
                                                                    pass={this.pass}
                                                                    projectID={projectID}
                                                                />
                                                            </Card>
                                                    }
                                                </FormattedMessage>
                                                <Query query={gql(SHOW_APIGWPATH)}
                                                       variables={{apiGWGroup_id: apiGWGroup_id ? apiGWGroup_id.id : ''}}>
                                                    {
                                                        ({loading, error, data}) => {
                                                            if (loading) {
                                                                return <Spin style={{marginLeft: 3}}/>
                                                            }
                                                            if (error) {
                                                                return 'error!';
                                                            }
                                                            if (data.apiGWPath_by_props.length > 0)
                                                                path = data.apiGWPath_by_props[0];
                                                            return (
                                                                <FormattedMessage id="API Path">
                                                                    {
                                                                        msg =>
                                                                            <Card title={msg}
                                                                                  style={{marginBottom: 10}}>
                                                                                <APIPathCard
                                                                                    path={path}
                                                                                    defalutName={defaultName}
                                                                                    userID={this.props.userID}
                                                                                    trialcase={this.props.trialcase}
                                                                                    deployID={deploy ? deploy.id : this.state.deployIdPassToPath}
                                                                                    groupID={group ? group.id : this.state.groupIdPassToPath}
                                                                                    pass={this.pass}
                                                                                />
                                                                            </Card>
                                                                    }
                                                                </FormattedMessage>
                                                            )
                                                        }
                                                    }
                                                </Query>
                                                <FormattedMessage id="Notification">
                                                    {
                                                        msg =>
                                                            <Card title={msg}>
                                                                <NotificationCard
                                                                    userID={this.props.userID}
                                                                    defalutName={defaultName}
                                                                    trialcase={this.props.trialcase}
                                                                    projectID={projectID}
                                                                />
                                                            </Card>
                                                    }
                                                </FormattedMessage>
                                            </Col>
                                            <Col offset={2} span={6}>
                                                {
                                                    this.props.trialcase ?
                                                        ''
                                                        :
                                                        projectType === 'graphql' ?
                                                            schema_id.schemaState === 'ok' ?
                                                                <Button type='primary'
                                                                        onClick={() => this.deployFC(schemaID, deploy ? deploy.id : this.state.deployIdPassToPath, this.state.pathIdPassToConfig, group ? group.id : this.state.groupIdPassToPath)}><FormattedMessage
                                                                    id="deploy"/>!</Button>
                                                                :
                                                                <Button type='primary' disabled><FormattedMessage
                                                                    id="deploy"/>!</Button>
                                                            :
                                                            <Button type='primary' onClick={() => {
                                                            }}><FormattedMessage id="deploy"/>!</Button>

                                                }
                                            </Col>
                                        </Row>
                                    </div>
                                </div>
                            )

                        } else {

                            return (
                                <div>
                                    {
                                        projectType === 'graphql' ?
                                            schema_id.schemaState === 'ok' ?
                                                ''
                                                :
                                                this.props.trialcase ?
                                                    ''
                                                    :
                                                    <div style={{marginBottom: 10}}>
                                                        <Alert message="数据表结构不符合规范，暂不能部署，请修改" type="warning"
                                                               banner closable/>
                                                    </div>
                                            :
                                            ''
                                    }
                                    <div style={{padding: '30px'}}>
                                        <Row gutter={16}>
                                            <Col span={14}>

                                                <Steps current={this.state.currentStep} style={{marginBottom: 30}}>
                                                    <Step title={this.stepStatus(0)} description="云函数配置"/>
                                                    <Step title={this.stepStatus(1)} description="服务配置"/>
                                                    <Step title={this.stepStatus(2)} description="API 配置"/>
                                                    <Step title={this.stepStatus(3)} description="通知配置"/>
                                                </Steps>

                                                {
                                                    this.state.currentStep === 0 ?
                                                        <FormattedMessage id="fc Deploy">
                                                            {
                                                                msg =>
                                                                    <Card title={msg} style={{marginBottom: 10}}>
                                                                        <DeployCard
                                                                            deploy={deploy}
                                                                            switchRegion={this.switchRegion}
                                                                            region={this.state.region}
                                                                            defalutName={defaultName}
                                                                            userID={this.props.userID}
                                                                            cloudID={cloudID}
                                                                            trialcase={this.props.trialcase}
                                                                            pass={this.pass}
                                                                            stepByStep={this.stepByStep}
                                                                            projectID={projectID}
                                                                        />
                                                                    </Card>
                                                            }
                                                        </FormattedMessage>
                                                        :
                                                        ''
                                                }

                                                {
                                                    this.state.currentStep === 1 ?
                                                        <FormattedMessage id="API Group">
                                                            {
                                                                msg =>
                                                                    <Card title={msg} style={{marginBottom: 10}}>
                                                                        <APIGroupCard
                                                                            group={group}
                                                                            userID={this.props.userID}
                                                                            switchRegion={this.switchRegion}
                                                                            region={this.state.region}
                                                                            cloudID={cloudID}
                                                                            trialcase={this.props.trialcase}
                                                                            pass={this.pass}
                                                                            stepByStep={this.stepByStep}
                                                                            projectID={projectID}
                                                                        />
                                                                    </Card>
                                                            }
                                                        </FormattedMessage>
                                                        :
                                                        ''
                                                }
                                                {
                                                    this.state.currentStep === 2 ?
                                                        <Query query={gql(SHOW_APIGWPATH)}
                                                               variables={{apiGWGroup_id: apiGWGroup_id ? apiGWGroup_id.id : ''}}>
                                                            {
                                                                ({loading, error, data}) => {
                                                                    if (loading) {
                                                                        return <Spin style={{marginLeft: 3}}/>
                                                                    }
                                                                    if (error) {
                                                                        return 'error!';
                                                                    }
                                                                    if (data.apiGWPath_by_props.length > 0)
                                                                        path = data.apiGWPath_by_props[0];
                                                                    return (
                                                                        <FormattedMessage id="API Path">
                                                                            {
                                                                                msg =>
                                                                                    <Card title={msg}
                                                                                          style={{marginBottom: 10}}>
                                                                                        <APIPathCard
                                                                                            path={path}
                                                                                            defalutName={defaultName}
                                                                                            userID={this.props.userID}
                                                                                            trialcase={this.props.trialcase}
                                                                                            deployID={deploy ? deploy.id : this.state.deployIdPassToPath}
                                                                                            groupID={group ? group.id : this.state.groupIdPassToPath}
                                                                                            pass={this.pass}
                                                                                            stepByStep={this.stepByStep}
                                                                                        />
                                                                                    </Card>
                                                                            }
                                                                        </FormattedMessage>
                                                                    )
                                                                }
                                                            }
                                                        </Query>
                                                        :
                                                        ''
                                                }

                                                {
                                                    this.state.currentStep === 3 ?
                                                        <FormattedMessage id="Notification">
                                                            {
                                                                msg =>
                                                                    <Card title={msg}>
                                                                        <NotificationCard
                                                                            userID={this.props.userID}
                                                                            defalutName={defaultName}
                                                                            trialcase={this.props.trialcase}
                                                                            stepByStep={this.stepByStep}
                                                                            projectID={projectID}
                                                                        />
                                                                    </Card>
                                                            }
                                                        </FormattedMessage>
                                                        :
                                                        ''
                                                }

                                            </Col>

                                            {
                                                this.state.currentStep === 4 ?
                                                    <Col offset={2} span={6}>
                                                        {
                                                            this.props.trialcase ?
                                                                ''
                                                                :
                                                                projectType === 'graphql' ?
                                                                    schema_id.schemaState === 'ok' ?
                                                                        <Button type='primary'
                                                                                onClick={() => this.deployFC(schemaID, deploy ? deploy.id : this.state.deployIdPassToPath, this.state.pathIdPassToConfig, group ? group.id : this.state.groupIdPassToPath)}><FormattedMessage
                                                                            id="deploy"/>!</Button>
                                                                        :
                                                                        <Button type='primary'
                                                                                disabled><FormattedMessage id="deploy"/>!</Button>
                                                                    :
                                                                    <Button type='primary' onClick={() => {
                                                                    }}><FormattedMessage id="deploy"/>!</Button>

                                                        }
                                                    </Col>
                                                    :
                                                    ''
                                            }

                                        </Row>
                                    </div>
                                </div>
                            )
                        }
                    }
                }
            </Query>

        )
    }
}

export default TencentConfig;