可以展示 cloud 和 deploy

src/components/common/deploy/Deploy.jsx

@@ -1,7 +1,8 @@
 import React, {Component} from 'react';
+import {Row, Col, Input, Spin, Button} from 'antd';
 
-import {Row, Col, Input} from 'antd';
-
+import {Mutation, Query} from "react-apollo";
+import {SHOW_CLOUD, SHOW_DEPLOY} from "../../gql";
 import './index.css';
 import TencentConfig from './tencent/TencentConfig';
 
@@ -9,70 +10,94 @@ const Search = Input.Search;
 
 
 class Deploy extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      currentConfig: '',
-      configs: [
-        {
-          name: 'I am config 1',
-          cloudServer: 'tencent',
-          database: 'mongodb',
-        },
-        {
-          name: "I'm config 2",
-          cloudServer: 'tencent',
-          database: 'mongodb',
-        }
-      ]
+    constructor(props) {
+        super(props);
+        this.state = {
+            deploy: ''
+        };
+    }
+
+
+    findDeploy = (id, data) => {
+        return () => {
+            this.setState({
+                deploy: data.deploy_by_props.find(deploy => deploy.id === id)
+            })
+        };
     };
-  }
 
-  switchConfig = (name) => {
-    return () => {
-      this.setState({
-        currentConfig: name
-      })
-    }
-  };
-
-
-  render() {
-    return (
-      <div>
-        <Row>
-          <Col span={6}>
-            <div className='warpper'>
-              <div className='current'>{this.state.currentConfig}</div>
-              {
-                <Search
-                  className='add-input'
-                  placeholder="input config_name"
-                  enterButton="Confirm"
-                  onSearch={value => {
-                    this.addConfig('new', value);
-                  }}
-                />
-              }
+    reDisplayChoose = () => {
+        this.setState({
+            deploy: ''
+        })
+    };
+
+
+    render() {
+        let userID = this.props.userID;
+        return (
+            <div>
+
+                {
+                    this.state.deploy === '' ?
+                        <Query query={SHOW_CLOUD} variables={{user_id: userID}}>
+
+                            {
+                                ({loading, error, data}) => {
+                                    if (loading) {
+                                        return <Spin style={{marginLeft: 3}}/>
+                                    }
+                                    if (error) {
+                                        return 'error!';
+                                    }
+                                    return (
+                                        data.cloud_by_props.map(cloud => (
+                                            <div key={cloud.id} style={{marginBottom: 30}}>
+                                                <b>{cloud.cloudName}: {cloud.id}.</b>
+                                                <div>
+                                                    <div>
+                                                        <b>ID: </b><Input style={{width: 250}} value={cloud.secretId}/>
+                                                        <b>Key: </b><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}}/>
+                                                            }
+                                                            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>
+                                                                ))
+                                                            )
+                                                        }
+                                                    }
+                                                </Query>
+
+                                            </div>
+                                        ))
+                                    );
+                                }
+                            }
+
+                        </Query>
+                        :
+                        <TencentConfig reDisplayChoose={this.reDisplayChoose} deploy={this.state.deploy}/>
+                }
             </div>
-            {
-              this.state.configs.map((config) => {
-                return <div key={config.name} onClick={this.switchConfig(config.name)} className='title'>
-                  <Row>
-                    <Col span={22}>Config: ({config.name})</Col>
-                  </Row>
-                </div>
-              })
-            }
-          </Col>
-          <Col span={17} offset={1}>
-            <TencentConfig addConfig={this.addConfig} deleteConfig={this.deleteConfig} currentConfig={this.state.currentConfig}
-                  config={this.state.configs[0]}/>
-          </Col>
-        </Row>
-      </div>
-    )
-  }
+
+        )
+    }
 
 }
 

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

