deploy ui 完成

src/components/app/App.jsx

@@ -37,12 +37,12 @@ class App extends Component {
     }
 
     onCollapse = (collapsed) => {
-        console.log(collapsed);
+        // console.log(collapsed);
         this.setState({collapsed});
     };
 
     switchMenu = (menuName, e) => {
-        console.log('menuName', menuName, 'e', e);
+        // console.log('menuName', menuName, 'e', e);
         this.setState({
             [menuName]: e.key,
         });

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

@@ -1,20 +1,88 @@
-
 import React, {Component} from 'react';
+import {Input, Collapse, Button, Radio} from 'antd';
 
+const Panel = Collapse.Panel;
 
 class APIGroupCard extends Component {
     constructor(props) {
         super(props);
         this.state = {
+            region: props.region,
+            groupName: 'graphql-endpoint'
         };
     }
 
 
+    switchConfig = (label) => {
+        return (e) => {
+            this.setState({
+                [label]: e.target.value
+            })
+        };
+    };
+
+    componentWillReceiveProps(next) {
+        this.setState({
+            region: next.region
+        })
+    }
 
     render() {
+        const customPanelStyle = {
+            background: '#f7f7f7',
+            borderRadius: 4,
+            marginBottom: 24,
+            border: 0,
+            overflow: 'hidden',
+        };
+
         return (
             <div>
-                APIGroupCard
+                <div style={{marginBottom: 10}}>
+                    <span className='vice-title'>groupName: </span>
+                    <Input value={this.state.groupName} style={{width: 400}}
+                           onChange={this.switchConfig('groupName')}/>
+                </div>
+                <Collapse bordered={false}>
+                    <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"
+                                         buttonStyle="solid">
+                                <Radio.Button value="http">http</Radio.Button>
+                                <Radio.Button value="https">https</Radio.Button>
+                                <Radio.Button value="http&https">http&https</Radio.Button>
+                            </Radio.Group>
+                        </div>
+                        <div style={{marginBottom: 10}}>
+                            <span className='vice-title'>defaultDomain: </span>
+                            <Input value={this.state.defaultDomain} style={{width: 200}} disabled/>
+                        </div>
+                        <div style={{marginBottom: 10}}>
+                            <span className='vice-title'>environmentName: </span>
+                            <Radio.Group onChange={this.switchConfig('environmentName')} defaultValue="test"
+                                         buttonStyle="solid">
+                                <Radio.Button value="test">test</Radio.Button>
+                                <Radio.Button value="prepub">prepub</Radio.Button>
+                                <Radio.Button value="release">release</Radio.Button>
+                            </Radio.Group>
+                        </div>
+                        <div style={{marginBottom: 10}}>
+                            <span className='vice-title'>userDomain: </span>
+                            <Input value={this.state.groupName} 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"
+                                         buttonStyle="solid">
+                                <Radio.Button value="open">open</Radio.Button>
+                                <Radio.Button value="close">close</Radio.Button>
+                            </Radio.Group>
+                        </div>
+                    </Panel>
+                </Collapse>
+                <Button type='primary'>ok</Button>
             </div>
         )
     }

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

@@ -1,20 +1,61 @@
-
 import React, {Component} from 'react';
+import {Input, Radio, Collapse, Button} from 'antd';
 
+const Panel = Collapse.Panel;
 
 class APIPathCard extends Component {
     constructor(props) {
         super(props);
         this.state = {
+            configs: ['apiGWName', 'apiGWDesc'],
+            apiGWName: 'default schema name',
+            apiGWDesc: '',
+            requestMethod: ''
         };
     }
 
+    switchConfig = (label) => {
+        return (e) => {
+            this.setState({
+                [label]: e.target.value
+            })
+        };
+    };
 
 
     render() {
+        const customPanelStyle = {
+            background: '#f7f7f7',
+            borderRadius: 4,
+            marginBottom: 24,
+            border: 0,
+            overflow: 'hidden',
+        };
+
         return (
             <div>
-                APIPathCard
+                <Collapse bordered={false}>
+                    <Panel header="Want more options?" style={customPanelStyle}>
+                        {
+                            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 style={{marginBottom: 10}}>
+                            <span className='vice-title'>requestMethod: </span>
+                            <Radio.Group onChange={this.switchConfig('requestMethod')} defaultValue="get"
+                                         buttonStyle="solid">
+                                <Radio.Button value="get">get</Radio.Button>
+                                <Radio.Button value="post">post</Radio.Button>
+                            </Radio.Group>
+                        </div>
+                    </Panel>
+                </Collapse>
+                <Button type='primary'>ok</Button>
             </div>
         )
     }

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

@@ -1,22 +0,0 @@
-import React, {Component} from 'react';
-
-
-class ConnectCard extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-        };
-    }
-
-
-
-    render() {
-        return (
-            <div>
-                ConnectCard
-            </div>
-        )
-    }
-}
-
-export default ConnectCard;

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

@@ -1,19 +1,80 @@
 import React, {Component} from 'react';
 
+import {Input, Radio, Collapse, Button} from 'antd';
+
+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: ''
         };
     }
 
 
