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 import Spinner from 'react-bootstrap/Spinner'
  33
  34 const StyledSpinnerDiv = styled.div`
  35         justify-content: center !important;
  36         display: flex !important;
  37 `;
  38
  39 const ModalStyled = styled(Modal)`
  40         background-color: transparent;
  41 `
  42 const FormStyled = styled(Form.Group)`
  43         padding: .25rem 1.5rem;
  44 `
  45 export default class DeployLoopModal extends React.Component {
  46
  47
  48
  49         constructor(props, context) {
  50                 super(props, context);
  51
  52                 this.handleSave = this.handleSave.bind(this);
  53                 this.handleClose = this.handleClose.bind(this);
  54                 this.handleChange = this.handleChange.bind(this);
  55                 this.refreshStatus = this.refreshStatus.bind(this);
  56                 this.renderDeployParam = this.renderDeployParam.bind(this);
  57                 this.renderSpinner = this.renderSpinner.bind(this);
  58
  59                 const propertiesJson = JSON.parse(JSON.stringify(this.props.loopCache.getGlobalProperties()));
  60                 this.state = {
  61                         loopCache: this.props.loopCache,
  62                         temporaryPropertiesJson: propertiesJson,
  63                         show: true,
  64                         key: this.getInitialKeyValue(propertiesJson)
  65                 };
  66         }
  67         getInitialKeyValue(temporaryPropertiesJson) {
  68                 const deployJsonList = temporaryPropertiesJson["dcaeDeployParameters"];
  69                 let initialKey;
  70                 Object.keys(deployJsonList)
  71                         .filter((obj) => Object.keys(deployJsonList).indexOf(obj) === 0)
  72                         .map(obj =>
  73                                 initialKey = obj
  74                 );
  75                 return initialKey;
  76         }
  77         componentWillReceiveProps(newProps) {
  78                 this.setState({
  79                         loopName: newProps.loopCache.getLoopName(),
  80                         show: true
  81                 });
  82         }
  83
  84         handleClose(){
  85                 this.setState({ show: false });
  86                 this.props.history.push('/');
  87         }
  88
  89         renderSpinner() {
  90                 if (this.state.deploying) {
  91                         return (
  92                                 <StyledSpinnerDiv>
  93                                         <Spinner animation="border" role="status">
  94                                                 <span className="sr-only">Loading...</span>
  95                                         </Spinner>
  96                                 </StyledSpinnerDiv>
  97                         );
  98                 } else {
  99                         return (<div></div>);
 100                 }
 101         }
 102
 103         handleSave() {
 104                 const loopName = this.props.loopCache.getLoopName();
 105                 // save the global propserties
 106                 this.setState({ deploying: true });
 107                 LoopService.updateGlobalProperties(loopName, this.state.temporaryPropertiesJson).then(resp => {
 108                         LoopActionService.performAction(loopName, "deploy").then(pars => {
 109                                 this.props.showSucAlert("Action deploy successfully performed");
 110                                 // refresh status and update loop logs
 111                                 this.refreshStatus(loopName);
 112                         })
 113                         .catch(error => {
 114                                 this.props.showFailAlert("Action deploy failed");
 115                                 // refresh status and update loop logs
 116                                 this.refreshStatus(loopName);
 117                         });
 118                 });
 119         }
 120
 121         refreshStatus(loopName) {
 122                 LoopActionService.refreshStatus(loopName).then(data => {
 123                         this.props.updateLoopFunction(data);
 124                         this.setState({ show: false, deploying: false });
 125                         this.props.history.push('/');
 126                 })
 127                 .catch(error => {
 128                         this.props.showFailAlert("Refresh status failed");
 129                         this.setState({ show: false, deploying: false  });
 130                         this.props.history.push('/');
 131                 });
 132         }
 133         handleChange(event) {
 134                 let deploymentParam = this.state.temporaryPropertiesJson["dcaeDeployParameters"];
 135                 deploymentParam[this.state.key][event.target.name] = event.target.value;
 136
 137                 this.setState({temporaryPropertiesJson:{dcaeDeployParameters: deploymentParam}});
 138         }
 139         renderDeployParamTabs() {
 140                 if (typeof (this.state.temporaryPropertiesJson) === "undefined") {
 141                          return "";
 142                 }
 143
 144                 const deployJsonList = this.state.temporaryPropertiesJson["dcaeDeployParameters"];
 145                 var indents = [];
 146                 Object.keys(deployJsonList).map((item,key) =>
 147                         indents.push(<Tab eventKey={item} title={item}>
 148                                 {this.renderDeployParam(deployJsonList[item])}
 149                                 </Tab>)
 150                 );
 151                 return indents;
 152         }
 153         renderDeployParam(deployJson) {
 154                 var indents = [];
 155                 Object.keys(deployJson).map((item,key) =>
 156                 indents.push(<FormStyled>
 157                                 <Form.Label>{item}</Form.Label>
 158                                 <Form.Control type="text" name={item} onChange={this.handleChange} defaultValue={deployJson[item]}></Form.Control>
 159                         </FormStyled>));
 160                 return indents;
 161         }
 162         render() {
 163                 return (
 164                                         <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} backdrop="static">
 165                                                 <Modal.Header closeButton>
 166                                                         <Modal.Title>Deployment parameters</Modal.Title>
 167                                                 </Modal.Header>
 168                                                 <Tabs id="controlled-tab-example" activeKey={this.state.key} onSelect={key => this.setState({ key })}>
 169                                                 {this.renderDeployParamTabs()}
 170                                                 </Tabs>
 171                                                 {this.renderSpinner()}
 172                                                 <Modal.Footer>
 173                                                         <Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
 174                                                         <Button variant="primary" type="submit" onClick={this.handleSave}>Deploy</Button>
 175                                                 </Modal.Footer>
 176                                         </ModalStyled>
 177                 );
 178         }
 179 }