Release Frankfurt 5.0.0
[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 Tabs from 'react-bootstrap/Tabs';
30 import Tab from 'react-bootstrap/Tab';
31 import styled from 'styled-components';
32
33 const ModalStyled = styled(Modal)`
34         background-color: transparent;
35 `
36 const FormStyled = styled(Form.Group)`
37         padding: .25rem 1.5rem;
38 `
39 export default class DeployLoopModal extends React.Component {
40
41
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                 const propertiesJson = JSON.parse(JSON.stringify(this.props.loopCache.getGlobalProperties()));
53                 this.state = {
54                         loopCache: this.props.loopCache,
55                         temporaryPropertiesJson: propertiesJson,
56                         show: true,
57                         key: this.getInitialKeyValue(propertiesJson)
58                 };
59         }
60         getInitialKeyValue(temporaryPropertiesJson) {
61                 const deployJsonList = temporaryPropertiesJson["dcaeDeployParameters"];
62                 let initialKey;
63                 Object.keys(deployJsonList)
64                         .filter((obj) => Object.keys(deployJsonList).indexOf(obj) === 0)
65                         .map(obj =>
66                                 initialKey = obj
67                 );
68                 return initialKey;
69         }
70         componentWillReceiveProps(newProps) {
71                 this.setState({
72                         loopName: newProps.loopCache.getLoopName(),
73                         show: true
74                 });
75         }
76
77         handleClose(){
78                 this.props.history.push('/');
79         }
80         handleSave() {
81                 const loopName = this.props.loopCache.getLoopName();
82                 // save the global propserties
83                 LoopService.updateGlobalProperties(loopName, this.state.temporaryPropertiesJson).then(resp => {
84                         this.setState({ show: false });
85
86                         LoopActionService.performAction(loopName, "deploy").then(pars => {
87                                 this.props.showAlert("Action deploy successfully performed");
88                                 // refresh status and update loop logs
89                                 this.refreshStatus(loopName);
90                         })
91                         .catch(error => {
92                                 this.props.showAlert("Action deploy failed");
93                                 // refresh status and update loop logs
94                                 this.refreshStatus(loopName);
95                         });
96                 });
97         }
98
99         refreshStatus(loopName) {
100                 LoopActionService.refreshStatus(loopName).then(data => {
101                         this.props.updateLoopFunction(data);
102                         this.props.history.push('/');
103                 })
104                 .catch(error => {
105                         this.props.showAlert("Refresh status failed");
106                         this.props.history.push('/');
107                 });
108         }
109         handleChange(event) {
110                 let deploymentParam = this.state.temporaryPropertiesJson["dcaeDeployParameters"];
111                 deploymentParam[this.state.key][event.target.name] = event.target.value;
112
113                 this.setState({temporaryPropertiesJson:{dcaeDeployParameters: deploymentParam}});
114         }
115         renderDeployParamTabs() {
116                 if (typeof (this.state.temporaryPropertiesJson) === "undefined") {
117                          return "";
118                 }
119
120                 const deployJsonList = this.state.temporaryPropertiesJson["dcaeDeployParameters"];
121                 var indents = [];
122                 Object.keys(deployJsonList).map((item,key) =>
123                         indents.push(<Tab eventKey={item} title={item}>
124                                 {this.renderDeployParam(deployJsonList[item])}
125                                 </Tab>)
126                 );
127                 return indents;
128         }
129         renderDeployParam(deployJson) {
130                 var indents = [];
131                 Object.keys(deployJson).map((item,key) =>
132                 indents.push(<FormStyled>
133                                 <Form.Label>{item}</Form.Label>
134                                 <Form.Control type="text" name={item} onChange={this.handleChange} defaultValue={deployJson[item]}></Form.Control>
135                         </FormStyled>));
136                 return indents;
137         }
138         render() {
139                 return (
140                                         <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} >
141                                                 <Modal.Header closeButton>
142                                                         <Modal.Title>Deployment parameters</Modal.Title>
143                                                 </Modal.Header>
144                                                 <Tabs id="controlled-tab-example" activeKey={this.state.key} onSelect={key => this.setState({ key })}>
145                                                 {this.renderDeployParamTabs()}
146                                                 </Tabs>
147                                                 <Modal.Footer>
148                                                         <Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
149                                                         <Button variant="primary" type="submit" onClick={this.handleSave}>Deploy</Button>
150                                                 </Modal.Footer>
151                                         </ModalStyled>
152                 );
153         }
154 }