1 files changed, 21 insertions, 9 deletions
diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js
index a1aff3d61..7d8fcb5cf 100644
--- a/ui-react/src/LoopUI.js
+++ b/ui-react/src/LoopUI.js
@@ -34,10 +34,12 @@ import LoopStatus from './components/loop_viewer/status/LoopStatus';
 import UserService from './api/UserService';
 import LoopCache from './api/LoopCache';
 
-import { Route } from 'react-router-dom'
+import { Route, Redirect } from 'react-router-dom'
 import OpenLoopModal from './components/dialogs/OpenLoop/OpenLoopModal';
 import OperationalPolicyModal from './components/dialogs/OperationalPolicy/OperationalPolicyModal';
 import ConfigurationPolicyModal from './components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal';
+import LoopProperties from './components/dialogs/LoopProperties';
+import UserInfo from './components/dialogs/UserInfo';
 
 const ProjectNameStyled = styled.a`
 	vertical-align: middle;
@@ -46,7 +48,7 @@ const ProjectNameStyled = styled.a`
 
 `
 const LoopViewDivStyled = styled.div`
-	height: 90vh;
+	height: 100%;
 	overflow: hidden;
 	margin-left: 10px;
 	margin-right: 10px;
@@ -78,9 +80,11 @@ const LoopViewLoopNameSpanStyled = styled.span`
 
 export default class LoopUI extends React.Component {
 
+	static defaultLoopName="Empty (NO loop loaded yet)";
+
 	state = {
 		userName: null,
-		loopName: "Empty (NO loop loaded yet)",
+		loopName: LoopUI.defaultLoopName,
 		loopCache: new LoopCache({}),
 	};
 
@@ -90,7 +94,7 @@ export default class LoopUI extends React.Component {
 		this.updateLoopCache = this.updateLoopCache.bind(this);
 	}
 
-	componentDidMount() {
+	componentWillMount() {
 		this.getUser();
 	}
 
@@ -102,7 +106,7 @@ export default class LoopUI extends React.Component {
 
 	renderMenuNavBar() {
 		return (
-			<MenuBar />
+			<MenuBar loopCache={this.state.loopCache}/>
 		);
 	}
 
@@ -136,7 +140,7 @@ export default class LoopUI extends React.Component {
 	renderLoopViewHeader() {
 		return (
 			<LoopViewHeaderDivStyled>
-				Loop Viewer - <LoopViewLoopNameSpanStyled id="loop_name">{this.state.loopName}</LoopViewLoopNameSpanStyled>
+				Loop Viewer - {this.state.loopName}
 			</LoopViewHeaderDivStyled>
 		);
 	}
@@ -145,12 +149,16 @@ export default class LoopUI extends React.Component {
 		return (
 			<LoopViewBodyDivStyled>
 				<LoopSvg loopCache={this.state.loopCache} />
-				<LoopLogs />
-				<LoopStatus />
+				<LoopStatus loopCache={this.state.loopCache}/>
+				<LoopLogs loopCache={this.state.loopCache} />
 			</LoopViewBodyDivStyled>
 		);
 	}
 
+	getLoopCache() {
+		return this.state.loopCache;
+
+	}
 	renderLoopViewer() {
 		return (
 			<LoopViewDivStyled>
@@ -162,6 +170,7 @@ export default class LoopUI extends React.Component {
 
 	updateLoopCache(loopJson) {
 		this.setState({ loopCache: new LoopCache(loopJson) });
+		this.setState({ loopName: this.state.loopCache.getLoopName() });
 	}
 
 	render() {
@@ -172,8 +181,11 @@ export default class LoopUI extends React.Component {
 				{this.renderLoopViewer()}
 				<Route path="/operationalPolicyModal"
 					render={(routeProps) => (<OperationalPolicyModal {...routeProps} loopCache={this.state.loopCache} />)} />
-				<Route path="/configurationPolicyModal" render={(routeProps) => (<ConfigurationPolicyModal {...routeProps} loopCache={this.state.loopCache} />)} />
+				<Route path="/configurationPolicyModal/:componentName" render={(routeProps) => (<ConfigurationPolicyModal {...routeProps} loopCache={this.state.loopCache} />)} />
 				<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>
 		);
 	}