改

src/app/common/deploy/Deploy.jsx

@@ -10,6 +10,7 @@ import './index.css';
 import {SHOW_FC_SCHEMA, SHOW_FC_CONFIG, SEARCH_SCHEMA, SHOW_CLOUD, SHOW_WXCONTENT} from "../../../gql";
 import {request} from 'graphql-request'
 import {graphqlUrl} from "../../../config";
+import DisplayTable from "./common/DisplayTable";
 
 const tabListNoTitle = [{
     key: 'tencent',
@@ -32,7 +33,7 @@ class Deploy extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            show: false,
+            show: true,
             cloud: 'tencent',
             tencentCloudID: 'tencent_CloudID',
             aliyunCloudID: 'aliyun_CloudID',
@@ -58,202 +59,202 @@ class Deploy extends Component {
 
 
     fetch = () => {
-        if (this.state.schemaID !== '' && this.state.schemaID !== undefined) {
-            request(graphqlUrl, SHOW_FC_SCHEMA, {schema_id: this.state.schemaID}).then(
-                // 根据 schemaID 查询 fc 是否成功
-                data => {
-                    request(graphqlUrl, SEARCH_SCHEMA, {id: this.state.schemaID}).then(
-                        // 根据 schemaID 查询 schemaName
-                        _data => {
-                            if (data.fc_by_props.length === 0) {
-                                // 如果没有 fc，根据 userID 查 cloudId
-                                request(graphqlUrl, SHOW_CLOUD, {user_id: this.props.userID}).then(
-                                    __data => {
-                                        // 如果 user 未设置 cloudID
-                                        if(__data.cloud_by_props.length === 0) {
-                                            this.setState({
-                                                tencentFC: false,
-                                                aliyunFC: false,
-                                                amazonFC: false,
-                                                defalutName: _data.schema_by_id.schemaName,
-                                                show: true,
-                                                kind: 'graphql'
-                                            });
-                                        } else {
-                                            __data.cloud_by_props.forEach(cloud => {
-                                                switch (cloud.cloudName) {
-                                                    case 'tencent':
-                                                        this.setState({
-                                                            tencentFC: false,
-                                                            tencentCloudID: cloud.id,
-                                                            defalutName: _data.schema_by_id.schemaName,
-                                                            show: true,
-                                                            kind: 'graphql'
-                                                        });
-                                                        break;
-                                                    case 'aliyun':
-                                                        this.setState({
-                                                            aliyunFC: false,
-                                                            aliyunCloudID: cloud.id,
-                                                            defalutName: _data.schema_by_id.schemaName,
-                                                            show: true,
-                                                            kind: 'graphql'
-                                                        });
-                                                        break;
-                                                    case 'amazon':
-                                                        this.setState({
-                                                            amazonFC: false,
-                                                            amazonCloudID: cloud.id,
-                                                            defalutName: _data.schema_by_id.schemaName,
-                                                            show: true,
-                                                            kind: 'graphql'
-                                                        });
-                                                        break;
-                                                    default:
-                                                        break;
-                                                }
-                                            })
-                                        }
-                                    }
-                                );
-                            } else {
-                                // 如果有 fc, 则获取 cloudID
-                                data.fc_by_props.forEach(cloud => {
-                                    switch (cloud.cloud_id.cloudName) {
-                                        case 'tencent':
-                                            this.setState({
-                                                tencentFC: true,
-                                                tencentCloudID: cloud.cloud_id.id,
-                                                show: true,
-                                                kind: 'graphql'
-                                            });
-                                            break;
-                                        case 'aliyun':
-                                            this.setState({
-                                                aliyunFC: true,
-                                                aliyunCloudID: cloud.cloud_id.id,
-                                                show: true,
-                                                kind: 'graphql'
-                                            });
-                                            break;
-                                        case 'amazon':
-                                            this.setState({
-                                                amazonFC: true,
-                                                amazonCloudID: cloud.cloud_id.id,
-                                                show: true,
-                                                kind: 'graphql'
-                                            });
-                                            break;
-                                        default:
-                                            break;
-                                    }
-                                })
-                            }
-                        }
-                    );
-                }
-            );
-        } else {
-            request(graphqlUrl, SHOW_FC_CONFIG, {wxConfig_id: this.state.configID}).then(
-                // 根据 configID 查询 fc 是否成功
-                data => {
-                    request(graphqlUrl, SHOW_WXCONTENT, {id: this.state.configID}).then(
-                        // 根据 configID 查询 appName
-                        _data => {
-                            if (data.fc_by_props.length === 0) {
-                                // 如果没有 fc，根据 userID 查 cloudId
-                                request(graphqlUrl, SHOW_CLOUD, {user_id: this.props.userID}).then(
-                                    __data => {
-                                        // 如果 user 未设置 cloudID
-                                        if(__data.cloud_by_props.length === 0) {
-                                            this.setState({
-                                                tencentFC: false,
-                                                aliyunFC: false,
-                                                amazonFC: false,
-                                                defalutName: _data.wxConfig_by_id.appName,
-                                                show: true,
-                                                kind: 'wx'
-                                            });
-                                        } else {
-                                            __data.cloud_by_props.forEach(cloud => {
-                                                switch (cloud.cloudName) {
-                                                    case 'tencent':
-                                                        this.setState({
-                                                            tencentFC: false,
-                                                            tencentCloudID: cloud.id,
-                                                            defalutName: _data.wxConfig_by_id.appName,
-                                                            show: true,
-                                                            kind: 'wx'
-                                                        });
-                                                        break;
-                                                    case 'aliyun':
-                                                        this.setState({
-                                                            aliyunFC: false,
-                                                            aliyunCloudID: cloud.id,
-                                                            defalutName: _data.wxConfig_by_id.appName,
-                                                            show: true,
-                                                            kind: 'wx'
-                                                        });
-                                                        break;
-                                                    case 'amazon':
-                                                        this.setState({
-                                                            amazonFC: false,
-                                                            amazonCloudID: cloud.id,
-                                                            defalutName: _data.wxConfig_by_id.appName,
-                                                            show: true,
-                                                            kind: 'wx'
-                                                        });
-                                                        break;
-                                                    default:
-                                                        break;
-                                                }
-                                            })
-                                        }
-                                    }
-                                );
-                            } else {
-                                // 如果有 fc, 则获取 cloudID
-                                data.fc_by_props.forEach(cloud => {
-                                    switch (cloud.cloud_id.cloudName) {
-                                        case 'tencent':
-                                            this.setState({
-                                                tencentFC: true,
-                                                tencentCloudID: cloud.cloud_id.id,
-                                                show: true,
-                                                kind: 'wx'
-                                            });
-                                            break;
-                                        case 'aliyun':
-                                            this.setState({
-                                                aliyunFC: true,
-                                                aliyunCloudID: cloud.cloud_id.id,
-                                                show: true,
-                                                kind: 'wx'
-                                            });
-                                            break;
-                                        case 'amazon':
-                                            this.setState({
-                                                amazonFC: true,
-                                                amazonCloudID: cloud.cloud_id.id,
-                                                show: true,
-                                                kind: 'wx'
-                                            });
-                                            break;
-                                        default:
-                                            break;
-                                    }
-                                })
-                            }
-                        }
-                    );
-                }
-            );
-        }
+        // if (this.state.schemaID !== '' && this.state.schemaID !== undefined) {
+        //     request(graphqlUrl, SHOW_FC_SCHEMA, {schema_id: this.state.schemaID}).then(
+        //         // 根据 schemaID 查询 fc 是否成功
+        //         data => {
+        //             request(graphqlUrl, SEARCH_SCHEMA, {id: this.state.schemaID}).then(
+        //                 // 根据 schemaID 查询 schemaName
+        //                 _data => {
+        //                     if (data.fc_by_props.length === 0) {
+        //                         // 如果没有 fc，根据 userID 查 cloudId
+        //                         request(graphqlUrl, SHOW_CLOUD, {user_id: this.props.userID}).then(
+        //                             __data => {
+        //                                 // 如果 user 未设置 cloudID
+        //                                 if(__data.cloud_by_props.length === 0) {
+        //                                     this.setState({
+        //                                         tencentFC: false,
+        //                                         aliyunFC: false,
+        //                                         amazonFC: false,
+        //                                         defalutName: _data.schema_by_id.schemaName,
+        //                                         show: true,
+        //                                         kind: 'graphql'
+        //                                     });
+        //                                 } else {
+        //                                     __data.cloud_by_props.forEach(cloud => {
+        //                                         switch (cloud.cloudName) {
+        //                                             case 'tencent':
+        //                                                 this.setState({
+        //                                                     tencentFC: false,
+        //                                                     tencentCloudID: cloud.id,
+        //                                                     defalutName: _data.schema_by_id.schemaName,
+        //                                                     show: true,
+        //                                                     kind: 'graphql'
+        //                                                 });
+        //                                                 break;
+        //                                             case 'aliyun':
+        //                                                 this.setState({
+        //                                                     aliyunFC: false,
+        //                                                     aliyunCloudID: cloud.id,
+        //                                                     defalutName: _data.schema_by_id.schemaName,
+        //                                                     show: true,
+        //                                                     kind: 'graphql'
+        //                                                 });
+        //                                                 break;
+        //                                             case 'amazon':
+        //                                                 this.setState({
+        //                                                     amazonFC: false,
+        //                                                     amazonCloudID: cloud.id,
+        //                                                     defalutName: _data.schema_by_id.schemaName,
+        //                                                     show: true,
+        //                                                     kind: 'graphql'
+        //                                                 });
+        //                                                 break;
+        //                                             default:
+        //                                                 break;
+        //                                         }
+        //                                     })
+        //                                 }
+        //                             }
+        //                         );
+        //                     } else {
+        //                         // 如果有 fc, 则获取 cloudID
+        //                         data.fc_by_props.forEach(cloud => {
+        //                             switch (cloud.cloud_id.cloudName) {
+        //                                 case 'tencent':
+        //                                     this.setState({
+        //                                         tencentFC: true,
+        //                                         tencentCloudID: cloud.cloud_id.id,
+        //                                         show: true,
+        //                                         kind: 'graphql'
+        //                                     });
+        //                                     break;
+        //                                 case 'aliyun':
+        //                                     this.setState({
+        //                                         aliyunFC: true,
+        //                                         aliyunCloudID: cloud.cloud_id.id,
+        //                                         show: true,
+        //                                         kind: 'graphql'
+        //                                     });
+        //                                     break;
+        //                                 case 'amazon':
+        //                                     this.setState({
+        //                                         amazonFC: true,
+        //                                         amazonCloudID: cloud.cloud_id.id,
+        //                                         show: true,
+        //                                         kind: 'graphql'
+        //                                     });
+        //                                     break;
+        //                                 default:
+        //                                     break;
+        //                             }
+        //                         })
+        //                     }
+        //                 }
+        //             );
+        //         }
+        //     );
+        // } else {
+        //     request(graphqlUrl, SHOW_FC_CONFIG, {wxConfig_id: this.state.configID}).then(
+        //         // 根据 configID 查询 fc 是否成功
+        //         data => {
+        //             request(graphqlUrl, SHOW_WXCONTENT, {id: this.state.configID}).then(
+        //                 // 根据 configID 查询 appName
+        //                 _data => {
+        //                     if (data.fc_by_props.length === 0) {
+        //                         // 如果没有 fc，根据 userID 查 cloudId
+        //                         request(graphqlUrl, SHOW_CLOUD, {user_id: this.props.userID}).then(
+        //                             __data => {
+        //                                 // 如果 user 未设置 cloudID
+        //                                 if(__data.cloud_by_props.length === 0) {
+        //                                     this.setState({
+        //                                         tencentFC: false,
+        //                                         aliyunFC: false,
+        //                                         amazonFC: false,
+        //                                         defalutName: _data.wxConfig_by_id.appName,
+        //                                         show: true,
+        //                                         kind: 'wx'
+        //                                     });
+        //                                 } else {
+        //                                     __data.cloud_by_props.forEach(cloud => {
+        //                                         switch (cloud.cloudName) {
+        //                                             case 'tencent':
+        //                                                 this.setState({
+        //                                                     tencentFC: false,
+        //                                                     tencentCloudID: cloud.id,
+        //                                                     defalutName: _data.wxConfig_by_id.appName,
+        //                                                     show: true,
+        //                                                     kind: 'wx'
+        //                                                 });
+        //                                                 break;
+        //                                             case 'aliyun':
+        //                                                 this.setState({
+        //                                                     aliyunFC: false,
+        //                                                     aliyunCloudID: cloud.id,
+        //                                                     defalutName: _data.wxConfig_by_id.appName,
+        //                                                     show: true,
+        //                                                     kind: 'wx'
+        //                                                 });
+        //                                                 break;
+        //                                             case 'amazon':
+        //                                                 this.setState({
+        //                                                     amazonFC: false,
+        //                                                     amazonCloudID: cloud.id,
+        //                                                     defalutName: _data.wxConfig_by_id.appName,
+        //                                                     show: true,
+        //                                                     kind: 'wx'
+        //                                                 });
+        //                                                 break;
+        //                                             default:
+        //                                                 break;
+        //                                         }
+        //                                     })
+        //                                 }
+        //                             }
+        //                         );
+        //                     } else {
+        //                         // 如果有 fc, 则获取 cloudID
+        //                         data.fc_by_props.forEach(cloud => {
+        //                             switch (cloud.cloud_id.cloudName) {
+        //                                 case 'tencent':
+        //                                     this.setState({
+        //                                         tencentFC: true,
+        //                                         tencentCloudID: cloud.cloud_id.id,
+        //                                         show: true,
+        //                                         kind: 'wx'
+        //                                     });
+        //                                     break;
+        //                                 case 'aliyun':
+        //                                     this.setState({
+        //                                         aliyunFC: true,
+        //                                         aliyunCloudID: cloud.cloud_id.id,
+        //                                         show: true,
+        //                                         kind: 'wx'
+        //                                     });
+        //                                     break;
+        //                                 case 'amazon':
+        //                                     this.setState({
+        //                                         amazonFC: true,
+        //                                         amazonCloudID: cloud.cloud_id.id,
+        //                                         show: true,
+        //                                         kind: 'wx'
+        //                                     });
+        //                                     break;
+        //                                 default:
+        //                                     break;
+        //                             }
+        //                         })
+        //                     }
+        //                 }
+        //             );
+        //         }
+        //     );
+        // }
     };
 
     render() {
         const contentListNoTitle = {
-            tencent: <TencentConfig configID={this.state.configID} schemaID={this.state.schemaID} cloudID={this.state.tencentCloudID} fc={this.state.tencentFC} defalutName={this.state.defalutName} userID={this.props.userID} kind={this.state.kind} trialcase={this.props.trialcase}/>,
+            tencent: <DisplayTable configID={this.state.configID} schemaID={this.state.schemaID} cloudID={this.state.tencentCloudID} fc={this.state.tencentFC} defalutName={this.state.defalutName} userID={this.props.userID} kind={this.state.kind} trialcase={this.props.trialcase}/>,
             aliyun: <AliConfig/>,
             amazon: <AmazonConfig/>,
         };

src/app/common/deploy/common/DisplayTable.js

@@ -0,0 +1,82 @@
+import React, {Component} from 'react';
+import {SHOW_APIGWGROUP} from "../../../../gql";
+import {Spin, Row, Col} from 'antd';
+import {Mutation, Query} from "react-apollo";
+import gql from "graphql-tag";
+import TencentConfig from "../tencent/TencentConfig";
+
+class DisplayTable extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            groupID: '',
+            groupName: ''
+        };
+    }
+
+
+    switchGroup = (groupID, groupName) => {
+        this.setState({
+            groupID,
+            groupName
+        })
+    };
+
+    render() {
+        let {schemaID} = this.props;
+        return (
+            <Query query={gql(SHOW_APIGWGROUP)} variables={{schema_id: schemaID}}>
+
+                {
+                    ({loading, error, data}) => {
+                        if (loading) {
+                            return <Spin style={{marginLeft: 3}}/>
+                        }
+                        if (error) {
+                            return 'error!';
+                        }
+                        return (
+                            <div>
+                                {
+                                    this.state.groupID === ''?
+                                        <div>
+                                            <div className={'schema-table-list-title'}>
+                                                <Row>
+                                                    <Col span={10}><span className={'schema-table-title'}>Name</span></Col>
+                                                    <Col span={10}><span className={'schema-table-title'}>District</span></Col>
+                                                    <Col span={2} offset={2}>
+                                                    </Col>
+                                                </Row>
+                                            </div>
+                                            {
+                                                data.apiGWGroup_by_props.map(group => (
+                                                    <div key={group.id} className={'schema-table-list-content'}>
+                                                        <Row>
+                                                            <Col
+                                                                span={10}
+                                                                onClick={() => this.switchGroup(group.id, group.groupName)}
+                                                            >
+                                                                <span className={'schema-table-content name'}>{group.groupName}</span>
+                                                            </Col>
+                                                            <Col span={10}>
+                                                                <span className={'schema-table-content'}>{group.region}</span>
+                                                            </Col>
+                                                        </Row>
+                                                    </div>
+                                                ))
+                                            }
+                                        </div>
+                                        :
+                                        <TencentConfig goBack={()=>{this.setState({groupID: ''})}} groupName={this.state.groupName} configID={this.props.configID} schemaID={this.props.schemaID} cloudID={this.props.tencentCloudID} fc={this.props.tencentFC} defalutName={this.props.defalutName} userID={this.props.userID} kind={this.props.kind} trialcase={this.props.trialcase}/>
+                                }
+
+                            </div>
+                        )
+                    }
+                }
+            </Query>
+        )
+    }
+}
+
+export default DisplayTable;

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

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Row, Col, Card, Button} from 'antd';
+import {Row, Col, Card, Button, Icon} from 'antd';
 import axios from 'axios';
 import APIGroupCard from './APIGroupCard';
 import APIPathCard from './APIPathCard';
