Add saving + rework

Rework of the async calls to the backend + add saving of the properties
to backend + rework of the loop loading

Issue-ID: CLAMP-447
Change-Id: I126c88b3532613e6d4702e63c39a2735b98d132c
Signed-off-by: sebdet <sebastien.determe@intl.att.com>

3 files changed, 23 insertions, 22 deletions

diff --git a/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js b/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js
index b3b7383ea..4fbb7832c 100644
--- a/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js
+++ b/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js
@@ -46,25 +46,26 @@ export default class ConfigurationPolicyModal extends React.Component {
 		this.handleClose = this.handleClose.bind(this);
 		this.handleSave = this.handleSave.bind(this);
 		this.renderJsonEditor = this.renderJsonEditor.bind(this);
-		//this.state.componentName = props.match.params.componentName;
 	}
 
 	handleSave() {
-
 		var errors = this.state.jsonEditor.validate();
 		var editorData = this.state.jsonEditor.getValue();
 
 		if (errors.length !== 0) {
 			console.error("Errors detected during config policy data validation ", errors);
+			this.setState({ show: false });
+			this.props.history.push('/');
 		}
 		else {
 			console.info("NO validation errors found in config policy data");
 			this.state.loopCache.updateMicroServiceProperties(this.state.componentName, editorData[0]);
-			LoopService.setMicroServiceProperties(this.state.loopCache.getLoopName(), this.state.loopCache.getMicroServiceForName(this.state.componentName));
+			LoopService.setMicroServiceProperties(this.state.loopCache.getLoopName(), this.state.loopCache.getMicroServiceForName(this.state.componentName)).then(resp => {
+				this.setState({ show: false });
+				this.props.history.push('/');
+				this.props.loadLoopFunction(this.state.loopCache.getLoopName());
+			});
 		}
-
-		this.setState({ show: false });
-		this.props.history.push('/');
 	}
 
 	handleClose() {
diff --git a/ui-react/src/components/dialogs/LoopProperties.js b/ui-react/src/components/dialogs/LoopProperties.js
index 1c0d015af..dac77655f 100644
--- a/ui-react/src/components/dialogs/LoopProperties.js
+++ b/ui-react/src/components/dialogs/LoopProperties.js
@@ -36,6 +36,7 @@ export default class LoopProperties extends React.Component {
 	state = {
 		show: true,
 		loopCache: this.props.loopCache,
+		temporaryPropertiesJson: JSON.parse(JSON.stringify(this.props.loopCache.getGlobalProperties())),
 	};
 
 	constructor(props, context) {
@@ -43,6 +44,8 @@ export default class LoopProperties extends React.Component {
 
 		this.handleClose = this.handleClose.bind(this);
 		this.handleSave = this.handleSave.bind(this);
+		this.handleChange = this.handleChange.bind(this);
+		
 		this.renderDcaeParameters = this.renderDcaeParameters.bind(this);
 		this.renderAllParameters = this.renderAllParameters.bind(this);
 		this.getDcaeParameters = this.getDcaeParameters.bind(this);
@@ -51,6 +54,8 @@ export default class LoopProperties extends React.Component {
 	componentWillReceiveProps(newProps) {
 		this.setState({
 			loopCache: newProps.loopCache,
+			temporaryPropertiesJson: JSON.parse(JSON.stringify(newProps.loopCache.getGlobalProperties())),
+			
 		});
 	}
 
@@ -59,12 +64,15 @@ export default class LoopProperties extends React.Component {
 	}
 
 	handleSave(event) {
-		// translate the deploymentParameter into jsonFormat at submit time
-
+		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());
+		});
 	}
 
-	saveAllProperties() {
-
+	handleChange(event) {
+		this.setState({temporaryPropertiesJson:{[event.target.name]: JSON.parse(event.target.value)}});
 	}
 
 	renderAllParameters() {
@@ -77,8 +85,8 @@ export default class LoopProperties extends React.Component {
 	}
 
 	getDcaeParameters() {
-		if (typeof (this.state.loopCache.getGlobalProperties()) !== "undefined") {
-			return JSON.stringify(this.state.loopCache.getGlobalProperties()["dcaeDeployParameters"]);
+		if (typeof (this.state.temporaryPropertiesJson) !== "undefined") {
+			return JSON.stringify(this.state.temporaryPropertiesJson["dcaeDeployParameters"]);
 		} else {
 			return "";
 		}
@@ -89,7 +97,7 @@ export default class LoopProperties extends React.Component {
 		return (
 			<Form.Group >
 				<Form.Label>Deploy Parameters</Form.Label>
-				<Form.Control as="textarea" rows="3" name="dcaeDeployParameters">{this.getDcaeParameters()}</Form.Control>
+				<Form.Control as="textarea" rows="3" name="dcaeDeployParameters" onChange={this.handleChange} defaultValue={this.getDcaeParameters()}></Form.Control>
 			</Form.Group>
 		);
 	}
diff --git a/ui-react/src/components/dialogs/OpenLoop/OpenLoopModal.js b/ui-react/src/components/dialogs/OpenLoop/OpenLoopModal.js
index 0bf71580a..fbfc727eb 100644
--- a/ui-react/src/components/dialogs/OpenLoop/OpenLoopModal.js
+++ b/ui-react/src/components/dialogs/OpenLoop/OpenLoopModal.js
@@ -44,7 +44,6 @@ export default class OpenLoopModal extends React.Component {
 
 		this.getLoopNames = this.getLoopNames.bind(this);
 		this.handleOpen = this.handleOpen.bind(this);
-		this.getModel = this.getModel.bind(this);
 		this.handleClose = this.handleClose.bind(this);
 		this.handleDropdownListChange = this.handleDropdownListChange.bind(this);
 		this.state = {
@@ -74,18 +73,11 @@ export default class OpenLoopModal extends React.Component {
 		});
 	}
 
-	getModel() {
-		LoopService.getLoop(this.state.chosenLoopName).then(loop => {
-			console.debug("Settingloop cache with json");
-			this.props.updateLoopCacheFunction(loop);
-		});
-	}
-
 	handleOpen() {
 		console.info("Loop " + this.state.chosenLoopName + " is chosen");
 		this.setState({ show: false });
 		this.props.history.push('/');
-		this.getModel();
+		this.props.loadLoopFunction(this.state.chosenLoopName);
 	}
 
 	render() {