Create SVG in UI

Remove the SVG generation from the backend and put it in the UI

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

17 files changed, 419 insertions, 488 deletions

diff --git a/ui-react/src/components/dialogs/Loop/CreateLoopModal.js b/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
index e98b59566..a8e8dee1f 100644
--- a/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
+++ b/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
@@ -30,46 +30,33 @@ import Col from 'react-bootstrap/Col';
 import styled from 'styled-components';
 import LoopService from '../../../api/LoopService';
 import TemplateService from '../../../api/TemplateService';
+import LoopCache from '../../../api/LoopCache';
+import SvgGenerator from '../../loop_viewer/svg/SvgGenerator';
 
 const ModalStyled = styled(Modal)`
 	background-color: transparent;
 `
-const LoopViewSvgDivStyled = styled.svg`
-	display: flex;
-	flex-direction: row;
-	overflow-x: scroll;
-	background-color: ${props => (props.theme.loopViewerBackgroundColor)};
-	border-color: ${props => (props.theme.loopViewerHeaderColor)};
-	margin-top: 3em;
-	margin-left: auto;
-	margin-right:auto;
-	margin-bottom: -1em;
-	text-align: center;
-	align-items: center;
-	height: 100%;
-	width: 100%;
-`
 
 export default class CreateLoopModal extends React.Component {
 	constructor(props, context) {
 		super(props, context);
 
-		this.getTemplateNames = this.getTemplateNames.bind(this);
+		this.getAllLoopTemplates = this.getAllLoopTemplates.bind(this);
 		this.handleCreate = this.handleCreate.bind(this);
 		this.handleModelName = this.handleModelName.bind(this);
 		this.handleClose = this.handleClose.bind(this);
-		this.handleDropdownListChange = this.handleDropdownListChange.bind(this);
+		this.handleDropDownListChange = this.handleDropDownListChange.bind(this);
 		this.state = {
 			show: true,
-			content: '',
 			chosenTemplateName: '',
 			modelName: '',
-			templateNames: []
+			templateNames: [],
+			fakeLoopCacheWithTemplate: new LoopCache({})
 		};
 	}
 
 	componentWillMount() {
-		this.getTemplateNames();
+		this.getAllLoopTemplates();
 	}
 
 	handleClose() {
@@ -77,21 +64,26 @@ export default class CreateLoopModal extends React.Component {
 		this.props.history.push('/');
 	}
 
-	handleDropdownListChange(e) {
-		this.setState({ chosenTemplateName: e.value });
-		TemplateService.getBlueprintMicroServiceTemplateSvg(e.value).then(svgXml => {
-			if (svgXml.length !== 0) {
-				this.setState({ content: svgXml })
-			} else {
-				this.setState({ content: 'Error1' })
-			}
-		})
+	handleDropDownListChange(e) {
+	    if (typeof e.value !== "undefined") {
+	        this.setState({
+	        fakeLoopCacheWithTemplate:
+                new LoopCache({
+                    "loopTemplate":e.templateObject,
+                    "name": "fakeLoop"
+                }),
+                chosenTemplateName: e.value
+	        })
+		} else {
+          	this.setState({ fakeLoopCacheWithTemplate: new LoopCache({}) })
+        }
 	}
 
-	getTemplateNames() {
-		TemplateService.getTemplateNames().then(templateNames => {
-			const templateOptions = templateNames.map((templateName) => { return { label: templateName, value: templateName } });
-			this.setState({ templateNames: templateOptions })
+	getAllLoopTemplates() {
+		TemplateService.getAllLoopTemplates().then(templatesData => {
+		    const templateOptions = templatesData.map((templateData) => { return { label: templateData.name, value: templateData.name, templateObject: templateData } });
+            this.setState({
+                templateNames: templateOptions })
 		});
 	}
 
@@ -133,17 +125,15 @@ export default class CreateLoopModal extends React.Component {
 					<Form.Group as={Row} controlId="formPlaintextEmail">
 						<Form.Label column sm="2">Template Name:</Form.Label>
 						<Col sm="10">
-							<Select onChange={this.handleDropdownListChange} options={this.state.templateNames} />
+							<Select onChange={this.handleDropDownListChange} options={this.state.templateNames} />
 						</Col>
 					</Form.Group>
-                                        <Form.Group as={Row} style={{alignItems: 'center'}} controlId="formSvgPreview">
-                                                <Form.Label column sm="2">Model Preview:</Form.Label>
-                                                <Col sm="10">
-                                                        <LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.content }}
-                                                                value={this.state.content} >
-                                                        </LoopViewSvgDivStyled>
-                                                </Col>
-                                        </Form.Group>
+                    <Form.Group as={Row} style={{alignItems: 'center'}} controlId="formSvgPreview">
+                    <Form.Label column sm="2">Model Preview:</Form.Label>
+                        <Col sm="10">
+                            <SvgGenerator loopCache={this.state.fakeLoopCacheWithTemplate} clickable={false} generatedFrom={SvgGenerator.GENERATED_FROM_TEMPLATE}/>
+                        </Col>
+                    </Form.Group>
 					<Form.Group as={Row} controlId="formPlaintextEmail">
 						<Form.Label column sm="2">Model Name:</Form.Label>
 						<input type="text" style={{width: '50%', marginLeft: '1em' }}
diff --git a/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js b/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js
index 18ec6fdce..5b6ea9e62 100644
--- a/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js
+++ b/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js
@@ -30,8 +30,8 @@ describe('Verify CreateLoopModal', () => {
 
   it('Test the render method', async () => {
 	const flushPromises = () => new Promise(setImmediate);
-    TemplateService.getTemplateNames = jest.fn().mockImplementation(() => {
-    	return Promise.resolve(["template1","template2"]);
+    TemplateService.getAllLoopTemplates = jest.fn().mockImplementation(() => {
+    	return Promise.resolve([{"name":"template1"},{"name":"template2"}]);
 	});
 	
 	const component = shallow(<CreateLoopModal/>);
@@ -39,31 +39,26 @@ describe('Verify CreateLoopModal', () => {
 	await flushPromises();
 	component.update();
 		
-    expect(component.state('templateNames')).toStrictEqual([{"label": "template1", "value": "template1"}, {"label": "template2", "value": "template2"}]);
+    expect(component.state('templateNames')).toStrictEqual([{"label": "template1", "value": "template1", "templateObject": {"name": "template1"}}, {"label": "template2", "value": "template2","templateObject": {"name": "template2"}}]);
   });
 
   it('handleDropdownListChange event', async () => {
   	const flushPromises = () => new Promise(setImmediate);
-    const event = {value: 'template1'};
-    TemplateService.getBlueprintMicroServiceTemplateSvg = jest.fn().mockImplementation(() => {
-		return Promise.resolve("");
-	});
 
     const component = shallow(<CreateLoopModal/>);
-    component.find('StateManager').simulate('change', event);
+    component.find('StateManager').simulate('change', {value: 'template1', templateObject: {"name":"template1"} });
     await flushPromises();
     component.update();
     expect(component.state('chosenTemplateName')).toEqual("template1");
-    expect(component.state('content')).toEqual("Error1");
-    
-    TemplateService.getBlueprintMicroServiceTemplateSvg = jest.fn().mockImplementation(() => {
-		return Promise.resolve("svgContentTest");
-	});
-	component.find('StateManager').simulate('change', {value: 'template2'});
+    expect(component.state('fakeLoopCacheWithTemplate').getLoopTemplate()['name']).toEqual("template1");
+    expect(component.state('fakeLoopCacheWithTemplate').getLoopName()).toEqual("fakeLoop");
+
+	component.find('StateManager').simulate('change',{value: 'template2', templateObject: {"name":"template2"} });
     await flushPromises();
     component.update();
     expect(component.state('chosenTemplateName')).toEqual("template2");
-    expect(component.state('content')).toEqual("svgContentTest");
+    expect(component.state('fakeLoopCacheWithTemplate').getLoopTemplate()['name']).toEqual("template2");
+    expect(component.state('fakeLoopCacheWithTemplate').getLoopName()).toEqual("fakeLoop");
   });
 
 
diff --git a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
index c04883443..7ca90b493 100644
--- a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
+++ b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
@@ -30,6 +30,8 @@ import Col from 'react-bootstrap/Col';
 import FormCheck from 'react-bootstrap/FormCheck'
 import styled from 'styled-components';
 import LoopService from '../../../api/LoopService';
+import SvgGenerator from '../../loop_viewer/svg/SvgGenerator';
+import LoopCache from '../../../api/LoopCache';
 
 const ModalStyled = styled(Modal)`
 	background-color: transparent;
@@ -37,21 +39,6 @@ const ModalStyled = styled(Modal)`
 const CheckBoxStyled = styled(FormCheck.Input)`
 	margin-left:3rem;
 `
-const LoopViewSvgDivStyled = styled.svg`
-	overflow-x: scroll;
-	display: flex;
-	flex-direction: row;
-	background-color: ${props => (props.theme.loopViewerBackgroundColor)};
-	border-color: ${props => (props.theme.loopViewerHeaderColor)};
-	margin-top: 2em;
-	margin-left: auto;
-	margin-right:auto;
-	margin-bottom: -3em;
-	text-align: center;
-	align-items: center;
-	height: 100%;
-	width: 100%;
-`
 
 export default class OpenLoopModal extends React.Component {
 	constructor(props, context) {
@@ -60,13 +47,13 @@ export default class OpenLoopModal extends React.Component {
 		this.getLoopNames = this.getLoopNames.bind(this);
 		this.handleOpen = this.handleOpen.bind(this);
 		this.handleClose = this.handleClose.bind(this);
-		this.handleDropdownListChange = this.handleDropdownListChange.bind(this);
+		this.handleDropDownListChange = this.handleDropDownListChange.bind(this);
 		this.showReadOnly = props.showReadOnly ? props.showReadOnly : true;
 		this.state = {
 			show: true,
 			chosenLoopName: '',
 			loopNames: [],
-			content:''
+			loopCacheOpened: new LoopCache({})
 		};
 	}
 
@@ -79,14 +66,12 @@ export default class OpenLoopModal extends React.Component {
 		this.props.history.push('/');
 	}
 
-	handleDropdownListChange(e) {
-		this.setState({ chosenLoopName: e.value });
-		LoopService.getSvg(e.value).then(svgXml => {
-			if (svgXml.length !== 0) {
-				this.setState({ content: svgXml })
-			} else {
-				this.setState({ content: 'Error1' })
-			}
+	handleDropDownListChange(e) {
+        LoopService.getLoop(e.value).then(loop => {
+            this.setState({
+                chosenLoopName: e.value,
+                loopCacheOpened: new LoopCache(loop)
+             });
 		});
 	}
 
@@ -95,9 +80,7 @@ export default class OpenLoopModal extends React.Component {
 		    if (Object.entries(loopNames).length !== 0) {
 		        const loopOptions = loopNames.filter(loopName => loopName!=='undefined').map((loopName) => { return { label: loopName, value: loopName } });
             	this.setState({ loopNames: loopOptions })
-
 		    }
-
 		});
 	}
 
@@ -117,20 +100,18 @@ export default class OpenLoopModal 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}
+							<Select onChange={this.handleDropDownListChange}
 							options={this.state.loopNames} />
 						</Col>
 					</Form.Group>
 					<Form.Group as={Row} style={{alignItems: 'center'}} controlId="formSvgPreview">
 						<Form.Label column sm="2">Model Preview:</Form.Label>
 						<Col sm="10">
-                         				<LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.content }}
-								value={this.state.content} >
-							</LoopViewSvgDivStyled>
+						    <SvgGenerator loopCache={this.state.loopCacheOpened} clickable={false} generatedFrom={SvgGenerator.GENERATED_FROM_INSTANCE}/>
 						</Col>
 					</Form.Group>
 					{this.showReadOnly === true ?
-						<Form.Group as={Row} controlId="formBasicChecbox">
+						<Form.Group as={Row} controlId="formBasicCheckbox">
 							<Form.Check>
 								<FormCheck.Label>Read Only Mode:</FormCheck.Label>
 								<CheckBoxStyled style={{marginLeft: '3.5em'}} type="checkbox" />
diff --git a/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js b/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js
index f362cfaa6..1865869df 100644
--- a/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js
+++ b/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js
@@ -23,6 +23,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import OpenLoopModal from './OpenLoopModal';
+import LoopService from '../../../api/LoopService';
 
 describe('Verify OpenLoopModal', () => {
 
@@ -41,10 +42,19 @@ describe('Verify OpenLoopModal', () => {
     expect(component).toMatchSnapshot();
   });
 
-  it('Onchange event', () => {
+  it('Onchange event', async () => {
+    const flushPromises = () => new Promise(setImmediate);
+    LoopService.getLoop = jest.fn().mockImplementation(() => {
+  		return Promise.resolve({
+  			ok: true,
+  			status: 200,
+  			json: () => {}
+  		});
+  	});
     const event = {value: 'LOOP_gmtAS_v1_0_ResourceInstanceName1_tca_3'};
     const component = shallow(<OpenLoopModal/>);
     component.find('StateManager').simulate('change', event);
+    await flushPromises();
     component.update();
     expect(component.state('chosenLoopName')).toEqual("LOOP_gmtAS_v1_0_ResourceInstanceName1_tca_3");
   });
diff --git a/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap b/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap
index 305c87bf2..e69b809c7 100644
--- a/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap
+++ b/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap
@@ -75,13 +75,14 @@ exports[`Verify CreateLoopModal Test the render method 1`] = `
       <Col
         sm="10"
       >
-        <styled.svg
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "",
+        <withRouter(SvgGenerator)
+          clickable={false}
+          generatedFrom="TEMPLATE"
+          loopCache={
+            LoopCache {
+              "loopJsonCache": Object {},
             }
           }
-          value=""
         />
       </Col>
     </FormGroup>
diff --git a/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap b/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap
index 196854446..477260477 100644
--- a/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap
+++ b/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap
@@ -75,13 +75,14 @@ exports[`Verify OpenLoopModal Test the render method 1`] = `
       <Col
         sm="10"
       >
-        <styled.svg
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "",
+        <withRouter(SvgGenerator)
+          clickable={false}
+          generatedFrom="INSTANCE"
+          loopCache={
+            LoopCache {
+              "loopJsonCache": Object {},
             }
           }
-          value=""
         />
       </Col>
     </FormGroup>
@@ -95,7 +96,7 @@ exports[`Verify OpenLoopModal Test the render method 1`] = `
           "render": [Function],
         }
       }
-      controlId="formBasicChecbox"
+      controlId="formBasicCheckbox"
     >
       <FormCheck
         disabled={false}
diff --git a/ui-react/src/components/dialogs/Policy/PolicyModal.js b/ui-react/src/components/dialogs/Policy/PolicyModal.js
index 5930386c2..d3b427396 100644
--- a/ui-react/src/components/dialogs/Policy/PolicyModal.js
+++ b/ui-react/src/components/dialogs/Policy/PolicyModal.js
@@ -33,6 +33,7 @@ import LoopService from '../../../api/LoopService';
 import LoopCache from '../../../api/LoopCache';
 import JSONEditor from '@json-editor/json-editor';
 import Alert from 'react-bootstrap/Alert';
+import OnapConstant from '../../../utils/OnapConstants';
 
 const ModalStyled = styled(Modal)`
 	background-color: transparent;
@@ -66,6 +67,9 @@ export default class PolicyModal extends React.Component {
 		this.createJsonEditor = this.createJsonEditor.bind(this);
 		this.handleRefresh = this.handleRefresh.bind(this);
 		this.disableAlert =  this.disableAlert.bind(this);
+		this.renderPdpGroupDropDown = this.renderPdpGroupDropDown.bind(this);
+		this.renderOpenLoopMessage = this.renderOpenLoopMessage.bind(this);
+		this.renderModalTitle = this.renderModalTitle.bind(this);
 	}
 
 	handleSave() {
@@ -82,7 +86,7 @@ export default class PolicyModal extends React.Component {
 		}
 		else {
 			console.info("NO validation errors found in policy data");
-			if (this.state.policyInstanceType === 'MICRO-SERVICE-POLICY') {
+			if (this.state.policyInstanceType === OnapConstant.microServiceType) {
                 this.state.loopCache.updateMicroServiceProperties(this.state.policyName, editorData);
                 this.state.loopCache.updateMicroServicePdpGroup(this.state.policyName, this.state.chosenPdpGroup, this.state.chosenPdpSubgroup);
                 LoopService.setMicroServiceProperties(this.state.loopCache.getLoopName(), this.state.loopCache.getMicroServiceForName(this.state.policyName)).then(resp => {
@@ -90,7 +94,7 @@ export default class PolicyModal extends React.Component {
                     this.props.history.push('/');
                     this.props.loadLoopFunction(this.state.loopCache.getLoopName());
                 });
-			} else if (this.state.policyInstanceType === 'OPERATIONAL-POLICY') {
+			} else if (this.state.policyInstanceType === OnapConstant.operationalPolicyType) {
 				this.state.loopCache.updateOperationalPolicyProperties(this.state.policyName, editorData);
 				this.state.loopCache.updateOperationalPolicyPdpGroup(this.state.policyName, this.state.chosenPdpGroup, this.state.chosenPdpSubgroup);
 				LoopService.setOperationalPolicyProperties(this.state.loopCache.getLoopName(), this.state.loopCache.getOperationalPolicies()).then(resp => {
@@ -154,13 +158,13 @@ export default class PolicyModal extends React.Component {
 		var editorData = {};
 		var pdpGroupValues = {};
 		var chosenPdpGroupValue, chosenPdpSubgroupValue;
-		if (this.state.policyInstanceType === 'MICRO-SERVICE-POLICY') {
+		if (this.state.policyInstanceType === OnapConstant.microServiceType) {
 			toscaModel = this.state.loopCache.getMicroServiceJsonRepresentationForName(this.state.policyName);
 			editorData = this.state.loopCache.getMicroServicePropertiesForName(this.state.policyName);
 			pdpGroupValues = this.state.loopCache.getMicroServiceSupportedPdpGroup(this.state.policyName);
 			chosenPdpGroupValue = this.state.loopCache.getMicroServicePdpGroup(this.state.policyName);
 			chosenPdpSubgroupValue = this.state.loopCache.getMicroServicePdpSubgroup(this.state.policyName);
-		} else if (this.state.policyInstanceType === 'OPERATIONAL-POLICY') {
+		} else if (this.state.policyInstanceType === OnapConstant.operationalPolicyType) {
 			toscaModel = this.state.loopCache.getOperationalPolicyJsonRepresentationForName(this.state.policyName);
 			editorData = this.state.loopCache.getOperationalPolicyPropertiesForName(this.state.policyName);
 			pdpGroupValues = this.state.loopCache.getOperationalPolicySupportedPdpGroup(this.state.policyName);
@@ -207,7 +211,7 @@ export default class PolicyModal extends React.Component {
 
 	handleRefresh() {
 		var newLoopCache, toscaModel, editorData;
-		if (this.state.policyInstanceType === 'MICRO-SERVICE-POLICY') {
+		if (this.state.policyInstanceType === OnapConstant.microServiceType) {
 			LoopService.refreshMicroServicePolicyJson(this.state.loopCache.getLoopName(),this.state.policyName).then(data => {
 				newLoopCache =  new LoopCache(data);
 				toscaModel = newLoopCache.getMicroServiceJsonRepresentationForName(this.state.policyName);
@@ -227,7 +231,7 @@ export default class PolicyModal extends React.Component {
 					showMessage: "Refreshing of UI failed"
 				});
 			});
-		} else if (this.state.policyInstanceType === 'OPERATIONAL-POLICY') {
+		} else if (this.state.policyInstanceType === OnapConstant.operationalPolicyType) {
 			LoopService.refreshOperationalPolicyJson(this.state.loopCache.getLoopName(),this.state.policyName).then(data => {
 				var newLoopCache =  new LoopCache(data);
 				toscaModel = newLoopCache.getOperationalPolicyJsonRepresentationForName(this.state.policyName);
@@ -254,11 +258,60 @@ export default class PolicyModal extends React.Component {
 		this.setState ({ showSucAlert: false, showFailAlert: false });
 	}
 
+	renderPdpGroupDropDown() {
+		if(this.state.policyInstanceType !== OnapConstant.operationalPolicyType || !this.state.loopCache.isOpenLoopTemplate()) {
+			return (
+				<Form.Group as={Row} controlId="formPlaintextEmail">
+					<Form.Label column sm="2">Pdp Group Info</Form.Label>
+					<Col sm="3">
+						<Select value={{ label: this.state.chosenPdpGroup, value: this.state.chosenPdpGroup }} onChange={this.handlePdpGroupChange} options={this.state.pdpGroupList} />
+					</Col>
+					<Col sm="3">
+						<Select value={{ label: this.state.chosenPdpSubgroup, value: this.state.chosenPdpSubgroup }} onChange={this.handlePdpSubgroupChange} options={this.state.pdpSubgroupList} />
+					</Col>
+				</Form.Group>
+			);
+		}
+	}
+
+    renderOpenLoopMessage() {
+    	if(this.state.policyInstanceType === OnapConstant.operationalPolicyType && this.state.loopCache.isOpenLoopTemplate()) {
+    		return (
+   				"Operational Policy cannot be configured as only Open Loop is supported for this Template!"
+   			);
+   		}
+    }
+
+	renderModalTitle() {
+		return (
+				<Modal.Title>Edit the policy</Modal.Title>
+		);
+	}
+
+	renderButton() {
+	    var allElement = [(<Button variant="secondary" onClick={this.handleClose}>
+                                   				Close
+                         </Button>)];
+		if(this.state.policyInstanceType !== OnapConstant.operationalPolicyType || !this.state.loopCache.isOpenLoopTemplate()) {
+             allElement.push((
+                <Button variant="primary" disabled={this.readOnly} onClick={this.handleSave}>
+                                Save Changes
+                </Button>
+             ));
+             allElement.push((
+                <Button variant="primary" disabled={this.readOnly} onClick={this.handleRefresh}>
+                                Refresh
+                </Button>
+             ));
+		}
+		return allElement;
+	}
+
 	render() {
 		return (
-			<ModalStyled size="xl" show={this.state.show} onHide={this.handleClose } backdrop="static">
+			<ModalStyled size="xl" backdrop="static" keyboard={false} show={this.state.show} onHide={this.handleClose}>
 				<Modal.Header closeButton>
-					<Modal.Title>Edit the policy</Modal.Title>
+					{this.renderModalTitle()}
 				</Modal.Header>
 				<Alert variant="success" show={this.state.showSucAlert} onClose={this.disableAlert} dismissible>
 					{this.state.showMessage}
@@ -267,30 +320,14 @@ export default class PolicyModal extends React.Component {
 					{this.state.showMessage}
 				</Alert>
 				<Modal.Body>
+					{this.renderOpenLoopMessage()}
 					<div id="editor" />
-					<Form.Group as={Row} controlId="formPlaintextEmail">
-						<Form.Label column sm="2">Pdp Group Info</Form.Label>
-						<Col sm="3">
-							<Select value={{ label: this.state.chosenPdpGroup, value: this.state.chosenPdpGroup }} onChange={this.handlePdpGroupChange} options={this.state.pdpGroupList} />
-						</Col>
-						<Col sm="3">
-							<Select value={{ label: this.state.chosenPdpSubgroup, value: this.state.chosenPdpSubgroup }} onChange={this.handlePdpSubgroupChange} options={this.state.pdpSubgroupList} />
-						</Col>
-					</Form.Group>
+					{this.renderPdpGroupDropDown()}
 				</Modal.Body>
 				<Modal.Footer>
-					<Button variant="secondary" onClick={this.handleClose}>
-						Close
-					</Button>
-					<Button variant="primary" onClick={this.handleSave}>
-						Save Changes
-					</Button>
-					<Button variant="primary" onClick={this.handleRefresh}>
-						Refresh
-					</Button>
+					{this.renderButton()}
 				</Modal.Footer>
 			</ModalStyled>
-
 		);
 	}
 }
\ No newline at end of file
diff --git a/ui-react/src/components/dialogs/Policy/PolicyModal.test.js b/ui-react/src/components/dialogs/Policy/PolicyModal.test.js
index d4021c97c..cb0a32020 100644
--- a/ui-react/src/components/dialogs/Policy/PolicyModal.test.js
+++ b/ui-react/src/components/dialogs/Policy/PolicyModal.test.js
@@ -25,6 +25,7 @@ import { mount } from 'enzyme';
 import PolicyModal from './PolicyModal';
 import LoopCache from '../../../api/LoopCache';
 import LoopService from '../../../api/LoopService';
+import OnapConstant from '../../../utils/OnapConstants';
 
 describe('Verify PolicyModal', () => {
     beforeEach(() => {
@@ -54,7 +55,7 @@ describe('Verify PolicyModal', () => {
     const loopCache = new LoopCache(loopCacheStr);
     const historyMock = { push: jest.fn() };
     const flushPromises = () => new Promise(setImmediate);
-    const match = {params: {policyName:"OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca", policyInstanceType: "OPERATIONAL-POLICY"}}
+    const match = {params: {policyName:"OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca", policyInstanceType: OnapConstant.operationalPolicyType}}
         
     it('Test handleClose', () => {
       const handleClose = jest.spyOn(PolicyModal.prototype,'handleClose');
diff --git a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
index 7cf02f711..962ab4bda 100644
--- a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
+++ b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
@@ -34,30 +34,12 @@ import FirstPage from '@material-ui/icons/FirstPage';
 import LastPage from '@material-ui/icons/LastPage';
 import Search from '@material-ui/icons/Search';
 import MaterialTable from "material-table";
+import LoopCache from '../../../api/LoopCache';
+import SvgGenerator from '../../loop_viewer/svg/SvgGenerator';
 
 const ModalStyled = styled(Modal)`
 	background-color: transparent;
 `
-const LoopViewSvgDivStyled = styled.svg`
-	overflow-x: scroll;
-	background-color: ${props => (props.theme.loopViewerBackgroundColor)};
-	border-color: ${props => (props.theme.loopViewerHeaderColor)};
-	margin-top: 3em;
-	margin-left: 2em;
-	margin-right:auto;
-	text-align: center;
-	height: 100%;
-	width: 100%;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	
-`
-const SvgContainerDivStyled = styled.div`
-	display: flex;
-	align-items: center;
-	border: 1px solid;
-`
 
 const cellStyle = { border: '1px solid black' };
 const headerStyle = { backgroundColor: '#ddd',	border: '2px solid black'	};
@@ -68,7 +50,8 @@ export default class ViewLoopTemplatesModal extends React.Component {
         show: true,
 		content: 'Please select a loop template to display it',
 		selectedRow: -1,
-		loopTemplateData: [],
+		loopTemplatesData: [],
+		fakeLoopCacheWithTemplate: new LoopCache({}),
 		loopTemplateColumnsDefinition: [
 			{ title: "#", field: "index", render: rowData => rowData.tableData.id + 1,
 				cellStyle: cellStyle,
@@ -109,29 +92,27 @@ export default class ViewLoopTemplatesModal extends React.Component {
 	constructor(props, context) {
 		super(props, context);
 		this.handleClose = this.handleClose.bind(this);
-		this.getBlueprintMicroServiceTemplate = this.getBlueprintMicroServiceTemplate.bind(this);
-		this.getBlueprintMicroServiceTemplates();
+		this.getLoopTemplate = this.getLoopTemplate.bind(this);
+		this.getAllLoopTemplates();
 	}
 
-	getBlueprintMicroServiceTemplates() {
-		TemplateService.getBlueprintMicroServiceTemplates().then(loopTemplateData => {
-		this.setState({ loopTemplateData: loopTemplateData })
+	getAllLoopTemplates() {
+		TemplateService.getAllLoopTemplates().then(templatesData => {
+		    this.setState({ loopTemplatesData: templatesData })
 		});
 	}
 
-	getBlueprintMicroServiceTemplate(templateName) {
-	    if (typeof templateName !== "undefined") {
-		    TemplateService.getBlueprintMicroServiceTemplateSvg(templateName).then(svgXml => {
-				if (svgXml.length !== 0) {
-					this.setState({ content: svgXml })
-				} else {
-					this.setState({ content: 'Please select a loop template to view the details' })
-
-				}
-			});
+	getLoopTemplate(templateIdInDataArray) {
+	    if (typeof templateIdInDataArray !== "undefined") {
+	        this.setState({ fakeLoopCacheWithTemplate:
+                new LoopCache({
+                    "loopTemplate":this.state.loopTemplatesData[templateIdInDataArray],
+                    "name": "fakeLoop"
+                })
+	        })
 		} else {
-          	this.setState({ content: 'Please select a loop template to view the details' })
-          	}
+          	this.setState({ fakeLoopCacheWithTemplate: new LoopCache({}) })
+        }
     }
 
 	handleClose() {
@@ -147,21 +128,18 @@ export default class ViewLoopTemplatesModal extends React.Component {
     			<Modal.Body>
     			   <MaterialTable
     				  title={"View Blueprint MicroService Templates"}
-    				  data={this.state.loopTemplateData}
+    				  data={this.state.loopTemplatesData}
 					  columns={this.state.loopTemplateColumnsDefinition}
 					  icons={this.state.tableIcons}
-    			      onRowClick={(event, rowData) => {this.getBlueprintMicroServiceTemplate(rowData.name);this.setState({selectedRow: rowData.tableData.id})}}
+    			      onRowClick={(event, rowData) => {this.getLoopTemplate(rowData.tableData.id);this.setState({selectedRow: rowData.tableData.id})}}
 					  options={{
 					      headerStyle:rowHeaderStyle,
 					      rowStyle: rowData => ({
 					      backgroundColor: (this.state.selectedRow !== -1 && this.state.selectedRow === rowData.tableData.id) ? '#EEE' : '#FFF'
                           })
                       }}
-                  />
-	              <SvgContainerDivStyled>
-		            <LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.content }} value={this.state.content} >
-					</LoopViewSvgDivStyled>
-	              </SvgContainerDivStyled>
+                />
+	            <SvgGenerator loopCache={this.state.fakeLoopCacheWithTemplate} clickable={false} generatedFrom={SvgGenerator.GENERATED_FROM_TEMPLATE}/>
                 </Modal.Body>
                 <Modal.Footer>
                 	<Button variant="secondary" onClick={this.handleClose}>Close</Button>
diff --git a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js
index 1a6cc1959..7680ec4b9 100644
--- a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js
+++ b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js
@@ -24,6 +24,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import ViewLoopTemplatesModal from './ViewLoopTemplatesModal';
 import { mount } from 'enzyme';
+import { BrowserRouter as Router } from 'react-router-dom';
 
 describe('Verify ViewLoopTemplatesModal', () => {
 	beforeEach(() => {
@@ -128,7 +129,7 @@ describe('Verify ViewLoopTemplatesModal', () => {
 					}
 				});
 			});
-			const component = mount(<ViewLoopTemplatesModal/>);
+			const component = mount(<Router><ViewLoopTemplatesModal/></Router>);
 			expect(component.find('[className="MuiSelect-icon MuiTablePagination-selectIcon"]')).toBeTruthy();
 		});
 		
diff --git a/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap
index 3f6dc9482..ee7b679a5 100644
--- a/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap
+++ b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap
@@ -86,16 +86,7 @@ exports[`Verify ViewLoopTemplatesModal Test the tosca model view render method 1
           },
         ]
       }
-      data={
-        Object {
-          "allowedLoopType": "CLOSED",
-          "index": "1",
-          "maximumInstancesAllowed": 1,
-          "modelService.serviceDetails.name": "MTCA",
-          "name": "MTCA version 1",
-          "updatedDate": "2019-09-06 19:09:42",
-        }
-      }
+      data={Array []}
       icons={
         Object {
           "FirstPage": Object {
@@ -142,16 +133,15 @@ exports[`Verify ViewLoopTemplatesModal Test the tosca model view render method 1
       }
       title="View Blueprint MicroService Templates"
     />
-    <styled.div>
-      <styled.svg
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "Please select a loop template to display it",
-          }
+    <withRouter(SvgGenerator)
+      clickable={false}
+      generatedFrom="TEMPLATE"
+      loopCache={
+        LoopCache {
+          "loopJsonCache": Object {},
         }
-        value="Please select a loop template to display it"
-      />
-    </styled.div>
+      }
+    />
   </ModalBody>
   <ModalFooter>
     <Button
diff --git a/ui-react/src/components/loop_viewer/svg/LoopComponentConverter.js b/ui-react/src/components/loop_viewer/svg/LoopComponentConverter.js
deleted file mode 100644
index 29422a1f5..000000000
--- a/ui-react/src/components/loop_viewer/svg/LoopComponentConverter.js
+++ /dev/null
@@ -1,17 +0,0 @@
-export default class LoopComponentConverter {
-
-	static buildMapOfComponents(loopCache) {
-		var componentsMap = new Map([]);
-		if (typeof (loopCache.getMicroServicePolicies()) !== "undefined") {
-			loopCache.getMicroServicePolicies().forEach(ms => {
-				componentsMap.set(ms.name, "/policyModal/MICRO-SERVICE-POLICY/"+ms.name);
-			})
-		}
-		if (typeof (loopCache.getOperationalPolicies()) !== "undefined") {
-			loopCache.getOperationalPolicies().forEach(op => {
-				componentsMap.set(op.name, "/policyModal/OPERATIONAL-POLICY/"+op.name);
-			})
-		}
-		return componentsMap;
-	}
-}
diff --git a/ui-react/src/components/loop_viewer/svg/LoopSvg.js b/ui-react/src/components/loop_viewer/svg/LoopSvg.js
deleted file mode 100644
index 048f63044..000000000
--- a/ui-react/src/components/loop_viewer/svg/LoopSvg.js
+++ /dev/null
@@ -1,110 +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 styled from 'styled-components';
-import LoopCache from '../../../api/LoopCache';
-import { withRouter } from "react-router-dom";
-import LoopService from '../../../api/LoopService';
-import LoopComponentConverter from './LoopComponentConverter';
-
-const LoopViewSvgDivStyled = styled.svg`
-	display: flex;
-	flex-direction: row;
-	overflow-x: scroll;
-	background-color: ${props => (props.theme.loopViewerBackgroundColor)};
-	border: 1px solid;
-	border-color: ${props => (props.theme.loopViewerHeaderColor)};
-	margin-top: 1em;
-	margin-left: auto;
-	margin-right:auto;
-	margin-bottom: -3em;
-	align-items: center;
-	height: 100%;
-	width: 100%;
-
-`
-
-class LoopViewSvg extends React.Component {
-
-	static emptySvg = "<svg><text x=\"20\" y=\"40\">No LOOP (SVG)</text></svg>";
-
-	state = {
-		svgContent: LoopViewSvg.emptySvg,
-		loopCache: new LoopCache({}),
-		componentModalMapping: new Map([])
-	}
-
-	constructor(props) {
-		super(props);
-		this.handleSvgClick = this.handleSvgClick.bind(this);
-		this.getSvg = this.getSvg.bind(this);
-		this.state.loopCache = props.loopCache;
-		this.state.componentModalMapping = LoopComponentConverter.buildMapOfComponents(props.loopCache);
-		this.getSvg(props.loopCache.getLoopName());
-	}
-
-	shouldComponentUpdate(nextProps, nextState) {
-		return this.state.svgContent !== nextState.svgContent;
-	}
-
-	componentWillReceiveProps(newProps) {
-		if (this.state.loopCache !== newProps.loopCache) {
-			this.setState({
-				loopCache: newProps.loopCache,
-				componentModalMapping: LoopComponentConverter.buildMapOfComponents(newProps.loopCache)
-			});
-			this.getSvg(newProps.loopCache.getLoopName());
-		}
-	}
-
-	getSvg(loopName) {
-		if (typeof loopName !== "undefined") {
-			LoopService.getSvg(loopName).then(svgXml => {
-				if (svgXml.length !== 0) {
-					this.setState({ svgContent: svgXml })
-				} else {
-					this.setState({ svgContent: LoopViewSvg.emptySvg })
-				}
-			});
-		} 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);
-		this.props.history.push(this.state.componentModalMapping.get(elementName));
-	}
-
-	render() {
-		return (
-			<LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.svgContent }} onClick={this.handleSvgClick}>
-
-			</LoopViewSvgDivStyled>
-		);
-	}
-}
-
-export default withRouter(LoopViewSvg);
diff --git a/ui-react/src/components/loop_viewer/svg/LoopSvg.test.js b/ui-react/src/components/loop_viewer/svg/LoopSvg.test.js
deleted file mode 100644
index e54b500f5..000000000
--- a/ui-react/src/components/loop_viewer/svg/LoopSvg.test.js
+++ /dev/null
@@ -1,132 +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 { shallow } from 'enzyme';
-import LoopSvg from './LoopSvg';
-import LoopCache from '../../../api/LoopCache';
-import LoopService from '../../../api/LoopService';
-
-describe('Verify LoopSvg', () => {
-    const loopCache = new LoopCache({
-        "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
-        "microServicePolicies": [{
-            "name": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca",
-            "modelType": "onap.policies.monitoring.cdap.tca.hi.lo.app",
-            "properties": {"domain": "measurementsForVfScaling"},
-            "shared": false,
-            "jsonRepresentation": {"schema": {}}
-        }],
-        "operationalPolicies": [{
-            "name": "OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca",
-            "configurationsJson": {
-                "operational_policy": {
-                    "controlLoop": {},
-                    "policies": []
-                }
-            }
-        }]
-    });
-
-    it('Test the render method no loopName', () => {
-        const localLoopCache = new LoopCache({
-        "microServicePolicies": [{
-            "name": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca",
-            "modelType": "onap.policies.monitoring.cdap.tca.hi.lo.app",
-            "properties": {"domain": "measurementsForVfScaling"},
-            "shared": false,
-            "jsonRepresentation": {"schema": {}}
-          }]
-        });
-        const component = shallow(
-            <LoopSvg.WrappedComponent loopCache={localLoopCache}/>
-        );
-
-        expect(component).toMatchSnapshot();
-    });
-
-    it('Test the render method', () => {
-        const component = shallow(
-            <LoopSvg.WrappedComponent  loopCache={loopCache}/>
-        );
-
-        expect(component).toMatchSnapshot();
-    });
-
-    it('Test the render method svg not empty', async () => {
-        const flushPromises = () => new Promise(setImmediate);
-        LoopService.getSvg = jest.fn().mockImplementation(() => {
-            return Promise.resolve("<svg><text test</text></svg>");
-        });
-        const component = shallow(
-            <LoopSvg.WrappedComponent  loopCache={loopCache}/>
-        );
-        await flushPromises();
-        expect(component).toMatchSnapshot();
-    });
-
-    it('Test handleSvgClick', () => {
-        const historyMock = { push: jest.fn() };
-
-        const component = shallow(
-            <LoopSvg.WrappedComponent loopCache={loopCache} history={historyMock}/>
-        );
-        let dummyElement = document.createElement('div');
-        dummyElement.setAttribute("data-element-id","TCA_h2NMX_v1_0_ResourceInstanceName1_tca");
-
-        const event = { target: { parentNode: { parentNode:{ parentNode: dummyElement }}}};
-
-        component.simulate('click', event);
-        component.update();
-
-        expect(historyMock.push.mock.calls[0]).toEqual([ '/policyModal/MICRO-SERVICE-POLICY/TCA_h2NMX_v1_0_ResourceInstanceName1_tca']);
-
-        //click operational policy
-        dummyElement.setAttribute("data-element-id","OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca");
-        const event2 = { target: { parentNode: { parentNode:{ parentNode: dummyElement }}}};
-
-        component.simulate('click', event2);
-        component.update();
-
-        expect(historyMock.push.mock.calls[1]).toEqual([ '/policyModal/OPERATIONAL-POLICY/OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca']);
-    });
-
-    it('Test componentWillReceiveProps method', () => {
-        const localLoopCache = new LoopCache({
-        "microServicePolicies": [{
-            "name": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca",
-            "modelType": "onap.policies.monitoring.cdap.tca.hi.lo.app",
-            "properties": {"domain": "measurementsForVfScaling"},
-            "shared": false,
-            "jsonRepresentation": {"schema": {}}
-          }]
-        });
-        const component = shallow(
-            <LoopSvg.WrappedComponent loopCache={localLoopCache}/>
-        );
-
-        expect(component.state('componentModalMapping').size).toEqual(1);
-
-        component.setProps({loopCache: loopCache});
-        expect(component.state('componentModalMapping').size).toEqual(2);
-    });
-});
diff --git a/ui-react/src/components/loop_viewer/svg/SvgGenerator.js b/ui-react/src/components/loop_viewer/svg/SvgGenerator.js
new file mode 100644
index 000000000..d718c2e44
--- /dev/null
+++ b/ui-react/src/components/loop_viewer/svg/SvgGenerator.js
@@ -0,0 +1,240 @@
+/*-
+ * ============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-dom";
+import LoopCache from '../../../api/LoopCache';
+import OnapConstant from '../../../utils/OnapConstants';
+
+const DivStyled = styled.div`
+	overflow-x: scroll;
+    width: 100%;
+    height: 100%;
+`
+
+const emptySvg = (<svg> <text x="20" y="40">No LOOP (SVG)</text> </svg>);
+
+class SvgGenerator extends React.Component {
+    boxWidth = 200;
+    boxHeight = 100;
+    boxSpace = 50;
+
+    static GENERATED_FROM_INSTANCE = "INSTANCE";
+    static GENERATED_FROM_TEMPLATE = "TEMPLATE";
+
+	state = {
+		loopCache: new LoopCache({}),
+		clickable: false,
+		generatedFrom: SvgGenerator.GENERATED_FROM_INSTANCE, // INSTANCE / TEMPLATE
+	}
+
+	constructor(props) {
+		super(props);
+		this.state.loopCache = props.loopCache;
+		this.state.clickable = props.clickable;
+		this.state.generatedFrom = props.generatedFrom;
+		this.handleSvgClick = this.handleSvgClick.bind(this);
+		this.renderSvg = this.renderSvg.bind(this);
+	}
+
+	shouldComponentUpdate(nextProps, nextState) {
+		return this.state.loopCache !== nextState.loopCache;
+	}
+
+	componentWillReceiveProps(newProps) {
+		if (this.state.loopCache !== newProps.loopCache) {
+			this.setState({
+				loopCache: newProps.loopCache,
+			});
+		}
+	}
+
+	handleSvgClick(event) {
+	    if (this.state.clickable) {
+            console.debug("svg click event received");
+            var elementName = event.target.parentNode.getAttribute('policyId');
+            console.info("SVG element clicked", elementName);
+            if (elementName !== null) {
+                this.props.history.push("/policyModal/"+event.target.parentNode.getAttribute('policyType')+"/"+elementName);
+            }
+		}
+	}
+
+    createVesBox (xPos) {
+        return this.createOneBox(xPos,null,null,'VES Collector','VES',null);
+    }
+
+    createOneArrow(xPos) {
+        return (
+         <svg width={this.boxSpace} height={this.boxHeight} x={xPos}>
+           <defs>
+            		<marker viewBox="0 0 20 20" markerWidth="20" markerHeight="20" orient="auto" refX="8.5" refY="5" id="arrow">
+            			<path d="m 1 5 l 0 -3 l 7 3 l -7 3 z"
+            				stroke-width= "1" stroke-linecap= "butt" stroke-dasharray= "10000, 1"
+            				fill="#000000" stroke="#000000" />
+            		</marker>
+           </defs>
+           <line x1="0" y1="50%" x2="100%" y2="50%" stroke-width="2" color="black" stroke="black" marker-end="url(#arrow)"/>
+         </svg>
+        );
+    }
+
+    createBeginCircle(xPos, text) {
+            return (
+            <svg width={this.boxWidth} height={this.boxHeight} x={xPos}>
+                <circle cx={this.boxWidth-30} cy="50%" r="30" stroke-width="1" color="black" stroke="black" fill="#27ae60"/>
+                <text x={this.boxWidth-30} y="50%" text-anchor="middle" dominant-baseline="middle" textLength="20%" lengthAdjust="spacingAndGlyphs" >{text}</text>
+            </svg>
+            );
+    }
+
+    createEndCircle(xPos, text) {
+            return (
+            <svg width={this.boxWidth} height={this.boxHeight} x={xPos}>
+                <circle cx={30} cy="50%" r="30" stroke-width="2" color="black" stroke="black" fill="#27ae60"/>
+                <text x={30} y="50%" text-anchor="middle" dominant-baseline="middle" textLength="20%" lengthAdjust="spacingAndGlyphs" >{text}</text>
+            </svg>
+            );
+    }
+
+    createOneBox(xPos, policyId, loopElementModelId , name, title, policyType) {
+        return (
+        <svg width={this.boxWidth} height={this.boxHeight} x={xPos} title="test">
+            <g policyId={policyId} loopElementModelId={loopElementModelId} policyType={policyType}>
+                <rect width="100%" height="100%" stroke-width="2" color="black" stroke="black" fill="#1abc9c"/>
+                <text x="50%" y="15%" color="white" fill="white" dominant-baseline="middle" text-anchor="middle" textLength="50%" lengthAdjust="spacingAndGlyphs">{title}</text>
+                <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" textLength="80%" lengthAdjust="spacingAndGlyphs" >{name}</text>
+                <text x="50%" y="80%" text-anchor="middle" dominant-baseline="middle" textLength="110%" lengthAdjust="spacingAndGlyphs" >{policyId}</text>
+            </g>
+        </svg>
+        );
+    }
+
+    createSvgFromTemplate() {
+        const allElements = [];
+        var xPos = 0;
+
+        allElements.push(this.createBeginCircle(xPos,"Start"))
+        xPos+=(this.boxWidth+this.boxSpace);
+
+        allElements.push(this.createOneArrow(xPos-this.boxSpace));
+
+        allElements.push(this.createVesBox(xPos));
+        xPos+=(this.boxWidth+this.boxSpace);
+
+        allElements.push(this.createOneArrow(xPos-this.boxSpace));
+        //createOneBox(xPos, policyId, loopElementModelId , name, title, policyType)
+        for (var loopElement of this.state.loopCache.getAllLoopElementModels()) {
+
+            allElements.push(this.createOneBox(xPos,
+                loopElement['name'],
+                loopElement['name'],
+                loopElement['shortName'],
+                loopElement['loopElementType'],
+                loopElement['loopElementType']))
+            xPos+=(this.boxWidth+this.boxSpace);
+            allElements.push(this.createOneArrow(xPos-this.boxSpace));
+        }
+
+        allElements.push(this.createEndCircle(xPos, "End"))
+        xPos+=(this.boxWidth+this.boxSpace);
+
+        return allElements;
+    }
+
+    createSvgFromInstance() {
+        const allElements = [];
+        var xPos = 0;
+
+        allElements.push(this.createBeginCircle(xPos,"Start"))
+        xPos+=(this.boxWidth+this.boxSpace);
+
+        allElements.push(this.createOneArrow(xPos-this.boxSpace));
+
+        allElements.push(this.createVesBox(xPos));
+        xPos+=(this.boxWidth+this.boxSpace);
+
+        allElements.push(this.createOneArrow(xPos-this.boxSpace));
+
+        for (var msPolicy in this.state.loopCache.getMicroServicePolicies()) {
+            var loopElementModelName =  this.state.loopCache.getMicroServicePolicies()[msPolicy]['loopElementModel'];
+            if (loopElementModelName !== undefined) {
+                loopElementModelName = loopElementModelName['name'];
+            }
+            allElements.push(this.createOneBox(xPos,
+                this.state.loopCache.getMicroServicePolicies()[msPolicy]['name'],
+                loopElementModelName,
+                this.state.loopCache.getMicroServicePolicies()[msPolicy]['policyModel']['policyAcronym'],
+                'microservice',
+                OnapConstant.microServiceType))
+            xPos+=(this.boxWidth+this.boxSpace);
+            allElements.push(this.createOneArrow(xPos-this.boxSpace));
+        }
+
+        for (var opPolicy in this.state.loopCache.getOperationalPolicies()) {
+            loopElementModelName =  this.state.loopCache.getOperationalPolicies()[opPolicy]['loopElementModel'];
+            if (loopElementModelName !== undefined) {
+                loopElementModelName = loopElementModelName['name'];
+            }
+            allElements.push(this.createOneBox(xPos,
+                this.state.loopCache.getOperationalPolicies()[opPolicy]['name'],
+                loopElementModelName,
+                this.state.loopCache.getOperationalPolicies()[opPolicy]['policyModel']['policyAcronym'],
+                'operational',
+                OnapConstant.operationalPolicyType))
+            xPos+=(this.boxWidth+this.boxSpace);
+            allElements.push(this.createOneArrow(xPos-this.boxSpace));
+        }
+
+        allElements.push(this.createEndCircle(xPos, "End"))
+        xPos+=(this.boxWidth+this.boxSpace);
+
+        return allElements;
+    }
+
+    renderSvg() {
+        if (this.state.loopCache.getLoopName() === undefined) {
+            return [emptySvg];
+        }
+        if (this.state.generatedFrom === SvgGenerator.GENERATED_FROM_INSTANCE) {
+            return this.createSvgFromInstance();
+        } else if (this.state.generatedFrom === SvgGenerator.GENERATED_FROM_TEMPLATE) {
+            return this.createSvgFromTemplate();
+        }
+    }
+
+    render() {
+        var allTheElements = this.renderSvg();
+        var svgWidth = this.boxWidth*allTheElements.length;
+        var svgHeight = this.boxHeight+100;
+        return (
+            <DivStyled onClick={this.handleSvgClick} >
+                <svg height={svgHeight} width={svgWidth}  preserveAspectRatio="none">
+                    {allTheElements}
+                </svg>
+            </DivStyled>
+        );
+    }
+}
+
+export default withRouter(SvgGenerator);
diff --git a/ui-react/src/components/loop_viewer/svg/__snapshots__/LoopSvg.test.js.snap b/ui-react/src/components/loop_viewer/svg/__snapshots__/LoopSvg.test.js.snap
deleted file mode 100644
index e05f1c794..000000000
--- a/ui-react/src/components/loop_viewer/svg/__snapshots__/LoopSvg.test.js.snap
+++ /dev/null
@@ -1,34 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Verify LoopSvg Test the render method 1`] = `
-<styled.svg
-  dangerouslySetInnerHTML={
-    Object {
-      "__html": "<svg><text x=\\"20\\" y=\\"40\\">No LOOP (SVG)</text></svg>",
-    }
-  }
-  onClick={[Function]}
-/>
-`;
-
-exports[`Verify LoopSvg Test the render method no loopName 1`] = `
-<styled.svg
-  dangerouslySetInnerHTML={
-    Object {
-      "__html": "<svg><text x=\\"20\\" y=\\"40\\">No LOOP (SVG)</text></svg>",
-    }
-  }
-  onClick={[Function]}
-/>
-`;
-
-exports[`Verify LoopSvg Test the render method svg not empty 1`] = `
-<styled.svg
-  dangerouslySetInnerHTML={
-    Object {
-      "__html": "<svg><text test</text></svg>",
-    }
-  }
-  onClick={[Function]}
-/>
-`;
diff --git a/ui-react/src/components/loop_viewer/svg/example.svg b/ui-react/src/components/loop_viewer/svg/example.svg
deleted file mode 100644
index a7c40ee27..000000000
--- a/ui-react/src/components/loop_viewer/svg/example.svg
+++ /dev/null
@@ -1 +0,0 @@
-<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