init deploy page

src/components/common/deploy/Deploy.jsx

@@ -1,155 +1,60 @@
 import React, {Component} from 'react';
-import {Row, Col, Input, Spin, Button} from 'antd';
+import {Card} from 'antd';
+
+import TencentConfig from './tencent/TencentConfig';
+import AliConfig from './ali/AliConfig';
+import AmazonConfig from './amazon/AmazonConfig';
+import HuaweiConfig from './huawei/HuaweiConfig';
 
-import {Mutation, Query} from "react-apollo";
-import {SHOW_CLOUD, SHOW_DEPLOY, SHOW_APIGWGROUP} from "../../gql";
-import gql from "graphql-tag";
 import './index.css';
-import TencentDeploy from './tencent/TencentDeploy';
-import TencentAPIGroup from './tencent/TencentAPIGroup';
 
-const Search = Input.Search;
+const tabListNoTitle = [{
+    key: 'tencent',
+    tab: 'Tencent',
+}, {
+    key: 'aliyun',
+    tab: 'Aliyun',
+}, {
+    key: 'amazon',
+    tab: 'AWS',
+}];
+
+const contentListNoTitle = {
+    tencent: <TencentConfig/>,
+    aliyun: <AliConfig/>,
+    amazon: <AmazonConfig/>,
+};
 
 
 class Deploy extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            show: 'all',
-            deploy: '',
-            apiGroup: ''
+            cloud: 'tencent',
         };
     }
 
-
-    findDeploy = (id, data) => {
-        return () => {
-            this.setState({
-                show: 'deploy',
-                deploy: data.deploy_by_props.find(deploy => deploy.id === id)
-            })
-        };
-    };
-
-    findApiGroup = (id, data) => {
-        return () => {
-            this.setState({
-                show: 'api',
-                apiGroup: data.apiGWGroup_by_props.find(group => group.id === id)
-            })
-        };
-    };
-
-    reDisplayChoose = () => {
-        this.setState({
-            show: 'all'
-        })
-    };
-
-
     render() {
         let userID = this.props.userID;
         return (
             <div>
-                {
-                    this.state.show === 'all' ?
-                        <Query query={gql(SHOW_CLOUD)} variables={{user_id: userID}}>
-                            {
-                                ({loading, error, data}) => {
-                                    if (loading) {
-                                        return <Spin style={{marginLeft: 3}}/>
-                                    }
-                                    if (error) {
-                                        return 'error!';
-                                    }
-                                    return (
-                                        data.cloud_by_props.map(cloud => (
-                                            <div key={cloud.id} style={{marginBottom: 30}}>
-                                                <span className='cloud-name'>{cloud.cloudName}: {cloud.id}.</span>
-                                                <div style={{marginBottom: 15}}>
-                                                    <div>
-                                                        ID: <Input style={{width: 250}} value={cloud.secretId}/>
-                                                        Key: <Input style={{width: 250}}
-                                                                    value={cloud.secretKey}/>
-                                                    </div>
-                                                </div>
-
-                                                <Row>
-                                                    <Col span={12}>
-                                                        <b>DEPLOY</b>
-                                                        <Query query={gql(SHOW_DEPLOY)} variables={{cloud_id: cloud.id}}>
-                                                            {
-                                                                ({loading, error, data}) => {
-                                                                    if (loading) {
-                                                                        return <Spin style={{marginLeft: 3}}/>
-                                                                    }
-                                                                    if (error) {
-                                                                        return 'error!';
-                                                                    }
-                                                                    return (
-                                                                        data.deploy_by_props.map(deploy => (
-                                                                            <div key={deploy.id}>
-                                                                                <div>
-                                                                                    {deploy.id} - {deploy.functionName}
-                                                                                    <Button size="small"
-                                                                                            onClick={this.findDeploy(deploy.id, data)}
-                                                                                            type='primary'>Show
-                                                                                        me</Button>
-                                                                                </div>
-                                                                            </div>
-                                                                        ))
-                                                                    )
-                                                                }
-                                                            }
-                                                        </Query>
-                                                    </Col>
-                                                    <Col span={12}>
-                                                        <b>API</b>
-                                                        <Query query={gql(SHOW_APIGWGROUP)} variables={{cloud_id: cloud.id}}>
-                                                            {
-                                                                ({loading, error, data}) => {
-                                                                    if (loading) {
-                                                                        return <Spin style={{marginLeft: 3}}/>
-                                                                    }
-                                                                    if (error) {
-                                                                        return 'error!';
-                                                                    }
-                                                                    return (
-                                                                        data.apiGWGroup_by_props.map(apiGroup => (
-                                                                            <div key={apiGroup.id}>
-                                                                                <div>
-                                                                                    {apiGroup.id} - {apiGroup.groupName}
-                                                                                    <Button size="small"
-                                                                                            onClick={this.findApiGroup(apiGroup.id, data)}
-                                                                                            type='primary'>Show
-                                                                                        me</Button>
-                                                                                </div>
-                                                                            </div>
-                                                                        ))
-                                                                    )
-                                                                }
-                                                            }
-                                                        </Query>
-                                                    </Col>
-                                                </Row>
-                                            </div>
-                                        ))
-                                    );
-                                }
-                            }
-
-                        </Query>
-                        :
-                        this.state.show === 'deploy' ?
-                            <TencentDeploy reDisplayChoose={this.reDisplayChoose} deploy={this.state.deploy}/>
-                            :
-                            <TencentAPIGroup reDisplayChoose={this.reDisplayChoose} apiGroup={this.state.apiGroup}/>
-                }
+                <div>
+                    <Card
+                        style={{width: '100%'}}
+                        tabList={tabListNoTitle}
+                        activeTabKey={this.state.cloud}
+                        onTabChange={(cloud) => {
+                            this.setState({
+                                cloud
+                            })
+                        }}
+                    >
+                        {contentListNoTitle[this.state.cloud]}
+                    </Card>
+                </div>
             </div>
-
         )
     }
