re

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

@@ -1,399 +0,0 @@
-import React, {Component} from 'react';
-import {Input, Collapse, Button, Radio, Icon, Tooltip, Spin} from 'antd';
-import {ADD_APIGROUP, GET_PROJECT, UPDATE_APIGROUP, UPDATE_PROJECT_GROUP} from "../../../../gql";
-import {request} from 'graphql-request'
-import {idGen} from "../../../../func";
-import {graphqlUrl} from "../../../../config";
-import {manageUsers} from "../../../../config";
-import {FormattedMessage} from 'react-intl';
-import {Query} from "react-apollo";
-import gql from "graphql-tag";
-
-const Panel = Collapse.Panel;
-
-// 如需改变显示，请在此处 value 处更改
-// 如需添加中文，请在此处 value 处添加
-// eg: 'xxxx': <F..  id='xxx'/>
-const valueToKey = {
-    'groupName': 'groupName',
-    'environmentName': 'environmentName',
-    'defaultDomain': 'defaultDomain',
-    'frontType': 'frontType',
-    'userDomain': 'userDomain',
-    'userStatus': 'userStatus',
-    'region': 'region',
-};
-
-const toolTipTitle = {
-    'groupName': 'its groupName',
-    'environmentName': 'its environmentName',
-    'defaultDomain': 'its defaultDomain',
-    'frontType': 'its frontType',
-    'userDomain': 'its userDomain',
-    'userStatus': 'its userStatus',
-    'region': 'its region',
-};
-
-const youMustFill = {
-    'groupName': true,
-    'environmentName': true,
-    'defaultDomain': true,
-    'frontType': true,
-    'userDomain': false,
-    'userStatus': true,
-    'region': true,
-};
-
-const removePrefix = (prefix, value) => {
-    let r = new RegExp(prefix);
-    return value.replace(r, '');
-};
-
-const shiftPrefix = (prefix, value) => {
-    value = removePrefix(prefix, value);
-    return prefix + value;
-};
-
-class APIGroupCard extends Component {
-    constructor(props) {
-        super(props);
-        if (props.group !== '' && props.group !== null) {
-            let {groupName, environmentName, defaultDomain, frontType, userDomain, userStatus, region} = props.group;
-            this.state = {
-                showOK: false,
-                groupName,
-                environmentName,
-                defaultDomain,
-                frontType,
-                userDomain,
-                userStatus,
-                groupRegion: region
-            }
-        } else {
-            this.state = {
-                showOK: false,
-                groupName: 'graphql_endpoint',
-                environmentName: 'test',
-                defaultDomain: '',
-                frontType: 'http&https',
-                userDomain: '',
-                userStatus: 'open',
-                groupRegion: props.region === '' ? 'ap-beijing' : props.region,
-            };
-        }
-    }
-
-    componentWillReceiveProps(next) {
-        if (next.group !== '' && next.group !== null) {
-            let {groupName, environmentName, defaultDomain, frontType, userDomain, userStatus, region} = next.group;
-            this.setState({
-                groupName,
-                environmentName,
-                defaultDomain,
-                frontType,
-                userDomain,
-                userStatus,
-                groupRegion: next.region === '' ? region : next.region
-            })
-        } else {
-            this.setState({
-                groupName: 'graphql_endpoint',
-                environmentName: 'test',
-                defaultDomain: '',
-                frontType: 'http&https',
-                userDomain: '',
-                userStatus: 'open',
-                groupRegion: next.region === '' ? 'ap-beijing' : next.region
-            });
-        }
-    };
-
-    switchConfig = (label) => {
-        return (e) => {
-            this.setState({
-                [label]: e.target.value
-            })
-        };
-    };
-
-    ok = (id) => {
-        let {userStatus, userDomain, groupName, groupRegion, frontType, environmentName} = this.state;
-        let region = shiftPrefix('ap-', groupRegion);
-        let varObj = {
-            id,
-            cloud_id: this.props.cloudID,
-            user_id: this.props.userID,
-            userStatus,
-            userDomain,
-            groupName,
-            frontType,
-            region,
-            environmentName,
-            defaultDomain: '',
-            status: '',
-            serviceId: '',
-            createdAt: new Date().getTime(),
-            updatedAt: ''
-        };
-        if (this.props.group === '') {
-            request(graphqlUrl, ADD_APIGROUP, varObj).then(
-                data => {
-                    if (data.create_apiGWGroup !== null) {
-                        this.setState({
-                            showOK: true
-                        });
-                        // 写回 project
-                        request(graphqlUrl, UPDATE_PROJECT_GROUP, {
-                            id: this.props.projectID,
-                            updatedAt: new Date().getTime(),
-                            apiGWGroup_id: id
-                        }).then(data => {
-                            if (data.update_project !== null)
-                                this.props.stepByStep(2);
-                        });
-                    }
-                    setTimeout(() => {
-                        this.setState({
-                            showOK: false
-                        })
-                    }, 1500)
-                }
-            )
-        } else {
-            let {userStatus, userDomain, groupName, groupRegion, frontType, environmentName} = this.state;
-            let region = shiftPrefix('ap-', groupRegion);
-            let varObj = {
-                id: this.props.group.id,
-                userStatus,
-                userDomain,
-                groupName,
-                frontType,
-                region,
-                environmentName,
-                updatedAt: new Date().getTime()
-            };
-            request(graphqlUrl, UPDATE_APIGROUP, varObj).then(
-                data => {
-                    if (data.update_apiGWGroup !== null) {
-                        this.setState({
-                            showOK: true
-                        });
-                        this.props.stepByStep(2);
-                    }
-                    setTimeout(() => {
-                        this.setState({
-                            showOK: false
-                        })
-                    }, 1500)
-                }
-            )
-        }
-    };
-
-    render() {
-        const customPanelStyle = {
-            background: '#f7f7f7',
-            borderRadius: 4,
-            marginBottom: 24,
-            border: 0,
-            overflow: 'hidden',
-        };
-
-        return (
-            <Query query={gql(GET_PROJECT)} variables={{id: this.props.projectID}}>
-                {
-                    ({loading, error, data}) => {
-                        if (loading) {
-                            return <Spin style={{marginLeft: 3}}/>
-                        }
-                        if (error) {
-                            return 'error!';
-                        }
-                        return (
-                            <div>
-                                <div style={{marginBottom: 10}}>
-                                    <span className='vice-title'>
-                                        {
-                                            youMustFill['groupName'] ?
-                                                <span
-                                                    style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
-                                                :
-                                                ''
-                                        }
-                                        <FormattedMessage id={valueToKey['groupName']}/>
-                                        &nbsp;
-                                        <Tooltip placement="top" title={toolTipTitle['groupName']}>
-                                            <Icon type="question-circle"/>
-                                        </Tooltip>
-                                    </span>
-                                    <Input value={this.state.groupName} style={{width: 400}}
-                                           onChange={this.switchConfig('groupName')}/>
-                                </div>
-
-                                <div style={{marginBottom: 10}}>
-                                    <span className='vice-title'>
-                                        {
-                                            youMustFill['region'] ?
-                                                <span
-                                                    style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
-                                                :
-                                                ''
-                                        }
-                                        <FormattedMessage id={valueToKey['region']}/>
-                                        &nbsp;
-                                        <Tooltip placement="top" title={toolTipTitle['region']}>
-                                            <Icon type="question-circle"/>
-                                        </Tooltip>
-                                    </span>
-                                    <Radio.Group onChange={(e) => {
-                                        // 如果不想一变所有都变，就将 onchange 改成
-                                        // onChange={this.switchConfig('groupRegion')}
-                                        this.props.switchRegion(e);
-                                    }} value={removePrefix('ap-', this.state.groupRegion)} buttonStyle="solid">
-                                        <Radio.Button value="guangzhou"><FormattedMessage id="Guangzhou"/></Radio.Button>
-                                        <Radio.Button value="shanghai"><FormattedMessage id="Shanghai"/></Radio.Button>
-                                        <Radio.Button value="beijing"><FormattedMessage id="Beijing"/></Radio.Button>
-                                        <Radio.Button value="chengdu"><FormattedMessage id="Chengdu"/></Radio.Button>
-                                    </Radio.Group>
-                                </div>
-
-                                <div style={{marginBottom: 10}}>
-                                    <span className='vice-title'>
-                                        {
-                                            youMustFill['environmentName'] ?
-                                                <span
-                                                    style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
-                                                :
-                                                ''
-                                        }
-                                        <FormattedMessage id={valueToKey['environmentName']}/>
-                                        &nbsp;
-                                        <Tooltip placement="top" title={toolTipTitle['environmentName']}>
-                                            <Icon type="question-circle"/>
-                                        </Tooltip>
-                                    </span>
-                                    <Radio.Group onChange={this.switchConfig('environmentName')}
-                                                 defaultValue={this.state.environmentName}
-                                                 buttonStyle="solid">
-                                        <Radio.Button value="test"><FormattedMessage id="test"/></Radio.Button>
-                                        <Radio.Button value="prepub"><FormattedMessage id="prepub"/></Radio.Button>
-                                        <Radio.Button value="release"><FormattedMessage id="release"/></Radio.Button>
-                                    </Radio.Group>
-                                </div>
-                                <Collapse bordered={false}>
-                                    <Panel header={<FormattedMessage id="Want more options?"/>}
-                                           style={customPanelStyle}>
-
-                                        <div style={{marginBottom: 10}}>
-                                            <span className='vice-title'>
-                                                {
-                                                    youMustFill['frontType'] ?
-                                                        <span style={{
-                                                            color: 'red',
-                                                            display: 'inline',
-                                                            marginRight: 10
-                                                        }}>*</span>
-                                                        :
-                                                        ''
-                                                }
-                                                <FormattedMessage id={valueToKey['frontType']}/>
-                                                &nbsp;
-                                                <Tooltip placement="top" title={toolTipTitle['frontType']}>
-                                                    <Icon type="question-circle"/>
-                                                </Tooltip>
-                                            </span>
-                                            <Radio.Group onChange={this.switchConfig('frontType')}
-                                                         defaultValue={this.state.frontType}
-                                                         buttonStyle="solid">
-                                                <Radio.Button value="http">http</Radio.Button>
-                                                <Radio.Button value="https">https</Radio.Button>
-                                                <Radio.Button value="http&https">http&https</Radio.Button>
-                                            </Radio.Group>
-                                        </div>
-                                        {/*<div style={{marginBottom: 10}}>*/}
-                                        {/*<span className='vice-title'>{valueToKey['defaultDomain']}*/}
-                                        {/*&nbsp;*/}
-                                        {/*<Tooltip placement="top" title={toolTipTitle['defaultDomain']}>*/}
-                                        {/*<Icon type="question-circle"/>*/}
-                                        {/*</Tooltip>*/}
-                                        {/*</span>*/}
-                                        {/*<Input value={this.state.defaultDomain} style={{width: 400}} disabled/>*/}
-                                        {/*</div>*/}
-
-                                        <div style={{marginBottom: 10}}>
-                                            <span className='vice-title'>
-                                                {
-                                                    youMustFill['userDomain'] ?
-                                                        <span style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
-                                                        :
-                                                        ''
-                                                }
-                                                <FormattedMessage id={valueToKey['userDomain']}/>
-                                                &nbsp;
-                                                <Tooltip placement="top" title={toolTipTitle['userDomain']}>
-                                                    <Icon type="question-circle"/>
-                                                </Tooltip>
-                                            </span>
-                                            <Input value={this.state.userDomain} style={{width: 400}}
-                                                   onChange={this.switchConfig('userDomain')}/>
-                                        </div>
-                                        {/*<div style={{marginBottom: 10}}>*/}
-                                        {/*<span className='vice-title'>{valueToKey['userStatus']}*/}
-                                        {/*&nbsp;*/}
-                                        {/*<Tooltip placement="top" title={toolTipTitle['userStatus']}>*/}
-                                        {/*<Icon type="question-circle"/>*/}
-                                        {/*</Tooltip>*/}
-                                        {/*</span>*/}
-                                        {/*<Radio.Group onChange={this.switchConfig('userStatus')} defaultValue={this.state.userStatus}*/}
-                                        {/*buttonStyle="solid">*/}
-                                        {/*<Radio.Button value="open">open</Radio.Button>*/}
-                                        {/*<Radio.Button value="close">close</Radio.Button>*/}
-                                        {/*</Radio.Group>*/}
-                                        {/*</div>*/}
-                                    </Panel>
-                                </Collapse>
-                                {
-                                    manageUsers.includes(this.props.userID) ?
-                                        <div>
-                                            <Button onClick={() => {
-                                                const id = idGen('group');
-                                                this.ok(id);
-                                                this.props.pass(id, 'group');
-                                            }} type='primary'><FormattedMessage id="save"/></Button>
-                                            {
-                                                this.state.showOK === true ?
-                                                    <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
-                                                    :
-                                                    ''
-                                            }
-                                        </div>
-                                        :
-                                        this.props.trialcase ?
-                                            ''
-                                            :
-                                            <div>
-                                                <Button onClick={() => {
-                                                    const id = idGen('group');
-                                                    this.ok(id);
-                                                    this.props.pass(id, 'group');
-                                                }} type='primary'><FormattedMessage id="save"/></Button>
-                                                {
-                                                    this.state.showOK === true ?
-                                                        <Icon type="check-circle" theme="twoTone"
-                                                              twoToneColor="#52c41a"/>
-                                                        :
-                                                        ''
-                                                }
-                                            </div>
-                                }
-                            </div>
-                        )
-                    }
-                }
-            </Query>
-
-        )
-    }
-}
-
-export default APIGroupCard;

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

