ui-react/src/components/dialogs/LoopProperties.js

   1 /*-
   2  * ============LICENSE_START=======================================================
   3  * ONAP CLAMP
   4  * ================================================================================
   5  * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  * http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ============LICENSE_END============================================
  19  * ===================================================================
  20  *
  21  */
  22
  23 import React from 'react'
  24 import Button from 'react-bootstrap/Button';
  25 import Modal from 'react-bootstrap/Modal';
  26 import Form from 'react-bootstrap/Form';
  27 import styled from 'styled-components';
  28 import LoopService from '../../api/LoopService';
  29
  30 const ModalStyled = styled(Modal)`
  31         background-color: transparent;
  32 `
  33
  34 export default class LoopProperties extends React.Component {
  35
  36         formProps = {dcaeDeployParameters: {
  37                         "location_id": "",
  38                         "service_id": "",
  39                         "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
  40         }};
  41
  42         constructor(props, context) {
  43                 super(props, context);
  44
  45                 this.handleClose = this.handleClose.bind(this);
  46                 this.handleChange = this.handleChange.bind(this);
  47                 this.saveProperties =  this.saveProperties.bind(this);
  48                 this.initialValues = this.initialValues.bind(this);
  49                 this.state = {
  50                         show: true,
  51                         loopName: 'LOOP_h2NMX_v1_0_ResourceInstanceName1_tca',
  52                         form: this.formProps
  53                 };
  54
  55         }
  56         initialValues() {
  57                         const updatedForm = this.state.form;
  58                         Object.keys(updatedForm).forEach((key) => {
  59                         if (key === 'dcaeDeployParameters') {
  60                                 updatedForm[key] = JSON.stringify(this.state.form[key]);
  61                         } else {
  62                                 updatedForm[key] = this.state.form[key];
  63                         }
  64                         this.setState({ form: updatedForm });
  65                 });
  66         }
  67         handleClose() {
  68                         this.props.history.push('/');
  69         }
  70         handleChange(e) {
  71                         const formUpdated =  this.state.form;
  72                         formUpdated[e.target.name] = e.target.value;
  73                         this.setState({ form: formUpdated });
  74    };
  75         saveProperties(event) {
  76                 // translate the deploymentParameter into jsonFormat at submit time
  77                 const updatedForm = this.state.form;
  78                 Object.keys(updatedForm).forEach((key) => {
  79                         if (key === 'dcaeDeployParameters') {
  80                                 try {
  81                                   let value = JSON.parse(updatedForm[key]);
  82                                         updatedForm[key] = value;
  83                                         // save Properties
  84                                         this.setState( {form: updatedForm} );
  85                                         LoopService.updateGlobalProperties(this.state.loopName, this.state.form);
  86                                         this.props.history.push('/');
  87                                 } catch (error) {
  88                                   alert("Deployment Parameters is not in good Json format. Please correct it.");
  89                                 }
  90                         }
  91                 });
  92         }
  93         render() {
  94                 return (
  95                         <ModalStyled size="lg"  show={this.state.show} onHide={this.handleClose} onEntered={this.initialValues}>
  96                                 <Modal.Header closeButton>
  97                                         <Modal.Title>Model Properties</Modal.Title>
  98                                 </Modal.Header>
  99                                 <Modal.Body>
 100                                         <Form.Group controlId="exampleForm.ControlTextarea1">
 101                                         <Form.Label>Deploy Parameters</Form.Label>
 102                                         <Form.Control as="textarea" rows="3" name="dcaeDeployParameters" onChange={this.handleChange} defaultValue={this.state.form["dcaeDeployParameters"]}/>
 103                                         </Form.Group>
 104                                 </Modal.Body>
 105                                 <Modal.Footer>
 106                                         <Button variant="secondary" type="null" onClick={this.handleClose}>Cacel</Button>
 107                                         <Button variant="primary" type="submit" onClick={this.saveProperties}>Save</Button>
 108                                 </Modal.Footer>
 109                         </ModalStyled>
 110                 );
 111         }
 112 }