online/src/app/common/manage/TencentResult.js

import React, {Component} from 'react';
import {Switch, Input, Icon, Spin, Row, Col, message} from 'antd';
import {GET_PROJECT, SHOW_APIGWPATH, UPDATE_APIGROUP} from "../../../gql";
import gql from "graphql-tag";
import {Query, Mutation} from "react-apollo";
import copy from 'copy-to-clipboard';

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

    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 = data.project_by_id.apiGWGroup_id || {};
                        return (
                            <div>
                                {
                                    Object.keys(group).length !== 0 ?
                                        <div>
                                            <div className={'schema-name'}>服务管理</div>
                                            <div className={'schema-table-list-title'}>
                                                <Row>
                                                    <Col span={4}><span className={'schema-table-title'}>服务名</span></Col>
                                                    <Col span={10}><span className={'schema-table-title'}>默认域名</span></Col>
                                                    <Col span={3}><span className={'schema-table-title'}>前端类型</span></Col>
                                                    <Col span={4}><span className={'schema-table-title'}>发布状态</span></Col>
                                                    <Col span={3}><span className={'schema-table-title'}>操作</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'}>
                                                        <SwitchStatus group={group}/>
                                                        {/*<span className={'schema-table-content name'}>删除</span>*/}
                                                    </span>
                                                    </Col>
                                                </Row>
                                            </div>
                                            <div style={{marginTop: 30}}>
                                                <div className={'schema-name'}>API 管理</div>
                                                <APIGWPathResult
                                                    group={group}
                                                    switchMenu={this.props.switchMenu}
                                                    switchAPI={this.props.switchAPI}
                                                />
                                            </div>
                                        </div>
                                        :
                                        '尚未部署'
                                }
                            </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} = this.props;
        let {id, frontType, defaultDomain} = group;
        return (
            <Query query={gql(SHOW_APIGWPATH)} variables={{apiGWGroup_id: id}}>
                {
                    ({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'}>名称</span></Col>
                                                    <Col span={6}><span className={'schema-table-title'}>路径</span></Col>
                                                    <Col span={3}><span className={'schema-table-title'}>方法</span></Col>
                                                    <Col span={6}><span className={'schema-table-title'}>描述</span></Col>
                                                    <Col span={3}><span className={'schema-table-title'}>操作</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}>
                                                                {/*<span className={'schema-table-content name'}>删除</span>*/}
                                                                {/*<span> </span>*/}
                                                                <span className={'schema-table-content name'}
                                                                      onClick={() => {
                                                                          this.props.switchMenu('menuLevel2', {key: 'graphiql'});
                                                                          this.props.switchAPI(frontType.slice(0, 4) + '://' + defaultDomain + path.apiGWPath)
                                                                      }}>
                                                                    调试
                                                                </span>
                                                            </Col>
                                                        </Row>
                                                    </div>
                                                ))
                                            }
                                        </div>
                                        :
                                        '路径不存在'
                                }
                            </div>

                        )
                    }
                }
            </Query>
        )
    }
}