@@ -8,10 +8,15 @@ class TencentConfig extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            configs: ['region', 'bucket-name', 'cos-name', 'fn-name', 'vpc-id', 'subnet-id', 'handler', 'description', 'memory-size', 'timeout'],
-            name: props.config.name,
-            cloudServer: props.config.cloudServer,
-            database: props.config.database,
+            configs: ['functionName', 'region', 'description', 'cosBucketName', 'cosObjectName', 'cosBucketRegion', 'vpcId', 'subnetId'],
+            functionName: props.deploy.functionName,
+            region: props.deploy.region,
+            description: props.deploy.description,
+            cosBucketName: props.deploy.cosBucketName,
+            cosObjectName: props.deploy.cosObjectName,
+            cosBucketRegion: props.deploy.cosBucketRegion,
+            vpcId: props.deploy.vpcId,
+            subnetId: props.deploy.subnetId
         };
     }
 
@@ -37,56 +42,28 @@ class TencentConfig extends Component {
 
     componentWillReceiveProps(next) {
         this.setState({
-            name: next.config.name,
-            cloudServer: next.config.cloudServer,
-            database: next.config.database
+            functionName: next.deploy.functionName,
+            region: next.deploy.region,
+            description: next.deploy.description,
+            cosBucketName: next.deploy.cosBucketName,
+            cosObjectName: next.deploy.cosObjectName,
+            cosBucketRegion: next.deploy.cosBucketRegion,
+            vpcId: next.deploy.vpcId,
+            subnetId: next.deploy.subnetId
         });
     };
 
     render() {
         return (
             <div style={{margin: 20}}>
-                <div style={{marginTop: 10}}>
-                    {
-                        this.state.name ? '' :
-                            <div style={{marginBottom: 30}}>
-                                <p><b>how about choose or create a new one</b></p>
-                            </div>
-                    }
-                </div>
-
-
-                <div style={{marginBottom: 20}}>
-                    <span className='table-title'> Name</span>
-                    <Input value={this.state.name} style={{width: 200}}
-                           onChange={this.switchConfig('name')}/>
-                </div>
-
-                <div style={{marginBottom: 30}}>
-                    <span className='table-title'> Database Config</span>
-                    <Select defaultValue="mongodb" value={this.state.database} style={{width: 120}}
-                            onChange={this.switchDataBase}>
-                        <Option value="mongodb">MongoDB</Option>
-                        <Option disabled value="mySQL">nedb</Option>
-                        <Option disabled value="postgres">postgres</Option>
-                    </Select>
-                </div>
 
 
+                <div onClick={this.props.reDisplayChoose} style={{marginBottom: 30}}> back to choose</div>
                 <div>
                     <span className='table-title'> Cloud Config</span>
 
-                    <div style={{marginBottom: 20}}>
-                        <p><b>Cloud Server providers</b></p>
-                        <Select defaultValue="tencent" value={this.state.cloudServer} style={{width: 120}}
-                                onChange={this.switchCS}>
-                            <Option value="tencent">Tencent</Option>
-                            <Option disabled value="aliyun">Aliyun</Option>
-                            <Option disabled value="huawei">Huawei</Option>
-                        </Select>
-                    </div>
-
-                    <p><b>Other configs</b></p>
+
+                    {/*<p><b>Other configs</b></p>*/}
                     {
                         this.state.configs.map(config => (
                             <div key={config} style={{marginBottom: 10}}>
@@ -100,12 +77,6 @@ class TencentConfig extends Component {
                 </div>
 
 
-                <Button type="primary" onClick={() => {
-                    this.props.addConfig(this.state.config, this.state.config.name);
-                }}>SUBMIT</Button>
-                <Button style={{marginLeft: 10}} type="danger" onClick={() => {
-                    this.props.deleteConfig(this.state.config.name);
-                }}>DELETE</Button>
             </div>
         )
     }

src/components/common/graphql/Graphql.jsx

@@ -9,9 +9,10 @@ class Graphql extends Component {
   constructor() {
     super();
     this.state = {
-      //api: 'http://service-ci2tk8iu-1254337200.ap-guangzhou.apigateway.myqcloud.com/release/graphql',
+      // api: 'http://service-ci2tk8iu-1254337200.ap-guangzhou.apigateway.myqcloud.com/release/graphql',
       // 便于开发调试，请删除并换成上面
       api: 'http://localhost:3000/graphql'
+      // api: 'http://service-28dm054z-1254337200.ap-shanghai.apigateway.myqcloud.com/release/graphql'
     }
   };
 

src/components/common/schema/Schema.jsx

@@ -4,7 +4,7 @@ import {Row, Col, Input, Icon, Button, Spin} from 'antd';
 import './index.css';
 import SchemaChange from './change/SchemaChange';
 import {Mutation, Query} from "react-apollo";
-import {SHOW_SCHEMA, ADD_SCHEMA, DELETE_SCHEMA, SHOW_TABLE} from './gql'
+import {SHOW_SCHEMA, ADD_SCHEMA, DELETE_SCHEMA, SHOW_TABLE} from '../../gql'
 
 const Search = Input.Search;
 
@@ -42,16 +42,17 @@ class Schema extends Component {
     };
 
     render() {
+        let userID = this.props.userID;
         return (
             <div>
                 <Row>
                     <Col span={6}>
                         <div className='wrapper'>
                             <div className='current'>{this.state.currentSchema}</div>
-                            <AddSchemaInput userID={this.state.userID}/>
+                            <AddSchemaInput userID={userID}/>
                         </div>
                         <ShowSchemaList
-                            userID={this.state.userID}
+                            userID={userID}
                             switchTable={this.switchTable}
                             switchSchema={this.switchSchema}
                         />
@@ -65,7 +66,7 @@ class Schema extends Component {
                                     currentTableIndex={-2}
                                     columns={[]}
                                     remark=''
-                                    userID={this.state.userID}
+                                    userID={userID}
                                     schemaID={this.state.schemaID}
                                 /> :
                                 <Query query={SHOW_TABLE}
@@ -86,7 +87,7 @@ class Schema extends Component {
                                                     columns={this.findColumns(data)}
                                                     remark={this.findRemark(data)}
                                                     schemaID={this.state.schemaID}
-                                                    userID={this.state.userID}
+                                                    userID={userID}
                                                 />
                                             )
                                         }

src/components/common/schema/change/SchemaChange.jsx

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 
 import {Select, Input, Icon, Button, notification, Spin} from 'antd';
-import {UPDATE_SCHEMA, SHOW_SCHEMA, SHOW_TABLE} from "../gql";
+import {UPDATE_SCHEMA, SHOW_SCHEMA, SHOW_TABLE} from "../../../gql";
 
 import {Mutation, Query} from "react-apollo";
 

src/components/common/schema/gql.js → src/components/gql.js

@@ -1,4 +1,5 @@
 import gql from "graphql-tag";
+
 const SHOW_SCHEMA = gql`
             query SCHEMA($user_id: ID) {
                 schema_by_props(user_id: $user_id) {
@@ -58,4 +59,36 @@ const SHOW_TABLE = gql`
             }
         `;
 
-export {SHOW_SCHEMA, ADD_SCHEMA, DELETE_SCHEMA, UPDATE_SCHEMA, SHOW_TABLE}
+const SHOW_CLOUD = gql`
+            query CLOUD($user_id: ID!) {
+                cloud_by_props(user_id: $user_id) {
+                    id
+                    cloudName
+                    secretId
+                    secretKey
+                }
+            }
+        `;
+
+
+const SHOW_DEPLOY = gql`
+            query DEPLOY($cloud_id: ID!) {
+                deploy_by_props(cloud_id: $cloud_id) {
+                    id
+                    functionName
+                    region
+                    description
+                    cosBucketName
+                    cosObjectName
+                    cosBucketRegion
+                    handler
+                    memorySize
+                    timeout
+                    vpcId
+                    subnetId
+                }
+            }
+        `;
+
+
+export {SHOW_SCHEMA, ADD_SCHEMA, DELETE_SCHEMA, UPDATE_SCHEMA, SHOW_TABLE, SHOW_CLOUD, SHOW_DEPLOY}

src/components/trialCase/TrialCase.jsx

@@ -14,6 +14,7 @@ class TrialCase extends Component {
     constructor() {
         super();
         this.state = {
+            userID: 'xy_1',
             menuLevel2: "schema",
         }
     }
@@ -50,7 +51,7 @@ class TrialCase extends Component {
                                 case 'schema':
                                     return <Schema userID={this.state.userID}/>;
                                 case 'deploy':
-                                    return <Deploy />;
+                                    return <Deploy userID={this.state.userID}/>;
                                 case 'graphql':
                                     return <GenerateJs />;
                                 case 'graphiql':