Merge branch 'dev' of gitlab.corp.qunar.com:mfe/yapi into dev

client/containers/AddInterface/InterfaceTest/InterfaceTest.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { Button, Input } from 'antd'
+import { Button, Input, Select, Card } from 'antd'
 import { autobind } from 'core-decorators';
 import crossRequest from 'cross-request';
 import { withRouter } from 'react-router';
@@ -13,6 +13,8 @@ import {
 import './InterfaceTest.scss'
 
 const { TextArea } = Input;
+const InputGroup = Input.Group;
+const Option = Select.Option;
 
 @connect(
   state => ({
@@ -40,7 +42,7 @@ export default class InterfaceTest extends Component {
   }
 
   state = {
-    res: {},
+    res: '',
     header: {}
   }
 
@@ -57,9 +59,8 @@ export default class InterfaceTest extends Component {
     const { method, url, seqGroup, interfaceProject } = this.props;
     const { prd_host, basepath, protocol } = interfaceProject;
     const reqParams = JSON.parse(this.props.reqParams);
-    const headers = {}
-    let query = {};
 
+    const query = {};
     if (method === 'GET') {
       Object.keys(reqParams).forEach(key => {
         const value = typeof reqParams[key] === 'object' ? JSON.stringify(reqParams) : reqParams.toString();
@@ -67,8 +68,11 @@ export default class InterfaceTest extends Component {
       })
     }
 
+    const headers = {}
     seqGroup.forEach((headerItem) => {
-      headers[headerItem.name] = headerItem.value;
+      if (headerItem.name) {
+        headers[headerItem.name] = headerItem.value;
+      }
     })
 
     const href = URL.format({
@@ -94,10 +98,16 @@ export default class InterfaceTest extends Component {
 
   render () {
     const { method, url, seqGroup, interfaceName, interfaceProject } = this.props;
-    const { prd_host, basepath, protocol } = interfaceProject;
-    const reqParams = JSON.parse(this.props.reqParams);
-    let query = {};
+    const { prd_host, basepath, protocol, env } = interfaceProject;
+    const reqParams = this.props.reqParams ? JSON.parse(this.props.reqParams) : [];
+    const pathname = (basepath + url).replace(/\/+/g, '/');
 
+    const domains = [{name: 'prd', domain: protocol + '://' + prd_host}];
+    env.forEach(item => {
+      domains.push({name: item.name, domain: item.domain});
+    })
+
+    const query = {};
     if (method === 'GET') {
       Object.keys(reqParams).forEach(key => {
         const value = typeof reqParams[key] === 'object' ? JSON.stringify(reqParams[key]) : reqParams[key].toString();
@@ -105,10 +115,14 @@ export default class InterfaceTest extends Component {
       })
     }
 
-    const href = URL.format({
-      protocol: protocol || 'http',
-      host: prd_host,
-      pathname: (basepath + url).replace(/\/+/g, '/'),
+    const headers = {}
+    seqGroup.forEach((headerItem) => {
+      if (headerItem.name) {
+        headers[headerItem.name] = headerItem.value;
+      }
+    })
+
+    const search = URL.format({
       query
     });
 
@@ -117,45 +131,62 @@ export default class InterfaceTest extends Component {
       <div className="interface-test">
         <div className="interface-name">{interfaceName}</div>
         <div className="req-part">
-          <div className="req-row method">
-            METHOD：<Input value={method} disabled style={{display: 'inline-block', width: 200}} />
-          </div>
-          <div className="req-row url">
-            URL：<Input value={href} style={{display: 'inline-block', width: 800, margin: 10}} />
-            <Button onClick={this.testInterface} type="primary">发送</Button>
-          </div>
-          <div className="req-row headers">
-            HEADERS：
-            {
-              seqGroup.map((headerItem, index) => {
-                return (
-                  <div key={index}>
-                    <Input disabled value={headerItem.name} style={{display: 'inline-block', width: 200, margin: 10}} />{' = '}
-                    <Input value={headerItem.value} style={{display: 'inline-block', width: 200, margin: 10}} />
-                  </div>
-                )
-              })
-            }
-          </div>
-          <div className="req-row params">
-            请求参数：
-            {
-              Object.keys(reqParams).map((key, index) => {
-                const value = typeof reqParams[key] === 'object' ? JSON.stringify(reqParams[key]) : reqParams[key].toString();
-                return (
-                  <div key={index}>
-                    <Input disabled value={key} style={{display: 'inline-block', width: 200, margin: 10}} />{' = '}
-                    <Input value={value} style={{display: 'inline-block', width: 200, margin: 10}} />
-                  </div>
-                )
-              })
-            }
+          <div className="req-row href">
+            <InputGroup compact style={{display: 'inline-block', width: 680}}>
+              <Input value={method} disabled style={{display: 'inline-block', width: 80}} />
+              <Select defaultValue="prd" style={{display: 'inline-block', width: 300}}>
+                {
+                  domains.map((item, index) => (<Option value={item.name} key={index}>{item.domain}</Option>))
+                }
+              </Select>
+              <Input value={pathname+search} style={{display: 'inline-block', width: 300}} />
+            </InputGroup>
+            <Button onClick={this.testInterface} type="primary" style={{marginLeft: 10}}>发送</Button>
           </div>
+          <Card noHovering style={{marginTop: 10}} className={Object.keys(headers).length ? '' : 'hidden'}>
+            <div className="req-row headers">
+              HEADERS：
+              {
+                Object.keys(headers).map((key, index) => {
+                  return (
+                    <div key={index}>
+                      <Input disabled value={key} style={{display: 'inline-block', width: 200, margin: 10}} />{' = '}
+                      <Input value={headers[key]} style={{display: 'inline-block', width: 200, margin: 10}} />
+                    </div>
+                  )
+                })
+              }
+            </div>
+          </Card>
+          <Card noHovering style={{marginTop: 10}} className={Object.keys(reqParams).length ? '' : 'hidden'}>
+            <div className="req-row params">
+              请求参数：
+              {
+                Object.keys(reqParams).map((key, index) => {
+                  const value = typeof reqParams[key] === 'object' ? JSON.stringify(reqParams[key]) : reqParams[key].toString();
+                  return (
+                    <div key={index}>
+                      <Input disabled value={key} style={{display: 'inline-block', width: 200, margin: 10}} />{' = '}
+                      <Input value={value} style={{display: 'inline-block', width: 200, margin: 10}} />
+                    </div>
+                  )
+                })
+              }
+            </div>
+          </Card>
         </div>
-        <div className="res-part">
-          返回结果：
-          <TextArea value={JSON.stringify(this.state.res, 2)}></TextArea>
-        </div>
+        <Card noHovering style={{marginTop: 10}}>
+          <div className="res-part">
+            返回结果：
+            <div>
+              <TextArea
+                value={this.state.res ? JSON.stringify(this.state.res, 2) : ''}
+                style={{margin: 10}}
+                autosize={{ minRows: 2, maxRows: 6 }}
+              ></TextArea>
+            </div>
+          </div>
+        </Card>
       </div>
     )
   }

client/styles/common.scss

@@ -48,3 +48,7 @@ em {
     min-height:calc(100% - 2.47rem);
   }
 }
+
+.hidden {
+  display: none;
+}