@@ -1,17 +1,16 @@
 import React, {Component} from 'react';
 import {Row, Col, Card, Button, Spin, Alert, Steps, Progress} from 'antd';
 import axios from 'axios';
-import APIGroupCard from './APIGroupCard';
-import APIPathCard from './APIPathCard';
-import DeployCard from './DeployCard';
-import NotificationCard from './NotificationCard';
+import APIGroupCardFetch from './apiGroupCard/APIGroupCardFetch';
+import APIPathCardFetch from './apiPathCard/APIPathCardFetch';
+import DeployCardFetch from './deployCard/DeployCardFetch';
+import NotificationCard from './notificationCard/NotificationCard';
 
-import {SHOW_APIGWPATH, GET_PROJECT} from "../../../../gql";
+import {GET_PROJECT, SHOW_APIGWPATH} from "../../../../gql";
 import {deployUrl, graphqlUrl} from "../../../../config";
 import {FormattedMessage} from 'react-intl';
-import gql from "graphql-tag";
-import {Query} from "react-apollo";
 import {request} from 'graphql-request'
+
 const Step = Steps.Step;
 
 class TencentConfig extends Component {
@@ -36,7 +35,11 @@ class TencentConfig extends Component {
             data => {
                 let dataProject = data.project_by_id;
                 if (dataProject !== null) {
-                    switch(dataProject.projectStatus) {
+                    this.setState({
+                        schemaState: dataProject.schema_id.schemaState,
+                        projectType: dataProject.projectType
+                    });
+                    switch (dataProject.projectStatus) {
                         case 'deployed':
                             this.setState({
                                 currentStep: 5,
@@ -98,7 +101,11 @@ class TencentConfig extends Component {
             data => {
                 let dataProject = data.project_by_id;
                 if (dataProject !== null) {
-                    switch(dataProject.projectStatus) {
+                    this.setState({
+                        schemaState: dataProject.schema_id.schemaState,
+                        projectType: dataProject.projectType
+                    });
+                    switch (dataProject.projectStatus) {
                         case 'deployed':
                             this.setState({
                                 currentStep: 5,
@@ -137,7 +144,7 @@ class TencentConfig extends Component {
                             break;
                     }
                 } else {
-                    console.log('peoject 没存 status');
+                    console.log('project 没存 status');
                 }
             }
         )
@@ -166,43 +173,64 @@ class TencentConfig extends Component {
         }
     };
 
-    deployFC = (schema, deploy, api, group) => {
-        console.log('schema', schema);
-        console.log('deploy', deploy);
-        console.log('api', api);
-        console.log('group', group);
-        if (schema && deploy && api && group) {
-            console.log('deploying');
-            this.setState({
-                deploying: 'deploying'
-            });
-            axios.get(`${deployUrl}`,
-                {
-                    params: {
-                        'cloud-id': 'tencent_CloudID',
-                        'cloud-name': 'tencent',
-                        schema,
-                        deploy,
-                        api,
-                        group
-                    }
-                })
-                .then((res) => {
-                    console.log('deploy res', res);
-                    this.setState({
-                        deploying: 'finished'
-                    })
-                })
-                .catch((err) => {
-                    this.setState({
-                        deploying: 'error'
-                    });
-                    console.log('err', err);
-                    console.log('err.response', err.response);
-                    console.log('err.response.data', err.response.data);
-                });
-        }
-
+    deployFC = () => {
+        request(graphqlUrl, GET_PROJECT, {id: this.props.projectID}).then(
+            data => {
+                let dataProject = data.project_by_id;
+                if (dataProject !== null) {
+                    let schema = dataProject.schema_id.id;
+                    let deploy = dataProject.deploy_id.id;
+                    let group = dataProject.apiGWGroup_id.id;
+                    request(graphqlUrl, SHOW_APIGWPATH, {apiGWGroup_id: group}).then(
+                        data => {
+                            if(data.apiGWPath_by_props !== null) {
+                                console.log(data);
+                                let api = data.apiGWPath_by_props[0].id;
+                                console.log('schema', schema);
+                                console.log('deploy', deploy);
+                                console.log('api', api);
+                                console.log('group', group);
+                                if (schema && deploy && api && group) {
+                                    console.log('deploying');
+                                    this.setState({
+                                        deploying: 'deploying'
+                                    });
+                                    axios.get(`${deployUrl}`,
+                                        {
+                                            params: {
+                                                'cloud-id': 'tencent_CloudID',
+                                                'cloud-name': 'tencent',
+                                                schema,
+                                                deploy,
+                                                api,
+                                                group
+                                            }
+                                        })
+                                        .then((res) => {
+                                            console.log('deploy res', res);
+                                            this.setState({
+                                                deploying: 'finished'
+                                            })
+                                        })
+                                        .catch((err) => {
+                                            this.setState({
+                                                deploying: 'error'
+                                            });
+                                            console.log('err', err);
+                                            console.log('err.response', err.response);
+                                            console.log('err.response.data', err.response.data);
+                                        });
+                                }
+                            } else {
+                                console.log('path 没存');
+                            }
+                        }
+                    );
+                } else {
+                    console.log('project 没存 status');
+                }
+            }
+        );
     };
 
     stepByStep = (stepNum) => {
@@ -222,373 +250,173 @@ class TencentConfig extends Component {
 
     render() {
         let projectID = this.props.projectID ? this.props.projectID : 'ecommerce_projectID';
-
         return (
-            <Query query={gql(GET_PROJECT)} variables={{id: projectID}}>
+            <div>
                 {
-                    ({loading, error, data}) => {
-                        if (loading) {
-                            return <Spin style={{marginLeft: 3}}/>
-                        }
-                        if (error) {
-                            return 'error!';
-                        }
-
-                        let group = '',
-                            deploy = '',
-                            path = '',
-                            schemaID = '',
-                            configID = '',
-                            cloudID = 'tencent_CloudID';
-
-                        let dataProject = data.project_by_id;
-                        let {cloud_id, apiGWGroup_id, deploy_id, projectType, schema_id, wxConfig_id, projectName} = dataProject;
-                        // console.log('dataProject', dataProject);
-
-                        let defaultName = projectName;
-
-                        if (projectType === 'graphql')
-                            schemaID = schema_id.id;
-                        else
-                            configID = wxConfig_id.id;
-
-                        // 如果 cloud_id 没有存储，说明尚未部署，即新的 project，使用 '视图 2'
-                        // 旧的 project 使用 '视图 1'
-
-                        if (cloud_id !== null && cloud_id.cloudName === 'tencent') {
-                            group = apiGWGroup_id;
-                            deploy = deploy_id;
-                            cloudID = cloud_id.id;
-                        }
-
-                        return (
-                            <div>
-                                {
-                                    projectType === 'graphql' ?
-                                        schema_id.schemaState === 'ok' ?
+                    this.state.projectType === 'graphql' ?
+                        this.state.schemaState === 'ok' ?
+                            ''
+                            :
+                            this.props.trialcase ?
+                                ''
+                                :
+                                <div style={{marginBottom: 10}}>
+                                    <Alert message="数据表结构不符合规范，暂不能部署，请修改" type="warning"
+                                           banner closable/>
+                                </div>
+                        :
+                        ''
+                }
+                <div style={{padding: '30px'}}>
+                    <Row gutter={16}>
+                        <Col span={14}>
+
+                            {
+                                this.state.currentStep !== '' ?
+                                    <Steps current={this.state.currentStep} style={{marginBottom: 30}}>
+                                        <Step title={this.stepStatus(0)} description="云函数配置"/>
+                                        <Step title={this.stepStatus(1)} description="服务配置"/>
+                                        <Step title={this.stepStatus(2)} description="API 配置"/>
+                                        <Step title={this.stepStatus(3)} description="通知配置"/>
+                                    </Steps>
+                                    :
+                                    ''
+                            }
+
+                            {
+                                this.state.currentStep === 0 || this.state.stepAllShow ?
+                                    <FormattedMessage id="fc Deploy">
+                                        {
+                                            msg =>
+                                                <Card title={msg} style={{marginBottom: 10}}>
+                                                    <DeployCardFetch
+                                                        switchRegion={this.switchRegion}
+                                                        region={this.state.region}
+                                                        trialcase={this.props.trialcase}
+                                                        pass={this.pass}
+                                                        stepByStep={this.stepByStep}
+                                                        userID={this.props.userID}
+                                                        projectID={projectID}
+                                                    />
+                                                </Card>
+                                        }
+                                    </FormattedMessage>
+                                    :
+                                    ''
+                            }
+
+                            {
+                                this.state.currentStep === 1 || this.state.stepAllShow ?
+                                    <FormattedMessage id="API Group">
+                                        {
+                                            msg =>
+                                                <Card title={msg} style={{marginBottom: 10}}>
+                                                    <APIGroupCardFetch
+                                                        switchRegion={this.switchRegion}
+                                                        region={this.state.region}
+                                                        trialcase={this.props.trialcase}
+                                                        pass={this.pass}
+                                                        stepByStep={this.stepByStep}
+                                                        userID={this.props.userID}
+                                                        projectID={projectID}
+                                                    />
+                                                </Card>
+                                        }
+                                    </FormattedMessage>
+                                    :
+                                    ''
+                            }
+                            {
+                                this.state.currentStep === 2 || this.state.stepAllShow ?
+                                    <FormattedMessage id="API Path">
+                                        {
+                                            msg =>
+                                                <Card title={msg} style={{marginBottom: 10}}>
+                                                    <APIPathCardFetch
+                                                        trialcase={this.props.trialcase}
+                                                        pass={this.pass}
+                                                        stepByStep={this.stepByStep}
+                                                        userID={this.props.userID}
+                                                        projectID={projectID}
+                                                    />
+                                                </Card>
+                                        }
+                                    </FormattedMessage>
+                                    :
+                                    ''
+                            }
+
+                            {
+                                this.state.currentStep === 3 || this.state.stepAllShow ?
+                                    <FormattedMessage id="Notification">
+                                        {
+                                            msg =>
+                                                <Card title={msg}>
+                                                    <NotificationCard
+                                                        userID={this.props.userID}
+                                                        trialcase={this.props.trialcase}
+                                                        stepByStep={this.stepByStep}
+                                                        projectID={projectID}
+
+                                                        // defalutName={defaultName}
+                                                    />
+                                                </Card>
+                                        }
+                                    </FormattedMessage>
+                                    :
+                                    ''
+                            }
+
+                        </Col>
+
+                        {
+                            this.state.currentStep === 4 || this.state.stepAllShow ?
+                                <Col offset={2} span={6}>
+                                    {
+                                        this.props.trialcase ?
                                             ''
                                             :
-                                            this.props.trialcase ?
-                                                ''
-                                                :
-                                                <div style={{marginBottom: 10}}>
-                                                    <Alert message="数据表结构不符合规范，暂不能部署，请修改" type="warning"
-                                                           banner closable/>
-                                                </div>
-                                        :
-                                        ''
-                                }
-                                <div style={{padding: '30px'}}>
-                                    <Row gutter={16}>
-                                        <Col span={14}>
 
-                                            {
-                                                this.state.currentStep !== ''?
-                                                    <Steps current={this.state.currentStep} style={{marginBottom: 30}}>
-                                                        <Step title={this.stepStatus(0)} description="云函数配置"/>
-                                                        <Step title={this.stepStatus(1)} description="服务配置"/>
-                                                        <Step title={this.stepStatus(2)} description="API 配置"/>
-                                                        <Step title={this.stepStatus(3)} description="通知配置"/>
-                                                    </Steps>
-                                                    :
-                                                    ''
-                                            }
-
-                                            {
-                                                this.state.currentStep === 0 || this.state.stepAllShow?
-                                                    <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}
-                                                                        stepByStep={this.stepByStep}
-                                                                        projectID={projectID}
-                                                                    />
-                                                                </Card>
-                                                        }
-                                                    </FormattedMessage>
-                                                    :
-                                                    ''
-                                            }
+                                            this.state.projectType === 'graphql' ?
 
-                                            {
-                                                this.state.currentStep === 1 || this.state.stepAllShow?
-                                                    <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}
-                                                                        stepByStep={this.stepByStep}
-                                                                        projectID={projectID}
-                                                                    />
-                                                                </Card>
-                                                        }
-                                                    </FormattedMessage>
-                                                    :
-                                                    ''
-                                            }
-                                            {
-                                                this.state.currentStep === 2 || this.state.stepAllShow?
-                                                    <Query query={gql(SHOW_APIGWPATH)}
-                                                           variables={{apiGWGroup_id: apiGWGroup_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}
-                                                                                        pass={this.pass}
-                                                                                        stepByStep={this.stepByStep}
-                                                                                    />
-                                                                                </Card>
-                                                                        }
-                                                                    </FormattedMessage>
-                                                                )
-                                                            }
-                                                        }
-                                                    </Query>
-                                                    :
-                                                    ''
-                                            }
+                                                this.state.schemaState === 'ok' ?
 
-                                            {
-                                                this.state.currentStep === 3 || this.state.stepAllShow?
-                                                    <FormattedMessage id="Notification">
-                                                        {
-                                                            msg =>
-                                                                <Card title={msg}>
-                                                                    <NotificationCard
-                                                                        userID={this.props.userID}
-                                                                        defalutName={defaultName}
-                                                                        trialcase={this.props.trialcase}
-                                                                        stepByStep={this.stepByStep}
-                                                                        projectID={projectID}
-                                                                    />
-                                                                </Card>
-                                                        }
-                                                    </FormattedMessage>
+                                                    this.state.deploying === '' ?
+                                                        <Button type='primary' onClick={this.deployFC}><FormattedMessage id="deploy"/>!</Button>
+                                                        :
+                                                        ''
                                                     :
-                                                    ''
-                                            }
-
-                                        </Col>
-
-                                        {
-                                            this.state.currentStep === 4 || this.state.stepAllShow?
-                                                <Col offset={2} span={6}>
-                                                    {
-                                                        this.props.trialcase ?
-                                                            ''
-                                                            :
-
-                                                            projectType === 'graphql' ?
-
-                                                                schema_id.schemaState === 'ok' ?
-
-                                                                        this.state.deploying === '' ?
-                                                                            <Button type='primary' onClick={() => this.deployFC(schemaID, deploy ? deploy.id : this.state.deployIdPassToPath, this.state.pathIdPassToConfig, group ? group.id : this.state.groupIdPassToPath)}><FormattedMessage id="deploy"/>!</Button>
-                                                                            :
-                                                                            ''
-                                                                    :
-                                                                    <Button type='primary'
-                                                                            disabled><FormattedMessage
-                                                                        id="deploy"/>!</Button>
-                                                                :
-                                                                <Button type='primary' onClick={() => {
-                                                                }}><FormattedMessage id="deploy"/>!</Button>
-
-                                                    }
-                                                    {
-                                                        this.state.deploying === 'deploying' ?
-                                                            <Spin size="large"/>
-                                                            :
-                                                            this.state.deploying === 'finished' ?
-                                                                <Progress type="circle" percent={100} />
-                                                                :
-                                                                this.state.deploying === 'error' ?
-                                                                    <Progress type="circle" percent={99} status="exception" />
-                                                                    :
-                                                                    ''
-
-                                                    }
-                                                </Col>
+                                                    <Button type='primary'
+                                                            disabled><FormattedMessage
+                                                        id="deploy"/>!</Button>
                                                 :
-                                                ''
-                                        }
+                                                <Button type='primary' onClick={() => {
+                                                }}><FormattedMessage id="deploy"/>!</Button>
 
-                                    </Row>
-                                </div>
-                            </div>
-                        );
-
-                        // no use, backup code
-                        return (
-                            <div>
-                                {
-                                    projectType === 'graphql' ?
-                                        schema_id.schemaState === 'ok' ?
-                                            ''
+                                    }
+                                    {
+                                        this.state.deploying === 'deploying' ?
+                                            <Spin size="large"/>
                                             :
-                                            this.props.trialcase ?
-                                                ''
+                                            this.state.deploying === 'finished' ?
+                                                <Progress type="circle" percent={100}/>
                                                 :
-                                                <div style={{marginBottom: 10}}>
-                                                    <Alert message="数据表结构不符合规范，暂不能部署，请修改" type="warning"
-                                                           banner closable/>
-                                                </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}
-                                                                projectID={projectID}
-                                                                stepByStep={this.stepByStep}
-                                                            />
-                                                        </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}
-                                                                projectID={projectID}
-                                                                stepByStep={this.stepByStep}
-                                                            />
-                                                        </Card>
-                                                }
-                                            </FormattedMessage>
-                                            <Query query={gql(SHOW_APIGWPATH)}
-                                                   variables={{apiGWGroup_id: apiGWGroup_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}
-                                                                                pass={this.pass}
-                                                                                stepByStep={this.stepByStep}
-                                                                            />
-                                                                        </Card>
-                                                                }
-                                                            </FormattedMessage>
-                                                        )
-                                                    }
-                                                }
-                                            </Query>
-                                            <FormattedMessage id="Notification">
-                                                {
-                                                    msg =>
-                                                        <Card title={msg}>
-                                                            <NotificationCard
-                                                                userID={this.props.userID}
-                                                                defalutName={defaultName}
-                                                                trialcase={this.props.trialcase}
-                                                                projectID={projectID}
-                                                                stepByStep={this.stepByStep}
-                                                            />
-                                                        </Card>
-                                                }
-                                            </FormattedMessage>
-                                        </Col>
-                                        <Col offset={2} span={6}>
-                                            {
-                                                this.props.trialcase ?
-                                                    ''
+                                                this.state.deploying === 'error' ?
+                                                    <Progress type="circle" percent={99}
+                                                              status="exception"/>
                                                     :
-                                                    projectType === 'graphql' ?
-                                                        schema_id.schemaState === 'ok' ?
-                                                            <Button type='primary'
-                                                                    onClick={() => this.deployFC(schemaID, deploy ? deploy.id : this.state.deployIdPassToPath, this.state.pathIdPassToConfig, group ? group.id : this.state.groupIdPassToPath)}><FormattedMessage
-                                                                id="deploy"/>!</Button>
-                                                            :
-                                                            <Button type='primary' disabled><FormattedMessage
-                                                                id="deploy"/>!</Button>
-                                                        :
-                                                        <Button type='primary' onClick={() => {
-                                                        }}><FormattedMessage id="deploy"/>!</Button>
+                                                    ''
 
-                                            }
-                                        </Col>
-                                    </Row>
-                                </div>
-                            </div>
-                        )
-                    }
-                }
-            </Query>
+                                    }
+                                </Col>
+                                :
+                                ''
+                        }
 
-        )
+                    </Row>
+                </div>
+            </div>
+        );
     }
 }
 

