X-Git-Url: https://gerrit.onap.org/r/gitweb?a=blobdiff_plain;f=ui-react%2Fsrc%2Fcomponents%2Fdialogs%2FLoopProperties.js;h=990fe775437801ebce4b67a8bdb36d5cc078d801;hb=337f36602a553ecb937c041a27b1c7270571c647;hp=2cde8d46b3d7daab1d76847d6746ce33f2a18472;hpb=b09e7df8439398fc094a56ec33fa33950ac8fa9e;p=clamp.git

diff --git a/ui-react/src/components/dialogs/LoopProperties.js b/ui-react/src/components/dialogs/LoopProperties.js
index 2cde8d46..990fe775 100644
--- a/ui-react/src/components/dialogs/LoopProperties.js
+++ b/ui-react/src/components/dialogs/LoopProperties.js
@@ -30,81 +30,86 @@ 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>
 		);