|
|
@@ -2,13 +2,14 @@ import React, {Component} from 'react';
|
|
|
import {FormattedMessage} from 'react-intl';
|
|
|
import {Alert, Icon, Spin, Row, Col, message, Button} from 'antd';
|
|
|
import {
|
|
|
- SHOW_APIGROUP
|
|
|
+ SHOW_APIGROUP, UPDATE_APIGROUP
|
|
|
} from "../../../gql";
|
|
|
import {request} from 'graphql-request'
|
|
|
import copy from 'copy-to-clipboard';
|
|
|
import axios from 'axios';
|
|
|
-import QRCode from 'qrcode.react';
|
|
|
import {graphqlUrl} from "../../../config";
|
|
|
+import {Query, Mutation} from "react-apollo";
|
|
|
+import gql from "graphql-tag";
|
|
|
|
|
|
axios.defaults.withCredentials = true;
|
|
|
|
|
|
@@ -17,37 +18,52 @@ class TencentDeploy extends Component {
|
|
|
super(props);
|
|
|
this.state = {
|
|
|
userID: props.userID,
|
|
|
- url: props.url,
|
|
|
- show: false,
|
|
|
- deployed: []
|
|
|
+ url: props.url
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- componentWillMount() {
|
|
|
- this._isMounted = true;
|
|
|
- let {userID} = this.state;
|
|
|
- if (userID !== '') {
|
|
|
- request(graphqlUrl, SHOW_APIGROUP, {user_id: userID}).then(res => {
|
|
|
- let allDeployed = res.apiGWGroupbyprops;
|
|
|
- let deployed = allDeployed.filter(deployed =>
|
|
|
- deployed.cloud_id.cloudName === 'tencent'
|
|
|
- );
|
|
|
- if(this._isMounted) {
|
|
|
- this.setState({
|
|
|
- deployed,
|
|
|
- show: true
|
|
|
- })
|
|
|
+ render() {
|
|
|
+ let {userID, url} = this.state;
|
|
|
+ return (
|
|
|
+ <Query query={gql(SHOW_APIGROUP)} variables={{user_id: userID, status: ''}}>
|
|
|
+ {
|
|
|
+ ({loading, error, data}) => {
|
|
|
+ if (loading) {
|
|
|
+ return <Spin className='login-nickname'/>
|
|
|
+ }
|
|
|
+ if (error) {
|
|
|
+ return 'error!';
|
|
|
+ }
|
|
|
+ let allDeployed = data.apiGWGroupbyprops;
|
|
|
+ let deployed = allDeployed.filter(deployed =>
|
|
|
+ deployed.cloud_id.cloudName === 'tencent'
|
|
|
+ );
|
|
|
+ return (
|
|
|
+ <TencentDeployRender
|
|
|
+ deployed={deployed}
|
|
|
+ url={url}
|
|
|
+ userID={userID}
|
|
|
+ />
|
|
|
+ )
|
|
|
+ }
|
|
|
}
|
|
|
- })
|
|
|
- }
|
|
|
+ </Query>
|
|
|
+ )
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- componentWillUnmount() {
|
|
|
- this._isMounted = false;
|
|
|
+class TencentDeployRender extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state = {
|
|
|
+ userID: props.userID,
|
|
|
+ url: props.url
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
- let {userID, url, deployed, show} = this.state;
|
|
|
+ let {userID, url} = this.state;
|
|
|
+ let {deployed} = this.props;
|
|
|
let regexp = new RegExp(userID + '_');
|
|
|
return (
|
|
|
<div>
|
|
|
@@ -98,60 +114,52 @@ class TencentDeploy extends Component {
|
|
|
<div className={'schema-name'}><FormattedMessage id='service manage'/></div>
|
|
|
<div className={'schema-table-list-title'}>
|
|
|
<Row>
|
|
|
- <Col span={4}><span className={'schema-table-title'}><FormattedMessage
|
|
|
+ <Col span={5}><span className={'schema-table-title'}><FormattedMessage
|
|
|
id='groupName'/></span></Col>
|
|
|
- <Col span={10}><span className={'schema-table-title'}><FormattedMessage
|
|
|
+ <Col span={15}><span className={'schema-table-title'}><FormattedMessage
|
|
|
id='defaultDomain'/></span></Col>
|
|
|
- <Col span={6}><span className={'schema-table-title'}><FormattedMessage
|
|
|
- id='qrcode'/></span></Col>
|
|
|
<Col span={4}><span className={'schema-table-title'}><FormattedMessage
|
|
|
id='operation'/></span></Col>
|
|
|
</Row>
|
|
|
</div>
|
|
|
- {
|
|
|
- show ?
|
|
|
- <div className={'schema-table-list-content'}>
|
|
|
- {
|
|
|
- deployed.map(deploy => (
|
|
|
- <Row key={deploy.id}>
|
|
|
- <Col span={4}>
|
|
|
- <span className={'schema-table-content'}>{deploy.groupName.replace(regexp, '')}</span>
|
|
|
- </Col>
|
|
|
- <Col span={10}>
|
|
|
- <span className={'schema-table-content'}>{`http://${deploy.defaultDomain}/test`} </span>
|
|
|
- <Icon type="copy" theme="twoTone" onClick={() => {
|
|
|
- copy(`http://${deploy.defaultDomain}/test`);
|
|
|
- message.success('复制成功.');
|
|
|
- }}/>
|
|
|
- </Col>
|
|
|
- <Col span={6}>
|
|
|
- <QRCode
|
|
|
- value={deploy.userDomain ? `http://${deploy.userDomain}` : `http://${deploy.defaultDomain}/test`}
|
|
|
- size={128}
|
|
|
- includeMargin={true}
|
|
|
- />
|
|
|
- </Col>
|
|
|
- <Col span={4}>
|
|
|
- <Button type={'danger'} size={'small'}
|
|
|
- style={{marginTop: 10}}><FormattedMessage id='delete'/></Button>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- ))
|
|
|
- }
|
|
|
- {
|
|
|
- deployed.length === 0 ?
|
|
|
- <Row>
|
|
|
- <Col span={15} offset={5}>
|
|
|
+
|
|
|
+ <div className={'schema-table-list-content'}>
|
|
|
+ {
|
|
|
+ deployed.map(deploy => (
|
|
|
+ <Row key={deploy.id}>
|
|
|
+ <Col span={5}>
|
|
|
+ <span
|
|
|
+ className={'schema-table-content'}>{deploy.groupName.replace(regexp, '')}</span>
|
|
|
+ </Col>
|
|
|
+ <Col span={15}>
|
|
|
+ <span
|
|
|
+ className={'schema-table-content'}>{`http://${deploy.defaultDomain}/test`} </span>
|
|
|
+ <Icon type="copy" theme="twoTone" onClick={() => {
|
|
|
+ copy(`http://${deploy.defaultDomain}/test`);
|
|
|
+ message.success('复制成功.');
|
|
|
+ }}/>
|
|
|
+ </Col>
|
|
|
+ <Col span={4}>
|
|
|
+ <DeleteButton
|
|
|
+ groupID={deploy.id}
|
|
|
+ userID={userID}
|
|
|
+ />
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ ))
|
|
|
+ }
|
|
|
+ {
|
|
|
+ deployed.length === 0 ?
|
|
|
+ <Row>
|
|
|
+ <Col span={15} offset={5}>
|
|
|
<span className={'schema-table-content'}><FormattedMessage
|
|
|
id='nothing'/> </span>
|
|
|
- </Col>
|
|
|
- </Row> :
|
|
|
- ''
|
|
|
- }
|
|
|
- </div>
|
|
|
- :
|
|
|
- <Spin/>
|
|
|
- }
|
|
|
+ </Col>
|
|
|
+ </Row> :
|
|
|
+ ''
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+
|
|
|
|
|
|
</div>
|
|
|
|
|
|
@@ -161,4 +169,39 @@ class TencentDeploy extends Component {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-export default TencentDeploy;
|
|
|
+export default TencentDeploy;
|
|
|
+
|
|
|
+class DeleteButton extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state = {}
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ let {groupID, userID} = this.props;
|
|
|
+ return (
|
|
|
+ <Mutation
|
|
|
+ mutation={gql(UPDATE_APIGROUP)}
|
|
|
+ refetchQueries={[{query: gql(SHOW_APIGROUP), variables: {user_id: userID, status: ''}}]}
|
|
|
+ >
|
|
|
+ {(update_apiGWGroup, {loading, error}) => {
|
|
|
+ if (loading)
|
|
|
+ return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
|
|
|
+ if (error)
|
|
|
+ return 'error';
|
|
|
+ let varObj = {
|
|
|
+ id: groupID,
|
|
|
+ status: 'deleted',
|
|
|
+ updatedAt: new Date().getTime()
|
|
|
+ };
|
|
|
+ console.log(varObj);
|
|
|
+ return (
|
|
|
+ <Button type={'danger'} size={'small'} style={{marginTop: 10}} onClick={() => {
|
|
|
+ update_apiGWGroup({variables: varObj})
|
|
|
+ }}><FormattedMessage id='delete'/></Button>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Mutation>
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|