src/app/common/deploy/tencent/apiGroupCard/APIGroupCardFetch.js

@@ -0,0 +1,69 @@
+import React, {Component} from 'react';
+import {Spin} from 'antd';
+import {GET_PROJECT} from "../../../../../gql";
+import {Query} from "react-apollo";
+import gql from "graphql-tag";
+import APIGroupCardRender from "./APIGroupCardRender";
+import {removeSpace} from "../../../../../func";
+
+class APIGroupCardFetch extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+
+        }
+    }
+
+    render() {
+        return (
+            <Query query={gql(GET_PROJECT)} variables={{id: this.props.projectID}}>
+                {
+                    ({loading, error, data}) => {
+                        if (loading) {
+                            return <Spin style={{marginLeft: 3}}/>
+                        }
+                        if (error) {
+                            return 'error!';
+                        }
+
+                        let group = '',
+                            cloudID = 'tencent_CloudID';
+
+                        let dataProject = data.project_by_id;
+                        let {cloud_id, apiGWGroup_id, projectName} = dataProject;
+
+                        if (cloud_id !== null && cloud_id.cloudName === 'tencent') {
+                            group = apiGWGroup_id;
+                            cloudID = cloud_id.id;
+                        }
+
+                        return (
+                            <APIGroupCardRender
+                                // props
+                                switchRegion={this.props.switchRegion}
+                                region={this.props.region}
+                                trialcase={this.props.trialcase}
+                                pass={this.props.pass}
+                                stepByStep={this.props.stepByStep}
+                                userID={this.props.userID}
+                                projectID={this.props.projectID}
+
+                                // this
+                                switchConfig={this.switchConfig}
+                                ok={this.ok}
+
+                                // query
+                                defalutName={removeSpace(projectName)}
+                                group={group}
+                                cloudID={cloudID}
+                            />
+                        )
+                    }
+                }
+            </Query>
+
+        )
+    }
+}
+
+export default APIGroupCardFetch;

