|
@@ -1,5 +1,5 @@
|
|
|
import React, {Component} from 'react';
|
|
import React, {Component} from 'react';
|
|
|
-import {Input, Radio, Collapse, Button, Icon} from 'antd';
|
|
|
|
|
|
|
+import {Input, Radio, Collapse, Button, Icon, Tooltip} from 'antd';
|
|
|
import {ADD_DEPLOY, UPDATE_DEPLOY} from "../../../../gql";
|
|
import {ADD_DEPLOY, UPDATE_DEPLOY} from "../../../../gql";
|
|
|
import {request} from 'graphql-request'
|
|
import {request} from 'graphql-request'
|
|
|
import {idGen} from "../../../../func";
|
|
import {idGen} from "../../../../func";
|
|
@@ -23,6 +23,28 @@ const valueToKey = {
|
|
|
'description': 'description',
|
|
'description': 'description',
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
|
|
+const toolTipTitle = {
|
|
|
|
|
+ 'functionName': 'its funcname',
|
|
|
|
|
+ 'cosBucketName': 'its cosBucketName',
|
|
|
|
|
+ 'cosObjectName': 'its cosObjectName',
|
|
|
|
|
+ 'cosBucketRegion': 'its cosBucketRegion',
|
|
|
|
|
+ 'serviceName': 'its serviceName',
|
|
|
|
|
+ 'subnetId': 'its subnetId',
|
|
|
|
|
+ 'vpcId': 'its vpcId',
|
|
|
|
|
+ 'region': 'its region',
|
|
|
|
|
+ 'description': 'its description',
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+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 DeployCard extends Component {
|
|
class DeployCard extends Component {
|
|
|
constructor(props) {
|
|
constructor(props) {
|
|
|
super(props);
|
|
super(props);
|
|
@@ -63,10 +85,10 @@ class DeployCard extends Component {
|
|
|
this.setState({
|
|
this.setState({
|
|
|
description,
|
|
description,
|
|
|
functionName,
|
|
functionName,
|
|
|
- region,
|
|
|
|
|
|
|
+ region: next.region === '' ? region: next.region,
|
|
|
cosBucketName,
|
|
cosBucketName,
|
|
|
cosObjectName,
|
|
cosObjectName,
|
|
|
- cosBucketRegion,
|
|
|
|
|
|
|
+ cosBucketRegion: next.region === '' ? cosBucketRegion : next.region,
|
|
|
serviceName,
|
|
serviceName,
|
|
|
vpcId,
|
|
vpcId,
|
|
|
subnetId
|
|
subnetId
|
|
@@ -74,10 +96,10 @@ class DeployCard extends Component {
|
|
|
} else {
|
|
} else {
|
|
|
this.setState({
|
|
this.setState({
|
|
|
functionName: next.defalutName,
|
|
functionName: next.defalutName,
|
|
|
- region: next.region,
|
|
|
|
|
|
|
+ region: next.region === '' ? 'ap-beijing': next.region,
|
|
|
cosBucketName: 'graphqlfc',
|
|
cosBucketName: 'graphqlfc',
|
|
|
cosObjectName: next.defalutName,
|
|
cosObjectName: next.defalutName,
|
|
|
- cosBucketRegion: next.region,
|
|
|
|
|
|
|
+ cosBucketRegion: next.region === '' ? 'ap-beijing' : next.region,
|
|
|
serviceName: '',
|
|
serviceName: '',
|
|
|
vpcId: '',
|
|
vpcId: '',
|
|
|
subnetId: ''
|
|
subnetId: ''
|
|
@@ -95,6 +117,8 @@ class DeployCard extends Component {
|
|
|
|
|
|
|
|
ok = (id) => {
|
|
ok = (id) => {
|
|
|
let {description, cosBucketName, subnetId, cosObjectName, region, vpcId, cosBucketRegion, functionName} = this.state;
|
|
let {description, cosBucketName, subnetId, cosObjectName, region, vpcId, cosBucketRegion, functionName} = this.state;
|
|
|
|
|
+ region = shiftPrefix('ap-', region);
|
|
|
|
|
+ cosBucketRegion = shiftPrefix('ap-', cosBucketRegion);
|
|
|
let varObj = {
|
|
let varObj = {
|
|
|
id,
|
|
id,
|
|
|
cloud_id: this.props.cloudID,
|
|
cloud_id: this.props.cloudID,
|
|
@@ -132,6 +156,8 @@ class DeployCard extends Component {
|
|
|
)
|
|
)
|
|
|
} else {
|
|
} else {
|
|
|
let {description, cosBucketName, subnetId, cosObjectName, region, vpcId, cosBucketRegion, functionName} = this.state;
|
|
let {description, cosBucketName, subnetId, cosObjectName, region, vpcId, cosBucketRegion, functionName} = this.state;
|
|
|
|
|
+ region = shiftPrefix('ap-', region);
|
|
|
|
|
+ cosBucketRegion = shiftPrefix('ap-', cosBucketRegion);
|
|
|
let varObj = {
|
|
let varObj = {
|
|
|
id: this.props.deploy.id,
|
|
id: this.props.deploy.id,
|
|
|
description,
|
|
description,
|
|
@@ -173,18 +199,25 @@ class DeployCard extends Component {
|
|
|
return (
|
|
return (
|
|
|
<div>
|
|
<div>
|
|
|
<div style={{marginBottom: 10}}>
|
|
<div style={{marginBottom: 10}}>
|
|
|
- <span className='vice-title'>{valueToKey['functionName']}: </span>
|
|
|
|
|
|
|
+ <span className='vice-title'>{valueToKey['functionName']}
|
|
|
|
|
+ <span> </span>
|
|
|
|
|
+ <Tooltip placement="top" title={toolTipTitle['functionName']}>
|
|
|
|
|
+ <Icon type="question-circle"/>
|
|
|
|
|
+ </Tooltip>
|
|
|
|
|
+ </span>
|
|
|
<Input value={this.state.functionName} style={{width: 400}}
|
|
<Input value={this.state.functionName} style={{width: 400}}
|
|
|
onChange={this.switchConfig('functionName')}/>
|
|
onChange={this.switchConfig('functionName')}/>
|
|
|
</div>
|
|
</div>
|
|
|
<div style={{marginBottom: 10}}>
|
|
<div style={{marginBottom: 10}}>
|
|
|
- <span className='vice-title'>{valueToKey['region']}: </span>
|
|
|
|
|
|
|
+ <span className='vice-title'>{valueToKey['region']}
|
|
|
|
|
+ <span> </span>
|
|
|
|
|
+ <Tooltip placement="top" title={toolTipTitle['region']}>
|
|
|
|
|
+ <Icon type="question-circle"/>
|
|
|
|
|
+ </Tooltip>
|
|
|
|
|
+ </span>
|
|
|
<Radio.Group onChange={(e) => {
|
|
<Radio.Group onChange={(e) => {
|
|
|
this.props.switchRegion(e);
|
|
this.props.switchRegion(e);
|
|
|
- this.setState({
|
|
|
|
|
- region: e.target.value
|
|
|
|
|
- })
|
|
|
|
|
- }} defaultValue={this.state.region} buttonStyle="solid">
|
|
|
|
|
|
|
+ }} defaultValue={this.state.region} value={removePrefix('ap-', this.state.region)} buttonStyle="solid">
|
|
|
<Radio.Button value="guangzhou">Guangzhou</Radio.Button>
|
|
<Radio.Button value="guangzhou">Guangzhou</Radio.Button>
|
|
|
<Radio.Button value="shanghai">Shanghai</Radio.Button>
|
|
<Radio.Button value="shanghai">Shanghai</Radio.Button>
|
|
|
<Radio.Button value="beijing">Beijing</Radio.Button>
|
|
<Radio.Button value="beijing">Beijing</Radio.Button>
|
|
@@ -194,24 +227,44 @@ class DeployCard extends Component {
|
|
|
<Collapse bordered={false}>
|
|
<Collapse bordered={false}>
|
|
|
<Panel header="Want more options?" style={customPanelStyle}>
|
|
<Panel header="Want more options?" style={customPanelStyle}>
|
|
|
<div style={{marginBottom: 10}}>
|
|
<div style={{marginBottom: 10}}>
|
|
|
- <span className='vice-title'>{valueToKey['cosBucketRegion']}: </span>
|
|
|
|
|
- <Radio.Group onChange={this.switchConfig('cosBucketRegion')}
|
|
|
|
|
- value={this.state.cosBucketRegion} buttonStyle="solid">
|
|
|
|
|
|
|
+ <span className='vice-title'>{valueToKey['cosBucketRegion']}
|
|
|
|
|
+ <span> </span>
|
|
|
|
|
+ <Tooltip placement="top" title={toolTipTitle['cosBucketRegion']}>
|
|
|
|
|
+ <Icon type="question-circle"/>
|
|
|
|
|
+ </Tooltip>
|
|
|
|
|
+ </span>
|
|
|
|
|
+ <Radio.Group onChange={(e)=>{
|
|
|
|
|
+ // 如果不想一变所有都变,就将 onchange 改成
|
|
|
|
|
+ // onChange={this.switchConfig('cosBucketRegion')}
|
|
|
|
|
+ this.props.switchRegion(e);
|
|
|
|
|
+ }} defaultValue={this.state.region}
|
|
|
|
|
+ value={removePrefix('ap-', this.state.cosBucketRegion)} buttonStyle="solid">
|
|
|
<Radio.Button value="guangzhou">Guangzhou</Radio.Button>
|
|
<Radio.Button value="guangzhou">Guangzhou</Radio.Button>
|
|
|
<Radio.Button value="shanghai">Shanghai</Radio.Button>
|
|
<Radio.Button value="shanghai">Shanghai</Radio.Button>
|
|
|
<Radio.Button value="beijing">Beijing</Radio.Button>
|
|
<Radio.Button value="beijing">Beijing</Radio.Button>
|
|
|
<Radio.Button value="chengdu">Chengdu</Radio.Button>
|
|
<Radio.Button value="chengdu">Chengdu</Radio.Button>
|
|
|
</Radio.Group>
|
|
</Radio.Group>
|
|
|
</div>
|
|
</div>
|
|
|
- <div style={{marginBottom: 10}}>
|
|
|
|
|
- <span className='vice-title'>{valueToKey['serviceName']}: </span>
|
|
|
|
|
- <Input value={this.state.serviceName} style={{width: 200}} disabled
|
|
|
|
|
- onChange={this.switchConfig('serviceName')}/>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ {/*腾讯云为空字符串,不显示,这里未作区分*/}
|
|
|
|
|
+ {/*<div style={{marginBottom: 10}}>*/}
|
|
|
|
|
+ {/*<span className='vice-title'>{valueToKey['serviceName']}*/}
|
|
|
|
|
+ {/*<span> </span>*/}
|
|
|
|
|
+ {/*<Tooltip placement="top" title={toolTipTitle['serviceName']}>*/}
|
|
|
|
|
+ {/*<Icon type="question-circle"/>*/}
|
|
|
|
|
+ {/*</Tooltip>*/}
|
|
|
|
|
+ {/*</span>*/}
|
|
|
|
|
+ {/*<Input value={this.state.serviceName} style={{width: 200}} disabled*/}
|
|
|
|
|
+ {/*onChange={this.switchConfig('serviceName')}/>*/}
|
|
|
|
|
+ {/*</div>*/}
|
|
|
{
|
|
{
|
|
|
this.state.configs.map(config => (
|
|
this.state.configs.map(config => (
|
|
|
<div key={config} style={{marginBottom: 10}}>
|
|
<div key={config} style={{marginBottom: 10}}>
|
|
|
- <span className='vice-title'>{valueToKey[config]}: </span>
|
|
|
|
|
|
|
+ <span className='vice-title'>{valueToKey[config]}
|
|
|
|
|
+ <span> </span>
|
|
|
|
|
+ <Tooltip placement="top" title={toolTipTitle[config]}>
|
|
|
|
|
+ <Icon type="question-circle"/>
|
|
|
|
|
+ </Tooltip>
|
|
|
|
|
+ </span>
|
|
|
<Input value={this.state[config]} style={{width: 200}}
|
|
<Input value={this.state[config]} style={{width: 200}}
|
|
|
onChange={this.switchConfig(config)}/>
|
|
onChange={this.switchConfig(config)}/>
|
|
|
</div>
|
|
</div>
|