-
 }
 
 export default Deploy;

src/components/common/deploy/ali/AliConfig.jsx

@@ -0,0 +1,22 @@
+import React, {Component} from 'react';
+
+
+class AliConfig extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+        };
+    }
+
+
+
+    render() {
+        return (
+            <div>
+                aliyun
+            </div>
+        )
+    }
+}
+
+export default AliConfig;

src/components/common/deploy/amazon/AmazonConfig.js

@@ -0,0 +1,22 @@
+import React, {Component} from 'react';
+
+
+class AmazonConfig extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+        };
+    }
+
+
+
+    render() {
+        return (
+            <div>
+                amazon
+            </div>
+        )
+    }
+}
+
+export default AmazonConfig;

src/components/common/deploy/huawei/HuaweiConfig.jsx

@@ -0,0 +1,22 @@
+import React, {Component} from 'react';
+
+
+class HuaweiConfig extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+        };
+    }
+
+
+
+    render() {
+        return (
+            <div>
+                huawei
+            </div>
+        )
+    }
+}
+
+export default HuaweiConfig;

src/components/common/deploy/tencent/APIGroupCard.js

@@ -0,0 +1,23 @@
+
+import React, {Component} from 'react';
+
+
+class APIGroupCard extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+        };
+    }
+
+
+
+    render() {
+        return (
+            <div>
+                APIGroupCard
+            </div>
+        )
+    }
+}
+
+export default APIGroupCard;

src/components/common/deploy/tencent/APIPathCard.js

@@ -0,0 +1,23 @@
+
+import React, {Component} from 'react';
+
+
+class APIPathCard extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+        };
+    }
+
+
+
+    render() {
+        return (
+            <div>
+                APIPathCard
+            </div>
+        )
+    }
+}
+
+export default APIPathCard;

