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

import React, {Component} from 'react';
import {Row, Col, Card, Button, Spin, Alert, Steps, Progress} 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, graphqlUrl} from "../../../../config";
import {FormattedMessage} from 'react-intl';
import gql from "graphql-tag";
import {Query} from "react-apollo";
import {request} from 'graphql-request'
const Step = Steps.Step;

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

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

        request(graphqlUrl, GET_PROJECT, {id: projectID}).then(
            data => {
                let dataProject = data.project_by_id;
                if (dataProject !== null) {
                    switch(dataProject.projectStatus) {
                        case 'deployed':
                            this.setState({
                                currentStep: 5,
                                stepAllShow: true
                            });
                            break;
                        case 'notificationed':
                            this.setState({
                                currentStep: 4
                            });
                            break;
                        case 'pathed':
                            this.setState({
                                currentStep: 3
                            });
                            break;
                        case 'grouped':
                            this.setState({
                                currentStep: 2
                            });
                            break;
                        case 'functioned':
                            this.setState({
                                currentStep: 1
                            });
                            break;
                        case 'created':
                            this.setState({
                                currentStep: 0
                            });
                            break;
                        default:
                            this.setState({
                                currentStep: 0
                            });
                            break;
                    }
                    console.log(dataProject.projectStatus);
                } else {
                    console.log('peoject 没存 status');
                }
            }
        )
    }

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


    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');
            this.setState({
                deploying: 'deploying'
            });
            axios.get(`${deployUrl}`,
                {
                    params: {
                        'cloud-id': 'tencent_CloudID',
                        'cloud-name': 'tencent',
                        schema,
                        deploy,
                        api,
                        group
                    }
                })
                .then((res) => {
                    console.log('deploy res', res);
                    this.setState({
                        deploying: 'finished'
                    })
                })
                .catch((err) => {
                    this.setState({
                        deploying: 'error'
                    });
                    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 = '',
                            cloudID = 'tencent_CloudID';

                        let dataProject = data.project_by_id;
                        let {cloud_id, apiGWGroup_id, deploy_id, projectType, schema_id, wxConfig_id, projectName} = dataProject;
                        // console.log('dataProject', 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}>

                                            {
                                                this.state.currentStep !== ''?
                                                    <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 || this.state.stepAllShow?
                                                    <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 || this.state.stepAllShow?
                                                    <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 || this.state.stepAllShow?
                                                    <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 || this.state.stepAllShow?
                                                    <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 || this.state.stepAllShow?
                                                <Col offset={2} span={6}>
                                                    {
                                                        this.props.trialcase ?
                                                            ''
                                                            :

                                                            projectType === 'graphql' ?

                                                                schema_id.schemaState === 'ok' ?

                                                                        this.state.deploying === '' ?
                                                                            <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>

                                                    }
                                                    {
                                                        this.state.deploying === 'deploying' ?
                                                            <Spin size="large"/>
                                                            :
                                                            this.state.deploying === 'finished' ?
                                                                <Progress type="circle" percent={100} />
                                                                :
                                                                this.state.deploying === 'error' ?
                                                                    <Progress type="circle" percent={99} status="exception" />
                                                                    :
                                                                    ''

                                                    }
                                                </Col>
                                                :
                                                ''
                                        }

                                    </Row>
                                </div>
                            </div>
                        );

                        // no use, backup code
                        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}
                                                                stepByStep={this.stepByStep}
                                                            />
                                                        </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}
                                                                stepByStep={this.stepByStep}
                                                            />
                                                        </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}
                                                                                stepByStep={this.stepByStep}
                                                                            />
                                                                        </Card>
                                                                }
                                                            </FormattedMessage>
                                                        )
                                                    }
                                                }
                                            </Query>
                                            <FormattedMessage id="Notification">
                                                {
                                                    msg =>
                                                        <Card title={msg}>
                                                            <NotificationCard
                                                                userID={this.props.userID}
                                                                defalutName={defaultName}
                                                                trialcase={this.props.trialcase}
                                                                projectID={projectID}
                                                                stepByStep={this.stepByStep}
                                                            />
                                                        </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>
                        )
                    }
                }
            </Query>

        )
    }
}

export default TencentConfig;