online/src/devApp/developVersion/common/manage/TencentResult.js

import React, {Component} from 'react';
import {FormattedMessage} from 'react-intl';
import {Switch, Input, Icon, Spin, Row, Col, message} from 'antd';
import {
    DELETE_APIGWPATH,
    DELETE_APIGROUP,
    GET_PROJECT,
    SHOW_APIGWPATH,
    UPDATE_APIGROUP,
    UPDATE_PROJECT_ONLY_STATUS
} from "../../../../gql";
import {request} from 'graphql-request'
import gql from "graphql-tag";
import {Query, Mutation} from "react-apollo";
import copy from 'copy-to-clipboard';
import axios from 'axios';
import {removeAPI, graphqlUrl} from "../../../../config";

axios.defaults.withCredentials = true;

class TencentResult extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        let projectID = this.props.projectID ? this.props.projectID : this.props.kind === 'graphql' ? 'ecommerce_projectID' : 'ecommerce_projectID_wx';
        return (
            <Query query={gql(GET_PROJECT)} variables={{id: projectID}} fetchPolicy={'network-only'}>
                {
                    ({loading, error, data}) => {
                        if (loading) {
                            return <Spin style={{marginLeft: 3}}/>
                        }
                        if (error) {
                            return 'error!';
                        }
                        let group = data.project_by_id.apiGWGroup_id || {};
                        let projectType = data.project_by_id.projectType || 'graphql';
                        let projectStatus = data.project_by_id.projectStatus || 'created';
                        let cloudID = data.project_by_id.cloud_id || 'tencent_CloudID';
                        return (
                            <div>
                                {
                                    projectStatus === 'deployed'?
                                        <div>
                                            <div className={'schema-name'}><FormattedMessage id='service manage'/></div>
                                            <div className={'schema-table-list-title'}>
                                                <Row>
                                                    <Col span={4}><span className={'schema-table-title'}><FormattedMessage id='groupName'/></span></Col>
                                                    <Col span={10}><span className={'schema-table-title'}><FormattedMessage id='defaultDomain'/></span></Col>
                                                    <Col span={3}><span className={'schema-table-title'}><FormattedMessage id='frontType'/></span></Col>
                                                    <Col span={4}><span className={'schema-table-title'}><FormattedMessage id='environmentName'/></span></Col>
                                                    <Col span={3}><span className={'schema-table-title'}><FormattedMessage id='operation'/></span></Col>
                                                </Row>
                                            </div>
                                            <div className={'schema-table-list-content'}>
                                                <Row>
                                                    <Col span={4}>
                                                        <span className={'schema-table-content'}>{group.serviceId}</span>
                                                    </Col>
                                                    <Col span={10}>
                                                        <span className={'schema-table-content'}>{group.defaultDomain} </span>
                                                        <Icon type="copy" theme="twoTone" onClick={() => {
                                                            copy(group.defaultDomain);
                                                            message.success('复制成功.');
                                                        }}/>
                                                    </Col>
                                                    <Col span={3}>
                                                        <span className={'schema-table-content'}>{group.frontType}</span>
                                                    </Col>
                                                    <Col span={4}>
                                                        <span className={'schema-table-content'}>{group.environmentName}</span>
                                                    </Col>
                                                    <Col span={3}>
                                                    <span className={'schema-table-content'}>
                                                        {
                                                            this.props.trialcase?
                                                                <Switch checked={true} disabled/>
                                                                :
                                                                <SwitchStatus group={group}/>
                                                        }
                                                        &nbsp;
                                                        {
                                                            this.props.trialcase ?
                                                                ''
                                                                :
                                                                <DeleteGroupSpan
                                                                cloudID={cloudID}
                                                                groupID={group.id}
                                                                projectID={projectID}
                                                                userID={this.props.userID}
                                                            />
                                                        }
                                                    </span>
                                                    </Col>
                                                </Row>
                                            </div>
                                            <div style={{marginTop: 30}}>
                                                <div className={'schema-name'}><FormattedMessage id='API manage'/></div>
                                                <APIGWPathResult
                                                    group={group}
                                                    projectType={projectType}
                                                    switchMenu={this.props.switchMenu}
                                                    cloudID={cloudID}
                                                    projectID={projectID}
                                                    userID={this.props.userID}
                                                    trialcase={this.props.trialcase}
                                                />
                                            </div>
                                        </div>
                                        :
                                        projectStatus === 'updated'?
                                            <FormattedMessage id='deploy updated'/>
                                            :
                                            <FormattedMessage id='No deploy'/>
                                }
                            </div>
                        )
                    }
                }
            </Query>
        )
    }
}