src/components/common/deploy/tencent/ConnectCard.js

@@ -0,0 +1,22 @@
+import React, {Component} from 'react';
+
+
+class ConnectCard extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+        };
+    }
+
+
+
+    render() {
+        return (
+            <div>
+                ConnectCard
+            </div>
+        )
+    }
+}
+
+export default ConnectCard;

src/components/common/deploy/tencent/DeployCard.js

@@ -0,0 +1,22 @@
+import React, {Component} from 'react';
+
+
+class DeployCard extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+        };
+    }
+
+
+
+    render() {
+        return (
+            <div>
+                DeployCard
+            </div>
+        )
+    }
+}
+
+export default DeployCard;

src/components/common/deploy/tencent/TencentConfig.js

@@ -0,0 +1,46 @@
+import React, {Component} from 'react';
+import {Row, Col, Card} from 'antd';
+import APIGroupCard from './APIGroupCard';
+import APIPathCard from './APIPathCard';
+import DeployCard from './DeployCard';
+import ConnectCard from './ConnectCard';
+
+
+class TencentConfig extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+        };
+    }
+
+
+
+    render() {
+        return (
+            <div>
+                <div style={{padding: '30px' }}>
+                    <Row gutter={16}>
+                        <Col span={12}>
+                            <Card title="Deploy"><DeployCard/></Card>
+                        </Col>
+                        <Col span={12}>
+                            <Card title="API Group" ><APIGroupCard/></Card>
+                        </Col>
+                    </Row>
+                </div>
+                <div style={{padding: '30px', paddingTop: '15px'}}>
+                    <Row gutter={16}>
+                        <Col span={12}>
+                            <Card title="API Path"><APIPathCard/></Card>
+                        </Col>
+                        <Col span={12}>
+                            <Card title="Connect" ><ConnectCard/></Card>
+                        </Col>
+                    </Row>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default TencentConfig;

src/components/common/deploy的副本/Deploy.jsx

@@ -0,0 +1,155 @@
+import React, {Component} from 'react';
+import {Row, Col, Input, Spin, Button} from 'antd';
+
+import {Mutation, Query} from "react-apollo";
+import {SHOW_CLOUD, SHOW_DEPLOY, SHOW_APIGWGROUP} from "../../gql";
+import gql from "graphql-tag";
+import './index.css';
+import TencentDeploy from './tencent/TencentDeploy';
+import TencentAPIGroup from './tencent/TencentAPIGroup';
+
+const Search = Input.Search;
+
+
+class Deploy extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            show: 'all',
+            deploy: '',
+            apiGroup: ''
+        };
+    }
+
+
+    findDeploy = (id, data) => {
+        return () => {
+            this.setState({
+                show: 'deploy',
+                deploy: data.deploy_by_props.find(deploy => deploy.id === id)
+            })
+        };
+    };
+
+    findApiGroup = (id, data) => {
+        return () => {
+            this.setState({
+                show: 'api',
+                apiGroup: data.apiGWGroup_by_props.find(group => group.id === id)
+            })
+        };
+    };
+
+    reDisplayChoose = () => {
+        this.setState({
+            show: 'all'
+        })
+    };
+
+
+    render() {
+        let userID = this.props.userID;
+        return (
+            <div>
+                {
+                    this.state.show === 'all' ?
+                        <Query query={gql(SHOW_CLOUD)} variables={{user_id: userID}}>
+                            {
+                                ({loading, error, data}) => {
+                                    if (loading) {
+                                        return <Spin style={{marginLeft: 3}}/>
+                                    }
+                                    if (error) {
+                                        return 'error!';
+                                    }
+                                    return (
+                                        data.cloud_by_props.map(cloud => (
+                                            <div key={cloud.id} style={{marginBottom: 30}}>
+                                                <span className='cloud-name'>{cloud.cloudName}: {cloud.id}.</span>
+                                                <div style={{marginBottom: 15}}>
+                                                    <div>
+                                                        ID: <Input style={{width: 250}} value={cloud.secretId}/>
+                                                        Key: <Input style={{width: 250}}
+                                                                    value={cloud.secretKey}/>
+                                                    </div>
+                                                </div>
+
+                                                <Row>
+                                                    <Col span={12}>
+                                                        <b>DEPLOY</b>
+                                                        <Query query={gql(SHOW_DEPLOY)} variables={{cloud_id: cloud.id}}>
+                                                            {
+                                                                ({loading, error, data}) => {
+                                                                    if (loading) {
+                                                                        return <Spin style={{marginLeft: 3}}/>
+                                                                    }
+                                                                    if (error) {
+                                                                        return 'error!';
+                                                                    }
+                                                                    return (
+                                                                        data.deploy_by_props.map(deploy => (
+                                                                            <div key={deploy.id}>
+                                                                                <div>
+                                                                                    {deploy.id} - {deploy.functionName}
+                                                                                    <Button size="small"
+                                                                                            onClick={this.findDeploy(deploy.id, data)}
+                                                                                            type='primary'>Show
+                                                                                        me</Button>
+                                                                                </div>
+                                                                            </div>
+                                                                        ))
+                                                                    )
+                                                                }
+                                                            }
+                                                        </Query>
+                                                    </Col>
+                                                    <Col span={12}>
+                                                        <b>API</b>
+                                                        <Query query={gql(SHOW_APIGWGROUP)} variables={{cloud_id: cloud.id}}>
+                                                            {
+                                                                ({loading, error, data}) => {
+                                                                    if (loading) {
+                                                                        return <Spin style={{marginLeft: 3}}/>
+                                                                    }
+                                                                    if (error) {
+                                                                        return 'error!';
+                                                                    }
+                                                                    return (
+                                                                        data.apiGWGroup_by_props.map(apiGroup => (
+                                                                            <div key={apiGroup.id}>
+                                                                                <div>
+                                                                                    {apiGroup.id} - {apiGroup.groupName}
+                                                                                    <Button size="small"
+                                                                                            onClick={this.findApiGroup(apiGroup.id, data)}
+                                                                                            type='primary'>Show
+                                                                                        me</Button>
+                                                                                </div>
+                                                                            </div>
+                                                                        ))
+                                                                    )
+                                                                }
+                                                            }
+                                                        </Query>
+                                                    </Col>
+                                                </Row>
+                                            </div>
+                                        ))
+                                    );
+                                }
+                            }
+
+                        </Query>
+                        :
+                        this.state.show === 'deploy' ?
+                            <TencentDeploy reDisplayChoose={this.reDisplayChoose} deploy={this.state.deploy}/>
+                            :
+                            <TencentAPIGroup reDisplayChoose={this.reDisplayChoose} apiGroup={this.state.apiGroup}/>
+                }
+            </div>
+
+        )
+    }
+
+}
+
+export default Deploy;

src/components/common/deploy的副本/index.css

@@ -0,0 +1,46 @@
+.current {
+    background-color: #0F83E8;
+    color: white;
+    text-align: center;
+    height: 50px;
+    line-height: 50px;
+    margin-top: 3px;
+}
+
+.title {
+    font-weight: bold;
+    font-size: 16px;
+    margin: 10px 0 0 5px;
+}
+
+p.show {
+    margin: 5px 0 3px 10px;
+    cursor: pointer;
+}
+
+.table-title {
+    font-weight: bold;
+    font-size: large;
+    display: block;
+    height: 35px;
+}
+
+.table-title::before {
+    content: '|';
+    display: inline-block;
+    font-weight: 900;
+    color: #0B7FC7;
+    /*border-right: */
+}
+
+.vice-title {
+    width: 120px;
+    display: inline-block;
+}
+
+.cloud-name {
+    font-weight: bold;
+    font-size: large;
+    display: block;
+    height: 35px;
+}