src/app/common/deploy/tencent/apiGroupCard/APIGroupCardRender.js

@@ -0,0 +1,373 @@
+import React, {Component} from 'react';
+import {Input, Collapse, Button, Radio, Icon, Tooltip} from 'antd';
+import {idGen} from "../../../../../func";
+import {graphqlUrl, manageUsers} from "../../../../../config";
+import {FormattedMessage} from 'react-intl';
+import {ADD_APIGROUP, UPDATE_APIGROUP, UPDATE_PROJECT_GROUP} from "../../../../../gql";
+import {request} from 'graphql-request'
+import {removePrefix, shiftPrefix} from "../../../../../func";
+
+const Panel = Collapse.Panel;
+
+// 如需改变显示，请在此处 value 处更改
+// 如需添加中文，请在此处 value 处添加
+// eg: 'xxxx': <F..  id='xxx'/>
+const valueToKey = {
+    'groupName': 'groupName',
+    'environmentName': 'environmentName',
+    'defaultDomain': 'defaultDomain',
+    'frontType': 'frontType',
+    'userDomain': 'userDomain',
+    'userStatus': 'userStatus',
+    'region': 'region',
+};
+
+const toolTipTitle = {
+    'groupName': 'its groupName',
+    'environmentName': 'its environmentName',
+    'defaultDomain': 'its defaultDomain',
+    'frontType': 'its frontType',
+    'userDomain': 'its userDomain',
+    'userStatus': 'its userStatus',
+    'region': 'its region',
+};
+
+const youMustFill = {
+    'groupName': true,
+    'environmentName': true,
+    'defaultDomain': true,
+    'frontType': true,
+    'userDomain': false,
+    'userStatus': true,
+    'region': true,
+};
+
+class APIGroupCardRender extends Component {
+    constructor(props) {
+        super(props);
+        if (props.group !== '' && props.group !== null) {
+            let {groupName, environmentName, defaultDomain, frontType, userDomain, userStatus, region} = props.group;
+            this.state = {
+                showOK: false,
+                groupName,
+                environmentName,
+                defaultDomain,
+                frontType,
+                userDomain,
+                userStatus,
+                groupRegion: region
+            }
+        } else {
+            this.state = {
+                showOK: false,
+                groupName: 'graphql_endpoint',
+                environmentName: 'test',
+                defaultDomain: '',
+                frontType: 'http&https',
+                userDomain: '',
+                userStatus: 'open',
+                groupRegion: props.region === '' ? 'ap-beijing' : props.region,
+            };
+        }
+    }
+
+    componentWillReceiveProps(next) {
+        if (next.group !== '' && next.group !== null) {
+            let {groupName, environmentName, defaultDomain, frontType, userDomain, userStatus, region} = next.group;
+            this.setState({
+                groupName,
+                environmentName,
+                defaultDomain,
+                frontType,
+                userDomain,
+                userStatus,
+                groupRegion: next.region === '' ? region : next.region
+            })
+        } else {
+            this.setState({
+                groupName: 'graphql_endpoint',
+                environmentName: 'test',
+                defaultDomain: '',
+                frontType: 'http&https',
+                userDomain: '',
+                userStatus: 'open',
+                groupRegion: next.region === '' ? 'ap-beijing' : next.region
+            });
+        }
+    };
+
+    switchConfig = (label) => {
+        return (e) => {
+            this.setState({
+                [label]: e.target.value
+            })
+        };
+    };
+
+    ok = (id, userID, projectID, cloudID, group) => {
+        let {userStatus, userDomain, groupName, groupRegion, frontType, environmentName} = this.state;
+        let region = shiftPrefix('ap-', groupRegion);
+        let varObj = {
+            id,
+            cloud_id: cloudID,
+            user_id: userID,
+            userStatus,
+            userDomain,
+            groupName,
+            frontType,
+            region,
+            environmentName,
+            defaultDomain: '',
+            status: '',
+            serviceId: '',
+            createdAt: new Date().getTime(),
+            updatedAt: ''
+        };
+        if (group === '') {
+            request(graphqlUrl, ADD_APIGROUP, varObj).then(
+                data => {
+                    if (data.create_apiGWGroup !== null) {
+                        this.setState({
+                            showOK: true
+                        });
+                        // 写回 project
+                        request(graphqlUrl, UPDATE_PROJECT_GROUP, {
+                            id: projectID,
+                            updatedAt: new Date().getTime(),
+                            apiGWGroup_id: id,
+                            projectStatus: 'grouped'
+                        }).then(data => {
+                            if (data.update_project !== null)
+                                this.props.stepByStep(2);
+                        });
+                    }
+                    setTimeout(() => {
+                        this.setState({
+                            showOK: false
+                        })
+                    }, 1500)
+                }
+            )
+        } else {
+            let {userStatus, userDomain, groupName, groupRegion, frontType, environmentName} = this.state;
+            let region = shiftPrefix('ap-', groupRegion);
+            let varObj = {
+                id: group.id,
+                userStatus,
+                userDomain,
+                groupName,
+                frontType,
+                region,
+                environmentName,
+                updatedAt: new Date().getTime()
+            };
+            request(graphqlUrl, UPDATE_APIGROUP, varObj).then(
+                data => {
+                    if (data.update_apiGWGroup !== null) {
+                        this.setState({
+                            showOK: true
+                        });
+                        this.props.stepByStep(2);
+                    }
+                    setTimeout(() => {
+                        this.setState({
+                            showOK: false
+                        })
+                    }, 1500)
+                }
+            )
+        }
+    };
+
+    render() {
+        const customPanelStyle = {
+            background: '#f7f7f7',
+            borderRadius: 4,
+            marginBottom: 24,
+            border: 0,
+            overflow: 'hidden',
+        };
+
+        return (
+            <div>
+                <div style={{marginBottom: 10}}>
+                    <span className='vice-title'>
+                        {
+                            youMustFill['groupName'] ?
+                                <span
+                                    style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
+                                :
+                                ''
+                        }
+                        <FormattedMessage id={valueToKey['groupName']}/>
+                        &nbsp;
+                        <Tooltip placement="top" title={toolTipTitle['groupName']}>
+                            <Icon type="question-circle"/>
+                        </Tooltip>
+                    </span>
+                    <Input value={this.state.groupName} style={{width: 400}}
+                           onChange={this.switchConfig('groupName')}/>
+                </div>
+
+                <div style={{marginBottom: 10}}>
+                    <span className='vice-title'>
+                        {
+                            youMustFill['region'] ?
+                                <span
+                                    style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
+                                :
+                                ''
+                        }
+                        <FormattedMessage id={valueToKey['region']}/>
+                        &nbsp;
+                        <Tooltip placement="top" title={toolTipTitle['region']}>
+                            <Icon type="question-circle"/>
+                        </Tooltip>
+                    </span>
+                    <Radio.Group onChange={(e) => {
+                        // 如果不想一变所有都变，就将 onchange 改成
+                        // onChange={this.switchConfig('groupRegion')}
+                        this.props.switchRegion(e);
+                    }} value={removePrefix('ap-', this.state.groupRegion)} buttonStyle="solid">
+                        <Radio.Button value="guangzhou"><FormattedMessage id="Guangzhou"/></Radio.Button>
+                        <Radio.Button value="shanghai"><FormattedMessage id="Shanghai"/></Radio.Button>
+                        <Radio.Button value="beijing"><FormattedMessage id="Beijing"/></Radio.Button>
+                        <Radio.Button value="chengdu"><FormattedMessage id="Chengdu"/></Radio.Button>
+                    </Radio.Group>
+                </div>
+
+                <div style={{marginBottom: 10}}>
+                    <span className='vice-title'>
+                        {
+                            youMustFill['environmentName'] ?
+                                <span
+                                    style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
+                                :
+                                ''
+                        }
+                        <FormattedMessage id={valueToKey['environmentName']}/>
+                        &nbsp;
+                        <Tooltip placement="top" title={toolTipTitle['environmentName']}>
+                            <Icon type="question-circle"/>
+                        </Tooltip>
+                    </span>
+                    <Radio.Group onChange={this.switchConfig('environmentName')}
+                                 defaultValue={this.state.environmentName}
+                                 buttonStyle="solid">
+                        <Radio.Button value="test"><FormattedMessage id="test"/></Radio.Button>
+                        <Radio.Button value="prepub"><FormattedMessage id="prepub"/></Radio.Button>
+                        <Radio.Button value="release"><FormattedMessage id="release"/></Radio.Button>
+                    </Radio.Group>
+                </div>
+                <Collapse bordered={false}>
+                    <Panel header={<FormattedMessage id="Want more options?"/>}
+                           style={customPanelStyle}>
+
+                        <div style={{marginBottom: 10}}>
+                            <span className='vice-title'>
+                                {
+                                    youMustFill['frontType'] ?
+                                        <span style={{
+                                            color: 'red',
+                                            display: 'inline',
+                                            marginRight: 10
+                                        }}>*</span>
+                                        :
+                                        ''
+                                }
+                                <FormattedMessage id={valueToKey['frontType']}/>
+                                &nbsp;
+                                <Tooltip placement="top" title={toolTipTitle['frontType']}>
+                                    <Icon type="question-circle"/>
+                                </Tooltip>
+                            </span>
+                            <Radio.Group onChange={this.switchConfig('frontType')}
+                                         defaultValue={this.state.frontType}
+                                         buttonStyle="solid">
+                                <Radio.Button value="http">http</Radio.Button>
+                                <Radio.Button value="https">https</Radio.Button>
+                                <Radio.Button value="http&https">http&https</Radio.Button>
+                            </Radio.Group>
+                        </div>
+                        {/*<div style={{marginBottom: 10}}>*/}
+                        {/*<span className='vice-title'>{valueToKey['defaultDomain']}*/}
+                        {/*&nbsp;*/}
+                        {/*<Tooltip placement="top" title={toolTipTitle['defaultDomain']}>*/}
+                        {/*<Icon type="question-circle"/>*/}
+                        {/*</Tooltip>*/}
+                        {/*</span>*/}
+                        {/*<Input value={this.state.defaultDomain} style={{width: 400}} disabled/>*/}
+                        {/*</div>*/}
+
+                        <div style={{marginBottom: 10}}>
+                            <span className='vice-title'>
+                                {
+                                    youMustFill['userDomain'] ?
+                                        <span style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
+                                        :
+                                        ''
+                                }
+                                <FormattedMessage id={valueToKey['userDomain']}/>
+                                &nbsp;
+                                <Tooltip placement="top" title={toolTipTitle['userDomain']}>
+                                    <Icon type="question-circle"/>
+                                </Tooltip>
+                            </span>
+                            <Input value={this.state.userDomain} style={{width: 400}}
+                                   onChange={this.switchConfig('userDomain')}/>
+                        </div>
+                        {/*<div style={{marginBottom: 10}}>*/}
+                        {/*<span className='vice-title'>{valueToKey['userStatus']}*/}
+                        {/*&nbsp;*/}
+                        {/*<Tooltip placement="top" title={toolTipTitle['userStatus']}>*/}
+                        {/*<Icon type="question-circle"/>*/}
+                        {/*</Tooltip>*/}
+                        {/*</span>*/}
+                        {/*<Radio.Group onChange={this.switchConfig('userStatus')} defaultValue={this.state.userStatus}*/}
+                        {/*buttonStyle="solid">*/}
+                        {/*<Radio.Button value="open">open</Radio.Button>*/}
+                        {/*<Radio.Button value="close">close</Radio.Button>*/}
+                        {/*</Radio.Group>*/}
+                        {/*</div>*/}
+                    </Panel>
+                </Collapse>
+                {
+                    manageUsers.includes(this.props.userID) ?
+                        <div>
+                            <Button onClick={() => {
+                                const id = idGen('group');
+                                this.ok(id, this.props.userID, this.props.projectID, this.props.cloudID, this.props.group);
+                                this.props.pass(id, 'group');
+                            }} type='primary'><FormattedMessage id="save"/></Button>
+                            {
+                                this.state.showOK === true ?
+                                    <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
+                                    :
+                                    ''
+                            }
+                        </div>
+                        :
+                        this.props.trialcase ?
+                            ''
+                            :
+                            <div>
+                                <Button onClick={() => {
+                                    const id = idGen('group');
+                                    this.ok(id, this.props.userID, this.props.projectID, this.props.cloudID, this.props.group);
+                                    this.props.pass(id, 'group');
+                                }} type='primary'><FormattedMessage id="save"/></Button>
+                                {
+                                    this.state.showOK === true ?
+                                        <Icon type="check-circle" theme="twoTone"
+                                              twoToneColor="#52c41a"/>
+                                        :
+                                        ''
+                                }
+                            </div>
+                }
+            </div>
+        )
+    }
+}
+
+export default APIGroupCardRender;