export default TencentResult;

class SwitchStatus extends Component {
    constructor(props) {
        super(props);
        this.state = {
            checked: props.group.userStatus === 'open'
        }
    }

    componentWillReceiveProps(next) {
        this.setState({
            checked: next.group.userStatus === 'open'
        })
    }

    render() {
        let {group} = this.props;
        let {id, userDomain, groupName, frontType, region, environmentName} = group;
        return (
            <div style={{display: 'inline', marginRight: '10px'}}>
                <Mutation
                    mutation={gql(UPDATE_APIGROUP)}
                    onCompleted={(data) => {
                        this.setState({
                            checked: data.update_apiGWGroup.userStatus === 'open'
                        })
                    }}
                >

                    {(update_apiGWGroup, {loading, error}) => {
                        if (loading)
                            return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
                        if (error)
                            return 'error';
                        return (
                            <Switch checked={this.state.checked} onChange={(checked) => {
                                update_apiGWGroup({
                                    variables: {
                                        id,
                                        userStatus: checked ? 'open' : 'close',
                                        userDomain,
                                        groupName,
                                        frontType,
                                        region,
                                        environmentName,
                                        updatedAt: new Date().getTime()
                                    }
                                })
                            }}/>
                        )
                    }}
                </Mutation>
            </div>
        )
    }
}

class APIGWPathResult extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        let {group, projectType} = this.props;
        let {id} = group;
        return (
            <Query query={gql(SHOW_APIGWPATH)} variables={{apiGWGroup_id: id}} fetchPolicy={'network-only'}>
                {
                    ({loading, error, data}) => {
                        if (loading) {
                            return <Spin style={{marginLeft: 3}}/>
                        }
                        if (error) {
                            return 'error!';
                        }
                        let paths = data.apiGWPath_by_props || [];
                        return (
                            <div>
                                {
                                    Object.keys(paths).length !== 0 ?
                                        <div>
                                            <div className={'schema-table-list-title'}>
                                                <Row>
                                                    <Col span={6}><span className={'schema-table-title'}><FormattedMessage id='name'/></span></Col>
                                                    <Col span={6}><span className={'schema-table-title'}><FormattedMessage id='path'/></span></Col>
                                                    <Col span={3}><span className={'schema-table-title'}><FormattedMessage id='method'/></span></Col>
                                                    <Col span={6}><span className={'schema-table-title'}><FormattedMessage id='description'/></span></Col>
                                                    <Col span={3}><span className={'schema-table-title'}><FormattedMessage id='operation'/></span></Col>
                                                </Row>
                                            </div>
                                            {
                                                paths.map(path => (
                                                    <div key={path.apiGWPath} className={'schema-table-list-content'}>
                                                        <Row>
                                                            <Col span={6}>
                                                                <span className={'schema-table-content'}>{path.apiGWName}</span>
                                                            </Col>
                                                            <Col span={6}>
                                                                <span className={'schema-table-content'}>{path.apiGWPath}</span>
                                                            </Col>
                                                            <Col span={3}>
                                                                <span className={'schema-table-content'}>{path.requestMethod}</span>
                                                            </Col>
                                                            <Col span={6}>
                                                                <span className={'schema-table-content'}>{path.apiGWDesc}</span>
                                                            </Col>
                                                            <Col span={3}>
                                                                {
                                                                    projectType === 'graphql'?
                                                                        <span className={'schema-table-content name'}
                                                                              onClick={() => {
                                                                                  this.props.switchMenu('menuLevel2', {key: 'graphiql'});
                                                                              }}>
                                                                            <FormattedMessage id='try'/>
                                                                        </span>
                                                                        :
                                                                        ''
                                                                }
                                                                &nbsp;
                                                                {
                                                                    this.props.trialcase?
                                                                        ''
                                                                        :
                                                                        <DeletePathSpan
                                                                            cloudID={this.props.cloudID}
                                                                            groupID={id}
                                                                            path={path}
                                                                            projectID={this.props.projectID}
                                                                            userID={this.props.userID}
                                                                        />
                                                                }

                                                            </Col>
                                                        </Row>
                                                    </div>
                                                ))
                                            }
                                        </div>
                                        :
                                        '路径不存在'
                                }
                            </div>

                        )
                    }
                }
            </Query>
        )
    }
}

