Fix loop prop window

Fix the loop Properties windows

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

8 files changed, 113 insertions, 108 deletions

diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js
index 7d8fcb5c..9956e3c9 100644
--- a/ui-react/src/LoopUI.js
+++ b/ui-react/src/LoopUI.js
@@ -175,18 +175,18 @@ export default class LoopUI extends React.Component {
 
 	render() {
 		return (
-			<div id="main_div">
-				<GlobalClampStyle />
-				{this.renderNavBar()}
-				{this.renderLoopViewer()}
+				<div id="main_div">
 				<Route path="/operationalPolicyModal"
-					render={(routeProps) => (<OperationalPolicyModal {...routeProps} loopCache={this.state.loopCache} />)} />
-				<Route path="/configurationPolicyModal/:componentName" render={(routeProps) => (<ConfigurationPolicyModal {...routeProps} loopCache={this.state.loopCache} />)} />
+					render={(routeProps) => (<OperationalPolicyModal {...routeProps} loopCache={this.getLoopCache()} />)} />
+				<Route path="/configurationPolicyModal/:componentName" render={(routeProps) => (<ConfigurationPolicyModal {...routeProps} loopCache={this.getLoopCache()} />)} />
 				<Route path="/openLoop" render={(routeProps) => (<OpenLoopModal {...routeProps} updateLoopCacheFunction={this.updateLoopCache} />)} />
 				<Route path="/loopProperties" render={(routeProps) => (<LoopProperties {...routeProps} loopCache={this.getLoopCache()} />)} />
 				<Route path="/userInfo" render={(routeProps) => (<UserInfo {...routeProps} />)} />
 				<Route path="/closeLoop" render={(routeProps) => (<Redirect to='/'/>)} />
-			</div>
+					<GlobalClampStyle />
+					{this.renderNavBar()}
+					{this.renderLoopViewer()}
+				</div>
 		);
 	}
 }
