status

src/all_graphql.txt

@@ -13,9 +13,21 @@ query userbyid($id: ID) {
   }
 }
 
-query notificationbyprops($type: String, $webhook: String, $name: String) {
-  notificationbyprops: notification_by_props(type: $type webhook: $webhook name: $name) {
+query notificationbyprops($user_id: ID, $type: String, $webhook: String, $name: String) {
+  notificationbyprops: notification_by_props(user_id: $user_id type: $type webhook: $webhook name: $name) {
     id
+    user_id {
+      email
+      updatedAt
+      password
+      telephone
+      nickname
+      username
+      createdAt
+      openid
+      id
+      avatar
+    }
     type
     webhook
     name
@@ -169,6 +181,18 @@ query databasebyid($id: ID) {
 query notificationbyid($id: ID) {
   notificationbyid: notification_by_id(id: $id) {
     id
+    user_id {
+      email
+      updatedAt
+      password
+      telephone
+      nickname
+      username
+      createdAt
+      openid
+      id
+      avatar
+    }
     type
     webhook
     name
@@ -524,6 +548,7 @@ query projectbyid($id: ID) {
     }
     notification_id {
       id
+
       type
       webhook
       name
@@ -667,6 +692,7 @@ query projectbyprops($updatedAt: String, $database_id: ID, $apiGWGroup_id: ID, $
     }
     notification_id {
       id
+
       type
       webhook
       name
@@ -1191,6 +1217,7 @@ mutation createproject($updatedAt: String, $database_id: ID, $apiGWGroup_id: ID,
     }
     notification_id {
       id
+
       type
       webhook
       name
@@ -1369,6 +1396,7 @@ mutation updateproject($updatedAt: String, $database_id: ID, $apiGWGroup_id: ID,
     }
     notification_id {
       id
+
       type
       webhook
       name
@@ -1661,8 +1689,8 @@ mutation deleteorder($id: ID, $user_id: ID, $createdAt: String) {
   deleteorder: delete_order(id: $id user_id: $user_id createdAt: $createdAt)
 }
 
-mutation deletenotification($id: ID, $type: String, $webhook: String, $name: String) {
-  deletenotification: delete_notification(id: $id type: $type webhook: $webhook name: $name)
+mutation deletenotification($id: ID, $user_id: ID, $type: String, $webhook: String, $name: String) {
+  deletenotification: delete_notification(id: $id user_id: $user_id type: $type webhook: $webhook name: $name)
 }
 
 mutation deleteschema($updatedAt: String, $schemaState: String, $authWrite: String, $createdAt: String, $authRead: String, $schemaName: String, $reference: String, $id: ID, $schemaData: String, $authReadWrite: String, $user_id: ID) {
@@ -1894,18 +1922,42 @@ mutation updatecloud($id: ID, $user_id: ID, $cloudName: String, $secretId: Strin
   }
 }
 
-mutation createnotification($id: ID!, $type: String, $webhook: String, $name: String) {
-  createnotification: create_notification(id: $id type: $type webhook: $webhook name: $name) {
+mutation createnotification($id: ID!, $user_id: ID, $type: String, $webhook: String, $name: String) {
+  createnotification: create_notification(id: $id user_id: $user_id type: $type webhook: $webhook name: $name) {
     id
+    user_id {
+      email
+      updatedAt
+      password
+      telephone
+      nickname
+      username
+      createdAt
+      openid
+      id
+      avatar
+    }
     type
     webhook
     name
   }
 }
 
-mutation updatenotification($id: ID, $type: String, $webhook: String, $name: String) {
-  updatenotification: update_notification(id: $id type: $type webhook: $webhook name: $name) {
+mutation updatenotification($id: ID, $user_id: ID, $type: String, $webhook: String, $name: String) {
+  updatenotification: update_notification(id: $id user_id: $user_id type: $type webhook: $webhook name: $name) {
     id
+    user_id {
+      email
+      updatedAt
+      password
+      telephone
+      nickname
+      username
+      createdAt
+      openid
+      id
+      avatar
+    }
     type
     webhook
     name

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

@@ -4,9 +4,9 @@ import axios from 'axios';
 import APIGroupCardFetch from './apiGroupCard/APIGroupCardFetch';
 import APIPathCardFetch from './apiPathCard/APIPathCardFetch';
 import DeployCardFetch from './deployCard/DeployCardFetch';
-import NotificationCard from './notificationCard/NotificationCard';
+import NotificationCardFetch from './notificationCard/NotificationCardFetch';
 
-import {GET_PROJECT, SHOW_APIGWPATH} from "../../../../gql";
+import {GET_PROJECT, SHOW_APIGWPATH, UPDATE_PROJECT_ONLY_STATUS} from "../../../../gql";
 import {deployUrl, graphqlUrl} from "../../../../config";
 import {FormattedMessage} from 'react-intl';
 import {request} from 'graphql-request'
@@ -24,7 +24,8 @@ class TencentConfig extends Component {
             pathIdPassToConfig: '',
             currentStep: '',
             stepAllShow: false,
-            deploying: ''
+            deploying: '',
+            stepUpdated: false,
         };
     }
 
@@ -43,7 +44,8 @@ class TencentConfig extends Component {
                         case 'deployed':
                             this.setState({
                                 currentStep: 5,
-                                stepAllShow: true
+                                stepAllShow: true,
+                                deploying: 'finished'
                             });
                             break;
                         case 'notificationed':
@@ -71,6 +73,17 @@ class TencentConfig extends Component {
                                 currentStep: 0
                             });
                             break;
+                        case 'updated':
+                            this.setState({
+                                stepUpdated: true,
+                                stepAllShow: true,
+                            });
+                            break;
+                        case 'deploying':
+                            this.setState({
+                                deploying: 'deploying'
+                            });
+                            break;
                         default:
                             this.setState({
                                 currentStep: 0
@@ -78,7 +91,7 @@ class TencentConfig extends Component {
                             break;
                     }
                 } else {
-                    console.log('peoject 没存 status');
+                    console.log('project 没存 status');
                 }
             }
         )
@@ -93,6 +106,7 @@ class TencentConfig extends Component {
             currentStep: '',
             deploying: '',
             stepAllShow: false,
+            stepUpdated: false
         });
 
         let projectID = next.projectID ? next.projectID : 'ecommerce_projectID';
@@ -108,6 +122,7 @@ class TencentConfig extends Component {
                     switch (dataProject.projectStatus) {
                         case 'deployed':
                             this.setState({
+                                deploying: 'finished',
                                 currentStep: 5,
                                 stepAllShow: true
                             });
@@ -137,6 +152,17 @@ class TencentConfig extends Component {
                                 currentStep: 0
                             });
                             break;
+                        case 'updated':
+                            this.setState({
+                                stepUpdated: true,
+                                stepAllShow: true,
+                            });
+                            break;
+                        case 'deploying':
+                            this.setState({
+                                deploying: 'deploying'
+                            });
+                            break;
                         default:
                             this.setState({
                                 currentStep: 0
@@ -157,22 +183,6 @@ class TencentConfig extends Component {
         });
     };
 
-    pass = (value, kind) => {
-        if (kind === 'deploy')
-            this.setState({
-                deployIdPassToPath: value
-            });
-        else if (kind === 'group')
-            this.setState({
-                groupIdPassToPath: value
-            });
-        else {
-            this.setState({
-                pathIdPassToConfig: value
-            })
-        }
-    };
-
     deployFC = () => {
         request(graphqlUrl, GET_PROJECT, {id: this.props.projectID}).then(
             data => {
@@ -184,6 +194,14 @@ class TencentConfig extends Component {
                     request(graphqlUrl, SHOW_APIGWPATH, {apiGWGroup_id: group}).then(
                         data => {
                             if(data.apiGWPath_by_props !== null) {
+
+                                // 给 project 加 deploying 状态
+                                request(graphqlUrl, UPDATE_PROJECT_ONLY_STATUS, {
+                                    id: this.props.projectID,
+                                    updatedAt: new Date().getTime(),
+                                    projectStatus: 'deploying'
+                                });
+
                                 console.log(data);
                                 let api = data.apiGWPath_by_props[0].id;
                                 console.log('schema', schema);
@@ -210,12 +228,27 @@ class TencentConfig extends Component {
                                             console.log('deploy res', res);
                                             this.setState({
                                                 deploying: 'finished'
+                                            });
+
+                                            // 给 project 加 deployed 状态
+                                            request(graphqlUrl, UPDATE_PROJECT_ONLY_STATUS, {
+                                                id: this.props.projectID,
+                                                updatedAt: new Date().getTime(),
+                                                projectStatus: 'deployed'
                                             })
+
                                         })
                                         .catch((err) => {
                                             this.setState({
                                                 deploying: 'error'
                                             });
+
+                                            // 给 project 加 error 状态
+                                            request(graphqlUrl, UPDATE_PROJECT_ONLY_STATUS, {
+                                                id: this.props.projectID,
+                                                updatedAt: new Date().getTime(),
+                                                projectStatus: 'error'
+                                            });
                                             console.log('err', err);
                                             console.log('err.response', err.response);
                                             console.log('err.response.data', err.response.data);
@@ -267,6 +300,19 @@ class TencentConfig extends Component {
                         :
                         ''
                 }
+                {
+                    this.state.stepUpdated ?
+
+                            this.props.trialcase ?
+                                ''
+                                :
+                                <div style={{marginBottom: 10}}>
+                                    <Alert message="进行了一次修改，未能确认是否完成" type="warning"
+                                           banner closable/>
+                                </div>
+                        :
+                        ''
+                }
                 <div style={{padding: '30px'}}>
                     <Row gutter={16}>
                         <Col span={14}>
@@ -293,7 +339,6 @@ class TencentConfig extends Component {
                                                         switchRegion={this.switchRegion}
                                                         region={this.state.region}
                                                         trialcase={this.props.trialcase}
-                                                        pass={this.pass}
                                                         stepByStep={this.stepByStep}
                                                         userID={this.props.userID}
                                                         projectID={projectID}
@@ -315,7 +360,6 @@ class TencentConfig extends Component {
                                                         switchRegion={this.switchRegion}
                                                         region={this.state.region}
                                                         trialcase={this.props.trialcase}
-                                                        pass={this.pass}
                                                         stepByStep={this.stepByStep}
                                                         userID={this.props.userID}
                                                         projectID={projectID}
@@ -334,7 +378,6 @@ class TencentConfig extends Component {
                                                 <Card title={msg} style={{marginBottom: 10}}>
                                                     <APIPathCardFetch
                                                         trialcase={this.props.trialcase}
-                                                        pass={this.pass}
                                                         stepByStep={this.stepByStep}
                                                         userID={this.props.userID}
                                                         projectID={projectID}
@@ -352,13 +395,11 @@ class TencentConfig extends Component {
                                         {
                                             msg =>
                                                 <Card title={msg}>
-                                                    <NotificationCard
+                                                    <NotificationCardFetch
                                                         userID={this.props.userID}
                                                         trialcase={this.props.trialcase}
                                                         stepByStep={this.stepByStep}
                                                         projectID={projectID}
-
-                                                        // defalutName={defaultName}
                                                     />
                                                 </Card>
                                         }
@@ -406,7 +447,6 @@ class TencentConfig extends Component {
                                                               status="exception"/>
                                                     :
                                                     ''
-
                                     }
                                 </Col>
                                 :

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

@@ -43,7 +43,6 @@ class APIGroupCardFetch extends Component {
                                 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}

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

@@ -3,7 +3,7 @@ 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 {ADD_APIGROUP, UPDATE_APIGROUP, UPDATE_PROJECT_GROUP, UPDATE_PROJECT_ONLY_STATUS} from "../../../../../gql";
 import {request} from 'graphql-request'
 import {removePrefix, shiftPrefix} from "../../../../../func";
 
@@ -167,7 +167,14 @@ class APIGroupCardRender extends Component {
                         this.setState({
                             showOK: true
                         });
-                        this.props.stepByStep(2);
+                        request(graphqlUrl, UPDATE_PROJECT_ONLY_STATUS, {
+                            id: projectID,
+                            updatedAt: new Date().getTime(),
+                            projectStatus: 'updated'
+                        }).then(data => {
+                            if(data.update_project !== null)
+                                this.props.stepByStep(2);
+                        })
                     }
                     setTimeout(() => {
                         this.setState({
@@ -337,7 +344,6 @@ class APIGroupCardRender extends Component {
                             <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 ?
@@ -354,7 +360,6 @@ class APIGroupCardRender extends Component {
                                 <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 ?

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

@@ -56,7 +56,6 @@ class APIPathCardFetch extends Component {
                                             <APIPathCardRender
                                                 // props
                                                 trialcase={this.props.trialcase}
-                                                pass={this.props.pass}
                                                 stepByStep={this.props.stepByStep}
                                                 userID={this.props.userID}
                                                 projectID={this.props.projectID}

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

@@ -3,7 +3,7 @@ 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 {ADD_APIGWPATH, UPDATE_APIGWPATH, UPDATE_PROJECT_ONLY_STATUS} from "../../../../../gql";
 import {request} from 'graphql-request'
 
 const Panel = Collapse.Panel;
@@ -47,7 +47,7 @@ class APIPathCardRender extends Component {
                 showOK: false,
                 apiGWName: props.defalutName,
                 apiGWDesc: '',
-                requestMethod: 'GET'
+                requestMethod: 'GET',
             };
         }
     }
@@ -66,7 +66,6 @@ class APIPathCardRender extends Component {
                 apiGWName: next.defalutName,
                 apiGWDesc: '',
                 requestMethod: 'GET',
-                projectStatus: 'pathed'
             });
         }
     };
@@ -79,7 +78,7 @@ class APIPathCardRender extends Component {
         };
     };
 
-    ok = (id, userID, groupID, deployID, path) => {
+    ok = (id, userID, projectID, groupID, deployID, path) => {
         let {apiGWName, apiGWDesc, requestMethod} = this.state;
         let varObj = {
             id,
@@ -104,7 +103,16 @@ class APIPathCardRender extends Component {
                             this.setState({
                                 showOK: true
                             });
-                            this.props.stepByStep(3);
+                            // 写回 project
+                            request(graphqlUrl, UPDATE_PROJECT_ONLY_STATUS, {
+                                id: projectID,
+                                updatedAt: new Date().getTime(),
+                                projectStatus: 'pathed'
+                            }).then(data => {
+                                if(data.update_project !== null)
+                                    this.props.stepByStep(3);
+                            })
+
                         }
                         setTimeout(() => {
                             this.setState({
@@ -129,7 +137,14 @@ class APIPathCardRender extends Component {
                         this.setState({
                             showOK: true
                         });
-                        this.props.stepByStep(3);
+                        request(graphqlUrl, UPDATE_PROJECT_ONLY_STATUS, {
+                            id: projectID,
+                            updatedAt: new Date().getTime(),
+                            projectStatus: 'updated'
+                        }).then(data => {
+                            if(data.update_project !== null)
+                                this.props.stepByStep(3);
+                        })
                     }
                     setTimeout(() => {
                         this.setState({
@@ -203,8 +218,7 @@ class APIPathCardRender extends Component {
                         <div>
                             <Button onClick={()=>{
                                 const id = idGen('path');
-                                this.ok(id, this.props.userID, this.props.groupID, this.props.deployID, this.props.path);
-                                this.props.pass(id, 'path');
+                                this.ok(id, this.props.userID, this.props.projectID, this.props.groupID, this.props.deployID, this.props.path);
                             }} type='primary'><FormattedMessage id="save"/></Button>
                             {
                                 this.state.showOK === true?
@@ -220,8 +234,7 @@ class APIPathCardRender extends Component {
                             <div>
                                 <Button onClick={()=>{
                                     const id = idGen('path');
-                                    this.ok(id, this.props.userID, this.props.groupID, this.props.deployID, this.props.path);
-                                    this.props.pass(id, 'path');
+                                    this.ok(id, this.props.userID, this.props.projectID, this.props.groupID, this.props.deployID, this.props.path);
                                 }} type='primary'><FormattedMessage id="save"/></Button>
                                 {
                                     this.state.showOK === true?

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

@@ -53,7 +53,6 @@ class DeployCardFetch extends Component {
                                 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}

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

@@ -3,7 +3,12 @@ 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_DEPLOY, UPDATE_DEPLOY, UPDATE_PROJECT_DEPLOY_AND_CLOUD} from "../../../../../gql";
+import {
+    ADD_DEPLOY,
+    UPDATE_DEPLOY,
+    UPDATE_PROJECT_DEPLOY_AND_CLOUD,
+    UPDATE_PROJECT_ONLY_STATUS
+} from "../../../../../gql";
 import {request} from 'graphql-request'
 import {removePrefix, shiftPrefix} from "../../../../../func";
 
@@ -191,7 +196,14 @@ class DeployCardRender extends Component {
                         this.setState({
                             showOK: true
                         });
-                        this.props.stepByStep(1);
+                        request(graphqlUrl, UPDATE_PROJECT_ONLY_STATUS, {
+                            id: projectID,
+                            updatedAt: new Date().getTime(),
+                            projectStatus: 'updated'
+                        }).then(data => {
+                            if(data.update_project !== null)
+                                this.props.stepByStep(1);
+                        })
                     }
                     setTimeout(() => {
                         this.setState({
@@ -332,7 +344,6 @@ class DeployCardRender extends Component {
                                 <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 ?
@@ -349,7 +360,6 @@ class DeployCardRender extends Component {
                                     <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 ?

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

@@ -1,111 +0,0 @@
-import React, {Component} from 'react';
-import {FormattedMessage} from 'react-intl';
-import {Input, Tooltip, Icon, Button} from 'antd';
-import {manageUsers} from "../../../../../config";
-
-
-const valueToKey = {
-    'dingding webhook': 'dingding webhook',
-    'notification name': 'requestMethod'
-};
-
-const toolTipTitle = {
-    'dingding webhook': 'its dingding webhook',
-    'notification name': 'its notification name'
-};
-
-const youMustFill = {
-    'dingding webhook': false,
-    'notification name': false
-};
-
-
-class NotificationCard extends Component {
-    render() {
-        return (
-            <div>
-                <div className='kind'>
-                    <p style={{marginBottom: 10}}><b><FormattedMessage id="Ding Talk"/></b></p>
-                    <div className='item'>
-                        <p style={{marginBottom: 10}}>
-                            <span className='item-title'>
-                                <span>
-                                    {
-                                        youMustFill['dingding webhook']?
-                                            <span style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
-                                            :
-                                            ''
-                                    }
-                                    <FormattedMessage id="Web hook"/>
-                                    &nbsp;
-                                </span>
-                                <Tooltip placement="top" title={toolTipTitle['dingding webhook']}>
-                                    <Icon type="question-circle"/>
-                                </Tooltip>
-                            </span>
-                            <Input style={{width: 400}}/>
-                        </p>
-                        <p style={{marginBottom: 10}}>
-                            <span className='item-title'>
-                                <span>
-                                    {
-                                        youMustFill['notification name']?
-                                            <span style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
-                                            :
-                                            ''
-                                    }
-                                    <FormattedMessage id="Notification Name"/>
-                                    &nbsp;
-                                </span>
-                                <Tooltip placement="top" title={toolTipTitle['notification name']}>
-                                    <Icon type="question-circle"/>
-                                </Tooltip>
-                            </span>
-                            <Input style={{width: 300}} value={this.props.defalutName} onChange={()=>{}}/></p>
-                    </div>
-                </div>
-
-                {/*<div className='kind'>*/}
-                    {/*<p><b>QQ</b></p>*/}
-                    {/*<div className='item'>*/}
-                        {/*<p>*/}
-                            {/*<span className='item-title'>*/}
-                                {/*<span>Web hook  </span>*/}
-                                {/*<Tooltip placement="top" title='hahahha'>*/}
-                                    {/*<Icon type="question-circle"/>*/}
-                                {/*</Tooltip>*/}
-                            {/*</span>*/}
-                            {/*<Input style={{width: 600}}/>*/}
-                        {/*</p>*/}
-                        {/*<p>*/}
-                            {/*<span className='item-title'>*/}
-                                {/*<span>Notification Name  </span>*/}
-                                {/*<Tooltip placement="top" title='heheheheh'>*/}
-                                    {/*<Icon type="question-circle"/>*/}
-                                {/*</Tooltip>*/}
-                            {/*</span>*/}
-                            {/*<Input style={{width: 300}}/></p>*/}
-                    {/*</div>*/}
-                {/*</div>*/}
-
-                {
-                    manageUsers.includes(this.props.userID) ?
-                        <Button type="primary" onClick={() => {
-                            this.props.stepByStep(4);
-                        }}><FormattedMessage id="save"/></Button>
-                        :
-                        this.props.trialcase?
-                            ''
-                            :
-                            <Button type="primary" onClick={() => {
-                                this.props.stepByStep(4);
-                            }}><FormattedMessage id="save"/></Button>
-                }
-
-            </div>
-        )
-
-    }
-}
-
-export default NotificationCard;

src/app/common/deploy/tencent/notificationCard/NotificationCardFetch.js

@@ -0,0 +1,50 @@
+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 {removeSpace} from "../../../../../func";
+import NotificationCardRender from './NotificationCardRender';
+
+class NotificationCardFetch extends Component {
+    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 dataProject = data.project_by_id;
+                        let {projectName} = dataProject;
+
+                        let notification = dataProject.notification_id || '';
+
+                        return (
+                            <NotificationCardRender
+                                // props
+                                trialcase={this.props.trialcase}
+                                stepByStep={this.props.stepByStep}
+                                userID={this.props.userID}
+                                projectID={this.props.projectID}
+
+                                // query
+                                notification={notification}
+                                defaultName={removeSpace(projectName)}
+                            />
+                        )
+                    }
+                }
+            </Query>
+
+        )
+
+    }
+}
+
+export default NotificationCardFetch;

src/app/common/deploy/tencent/notificationCard/NotificationCardRender.js

@@ -0,0 +1,229 @@
+import React, {Component} from 'react';
+import {FormattedMessage} from 'react-intl';
+import {Input, Tooltip, Icon, Button} from 'antd';
+import {graphqlUrl, manageUsers} from "../../../../../config";
+import {ADD_NOTIFICATION, UPDATE_NOTIFICATION, UPDATE_PROJECT_ONLY_STATUS} from "../../../../../gql";
+import {request} from 'graphql-request'
+import {idGen} from "../../../../../func";
+
+const valueToKey = {
+    'dingding webhook': 'dingding webhook',
+    'notification name': 'requestMethod'
+};
+
+const toolTipTitle = {
+    'dingding webhook': 'its dingding webhook',
+    'notification name': 'its notification name'
+};
+
+const youMustFill = {
+    'dingding webhook': false,
+    'notification name': false
+};
+
+
+class NotificationCardFetch extends Component {
+    constructor(props) {
+        super(props);
+        if(props.notification !== '' && props.notification !== null) {
+            let {type, webhook, name} = props.notification;
+            this.state = {
+                type,
+                webhook,
+                name
+            }
+        } else {
+            this.state = {
+                type: 'dingding',
+                webhook: '',
+                name: props.defaultName
+            }
+        }
+    }
+
+    componentWillReceiveProps(next) {
+        if(next.notification !== '' && next.notification !== null) {
+            let {type, webhook, name} = next.notification;
+            this.setState({
+                type,
+                webhook,
+                name
+            })
+        } else {
+            this.setState({
+                type: 'dingding',
+                webhook: '',
+                name: next.defaultName
+            })
+        }
+    }
+
+    ok = (id, userID, projectID, notification) => {
+        let {type, webhook, name} = this.state;
+        let varObj = {
+            id,
+            user_id: userID,
+            type,
+            webhook,
+            name,
+            createdAt: new Date().getTime(),
+            updatedAt: ''
+        };
+        if (notification === '') {
+            request(graphqlUrl, ADD_NOTIFICATION, varObj).then(
+                data => {
+                    if (data.create_notification !== null) {
+                        this.setState({
+                            showOK: true
+                        });
+                        // 写回 project
+                        request(graphqlUrl, UPDATE_PROJECT_ONLY_STATUS, {
+                            id: projectID,
+                            updatedAt: new Date().getTime(),
+                            projectStatus: 'notificationed'
+                        }).then(data => {
+                            if (data.update_project !== null)
+                                this.props.stepByStep(4);
+                        })
+
+                    }
+                    setTimeout(() => {
+                        this.setState({
+                            showOK: false
+                        })
+                    }, 1500)
+                }
+            )
+
+        } else {
+            let varObj = {
+                id: notification.id,
+                type,
+                webhook,
+                name,
+                updatedAt: new Date().getTime()
+            };
+            request(graphqlUrl, UPDATE_NOTIFICATION, varObj).then(
+                data => {
+                    if (data.update_notification !== null) {
+                        this.setState({
+                            showOK: true
+                        });
+                        request(graphqlUrl, UPDATE_PROJECT_ONLY_STATUS, {
+                            id: projectID,
+                            updatedAt: new Date().getTime(),
+                            projectStatus: 'updated'
+                        }).then(data => {
+                            if (data.update_project !== null)
+                                this.props.stepByStep(4);
+                        })
+                    }
+                    setTimeout(() => {
+                        this.setState({
+                            showOK: false
+                        })
+                    }, 1500)
+                }
+            )
+        }
+    };
+
+    render() {
+        return (
+            <div>
+                <div className='kind'>
+                    <p style={{marginBottom: 10}}><b><FormattedMessage id="Ding Talk"/></b></p>
+                    <div className='item'>
+                        <p style={{marginBottom: 10}}>
+                            <span className='item-title'>
+                                <span>
+                                    {
+                                        youMustFill['dingding webhook'] ?
+                                            <span style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
+                                            :
+                                            ''
+                                    }
+                                    <FormattedMessage id="Web hook"/>
+                                    &nbsp;
+                                </span>
+                                <Tooltip placement="top" title={toolTipTitle['dingding webhook']}>
+                                    <Icon type="question-circle"/>
+                                </Tooltip>
+                            </span>
+                            <Input style={{width: 400}} value={this.state.webhook} onChange={(e) => {
+                                this.setState({
+                                    webhook: e.target.value
+                                })
+                            }}/>
+                        </p>
+                        <p style={{marginBottom: 10}}>
+                            <span className='item-title'>
+                                <span>
+                                    {
+                                        youMustFill['notification name'] ?
+                                            <span style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
+                                            :
+                                            ''
+                                    }
+                                    <FormattedMessage id="Notification Name"/>
+                                    &nbsp;
+                                </span>
+                                <Tooltip placement="top" title={toolTipTitle['notification name']}>
+                                    <Icon type="question-circle"/>
+                                </Tooltip>
+                            </span>
+                            <Input style={{width: 300}} value={this.state.name} onChange={(e) => {
+                                this.setState({
+                                    name: e.target.value
+                                })
+                            }}/></p>
+                    </div>
+                </div>
+
+                {/*<div className='kind'>*/}
+                {/*<p><b>QQ</b></p>*/}
+                {/*<div className='item'>*/}
+                {/*<p>*/}
+                {/*<span className='item-title'>*/}
+                {/*<span>Web hook  </span>*/}
+                {/*<Tooltip placement="top" title='hahahha'>*/}
+                {/*<Icon type="question-circle"/>*/}
+                {/*</Tooltip>*/}
+                {/*</span>*/}
+                {/*<Input style={{width: 600}}/>*/}
+                {/*</p>*/}
+                {/*<p>*/}
+                {/*<span className='item-title'>*/}
+                {/*<span>Notification Name  </span>*/}
+                {/*<Tooltip placement="top" title='heheheheh'>*/}
+                {/*<Icon type="question-circle"/>*/}
+                {/*</Tooltip>*/}
+                {/*</span>*/}
+                {/*<Input style={{width: 300}}/></p>*/}
+                {/*</div>*/}
+                {/*</div>*/}
+
+                <div>
+                    {
+                        manageUsers.includes(this.props.userID) ?
+                            <Button type="primary" onClick={() => {
+                                const id = idGen('notification');
+                                this.ok(id, this.props.userID, this.props.projectID, this.props.notification);
+                            }}><FormattedMessage id="save"/></Button>
+                            :
+                            this.props.trialcase ?
+                                ''
+                                :
+                                <Button type="primary" onClick={() => {
+                                    const id = idGen('notification');
+                                    this.ok(id, this.props.userID, this.props.projectID, this.props.notification);
+                                }}><FormattedMessage id="save"/></Button>
+                    }
+                </div>
+            </div>
+        )
+
+    }
+}
+
+export default NotificationCardFetch;

src/func.js

@@ -3,7 +3,7 @@ const idGen = (kind) => {
 };
 
 const removeSpace = (value) => {
-    return value.replace(/\s/g, '_');
+    return value.replace(/[\s-]/g, '_');
 };
 
 const removePrefix = (prefix, value) => {

src/gql.js

@@ -863,6 +863,12 @@ const GET_PROJECT = `
                       id
                       schemaData
                     }
+                    notification_id {
+                      id
+                      type
+                      webhook
+                      name
+                    }
                   }
                 }
         `;
@@ -927,6 +933,43 @@ const UPDATE_PROJECT_DEPLOY_AND_CLOUD = `
             }
         `;
 
+const UPDATE_PROJECT_ONLY_STATUS = `
+            mutation updateproject($id: ID, $updatedAt: String, $projectStatus: String) {
+              update_project(id: $id updatedAt: $updatedAt projectStatus: $projectStatus) {
+                projectStatus
+                updatedAt
+                projectName
+                id
+                projectType
+              }
+            }
+        `;
+
+const ADD_NOTIFICATION = `
+            mutation createnotification($id: ID!, $type: String, $webhook: String, $name: String, $user_id: ID) {
+              create_notification(id: $id type: $type webhook: $webhook name: $name user_id: $user_id) {
+                id
+                type
+                webhook
+                name
+                user_id {
+                    id
+                }
+              }
+            }
+        `;
+
+const UPDATE_NOTIFICATION = `
+            mutation updatenotification($id: ID, $type: String, $webhook: String, $name: String) {
+                update_notification(id: $id type: $type webhook: $webhook name: $name) {
+                    id
+                    type
+                    webhook
+                    name
+                }
+            }
+        `;
+
 export {
     ADD_USER,
     GET_USER,
@@ -967,5 +1010,8 @@ export {
     UPDATE_PROJECT_DEPLOY,
     UPDATE_PROJECT_CLOUD,
     UPDATE_PROJECT_DATABASE,
-    UPDATE_PROJECT_DEPLOY_AND_CLOUD
+    UPDATE_PROJECT_DEPLOY_AND_CLOUD,
+    UPDATE_PROJECT_ONLY_STATUS,
+    ADD_NOTIFICATION,
+    UPDATE_NOTIFICATION
 }