class DeletePathSpan extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }

    render() {
        return (
            <Mutation
                mutation={gql(DELETE_APIGWPATH)}
                refetchQueries={[{query: gql(SHOW_APIGWPATH), variables: {apiGWGroup_id: this.props.groupID}}]}
            >
                {(delete_apiGWPath, {loading, error}) => {
                    if (error)
                        return 'error';
                    if (loading)
                        return <Spin style={{marginLeft: 3}}/>;

                    return (
                        <span className={'schema-table-content name'} onClick={() => {
                                  let _this = this;
                                  axios.get(`${removeAPI}`, {
                                      params: {
                                          'cloud-id': `${_this.props.cloudID}`,
                                          'group-id': `${_this.props.groupID}`,
                                          'api-id': `${_this.props.path.id}`
                                      }
                                  })
                                      .then((res) => {
                                          console.log('delete api');
                                          if (res.data !== '') {

                                              console.log('path id', _this.props.path.id, 'user id', _this.props.userID);

                                              delete_apiGWPath({variables: {id:_this.props.path.id, user_id: _this.props.userID}});

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

                                              console.log(res.data);
                                          } else {
                                              console.log('error');
                                          }
                                      })
                                      .catch((err) => {
                                          console.log(err);
                                      });
                              }}
                        >
                            删除
                        </span>
                    )
                }}
            </Mutation>
        )
    }
}

class DeleteGroupSpan extends Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }

    render() {
        let {projectID, cloudID, groupID, userID} = this.props;
        return (
            <Mutation
                mutation={gql(DELETE_APIGROUP)}
                refetchQueries={[{query: gql(GET_PROJECT), variables: {id: projectID}}]}
            >
                {(delete_apiGWGroup, {loading, error}) => {
                    if (error)
                        return 'error';
                    if (loading)
                        return <Spin style={{marginLeft: 3}}/>;

                    return (
                        <span className={'schema-table-content name'} onClick={() => {
                            axios.get(`${removeAPI}`, {
                                params: {
                                    'cloud-id': `${cloudID}`,
                                    'group-id': `${groupID}`,
                                }
                            })
                                .then((res) => {
                                    console.log('delete service');
                                    if (res.data !== '') {

                                        delete_apiGWGroup({variables: {id: groupID, user_id: userID}});

                                        // 写回 project 状态
                                        request(graphqlUrl, UPDATE_PROJECT_ONLY_STATUS, {
                                            id: projectID,
                                            updatedAt: new Date().getTime(),
                                            projectStatus: 'functioned'
                                        });

                                        console.log(res.data);
                                    } else {
                                        console.log('error');
                                    }
                                })
                                .catch((err) => {
                                    console.log(err);
                                });
                        }}
                        >
                            删除
                        </span>
                    )
                }}
            </Mutation>
        )
    }
}