deploy, api-group and path, graphql is ok

src/components/common/config/Config.js

@@ -105,7 +105,7 @@ class Config extends Component {
                 };
                 request('http://123.206.193.98:3000/graphql', UPDATE_CLOUD, varObj).then(
                     data => {
-                        if(data.update_cloud.length !== null) {
+                        if(data.update_cloud !== null) {
                             this.setState({
                                 showOK: cloudName
                             });

src/components/common/deploy/Deploy.jsx

@@ -7,7 +7,7 @@ import AmazonConfig from './amazon/AmazonConfig';
 import HuaweiConfig from './huawei/HuaweiConfig';
 
 import './index.css';
-import {SHOW_FC, SEARCH_SCHEMA} from "../../gql";
+import {SHOW_FC, SEARCH_SCHEMA, SHOW_CLOUD} from "../../gql";
 import {request} from 'graphql-request'
 
 const tabListNoTitle = [{
@@ -36,34 +36,71 @@ class Deploy extends Component {
             // schemaID: 'schema_1542243424669_92094965',
             // 无fc的schema -- 测试数据
             schemaID: 'schema_1542967129456_05958413',
-            schemaName: ''
+            schemaName: '',
+            tencentFC: '',
+            aliyunFC: '',
+            amazonFC: ''
         };
+
         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 => {
-                        data.fc_by_props.length === 0 ?
-                            this.setState({
-                                show: true,
-                                schemaName: _data.schema_by_id.schemaName
-                            })
-                            :
+                        if(data.fc_by_props.length === 0) {
+                            request('http://123.206.193.98:3000/graphql', SHOW_CLOUD, {user_id: this.props.userID}).then(
+                                __data => {
+                                    __data.cloud_by_props.forEach(cloud => {
+                                        switch (cloud.cloudName) {
+                                            case 'tencent':
+                                                this.setState({
+                                                    tencentFC: false,
+                                                    tencentCloudID: cloud.id,
+                                                    schemaName: _data.schema_by_id.schemaName,
+                                                    show: true
+                                                });
+                                                break;
+                                            case 'aliyun':
+                                                this.setState({
+                                                    aliyunFC: false,
+                                                    aliyunCloudID: cloud.id,
+                                                    schemaName: _data.schema_by_id.schemaName,
+                                                    show: true
+                                                });
+                                                break;
+                                            case 'amazon':
+                                                this.setState({
+                                                    amazonFC: false,
+                                                    amazonCloudID: cloud.id,
+                                                    schemaName: _data.schema_by_id.schemaName,
+                                                    show: true
+                                                });
+                                                break;
+                                            default:
+                                                break;
+                                        }
+                                    })
+                                }
+                            );
+                        } else {
                             data.fc_by_props.forEach(cloud => {
                                 switch (cloud.cloud_id.cloudName) {
                                     case 'tencent':
                                         this.setState({
+                                            tencentFC: true,
                                             tencentCloudID: cloud.cloud_id.id,
                                             show: true
                                         });
                                         break;
                                     case 'aliyun':
                                         this.setState({
+                                            aliyunFC: true,
                                             aliyunCloudID: cloud.cloud_id.id,
                                             show: true
                                         });
                                         break;
                                     case 'amazon':
                                         this.setState({
+                                            amazonFC: true,
                                             amazonCloudID: cloud.cloud_id.id,
                                             show: true
                                         });
@@ -72,30 +109,20 @@ class Deploy extends Component {
                                         break;
                                 }
                             })
+                        }
                     }
                 );
             }
         );
     }
 
-    switchConfig = (label) => {
-        return (e) => {
-            this.setState({
-                [label]: e.target.value
-            })
-        };
-    };
-
     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}/>,
+            tencent: <TencentConfig cloudID={this.state.tencentCloudID} fc={this.tencentFC} schemaName={this.state.schemaName} userID={this.props.userID}/>,
+            aliyun: <AliConfig cloudID={this.state.aliyunCloudID} fc={this.aliyunFC} schemaName={this.state.schemaName} userID={this.props.userID}/>,
+            amazon: <AmazonConfig cloudID={this.state.amazonCloudID} fc={this.amazonFC} schemaName={this.state.schemaName} userID={this.props.userID}/>,
         };
 
-        let userID = this.props.userID;
-
-
         return (
             <div>
                 <div>

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

@@ -1,14 +1,21 @@
 import React, {Component} from 'react';
-import {Input, Collapse, Button, Radio} from 'antd';
+import {Input, Collapse, Button, Radio, Icon} from 'antd';
+import {ADD_APIGROUP, UPDATE_APIGROUP} from "../../../gql";
+import {request} from 'graphql-request'
 
 const Panel = Collapse.Panel;
 
+const idGen = (kind) => {
+    return kind + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
+};
+
 class APIGroupCard extends Component {
     constructor(props) {
         super(props);
         let {groupName, environmentName, defaultDomain, frontType, userDomain, userStatus, region} = props.group;
         props.group !== '' ?
             this.state = {
+                showOK: false,
                 groupName,
                 environmentName,
                 defaultDomain,
@@ -19,6 +26,7 @@ class APIGroupCard extends Component {
             }
             :
             this.state = {
+                showOK: false,
                 groupName: 'graphql-endpoint',
                 environmentName: 'test',
                 defaultDomain: '',
@@ -62,6 +70,68 @@ class APIGroupCard extends Component {
         };
     };
 
+    ok = () => {
+        let {userStatus, userDomain, groupName, frontType, environmentName} = this.state;
+        let varObj = {
+            id: idGen('group'),
+            cloud_id: this.props.cloudID,
+            user_id: this.props.userID,
+            userStatus,
+            userDomain,
+            groupName,
+            frontType,
+            region: this.state.groupRegion,
+            environmentName,
+            defaultDomain: '',
+            status: '',
+            serviceId: '',
+            createdAt: new Date().getTime(),
+            updatedAt: ''
+        };
+        if (this.props.group === '') {
+            request('http://123.206.193.98:3000/graphql', ADD_APIGROUP, varObj).then(
+                data => {
+                    if (data.create_apiGWGroup !== null) {
+                        this.setState({
+                            showOK: true
+                        })
+                    }
+                    setTimeout(()=>{
+                        this.setState({
+                            showOK: false
+                        })
+                    }, 1500)
+                }
+            )
+        } else {
+            let {userStatus, userDomain, groupName, frontType, environmentName} = this.state;
+            let varObj = {
+                id: this.props.group.id,
+                userStatus,
+                userDomain,
+                groupName,
+                frontType,
+                region: this.state.groupRegion,
+                environmentName,
+                updatedAt: new Date().getTime()
+            };
+            request('http://123.206.193.98:3000/graphql', UPDATE_APIGROUP, varObj).then(
+                data => {
+                    if (data.update_apiGWGroup !== null) {
+                        this.setState({
+                            showOK: true
+                        })
+                    }
+                    setTimeout(()=>{
+                        this.setState({
+                            showOK: false
+                        })
+                    }, 1500)
+                }
+            )
+        }
+    };
+
     render() {
         const customPanelStyle = {
             background: '#f7f7f7',
@@ -126,7 +196,13 @@ class APIGroupCard extends Component {
                         </div>
                     </Panel>
                 </Collapse>
-                <Button type='primary'>ok</Button>
+                <Button onClick={this.ok} type='primary'>ok</Button>
+                {
+                    this.state.showOK === true?
+                        <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
+                        :
+                        ''
+                }
             </div>
         )
     }

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

@@ -1,8 +1,14 @@
 import React, {Component} from 'react';
-import {Input, Radio, Collapse, Button} from 'antd';
+import {Input, Radio, Collapse, Button, Icon} from 'antd';
+import {request} from 'graphql-request'
+import {ADD_APIGWPATH, UPDATE_APIGWPATH} from "../../../gql";
 
 const Panel = Collapse.Panel;
 
+const idGen = (kind) => {
+    return kind + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
+};
+
 class APIPathCard extends Component {
     constructor(props) {
         super(props);
@@ -10,6 +16,7 @@ class APIPathCard extends Component {
         props.path !== '' ?
             this.state = {
                 configs: ['apiGWName', 'apiGWDesc'],
+                showOK: false,
                 apiGWName,
                 apiGWDesc,
                 requestMethod: requestMethod
@@ -17,6 +24,7 @@ class APIPathCard extends Component {
             :
             this.state = {
                 configs: ['apiGWName', 'apiGWDesc'],
+                showOK: false,
                 apiGWName: props.schemaName,
                 apiGWDesc: '',
                 requestMethod: 'GET'
@@ -25,15 +33,15 @@ class APIPathCard extends Component {
 
 
     componentWillReceiveProps(next) {
-        if(next.path !== '') {
+        if (next.path !== '') {
             let {apiGWName, apiGWDesc, requestMethod} = next.path;
-            this.setState( {
+            this.setState({
                 apiGWName,
                 apiGWDesc,
                 requestMethod
             })
         } else {
-            this.setState ( {
+            this.setState({
                 apiGWName: next.schemaName,
                 apiGWDesc: '',
                 requestMethod: 'GET'
@@ -49,6 +57,63 @@ class APIPathCard extends Component {
         };
     };
 
+    ok = () => {
+        let {apiGWName, apiGWDesc, requestMethod} = this.state;
+        let varObj = {
+            id: idGen('path'),
+            user_id: this.props.userID,
+            apiGWGroup_id: this.props.groupID,
+            deploy_id: this.props.deployID,
+            apiGWName,
+            apiGWDesc,
+            requestMethod,
+            serviceType: 'SCF',
+            apiGWPath: '/graphql',
+            timeout: 300,
+            apiId: '',
+            createdAt: new Date().getTime(),
+            updatedAt: ''
+        };
+        if (this.props.path === '') {
+            request('http://123.206.193.98:3000/graphql', ADD_APIGWPATH, varObj).then(
+                data => {
+                    if (data.create_apiGWPath !== null) {
+                        this.setState({
+                            showOK: true
+                        })
+                    }
+                    setTimeout(()=>{
+                        this.setState({
+                            showOK: false
+                        })
+                    }, 1500)
+                }
+            )
+        } else {
+            let {apiGWName, apiGWDesc, requestMethod} = this.state;
+            let varObj = {
+                id: this.props.path.id,
+                apiGWName,
+                apiGWDesc,
+                requestMethod,
+                updatedAt: new Date().getTime()
+            };
+            request('http://123.206.193.98:3000/graphql', UPDATE_APIGWPATH, varObj).then(
+                data => {
+                    if (data.update_apiGWPath !== null) {
+                        this.setState({
+                            showOK: true
+                        })
+                    }
+                    setTimeout(()=>{
+                        this.setState({
+                            showOK: false
+                        })
+                    }, 1500)
+                }
+            )
+        }
+    };
 
     render() {
         const customPanelStyle = {
@@ -74,7 +139,8 @@ class APIPathCard extends Component {
                         }
                         <div style={{marginBottom: 10}}>
                             <span className='vice-title'>requestMethod: </span>
-                            <Radio.Group onChange={this.switchConfig('requestMethod')} defaultValue={this.state.requestMethod}
+                            <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>
@@ -82,7 +148,13 @@ class APIPathCard extends Component {
                         </div>
                     </Panel>
                 </Collapse>
-                <Button type='primary'>ok</Button>
+                <Button onClick={this.ok} type='primary'>ok</Button>
+                {
+                    this.state.showOK === true?
+                        <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
+                        :
+                        ''
+                }
             </div>
         )
     }

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

@@ -1,17 +1,23 @@
 import React, {Component} from 'react';
-
-import {Input, Radio, Collapse, Button} from 'antd';
+import {Input, Radio, Collapse, Button, Icon} from 'antd';
+import {ADD_DEPLOY, UPDATE_DEPLOY} from "../../../gql";
+import {request} from 'graphql-request'
 
 const Panel = Collapse.Panel;
 
+const idGen = (kind) => {
+    return kind + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
+};
+
 class DeployCard extends Component {
     constructor(props) {
         super(props);
         let {functionName, cosBucketName, cosObjectName, cosBucketRegion, serviceName, vpcId, subnetId, region} = props.deploy;
-
         props.deploy !== '' ?
             this.state = {
                 configs: ['description', 'cosBucketName', 'cosObjectName', 'vpcId', 'subnetId'],
+                description: '',
+                showOK: false,
                 functionName,
                 region,
                 cosBucketName,
@@ -24,6 +30,8 @@ class DeployCard extends Component {
             :
             this.state = {
                 configs: ['description', 'cosBucketName', 'cosObjectName', 'vpcId', 'subnetId'],
+                description: '',
+                showOK: false,
                 functionName: props.schemaName,
                 region: props.region,
                 cosBucketName: 'graphqlfc',
@@ -31,7 +39,7 @@ class DeployCard extends Component {
                 cosBucketRegion: props.region,
                 serviceName: '',
                 vpcId: '',
-                subnetId: ''
+                subnetId: '',
             }
     }
 
@@ -70,6 +78,74 @@ class DeployCard extends Component {
         };
     };
 
+    ok = () => {
+        let {description, cosBucketName, subnetId, cosObjectName, region, vpcId, cosBucketRegion, functionName} = this.state;
+        let varObj = {
+            id: idGen('deploy'),
+            cloud_id: this.props.cloudID,
+            user_id: this.props.userID,
+            description,
+            cosBucketName,
+            subnetId,
+            cosObjectName,
+            region,
+            vpcId,
+            cosBucketRegion,
+            functionName,
+            memorySize: 512,
+            timeout: 300,
+            handler: 'tencent_graphql.Bridge::handler',
+            serviceName: "",
+            fc_id: '',
+            createdAt: new Date().getTime(),
+            updatedAt: ''
+        };
+        if (this.props.deploy === '') {
+            request('http://123.206.193.98:3000/graphql', ADD_DEPLOY, varObj).then(
+                data => {
+                    if (data.create_deploy !== null) {
+                        this.setState({
+                            showOK: true
+                        })
+                    }
+                    setTimeout(()=>{
+                        this.setState({
+                            showOK: false
+                        })
+                    }, 1500)
+                }
+            )
+        } else {
+            let {description, cosBucketName, subnetId, cosObjectName, region, vpcId, cosBucketRegion, functionName} = this.state;
+            let varObj = {
+                id: this.props.deploy.id,
+                description,
+                subnetId,
+                cosBucketName,
+                cosObjectName,
+                region,
+                vpcId,
+                cosBucketRegion,
+                functionName,
+                updatedAt: new Date().getTime()
+            };
+            request('http://123.206.193.98:3000/graphql', UPDATE_DEPLOY, varObj).then(
+                data => {
+                    if (data.update_deploy !== null) {
+                        this.setState({
+                            showOK: true
+                        })
+                    }
+                    setTimeout(()=>{
+                        this.setState({
+                            showOK: false
+                        })
+                    }, 1500)
+                }
+            )
+        }
+    };
+
     render() {
         const customPanelStyle = {
             background: '#f7f7f7',
@@ -128,7 +204,13 @@ class DeployCard extends Component {
                         }
                     </Panel>
                 </Collapse>
-                <Button type='primary'>ok</Button>
+                <Button onClick={this.ok} type='primary'>ok</Button>
+                {
+                    this.state.showOK === true?
+                        <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
+                        :
+                        ''
+                }
             </div>
         )
     }

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

@@ -22,7 +22,7 @@ class TencentConfig extends Component {
 
         // todo: 没做每个 deploy 和 apigroup 和 apipath 的切换
         // todo: 换成 apollo 会更好
-        if (props.cloudID !== '') {
+        if (props.fc === true) {
             request('http://123.206.193.98:3000/graphql', SHOW_DEPLOY, {cloud_id: props.cloudID}).then(
                 data => {
                     this.setState({
@@ -63,9 +63,9 @@ class TencentConfig extends Component {
                 <div style={{padding: '30px'}}>
                     <Row gutter={16}>
                         <Col span={14}>
-                            <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>
+                            <Card title="Deploy" style={{marginBottom: 10}}><DeployCard deploy={this.state.currentDeploy} switchRegion={this.switchRegion} region={this.state.region} schemaName={this.props.schemaName} userID={this.props.userID} cloudID={this.props.cloudID}/></Card>
+                            <Card title="API Group" style={{marginBottom: 10}}><APIGroupCard group={this.state.currentGroup} switchRegion={this.switchRegion} region={this.state.region} userID={this.props.userID} cloudID={this.props.cloudID}/></Card>
+                            <Card title="API Path"><APIPathCard path={this.state.currentPath} schemaName={this.props.schemaName} userID={this.props.userID} deployID={this.state.currentDeploy.id} groupID={this.state.currentGroup.id}/></Card>
                         </Col>
                         <Col offset={2} span={6}>
                             <Button type='primary'>deploy it</Button>

src/components/gql.js

@@ -208,7 +208,7 @@ const ADD_DEPLOY = `
 
 
 const UPDATE_DEPLOY = `
-            mutation DEPLOY($id: ID!, $serviceName:String, $description: String, $updatedAt: String, $cosBucketName: String, $memorySize: Int, $fc_id: ID, $createdAt: String, $subnetId: String, $cosObjectName: String, $region: String, $vpcId: String, $cosBucketRegion: String, $cloud_id: ID, $user_id: ID, $timeout: Int, $handler: String, $functionName: String) {
+            mutation DEPLOY($id: ID!, $description: String, $updatedAt: String, $cosBucketName: String, $subnetId: String, $cosObjectName: String, $region: String, $vpcId: String, $cosBucketRegion: String, $functionName: String) {
                 update_deploy(
                     id: $id 
                     description: $description 
@@ -241,11 +241,43 @@ const SHOW_APIGWGROUP = `
         `;
 
 const ADD_APIGROUP = `
-
+            mutation GROUP($serviceId: String, $environmentName: String, $userStatus: String, $defaultDomain: String, $updatedAt: String, $userDomain: String, $groupName: String, $createdAt: String, $frontType: String, $region: String, $status: String, $id: ID!, $cloud_id: ID, $user_id: ID) {
+                create_apiGWGroup(
+                    id: $id
+                    userStatus: $userStatus 
+                    defaultDomain: $defaultDomain 
+                    updatedAt: $updatedAt 
+                    userDomain: $userDomain 
+                    groupName: $groupName 
+                    createdAt: $createdAt 
+                    frontType: $frontType 
+                    region: $region 
+                    status: $status 
+                    cloud_id: $cloud_id 
+                    user_id: $user_id
+                    environmentName: $environmentName
+                    serviceId: $serviceId
+                ) {
+                    id
+                }
+            }
         `;
 
 const UPDATE_APIGROUP = `
-
+            mutation GROUP($id:ID!, $environmentName: String, $userStatus: String, $updatedAt: String, $userDomain: String, $groupName: String, $frontType: String, $region: String) {
+                update_apiGWGroup(
+                    id: $id 
+                    userStatus: $userStatus 
+                    userDomain: $userDomain 
+                    groupName: $groupName 
+                    frontType: $frontType 
+                    region: $region
+                    environmentName: $environmentName
+                    updatedAt: $updatedAt
+                ) {
+                    id
+                }
+            }
         `;
 
 const SHOW_APIGWPATH = `
@@ -260,11 +292,38 @@ const SHOW_APIGWPATH = `
         `;
 
 const ADD_APIGWPATH = `
-
+            mutation PATH($apiId: String, $apiGWName: String, $updatedAt: String, $apiGWGroup_id: ID, $createdAt: String, $deploy_id: ID, $serviceType: String, $id: ID!, $apiGWPath: String, $user_id: ID, $timeout: Int, $apiGWDesc: String, $requestMethod: String) {
+                create_apiGWPath(
+                    apiGWName: $apiGWName 
+                    updatedAt: $updatedAt 
+                    apiGWGroup_id: $apiGWGroup_id 
+                    createdAt: $createdAt 
+                    deploy_id: $deploy_id 
+                    serviceType: $serviceType 
+                    id: $id 
+                    apiGWPath: $apiGWPath 
+                    user_id: $user_id 
+                    timeout: $timeout 
+                    apiGWDesc: $apiGWDesc 
+                    requestMethod: $requestMethod
+                    apiId: $apiId
+                ) {
+                    id
+                }
+            }
         `;
 
 const UPDATE_APIGWPATH = `
-
+            mutation PATH($apiGWName: String, $updatedAt: String, $apiGWDesc: String, $requestMethod: String) {
+                update_apiGWPath(
+                    apiGWName: $apiGWName  
+                    apiGWDesc: $apiGWDesc 
+                    requestMethod: $requestMethod
+                    updatedAt: $updatedAt 
+                ) {
+                    id
+                }
+            }
         `;
 
 

src/components/login/login.js

@@ -179,7 +179,6 @@ class Login extends Component {
         axios.get(this.state.getID_url)
             .then((res) => {
                 if (res.data !== '') {
-                    console.log(res);
                     _this.setState({
                             userID: res.data,
                             hasLogin: true,