diff --git a/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js b/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js
index 8178bf47..b3b7383e 100644
--- a/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js
+++ b/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js
@@ -38,7 +38,7 @@ export default class ConfigurationPolicyModal extends React.Component {
 		show: true,
 		loopCache: this.props.loopCache,
 		jsonEditor: null,
-		componentName: "",
+		componentName: this.props.match.params.componentName,
 	};
 
 	constructor(props, context) {
@@ -46,7 +46,7 @@ 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;
+		//this.state.componentName = props.match.params.componentName;
 	}
 
 	handleSave() {
diff --git a/ui-react/src/components/dialogs/LoopProperties.js b/ui-react/src/components/dialogs/LoopProperties.js
index 2cde8d46..1c0d015a 100644
--- a/ui-react/src/components/dialogs/LoopProperties.js
+++ b/ui-react/src/components/dialogs/LoopProperties.js
@@ -33,78 +33,77 @@ const ModalStyled = styled(Modal)`
 
 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,
+	};
 
 	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
-		};
-
+		this.handleSave = this.handleSave.bind(this);
+		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,
 		});
 	}
+
 	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) {
+
+	handleSave(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.");
-				}
-			}
-		});
+
 	}
+
+	saveAllProperties() {
+
+	}
+
+	renderAllParameters() {
+		return (<Modal.Body>
+			<Form>
+				{this.renderDcaeParameters()}
+			</Form>
+		</Modal.Body>
+		);
+	}
+
+	getDcaeParameters() {
+		if (typeof (this.state.loopCache.getGlobalProperties()) !== "undefined") {
+			return JSON.stringify(this.state.loopCache.getGlobalProperties()["dcaeDeployParameters"]);
+		} else {
+			return "";
+		}
+		
+	}
+
+	renderDcaeParameters() {
+		return (
+			<Form.Group >
+				<Form.Label>Deploy Parameters</Form.Label>
+				<Form.Control as="textarea" rows="3" name="dcaeDeployParameters">{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>
 		);
diff --git a/ui-react/src/components/dialogs/UserInfo.js b/ui-react/src/components/dialogs/UserInfo.js
index a8ef717b..b8d68b84 100644
--- a/ui-react/src/components/dialogs/UserInfo.js
+++ b/ui-react/src/components/dialogs/UserInfo.js
@@ -153,7 +153,7 @@ export default class UserInfo extends React.Component {
 					</Form.Group>
 				</Modal.Body>
 				<Modal.Footer>
-					<Button variant="secondary" type="null" onClick={this.handleClose}>Cacel</Button>
+					<Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
 				</Modal.Footer>
 			</ModalStyled>
 		);
diff --git a/ui-react/src/components/loop_viewer/status/LoopStatus.css b/ui-react/src/components/loop_viewer/status/LoopStatus.css
deleted file mode 100644
index 14add0f5..00000000
--- a/ui-react/src/components/loop_viewer/status/LoopStatus.css
+++ /dev/null
@@ -1,19 +0,0 @@
-
-.status_title{
-	position: absolute;
-	left: 61%;
-	top: 151px;
-	font-size:20px;
-}
-.status{
-	background-color: gray;
-	-moz-border-radius: 50px;
-	-webkit-border-radius: 50px;
-	border-radius: 50px;
-}
-.status_table {
-	position: absolute;
-	left: 61%;
-	top: 191px;
-	font-size:10px;
-}
\ 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 491cc675..811a48ba 100644
--- a/ui-react/src/components/menu/MenuBar.js
+++ b/ui-react/src/components/menu/MenuBar.js
@@ -25,41 +25,61 @@ import Navbar from 'react-bootstrap/Navbar';
 import NavDropdown from 'react-bootstrap/NavDropdown';
 import 'bootstrap-css-only/css/bootstrap.min.css';
 import styled from 'styled-components';
+import { Link } from 'react-router-dom'
 
 const StyledNavDropdownItem = styled(NavDropdown.Item)`
-	color: ${props => props.theme.fontNormal};
+	color: ${props => props.theme.menuFontColor};
+	background-color: ${props => props.theme.menuBackgroundColor};
 	:hover {
+			background-color: ${props => props.theme.menuHighlightedBackgroundColor};
+			color:  ${props => props.theme.menuHighlightedFontColor};
+	}
+`;
+
+const StyledLink = styled(Link)`
+	color: ${props => props.theme.menuColor};
+	background-color: ${props => props.theme.menuBackgroundColor};
+	font-weight: normal;
+	display: block;
+	width: 100%;
+	padding: .25rem 1.5rem;
+	clear: both;
+	text-align: inherit;
+	white-space: nowrap;
+	border: 0;
+	:hover {
+			text-decoration: none;
 			background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
-			color:  ${props => props.theme.loopViewerHeaderFontColor}
+			color:  ${props => props.theme.loopViewerHeaderFontColor};
 	}
 `;
 
 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="/loopProperties">Properties CL</StyledNavDropdownItem>
-		        <StyledNavDropdownItem href="/closeLoop">Close Model</StyledNavDropdownItem>
-		      </NavDropdown>
+		return (
+				<Navbar.Collapse id="basic-navbar-nav" className="justify-content-center">
+					<NavDropdown title="Closed Loop" id="basic-nav-dropdown">
+						<StyledNavDropdownItem as={StyledLink} to="/openLoop">Open CL</StyledNavDropdownItem>
+						<StyledNavDropdownItem as={StyledLink} to="/loopProperties">Properties CL</StyledNavDropdownItem>
+						<StyledNavDropdownItem as={StyledLink} to="/closeLoop">Close Model</StyledNavDropdownItem>
+					</NavDropdown>
 					<NavDropdown title="Manage" id="basic-nav-dropdown">
-						<StyledNavDropdownItem href="/operationalPolicyModal">Submit</StyledNavDropdownItem>
-						<StyledNavDropdownItem href="#action/3.2">Stop</StyledNavDropdownItem>
-						<StyledNavDropdownItem href="#action/3.3">Restart</StyledNavDropdownItem>
-						<StyledNavDropdownItem href="#action/3.3">Delete</StyledNavDropdownItem>
-						<StyledNavDropdownItem href="#action/3.3">Deploy</StyledNavDropdownItem>
-						<StyledNavDropdownItem href="#action/3.3">UnDeploy</StyledNavDropdownItem>
+						<StyledNavDropdownItem as={StyledLink} to="/operationalPolicyModal">Submit</StyledNavDropdownItem>
+						<StyledNavDropdownItem as={StyledLink} to="#action/3.2">Stop</StyledNavDropdownItem>
+						<StyledNavDropdownItem as={StyledLink} to="#action/3.3">Restart</StyledNavDropdownItem>
+						<StyledNavDropdownItem as={StyledLink} to="#action/3.3">Delete</StyledNavDropdownItem>
+						<StyledNavDropdownItem as={StyledLink} to="#action/3.3">Deploy</StyledNavDropdownItem>
+						<StyledNavDropdownItem as={StyledLink} to="#action/3.3">UnDeploy</StyledNavDropdownItem>
 					</NavDropdown>
 					<NavDropdown title="View" id="basic-nav-dropdown">
-						<StyledNavDropdownItem href="#action/3.1">Refresh Status</StyledNavDropdownItem>
+						<StyledNavDropdownItem as={StyledLink} to="#action/3.1">Refresh Status</StyledNavDropdownItem>
+					</NavDropdown>
+					<NavDropdown title="Help" id="basic-nav-dropdown">
+						<StyledNavDropdownItem href="https://wiki.onap.org/" target="_blank">Wiki</StyledNavDropdownItem>
+						<StyledNavDropdownItem href="mailto:onap-discuss@lists.onap.org?subject=CLAMP&body=Please send us suggestions or feature enhancements or defect. If possible, please send us the steps to replicate any defect.">Contact Us</StyledNavDropdownItem>
+						<StyledNavDropdownItem as={StyledLink} to="/userInfo">User Info</StyledNavDropdownItem>
 					</NavDropdown>
-				<NavDropdown title="Help" id="basic-nav-dropdown">
-					<StyledNavDropdownItem href="https://wiki.onap.org/" target="_blank">Wiki</StyledNavDropdownItem>
-					<StyledNavDropdownItem href="mailto:onap-discuss@lists.onap.org?subject=CLAMP&body=Please send us suggestions or feature enhancements or defect. If possible, please send us the steps to replicate any defect.">Contact Us</StyledNavDropdownItem>
-					<StyledNavDropdownItem href="#action/3.3">User Info</StyledNavDropdownItem>
-				</NavDropdown>
-		  </Navbar.Collapse>
-	   );
-  }
+				</Navbar.Collapse>
+		);
+	}
 }
diff --git a/ui-react/src/index.js b/ui-react/src/index.js
index 8a62b5a2..39df3642 100644
--- a/ui-react/src/index.js
+++ b/ui-react/src/index.js
@@ -27,7 +27,7 @@ import { Route, BrowserRouter } from 'react-router-dom'
 
 
 const routing = (
-	<BrowserRouter >
+	<BrowserRouter forceRefresh={false}>
 		<Route path="/" component={OnapClamp}/>
 	</BrowserRouter>
 );
diff --git a/ui-react/src/theme/globalStyle.js b/ui-react/src/theme/globalStyle.js
index 08630cbd..cbd86b19 100644
--- a/ui-react/src/theme/globalStyle.js
+++ b/ui-react/src/theme/globalStyle.js
@@ -83,4 +83,9 @@ export const DefaultClampTheme = {
 	loopViewerFontColor: 'yellow',
 	loopViewerHeaderBackgroundColor: '#337ab7',
 	loopViewerHeaderFontColor: 'white',
+	
+	menuBackgroundColor: 'white',
+	menuFontColor: 'black',
+	menuHighlightedBackgroundColor: '#337ab7',
+	menuHighlightedFontColor: 'white',
 };