deploy 正常显示，缺少create和update

src/components/app/App.jsx

@@ -204,7 +204,9 @@ class App extends Component {
                             </SubMenu>
                         </Menu>
                     </Sider>
-
+                    {
+                        // todo: 路由如何传值是个问题，包括schema_id, user_id
+                    }
                     <LocaleProvider locale={locale}>
                         <Layout style={{marginTop: '64px', zIndex: '0'}} key={locale ? locale.locale : 'en'/* Have to refresh for production environment */} >
                             <Switch>

src/components/common/deploy/Deploy.jsx

@@ -7,7 +7,8 @@ import AmazonConfig from './amazon/AmazonConfig';
 import HuaweiConfig from './huawei/HuaweiConfig';
 
 import './index.css';
-import {SHOW_FC} from "../../gql";
+import {SHOW_FC, SEARCH_SCHEMA} from "../../gql";
+import {request} from 'graphql-request'
 
 const tabListNoTitle = [{
     key: 'tencent',
@@ -20,26 +21,73 @@ const tabListNoTitle = [{
     tab: 'AWS',
 }];
 
-const contentListNoTitle = {
-    tencent: <TencentConfig schemaID={this.state.schemaID}/>,
-    aliyun: <AliConfig schemaID={this.state.schemaID}/>,
-    amazon: <AmazonConfig schemaID={this.state.schemaID}/>,
-};
-
 
 class Deploy extends Component {
     constructor(props) {
         super(props);
         this.state = {
+            show: false,
             cloud: 'tencent',
-            // 该schema应该由props传入，无论是哪一层，反正不是这一层。
-            // 路由传入吧，还没搞
-            schemaID: ''
+            tencentCloudID: '',
+            aliyunCloudID: '',
+            amazonCloudID: '',
+            // todo: 该schema应该由props传入，无论是哪一层，反正不是这一层。(路由传入吧)
+            // 有fc的schema -- 测试数据
+            // schemaID: 'schema_1542243424669_92094965',
+            // 无fc的schema -- 测试数据
+            schemaID: 'schema_1542967129456_05958413',
+            schemaName: ''
         };
+        request('http://123.206.193.98:3000/graphql', SHOW_FC, {schema_id: this.state.schemaID}).then(
+            data => {
+                request('http://123.206.193.98:3000/graphql', SEARCH_SCHEMA, {id: this.state.schemaID}).then(
+                    _data => {
+                        console.log(_data);
+                        data.fc_by_props.length === 0 ?
+                            this.setState({
+                                show: true,
+                                schemaName: _data.schema_by_id.schemaName
+                            })
+                            :
+                            data.fc_by_props.forEach(cloud => {
+                                switch (cloud.cloud_id.cloudName) {
+                                    case 'tencent':
+                                        this.setState({
+                                            tencentCloudID: cloud.cloud_id.id,
+                                            show: true
+                                        });
+                                        break;
+                                    case 'aliyun':
+                                        this.setState({
+                                            aliyunCloudID: cloud.cloud_id.id,
+                                            show: true
+                                        });
+                                        break;
+                                    case 'amazon':
+                                        this.setState({
+                                            amazonCloudID: cloud.cloud_id.id,
+                                            show: true
+                                        });
+                                        break;
+                                    default:
+                                        break;
+                                }
+                            })
+                    }
+                );
+            }
+        );
     }
 
     render() {
+        const contentListNoTitle = {
+            tencent: <TencentConfig cloudID={this.state.tencentCloudID} schemaName={this.state.schemaName}/>,
+            aliyun: <AliConfig cloudID={this.state.aliyunCloudID} schemaName={this.state.schemaName}/>,
+            amazon: <AmazonConfig cloudID={this.state.amazonCloudID} schemaName={this.state.schemaName}/>,
+        };
+
         let userID = this.props.userID;
+
         return (
             <div>
                 <div>
@@ -53,7 +101,12 @@ class Deploy extends Component {
                             })
                         }}
                     >
-                        {contentListNoTitle[this.state.cloud]}
+                        {
+                            this.state.show ?
+                            contentListNoTitle[this.state.cloud]
+                            :
+                            "waiting..."
+                        }
                     </Card>
                 </div>
             </div>

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

@@ -6,12 +6,49 @@ const Panel = Collapse.Panel;
 class APIGroupCard extends Component {
     constructor(props) {
         super(props);
-        this.state = {
-            region: props.region,
-            groupName: 'graphql-endpoint'
-        };
+        let {groupName, environmentName, defaultDomain, frontType, userDomain, userStatus} = props.group;
+        props.group !== '' ?
+            this.state = {
+                groupName,
+                environmentName,
+                defaultDomain,
+                frontType,
+                userDomain,
+                userStatus
+            }
+            :
+            this.state = {
+                groupName: 'graphql-endpoint',
+                environmentName: 'test',
+                defaultDomain: '',
+                frontType: 'http&https',
+                userDomain: '',
+                userStatus: 'open'
+            };
     }
 
+    componentWillReceiveProps(next) {
+        if(next.deploy !== '') {
+            let {groupName, environmentName, defaultDomain, frontType, userDomain, userStatus} = next.group;
+            this.setState( {
+                groupName,
+                environmentName,
+                defaultDomain,
+                frontType,
+                userDomain,
+                userStatus
+            })
+        } else {
+            this.setState ( {
+                groupName: 'graphql-endpoint',
+                environmentName: 'test',
+                defaultDomain: '',
+                frontType: 'http&https',
+                userDomain: '',
+                userStatus: 'open'
+            });
+        }
+    };
 
     switchConfig = (label) => {
         return (e) => {
@@ -21,12 +58,6 @@ class APIGroupCard extends Component {
         };
     };
 
-    componentWillReceiveProps(next) {
-        this.setState({
-            region: next.region
-        })
-    }
-
     render() {
         const customPanelStyle = {
             background: '#f7f7f7',
@@ -47,7 +78,7 @@ class APIGroupCard extends Component {
                     <Panel header="Want more options?" style={customPanelStyle}>
                         <div style={{marginBottom: 10}}>
                             <span className='vice-title'>frontType: </span>
-                            <Radio.Group onChange={this.switchConfig('frontType')} defaultValue="http&https"
+                            <Radio.Group onChange={this.switchConfig('frontType')} defaultValue={this.state.frontType}
                                          buttonStyle="solid">
                                 <Radio.Button value="http">http</Radio.Button>
                                 <Radio.Button value="https">https</Radio.Button>
@@ -56,11 +87,11 @@ class APIGroupCard extends Component {
                         </div>
                         <div style={{marginBottom: 10}}>
                             <span className='vice-title'>defaultDomain: </span>
-                            <Input value={this.state.defaultDomain} style={{width: 200}} disabled/>
+                            <Input value={this.state.defaultDomain} style={{width: 400}} disabled/>
                         </div>
                         <div style={{marginBottom: 10}}>
                             <span className='vice-title'>environmentName: </span>
-                            <Radio.Group onChange={this.switchConfig('environmentName')} defaultValue="test"
+                            <Radio.Group onChange={this.switchConfig('environmentName')} defaultValue={this.state.environmentName}
                                          buttonStyle="solid">
                                 <Radio.Button value="test">test</Radio.Button>
                                 <Radio.Button value="prepub">prepub</Radio.Button>
@@ -69,12 +100,12 @@ class APIGroupCard extends Component {
                         </div>
                         <div style={{marginBottom: 10}}>
                             <span className='vice-title'>userDomain: </span>
-                            <Input value={this.state.groupName} style={{width: 400}}
+                            <Input value={this.state.userDomain} style={{width: 400}}
                                    onChange={this.switchConfig('userDomain')}/>
                         </div>
                         <div style={{marginBottom: 10}}>
                             <span className='vice-title'>userStatus: </span>
-                            <Radio.Group onChange={this.switchConfig('userStatus')} defaultValue="open"
+                            <Radio.Group onChange={this.switchConfig('userStatus')} defaultValue={this.state.userStatus}
                                          buttonStyle="solid">
                                 <Radio.Button value="open">open</Radio.Button>
                                 <Radio.Button value="close">close</Radio.Button>

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

@@ -6,14 +6,41 @@ const Panel = Collapse.Panel;
 class APIPathCard extends Component {
     constructor(props) {
         super(props);
-        this.state = {
-            configs: ['apiGWName', 'apiGWDesc'],
-            apiGWName: 'default schema name',
-            apiGWDesc: '',
-            requestMethod: ''
-        };
+        let {apiGWName, apiGWDesc, requestMethod} = props.path;
+        props.path !== '' ?
+            this.state = {
+                configs: ['apiGWName', 'apiGWDesc'],
+                apiGWName,
+                apiGWDesc,
+                requestMethod: requestMethod
+            }
+            :
+            this.state = {
+                configs: ['apiGWName', 'apiGWDesc'],
+                apiGWName: props.schemaName,
+                apiGWDesc: '',
+                requestMethod: 'GET'
+            };
     }
 
+
+    componentWillReceiveProps(next) {
+        if(next.deploy !== '') {
+            let {apiGWName, apiGWDesc, requestMethod} = next.path;
+            this.setState( {
+                apiGWName,
+                apiGWDesc,
+                requestMethod
+            })
+        } else {
+            this.setState ( {
+                apiGWName: next.schemaName,
+                apiGWDesc: '',
+                requestMethod: 'GET'
+            });
+        }
+    };
+
     switchConfig = (label) => {
         return (e) => {
             this.setState({
@@ -47,10 +74,10 @@ class APIPathCard extends Component {
                         }
                         <div style={{marginBottom: 10}}>
                             <span className='vice-title'>requestMethod: </span>
-                            <Radio.Group onChange={this.switchConfig('requestMethod')} defaultValue="get"
+                            <Radio.Group onChange={this.switchConfig('requestMethod')} defaultValue={this.state.requestMethod}
                                          buttonStyle="solid">
-                                <Radio.Button value="get">get</Radio.Button>
-                                <Radio.Button value="post">post</Radio.Button>
+                                <Radio.Button value="GET">get</Radio.Button>
+                                <Radio.Button value="POST">post</Radio.Button>
                             </Radio.Group>
                         </div>
                     </Panel>

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

@@ -7,16 +7,58 @@ const Panel = Collapse.Panel;
 class DeployCard extends Component {
     constructor(props) {
         super(props);
-        this.state = {
-            configs: ['description', 'cosBucketName', 'cosObjectName', 'cosBucketRegion', 'serviceName', 'vpcId', 'subnetId'],
-            functionName: 'defalut schema name',
-            cosBucketName: 'graphqlfc',
-            cosObjectName: 'default schema name',
-            cosBucketRegion: 'beijing',
-            serviceName: ''
-        };
+        let {functionName, cosBucketName, cosObjectName, cosBucketRegion, serviceName, vpcId, subnetId} = props.deploy;
+        console.log(1111, props.deploy);
+
+        props.deploy !== '' ?
+            this.state = {
+                configs: ['description', 'cosBucketName', 'cosObjectName', 'cosBucketRegion', 'serviceName', 'vpcId', 'subnetId'],
+                functionName,
+                cosBucketName,
+                cosObjectName,
+                cosBucketRegion,
+                serviceName,
+                vpcId,
+                subnetId
+            }
+            :
+            this.state = {
+                configs: ['description', 'cosBucketName', 'cosObjectName', 'cosBucketRegion', 'serviceName', 'vpcId', 'subnetId'],
+                functionName: props.schemaName,
+                cosBucketName: 'graphqlfc',
+                cosObjectName: props.schemaName,
+                cosBucketRegion: props.region,
+                serviceName: '',
+                vpcId: '',
+                subnetId: ''
+            }
     }
 
+    componentWillReceiveProps(next) {
+        console.log(2222, next.deploy);
+        if(next.deploy !== '') {
+            let {functionName, cosBucketName, cosObjectName, cosBucketRegion, serviceName, vpcId, subnetId} = next.deploy;
+            this.setState( {
+                functionName,
+                cosBucketName,
+                cosObjectName,
+                cosBucketRegion,
+                serviceName,
+                vpcId,
+                subnetId
+            })
+        } else {
+            this.setState ( {
+                functionName: next.schemaName,
+                cosBucketName: 'graphqlfc',
+                cosObjectName: next.schemaName,
+                cosBucketRegion: next.region,
+                serviceName: '',
+                vpcId: '',
+                subnetId: ''
+            });
+        }
+    };
 
     switchConfig = (label) => {
         return (e) => {
@@ -26,13 +68,6 @@ class DeployCard extends Component {
         };
     };
 
-    switchCosRegin = (e) => {
-        this.setState({
-            // 缺省跟region相同
-            cosBucketRegion: e.target.value
-        });
-    };
-
     render() {
         const customPanelStyle = {
             background: '#f7f7f7',
@@ -46,10 +81,7 @@ class DeployCard extends Component {
             <div>
                 <div style={{marginBottom: 10}}>
                     <span className='vice-title'>region: </span>
-                    <Radio.Group onChange={(e) => {
-                        this.props.switchRegion();
-                        this.switchCosRegin(e)
-                    }} defaultValue="beijing" buttonStyle="solid">
+                    <Radio.Group onChange={this.props.switchRegion} defaultValue={this.props.region} buttonStyle="solid">
                         <Radio.Button value="guangzhou">Guangzhou</Radio.Button>
                         <Radio.Button value="shanghai">Shanghai</Radio.Button>
                         <Radio.Button value="beijing">Beijing</Radio.Button>

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

@@ -4,31 +4,68 @@ import APIGroupCard from './APIGroupCard';
 import APIPathCard from './APIPathCard';
 import DeployCard from './DeployCard';
 
+import {SHOW_DEPLOY, SHOW_APIGWGROUP, SHOW_APIGWPATH} from "../../../gql";
+import {request} from 'graphql-request'
 
 class TencentConfig extends Component {
     constructor(props) {
         super(props);
         this.state = {
             region: 'beijing',
-            schemaID: props.schemaID
+            deploys: [],
+            currentDeploy: '',
+            groups: [],
+            currentGroup: '',
+            paths: [],
+            currentPath: ''
         };
+
+        // todo: 没做每个 deploy 和 apigroup 和 apipath 的切换
+        // todo: 换成 apollo 会更好
+        if (props.cloudID !== '') {
+            request('http://123.206.193.98:3000/graphql', SHOW_DEPLOY, {cloud_id: props.cloudID}).then(
+                data => {
+                    this.setState({
+                        deploys: data.deploy_by_props,
+                        currentDeploy: data.deploy_by_props[0]
+                    })
+                }
+            );
+            request('http://123.206.193.98:3000/graphql', SHOW_APIGWGROUP, {cloud_id: props.cloudID}).then(
+                data => {
+                    this.setState({
+                        groups: data.apiGWGroup_by_props,
+                        currentGroup: data.apiGWGroup_by_props[0]
+                    }, () => {
+                        request('http://123.206.193.98:3000/graphql', SHOW_APIGWPATH, {apiGWGroup_id: this.state.currentGroup.id}).then(
+                            data => {
+                                this.setState({
+                                    paths: data.apiGWPath_by_props,
+                                    currentPath: data.apiGWPath_by_props[0]
+                                });
+                            }
+                        );
+                    });
+                }
+            );
+        }
     }
 
-    switchRegion = (region) => {
+    switchRegion = (e) => {
         this.setState({
-            region
-        })
+            region: e.target.value
+        });
     };
 
     render() {
         return (
             <div>
-                <div style={{padding: '30px' }}>
+                <div style={{padding: '30px'}}>
                     <Row gutter={16}>
                         <Col span={12}>
-                            <Card title="Deploy" style={{marginBottom: 10}}><DeployCard switchRegion={this.switchRegion} region={this.state.region}/></Card>
-                            <Card title="API Group" style={{marginBottom: 10}}><APIGroupCard switchRegion={this.switchRegion} region={this.state.region}/></Card>
-                            <Card title="API Path" ><APIPathCard /></Card>
+                            <Card title="Deploy" style={{marginBottom: 10}}><DeployCard deploy={this.state.currentDeploy} switchRegion={this.switchRegion} region={this.state.region} schemaName={this.props.schemaName}/></Card>
+                            <Card title="API Group" style={{marginBottom: 10}}><APIGroupCard group={this.state.currentGroup} switchRegion={this.switchRegion} region={this.state.region}/></Card>
+                            <Card title="API Path"><APIPathCard path={this.state.currentPath} schemaName={this.props.schemaName}/></Card>
                         </Col>
                         <Col offset={2} span={8}>
                             <Button type='primary'>deploy it</Button>

src/components/gql.js

@@ -6,7 +6,10 @@
 const SHOW_FC = `
             query FC($schema_id: ID!) {
                 fc_by_props(schema_id: $schema_id) {
-                    cloud_id
+                    cloud_id {
+                        id
+                        cloudName
+                    }
                 }
             }
         `;
@@ -67,6 +70,14 @@ const SHOW_SCHEMA = `
             }
         `;
 
+const SEARCH_SCHEMA = `
+            query SCHEMA($id: ID!) {
+                schema_by_id(id: $id) {
+                    schemaName
+                }
+            }
+        `;
+
 const ADD_SCHEMA = `
             mutation SCHEMA($id: ID!, $user_id: ID!, $schemaName: String!, $schemaData: String!, $createdAt: String, $updatedAt: String, $schemaState: String, $reference: String) {
                 create_schema(
@@ -204,6 +215,7 @@ const SHOW_APIGWPATH = `
 
 
 export {
+    SEARCH_SCHEMA,
     ADD_SCHEMA,
     SHOW_SCHEMA,
     UPDATE_SCHEMA,

src/components/login/login.js

@@ -7,6 +7,7 @@ import {Mutation} from "react-apollo";
 import axios from 'axios';
 import {request} from 'graphql-request'
 import gql from "graphql-tag";
+// todo: _.debounce 的引入
 import _ from 'lodash';
 
 axios.defaults.withCredentials = true;
@@ -42,6 +43,7 @@ class Login extends Component {
 
     login = () => {
         let _this = this;
+        // todo: should be post
         axios.get(`${this.state.login_url}?user-name=${this.state.login_username}&password=${this.state.login_password}`)
             .then((res) => {
                 _this.setState({

src/components/trialCase/TrialCase.jsx

@@ -8,9 +8,8 @@ import Schema from '../common/schema/Schema';
 import Graphql from "../common/graphql/Graphql";
 import CaseNotification from "../common/caseNotification/CaseNotification";
 import CaseMetabase from "../common/caseMetabase/CaseMetabase";
-import {GET_USER} from "../gql";
 import axios from 'axios';
-import {request} from 'graphql-request'
+
 
 axios.defaults.withCredentials = true;