SVG Rendering

SVG rendering draft for Config and operational policies management +
call to back-end

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

16 files changed, 372 insertions, 710 deletions

diff --git a/ui-react/package.json b/ui-react/package.json
index 1b98d0f12..f1ae2bc9d 100644
--- a/ui-react/package.json
+++ b/ui-react/package.json
@@ -13,7 +13,7 @@
   "author": "ONAP Clamp Team",
   "license": "Apache-2.0",
   "dependencies": {
-    "json-editor": "0.7.28",
+    "@json-editor/json-editor": "1.3.5",
     "react": "16.8.0",
     "react-dom": "16.8.0",
     "react-scripts": "3.0.1",
diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js
index 997f94b18..a1aff3d61 100644
--- a/ui-react/src/LoopUI.js
+++ b/ui-react/src/LoopUI.js
@@ -28,10 +28,16 @@ import Navbar from 'react-bootstrap/Navbar';
 import logo from './logo.png';
 import { GlobalClampStyle } from './theme/globalStyle.js';
 
-import ClosedLoopSvg from './components/loop_viewer/svg/ClosedLoopSvg';
-import ClosedLoopLogs from './components/loop_viewer/logs/ClosedLoopLogs';
-import ClosedLoopStatus from './components/loop_viewer/status/ClosedLoopStatus';
+import LoopSvg from './components/loop_viewer/svg/LoopSvg';
+import LoopLogs from './components/loop_viewer/logs/LoopLogs';
+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 OpenLoopModal from './components/dialogs/OpenLoop/OpenLoopModal';
+import OperationalPolicyModal from './components/dialogs/OperationalPolicy/OperationalPolicyModal';
+import ConfigurationPolicyModal from './components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal';
 
 const ProjectNameStyled = styled.a`
 	vertical-align: middle;
@@ -71,26 +77,29 @@ const LoopViewLoopNameSpanStyled = styled.span`
 `
 
 export default class LoopUI extends React.Component {
+
 	state = {
 		userName: null,
 		loopName: "Empty (NO loop loaded yet)",
+		loopCache: new LoopCache({}),
 	};
 
 	constructor() {
 		super();
 		this.getUser = this.getUser.bind(this);
+		this.updateLoopCache = this.updateLoopCache.bind(this);
+	}
+
+	componentDidMount() {
+		this.getUser();
 	}
-	
- 	componentDidMount() {
-		 this.getUser();
-	 }
 
 	getUser() {
-		UserService.LOGIN().then(user => {
-			this.setState({userName:user})
+		UserService.login().then(user => {
+			this.setState({ userName: user })
 		});
 	}
-		
+
 	renderMenuNavBar() {
 		return (
 			<MenuBar />
@@ -108,7 +117,7 @@ export default class LoopUI extends React.Component {
 	renderLogoNavBar() {
 		return (
 			<Navbar.Brand>
-				<img height="50px" width="234px" src={logo} alt=""/>
+				<img height="50px" width="234px" src={logo} alt="" />
 				<ProjectNameStyled>CLAMP</ProjectNameStyled>
 			</Navbar.Brand>
 		);
@@ -116,48 +125,56 @@ export default class LoopUI extends React.Component {
 
 	renderNavBar() {
 		return (
-		<Navbar expand="lg">
-			{this.renderLogoNavBar()}
-			{this.renderMenuNavBar()}
-			{this.renderUserLoggedNavBar()}
-		</Navbar>
-	);
+			<Navbar expand="lg">
+				{this.renderLogoNavBar()}
+				{this.renderMenuNavBar()}
+				{this.renderUserLoggedNavBar()}
+			</Navbar>
+		);
 	}
-	
+
 	renderLoopViewHeader() {
 		return (
 			<LoopViewHeaderDivStyled>
-				Loop Viewer - <LoopViewLoopNameSpanStyled id="loop_name">{this.state.loopName}</LoopViewLoopNameSpanStyled> 
+				Loop Viewer - <LoopViewLoopNameSpanStyled id="loop_name">{this.state.loopName}</LoopViewLoopNameSpanStyled>
 			</LoopViewHeaderDivStyled>
 		);
 	}
-	
+
 	renderLoopViewBody() {
 		return (
 			<LoopViewBodyDivStyled>
-				<ClosedLoopSvg />
-				<ClosedLoopLogs />
-				<ClosedLoopStatus />
+				<LoopSvg loopCache={this.state.loopCache} />
+				<LoopLogs />
+				<LoopStatus />
 			</LoopViewBodyDivStyled>
 		);
 	}
-	
+
 	renderLoopViewer() {
 		return (
 			<LoopViewDivStyled>
-					{this.renderLoopViewHeader()}
-					{this.renderLoopViewBody()}
+				{this.renderLoopViewHeader()}
+				{this.renderLoopViewBody()}
 			</LoopViewDivStyled>
-	 		);
+		);
 	}
-	
+
+	updateLoopCache(loopJson) {
+		this.setState({ loopCache: new LoopCache(loopJson) });
+	}
+
 	render() {
 		return (
 			<div id="main_div">
-				 	<GlobalClampStyle />
-					{this.renderNavBar()}
-					{this.renderLoopViewer()}
-				</div>
+				<GlobalClampStyle />
+				{this.renderNavBar()}
+				{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="/openLoop" render={(routeProps) => (<OpenLoopModal {...routeProps} updateLoopCacheFunction={this.updateLoopCache} />)} />
+			</div>
 		);
 	}
 }
diff --git a/ui-react/src/api/LoopCache.js b/ui-react/src/api/LoopCache.js
index d44b5cfd8..4c8f68c23 100644
--- a/ui-react/src/api/LoopCache.js
+++ b/ui-react/src/api/LoopCache.js
@@ -21,15 +21,14 @@
  *
  */
 
-class LoopCache {
+export default class LoopCache {
 	loopJsonCache;
 
 	constructor(loopJson) {
 		this.loopJsonCache=loopJson;
-		//LoopCache.SET_LOOP_JSON_CACHE(require('./example.json');
 	}
 
-	updateMsProperties(type, newMsProperties) {
+	updateMicroServiceProperties(type, newMsProperties) {
 		if (newMsProperties["name"] === type) {
 			for (var policy in this.loopJsonCache["microServicePolicies"]) {
 				if (this.loopJsonCache["microServicePolicies"][policy]["name"] === type) {
@@ -43,7 +42,7 @@ class LoopCache {
 		this.loopJsonCache["globalPropertiesJson"] = newGlobalProperties;
 	}
 
-	updateOpPolicyProperties(newOpProperties) {
+	updateOperationalPolicyProperties(newOpProperties) {
 		this.loopJsonCache["operationalPolicies"] = newOpProperties;
 	}
 
@@ -51,7 +50,7 @@ class LoopCache {
 		return this.loopJsonCache["name"];
 	}
 
-	getOperationalPolicyProperty() {
+	getOperationalPolicyConfigurationJson() {
 		return JSON.parse(JSON.stringify(this.loopJsonCache["operationalPolicies"]["0"]["configurationsJson"]));
 	}
 
@@ -59,15 +58,15 @@ class LoopCache {
 		return JSON.parse(JSON.stringify(this.loopJsonCache["operationalPolicies"]));
 	}
 
-	getGlobalProperty() {
+	getGlobalProperties() {
 		return JSON.parse(JSON.stringify(this.loopJsonCache["globalPropertiesJson"]));
 	}
 
-	getDeploymentProperties() {
+	getDcaeDeploymentProperties() {
 		return JSON.parse(JSON.stringify(this.loopJsonCache["globalPropertiesJson"]["dcaeDeployParameters"]));
 	}
 
-	getMsJson(type) {
+	getMicroServicesJsonForType(type) {
 		var msProperties = this.loopJsonCache["microServicePolicies"];
 		for (var policy in msProperties) {
 			if (msProperties[policy]["name"] === type) {
@@ -77,7 +76,7 @@ class LoopCache {
 		return null;
 	}
 
-	getMsProperty(type) {
+	getMicroServiceProperties(type) {
 		var msProperties = this.loopJsonCache["microServicePolicies"];
 		for (var policy in msProperties) {
 			if (msProperties[policy]["name"] === type) {
@@ -89,7 +88,7 @@ class LoopCache {
 		return null;
 	}
 
-	getMsUI(type) {
+	getMicroServiceJsonRepresentationForType(type) {
 		var msProperties = this.loopJsonCache["microServicePolicies"];
 		for (var policy in msProperties) {
 			if (msProperties[policy]["name"] === type) {
@@ -114,16 +113,4 @@ class LoopCache {
 	getComponentStates() {
 		return this.loopJsonCache.components;
 	}
-
-	get getLoopJsonCache() {
-		return this.loopJsonCache;
-	}
-
-	set setLoopJsonCache(newJson) {
-		this.loopJsonCache = newJson;
-	}
 }
-
-export const LOOP_CACHE = new LoopCache(require('./example.json'));
-
-export default LoopCache;
diff --git a/ui-react/src/api/LoopService.js b/ui-react/src/api/LoopService.js
index f59f45763..2813a7c08 100644
--- a/ui-react/src/api/LoopService.js
+++ b/ui-react/src/api/LoopService.js
@@ -22,55 +22,62 @@
 
 export default class LoopService {
 	static getLoopNames() {
-		const url = '/restservices/clds/v2/loop/getAllNames';
-		const options = {
-			method: 'GET'
-		};
-		return fetch(url,options)
-		.then(function (response) {
-			if (response.ok) {
-				console.log("GetLoopNames response received: ", response.status);
-				return response.json();
-			} else {
-				let errorMsg = "GetLoopNames failed with status code: " + response.status;
-				console.error(errorMsg);
-				return Promise.reject(errorMsg);
-			}
-		})
-		.then(function (data) {
-			return data;
-		})
-		.catch(function(error) {
-			console.error("GetLoopNames error received",error);
-			return Promise.reject(error);
-		});
+		return fetch('/restservices/clds/v2/loop/getAllNames', { method: 'GET', credentials: 'include', })
+			.then(function (response) {
+				console.debug("GetLoopNames response received: ", response.status);
+				if (response.ok) {
+					return response.json();
+				} else {
+					console.error("GetLoopNames query failed");
+					return {};
+				}
+			})
+			.catch(function (error) {
+				console.error("GetLoopNames error received", error);
+				return {};
+			});
 	}
 
 	static getLoop(loopName) {
-		const url = '/restservices/clds/v2/loop/' + loopName;
-		const options = {
+		return fetch('/restservices/clds/v2/loop/' + loopName, {
 			method: 'GET',
 			headers: {
 				"Content-Type": "application/json"
-			}
-		};
-		return fetch(url,options)
-		.then(function (response) {
-			if (response.ok) {
-				console.log("GetLoop response received: ", response.status);
-				return response.json();
-			} else {
-				let errorMsg = "GetLoop failed with status code: " + response.status;
-				console.error(errorMsg);
-				return Promise.reject(errorMsg);
-			}
+			},
+			credentials: 'include',
 		})
-		.then(function (data) {
-			return data;
+			.then(function (response) {
+				console.debug("GetLoop response received: ", response.status);
+				if (response.ok) {
+					return response.json();
+				} else {
+					console.error("GetLoop query failed");
+					return {};
+				}
+			})
+			.catch(function (error) {
+				console.error("GetLoop error received", error);
+				return {};
+			});
+	}
+
+	static getSvg(loopName) {
+		return fetch('/restservices/clds/v2/loop/svgRepresentation/' + loopName, {
+			method: 'GET',
+			credentials: 'include',
 		})
-		.catch(function(error) {
-			console.error("GetLoop error received",error);
-			return Promise.reject(error);
-		});
+			.then(function (response) {
+				console.debug("svgRepresentation response received: ", response.status);
+				if (response.ok) {
+					return response.text();
+				} else {
+					console.error("svgRepresentation query failed");
+					return "";
+				}
+			})
+			.catch(function (error) {
+				console.error("svgRepresentation error received", error);
+				return "";
+			});
 	}
 }
diff --git a/ui-react/src/api/UserService.js b/ui-react/src/api/UserService.js
index 814539551..8f53d7b8a 100644
--- a/ui-react/src/api/UserService.js
+++ b/ui-react/src/api/UserService.js
@@ -22,28 +22,29 @@
  */
 
 export default class UserService {
-
-	static LOGIN() {
+	static notLoggedUserName='Anonymous';
+	static login() {
 		return fetch('/restservices/clds/v1/user/getUser', {
 				method: 'GET',
 				credentials: 'include',
 			})
 		.then(function (response) {
+			console.debug("getUser response received, status code:", response.status);
 			if (response.ok) {
-				console.log("getUser response received: ", response.status);
 				return response.text();
 			} else {
-				console.error("getUser failed with status code: ",response.status);
-				return "Anonymous";
+				console.error("getUser response is nok");
+				return UserService.notLoggedUserName;
 			}
 		})
 		.then(function (data) {
-			console.log ("User connected:",data)
+			console.info ("User connected:",data)
 			return data;
 		})
 		.catch(function(error) {
-			console.error("getUser error received",error);
-			return "Anonymous";
+			console.warn("getUser error received, user set to: ",UserService.notLoggedUserName);
+			console.error("getUser error:",error);
+			return UserService.notLoggedUserName;
 		});
 	}
 }
diff --git a/ui-react/src/api/example.json b/ui-react/src/api/example.json
index f3cc9e189..108cf78e2 100644
--- a/ui-react/src/api/example.json
+++ b/ui-react/src/api/example.json
@@ -1,5 +1,5 @@
 {
-  "name": "LOOP_h2NMX_v1_0_ResourceInstanceName1_tca",
+  "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
   "dcaeBlueprintId": "typeId-3a942643-a8f7-4e54-b2c1-eea8daba2b17",
   "globalPropertiesJson": {
     "dcaeDeployParameters": {
diff --git a/ui-react/src/components/loop_viewer/svg/ClosedLoopSvg.js b/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js
index d9f5eaf80..1a8b6e2c5 100644
--- a/ui-react/src/components/loop_viewer/svg/ClosedLoopSvg.js
+++ b/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js
@@ -20,24 +20,58 @@
  * ===================================================================
  *
  */
-import React from 'react';
+
+import React from 'react'
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import { LOOP_CACHE } from '../../../api/LoopCache'
 import styled from 'styled-components';
-import { ReactComponent as SvgExample } from './example.svg';
-const LoopViewSvgDivStyle = styled.div`
 
-	overflow: hidden;
-	background-color: ${props => (props.theme.loopViewerBackgroundColor)};
-	border: 1px solid transparent;
-	border-color: ${props => (props.theme.loopViewerHeaderColor)};
+const ModalStyled = styled(Modal)`
+	background-color: transparent;
 `
 
-export default class ClosedLoopViewSvg extends React.Component {
-  render() {
-    return (
-    	<LoopViewSvgDivStyle id="loop_svg">
-    		<SvgExample />
-    	</LoopViewSvgDivStyle>
-    );
-  }
-}
+export default class ConfigurationPolicyModal extends React.Component {
+
+	constructor(props, context) {
+		super(props, context);
+
+		this.handleClose = this.handleClose.bind(this);
+
+		this.state = {
+			show: true,
+		};
+
+	}
+
+	handleClose() {
+		this.setState({ show: false });
+		this.props.history.push('/')
+	}
+
+
+
+	render() {
+		return (
+			<ModalStyled size="lg" show={this.state.show} onHide={this.handleClose}>
+				<Modal.Header closeButton>
+					<Modal.Title>Configuration policies</Modal.Title>
+				</Modal.Header>
+				<Modal.Body>
+
+
+
+				</Modal.Body>
+				<Modal.Footer>
+					<Button variant="secondary" onClick={this.handleClose}>
+						Close
+	            </Button>
+					<Button variant="primary" onClick={this.handleClose}>
+						Save Changes
+	            </Button>
+				</Modal.Footer>
+			</ModalStyled>
 
+		);
+	}
+}
\ No newline at end of file
diff --git a/ui-react/src/components/dialogs/LoopModal.js b/ui-react/src/components/dialogs/OpenLoop/OpenLoopModal.js
index 6dc04d19c..6986209d4 100644
--- a/ui-react/src/components/dialogs/LoopModal.js
+++ b/ui-react/src/components/dialogs/OpenLoop/OpenLoopModal.js
@@ -29,8 +29,7 @@ import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import FormCheck from 'react-bootstrap/FormCheck'
 import styled from 'styled-components';
-import LoopService from '../../api/LoopService';
-import LoopCache from '../../api/LoopCache';
+import LoopService from '../../../api/LoopService';
 
 const ModalStyled = styled(Modal)`
 	background-color: transparent;
@@ -39,46 +38,56 @@ const CheckBoxStyled = styled(FormCheck.Input)`
 	margin-left:3rem;
 `
 
-export default class LoopModal extends React.Component {
+export default class OpenLoopModal extends React.Component {
 	constructor(props, context) {
 		super(props, context);
 
 		this.getLoopNames = this.getLoopNames.bind(this);
-		this.openModel = this.openModel.bind(this);
+		this.handleOpen = this.handleOpen.bind(this);
+		this.getModel = this.getModel.bind(this);
 		this.handleClose = this.handleClose.bind(this);
 		this.handleDropdownListChange = this.handleDropdownListChange.bind(this);
 		this.state = {
 			show: true,
 			chosenLoopName: '',
-			loopNames:[]
+			loopNames: []
 		};
 	}
+
 	componentDidMount() {
-		 this.getLoopNames();
-	 }
+		this.getLoopNames();
+	}
+
 	handleClose() {
 		this.setState({ show: false });
-			this.props.history.push('/');
+		this.props.history.push('/');
 	}
+
 	handleDropdownListChange(e) {
-		this.setState({ chosenLoopName: e.value});
+		this.setState({ chosenLoopName: e.value });
 	}
+
 	getLoopNames() {
 		LoopService.getLoopNames().then(loopNames => {
-			const loopOptions = loopNames.map((loopName) => { return {label: loopName,  value: loopName}});
-			this.setState({loopNames:loopOptions})
+			const loopOptions = loopNames.map((loopName) => { return { label: loopName, value: loopName } });
+			this.setState({ loopNames: loopOptions })
 		});
 	}
-	openModel() {
-		this.setState({ show: false });
-		this.props.history.push('/');
-		// Open selected model
-		console.log("Loop " + this.state.chosenLoopName + " is chosen");
+
+	getModel() {
 		LoopService.getLoop(this.state.chosenLoopName).then(loop => {
-			console.log("Initialize the loop cache");
-			new LoopCache(loop);
+			console.debug("Settingloop cache with json");
+			this.props.updateLoopCacheFunction(loop);
 		});
 	}
+
+	handleOpen() {
+		console.info("Loop " + this.state.chosenLoopName + " is chosen");
+		this.setState({ show: false });
+		this.props.history.push('/');
+		this.getModel();
+	}
+
 	render() {
 		return (
 			<ModalStyled size="lg" show={this.state.show} onHide={this.handleClose}>
@@ -89,19 +98,19 @@ export default class LoopModal extends React.Component {
 					<Form.Group as={Row} controlId="formPlaintextEmail">
 						<Form.Label column sm="2">Model Name</Form.Label>
 						<Col sm="10">
-							<Select onChange={this.handleDropdownListChange} options={ this.state.loopNames } />
+							<Select onChange={this.handleDropdownListChange} options={this.state.loopNames} />
 						</Col>
 					</Form.Group>
 					<Form.Group controlId="formBasicChecbox">
-	 					<Form.Check>
+						<Form.Check>
 							<FormCheck.Label>Read Only</FormCheck.Label>
 							<CheckBoxStyled type="checkbox" />
 						</Form.Check>
- 					</Form.Group>
+					</Form.Group>
 				</Modal.Body>
 				<Modal.Footer>
-					<Button variant="secondary" type="null" onClick={this.handleClose}>Cacel</Button>
-					<Button variant="primary" type="submit" onClick={this.openModel}>OK</Button>
+					<Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
+					<Button variant="primary" type="submit" onClick={this.handleOpen}>OK</Button>
 				</Modal.Footer>
 			</ModalStyled>
 
diff --git a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js
index fd53300d6..6822f3ff3 100644
--- a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js
+++ b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js
@@ -24,7 +24,6 @@
 import React from 'react'
 import Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
-import { LOOP_CACHE } from '../../../api/LoopCache'
 import './OperationalPolicy.css'
 import styled from 'styled-components';
 
@@ -34,30 +33,30 @@ const ModalStyled = styled(Modal)`
 
 export default class OperationalPolicyModal extends React.Component {
 
+	state = {
+		show: true,
+		loopCache: this.props.loopCache,
+	};
+
+	allPolicies = [];
+	policyIds = [];
+
 	constructor(props, context) {
 		super(props, context);
 
 		this.handleClose = this.handleClose.bind(this);
 		this.initPolicySelect = this.initPolicySelect.bind(this);
-
-		this.allPolicies = [];
-		this.policyIds = [];
-
 		this.initPolicySelect();
-
-		this.state = {
-			show: true,
-		};
-
 	}
 
 	handleClose() {
 		this.setState({ show: false });
+		this.props.history.push('/')
 	}
 
 	initPolicySelect() {
 		if (this.allPolicies['operational_policy'] === undefined || this.allPolicies['operational_policy'] === null) {
-			this.allPolicies = LOOP_CACHE.getOperationalPolicyProperty();
+			this.allPolicies = this.state.loopCache.getOperationalPolicyConfigurationJson();
 		}
 		// Provision all policies ID first
 		if (this.policyIds.length === 0 && this.allPolicies['operational_policy'] !== undefined) {
@@ -94,7 +93,7 @@ export default class OperationalPolicyModal extends React.Component {
 	}
 
 	// When we change the name of a policy
-	isDuplicatedId (event) {
+	isDuplicatedId(event) {
 		// update policy id structure
 		var formNum = document.getElementById(event.target).closest('.formId').attr('id').substring(6);
 		var policyId = document.getElementById(event.target).val();
@@ -111,51 +110,51 @@ export default class OperationalPolicyModal extends React.Component {
 	}
 
 	configureComponents() {
-		    console.log("Load properties to op policy");
-		    // Set the header
-		    document.getElementsByClassName('form-control').forEach(function() {
-			    this.val(this.allPolicies['operational_policy']['controlLoop'][this.id]);
-		    });
-		    // Set the sub-policies
-		    this.allPolicies['operational_policy']['policies'].forEach(function(opPolicyElemIndex, opPolicyElemValue) {
-
-/*			    var formNum = add_one_more();
-			    forEach(document.getElementsByClassName('policyProperties').find('.form-control'), function(opPolicyPropIndex, opPolicyPropValue) {
-
-				    $("#formId" + formNum + " .policyProperties").find("#" + opPolicyPropValue.id).val(
-				    allPolicies['operational_policy']['policies'][opPolicyElemIndex][opPolicyPropValue.id]);
-			    });
-
-			    // Initial TargetResourceId options
-			    initTargetResourceIdOptions(allPolicies['operational_policy']['policies'][opPolicyElemIndex]['target']['type'], formNum);
-			    $.each($('.policyTarget').find('.form-control'), function(opPolicyTargetPropIndex, opPolicyTargetPropValue) {
-
-				    $("#formId" + formNum + " .policyTarget").find("#" + opPolicyTargetPropValue.id).val(
-				    allPolicies['operational_policy']['policies'][opPolicyElemIndex]['target'][opPolicyTargetPropValue.id]);
-			    });
-
-			    // update the current tab label
-			    $("#go_properties_tab" + formNum).text(
-			    allPolicies['operational_policy']['policies'][opPolicyElemIndex]['id']);
-			    // Check if there is a guard set for it
-			    $.each(allPolicies['guard_policies'], function(guardElemId, guardElemValue) {
-
-				    if (guardElemValue.recipe === $($("#formId" + formNum + " #recipe")[0]).val()) {
-					    // Found one, set all guard prop
-					    $.each($('.guardProperties').find('.form-control'), function(guardPropElemIndex,
-					                                                                 guardPropElemValue) {
-
-						    guardElemValue['id'] = guardElemId;
-						    $("#formId" + formNum + " .guardProperties").find("#" + guardPropElemValue.id).val(
-						    guardElemValue[guardPropElemValue.id]);
-					    });
-					    iniGuardPolicyType(guardElemId, formNum);
-					    // And finally enable the flag
-					    $("#formId" + formNum + " #enableGuardPolicy").prop("checked", true);
-				    }
-			    });*/
-			});
-	    }
+		console.log("Load properties to op policy");
+		// Set the header
+		document.getElementsByClassName('form-control').forEach(function () {
+			this.val(this.allPolicies['operational_policy']['controlLoop'][this.id]);
+		});
+		// Set the sub-policies
+		this.allPolicies['operational_policy']['policies'].forEach(function (opPolicyElemIndex, opPolicyElemValue) {
+
+			/*			    var formNum = add_one_more();
+							forEach(document.getElementsByClassName('policyProperties').find('.form-control'), function(opPolicyPropIndex, opPolicyPropValue) {
+			
+								$("#formId" + formNum + " .policyProperties").find("#" + opPolicyPropValue.id).val(
+								allPolicies['operational_policy']['policies'][opPolicyElemIndex][opPolicyPropValue.id]);
+							});
+			
+							// Initial TargetResourceId options
+							initTargetResourceIdOptions(allPolicies['operational_policy']['policies'][opPolicyElemIndex]['target']['type'], formNum);
+							$.each($('.policyTarget').find('.form-control'), function(opPolicyTargetPropIndex, opPolicyTargetPropValue) {
+			
+								$("#formId" + formNum + " .policyTarget").find("#" + opPolicyTargetPropValue.id).val(
+								allPolicies['operational_policy']['policies'][opPolicyElemIndex]['target'][opPolicyTargetPropValue.id]);
+							});
+			
+							// update the current tab label
+							$("#go_properties_tab" + formNum).text(
+							allPolicies['operational_policy']['policies'][opPolicyElemIndex]['id']);
+							// Check if there is a guard set for it
+							$.each(allPolicies['guard_policies'], function(guardElemId, guardElemValue) {
+			
+								if (guardElemValue.recipe === $($("#formId" + formNum + " #recipe")[0]).val()) {
+									// Found one, set all guard prop
+									$.each($('.guardProperties').find('.form-control'), function(guardPropElemIndex,
+																								 guardPropElemValue) {
+			
+										guardElemValue['id'] = guardElemId;
+										$("#formId" + formNum + " .guardProperties").find("#" + guardPropElemValue.id).val(
+										guardElemValue[guardPropElemValue.id]);
+									});
+									iniGuardPolicyType(guardElemId, formNum);
+									// And finally enable the flag
+									$("#formId" + formNum + " #enableGuardPolicy").prop("checked", true);
+								}
+							});*/
+		});
+	}
 
 	render() {
 		return (
@@ -195,7 +194,7 @@ export default class OperationalPolicyModal extends React.Component {
 										<label className="col-sm-4 control-label" htmlFor="clname">ControlLoopName</label>
 										<div className="col-sm-8">
 											<input type="text" className="form-control" name="controlLoopName"
-												readOnly="readonly" id="clname" value={LOOP_CACHE.getLoopName()} />
+												readOnly="readonly" id="clname" value={this.state.loopCache.getLoopName()} />
 										</div>
 									</div>
 								</form>
@@ -225,7 +224,7 @@ export default class OperationalPolicyModal extends React.Component {
 										<label className="col-sm-4 control-label" htmlFor="id">ID</label>
 										<div className="col-sm-8">
 											<input type="text" className="form-control" name="id" id="id"
-										onKeyUp="updateTabLabel($event)" />
+												onKeyUp="updateTabLabel($event)" />
 											<span >ID must be unique</span>
 										</div>
 									</div>
@@ -550,4 +549,4 @@ export default class OperationalPolicyModal extends React.Component {
 
 		);
 	}
-}
+}
\ No newline at end of file
diff --git a/ui-react/src/components/loop_viewer/logs/ClosedLoopLogs.js b/ui-react/src/components/loop_viewer/logs/ClosedLoopLogs.js
deleted file mode 100644
index ef7a3aefe..000000000
--- a/ui-react/src/components/loop_viewer/logs/ClosedLoopLogs.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/*-
- * ============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 Table from 'react-bootstrap/Table';
-
-export default class ClosedLoopViewLogs extends React.Component {
-  render() {
-    return (
-      <div className="log_div">
-        <div className="log_table">
-          <label className="table_header">Loop Logs</label>
-          <Table striped hover id="loop-log-div">
-            <thead>
-  							<tr>
-  								<th><span align="left" className="text">Date</span></th>
-  								<th><span align="left" className="text">Type</span></th>
-  								<th><span align="left" className="text">Component</span></th>
-  								<th><span align="right" className="text">Log</span></th>
-  							</tr>
-  						</thead>
-  						<tbody>
-  							<tr>
-  								<td className="row_10_per">test</td>
-  								<td className="row_10_per">test</td>
-  								<td className="row_10_per">test</td>
-  								<td className="row_70_per">test</td>
-  							</tr>
-  						</tbody>
-            </Table>
-          </div>
-        </div>
-    );
-  }
-}
diff --git a/ui-react/src/components/loop_viewer/status/ClosedLoopStatus.css b/ui-react/src/components/loop_viewer/status/LoopStatus.css
index 14add0f53..14add0f53 100644
--- a/ui-react/src/components/loop_viewer/status/ClosedLoopStatus.css
+++ b/ui-react/src/components/loop_viewer/status/LoopStatus.css
diff --git a/ui-react/src/components/loop_viewer/status/ClosedLoopStatus.js b/ui-react/src/components/loop_viewer/status/LoopStatus.js
index da5969e46..f904d6740 100644
--- a/ui-react/src/components/loop_viewer/status/ClosedLoopStatus.js
+++ b/ui-react/src/components/loop_viewer/status/LoopStatus.js
@@ -22,9 +22,9 @@
 */
 import React from 'react';
 import Table from 'react-bootstrap/Table';
-import './ClosedLoopStatus.css';
+import './LoopStatus.css';
 
-export default class ClosedLoopStatus extends React.Component {
+export default class LoopStatus extends React.Component {
   render() {
   	return (
       <div>
diff --git a/ui-react/src/components/loop_viewer/svg/LoopSvg.js b/ui-react/src/components/loop_viewer/svg/LoopSvg.js
new file mode 100644
index 000000000..2858ccd8a
--- /dev/null
+++ b/ui-react/src/components/loop_viewer/svg/LoopSvg.js
@@ -0,0 +1,100 @@
+/*-
+ * ============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 styled from 'styled-components';
+import { withRouter } from "react-router";
+import LoopCache from '../../../api/LoopCache'
+import LoopService from '../../../api/LoopService'
+
+const LoopViewSvgDivStyled = styled.div`
+	overflow: hidden;
+	background-color: ${props => (props.theme.loopViewerBackgroundColor)};
+	border: 1px solid;
+	border-color: ${props => (props.theme.loopViewerHeaderColor)};
+	height: 50%;
+`
+
+class LoopViewSvg extends React.Component {
+
+	static emptySvg = "<svg><text x=\"20\" y=\"40\">No LOOP (SVG)</text></svg>";
+	static operationalPolicyDataElementId = "OperationalPolicy";
+
+
+	state = {
+		svgContent: LoopViewSvg.emptySvg,
+		loopCache: this.props.loopCache,
+	}
+
+	constructor(props) {
+		super(props);
+		this.state.loopCache = props.loopCache;
+		this.handleSvgClick = this.handleSvgClick.bind(this);
+		this.getSvg = this.getSvg.bind(this);
+	}
+
+	shouldComponentUpdate(nextProps, nextState) {
+		return this.state.svgContent !== nextState.svgContent;
+	}
+
+	componentWillReceiveProps(newProps) {
+		this.state.loopCache = newProps.loopCache;
+		this.getSvg();
+	}
+
+	componentDidMount() {
+		this.getSvg();
+	}
+
+	getSvg() {
+		LoopService.getSvg(this.state.loopCache.getLoopName()).then(svgXml => {
+			if (svgXml.length != 0) {
+				this.setState({ svgContent: svgXml })
+			} else {
+				this.setState({ svgContent: LoopViewSvg.emptySvg })
+			}
+		});
+	}
+
+	handleSvgClick(event) {
+		console.debug("svg click event received");
+		var elementName = event.target.parentNode.parentNode.parentNode.getAttribute('data-element-id');
+		console.info("SVG element clicked", elementName);
+		if (typeof elementName === "undefined" || elementName === "VES") {
+			return;
+		} else if (elementName === LoopViewSvg.operationalPolicyDataElementId) {
+			this.props.history.push('/operationalPolicyModal');
+		} else {
+			this.props.history.push('/configurationPolicyModal');
+		}
+	}
+
+	render() {
+		return (
+			<LoopViewSvgDivStyled id="loop_svg" dangerouslySetInnerHTML={{ __html: this.state.svgContent }} onClick={this.handleSvgClick}>
+
+			</LoopViewSvgDivStyled>
+		);
+	}
+}
+
+export default withRouter(LoopViewSvg);
\ No newline at end of file
diff --git a/ui-react/src/components/loop_viewer/svg/example.svg b/ui-react/src/components/loop_viewer/svg/example.svg
index 2f5ebd037..a7c40ee27 100644
--- a/ui-react/src/components/loop_viewer/svg/example.svg
+++ b/ui-react/src/components/loop_viewer/svg/example.svg
@@ -1,444 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg">
-	<g
-		fill-opacity="1"
-		color-rendering="auto"
-		color-interpolation="auto"
-		text-rendering="auto"
-		stroke="black"
-		stroke-linecap="square"
-		stroke-miterlimit="10"
-		shape-rendering="auto"
-		stroke-opacity="1"
-		fill="black"
-		stroke-dasharray="none"
-		font-weight="normal"
-		stroke-width="1"
-		font-family="'Dialog'"
-		font-style="normal"
-		data-element-id="start-circle"
-		stroke-linejoin="miter"
-		font-size="12px"
-		image-rendering="auto"
-		stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
-		<defs id="genericDefs" />
-		<g>
-			<g
-				shape-rendering="geometricPrecision"
-				text-rendering="optimizeQuality"
-				stroke-width="2">
-				<circle
-					fill="none"
-					r="17"
-					cx="18"
-					cy="41" />
-			</g>
-		</g>
-	</g>
-	<g
-		fill-opacity="1"
-		color-rendering="auto"
-		color-interpolation="auto"
-		text-rendering="auto"
-		stroke="black"
-		stroke-linecap="square"
-		stroke-miterlimit="10"
-		shape-rendering="auto"
-		stroke-opacity="1"
-		fill="black"
-		stroke-dasharray="none"
-		font-weight="normal"
-		stroke-width="1"
-		font-family="'Dialog'"
-		font-style="normal"
-		data-element-id="Arrow-411c11ec-37fe-40bc-8544-417c2c05e4a7"
-		stroke-linejoin="miter"
-		font-size="12px"
-		image-rendering="auto"
-		stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
-		<defs id="genericDefs" />
-		<g>
-			<g
-				shape-rendering="geometricPrecision"
-				text-rendering="optimizeQuality"
-				stroke-width="2">
-				<line
-					y2="41"
-					fill="none"
-					x1="35"
-					x2="123"
-					y1="41" />
-				<polygon
-					fill="none"
-					points=" 121 39 121 43 125 41" />
-				<polygon
-					points=" 121 39 121 43 125 41"
-					stroke="none" />
-			</g>
-		</g>
-	</g>
-	<g
-		fill-opacity="1"
-		color-rendering="auto"
-		color-interpolation="auto"
-		text-rendering="auto"
-		stroke="black"
-		stroke-linecap="square"
-		stroke-miterlimit="10"
-		shape-rendering="auto"
-		stroke-opacity="1"
-		fill="black"
-		stroke-dasharray="none"
-		font-weight="normal"
-		stroke-width="1"
-		font-family="'Dialog'"
-		font-style="normal"
-		data-element-id="VES"
-		stroke-linejoin="miter"
-		font-size="12px"
-		image-rendering="auto"
-		stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
-		<defs id="genericDefs" />
-		<g>
-			<g
-				shape-rendering="geometricPrecision"
-				text-rendering="optimizeQuality"
-				stroke-width="2">
-				<rect
-					fill="none"
-					x="127"
-					width="123"
-					y="1"
-					height="82" />
-			</g>
-			<g
-				fill-opacity="0"
-				fill="rgb(0,0,0)"
-				text-rendering="optimizeQuality"
-				shape-rendering="geometricPrecision"
-				stroke="rgb(0,0,0)"
-				stroke-opacity="0"
-				stroke-width="2">
-				<rect
-					x="127"
-					width="123"
-					y="1"
-					height="82"
-					stroke="none" />
-			</g>
-			<g
-				text-rendering="optimizeQuality"
-				stroke-width="2"
-				shape-rendering="geometricPrecision"
-				font-family="sans-serif">
-				<text
-					x="176.5"
-					xml:space="preserve"
-					y="46.5"
-					stroke="none">VES</text>
-				<line
-					y2="83"
-					fill="none"
-					x1="147"
-					x2="147"
-					y1="1" />
-			</g>
-		</g>
-	</g>
-	<g
-		fill-opacity="1"
-		color-rendering="auto"
-		color-interpolation="auto"
-		text-rendering="auto"
-		stroke="black"
-		stroke-linecap="square"
-		stroke-miterlimit="10"
-		shape-rendering="auto"
-		stroke-opacity="1"
-		fill="black"
-		stroke-dasharray="none"
-		font-weight="normal"
-		stroke-width="1"
-		font-family="'Dialog'"
-		font-style="normal"
-		data-element-id="Arrow-17086665-1142-4cbf-9681-cf4462954c96"
-		stroke-linejoin="miter"
-		font-size="12px"
-		image-rendering="auto"
-		stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
-		<defs id="genericDefs" />
-		<g>
-			<g
-				shape-rendering="geometricPrecision"
-				text-rendering="optimizeQuality"
-				stroke-width="2">
-				<line
-					y2="41"
-					fill="none"
-					x1="250"
-					x2="338"
-					y1="41" />
-				<polygon
-					fill="none"
-					points=" 336 39 336 43 340 41" />
-				<polygon
-					points=" 336 39 336 43 340 41"
-					stroke="none" />
-			</g>
-		</g>
-	</g>
-	<g
-		fill-opacity="1"
-		color-rendering="auto"
-		color-interpolation="auto"
-		text-rendering="auto"
-		stroke="black"
-		stroke-linecap="square"
-		stroke-miterlimit="10"
-		shape-rendering="auto"
-		stroke-opacity="1"
-		fill="black"
-		stroke-dasharray="none"
-		font-weight="normal"
-		stroke-width="1"
-		font-family="'Dialog'"
-		font-style="normal"
-		data-element-id="tca_k8s_aLs74_v1_0_ResourceInstanceName2_tca_2"
-		stroke-linejoin="miter"
-		font-size="12px"
-		image-rendering="auto"
-		stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
-		<defs id="genericDefs" />
-		<g>
-			<g
-				shape-rendering="geometricPrecision"
-				text-rendering="optimizeQuality"
-				stroke-width="2">
-				<rect
-					fill="none"
-					x="342"
-					width="123"
-					y="1"
-					height="82" />
-			</g>
-			<g
-				fill-opacity="0"
-				fill="rgb(0,0,0)"
-				text-rendering="optimizeQuality"
-				shape-rendering="geometricPrecision"
-				stroke="rgb(0,0,0)"
-				stroke-opacity="0"
-				stroke-width="2">
-				<rect
-					x="342"
-					width="123"
-					y="1"
-					height="82"
-					stroke="none" />
-			</g>
-			<g
-				text-rendering="optimizeQuality"
-				stroke-width="2"
-				shape-rendering="geometricPrecision"
-				font-family="sans-serif">
-				<text
-					x="379.5"
-					xml:space="preserve"
-					y="46.5"
-					stroke="none">tca_k8s</text>
-				<line
-					y2="61"
-					fill="none"
-					x1="342"
-					x2="465"
-					y1="61" />
-			</g>
-		</g>
-	</g>
-	<g
-		fill-opacity="1"
-		color-rendering="auto"
-		color-interpolation="auto"
-		text-rendering="auto"
-		stroke="black"
-		stroke-linecap="square"
-		stroke-miterlimit="10"
-		shape-rendering="auto"
-		stroke-opacity="1"
-		fill="black"
-		stroke-dasharray="none"
-		font-weight="normal"
-		stroke-width="1"
-		font-family="'Dialog'"
-		font-style="normal"
-		data-element-id="Arrow-d48a7f5f-643d-4550-8045-ee46bb05ddfa"
-		stroke-linejoin="miter"
-		font-size="12px"
-		image-rendering="auto"
-		stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
-		<defs id="genericDefs" />
-		<g>
-			<g
-				shape-rendering="geometricPrecision"
-				text-rendering="optimizeQuality"
-				stroke-width="2">
-				<line
-					y2="41"
-					fill="none"
-					x1="465"
-					x2="553"
-					y1="41" />
-				<polygon
-					fill="none"
-					points=" 551 39 551 43 555 41" />
-				<polygon
-					points=" 551 39 551 43 555 41"
-					stroke="none" />
-			</g>
-		</g>
-	</g>
-	<g
-		fill-opacity="1"
-		color-rendering="auto"
-		color-interpolation="auto"
-		text-rendering="auto"
-		stroke="black"
-		stroke-linecap="square"
-		stroke-miterlimit="10"
-		shape-rendering="auto"
-		stroke-opacity="1"
-		fill="black"
-		stroke-dasharray="none"
-		font-weight="normal"
-		stroke-width="1"
-		font-family="'Dialog'"
-		font-style="normal"
-		data-element-id="OperationalPolicy"
-		stroke-linejoin="miter"
-		font-size="12px"
-		image-rendering="auto"
-		stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
-		<defs id="genericDefs" />
-		<g>
-			<g
-				shape-rendering="geometricPrecision"
-				text-rendering="optimizeQuality"
-				stroke-width="2">
-				<rect
-					fill="none"
-					x="557"
-					width="123"
-					y="1"
-					height="82" />
-			</g>
-			<g
-				fill-opacity="0"
-				fill="rgb(0,0,0)"
-				text-rendering="optimizeQuality"
-				shape-rendering="geometricPrecision"
-				stroke="rgb(0,0,0)"
-				stroke-opacity="0"
-				stroke-width="2">
-				<rect
-					x="557"
-					width="123"
-					y="1"
-					height="82"
-					stroke="none" />
-			</g>
-			<g
-				text-rendering="optimizeQuality"
-				stroke-width="2"
-				shape-rendering="geometricPrecision"
-				font-family="sans-serif">
-				<text
-					x="564.5"
-					xml:space="preserve"
-					y="46.5"
-					stroke="none">OperationalPolicy</text>
-				<line
-					y2="1"
-					fill="none"
-					x1="557"
-					x2="618"
-					y1="42" />
-			</g>
-		</g>
-	</g>
-	<g
-		fill-opacity="1"
-		color-rendering="auto"
-		color-interpolation="auto"
-		text-rendering="auto"
-		stroke="black"
-		stroke-linecap="square"
-		stroke-miterlimit="10"
-		shape-rendering="auto"
-		stroke-opacity="1"
-		fill="black"
-		stroke-dasharray="none"
-		font-weight="normal"
-		stroke-width="1"
-		font-family="'Dialog'"
-		font-style="normal"
-		data-element-id="Arrow-79f11b91-5a48-4945-9d2c-18a423105a7d"
-		stroke-linejoin="miter"
-		font-size="12px"
-		image-rendering="auto"
-		stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
-		<defs id="genericDefs" />
-		<g>
-			<g
-				shape-rendering="geometricPrecision"
-				text-rendering="optimizeQuality"
-				stroke-width="2">
-				<line
-					y2="41"
-					fill="none"
-					x1="680"
-					x2="768"
-					y1="41" />
-				<polygon
-					fill="none"
-					points=" 766 39 766 43 770 41" />
-				<polygon
-					points=" 766 39 766 43 770 41"
-					stroke="none" />
-			</g>
-		</g>
-	</g>
-	<g
-		fill-opacity="1"
-		color-rendering="auto"
-		color-interpolation="auto"
-		text-rendering="auto"
-		stroke="black"
-		stroke-linecap="square"
-		stroke-miterlimit="10"
-		shape-rendering="auto"
-		stroke-opacity="1"
-		fill="black"
-		stroke-dasharray="none"
-		font-weight="normal"
-		stroke-width="1"
-		font-family="'Dialog'"
-		font-style="normal"
-		data-element-id="stop-circle"
-		stroke-linejoin="miter"
-		font-size="12px"
-		image-rendering="auto"
-		stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
-		<defs id="genericDefs" />
-		<g>
-			<g
-				shape-rendering="geometricPrecision"
-				text-rendering="optimizeQuality"
-				stroke-width="4">
-				<circle
-					fill="none"
-					r="17"
-					cx="789"
-					cy="41" />
-			</g>
-		</g>
-	</g>
-</svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg"><g fill-opacity="1" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" font-family="'Dialog'" font-style="normal" data-element-id="start-circle" stroke-linejoin="miter" font-size="12px" image-rendering="auto" stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"/><g><g shape-rendering="geometricPrecision" text-rendering="optimizeQuality" stroke-width="2"><circle fill="none" r="17" cx="18" cy="41"/></g></g></g><g fill-opacity="1" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" font-family="'Dialog'" font-style="normal" data-element-id="Arrow-82c14603-02fc-4df7-8977-9b10e4c775d1" stroke-linejoin="miter" font-size="12px" image-rendering="auto" stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"/><g><g shape-rendering="geometricPrecision" text-rendering="optimizeQuality" stroke-width="2"><line y2="41" fill="none" x1="35" x2="123" y1="41"/><polygon fill="none" points=" 121 39 121 43 125 41"/><polygon points=" 121 39 121 43 125 41" stroke="none"/></g></g></g><g fill-opacity="1" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" font-family="'Dialog'" font-style="normal" data-element-id="VES" stroke-linejoin="miter" font-size="12px" image-rendering="auto" stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"/><g><g shape-rendering="geometricPrecision" text-rendering="optimizeQuality" stroke-width="2"><rect fill="none" x="127" width="123" y="1" height="82"/></g><g fill-opacity="0" fill="rgb(0,0,0)" text-rendering="optimizeQuality" shape-rendering="geometricPrecision" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="2"><rect x="127" width="123" y="1" height="82" stroke="none"/></g><g text-rendering="optimizeQuality" stroke-width="2" shape-rendering="geometricPrecision" font-family="sans-serif"><text x="176.5" xml:space="preserve" y="46.5" stroke="none">VES</text><line y2="83" fill="none" x1="147" x2="147" y1="1"/></g></g></g><g fill-opacity="1" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" font-family="'Dialog'" font-style="normal" data-element-id="Arrow-dbbb2d5a-e9c4-446d-92b9-c71908854434" stroke-linejoin="miter" font-size="12px" image-rendering="auto" stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"/><g><g shape-rendering="geometricPrecision" text-rendering="optimizeQuality" stroke-width="2"><line y2="41" fill="none" x1="250" x2="338" y1="41"/><polygon fill="none" points=" 336 39 336 43 340 41"/><polygon points=" 336 39 336 43 340 41" stroke="none"/></g></g></g><g fill-opacity="1" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" font-family="'Dialog'" font-style="normal" data-element-id="TCA_Jbv1z_v1_0_ResourceInstanceName1_tca" stroke-linejoin="miter" font-size="12px" image-rendering="auto" stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"/><g><g shape-rendering="geometricPrecision" text-rendering="optimizeQuality" stroke-width="2"><rect fill="none" x="342" width="123" y="1" height="82"/></g><g fill-opacity="0" fill="rgb(0,0,0)" text-rendering="optimizeQuality" shape-rendering="geometricPrecision" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="2"><rect x="342" width="123" y="1" height="82" stroke="none"/></g><g text-rendering="optimizeQuality" stroke-width="2" shape-rendering="geometricPrecision" font-family="sans-serif"><text x="392" xml:space="preserve" y="46.5" stroke="none">TCA</text><line y2="61" fill="none" x1="342" x2="465" y1="61"/></g></g></g><g fill-opacity="1" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" font-family="'Dialog'" font-style="normal" data-element-id="Arrow-3892abbc-c49c-40df-984b-8959b6df44e6" stroke-linejoin="miter" font-size="12px" image-rendering="auto" stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"/><g><g shape-rendering="geometricPrecision" text-rendering="optimizeQuality" stroke-width="2"><line y2="41" fill="none" x1="465" x2="553" y1="41"/><polygon fill="none" points=" 551 39 551 43 555 41"/><polygon points=" 551 39 551 43 555 41" stroke="none"/></g></g></g><g fill-opacity="1" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" font-family="'Dialog'" font-style="normal" data-element-id="OperationalPolicy" stroke-linejoin="miter" font-size="12px" image-rendering="auto" stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"/><g><g shape-rendering="geometricPrecision" text-rendering="optimizeQuality" stroke-width="2"><rect fill="none" x="557" width="123" y="1" height="82"/></g><g fill-opacity="0" fill="rgb(0,0,0)" text-rendering="optimizeQuality" shape-rendering="geometricPrecision" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="2"><rect x="557" width="123" y="1" height="82" stroke="none"/></g><g text-rendering="optimizeQuality" stroke-width="2" shape-rendering="geometricPrecision" font-family="sans-serif"><text x="564.5" xml:space="preserve" y="46.5" stroke="none">OperationalPolicy</text><line y2="1" fill="none" x1="557" x2="618" y1="42"/></g></g></g><g fill-opacity="1" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" font-family="'Dialog'" font-style="normal" data-element-id="Arrow-44a8b77e-d0eb-4c0d-82b6-0822ff35573f" stroke-linejoin="miter" font-size="12px" image-rendering="auto" stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"/><g><g shape-rendering="geometricPrecision" text-rendering="optimizeQuality" stroke-width="2"><line y2="41" fill="none" x1="680" x2="768" y1="41"/><polygon fill="none" points=" 766 39 766 43 770 41"/><polygon points=" 766 39 766 43 770 41" stroke="none"/></g></g></g><g fill-opacity="1" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" font-family="'Dialog'" font-style="normal" data-element-id="stop-circle" stroke-linejoin="miter" font-size="12px" image-rendering="auto" stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"/><g><g shape-rendering="geometricPrecision" text-rendering="optimizeQuality" stroke-width="4"><circle fill="none" r="17" cx="789" cy="41"/></g></g></g></svg>
\ No newline at end of file
diff --git a/ui-react/src/index.js b/ui-react/src/index.js
index eed3935e1..8a62b5a2c 100644
--- a/ui-react/src/index.js
+++ b/ui-react/src/index.js
@@ -24,14 +24,11 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import OnapClamp from './OnapClamp';
 import { Route, BrowserRouter } from 'react-router-dom'
-import LoopModal from './components/dialogs/LoopModal';
-import OperationalPolicyModal from './components/dialogs/OperationalPolicy/OperationalPolicyModal';
+
 
 const routing = (
 	<BrowserRouter >
-		<OnapClamp />
-		<Route path="/operationalPolicyModal" render={() => <OperationalPolicyModal />} />
-		<Route path="/openLoop" component={ LoopModal } />
+		<Route path="/" component={OnapClamp}/>
 	</BrowserRouter>
 );
 
diff --git a/ui-react/src/theme/globalStyle.js b/ui-react/src/theme/globalStyle.js
index df9126296..1630c5074 100644
--- a/ui-react/src/theme/globalStyle.js
+++ b/ui-react/src/theme/globalStyle.js
@@ -58,6 +58,14 @@ export const GlobalClampStyle = createGlobalStyle`
   	color: ${props => props.theme.fontNormal};
     background-color: ${props => (props.theme.backgroundColor)};
   }
+  
+  svg {
+  	padding: 10px;
+	overflow: hidden;
+	background-color: ${props => (props.theme.loopViewerBackgroundColor)};
+	width: 100%;
+	height: 100%;
+  }
 `
 
 export const DefaultClampTheme = {