增加了 apiPath 的显示

src/components/common/deploy/Deploy.jsx

@@ -2,9 +2,10 @@ import React, {Component} from 'react';
 import {Row, Col, Input, Spin, Button} from 'antd';
 
 import {Mutation, Query} from "react-apollo";
-import {SHOW_CLOUD, SHOW_DEPLOY} from "../../gql";
+import {SHOW_CLOUD, SHOW_DEPLOY, SHOW_APIGWGROUP} from "../../gql";
 import './index.css';
-import TencentConfig from './tencent/TencentConfig';
+import TencentDeploy from './tencent/TencentDeploy';
+import TencentAPIGroup from './tencent/TencentAPIGroup';
 
 const Search = Input.Search;
 
@@ -13,7 +14,9 @@ class Deploy extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            deploy: ''
+            show: 'all',
+            deploy: '',
+            apiGroup: ''
         };
     }
 
@@ -21,14 +24,24 @@ class Deploy extends Component {
     findDeploy = (id, data) => {
         return () => {
             this.setState({
+                show: 'deploy',
                 deploy: data.deploy_by_props.find(deploy => deploy.id === id)
             })
         };
     };
 
+    findApiGroup = (id, data) => {
+        return () => {
+            this.setState({
+                show: 'api',
+                apiGroup: data.apiGWGroup_by_props.find(group => group.id === id)
+            })
+        };
+    };
+
     reDisplayChoose = () => {
         this.setState({
-            deploy: ''
+            show: 'all'
         })
     };
 
@@ -39,9 +52,8 @@ class Deploy extends Component {
             <div>
 
                 {
-                    this.state.deploy === '' ?
+                    this.state.show === 'all' ?
                         <Query query={SHOW_CLOUD} variables={{user_id: userID}}>
-
                             {
                                 ({loading, error, data}) => {
                                     if (loading) {
@@ -53,37 +65,73 @@ class Deploy extends Component {
                                     return (
                                         data.cloud_by_props.map(cloud => (
                                             <div key={cloud.id} style={{marginBottom: 30}}>
-                                                <b>{cloud.cloudName}: {cloud.id}.</b>
-                                                <div>
+                                                <span className='cloud-name'>{cloud.cloudName}: {cloud.id}.</span>
+                                                <div style={{marginBottom: 15}}>
                                                     <div>
-                                                        <b>ID: </b><Input style={{width: 250}} value={cloud.secretId}/>
-                                                        <b>Key: </b><Input style={{width: 250}}
-                                                                           value={cloud.secretKey}/>
+                                                        ID: <Input style={{width: 250}} value={cloud.secretId}/>
+                                                        Key: <Input style={{width: 250}}
+                                                                    value={cloud.secretKey}/>
                                                     </div>
                                                 </div>
-                                                <Query query={SHOW_DEPLOY} variables={{cloud_id: cloud.id}}>
-                                                    {
-                                                        ({loading, error, data}) => {
-                                                            if (loading) {
-                                                                return <Spin style={{marginLeft: 3}}/>
+
+                                                <Row>
+                                                    <Col span={12}>
+                                                        <b>DEPLOY</b>
+                                                        <Query query={SHOW_DEPLOY} variables={{cloud_id: cloud.id}}>
+                                                            {
+                                                                ({loading, error, data}) => {
+                                                                    if (loading) {
+                                                                        return <Spin style={{marginLeft: 3}}/>
+                                                                    }
+                                                                    if (error) {
+                                                                        return 'error!';
+                                                                    }
+                                                                    return (
+                                                                        data.deploy_by_props.map(deploy => (
+                                                                            <div key={deploy.id}>
+                                                                                <div>
+                                                                                    {deploy.id} - {deploy.functionName}
+                                                                                    <Button size="small"
+                                                                                            onClick={this.findDeploy(deploy.id, data)}
+                                                                                            type='primary'>Show
+                                                                                        me</Button>
+                                                                                </div>
+                                                                            </div>
+                                                                        ))
+                                                                    )
+                                                                }
                                                             }
-                                                            if (error) {
-                                                                return 'error!';
+                                                        </Query>
+                                                    </Col>
+                                                    <Col span={12}>
+                                                        <b>API</b>
+                                                        <Query query={SHOW_APIGWGROUP} variables={{cloud_id: cloud.id}}>
+                                                            {
+                                                                ({loading, error, data}) => {
+                                                                    if (loading) {
+                                                                        return <Spin style={{marginLeft: 3}}/>
+                                                                    }
+                                                                    if (error) {
+                                                                        return 'error!';
+                                                                    }
+                                                                    return (
+                                                                        data.apiGWGroup_by_props.map(apiGroup => (
+                                                                            <div key={apiGroup.id}>
+                                                                                <div>
+                                                                                    {apiGroup.id} - {apiGroup.groupName}
+                                                                                    <Button size="small"
+                                                                                            onClick={this.findApiGroup(apiGroup.id, data)}
+                                                                                            type='primary'>Show
+                                                                                        me</Button>
+                                                                                </div>
+                                                                            </div>
+                                                                        ))
+                                                                    )
+                                                                }
                                                             }
-                                                            return (
-                                                                data.deploy_by_props.map(deploy => (
-                                                                    <div key={deploy.id}>
-                                                                        <div>
-                                                                            {deploy.id} - {deploy.functionName}
-                                                                            <Button size="small" onClick={this.findDeploy(deploy.id, data)} type='primary'>Show me</Button>
-                                                                        </div>
-                                                                    </div>
-                                                                ))
-                                                            )
-                                                        }
-                                                    }
-                                                </Query>
-
+                                                        </Query>
+                                                    </Col>
+                                                </Row>
                                             </div>
                                         ))
                                     );
@@ -92,7 +140,10 @@ class Deploy extends Component {
 
                         </Query>
                         :
-                        <TencentConfig reDisplayChoose={this.reDisplayChoose} deploy={this.state.deploy}/>
+                        this.state.show === 'deploy' ?
+                            <TencentDeploy reDisplayChoose={this.reDisplayChoose} deploy={this.state.deploy}/>
+                            :
+                            <TencentAPIGroup reDisplayChoose={this.reDisplayChoose} apiGroup={this.state.apiGroup}/>
                 }
             </div>
 

src/components/common/deploy/index.css

@@ -36,4 +36,11 @@ p.show {
 .vice-title {
     width: 120px;
     display: inline-block;
+}
+
+.cloud-name {
+    font-weight: bold;
+    font-size: large;
+    display: block;
+    height: 35px;
 }

src/components/common/deploy/tencent/TencentAPIGroup.js

@@ -0,0 +1,123 @@
+import React, {Component} from 'react';
+
+import {Input, Select, Button, Row, Col, Spin} from 'antd';
+import TencentAPIPath from './TencentAPIPath';
+import {SHOW_APIGWPATH} from "../../../gql";
+import {Mutation, Query} from "react-apollo";
+
+const Option = Select.Option;
+
+class TencentAPIGroup extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            configs: ['groupName', 'region', 'frontType', 'defaultDomain', 'userDomain', 'userStatus'],
+            id: props.apiGroup.id,
+            groupName: props.apiGroup.groupName,
+            region: props.apiGroup.region,
+            frontType: props.apiGroup.frontType,
+            defaultDomain: props.apiGroup.defaultDomain,
+            userDomain: props.apiGroup.userDomain,
+            userStatus: props.apiGroup.userStatus,
+            show: 'all',
+            apiPath: ''
+        };
+    }
+
+    findAPIPath = (id, data) => {
+        return () => {
+            this.setState({
+                show: 'apiPath',
+                apiPath: data.apiGWPath_by_props.find(apiPath => apiPath.id === id)
+            })
+        };
+    };
+
+    reDisplayChoosePath = () => {
+        this.setState({
+            show: 'all'
+        })
+    };
+
+    switchConfig = (label) => {
+        return (e) => {
+            this.setState({
+                [label]: e.target.value
+            })
+        };
+    };
+
+    componentWillReceiveProps(next) {
+        this.setState({
+            id: next.apiGroup.id,
+            groupName: next.apiGroup.groupName,
+            region: next.apiGroup.region,
+            frontType: next.apiGroup.frontType,
+            defaultDomain: next.apiGroup.defaultDomain,
+            userDomain: next.apiGroup.userDomain,
+            userStatus: next.apiGroup.userStatus,
+        });
+    };
+
+    render() {
+        return (
+            <div style={{margin: 20}}>
+
+
+                <div onClick={this.props.reDisplayChoose} style={{marginBottom: 30}}> back to choose</div>
+                <div>
+                    <span className='table-title'> API Group Config</span>
+                    {
+                        this.state.configs.map(config => (
+                            <div key={config} style={{marginBottom: 10}}>
+                                <span className='vice-title'>{config}: </span>
+                                <Input value={this.state[config]} style={{width: 200}}
+                                       onChange={this.switchConfig(config)}/>
+                            </div>
+                        ))
+                    }
+
+                </div>
+
+                <div>
+                    <span className='table-title'> API Path Config</span>
+                    {
+
+                        this.state.show === 'all'?
+                            <Query query={SHOW_APIGWPATH} variables={{apiGWGroup_id: this.state.id}}>
+                                {
+                                    ({loading, error, data}) => {
+                                        if (loading) {
+                                            return <Spin style={{marginLeft: 3}}/>
+                                        }
+                                        if (error) {
+                                            return 'error!';
+                                        }
+                                        return (
+                                            data.apiGWPath_by_props.map(apiPath => (
+                                                <div key={apiPath.id}>
+                                                    <div>
+                                                        {apiPath.id} - {apiPath.apiGWName}
+                                                        <Button size="small"
+                                                                onClick={this.findAPIPath(apiPath.id, data)}
+                                                                type='primary'>Show
+                                                            me</Button>
+                                                    </div>
+                                                </div>
+                                            ))
+                                        )
+                                    }
+                                }
+                            </Query>
+                            :
+                            <TencentAPIPath apiPath={this.state.apiPath} reDisplayChoosePath={this.reDisplayChoosePath}/>
+                    }
+                </div>
+
+
+            </div>
+        )
+    }
+}
+
+export default TencentAPIGroup;

src/components/common/deploy/tencent/TencentAPIPath.js

@@ -0,0 +1,55 @@
+import React, {Component} from 'react';
+
+import {Input, Select, Button, Row, Col} from 'antd';
+
+const Option = Select.Option;
+
+class TencentAPIPath extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            configs: ['apiGWName', 'apiGWDesc', 'requestMethod'],
+            apiGWName: props.apiPath.apiGWName,
+            apiGWDesc: props.apiPath.apiGWDesc,
+            requestMethod: props.apiPath.requestMethod,
+        };
+    }
+
+    switchConfig = (label) => {
+        return (e) => {
+            this.setState({
+                [label]: e.target.value
+            })
+        };
+    };
+
+    componentWillReceiveProps(next) {
+        this.setState({
+            apiGWName: next.apiPath.apiGWName,
+            apiGWDesc: next.apiPath.apiGWDesc,
+            requestMethod: next.apiPath.requestMethod,
+        });
+    };
+
+    render() {
+        return (
+            <div style={{margin: 20}}>
+                <div onClick={this.props.reDisplayChoosePath} style={{marginBottom: 30}}> back to choose</div>
+                <div>
+                    {
+                        this.state.configs.map(config => (
+                            <div key={config} style={{marginBottom: 10}}>
+                                <span className='vice-title'>{config}: </span>
+                                <Input value={this.state[config]} style={{width: 200}}
+                                       onChange={this.switchConfig(config)}/>
+                            </div>
+                        ))
+                    }
+
+                </div>
+            </div>
+        )
+    }
+}
+
+export default TencentAPIPath;

src/components/common/deploy/tencent/TencentConfig.jsx → src/components/common/deploy/tencent/TencentDeploy.jsx

@@ -4,7 +4,7 @@ import {Input, Select, Button, Row, Col} from 'antd';
 
 const Option = Select.Option;
 
-class TencentConfig extends Component {
+class TencentDeploy extends Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -20,12 +20,6 @@ class TencentConfig extends Component {
         };
     }
 
-    switchCS = (value) => {
-        this.setState({
-            cloudServer: value
-        })
-    };
-
     switchConfig = (label) => {
         return (e) => {
             this.setState({
@@ -34,12 +28,6 @@ class TencentConfig extends Component {
         };
     };
 
-    switchDataBase = (value) => {
-        this.setState({
-            database: value
-        })
-    };
-
     componentWillReceiveProps(next) {
         this.setState({
             functionName: next.deploy.functionName,
@@ -60,10 +48,7 @@ class TencentConfig extends Component {
 
                 <div onClick={this.props.reDisplayChoose} style={{marginBottom: 30}}> back to choose</div>
                 <div>
-                    <span className='table-title'> Cloud Config</span>
-
-
-                    {/*<p><b>Other configs</b></p>*/}
+                    <span className='table-title'> Deploy Config</span>
                     {
                         this.state.configs.map(config => (
                             <div key={config} style={{marginBottom: 10}}>
@@ -82,4 +67,4 @@ class TencentConfig extends Component {
     }
 }
 
-export default TencentConfig;
+export default TencentDeploy;

src/components/gql.js

@@ -90,5 +90,30 @@ const SHOW_DEPLOY = gql`
             }
         `;
 
+const SHOW_APIGWGROUP = gql`
+            query GROUP($cloud_id: ID!) {
+                apiGWGroup_by_props(cloud_id: $cloud_id) {
+                    id
+                    groupName
+                    region
+                    frontType
+                    defaultDomain
+                    userStatus
+                    userDomain
+                }
+            }
+        `;
+
+const SHOW_APIGWPATH = gql`
+            query PATH($apiGWGroup_id: ID!) {
+                apiGWPath_by_props(apiGWGroup_id: $apiGWGroup_id) {
+                    id
+                    apiGWName
+                    apiGWDesc
+                    requestMethod
+                }
+            }
+        `;
+
 
-export {SHOW_SCHEMA, ADD_SCHEMA, DELETE_SCHEMA, UPDATE_SCHEMA, SHOW_TABLE, SHOW_CLOUD, SHOW_DEPLOY}
+export {SHOW_SCHEMA, ADD_SCHEMA, DELETE_SCHEMA, UPDATE_SCHEMA, SHOW_TABLE, SHOW_CLOUD, SHOW_DEPLOY, SHOW_APIGWGROUP, SHOW_APIGWPATH}

src/index.js

@@ -18,8 +18,8 @@ addLocaleData([...en,...zh]);
 
 
 const client = new ApolloClient({
-  uri: "http://service-eucrnpse-1254337200.ap-guangzhou.apigateway.myqcloud.com/release/graphql"
-  // uri: "http://localhost:3000/graphql"
+  // uri: "http://service-eucrnpse-1254337200.ap-guangzhou.apigateway.myqcloud.com/release/graphql"
+  uri: "http://localhost:3000/graphql"
 });
 
 let browserLanguage = (navigator.language || navigator.browserLanguage).toLowerCase().split('-')[0];