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

11 files changed, 179 insertions, 194 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