@@ -11,7 +11,6 @@ import {request} from 'graphql-request'
 import {graphqlUrl,deployUrl} from "../../../../config";
 import {FormattedMessage} from 'react-intl';
 
-
 class TencentConfig extends Component {
     constructor(props) {
         super(props);
@@ -140,17 +139,19 @@ class TencentConfig extends Component {
     };
 
     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="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 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>

src/app/graphqlService/component/graphql/Graphql.jsx

@@ -13,7 +13,7 @@ class Graphql extends Component {
       // api: 'http://service-4i9xdoqo-1254337200.ap-guangzhou.apigateway.myqcloud.com/release/graphql',
       // api: 'http://service-ci2tk8iu-1254337200.ap-guangzhou.apigateway.myqcloud.com/release/graphql',
       // 便于开发调试，请删除并换成上面
-      // api: graphqlUrl
+      api: graphqlUrl
       // api: 'http://service-28dm054z-1254337200.ap-shanghai.apigateway.myqcloud.com/release/graphql'
       // api: 'http://service-acb8p44v-1254337200.ap-beijing.apigateway.myqcloud.com/release/graphql'
 

src/gql.js

@@ -282,8 +282,8 @@ const UPDATE_DEPLOY = `
         `;
 
 const SHOW_APIGWGROUP = `
-            query GROUP($cloud_id: ID!) {
-                apiGWGroup_by_props(cloud_id: $cloud_id) {
+            query GROUP($schema_id: ID!) {
+                apiGWGroup_by_props(schema_id: $schema_id) {
                     id
                     groupName
                     region
@@ -291,6 +291,7 @@ const SHOW_APIGWGROUP = `
                     defaultDomain
                     userStatus
                     userDomain
+                   
                 }
             }
         `;