|
|
@@ -23,17 +23,12 @@ class CloudConfig extends Component {
|
|
|
aliAppID: '',
|
|
|
aliID: '',
|
|
|
aliKey: '',
|
|
|
- awsCLoudID: '',
|
|
|
- awsAppID: '',
|
|
|
- awsID: '',
|
|
|
- awsKey: '',
|
|
|
userID: getCookie('user_id'),
|
|
|
};
|
|
|
request(graphqlUrl, SHOW_CLOUD, {user_id: this.state.userID}).then(
|
|
|
data => {
|
|
|
let tencent = data.cloud_by_props.find(cloud => cloud.cloudName === 'tencent');
|
|
|
let aliyun = data.cloud_by_props.find(cloud => cloud.cloudName === 'aliyun');
|
|
|
- let amazon = data.cloud_by_props.find(cloud => cloud.cloudName === 'amazon');
|
|
|
this.setState({
|
|
|
show: true,
|
|
|
tencentCLoudID: tencent ? tencent.id : '',
|
|
|
@@ -43,11 +38,7 @@ class CloudConfig extends Component {
|
|
|
aliyunCLoudID: aliyun ? aliyun.id : '',
|
|
|
aliAppID: aliyun ? aliyun.appId : '',
|
|
|
aliID: aliyun ? aliyun.secretId : '',
|
|
|
- aliKey: aliyun ? aliyun.secretKey : '',
|
|
|
- awsCLoudID: amazon ? amazon.id : '',
|
|
|
- awsAppID: amazon ? amazon.appId : '',
|
|
|
- awsID: amazon ? amazon.secretId : '',
|
|
|
- awsKey: amazon ? amazon.secretKey : ''
|
|
|
+ aliKey: aliyun ? aliyun.secretKey : ''
|
|
|
});
|
|
|
}
|
|
|
);
|
|
|
@@ -136,110 +127,104 @@ class CloudConfig extends Component {
|
|
|
};
|
|
|
|
|
|
render() {
|
|
|
+ let {show, tenID, tenAppID, tenKey, tencentCLoudID, aliyunCLoudID, aliAppID, aliID, aliKey, showOK, showNotOK} = this.state;
|
|
|
+ let {cloudName} = this.props;
|
|
|
return (
|
|
|
<div>
|
|
|
{
|
|
|
- this.state.show ?
|
|
|
+ show ?
|
|
|
<div>
|
|
|
- <div style={{marginTop: 15}}>
|
|
|
- <span className='cloud-name'><FormattedMessage id="Tencent"/>: </span>
|
|
|
- <div style={{marginBottom: 15}}>
|
|
|
- <div>
|
|
|
- <div style={{marginBottom: 20}}>
|
|
|
- <span className='item-title-cloud'>APPID:</span>
|
|
|
- <Input style={{width: 250}} value={this.state.tenAppID}
|
|
|
- onChange={this.inputChange('tenAppID')}/>
|
|
|
- </div>
|
|
|
- <div style={{marginBottom: 20}}>
|
|
|
- <span className='item-title-cloud'>SecretId:</span>
|
|
|
- <Input style={{width: 250}} value={this.state.tenID}
|
|
|
- onChange={this.inputChange('tenID')}/>
|
|
|
- </div>
|
|
|
- <div style={{marginBottom: 20}}>
|
|
|
- <span className='item-title-cloud'>SecretKey:</span>
|
|
|
- <Input style={{width: 250}} value={this.state.tenKey}
|
|
|
- onChange={this.inputChange('tenKey')}/>
|
|
|
+ {
|
|
|
+ (cloudName === 'all' || cloudName === 'tencent')?
|
|
|
+ <div style={{marginTop: 15}}>
|
|
|
+ <span className='cloud-name'><FormattedMessage id="Tencent"/>: </span>
|
|
|
+ <div style={{marginBottom: 15}}>
|
|
|
+ <div>
|
|
|
+ <div style={{marginBottom: 20}}>
|
|
|
+ <span className='item-title-cloud'>APPID:</span>
|
|
|
+ <Input style={{width: 250}} value={tenAppID}
|
|
|
+ onChange={this.inputChange('tenAppID')}/>
|
|
|
+ </div>
|
|
|
+ <div style={{marginBottom: 20}}>
|
|
|
+ <span className='item-title-cloud'>SecretId:</span>
|
|
|
+ <Input style={{width: 250}} value={tenID}
|
|
|
+ onChange={this.inputChange('tenID')}/>
|
|
|
+ </div>
|
|
|
+ <div style={{marginBottom: 20}}>
|
|
|
+ <span className='item-title-cloud'>SecretKey:</span>
|
|
|
+ <Input style={{width: 250}} value={tenKey}
|
|
|
+ onChange={this.inputChange('tenKey')}/>
|
|
|
+ </div>
|
|
|
+ {
|
|
|
+ this.state.showOK === 'tencent' ?
|
|
|
+ <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
|
|
|
+ :
|
|
|
+ this.state.showNotOK === 'tencent' ?
|
|
|
+ <span>not ok</span>
|
|
|
+ :
|
|
|
+ ""
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ <Button type='primary'
|
|
|
+ onClick={this.submit(tencentCLoudID, 'tencent', tenID, tenKey, tenAppID)}>
|
|
|
+ <FormattedMessage id="save"/>
|
|
|
+ </Button>
|
|
|
</div>
|
|
|
- {
|
|
|
- this.state.showOK === 'tencent' ?
|
|
|
- <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
|
|
|
- :
|
|
|
- this.state.showNotOK === 'tencent' ?
|
|
|
- <span>not ok</span>
|
|
|
- :
|
|
|
- ""
|
|
|
- }
|
|
|
- </div>
|
|
|
- <Button type='primary'
|
|
|
- onClick={this.submit(this.state.tencentCLoudID, 'tencent', this.state.tenID, this.state.tenKey, this.state.tenAppID)}>
|
|
|
- <FormattedMessage id="save"/>
|
|
|
- </Button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </div> : ''
|
|
|
+
|
|
|
+ }
|
|
|
+ {
|
|
|
+ (cloudName === 'all' || cloudName === 'aliyun')?
|
|
|
+ <div>
|
|
|
+ <span className='cloud-name'><FormattedMessage id="Aliyun"/>: </span>
|
|
|
+ <div style={{marginBottom: 15}}>
|
|
|
+ <div>
|
|
|
+ <div style={{marginBottom: 10}}>
|
|
|
+ <span className='item-title-cloud'>ID:</span>
|
|
|
+ <Input style={{width: 250}} value={aliID}
|
|
|
+ onChange={this.inputChange('aliID')}/>
|
|
|
+ </div>
|
|
|
+ <div style={{marginBottom: 10}}>
|
|
|
+ <span className='item-title-cloud'>Key:</span>
|
|
|
+ <Input style={{width: 250}} value={aliKey}
|
|
|
+ onChange={this.inputChange('aliKey')}/>
|
|
|
+ </div>
|
|
|
|
|
|
- <div>
|
|
|
- <span className='cloud-name'><FormattedMessage id="Aliyun"/>: </span>
|
|
|
- <div style={{marginBottom: 15}}>
|
|
|
+ {
|
|
|
+ showOK === 'aliyun' ?
|
|
|
+ <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
|
|
|
+ :
|
|
|
+ showNotOK === 'aliyun' ?
|
|
|
+ <span>not ok</span>
|
|
|
+ :
|
|
|
+ ""
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ <Button type='primary'
|
|
|
+ onClick={this.submit(aliyunCLoudID, 'aliyun', aliID, aliKey, aliAppID)}>
|
|
|
+ <FormattedMessage id="save"/>
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </div> : ''
|
|
|
+ }
|
|
|
+ {
|
|
|
+ (cloudName === 'all' || cloudName === 'aws')?
|
|
|
<div>
|
|
|
- <div style={{marginBottom: 10}}>
|
|
|
- <span className='item-title-cloud'>ID:</span>
|
|
|
- <Input style={{width: 250}} value={this.state.aliID}
|
|
|
- onChange={this.inputChange('aliID')}/>
|
|
|
+ <span className='cloud-name'><FormattedMessage id="AWS"/>: </span>
|
|
|
+ <div style={{marginBottom: 15}}>
|
|
|
+ 如需使用请联系我们
|
|
|
</div>
|
|
|
- <div style={{marginBottom: 10}}>
|
|
|
- <span className='item-title-cloud'>Key:</span>
|
|
|
- <Input style={{width: 250}} value={this.state.aliKey}
|
|
|
- onChange={this.inputChange('aliKey')}/>
|
|
|
+ </div> : ''
|
|
|
+ }
|
|
|
+ {
|
|
|
+ (cloudName === 'all' || cloudName === 'huawei')?
|
|
|
+ <div>
|
|
|
+ <span className='cloud-name'><FormattedMessage id="Huawei"/>: </span>
|
|
|
+ <div style={{marginBottom: 15}}>
|
|
|
+ 如需使用请联系我们
|
|
|
</div>
|
|
|
-
|
|
|
- {
|
|
|
- this.state.showOK === 'aliyun' ?
|
|
|
- <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
|
|
|
- :
|
|
|
- this.state.showNotOK === 'aliyun' ?
|
|
|
- <span>not ok</span>
|
|
|
- :
|
|
|
- ""
|
|
|
- }
|
|
|
- </div>
|
|
|
- <Button type='primary'
|
|
|
- onClick={this.submit(this.state.aliyunCLoudID, 'aliyun', this.state.aliID, this.state.aliKey)}>
|
|
|
- <FormattedMessage id="save"/>
|
|
|
- </Button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- {/*<div>*/}
|
|
|
- {/*<span className='cloud-name'><FormattedMessage id="AWS"/>: </span>*/}
|
|
|
- {/*<div style={{marginBottom: 15}}>*/}
|
|
|
- {/*<div>*/}
|
|
|
- {/*<div style={{marginBottom: 10}}>*/}
|
|
|
- {/*<span className='item-title-cloud'>ID:</span>*/}
|
|
|
- {/*<Input style={{width: 250}} value={this.state.awsID}*/}
|
|
|
- {/*onChange={this.inputChange('awsID')}/>*/}
|
|
|
- {/*</div>*/}
|
|
|
- {/*<div style={{marginBottom: 10}}>*/}
|
|
|
- {/*<span className='item-title-cloud'>Key:</span>*/}
|
|
|
- {/*<Input style={{width: 250}} value={this.state.awsKey}*/}
|
|
|
- {/*onChange={this.inputChange('awsKey')}/>*/}
|
|
|
- {/*</div>*/}
|
|
|
- {/*{*/}
|
|
|
- {/*this.state.showOK === 'amazon' ?*/}
|
|
|
- {/*<Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>*/}
|
|
|
- {/*:*/}
|
|
|
- {/*this.state.showNotOK === 'amazon' ?*/}
|
|
|
- {/*<span>not ok</span>*/}
|
|
|
- {/*:*/}
|
|
|
- {/*""*/}
|
|
|
- {/*}*/}
|
|
|
- {/*</div>*/}
|
|
|
- {/*<Button type='primary'*/}
|
|
|
- {/*onClick={this.submit(this.state.awsCLoudID, 'amazon', this.state.awsID, this.state.awsKey)}>*/}
|
|
|
- {/*<FormattedMessage id="save"/>*/}
|
|
|
- {/*</Button>*/}
|
|
|
- {/*</div>*/}
|
|
|
- {/*</div>*/}
|
|
|
-
|
|
|
+ </div> : ''
|
|
|
+ }
|
|
|
</div>
|
|
|
:
|
|
|
<Spin style={{marginLeft: 3}}/>
|
|
|
@@ -259,7 +244,7 @@ const CloudConfigWrapper = (props) => {
|
|
|
}}>
|
|
|
<Icon type="left" style={{color: '#3187FA'}}/> <FormattedMessage id="login"/>
|
|
|
</div>
|
|
|
- <CloudConfig {...props}/>
|
|
|
+ <CloudConfig {...props} cloudName='all'/>
|
|
|
</div>
|
|
|
)
|
|
|
};
|