+    switchConfig = (label) => {
+        return (e) => {
+            this.setState({
+                [label]: e.target.value
+            })
+        };
+    };
+
+    switchCosRegin = (e) => {
+        this.setState({
+            // 缺省跟region相同
+            cosBucketRegion: e.target.value
+        });
+    };
 
     render() {
+        const customPanelStyle = {
+            background: '#f7f7f7',
+            borderRadius: 4,
+            marginBottom: 24,
+            border: 0,
+            overflow: 'hidden',
+        };
+
         return (
             <div>
-                DeployCard
+                <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.Button value="guangzhou">Guangzhou</Radio.Button>
+                        <Radio.Button value="shanghai">Shanghai</Radio.Button>
+                        <Radio.Button value="beijing">Beijing</Radio.Button>
+                        <Radio.Button value="chengdu">Chengdu</Radio.Button>
+                    </Radio.Group>
+                </div>
+                <div style={{marginBottom: 10}}>
+                    <span className='vice-title'>functionName: </span>
+                    <Input value={this.state.functionName} style={{width: 400}}
+                           onChange={this.switchConfig('functionName')}/>
+                </div>
+                <Collapse bordered={false}>
+                    <Panel header="Want more options?" style={customPanelStyle}>
+                        {
+                            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>
+                            ))
+                        }
+                    </Panel>
+                </Collapse>
+                <Button type='primary'>ok</Button>
             </div>
         )
     }

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

@@ -3,17 +3,21 @@ import {Row, Col, Card} from 'antd';
 import APIGroupCard from './APIGroupCard';
 import APIPathCard from './APIPathCard';
 import DeployCard from './DeployCard';
-import ConnectCard from './ConnectCard';
 
 
 class TencentConfig extends Component {
     constructor(props) {
         super(props);
         this.state = {
+            region: 'beijing'
         };
     }
 
-
+    switchRegion = (region) => {
+        this.setState({
+            region
+        })
+    };
 
     render() {
         return (
@@ -21,20 +25,9 @@ class TencentConfig extends Component {
                 <div style={{padding: '30px' }}>
                     <Row gutter={16}>
                         <Col span={12}>
-                            <Card title="Deploy"><DeployCard/></Card>
-                        </Col>
-                        <Col span={12}>
-                            <Card title="API Group" ><APIGroupCard/></Card>
-                        </Col>
-                    </Row>
-                </div>
-                <div style={{padding: '30px', paddingTop: '15px'}}>
-                    <Row gutter={16}>
-                        <Col span={12}>
-                            <Card title="API Path"><APIPathCard/></Card>
-                        </Col>
-                        <Col span={12}>
-                            <Card title="Connect" ><ConnectCard/></Card>
+                            <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>
                         </Col>
                     </Row>
                 </div>

src/components/common/schema/Schema.jsx

@@ -49,7 +49,7 @@ class Schema extends Component {
                 <Row>
                     <Col span={6}>
                         <div className='wrapper'>
-                            <div className='current'>{this.state.currentSchema}</div>
+                            {/*<div className='current'>{this.state.currentSchema}</div>*/}
                             <AddSchemaInput userID={userID}/>
                         </div>
                         <ShowSchemaList

src/components/login/login.js

@@ -7,7 +7,6 @@ import {Mutation} from "react-apollo";
 import axios from 'axios';
 import {request} from 'graphql-request'
 import gql from "graphql-tag";
-import cookie from 'react-cookies'
 import _ from 'lodash';
 
 axios.defaults.withCredentials = true;
@@ -30,9 +29,9 @@ class Login extends Component {
             register_password: '',
             login_username: '',
             login_password: '',
-            login_url: 'http://localhost:8999/login',
-            register_url: 'http://localhost:8999/resetpassword',
-            getID_url: 'http://localhost:8999/getuserid',
+            login_url: 'http://123.206.193.98:8999/login',
+            register_url: 'http://123.206.193.98:8999/resetpassword',
+            getID_url: 'http://123.206.193.98:8999/getuserid',
             loginStatus: '',
             loginOnce: true,
             usernameTip: false

src/components/trialCase/TrialCase.jsx

@@ -24,7 +24,7 @@ class TrialCase extends Component {
         this.state = {
             menuLevel2: "schema",
             userID: 'ioobot',
-            getID_url: 'http://localhost:8999/getuserid'
+            getID_url: 'http://123.206.193.98:8999/getuserid'
         }
     }