Fix NPM loop issue
[clamp.git] / ui-react / src / components / dialogs / Loop / DeployLoopModal.js
1 /*-
2  * ============LICENSE_START=======================================================
3  * ONAP CLAMP
4  * ================================================================================
5  * Copyright (C) 2019 AT&T Intellectual Property. All rights
6  *                             reserved.
7  * ================================================================================
8  * Licensed under the Apache License, Version 2.0 (the "License");
9  * you may not use this file except in compliance with the License.
10  * You may obtain a copy of the License at
11  *
12  * http://www.apache.org/licenses/LICENSE-2.0
13  *
14  * Unless required by applicable law or agreed to in writing, software
15  * distributed under the License is distributed on an "AS IS" BASIS,
16  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
17  * See the License for the specific language governing permissions and
18  * limitations under the License.
19  * ============LICENSE_END============================================
20  * ===================================================================
21  *
22  */
23 import React from 'react';
24 import LoopActionService from '../../../api/LoopActionService';
25 import LoopService from '../../../api/LoopService';
26 import Button from 'react-bootstrap/Button';
27 import Modal from 'react-bootstrap/Modal';
28 import Form from 'react-bootstrap/Form';
29 import styled from 'styled-components';
30
31 const ModalStyled = styled(Modal)`
32         background-color: transparent;
33 `
34 const FormStyled = styled(Form.Group)`
35         padding: .25rem 1.5rem;
36 `
37 export default class DeployLoopModal extends React.Component {
38         state = {
39                 loopCache: this.props.loopCache,
40                 temporaryPropertiesJson: JSON.parse(JSON.stringify(this.props.loopCache.getGlobalProperties())),
41                 show: true
42         };
43         constructor(props, context) {
44                 super(props, context);
45
46                 this.handleSave = this.handleSave.bind(this);
47                 this.handleClose = this.handleClose.bind(this);
48                 this.handleChange = this.handleChange.bind(this);
49                 this.refreshStatus = this.refreshStatus.bind(this);
50                 this.renderDeployParam = this.renderDeployParam.bind(this);
51         }
52         componentWillReceiveProps(newProps) {
53                 this.setState({
54                         loopName: newProps.loopCache.getLoopName(),
55                         show: true
56                 });
57         }
58         handleClose(){
59                 this.props.history.push('/');
60         }
61         handleSave() {
62                 const loopName = this.props.loopCache.getLoopName();
63                 // save the global propserties
64                 LoopService.updateGlobalProperties(loopName, this.state.temporaryPropertiesJson).then(resp => {
65                         this.setState({ show: false });
66
67                         LoopActionService.performAction(loopName, "deploy").then(pars => {
68                                 this.props.showAlert("Action deploy successfully performed");
69                                 // refresh status and update loop logs
70                                 this.refreshStatus(loopName);
71                         })
72                         .catch(error => {
73                                 this.props.showAlert("Action deploy failed");
74                                 // refresh status and update loop logs
75                                 this.refreshStatus(loopName);
76                         });
77                 });
78         }
79
80         refreshStatus(loopName) {
81                 LoopActionService.refreshStatus(loopName).then(data => {
82                         this.props.updateLoopFunction(data);
83                         this.props.history.push('/');
84                 })
85                 .catch(error => {
86                         this.props.showAlert("Refresh status failed");
87                         this.props.history.push('/');
88                 });
89         }
90         handleChange(event) {
91                 let deploymentParam = this.state.temporaryPropertiesJson["dcaeDeployParameters"];
92                 deploymentParam[event.target.name] = event.target.value;
93
94                 this.setState({temporaryPropertiesJson:{dcaeDeployParameters: deploymentParam}});
95         }
96         renderDeployParam() {
97                 if (typeof (this.state.temporaryPropertiesJson) === "undefined") {
98                          return "";
99                 }
100
101                 const deployJson = this.state.temporaryPropertiesJson["dcaeDeployParameters"];
102                 var indents = [];
103                 Object.keys(deployJson).map((item,key) =>
104                 indents.push(<FormStyled>
105                                 <Form.Label>{item}</Form.Label>
106                                 <Form.Control type="text" name={item} onChange={this.handleChange} defaultValue={deployJson[item]}></Form.Control>
107                         </FormStyled>));
108
109                         return indents;
110         }
111
112
113         render() {
114                 return (
115                                         <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} >
116                                                 <Modal.Header closeButton>
117                                                         <Modal.Title>Deployment parameters</Modal.Title>
118                                                 </Modal.Header>
119                                                 {this.renderDeployParam()}
120                                                 <Modal.Footer>
121                                                         <Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
122                                                         <Button variant="primary" type="submit" onClick={this.handleSave}>Deploy</Button>
123                                                 </Modal.Footer>
124                                         </ModalStyled>
125                 );
126         }
127 }