Rework Loop properties window

Rework the loop properties window with React libraries.

Issue-ID: CLAMP-447
Change-Id: I5eba63aab39aeefe23d5fdc4732ce0d3d4a1682a
Signed-off-by: xuegao <xg353y@intl.att.com>

3 files changed, 116 insertions, 5 deletions

diff --git a/ui-react/src/components/dialogs/LoopProperties.js b/ui-react/src/components/dialogs/LoopProperties.js
new file mode 100644
index 000000000..2cde8d46b
--- /dev/null
+++ b/ui-react/src/components/dialogs/LoopProperties.js
@@ -0,0 +1,112 @@
+/*-
+ * ============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 LoopProperties extends React.Component {
+
+	formProps = {dcaeDeployParameters: {
+			"location_id": "",
+			"service_id": "",
+			"policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
+	}};
+
+	constructor(props, context) {
+		super(props, context);
+
+		this.handleClose = this.handleClose.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
+		};
+
+	}
+	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 });
+		});
+	}
+	handleClose() {
+			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.");
+				}
+			}
+		});
+	}
+	render() {
+		return (
+			<ModalStyled size="lg"  show={this.state.show} onHide={this.handleClose} onEntered={this.initialValues}>
+				<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>
+				<Modal.Footer>
+					<Button variant="secondary" type="null" onClick={this.handleClose}>Cacel</Button>
+					<Button variant="primary" type="submit" onClick={this.saveProperties}>Save</Button>
+				</Modal.Footer>
+			</ModalStyled>
+		);
+	}
+}
diff --git a/ui-react/src/components/loop_viewer/svg/LoopComponentConverter.js b/ui-react/src/components/loop_viewer/svg/LoopComponentConverter.js
index b737f3e19..a409d2cd0 100644
--- a/ui-react/src/components/loop_viewer/svg/LoopComponentConverter.js
+++ b/ui-react/src/components/loop_viewer/svg/LoopComponentConverter.js
@@ -3,16 +3,16 @@ export default class LoopComponentConverter {
 	static buildMapOfComponents(loopCache) {
 		var componentsMap = new Map([]);
 		if (typeof (loopCache.getMicroServicePolicies()) !== "undefined") {
-			loopCache.getMicroServicePolicies().map(ms => {
+			loopCache.getMicroServicePolicies().forEach(ms => {
 				componentsMap.set(ms.name, "/configurationPolicyModal/"+ms.name);
 			})
 		}
 		if (typeof (loopCache.getOperationalPolicies()) !== "undefined") {
-			loopCache.getOperationalPolicies().map(op => {
+			loopCache.getOperationalPolicies().forEach(op => {
 				componentsMap.set(op.name, "/operationalPolicyModal");
 			})
 		}
 		componentsMap.set("OperationalPolicy","/operationalPolicyModal");
 		return componentsMap;
 	}
-}
\ No newline at end of file
+}
diff --git a/ui-react/src/components/menu/MenuBar.js b/ui-react/src/components/menu/MenuBar.js
index 64aa6bc83..491cc675d 100644
--- a/ui-react/src/components/menu/MenuBar.js
+++ b/ui-react/src/components/menu/MenuBar.js
@@ -35,13 +35,12 @@ const StyledNavDropdownItem = styled(NavDropdown.Item)`
 `;
 
 export default class MenuBar extends React.Component {
-
 	render () {
 	   return (
 		  <Navbar.Collapse id="basic-navbar-nav" className="justify-content-center">
 		      <NavDropdown title="Closed Loop" id="basic-nav-dropdown">
 		        <StyledNavDropdownItem href="/openLoop">Open CL</StyledNavDropdownItem>
-		        <StyledNavDropdownItem href="#action/3.2">Properties CL</StyledNavDropdownItem>
+		        <StyledNavDropdownItem href="/loopProperties">Properties CL</StyledNavDropdownItem>
 		        <StyledNavDropdownItem href="/closeLoop">Close Model</StyledNavDropdownItem>
 		      </NavDropdown>
 					<NavDropdown title="Manage" id="basic-nav-dropdown">