src/app/common/deploy/tencent/apiPathCard/APIPathCardFetch.js

@@ -0,0 +1,84 @@
+import React, {Component} from 'react';
+import {Collapse, Spin} from 'antd';
+import {GET_PROJECT, SHOW_APIGWPATH} from "../../../../../gql";
+import gql from "graphql-tag";
+import {Query} from "react-apollo";
+import APIPathCardRender from "./APIPathCardRender";
+import {removeSpace} from "../../../../../func";
+
+const Panel = Collapse.Panel;
+
+class APIPathCardFetch extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {}
+    }
+
+    render() {
+        return (
+            <Query query={gql(GET_PROJECT)} variables={{id: this.props.projectID}} fetchPolicy={'network-only'}>
+                {
+                    ({loading, error, data}) => {
+                        if (loading) {
+                            return <Spin style={{marginLeft: 3}}/>
+                        }
+                        if (error) {
+                            return 'error!';
+                        }
+
+                        let group = '',
+                            deploy = '',
+                            path = '';
+
+                        let dataProject = data.project_by_id;
+                        let {cloud_id, apiGWGroup_id, deploy_id, projectName} = dataProject;
+
+                        if (cloud_id !== null && cloud_id.cloudName === 'tencent') {
+                            group = apiGWGroup_id;
+                            deploy = deploy_id;
+                        }
+
+                        return (
+                            <Query query={gql(SHOW_APIGWPATH)} variables={{apiGWGroup_id: group.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 (
+                                            <APIPathCardRender
+                                                // props
+                                                trialcase={this.props.trialcase}
+                                                pass={this.props.pass}
+                                                stepByStep={this.props.stepByStep}
+                                                userID={this.props.userID}
+                                                projectID={this.props.projectID}
+
+                                                // query1
+                                                deployID={deploy.id}
+                                                groupID={group.id}
+
+                                                // query2
+                                                defalutName={removeSpace(projectName)}
+                                                path={path}
+                                            />
+                                        )
+                                    }
+                                }
+                            </Query>
+                        )
+                    }
+                }
+            </Query>
+        )
+    }
+}
+
+export default APIPathCardFetch;

