|
|
@@ -1,100 +1,42 @@
|
|
|
import React, {Component} from 'react';
|
|
|
-import {Row, Col, Card, Button, Icon} from 'antd';
|
|
|
+import {Row, Col, Card, Button, Spin} from 'antd';
|
|
|
import axios from 'axios';
|
|
|
import APIGroupCard from './APIGroupCard';
|
|
|
import APIPathCard from './APIPathCard';
|
|
|
import DeployCard from './DeployCard';
|
|
|
import NotificationCard from './NotificationCard';
|
|
|
|
|
|
-import {SHOW_DEPLOY, SHOW_APIGWGROUP, SHOW_APIGWPATH, SEARCH_SCHEMA} from "../../../../gql";
|
|
|
-import {request} from 'graphql-request'
|
|
|
-import {graphqlUrl,deployUrl} from "../../../../config";
|
|
|
+import {SHOW_APIGWPATH, GET_PROJECT} from "../../../../gql";
|
|
|
+import {deployUrl} from "../../../../config";
|
|
|
import {FormattedMessage} from 'react-intl';
|
|
|
+import gql from "graphql-tag";
|
|
|
+import {Query} from "react-apollo";
|
|
|
|
|
|
class TencentConfig extends Component {
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
this.state = {
|
|
|
region: '',
|
|
|
- deploys: [],
|
|
|
- currentDeploy: '',
|
|
|
- groups: [],
|
|
|
- currentGroup: '',
|
|
|
- paths: [],
|
|
|
- currentPath: '',
|
|
|
+ couldDeploy: false,
|
|
|
deployIdPassToPath: '',
|
|
|
- groupIdPassToPath: '',
|
|
|
- cloudID: props.cloudID,
|
|
|
- fc: props.fc,
|
|
|
- couldDeploy: false
|
|
|
+ groupIdPassToPath: ''
|
|
|
};
|
|
|
}
|
|
|
|
|
|
- componentDidMount() {
|
|
|
- this.fetch();
|
|
|
- }
|
|
|
-
|
|
|
componentWillReceiveProps(next) {
|
|
|
this.setState({
|
|
|
- fc: next.fc,
|
|
|
- cloudID: next.cloudID,
|
|
|
couldDeploy: false,
|
|
|
- region: ''
|
|
|
- }, this.fetch);
|
|
|
+ region: '',
|
|
|
+ deployIdPassToPath: '',
|
|
|
+ groupIdPassToPath: ''
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
- fetch = () => {
|
|
|
- // todo: 没做每个 deploy 和 apigroup 和 apipath 的切换
|
|
|
- // todo: 换成 apollo 会更好
|
|
|
- if (this.state.fc === true) {
|
|
|
- request(graphqlUrl, SHOW_DEPLOY, {cloud_id: this.state.cloudID}).then(
|
|
|
- data => {
|
|
|
- this.setState({
|
|
|
- deploys: data.deploy_by_props,
|
|
|
- currentDeploy: data.deploy_by_props[0]
|
|
|
- })
|
|
|
- }
|
|
|
- );
|
|
|
- request(graphqlUrl, SHOW_APIGWGROUP, {cloud_id: this.state.cloudID}).then(
|
|
|
- data => {
|
|
|
- this.setState({
|
|
|
- groups: data.apiGWGroup_by_props,
|
|
|
- currentGroup: data.apiGWGroup_by_props[0]
|
|
|
- }, () => {
|
|
|
- request(graphqlUrl, SHOW_APIGWPATH, {apiGWGroup_id: this.state.currentGroup.id}).then(
|
|
|
- data => {
|
|
|
- this.setState({
|
|
|
- paths: data.apiGWPath_by_props,
|
|
|
- currentPath: data.apiGWPath_by_props[0]
|
|
|
- });
|
|
|
- }
|
|
|
- );
|
|
|
- });
|
|
|
- }
|
|
|
- );
|
|
|
- } else {
|
|
|
- this.setState({
|
|
|
- currentDeploy: '',
|
|
|
- currentGroup: '',
|
|
|
- currentPath: '',
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- if(this.props.schemaID === '' || this.props.schemaID === undefined) {
|
|
|
- this.setState({
|
|
|
- couldDeploy: true
|
|
|
- });
|
|
|
- } else {
|
|
|
- request(graphqlUrl, SEARCH_SCHEMA, {id: this.props.schemaID}).then(
|
|
|
- data => {
|
|
|
- if(data.schema_by_id.schemaState === 'ok')
|
|
|
- this.setState({
|
|
|
- couldDeploy: true
|
|
|
- });
|
|
|
- }
|
|
|
- );
|
|
|
- }
|
|
|
|
|
|
+ switchRegion = (e) => {
|
|
|
+ this.setState({
|
|
|
+ region: e.target.value
|
|
|
+ });
|
|
|
};
|
|
|
|
|
|
pass = (value, kind) => {
|
|
|
@@ -108,12 +50,6 @@ class TencentConfig extends Component {
|
|
|
})
|
|
|
};
|
|
|
|
|
|
- switchRegion = (e) => {
|
|
|
- this.setState({
|
|
|
- region: e.target.value
|
|
|
- });
|
|
|
- };
|
|
|
-
|
|
|
deployFC = () => {
|
|
|
let _this = this;
|
|
|
|
|
|
@@ -139,34 +75,129 @@ class TencentConfig extends Component {
|
|
|
};
|
|
|
|
|
|
render() {
|
|
|
- let {groupName, trialcase} = this.props;
|
|
|
+ let {userID, projectID, trialcase} = this.props;
|
|
|
return (
|
|
|
- <div>
|
|
|
- <div className="column-menu" onClick={this.props.goBack}>
|
|
|
- <Icon type="left" style={{color: '#3187FA'}}/> {groupName}
|
|
|
- </div>
|
|
|
- <div style={{padding: '30px'}}>
|
|
|
- <Row gutter={16}>
|
|
|
- <Col span={14}>
|
|
|
- <FormattedMessage id="API Group">{msg => <Card title={msg} style={{marginBottom: 10}}><APIGroupCard group={this.state.currentGroup} switchRegion={this.switchRegion} region={this.state.region} userID={this.props.userID} cloudID={this.props.cloudID} pass={this.pass} kind={this.props.kind} trialcase={this.props.trialcase}/></Card>}</FormattedMessage>
|
|
|
- <FormattedMessage id="fc Deploy">{msg => <Card title={msg} style={{marginBottom: 10}}><DeployCard deploy={this.state.currentDeploy} switchRegion={this.switchRegion} region={this.state.region} defalutName={this.props.defalutName} userID={this.props.userID} cloudID={this.props.cloudID} pass={this.pass} kind={this.props.kind} trialcase={this.props.trialcase}/></Card>}</FormattedMessage>
|
|
|
- <FormattedMessage id="API Path">{msg => <Card title={msg} style={{marginBottom: 10}}><APIPathCard path={this.state.currentPath} defalutName={this.props.defalutName} userID={this.props.userID} deployID={this.state.currentDeploy? this.state.currentDeploy.id : this.state.deployIdPassToPath} groupID={this.state.currentGroup? this.state.currentGroup.id : this.state.groupIdPassToPath} trialcase={this.props.trialcase}/></Card>}</FormattedMessage>
|
|
|
- <FormattedMessage id="Notification">{msg => <Card title={msg}><NotificationCard userID={this.props.userID} trialcase={this.props.trialcase}/></Card>}</FormattedMessage>
|
|
|
- </Col>
|
|
|
- <Col offset={2} span={6}>
|
|
|
- <Button type='primary' disabled={this.state.couldDeploy? '': 'disabled'} onClick={()=>this.deployFC()}><FormattedMessage id="deploy"/>!</Button>
|
|
|
- {
|
|
|
- this.state.couldDeploy?
|
|
|
- ''
|
|
|
- :
|
|
|
- <div>
|
|
|
- <span>if button is disabled, check your schema</span>
|
|
|
- </div>
|
|
|
- }
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <Query query={gql(GET_PROJECT)} variables={{id: projectID}}>
|
|
|
+ {
|
|
|
+ ({loading, error, data}) => {
|
|
|
+ if (loading) {
|
|
|
+ return <Spin style={{marginLeft: 3}}/>
|
|
|
+ }
|
|
|
+ if (error) {
|
|
|
+ return 'error!';
|
|
|
+ }
|
|
|
+
|
|
|
+ let group = '',
|
|
|
+ deploy = '',
|
|
|
+ path = '',
|
|
|
+ cloudID= 'tencent_CloudID';
|
|
|
+
|
|
|
+ if(data.project_by_id.cloud_id !== null && data.project_by_id.cloud_id.cloudName === 'tencent') {
|
|
|
+ group = data.project_by_id.apiGWGroup_id;
|
|
|
+ deploy = data.project_by_id.deploy_id;
|
|
|
+ cloudID = data.project_by_id.cloud_id.id;
|
|
|
+ }
|
|
|
+ let defaultName = data.project_by_id.projectName;
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <div style={{padding: '30px'}}>
|
|
|
+ <Row gutter={16}>
|
|
|
+ <Col span={14}>
|
|
|
+ <FormattedMessage id="fc Deploy">
|
|
|
+ {
|
|
|
+ msg =>
|
|
|
+ <Card title={msg} style={{marginBottom: 10}}>
|
|
|
+ <DeployCard
|
|
|
+ deploy={deploy}
|
|
|
+ switchRegion={this.switchRegion}
|
|
|
+ region={this.state.region}
|
|
|
+ defalutName={defaultName}
|
|
|
+ userID={this.props.userID}
|
|
|
+ cloudID={cloudID}
|
|
|
+ trialcase={this.props.trialcase}
|
|
|
+ pass={this.pass}
|
|
|
+ />
|
|
|
+ </Card>
|
|
|
+ }
|
|
|
+ </FormattedMessage>
|
|
|
+ <FormattedMessage id="API Group">
|
|
|
+ {
|
|
|
+ msg =>
|
|
|
+ <Card title={msg} style={{marginBottom: 10}}>
|
|
|
+ <APIGroupCard
|
|
|
+ group={group}
|
|
|
+ userID={this.props.userID}
|
|
|
+ switchRegion={this.switchRegion}
|
|
|
+ region={this.state.region}
|
|
|
+ cloudID={cloudID}
|
|
|
+ trialcase={this.props.trialcase}
|
|
|
+ pass={this.pass}
|
|
|
+ />
|
|
|
+ </Card>
|
|
|
+ }
|
|
|
+ </FormattedMessage>
|
|
|
+ <Query query={gql(SHOW_APIGWPATH)} variables={{apiGWGroup_id: data.project_by_id.apiGWGroup_id? data.project_by_id.apiGWGroup_id.id : ''}}>
|
|
|
+ {
|
|
|
+ ({loading, error, data}) => {
|
|
|
+ if (loading) {
|
|
|
+ return <Spin style={{marginLeft: 3}}/>
|
|
|
+ }
|
|
|
+ if (error) {
|
|
|
+ return 'error!';
|
|
|
+ }
|
|
|
+ if(data.apiGWPath_by_props.length>0)
|
|
|
+ path = data.apiGWPath_by_props[0];
|
|
|
+ return (
|
|
|
+ <FormattedMessage id="API Path">
|
|
|
+ {
|
|
|
+ msg =>
|
|
|
+ <Card title={msg} style={{marginBottom: 10}}>
|
|
|
+ <APIPathCard
|
|
|
+ path={path}
|
|
|
+ defalutName={defaultName}
|
|
|
+ userID={this.props.userID}
|
|
|
+ trialcase={this.props.trialcase}
|
|
|
+ deployID={deploy? deploy.id : this.state.deployIdPassToPath}
|
|
|
+ groupID={group? group.id : this.state.groupIdPassToPath}
|
|
|
+ />
|
|
|
+ </Card>
|
|
|
+ }
|
|
|
+ </FormattedMessage>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </Query>
|
|
|
+ <FormattedMessage id="Notification">
|
|
|
+ {
|
|
|
+ msg =>
|
|
|
+ <Card title={msg}>
|
|
|
+ <NotificationCard
|
|
|
+ userID={this.props.userID}
|
|
|
+ trialcase={this.props.trialcase}
|
|
|
+ />
|
|
|
+ </Card>
|
|
|
+ }
|
|
|
+ </FormattedMessage>
|
|
|
+ </Col>
|
|
|
+ <Col offset={2} span={6}>
|
|
|
+ <Button type='primary' disabled={this.state.couldDeploy? '': 'disabled'} onClick={()=>this.deployFC()}><FormattedMessage id="deploy"/>!</Button>
|
|
|
+ {
|
|
|
+ this.state.couldDeploy?
|
|
|
+ ''
|
|
|
+ :
|
|
|
+ <div>
|
|
|
+ <span>if button is disabled, check your schema</span>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </Query>
|
|
|
+
|
|
|
)
|
|
|
}
|
|
|
}
|
xy