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

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

import {SHOW_DEPLOY, SHOW_APIGWGROUP, SHOW_APIGWPATH, SEARCH_SCHEMA} from "../../../../gql";
import {request} from 'graphql-request'
import {graphqlUrl,deployUrl} from "../../../../config";
import {FormattedMessage} from 'react-intl';

class TencentConfig extends Component {
    constructor(props) {
        super(props);
        this.state = {
            region: '',
            deploys: [],
            currentDeploy: '',
            groups: [],
            currentGroup: '',
            paths: [],
            currentPath: '',
            deployIdPassToPath: '',
            groupIdPassToPath: '',
            cloudID: props.cloudID,
            fc: props.fc,
            couldDeploy: false
        };
    }

    componentDidMount() {
        this.fetch();
    }

    componentWillReceiveProps(next) {
        this.setState({
            fc: next.fc,
            cloudID: next.cloudID,
            couldDeploy: false,
            region: ''
        }, this.fetch);
    }

    fetch = () => {
        // todo: 没做每个 deploy 和 apigroup 和 apipath 的切换
        // todo: 换成 apollo 会更好
        if (this.state.fc === true) {
            request(graphqlUrl, SHOW_DEPLOY, {cloud_id: this.state.cloudID}).then(
                data => {
                    this.setState({
                        deploys: data.deploy_by_props,
                        currentDeploy: data.deploy_by_props[0]
                    })
                }
            );
            request(graphqlUrl, SHOW_APIGWGROUP, {cloud_id: this.state.cloudID}).then(
                data => {
                    this.setState({
                        groups: data.apiGWGroup_by_props,
                        currentGroup: data.apiGWGroup_by_props[0]
                    }, () => {
                        request(graphqlUrl, SHOW_APIGWPATH, {apiGWGroup_id: this.state.currentGroup.id}).then(
                            data => {
                                this.setState({
                                    paths: data.apiGWPath_by_props,
                                    currentPath: data.apiGWPath_by_props[0]
                                });
                            }
                        );
                    });
                }
            );
        } else {
            this.setState({
                currentDeploy: '',
                currentGroup: '',
                currentPath: '',
            })
        }

        if(this.props.schemaID === '' || this.props.schemaID === undefined) {
            this.setState({
                couldDeploy: true
            });
        } else {
            request(graphqlUrl, SEARCH_SCHEMA, {id: this.props.schemaID}).then(
                data => {
                    if(data.schema_by_id.schemaState === 'ok')
                        this.setState({
                            couldDeploy: true
                        });
                }
            );
        }

    };

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

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

    deployFC = () => {
        let _this = this;

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

    render() {
        let {groupName, trialcase} = this.props;
        return (
            <div>
                <div className="column-menu" onClick={this.props.goBack}>
                    <Icon type="left" style={{color: '#3187FA'}}/> {groupName}
                </div>
                <div style={{padding: '30px'}}>
                    <Row gutter={16}>
                        <Col span={14}>
                            <FormattedMessage id="API Group">{msg => <Card title={msg} style={{marginBottom: 10}}><APIGroupCard group={this.state.currentGroup} switchRegion={this.switchRegion} region={this.state.region} userID={this.props.userID} cloudID={this.props.cloudID} pass={this.pass} kind={this.props.kind} trialcase={this.props.trialcase}/></Card>}</FormattedMessage>
                            <FormattedMessage id="fc Deploy">{msg => <Card title={msg} style={{marginBottom: 10}}><DeployCard deploy={this.state.currentDeploy} switchRegion={this.switchRegion} region={this.state.region} defalutName={this.props.defalutName} userID={this.props.userID} cloudID={this.props.cloudID} pass={this.pass} kind={this.props.kind} trialcase={this.props.trialcase}/></Card>}</FormattedMessage>
                            <FormattedMessage id="API Path">{msg => <Card title={msg} style={{marginBottom: 10}}><APIPathCard path={this.state.currentPath} defalutName={this.props.defalutName} userID={this.props.userID} deployID={this.state.currentDeploy? this.state.currentDeploy.id : this.state.deployIdPassToPath} groupID={this.state.currentGroup? this.state.currentGroup.id : this.state.groupIdPassToPath} trialcase={this.props.trialcase}/></Card>}</FormattedMessage>
                            <FormattedMessage id="Notification">{msg => <Card title={msg}><NotificationCard userID={this.props.userID} trialcase={this.props.trialcase}/></Card>}</FormattedMessage>
                        </Col>
                        <Col offset={2} span={6}>
                            <Button type='primary' disabled={this.state.couldDeploy? '': 'disabled'} onClick={()=>this.deployFC()}><FormattedMessage id="deploy"/>!</Button>
                            {
                                this.state.couldDeploy?
                                    ''
                                    :
                                    <div>
                                        <span>if button is disabled, check your schema</span>
                                    </div>
                            }
                        </Col>
                    </Row>
                </div>
            </div>
        )
    }
}

export default TencentConfig;