|
|
@@ -1,38 +1,179 @@
|
|
|
import React, {Component} from 'react';
|
|
|
-import {Switch, Input, Icon} from 'antd';
|
|
|
+import {Switch, Input, Icon, Spin, Row, Col, message} from 'antd';
|
|
|
+import {GET_PROJECT, SHOW_APIGWPATH} from "../../../gql";
|
|
|
+import gql from "graphql-tag";
|
|
|
+import {Query} from "react-apollo";
|
|
|
+import copy from 'copy-to-clipboard';
|
|
|
|
|
|
class TencentResult extends Component {
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
this.state = {
|
|
|
- url: '1111',
|
|
|
- checked: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ let projectID = this.props.projectID ? this.props.projectID : 'ecommerce_projectID';
|
|
|
+ return (
|
|
|
+ <Query query={gql(GET_PROJECT)} variables={{id: projectID}}>
|
|
|
+ {
|
|
|
+ ({loading, error, data}) => {
|
|
|
+ if (loading) {
|
|
|
+ return <Spin style={{marginLeft: 3}}/>
|
|
|
+ }
|
|
|
+ if (error) {
|
|
|
+ return 'error!';
|
|
|
+ }
|
|
|
+ // console.log(data);
|
|
|
+ let group = data.project_by_id.apiGWGroup_id || {};
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ {
|
|
|
+ Object.keys(group).length !== 0 ?
|
|
|
+ <div>
|
|
|
+ <div className={'schema-name'}>服务管理</div>
|
|
|
+ <div className={'schema-table-list-title'}>
|
|
|
+ <Row>
|
|
|
+ <Col span={4}><span className={'schema-table-title'}>服务名</span></Col>
|
|
|
+ <Col span={10}><span className={'schema-table-title'}>默认域名</span></Col>
|
|
|
+ <Col span={3}><span className={'schema-table-title'}>前端类型</span></Col>
|
|
|
+ <Col span={4}><span className={'schema-table-title'}>发布状态</span></Col>
|
|
|
+ <Col span={3}><span className={'schema-table-title'}>操作</span></Col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+ <div className={'schema-table-list-content'}>
|
|
|
+ <Row>
|
|
|
+ <Col span={4}>
|
|
|
+ <span className={'schema-table-content'}>{group.serviceId}</span>
|
|
|
+ </Col>
|
|
|
+ <Col span={10}>
|
|
|
+ <span className={'schema-table-content'}>{group.defaultDomain} </span>
|
|
|
+ <Icon type="copy" theme="twoTone" onClick={() => {
|
|
|
+ copy(group.defaultDomain);
|
|
|
+ message.success('复制成功.');
|
|
|
+ }}/>
|
|
|
+ </Col>
|
|
|
+ <Col span={3}>
|
|
|
+ <span className={'schema-table-content'}>{group.frontType}</span>
|
|
|
+ </Col>
|
|
|
+ <Col span={4}>
|
|
|
+ <span className={'schema-table-content'}>{group.environmentName}</span>
|
|
|
+ </Col>
|
|
|
+ <Col span={3}>
|
|
|
+ <span className={'schema-table-content'}>
|
|
|
+ <SwitchStatus />
|
|
|
+ </span>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+ <div style={{marginTop: 30}}>
|
|
|
+ <div className={'schema-name'}>API 管理</div>
|
|
|
+ <APIGWPathResult groupID={group.id}/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ :
|
|
|
+ '尚未部署'
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </Query>
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export default TencentResult;
|
|
|
+
|
|
|
+class SwitchStatus extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state = {
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
return (
|
|
|
<div>
|
|
|
- <div style={{width: 300}}>
|
|
|
- <span>Tencent</span>
|
|
|
- <span>URL: </span>
|
|
|
- <Input
|
|
|
- placeholder="display your URL"
|
|
|
- prefix={<Icon type="copy"/>}
|
|
|
- value={this.state.url}
|
|
|
- onChange={() => {}}
|
|
|
- disabled={!this.state.checked}
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div style={{marginTop: 30}}>
|
|
|
- <span>fc switch </span>
|
|
|
- <Switch defaultChecked onChange={(checked) => {
|
|
|
- this.setState({checked})
|
|
|
- }}/>
|
|
|
- </div>
|
|
|
+ <Switch defaultChecked onChange={(checked) => {
|
|
|
+ this.setState({checked})
|
|
|
+ }}/>
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-export default TencentResult;
|
|
|
+class APIGWPathResult extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state = {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ let {groupID} = this.props;
|
|
|
+ return (
|
|
|
+ <Query query={gql(SHOW_APIGWPATH)} variables={{apiGWGroup_id: groupID}}>
|
|
|
+ {
|
|
|
+ ({loading, error, data}) => {
|
|
|
+ if (loading) {
|
|
|
+ return <Spin style={{marginLeft: 3}}/>
|
|
|
+ }
|
|
|
+ if (error) {
|
|
|
+ return 'error!';
|
|
|
+ }
|
|
|
+ let paths = data.apiGWPath_by_props || [];
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ {
|
|
|
+ Object.keys(paths).length !== 0 ?
|
|
|
+ <div>
|
|
|
+ <div className={'schema-table-list-title'}>
|
|
|
+ <Row>
|
|
|
+ <Col span={6}><span className={'schema-table-title'}>名称</span></Col>
|
|
|
+ <Col span={6}><span className={'schema-table-title'}>路径</span></Col>
|
|
|
+ <Col span={3}><span className={'schema-table-title'}>方法</span></Col>
|
|
|
+ <Col span={6}><span className={'schema-table-title'}>描述</span></Col>
|
|
|
+ <Col span={3}><span className={'schema-table-title'}>操作</span></Col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+ {
|
|
|
+ paths.map(path => (
|
|
|
+ <div key={path.apiGWPath} className={'schema-table-list-content'}>
|
|
|
+ <Row>
|
|
|
+ <Col span={6}>
|
|
|
+ <span className={'schema-table-content'}>{path.apiGWName}</span>
|
|
|
+ </Col>
|
|
|
+ <Col span={6}>
|
|
|
+ <span className={'schema-table-content'}>{path.apiGWPath}</span>
|
|
|
+ </Col>
|
|
|
+ <Col span={3}>
|
|
|
+ <span className={'schema-table-content'}>{path.requestMethod}</span>
|
|
|
+ </Col>
|
|
|
+ <Col span={6}>
|
|
|
+ <span className={'schema-table-content'}>{path.apiGWDesc}</span>
|
|
|
+ </Col>
|
|
|
+ <Col span={3}>
|
|
|
+ <span className={'schema-table-content name'}>删除</span>
|
|
|
+ <span> </span>
|
|
|
+ <span className={'schema-table-content name'}>调试</span>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+ ))
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ :
|
|
|
+ '路径不存在'
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </Query>
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|