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 APIGroupCardFetch from './apiGroupCard/APIGroupCardFetch';
import APIPathCardFetch from './apiPathCard/APIPathCardFetch';
import DeployCardFetch from './deployCard/DeployCardFetch';
import NotificationCardFetch from './notificationCard/NotificationCardFetch';

import {GET_PROJECT, SHOW_APIGWPATH, UPDATE_PROJECT_ONLY_STATUS} from "../../../../gql";
import {deployUrl, graphqlUrl} from "../../../../config";
import {FormattedMessage} from 'react-intl';
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: '',
            stepUpdated: false,
        };
    }

    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) {
                    this.setState({
                        schemaState: dataProject.schema_id? dataProject.schema_id.schemaState : '',
                        projectType: dataProject.projectType
                    });
                    switch (dataProject.projectStatus) {
                        case 'deployed':
                            this.setState({
                                currentStep: 5,
                                stepAllShow: true,
                                deploying: 'finished'
                            });
                            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;
                        case 'updated':
                            this.setState({
                                stepUpdated: true,
                                stepAllShow: true,
                            });
                            break;
                        case 'deploying':
                            this.setState({
                                deploying: 'deploying'
                            });
                            break;
                        default:
                            this.setState({
                                currentStep: 0
                            });
                            break;
                    }
                } else {
                    console.log('project 没存 status');
                }
            }
        )
    }

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

        let projectID = next.projectID ? next.projectID : 'ecommerce_projectID';

        request(graphqlUrl, GET_PROJECT, {id: projectID}).then(
            data => {
                let dataProject = data.project_by_id;
                if (dataProject !== null) {
                    this.setState({
                        schemaState: dataProject.schema_id? dataProject.schema_id.schemaState : '',
                        projectType: dataProject.projectType
                    });
                    switch (dataProject.projectStatus) {
                        case 'deployed':
                            this.setState({
                                deploying: 'finished',
                                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;
                        case 'updated':
                            this.setState({
                                stepUpdated: true,
                                stepAllShow: true,
                            });
                            break;
                        case 'deploying':
                            this.setState({
                                deploying: 'deploying'
                            });
                            break;
                        default:
                            this.setState({
                                currentStep: 0
                            });
                            break;
                    }
                } else {
                    console.log('project 没存 status');
                }
            }
        )
    }


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

    deployFC = () => {
        request(graphqlUrl, GET_PROJECT, {id: this.props.projectID}).then(
            data => {
                let dataProject = data.project_by_id;
                if (dataProject !== null) {
                    let schema = dataProject.schema_id.id;
                    let deploy = dataProject.deploy_id.id;
                    let group = dataProject.apiGWGroup_id.id;
                    request(graphqlUrl, SHOW_APIGWPATH, {apiGWGroup_id: group}).then(
                        data => {
                            if(data.apiGWPath_by_props !== null) {

                                // 给 project 加 deploying 状态
                                request(graphqlUrl, UPDATE_PROJECT_ONLY_STATUS, {
                                    id: this.props.projectID,
                                    updatedAt: new Date().getTime(),
                                    projectStatus: 'deploying'
                                });

                                console.log(data);
                                let api = data.apiGWPath_by_props[0].id;
                                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'
                                            });

                                            // 给 project 加 deployed 状态
                                            request(graphqlUrl, UPDATE_PROJECT_ONLY_STATUS, {
                                                id: this.props.projectID,
                                                updatedAt: new Date().getTime(),
                                                projectStatus: 'deployed'
                                            })

                                        })
                                        .catch((err) => {
                                            this.setState({
                                                deploying: 'error'
                                            });

                                            // 给 project 加 error 状态
                                            request(graphqlUrl, UPDATE_PROJECT_ONLY_STATUS, {
                                                id: this.props.projectID,
                                                updatedAt: new Date().getTime(),
                                                projectStatus: 'error'
                                            });
                                            console.log('err', err);
                                            console.log('err.response', err.response);
                                            console.log('err.response.data', err.response.data);
                                        });
                                }
                            } else {
                                console.log('path 没存');
                            }
                        }
                    );
                } else {
                    console.log('project 没存 status');
                }
            }
        );
    };

    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 (
            <div>
                {
                    this.state.projectType === 'graphql' ?
                        this.state.schemaState === 'ok' ?
                            ''
                            :
                            this.props.trialcase ?
                                ''
                                :
                                <div style={{marginBottom: 10}}>
                                    <Alert message="数据表结构不符合规范，暂不能部署，请修改" type="warning"
                                           banner closable/>
                                </div>
                        :
                        ''
                }
                {
                    this.state.stepUpdated ?

                            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 !== '' || this.state.deploying === 'deploying' || this.state.deploying === 'deployed'?
                                    <Steps current={this.state.deploying !== 'deploying' ? this.state.currentStep : 4} 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}}>
                                                    <DeployCardFetch
                                                        switchRegion={this.switchRegion}
                                                        region={this.state.region}
                                                        trialcase={this.props.trialcase}
                                                        stepByStep={this.stepByStep}
                                                        userID={this.props.userID}
                                                        projectID={projectID}
                                                    />
                                                </Card>
                                        }
                                    </FormattedMessage>
                                    :
                                    ''
                            }

                            {
                                this.state.currentStep === 1 || this.state.stepAllShow ?
                                    <FormattedMessage id="API Group">
                                        {
                                            msg =>
                                                <Card title={msg} style={{marginBottom: 10}}>
                                                    <APIGroupCardFetch
                                                        switchRegion={this.switchRegion}
                                                        region={this.state.region}
                                                        trialcase={this.props.trialcase}
                                                        stepByStep={this.stepByStep}
                                                        userID={this.props.userID}
                                                        projectID={projectID}
                                                        stepAllShow={this.state.stepAllShow}
                                                    />
                                                </Card>
                                        }
                                    </FormattedMessage>
                                    :
                                    ''
                            }
                            {
                                this.state.currentStep === 2 || this.state.stepAllShow ?
                                    <FormattedMessage id="API Path">
                                        {
                                            msg =>
                                                <Card title={msg} style={{marginBottom: 10}}>
                                                    <APIPathCardFetch
                                                        trialcase={this.props.trialcase}
                                                        stepByStep={this.stepByStep}
                                                        userID={this.props.userID}
                                                        projectID={projectID}
                                                        stepAllShow={this.state.stepAllShow}
                                                    />
                                                </Card>
                                        }
                                    </FormattedMessage>
                                    :
                                    ''
                            }

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

                        </Col>

                        {
                            this.state.currentStep === 4 || this.state.stepAllShow ?
                                <Col offset={2} span={6}>
                                    {
                                        this.props.trialcase ?
                                            ''
                                            :
                                            this.state.projectType === 'graphql' ?

                                                this.state.schemaState === 'ok' ?

                                                    this.state.deploying === '' ?
                                                        <Button type='primary' onClick={this.deployFC}><FormattedMessage id="deploy"/>!</Button>
                                                        :
                                                        ''
                                                    :
                                                    <Button type='primary'
                                                            disabled><FormattedMessage
                                                        id="deploy"/>!</Button>
                                                :
                                                <Button type='primary' onClick={() => {
                                                }}><FormattedMessage id="deploy"/>!</Button>

                                    }
                                </Col>
                                :
                                ''
                        }

                        {
                            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"/>
                                        :
                                        ''
                        }

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

export default TencentConfig;