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.setState({ show: false });
  79                 this.props.history.push('/');
  80         }
  81
  82         handleSave() {
  83                 const loopName = this.props.loopCache.getLoopName();
  84                 // save the global propserties
  85                 LoopService.updateGlobalProperties(loopName, this.state.temporaryPropertiesJson).then(resp => {
  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                 this.setState({ show: false });
  98                 this.props.history.push('/');
  99         }
 100
 101         refreshStatus(loopName) {
 102                 LoopActionService.refreshStatus(loopName).then(data => {
 103                         this.props.updateLoopFunction(data);
 104                 })
 105                 .catch(error => {
 106                         this.props.showAlert("Refresh status failed");
 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 }