1 files changed, 117 insertions, 0 deletions
diff --git a/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js b/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js
new file mode 100644
index 00000000..73946f45
--- /dev/null
+++ b/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js
@@ -0,0 +1,117 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP CLAMP
+ * ================================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END============================================
+ * ===================================================================
+ *
+ */
+
+import React from 'react'
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import Form from 'react-bootstrap/Form';
+import styled from 'styled-components';
+import LoopService from '../../../api/LoopService';
+
+const ModalStyled = styled(Modal)`
+	background-color: transparent;
+`
+export default class LoopPropertiesModal extends React.Component {
+
+	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.renderDcaeParameters = this.renderDcaeParameters.bind(this);
+		this.renderAllParameters = this.renderAllParameters.bind(this);
+		this.getDcaeParameters = this.getDcaeParameters.bind(this);
+	}
+
+	componentWillReceiveProps(newProps) {
+		this.setState({
+			loopCache: newProps.loopCache,
+			temporaryPropertiesJson: JSON.parse(JSON.stringify(newProps.loopCache.getGlobalProperties()))
+		});
+	}
+
+	handleClose() {
+		this.props.history.push('/');
+	}
+
+	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} >
+				<Modal.Header closeButton>
+					<Modal.Title>Model Properties</Modal.Title>
+				</Modal.Header>
+					{this.renderAllParameters()}
+				<Modal.Footer>
+					<Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
+					<Button variant="primary" type="submit" onClick={this.handleSave}>Save Changes</Button>
+				</Modal.Footer>
+			</ModalStyled>
+		);
+	}
+}