a bug has not fixed - deploy region

src/components/common/deploy/Deploy.jsx

@@ -33,16 +33,15 @@ class Deploy extends Component {
             amazonCloudID: '',
             // todo: 该schema应该由props传入，无论是哪一层，反正不是这一层。(路由传入吧)
             // 有fc的schema -- 测试数据
-            // schemaID: 'schema_1542243424669_92094965',
+            schemaID: 'schema_1542243424669_92094965',
             // 无fc的schema -- 测试数据
-            schemaID: 'schema_1542967129456_05958413',
+            // 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,

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

@@ -6,7 +6,7 @@ const Panel = Collapse.Panel;
 class APIGroupCard extends Component {
     constructor(props) {
         super(props);
-        let {groupName, environmentName, defaultDomain, frontType, userDomain, userStatus} = props.group;
+        let {groupName, environmentName, defaultDomain, frontType, userDomain, userStatus, region} = props.group;
         props.group !== '' ?
             this.state = {
                 groupName,
@@ -14,7 +14,8 @@ class APIGroupCard extends Component {
                 defaultDomain,
                 frontType,
                 userDomain,
-                userStatus
+                userStatus,
+                groupRegion: region
             }
             :
             this.state = {
@@ -23,20 +24,22 @@ class APIGroupCard extends Component {
                 defaultDomain: '',
                 frontType: 'http&https',
                 userDomain: '',
-                userStatus: 'open'
+                userStatus: 'open',
+                groupRegion: props.region
             };
     }
 
     componentWillReceiveProps(next) {
-        if(next.deploy !== '') {
-            let {groupName, environmentName, defaultDomain, frontType, userDomain, userStatus} = next.group;
+        if(next.group !== '') {
+            let {groupName, environmentName, defaultDomain, frontType, userDomain, userStatus, region} = next.group;
             this.setState( {
                 groupName,
                 environmentName,
                 defaultDomain,
                 frontType,
                 userDomain,
-                userStatus
+                userStatus,
+                groupRegion: region
             })
         } else {
             this.setState ( {
@@ -45,7 +48,8 @@ class APIGroupCard extends Component {
                 defaultDomain: '',
                 frontType: 'http&https',
                 userDomain: '',
-                userStatus: 'open'
+                userStatus: 'open',
+                groupRegion: next.region
             });
         }
     };
@@ -69,13 +73,22 @@ class APIGroupCard extends Component {
 
         return (
             <div>
-                <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'>groupName: </span>
+                            <Input value={this.state.groupName} style={{width: 400}}
+                                   onChange={this.switchConfig('groupName')}/>
+                        </div>
+                        <div style={{marginBottom: 10}}>
+                            <span className='vice-title'>region: </span>
+                            <Radio.Group onChange={this.switchConfig('groupRegion')} defaultValue={this.state.groupRegion} 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'>frontType: </span>
                             <Radio.Group onChange={this.switchConfig('frontType')} defaultValue={this.state.frontType}

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

@@ -25,7 +25,7 @@ class APIPathCard extends Component {
 
 
     componentWillReceiveProps(next) {
-        if(next.deploy !== '') {
+        if(next.path !== '') {
             let {apiGWName, apiGWDesc, requestMethod} = next.path;
             this.setState( {
                 apiGWName,

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

@@ -7,13 +7,13 @@ const Panel = Collapse.Panel;
 class DeployCard extends Component {
     constructor(props) {
         super(props);
-        let {functionName, cosBucketName, cosObjectName, cosBucketRegion, serviceName, vpcId, subnetId} = props.deploy;
-        console.log(1111, props.deploy);
+        let {functionName, cosBucketName, cosObjectName, cosBucketRegion, serviceName, vpcId, subnetId, region} = props.deploy;
 
         props.deploy !== '' ?
             this.state = {
-                configs: ['description', 'cosBucketName', 'cosObjectName', 'cosBucketRegion', 'serviceName', 'vpcId', 'subnetId'],
+                configs: ['description', 'cosBucketName', 'cosObjectName', 'serviceName', 'vpcId', 'subnetId'],
                 functionName,
+                region,
                 cosBucketName,
                 cosObjectName,
                 cosBucketRegion,
@@ -23,8 +23,9 @@ class DeployCard extends Component {
             }
             :
             this.state = {
-                configs: ['description', 'cosBucketName', 'cosObjectName', 'cosBucketRegion', 'serviceName', 'vpcId', 'subnetId'],
+                configs: ['description', 'cosBucketName', 'cosObjectName', 'serviceName', 'vpcId', 'subnetId'],
                 functionName: props.schemaName,
+                region: props.region,
                 cosBucketName: 'graphqlfc',
                 cosObjectName: props.schemaName,
                 cosBucketRegion: props.region,
@@ -35,11 +36,11 @@ class DeployCard extends Component {
     }
 
     componentWillReceiveProps(next) {
-        console.log(2222, next.deploy);
         if(next.deploy !== '') {
-            let {functionName, cosBucketName, cosObjectName, cosBucketRegion, serviceName, vpcId, subnetId} = next.deploy;
+            let {functionName, cosBucketName, cosObjectName, cosBucketRegion, serviceName, vpcId, subnetId, region} = next.deploy;
             this.setState( {
                 functionName,
+                // region,
                 cosBucketName,
                 cosObjectName,
                 cosBucketRegion,
@@ -50,6 +51,7 @@ class DeployCard extends Component {
         } else {
             this.setState ( {
                 functionName: next.schemaName,
+                region: next.region,
                 cosBucketName: 'graphqlfc',
                 cosObjectName: next.schemaName,
                 cosBucketRegion: next.region,
@@ -79,22 +81,37 @@ class DeployCard extends Component {
 
         return (
             <div>
-                <div style={{marginBottom: 10}}>
-                    <span className='vice-title'>region: </span>
-                    <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>
-                        <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>
+                {/*// todo: 不知道为啥， radio group 放在这里就是不对*/}
                 <Collapse bordered={false}>
                     <Panel header="Want more options?" style={customPanelStyle}>
+                        <div style={{marginBottom: 10}}>
+                            <span className='vice-title'>region: </span>
+                            <Radio.Group onChange={(e)=>{
+                                this.props.switchRegion(e);
+                                this.setState({
+                                    region: e.target.value
+                                })
+                            }} defaultValue={this.state.region} 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'>cosBucketRegion: </span>
+                            <Radio.Group onChange={this.switchConfig('cosBucketRegion')} value={this.state.cosBucketRegion} 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>
                         {
                             this.state.configs.map(config => (
                                 <div key={config} style={{marginBottom: 10}}>

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

@@ -62,12 +62,12 @@ class TencentConfig extends Component {
             <div>
                 <div style={{padding: '30px'}}>
                     <Row gutter={16}>
-                        <Col span={12}>
+                        <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>
                         </Col>
-                        <Col offset={2} span={8}>
+                        <Col offset={2} span={6}>
                             <Button type='primary'>deploy it</Button>
                         </Col>
                     </Row>