src/app/common/deploy/tencent/APIPathCard.js → src/app/common/deploy/tencent/apiPathCard/APIPathCardRender.js

@@ -1,11 +1,10 @@
 import React, {Component} from 'react';
 import {FormattedMessage} from 'react-intl';
 import {Input, Radio, Collapse, Button, Icon, Tooltip} from 'antd';
+import {idGen} from "../../../../../func";
+import {graphqlUrl, manageUsers} from "../../../../../config";
+import {ADD_APIGWPATH, UPDATE_APIGWPATH} from "../../../../../gql";
 import {request} from 'graphql-request'
-import {ADD_APIGWPATH, UPDATE_APIGWPATH} from "../../../../gql";
-import {idGen} from "../../../../func";
-import {graphqlUrl} from "../../../../config";
-import {manageUsers} from "../../../../config";
 
 const Panel = Collapse.Panel;
 
@@ -30,7 +29,7 @@ const youMustFill = {
     'requestMethod': true
 };
 
-class APIPathCard extends Component {
+class APIPathCardRender extends Component {
     constructor(props) {
         super(props);
         if(props.path !== '' && props.path !== null) {
@@ -66,7 +65,8 @@ class APIPathCard extends Component {
             this.setState({
                 apiGWName: next.defalutName,
                 apiGWDesc: '',
-                requestMethod: 'GET'
+                requestMethod: 'GET',
+                projectStatus: 'pathed'
             });
         }
     };
@@ -79,13 +79,13 @@ class APIPathCard extends Component {
         };
     };
 
-    ok = (id) => {
+    ok = (id, userID, groupID, deployID, path) => {
         let {apiGWName, apiGWDesc, requestMethod} = this.state;
         let varObj = {
             id,
-            user_id: this.props.userID,
-            apiGWGroup_id: this.props.groupID,
-            deploy_id: this.props.deployID,
+            user_id: userID,
+            apiGWGroup_id: groupID,
+            deploy_id: deployID,
             apiGWName,
             apiGWDesc,
             requestMethod,
@@ -96,8 +96,8 @@ class APIPathCard extends Component {
             createdAt: new Date().getTime(),
             updatedAt: ''
         };
-        if (this.props.path === '') {
-            if(this.props.deployID !== '' && this.props.groupID!=='' && this.props.deployID !== null && this.props.groupID!==null) {
+        if (path === '') {
+            if (deployID !== '' && groupID !== '' && deployID !== null && groupID !== null) {
                 request(graphqlUrl, ADD_APIGWPATH, varObj).then(
                     data => {
                         if (data.create_apiGWPath !== null) {
@@ -106,7 +106,7 @@ class APIPathCard extends Component {
                             });
                             this.props.stepByStep(3);
                         }
-                        setTimeout(()=>{
+                        setTimeout(() => {
                             this.setState({
                                 showOK: false
                             })
@@ -117,7 +117,7 @@ class APIPathCard extends Component {
         } else {
             let {apiGWName, apiGWDesc, requestMethod} = this.state;
             let varObj = {
-                id: this.props.path.id,
+                id: path.id,
                 apiGWName,
                 apiGWDesc,
                 requestMethod,
@@ -131,7 +131,7 @@ class APIPathCard extends Component {
                         });
                         this.props.stepByStep(3);
                     }
-                    setTimeout(()=>{
+                    setTimeout(() => {
                         this.setState({
                             showOK: false
                         })
@@ -203,7 +203,7 @@ class APIPathCard extends Component {
                         <div>
                             <Button onClick={()=>{
                                 const id = idGen('path');
-                                this.ok(id);
+                                this.ok(id, this.props.userID, this.props.groupID, this.props.deployID, this.props.path);
                                 this.props.pass(id, 'path');
                             }} type='primary'><FormattedMessage id="save"/></Button>
                             {
@@ -220,7 +220,7 @@ class APIPathCard extends Component {
                             <div>
                                 <Button onClick={()=>{
                                     const id = idGen('path');
-                                    this.ok(id);
+                                    this.ok(id, this.props.userID, this.props.groupID, this.props.deployID, this.props.path);
                                     this.props.pass(id, 'path');
                                 }} type='primary'><FormattedMessage id="save"/></Button>
                                 {
@@ -237,4 +237,4 @@ class APIPathCard extends Component {
     }
 }
 
-export default APIPathCard;
+export default APIPathCardRender;

src/app/common/deploy/tencent/deployCard/DeployCardFetch.js

@@ -0,0 +1,75 @@
+import React, {Component} from 'react';
+import {Spin} from 'antd';
+import {GET_PROJECT} from "../../../../../gql";
+import {Query} from "react-apollo";
+import gql from "graphql-tag";
+import DeployCardRender from "./DeployCardRender";
+import {removeSpace} from "../../../../../func";
+
+const removePrefix = (prefix, value) => {
+    let r = new RegExp(prefix);
+    return value.replace(r, '');
+};
+
+const shiftPrefix = (prefix, value) => {
+    value = removePrefix(prefix, value);
+    return prefix + value;
+};
+
+class DeployCardFetch extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+
+        }
+    }
+
+    render() {
+        return (
+            <Query query={gql(GET_PROJECT)} variables={{id: this.props.projectID}}>
+                {
+                    ({loading, error, data}) => {
+                        if (loading) {
+                            return <Spin style={{marginLeft: 3}}/>
+                        }
+                        if (error) {
+                            return 'error!';
+                        }
+
+                        let deploy = '',
+                            cloudID = 'tencent_CloudID';
+
+                        let dataProject = data.project_by_id;
+                        let {cloud_id, deploy_id, projectName} = dataProject;
+
+                        if (cloud_id !== null && cloud_id.cloudName === 'tencent') {
+                            deploy = deploy_id;
+                            cloudID = cloud_id.id;
+                        }
+
+                        return (
+                            <DeployCardRender
+                                // props
+                                switchRegion={this.props.switchRegion}
+                                region={this.props.region}
+                                trialcase={this.props.trialcase}
+                                pass={this.props.pass}
+                                stepByStep={this.props.stepByStep}
+                                userID={this.props.userID}
+                                projectID={this.props.projectID}
+
+                                // query
+                                defalutName={removeSpace(projectName)}
+                                deploy={deploy}
+                                cloudID={cloudID}
+                            />
+                        )
+                    }
+                }
+            </Query>
+
+        )
+    }
+}
+
+export default DeployCardFetch;

src/app/common/deploy/tencent/DeployCard.js → src/app/common/deploy/tencent/deployCard/DeployCardRender.js

@@ -1,13 +1,12 @@
 import React, {Component} from 'react';
 import {FormattedMessage} from 'react-intl';
-import {Input, Radio, Collapse, Button, Icon, Tooltip, Spin} from 'antd';
-import {ADD_DEPLOY, GET_PROJECT, UPDATE_DEPLOY, UPDATE_PROJECT_DEPLOY_AND_CLOUD} from "../../../../gql";
+import {Input, Radio, Collapse, Button, Icon, Tooltip} from 'antd';
+import {idGen} from "../../../../../func";
+import {graphqlUrl, manageUsers} from "../../../../../config";
+import {ADD_DEPLOY, UPDATE_DEPLOY, UPDATE_PROJECT_DEPLOY_AND_CLOUD} from "../../../../../gql";
 import {request} from 'graphql-request'
-import {idGen} from "../../../../func";
-import {graphqlUrl} from "../../../../config";
-import {manageUsers} from "../../../../config";
-import {Query} from "react-apollo";
-import gql from "graphql-tag";
+import {removePrefix, shiftPrefix} from "../../../../../func";
+
 const Panel = Collapse.Panel;
 
 // 如需改变显示，请在此处 value 处更改
@@ -49,17 +48,7 @@ const youMustFill = {
     'description': false,
 };
 
-const removePrefix = (prefix, value) => {
-    let r = new RegExp(prefix);
-    return value.replace(r, '');
-};
-
-const shiftPrefix = (prefix, value) => {
-    value = removePrefix(prefix, value);
-    return prefix + value;
-};
-
-class DeployCard extends Component {
+class DeployCardRender extends Component {
     constructor(props) {
         super(props);
         if(props.deploy !== '' && props.deploy !== null) {
@@ -130,14 +119,14 @@ class DeployCard extends Component {
         };
     };
 
-    ok = (id) => {
+    ok = (id, userID, projectID, cloudID, deploy) => {
         let {description, cosBucketName, subnetId, cosObjectName, region, vpcId, cosBucketRegion, functionName} = this.state;
         region = shiftPrefix('ap-', region);
         cosBucketRegion = shiftPrefix('ap-', cosBucketRegion);
         let varObj = {
             id,
-            cloud_id: this.props.cloudID,
-            user_id: this.props.userID,
+            cloud_id: cloudID,
+            user_id: userID,
             description,
             cosBucketName,
             subnetId,
@@ -154,7 +143,7 @@ class DeployCard extends Component {
             createdAt: new Date().getTime(),
             updatedAt: ''
         };
-        if (this.props.deploy === '') {
+        if (deploy === '') {
             request(graphqlUrl, ADD_DEPLOY, varObj).then(
                 data => {
                     if (data.create_deploy !== null) {
@@ -163,10 +152,10 @@ class DeployCard extends Component {
                         });
                         // 写回 project
                         request(graphqlUrl, UPDATE_PROJECT_DEPLOY_AND_CLOUD, {
-                            id: this.props.projectID,
+                            id: projectID,
                             updatedAt: new Date().getTime(),
                             deploy_id: id,
-                            cloud_id: this.props.cloudID,
+                            cloud_id: cloudID,
                             projectStatus: 'functioned'
                         }).then(data => {
                             if(data.update_project !== null)
@@ -185,7 +174,7 @@ class DeployCard extends Component {
             region = shiftPrefix('ap-', region);
             cosBucketRegion = shiftPrefix('ap-', cosBucketRegion);
             let varObj = {
-                id: this.props.deploy.id,
+                id: deploy.id,
                 description,
                 subnetId,
                 cosBucketName,
@@ -231,18 +220,8 @@ class DeployCard extends Component {
         };
 
         return (
-            <Query query={gql(GET_PROJECT)} variables={{id: this.props.projectID}}>
-                {
-                    ({loading, error, data}) => {
-                        if (loading) {
-                            return <Spin style={{marginLeft: 3}}/>
-                        }
-                        if (error) {
-                            return 'error!';
-                        }
-                        return (
-                            <div>
-                                <div style={{marginBottom: 10}}>
+            <div>
+                <div style={{marginBottom: 10}}>
                                     <span className='vice-title'>
                                         {
                                             youMustFill['functionName']?
@@ -256,10 +235,10 @@ class DeployCard extends Component {
                                             <Icon type="question-circle"/>
                                         </Tooltip>
                                     </span>
-                                    <Input value={this.state.functionName} style={{width: 400}}
-                                           onChange={this.switchConfig('functionName')}/>
-                                </div>
-                                <div style={{marginBottom: 10}}>
+                    <Input value={this.state.functionName} style={{width: 400}}
+                           onChange={this.switchConfig('functionName')}/>
+                </div>
+                <div style={{marginBottom: 10}}>
                                     <span className='vice-title'>
                         {
                             youMustFill['region']?
@@ -267,25 +246,25 @@ class DeployCard extends Component {
                                 :
                                 ''
                         }
-                        <FormattedMessage id={valueToKey['region']}/>
-                        &nbsp;
-                        <Tooltip placement="top" title={toolTipTitle['region']}>
+                                        <FormattedMessage id={valueToKey['region']}/>
+                                        &nbsp;
+                                        <Tooltip placement="top" title={toolTipTitle['region']}>
                             <Icon type="question-circle"/>
                         </Tooltip>
                     </span>
-                                    <Radio.Group onChange={(e) => {
-                                        this.props.switchRegion(e);
-                                    }} defaultValue={this.state.region} value={removePrefix('ap-', this.state.region)}
-                                                 buttonStyle="solid">
-                                        <Radio.Button value="guangzhou"><FormattedMessage id="Guangzhou"/></Radio.Button>
-                                        <Radio.Button value="shanghai"><FormattedMessage id="Shanghai"/></Radio.Button>
-                                        <Radio.Button value="beijing"><FormattedMessage id="Beijing"/></Radio.Button>
-                                        <Radio.Button value="chengdu"><FormattedMessage id="Chengdu"/></Radio.Button>
-                                    </Radio.Group>
-                                </div>
-                                <Collapse bordered={false}>
-                                    <Panel header={<FormattedMessage id="Want more options?"/>} style={customPanelStyle}>
-                                    <div style={{marginBottom: 10}}>
+                    <Radio.Group onChange={(e) => {
+                        this.props.switchRegion(e);
+                    }} defaultValue={this.state.region} value={removePrefix('ap-', this.state.region)}
+                                 buttonStyle="solid">
+                        <Radio.Button value="guangzhou"><FormattedMessage id="Guangzhou"/></Radio.Button>
+                        <Radio.Button value="shanghai"><FormattedMessage id="Shanghai"/></Radio.Button>
+                        <Radio.Button value="beijing"><FormattedMessage id="Beijing"/></Radio.Button>
+                        <Radio.Button value="chengdu"><FormattedMessage id="Chengdu"/></Radio.Button>
+                    </Radio.Group>
+                </div>
+                <Collapse bordered={false}>
+                    <Panel header={<FormattedMessage id="Want more options?"/>} style={customPanelStyle}>
+                        <div style={{marginBottom: 10}}>
                                     <span className='vice-title'>
                                 {
                                     youMustFill['cosBucketRegion']?
@@ -293,38 +272,38 @@ class DeployCard extends Component {
                                         :
                                         ''
                                 }
-                                <FormattedMessage id={valueToKey['cosBucketRegion']}/>
-                                &nbsp;
-                                <Tooltip placement="top" title={toolTipTitle['cosBucketRegion']}>
+                                        <FormattedMessage id={valueToKey['cosBucketRegion']}/>
+                                        &nbsp;
+                                        <Tooltip placement="top" title={toolTipTitle['cosBucketRegion']}>
                                     <Icon type="question-circle"/>
                                 </Tooltip>
                             </span>
-                                        <Radio.Group onChange={(e) => {
-                                            // 如果不想一变所有都变，就将 onchange 改成
-                                            // onChange={this.switchConfig('cosBucketRegion')}
-                                            this.props.switchRegion(e);
-                                        }} defaultValue={this.state.region}
-                                                     value={removePrefix('ap-', this.state.cosBucketRegion)} buttonStyle="solid">
-                                            <Radio.Button value="guangzhou"><FormattedMessage id="Guangzhou"/></Radio.Button>
-                                            <Radio.Button value="shanghai"><FormattedMessage id="Shanghai"/></Radio.Button>
-                                            <Radio.Button value="beijing"><FormattedMessage id="Beijing"/></Radio.Button>
-                                            <Radio.Button value="chengdu"><FormattedMessage id="Chengdu"/></Radio.Button>
-                                        </Radio.Group>
-                                    </div>
-                                    {/*腾讯云为空字符串，不显示，这里未作区分*/}
-                                    {/*<div style={{marginBottom: 10}}>*/}
-                                    {/*<span className='vice-title'>{valueToKey['serviceName']}*/}
-                                    {/*<span> </span>*/}
-                                    {/*<Tooltip placement="top" title={toolTipTitle['serviceName']}>*/}
-                                    {/*<Icon type="question-circle"/>*/}
-                                    {/*</Tooltip>*/}
-                                    {/*</span>*/}
-                                    {/*<Input value={this.state.serviceName} style={{width: 200}} disabled*/}
-                                    {/*onChange={this.switchConfig('serviceName')}/>*/}
-                                    {/*</div>*/}
-                                    {
-                                        this.state.configs.map(config => (
-                                            <div key={config} style={{marginBottom: 10}}>
+                            <Radio.Group onChange={(e) => {
+                                // 如果不想一变所有都变，就将 onchange 改成
+                                // onChange={this.switchConfig('cosBucketRegion')}
+                                this.props.switchRegion(e);
+                            }} defaultValue={this.state.region}
+                                         value={removePrefix('ap-', this.state.cosBucketRegion)} buttonStyle="solid">
+                                <Radio.Button value="guangzhou"><FormattedMessage id="Guangzhou"/></Radio.Button>
+                                <Radio.Button value="shanghai"><FormattedMessage id="Shanghai"/></Radio.Button>
+                                <Radio.Button value="beijing"><FormattedMessage id="Beijing"/></Radio.Button>
+                                <Radio.Button value="chengdu"><FormattedMessage id="Chengdu"/></Radio.Button>
+                            </Radio.Group>
+                        </div>
+                        {/*腾讯云为空字符串，不显示，这里未作区分*/}
+                        {/*<div style={{marginBottom: 10}}>*/}
+                        {/*<span className='vice-title'>{valueToKey['serviceName']}*/}
+                        {/*<span> </span>*/}
+                        {/*<Tooltip placement="top" title={toolTipTitle['serviceName']}>*/}
+                        {/*<Icon type="question-circle"/>*/}
+                        {/*</Tooltip>*/}
+                        {/*</span>*/}
+                        {/*<Input value={this.state.serviceName} style={{width: 200}} disabled*/}
+                        {/*onChange={this.switchConfig('serviceName')}/>*/}
+                        {/*</div>*/}
+                        {
+                            this.state.configs.map(config => (
+                                <div key={config} style={{marginBottom: 10}}>
                                     <span className='vice-title'>
                                         {
                                             youMustFill[config]?
@@ -338,58 +317,53 @@ class DeployCard extends Component {
                                             <Icon type="question-circle"/>
                                         </Tooltip>
                                     </span>
-                                                <Input value={this.state[config]} style={{width: 200}}
-                                                       disabled={disable[config] === true}
-                                                       onChange={this.switchConfig(config)}/>
-                                            </div>
-                                        ))
-                                    }
-                                </Panel>
-                            </Collapse>
+                                    <Input value={this.state[config]} style={{width: 200}}
+                                           disabled={disable[config] === true}
+                                           onChange={this.switchConfig(config)}/>
+                                </div>
+                            ))
+                        }
+                    </Panel>
+                </Collapse>
+                <div>
+                    {
+                        manageUsers.includes(this.props.userID) ?
+                            <div>
+                                <Button onClick={() => {
+                                    const id = idGen('deploy');
+                                    this.ok(id, this.props.userID, this.props.projectID, this.props.cloudID, this.props.deploy);
+                                    this.props.pass(id, 'deploy');
+                                }} type='primary'><FormattedMessage id="save"/></Button>
+                                {
+                                    this.state.showOK === true ?
+                                        <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
+                                        :
+                                        ''
+                                }
+                            </div>
+                            :
+                            this.props.trialcase ?
+                                ''
+                                :
                                 <div>
+                                    <Button onClick={() => {
+                                        const id = idGen('deploy');
+                                        this.ok(id, this.props.userID, this.props.projectID, this.props.cloudID, this.props.deploy);
+                                        this.props.pass(id, 'deploy');
+                                    }} type='primary'><FormattedMessage id="save"/></Button>
                                     {
-                                        manageUsers.includes(this.props.userID) ?
-                                            <div>
-                                                <Button onClick={() => {
-                                                    const id = idGen('deploy');
-                                                    this.ok(id);
-                                                    this.props.pass(id, 'deploy');
-                                                }} type='primary'><FormattedMessage id="save"/></Button>
-                                                {
-                                                    this.state.showOK === true ?
-                                                        <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
-                                                        :
-                                                        ''
-                                                }
-                                            </div>
+                                        this.state.showOK === true ?
+                                            <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
                                             :
-                                            this.props.trialcase ?
-                                                ''
-                                                :
-                                                <div>
-                                                    <Button onClick={() => {
-                                                        const id = idGen('deploy');
-                                                        this.ok(id);
-                                                        this.props.pass(id, 'deploy');
-                                                    }} type='primary'><FormattedMessage id="save"/></Button>
-                                                    {
-                                                        this.state.showOK === true ?
-                                                            <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
-                                                            :
-                                                            ''
-                                                    }
-                                                </div>
+                                            ''
                                     }
-
                                 </div>
-                            </div>
-                        )
                     }
-                }
-            </Query>
 
+                </div>
+            </div>
         )
     }
 }
 
-export default DeployCard;
+export default DeployCardRender;

src/app/common/deploy/tencent/NotificationCard.js → src/app/common/deploy/tencent/notificationCard/NotificationCard.js

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import {FormattedMessage} from 'react-intl';
 import {Input, Tooltip, Icon, Button} from 'antd';
-import {manageUsers} from "../../../../config";
+import {manageUsers} from "../../../../../config";
 
 
 const valueToKey = {

src/app/graphqlService/component/schema/Create.js

@@ -8,7 +8,7 @@ import gql from "graphql-tag";
 import {ADD_PROJECT_AND_SCHEMA,SHOW_PROJECT} from '../../../../gql'
 import './index.css';
 import {getCookie} from "../../../../cookie";
-import {idGen} from "../../../../func";
+import {idGen, removeSpace} from "../../../../func";
 import {FormattedMessage} from 'react-intl';
 
 class Create extends Component {
@@ -56,7 +56,7 @@ class Create extends Component {
             projectUpdatedAt: '',
             database_id: '',
             apiGWGroup_id: '',
-            projectName: schemaName,
+            projectName: removeSpace(schemaName),
             deploy_id: '',
             projectId,
             projectType: 'graphql',

src/app/graphqlService/component/schema/Schema.jsx

@@ -16,7 +16,7 @@ import {
 import Table from "./Table";
 import {request} from 'graphql-request'
 import {getCookie} from "../../../../cookie";
-import {idGen} from "../../../../func";
+import {idGen, removeSpace} from "../../../../func";
 import {graphqlUrl} from "../../../../config";
 import {manageUsers} from "../../../../config";
 import {FormattedMessage} from 'react-intl';
@@ -512,7 +512,7 @@ class CopySchemaButton extends Component {
 
     handleOk = (userID, create_project_and_schema) => {
         let {history,schemaName,schemaID} = this.props;
-        let projectName = schemaName + '_' + Math.random().toString().slice(-3) + Math.random().toString().slice(-4);
+        let projectName = removeSpace(schemaName) + '_' + Math.random().toString().slice(-3) + Math.random().toString().slice(-4);
         let schemaId = idGen('schema');
         let projectId= idGen('project');
         let createdAt = new Date().getTime();

src/func.js

@@ -1,3 +1,19 @@
-export const idGen = (kind) => {
+const idGen = (kind) => {
     return kind + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
-};
+};
+
+const removeSpace = (value) => {
+    return value.replace(/\s/g, '_');
+};
+
+const removePrefix = (prefix, value) => {
+    let r = new RegExp(prefix);
+    return value.replace(r, '');
+};
+
+const shiftPrefix = (prefix, value) => {
+    value = removePrefix(prefix, value);
+    return prefix + value;
+};
+
+export {shiftPrefix, removePrefix, removeSpace, idGen}