Rework deploy action and close model

[clamp.git] / ui-react / src / components / dialogs / LoopProperties.js

diff --git a/ui-react/src/components/dialogs/LoopProperties.js b/ui-react/src/components/dialogs/LoopProperties.js
index 2cde8d4..fa82a7e 100644 (file)
--- a/ui-react/src/components/dialogs/LoopProperties.js
+++ b/ui-react/src/components/dialogs/LoopProperties.js
@@ -30,81 +30,87 @@ import LoopService from '../../api/LoopService';
 const ModalStyled = styled(Modal)`
        background-color: transparent;
 `
-
 export default class LoopProperties extends React.Component {
 
-       formProps = {dcaeDeployParameters: {
-                       "location_id": "",
-                       "service_id": "",
-                       "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
-       }};
+       state = {
+               show: true,
+               loopCache: this.props.loopCache,
+               temporaryPropertiesJson: JSON.parse(JSON.stringify(this.props.loopCache.getGlobalProperties())),
+       };
 
        constructor(props, context) {
                super(props, context);
 
                this.handleClose = this.handleClose.bind(this);
+               this.handleSave = this.handleSave.bind(this);
                this.handleChange = this.handleChange.bind(this);
-               this.saveProperties =  this.saveProperties.bind(this);
-               this.initialValues = this.initialValues.bind(this);
-               this.state = {
-                       show: true,
-                       loopName: 'LOOP_h2NMX_v1_0_ResourceInstanceName1_tca',
-                       form: this.formProps
-               };
 
+               this.renderDcaeParameters = this.renderDcaeParameters.bind(this);
+               this.renderAllParameters = this.renderAllParameters.bind(this);
+               this.getDcaeParameters = this.getDcaeParameters.bind(this);
        }
-       initialValues() {
-                       const updatedForm = this.state.form;
-                       Object.keys(updatedForm).forEach((key) => {
-                       if (key === 'dcaeDeployParameters') {
-                               updatedForm[key] = JSON.stringify(this.state.form[key]);
-                       } else {
-                               updatedForm[key] = this.state.form[key];
-                       }
-                       this.setState({ form: updatedForm });
+
+       componentWillReceiveProps(newProps) {
+               this.setState({
+                       loopCache: newProps.loopCache,
+                       temporaryPropertiesJson: JSON.parse(JSON.stringify(newProps.loopCache.getGlobalProperties())),
+
                });
        }
+
        handleClose() {
-                       this.props.history.push('/');
+               this.props.history.push('/');
        }
-       handleChange(e) {
-                       const formUpdated =  this.state.form;
-                       formUpdated[e.target.name] = e.target.value;
-                       this.setState({ form: formUpdated });
-   };
-       saveProperties(event) {
-               // translate the deploymentParameter into jsonFormat at submit time
-               const updatedForm = this.state.form;
-               Object.keys(updatedForm).forEach((key) => {
-                       if (key === 'dcaeDeployParameters') {
-                               try {
-                                 let value = JSON.parse(updatedForm[key]);
-                                       updatedForm[key] = value;
-                                       // save Properties
-                                       this.setState( {form: updatedForm} );
-                                       LoopService.updateGlobalProperties(this.state.loopName, this.state.form);
-                                       this.props.history.push('/');
-                               } catch (error) {
-                                 alert("Deployment Parameters is not in good Json format. Please correct it.");
-                               }
-                       }
+
+       handleSave(event) {
+               LoopService.updateGlobalProperties(this.state.loopCache.getLoopName(), this.state.temporaryPropertiesJson).then(resp => {
+                       this.setState({ show: false });
+                       this.props.history.push('/');
+                       this.props.loadLoopFunction(this.state.loopCache.getLoopName());
                });
        }
+
+       handleChange(event) {
+               this.setState({temporaryPropertiesJson:{[event.target.name]: JSON.parse(event.target.value)}});
+       }
+
+       renderAllParameters() {
+               return (<Modal.Body>
+                       <Form>
+                               {this.renderDcaeParameters()}
+                       </Form>
+               </Modal.Body>
+               );
+       }
+
+       getDcaeParameters() {
+               if (typeof (this.state.temporaryPropertiesJson) !== "undefined") {
+                       return JSON.stringify(this.state.temporaryPropertiesJson["dcaeDeployParameters"]);
+               } else {
+                       return "";
+               }
+
+       }
+
+       renderDcaeParameters() {
+               return (
+                       <Form.Group >
+                               <Form.Label>Deploy Parameters</Form.Label>
+                               <Form.Control as="textarea" rows="3" name="dcaeDeployParameters" onChange={this.handleChange} defaultValue={this.getDcaeParameters()}></Form.Control>
+                       </Form.Group>
+               );
+       }
+
        render() {
                return (
-                       <ModalStyled size="lg"  show={this.state.show} onHide={this.handleClose} onEntered={this.initialValues}>
+                       <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} >
                                <Modal.Header closeButton>
                                        <Modal.Title>Model Properties</Modal.Title>
                                </Modal.Header>
-                               <Modal.Body>
-                                       <Form.Group controlId="exampleForm.ControlTextarea1">
-                                       <Form.Label>Deploy Parameters</Form.Label>
-                                       <Form.Control as="textarea" rows="3" name="dcaeDeployParameters" onChange={this.handleChange} defaultValue={this.state.form["dcaeDeployParameters"]}/>
-                                       </Form.Group>
-                               </Modal.Body>
+                                       {this.renderAllParameters()}
                                <Modal.Footer>
-                                       <Button variant="secondary" type="null" onClick={this.handleClose}>Cacel</Button>
-                                       <Button variant="primary" type="submit" onClick={this.saveProperties}>Save</Button>
+                                       <Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
+                                       <Button variant="primary" type="submit" onClick={this.handleSave}>Save Changes</Button>
                                </Modal.Footer>
                        </ModalStyled>
                );