|
|
@@ -1,5 +1,5 @@
|
|
|
import React, {Component} from 'react';
|
|
|
-import {Input, Collapse, Button, Radio, Icon} from 'antd';
|
|
|
+import {Input, Collapse, Button, Radio, Icon, Tooltip} from 'antd';
|
|
|
import {ADD_APIGROUP, UPDATE_APIGROUP} from "../../../../gql";
|
|
|
import {request} from 'graphql-request'
|
|
|
import {idGen} from "../../../../func";
|
|
|
@@ -21,6 +21,26 @@ const valueToKey = {
|
|
|
'region': 'region',
|
|
|
};
|
|
|
|
|
|
+const toolTipTitle = {
|
|
|
+ 'groupName': 'its groupName',
|
|
|
+ 'environmentName': 'its environmentName',
|
|
|
+ 'defaultDomain': 'its defaultDomain',
|
|
|
+ 'frontType': 'its frontType',
|
|
|
+ 'userDomain': 'its userDomain',
|
|
|
+ 'userStatus': 'its userStatus',
|
|
|
+ 'region': 'its region',
|
|
|
+};
|
|
|
+
|
|
|
+const removePrefix = (prefix, value) => {
|
|
|
+ let r = new RegExp(prefix);
|
|
|
+ return value.replace(r, '');
|
|
|
+};
|
|
|
+
|
|
|
+const shiftPrefix = (prefix, value) => {
|
|
|
+ value = removePrefix(prefix, value);
|
|
|
+ return prefix + value;
|
|
|
+};
|
|
|
+
|
|
|
class APIGroupCard extends Component {
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
@@ -59,7 +79,7 @@ class APIGroupCard extends Component {
|
|
|
frontType,
|
|
|
userDomain,
|
|
|
userStatus,
|
|
|
- groupRegion: region
|
|
|
+ groupRegion: next.region === '' ? region: next.region
|
|
|
})
|
|
|
} else {
|
|
|
this.setState ( {
|
|
|
@@ -69,7 +89,7 @@ class APIGroupCard extends Component {
|
|
|
frontType: 'http&https',
|
|
|
userDomain: '',
|
|
|
userStatus: 'open',
|
|
|
- groupRegion: next.region
|
|
|
+ groupRegion: next.region === '' ? 'ap-beijing' : next.region
|
|
|
});
|
|
|
}
|
|
|
};
|
|
|
@@ -83,7 +103,8 @@ class APIGroupCard extends Component {
|
|
|
};
|
|
|
|
|
|
ok = (id) => {
|
|
|
- let {userStatus, userDomain, groupName, frontType, environmentName} = this.state;
|
|
|
+ let {userStatus, userDomain, groupName, groupRegion, frontType, environmentName} = this.state;
|
|
|
+ let region = shiftPrefix('ap-', groupRegion);
|
|
|
let varObj = {
|
|
|
id,
|
|
|
cloud_id: this.props.cloudID,
|
|
|
@@ -92,7 +113,7 @@ class APIGroupCard extends Component {
|
|
|
userDomain,
|
|
|
groupName,
|
|
|
frontType,
|
|
|
- region: this.state.groupRegion,
|
|
|
+ region,
|
|
|
environmentName,
|
|
|
defaultDomain: '',
|
|
|
status: '',
|
|
|
@@ -116,14 +137,15 @@ class APIGroupCard extends Component {
|
|
|
}
|
|
|
)
|
|
|
} else {
|
|
|
- let {userStatus, userDomain, groupName, frontType, environmentName} = this.state;
|
|
|
+ let {userStatus, userDomain, groupName, groupRegion, frontType, environmentName} = this.state;
|
|
|
+ let region = shiftPrefix('ap-', groupRegion);
|
|
|
let varObj = {
|
|
|
id: this.props.group.id,
|
|
|
userStatus,
|
|
|
userDomain,
|
|
|
groupName,
|
|
|
frontType,
|
|
|
- region: this.state.groupRegion,
|
|
|
+ region,
|
|
|
environmentName,
|
|
|
updatedAt: new Date().getTime()
|
|
|
};
|
|
|
@@ -155,24 +177,60 @@ class APIGroupCard extends Component {
|
|
|
|
|
|
return (
|
|
|
<div>
|
|
|
+ <div style={{marginBottom: 10}}>
|
|
|
+ <span className='vice-title'>{valueToKey['groupName']}
|
|
|
+ <span> </span>
|
|
|
+ <Tooltip placement="top" title={toolTipTitle['groupName']}>
|
|
|
+ <Icon type="question-circle"/>
|
|
|
+ </Tooltip>
|
|
|
+ </span>
|
|
|
+ <Input value={this.state.groupName} style={{width: 400}}
|
|
|
+ onChange={this.switchConfig('groupName')}/>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style={{marginBottom: 10}}>
|
|
|
+ <span className='vice-title'>{valueToKey['region']}
|
|
|
+ <span> </span>
|
|
|
+ <Tooltip placement="top" title={toolTipTitle['region']}>
|
|
|
+ <Icon type="question-circle"/>
|
|
|
+ </Tooltip>
|
|
|
+ </span>
|
|
|
+ <Radio.Group onChange={(e)=>{
|
|
|
+ // 如果不想一变所有都变,就将 onchange 改成
|
|
|
+ // onChange={this.switchConfig('groupRegion')}
|
|
|
+ this.props.switchRegion(e);
|
|
|
+ }} value={removePrefix('ap-', 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'>{valueToKey['environmentName']}
|
|
|
+ <span> </span>
|
|
|
+ <Tooltip placement="top" title={toolTipTitle['environmentName']}>
|
|
|
+ <Icon type="question-circle"/>
|
|
|
+ </Tooltip>
|
|
|
+ </span>
|
|
|
+ <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>
|
|
|
+ <Radio.Button value="release">release</Radio.Button>
|
|
|
+ </Radio.Group>
|
|
|
+ </div>
|
|
|
<Collapse bordered={false}>
|
|
|
<Panel header="Want more options?" style={customPanelStyle}>
|
|
|
+
|
|
|
<div style={{marginBottom: 10}}>
|
|
|
- <span className='vice-title'>{valueToKey['groupName']}: </span>
|
|
|
- <Input value={this.state.groupName} style={{width: 400}}
|
|
|
- onChange={this.switchConfig('groupName')}/>
|
|
|
- </div>
|
|
|
- <div style={{marginBottom: 10}}>
|
|
|
- <span className='vice-title'>{valueToKey['region']}: </span>
|
|
|
- <Radio.Group onChange={this.switchConfig('groupRegion')} value={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'>{valueToKey['frontType']}: </span>
|
|
|
+ <span className='vice-title'>{valueToKey['frontType']}
|
|
|
+ <span> </span>
|
|
|
+ <Tooltip placement="top" title={toolTipTitle['frontType']}>
|
|
|
+ <Icon type="question-circle"/>
|
|
|
+ </Tooltip>
|
|
|
+ </span>
|
|
|
<Radio.Group onChange={this.switchConfig('frontType')} defaultValue={this.state.frontType}
|
|
|
buttonStyle="solid">
|
|
|
<Radio.Button value="http">http</Radio.Button>
|
|
|
@@ -180,32 +238,39 @@ class APIGroupCard extends Component {
|
|
|
<Radio.Button value="http&https">http&https</Radio.Button>
|
|
|
</Radio.Group>
|
|
|
</div>
|
|
|
+ {/*<div style={{marginBottom: 10}}>*/}
|
|
|
+ {/*<span className='vice-title'>{valueToKey['defaultDomain']}*/}
|
|
|
+ {/*<span> </span>*/}
|
|
|
+ {/*<Tooltip placement="top" title={toolTipTitle['defaultDomain']}>*/}
|
|
|
+ {/*<Icon type="question-circle"/>*/}
|
|
|
+ {/*</Tooltip>*/}
|
|
|
+ {/*</span>*/}
|
|
|
+ {/*<Input value={this.state.defaultDomain} style={{width: 400}} disabled/>*/}
|
|
|
+ {/*</div>*/}
|
|
|
+
|
|
|
<div style={{marginBottom: 10}}>
|
|
|
- <span className='vice-title'>{valueToKey['defaultDomain']}: </span>
|
|
|
- <Input value={this.state.defaultDomain} style={{width: 400}} disabled/>
|
|
|
- </div>
|
|
|
- <div style={{marginBottom: 10}}>
|
|
|
- <span className='vice-title'>{valueToKey['environmentName']}: </span>
|
|
|
- <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>
|
|
|
- <Radio.Button value="release">release</Radio.Button>
|
|
|
- </Radio.Group>
|
|
|
- </div>
|
|
|
- <div style={{marginBottom: 10}}>
|
|
|
- <span className='vice-title'>{valueToKey['userDomain']}: </span>
|
|
|
+ <span className='vice-title'>{valueToKey['userDomain']}
|
|
|
+ <span> </span>
|
|
|
+ <Tooltip placement="top" title={toolTipTitle['userDomain']}>
|
|
|
+ <Icon type="question-circle"/>
|
|
|
+ </Tooltip>
|
|
|
+ </span>
|
|
|
<Input value={this.state.userDomain} style={{width: 400}}
|
|
|
onChange={this.switchConfig('userDomain')}/>
|
|
|
</div>
|
|
|
- <div style={{marginBottom: 10}}>
|
|
|
- <span className='vice-title'>{valueToKey['userStatus']}: </span>
|
|
|
- <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>
|
|
|
- </Radio.Group>
|
|
|
- </div>
|
|
|
+ {/*<div style={{marginBottom: 10}}>*/}
|
|
|
+ {/*<span className='vice-title'>{valueToKey['userStatus']}*/}
|
|
|
+ {/*<span> </span>*/}
|
|
|
+ {/*<Tooltip placement="top" title={toolTipTitle['userStatus']}>*/}
|
|
|
+ {/*<Icon type="question-circle"/>*/}
|
|
|
+ {/*</Tooltip>*/}
|
|
|
+ {/*</span>*/}
|
|
|
+ {/*<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>*/}
|
|
|
+ {/*</Radio.Group>*/}
|
|
|
+ {/*</div>*/}
|
|
|
</Panel>
|
|
|
</Collapse>
|
|
|
{
|