Merge branch 'master' of /home/jwagantall/linuxfoundation/onap/IT-21108/clamp

Signed-off-by: Jessica Wagantall <jwagantall@linuxfoundation.org>

44 files changed, 7285 insertions, 0 deletions

diff --git a/ui-react/src/components/dialogs/Loop/CreateLoopModal.js b/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
new file mode 100644
index 000000000..5663360a0
--- /dev/null
+++ b/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
@@ -0,0 +1,190 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP CLAMP
+ * ================================================================================
+ * Copyright (C) 2020 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 Select from 'react-select';
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import Form from 'react-bootstrap/Form';
+import Row from 'react-bootstrap/Row';
+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 ErrMsgStyled = styled.div`
+	color: red;
+`
+
+export default class CreateLoopModal extends React.Component {
+	constructor(props, context) {
+		super(props, context);
+
+		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.renderSvg = this.renderSvg.bind(this);
+		this.state = {
+			show: true,
+			chosenTemplateName: '',
+			modelInputErrMsg: '',
+			modelName: '',
+			templateNames: [],
+			fakeLoopCacheWithTemplate: new LoopCache({})
+		};
+	}
+
+	async componentDidMount() {
+		await this.getAllLoopTemplates();
+		await this.getModelNames();
+	}
+
+	handleClose() {
+		this.setState({ show: false });
+		this.props.history.push('/');
+	}
+
+	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({}) })
+        }
+	}
+
+	getAllLoopTemplates() {
+		TemplateService.getAllLoopTemplates().then(templatesData => {
+		    const templateOptions = templatesData.map((templateData) => { return { label: templateData.name, value: templateData.name, templateObject: templateData } });
+            this.setState({
+                templateNames: templateOptions })
+		});
+	}
+
+	getModelNames() {
+		TemplateService.getLoopNames().then(loopNames => {
+			if (!loopNames) {
+				loopNames = [];
+			}
+			// Remove LOOP_ prefix
+			let trimmedLoopNames = loopNames.map(str => str.replace('LOOP_', ''));
+			this.setState({ modelNames: trimmedLoopNames });
+		});
+	}
+
+	handleCreate() {
+		if (!this.state.modelName) {
+			alert("A model name is required");
+			return;
+		}
+		console.debug("Create Model " + this.state.modelName + ", Template " + this.state.chosenTemplateName + " is chosen");
+		this.setState({ show: false });
+		LoopService.createLoop("LOOP_" + this.state.modelName, this.state.chosenTemplateName).then(text => {
+			console.debug("CreateLoop response received: ", text);
+			try {
+				this.props.history.push('/');
+				this.props.loadLoopFunction("LOOP_" + this.state.modelName);
+			} catch(err) {
+				alert(text);
+				this.props.history.push('/');
+			}
+		})
+		.catch(error => {
+			console.debug("Create Loop failed");
+		});
+	}
+
+	handleModelName(event) {
+		if (this.state.modelNames.includes(event.target.value)) {
+			this.setState({
+				modelInputErrMsg: 'A model named "' + event.target.value + '" already exists. Please pick another name.',
+				modelName: event.target.value
+			});
+			return;
+		} else {
+			this.setState({
+				modelInputErrMsg: '',
+				modelName: event.target.value
+			});
+		}
+	}
+
+	renderSvg() {
+		return (
+			<SvgGenerator loopCache={this.state.fakeLoopCacheWithTemplate} clickable={false} generatedFrom={SvgGenerator.GENERATED_FROM_TEMPLATE}/>
+		);
+	}
+
+	render() {
+		return (
+			<ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} >
+				<Modal.Header closeButton>
+					<Modal.Title>Create Model</Modal.Title>
+				</Modal.Header>
+				<Modal.Body>
+					<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} />
+						</Col>
+					</Form.Group>
+                    <Form.Group as={Row} style={{alignItems: 'center'}} controlId="formSvgPreview">
+                    <Form.Label column sm="2">Model Preview:</Form.Label>
+                        <Col sm="10">
+                            {this.renderSvg()}
+                        </Col>
+                    </Form.Group>
+					<Form.Group as={Row} controlId="formPlaintextEmail">
+						<Form.Label column sm="2">Model Name:</Form.Label>
+						<input sm="5" type="text" style={{width: '50%', marginLeft: '1em' }}
+							value={this.state.modelName}
+							onChange={this.handleModelName}
+						/>
+						<span sm="5"/>
+					</Form.Group>
+					<Form.Group as={Row} controlId="formPlaintextEmail">
+						<Form.Label column sm="2"> </Form.Label>
+						<ErrMsgStyled>{this.state.modelInputErrMsg}</ErrMsgStyled>
+					</Form.Group>
+				</Modal.Body>
+				<Modal.Footer>
+					<Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
+					<Button variant="primary" type="submit" onClick={this.handleCreate}>Create</Button>
+				</Modal.Footer>
+			</ModalStyled>
+		);
+	}
+}
diff --git a/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js b/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js
new file mode 100644
index 000000000..1caa22dc7
--- /dev/null
+++ b/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js
@@ -0,0 +1,139 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP CLAMP
+ * ================================================================================
+ * Copyright (C) 2020 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 CreateLoopModal from './CreateLoopModal';
+import LoopService from '../../../api/LoopService';
+import TemplateService from '../../../api/TemplateService';
+
+describe('Verify CreateLoopModal', () => {
+
+  it('Test the render method', async () => {
+    const flushPromises = () => new Promise(setImmediate);
+    TemplateService.getAllLoopTemplates = jest.fn().mockImplementation(() => {
+      return Promise.resolve([{"name":"template1"},{"name":"template2"}]);
+    });
+    TemplateService.getLoopNames = jest.fn().mockImplementation(() => {
+      return Promise.resolve([]);
+    });
+
+    const component = shallow(<CreateLoopModal/>);
+    expect(component).toMatchSnapshot();
+    await flushPromises();
+    component.update();
+    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 component = shallow(<CreateLoopModal/>);
+    component.find('StateManager').simulate('change', {value: 'template1', templateObject: {"name":"template1"} });
+    await flushPromises();
+    component.update();
+    expect(component.state('chosenTemplateName')).toEqual("template1");
+    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('fakeLoopCacheWithTemplate').getLoopTemplate()['name']).toEqual("template2");
+    expect(component.state('fakeLoopCacheWithTemplate').getLoopName()).toEqual("fakeLoop");
+  });
+
+  it('handleModelName event', async () => {
+    const flushPromises = () => new Promise(setImmediate);
+    TemplateService.getAllLoopTemplates = jest.fn().mockImplementation(() => {
+      return Promise.resolve([{"name":"template1"},{"name":"template2"}]);
+    });
+    TemplateService.getLoopNames = jest.fn().mockImplementation(() => {
+      return Promise.resolve([]);
+    });
+    const event = {target: {value : "model1"} };
+    const component = shallow(<CreateLoopModal/>);
+    await flushPromises();
+    component.find('input').simulate('change', event);
+    component.update();
+    expect(component.state('modelName')).toEqual("model1");
+  });
+
+  it('Test handleClose', () => {
+    const historyMock = { push: jest.fn() }; 
+    const handleClose = jest.spyOn(CreateLoopModal.prototype,'handleClose');
+    const component = shallow(<CreateLoopModal history={historyMock} />)
+
+    component.find('[variant="secondary"]').prop('onClick')();
+
+    expect(handleClose).toHaveBeenCalledTimes(1);
+    expect(component.state('show')).toEqual(false);
+    expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
+    
+    handleClose.mockClear();
+  });
+
+  it('Test handleCreate Fail', () => {
+    const handleCreate = jest.spyOn(CreateLoopModal.prototype,'handleCreate');
+    const component = shallow(<CreateLoopModal/>)
+
+    component.find('[variant="primary"]').prop('onClick')();
+
+    expect(handleCreate).toHaveBeenCalledTimes(1);
+    expect(component.state('show')).toEqual(true);
+
+    handleCreate.mockClear();
+  });
+
+  it('Test handleCreate Suc', async () => {
+	const flushPromises = () => new Promise(setImmediate);
+    const historyMock = { push: jest.fn() };
+    const loadLoopFunction = jest.fn();  
+    
+    LoopService.createLoop = jest.fn().mockImplementation(() => {
+			return Promise.resolve({
+				ok: true,
+				status: 200,
+				json: () => {}
+			});
+		});
+
+    const handleCreate = jest.spyOn(CreateLoopModal.prototype,'handleCreate');
+    const component = shallow(<CreateLoopModal history={historyMock} loadLoopFunction={loadLoopFunction}/>)
+    component.setState({
+			modelName: "modelNameTest",
+			chosenTemplateName: "template1"
+		});
+
+    component.find('[variant="primary"]').prop('onClick')();
+	await flushPromises();
+	component.update();
+
+    expect(handleCreate).toHaveBeenCalledTimes(1);
+    expect(component.state('show')).toEqual(false);
+    expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
+
+    handleCreate.mockClear();
+  });
+
+});
diff --git a/ui-react/src/components/dialogs/Loop/DeployLoopModal.js b/ui-react/src/components/dialogs/Loop/DeployLoopModal.js
new file mode 100644
index 000000000..2155977f6
--- /dev/null
+++ b/ui-react/src/components/dialogs/Loop/DeployLoopModal.js
@@ -0,0 +1,179 @@
+/*-
+ * ============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 LoopActionService from '../../../api/LoopActionService';
+import LoopService from '../../../api/LoopService';
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import Form from 'react-bootstrap/Form';
+import Tabs from 'react-bootstrap/Tabs';
+import Tab from 'react-bootstrap/Tab';
+import styled from 'styled-components';
+import Spinner from 'react-bootstrap/Spinner'
+
+const StyledSpinnerDiv = styled.div`
+	justify-content: center !important;
+	display: flex !important;
+`;
+
+const ModalStyled = styled(Modal)`
+	background-color: transparent;
+`
+const FormStyled = styled(Form.Group)`
+	padding: .25rem 1.5rem;
+`
+export default class DeployLoopModal extends React.Component {
+
+
+		
+	constructor(props, context) {
+		super(props, context);
+
+		this.handleSave = this.handleSave.bind(this);
+		this.handleClose = this.handleClose.bind(this);
+		this.handleChange = this.handleChange.bind(this);
+		this.refreshStatus = this.refreshStatus.bind(this);
+		this.renderDeployParam = this.renderDeployParam.bind(this);
+		this.renderSpinner = this.renderSpinner.bind(this);
+
+		const propertiesJson = JSON.parse(JSON.stringify(this.props.loopCache.getGlobalProperties()));
+		this.state = {
+			loopCache: this.props.loopCache,
+			temporaryPropertiesJson: propertiesJson,
+			show: true,
+			key: this.getInitialKeyValue(propertiesJson)
+		};
+	}
+	getInitialKeyValue(temporaryPropertiesJson) {
+		const deployJsonList = temporaryPropertiesJson["dcaeDeployParameters"];
+		let initialKey;
+		Object.keys(deployJsonList)
+			.filter((obj) => Object.keys(deployJsonList).indexOf(obj) === 0)
+			.map(obj =>
+				initialKey = obj
+		);
+		return initialKey;
+	}
+	componentWillReceiveProps(newProps) {
+		this.setState({
+			loopName: newProps.loopCache.getLoopName(),
+			show: true
+		});
+	}
+
+	handleClose(){
+		this.setState({ show: false });
+		this.props.history.push('/');
+	}
+
+	renderSpinner() {
+		if (this.state.deploying) {
+			return (
+				<StyledSpinnerDiv>
+					<Spinner animation="border" role="status">
+						<span className="sr-only">Loading...</span>
+					</Spinner>
+				</StyledSpinnerDiv>
+			);
+		} else {
+			return (<div></div>);
+		}
+	}
+
+	handleSave() {
+		const loopName = this.props.loopCache.getLoopName();
+		// save the global propserties
+		this.setState({ deploying: true });
+		LoopService.updateGlobalProperties(loopName, this.state.temporaryPropertiesJson).then(resp => {
+			LoopActionService.performAction(loopName, "deploy").then(pars => {
+				this.props.showSucAlert("Action deploy successfully performed");
+				// refresh status and update loop logs
+				this.refreshStatus(loopName);
+			})
+			.catch(error => {
+				this.props.showFailAlert("Action deploy failed");
+				// refresh status and update loop logs
+				this.refreshStatus(loopName);
+			});
+		});
+	}
+
+	refreshStatus(loopName) {
+		LoopActionService.refreshStatus(loopName).then(data => {
+			this.props.updateLoopFunction(data);
+			this.setState({ show: false, deploying: false });
+			this.props.history.push('/');
+		})
+		.catch(error => {
+			this.props.showFailAlert("Refresh status failed");
+			this.setState({ show: false, deploying: false  });
+			this.props.history.push('/');
+		});
+	}
+	handleChange(event) {
+		let deploymentParam = this.state.temporaryPropertiesJson["dcaeDeployParameters"];
+		deploymentParam[this.state.key][event.target.name] = event.target.value;
+
+		this.setState({temporaryPropertiesJson:{dcaeDeployParameters: deploymentParam}});
+	}
+	renderDeployParamTabs() {
+		if (typeof (this.state.temporaryPropertiesJson) === "undefined") {
+			 return "";
+		}
+
+		const deployJsonList = this.state.temporaryPropertiesJson["dcaeDeployParameters"];
+		var indents = [];
+		Object.keys(deployJsonList).map((item,key) =>
+			indents.push(<Tab eventKey={item} title={item}>
+				{this.renderDeployParam(deployJsonList[item])}
+				</Tab>)
+		);
+		return indents;
+	}
+	renderDeployParam(deployJson) {
+		var indents = [];
+		Object.keys(deployJson).map((item,key) =>
+		indents.push(<FormStyled>
+				<Form.Label>{item}</Form.Label>
+				<Form.Control type="text" name={item} onChange={this.handleChange} defaultValue={deployJson[item]}></Form.Control>
+			</FormStyled>));
+		return indents;
+	}
+	render() {
+		return (
+					<ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} >
+						<Modal.Header closeButton>
+							<Modal.Title>Deployment parameters</Modal.Title>
+						</Modal.Header>
+						<Tabs id="controlled-tab-example" activeKey={this.state.key} onSelect={key => this.setState({ key })}>
+						{this.renderDeployParamTabs()}
+						</Tabs>
+						{this.renderSpinner()}
+						<Modal.Footer>
+							<Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
+							<Button variant="primary" type="submit" onClick={this.handleSave}>Deploy</Button>
+						</Modal.Footer>
+					</ModalStyled>
+		);
+	}
+}
diff --git a/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js b/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js
new file mode 100644
index 000000000..84dbfd1f6
--- /dev/null
+++ b/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js
@@ -0,0 +1,112 @@
+/*-
+ * ============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 DeployLoopModal from './DeployLoopModal';
+import LoopCache from '../../../api/LoopCache';
+import LoopActionService from '../../../api/LoopActionService';
+import LoopService from '../../../api/LoopService';
+
+describe('Verify DeployLoopModal', () => {
+	const loopCache = new LoopCache({
+		"name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
+		"globalPropertiesJson": {
+			"dcaeDeployParameters": {
+				"testMs": {
+					"location_id": "",
+					"policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
+				}
+			}
+		}
+	});
+
+	it('Test the render method', () => {
+		const component = shallow(
+			<DeployLoopModal loopCache={loopCache}/>
+		)
+
+	expect(component).toMatchSnapshot();
+	});
+	
+	it('Test handleClose', () => {
+		const historyMock = { push: jest.fn() };
+		const handleClose = jest.spyOn(DeployLoopModal.prototype,'handleClose');
+		const component = shallow(<DeployLoopModal history={historyMock} loopCache={loopCache}/>)
+
+		component.find('[variant="secondary"]').prop('onClick')();
+
+		expect(handleClose).toHaveBeenCalledTimes(1);
+		expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
+	});
+
+	it('Test handleSave successful', async () => {
+		const flushPromises = () => new Promise(setImmediate);
+		const historyMock = { push: jest.fn() };
+		const updateLoopFunction = jest.fn();
+		const showSucAlert = jest.fn();
+		const showFailAlert = jest.fn();
+		const handleSave = jest.spyOn(DeployLoopModal.prototype,'handleSave');
+		LoopService.updateGlobalProperties = jest.fn().mockImplementation(() => {
+			return Promise.resolve({
+				ok: true,
+				status: 200,
+				text: () => "OK"
+			});
+		});
+		LoopActionService.performAction = jest.fn().mockImplementation(() => {
+			return Promise.resolve({
+				ok: true,
+				status: 200,
+				json: () => {}
+			});
+		});
+		LoopActionService.refreshStatus = jest.fn().mockImplementation(() => {
+			return Promise.resolve({
+				ok: true,
+				status: 200,
+				json: () => {}
+			});
+		});
+
+		const component = shallow(<DeployLoopModal history={historyMock} 
+						loopCache={loopCache} updateLoopFunction={updateLoopFunction} showSucAlert={showSucAlert} showFailAlert={showFailAlert} />)
+
+		component.find('[variant="primary"]').prop('onClick')();
+		await flushPromises();
+		component.update();
+
+		expect(handleSave).toHaveBeenCalledTimes(1);
+		expect(component.state('show')).toEqual(false);
+		expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
+		handleSave.mockClear();
+	});
+
+	it('Onchange event', () => {
+		const event = { target: { name: "location_id", value: "testLocation"} };
+		const component = shallow(<DeployLoopModal loopCache={loopCache}/>);
+
+		component.find('[name="location_id"]').simulate('change', event);
+		component.update();
+		expect(component.state('temporaryPropertiesJson').dcaeDeployParameters.testMs.location_id).toEqual("testLocation");
+	});
+});
\ No newline at end of file
diff --git a/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js b/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js
new file mode 100644
index 000000000..acd0acade
--- /dev/null
+++ b/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js
@@ -0,0 +1,118 @@
+/*-
+ * ============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 Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import Form from 'react-bootstrap/Form';
+import styled from 'styled-components';
+import LoopService from '../../../api/LoopService';
+
+const ModalStyled = styled(Modal)`
+	background-color: transparent;
+`
+export default class LoopPropertiesModal extends React.Component {
+
+	state = {
+		show: true,
+		loopCache: this.props.loopCache,
+		temporaryPropertiesJson: JSON.parse(JSON.stringify(this.props.loopCache.getGlobalProperties()))
+	};
+
+	constructor(props, context) {
+		super(props, context);
+
+		this.handleClose = this.handleClose.bind(this);
+		this.handleSave = this.handleSave.bind(this);
+		this.handleChange = this.handleChange.bind(this);
+
+		this.renderDcaeParameters = this.renderDcaeParameters.bind(this);
+		this.renderAllParameters = this.renderAllParameters.bind(this);
+		this.getDcaeParameters = this.getDcaeParameters.bind(this);
+		this.readOnly = props.readOnly !== undefined ? props.readOnly : false;
+	}
+
+	componentWillReceiveProps(newProps) {
+		this.setState({
+			loopCache: newProps.loopCache,
+			temporaryPropertiesJson: JSON.parse(JSON.stringify(newProps.loopCache.getGlobalProperties()))
+		});
+	}
+
+	handleClose() {
+		this.props.history.push('/');
+	}
+
+	handleSave(event) {
+		LoopService.updateGlobalProperties(this.state.loopCache.getLoopName(), this.state.temporaryPropertiesJson).then(resp => {
+			this.setState({ show: false });
+			this.props.history.push('/');
+			this.props.loadLoopFunction(this.state.loopCache.getLoopName());
+		});
+	}
+
+	handleChange(event) {
+		this.setState({temporaryPropertiesJson:{[event.target.name]: JSON.parse(event.target.value)}});
+	}
+
+	renderAllParameters() {
+		return (<Modal.Body>
+			<Form>
+				{this.renderDcaeParameters()}
+			</Form>
+		</Modal.Body>
+		);
+	}
+
+	getDcaeParameters() {
+		if (typeof (this.state.temporaryPropertiesJson) !== "undefined") {
+			return JSON.stringify(this.state.temporaryPropertiesJson["dcaeDeployParameters"]);
+		} else {
+			return "";
+		}
+
+	}
+
+	renderDcaeParameters() {
+		return (
+			<Form.Group >
+				<Form.Label>Deploy Parameters</Form.Label>
+				<Form.Control as="textarea" rows="3" name="dcaeDeployParameters" onChange={this.handleChange} defaultValue={this.getDcaeParameters()}></Form.Control>
+			</Form.Group>
+		);
+	}
+
+	render() {
+		return (
+			<ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} >
+				<Modal.Header closeButton>
+					<Modal.Title>Model Properties</Modal.Title>
+				</Modal.Header>
+					{this.renderAllParameters()}
+				<Modal.Footer>
+					<Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
+					<Button variant="primary" type="submit" disabled={this.readOnly}  onClick={this.handleSave}>Save Changes</Button>
+				</Modal.Footer>
+			</ModalStyled>
+		);
+	}
+}
diff --git a/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.test.js b/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.test.js
new file mode 100644
index 000000000..5bbefe228
--- /dev/null
+++ b/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.test.js
@@ -0,0 +1,108 @@
+/*-
+ * ============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 LoopPropertiesModal from './LoopPropertiesModal';
+import LoopCache from '../../../api/LoopCache';
+import LoopService from '../../../api/LoopService';
+
+describe('Verify LoopPropertiesModal', () => {
+	const loopCache = new LoopCache({
+		"name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
+		"globalPropertiesJson": {
+			"dcaeDeployParameters": {
+				"location_id": "",
+				"policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
+			}
+		}
+	});
+
+	it('Test the render method', () => {
+		const component = shallow(
+			<LoopPropertiesModal loopCache={loopCache}/>
+		)
+		component.setState({ show: true,
+			temporaryPropertiesJson: {
+				"dcaeDeployParameters": {
+					"location_id": "",
+					"policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
+				}
+			}
+		});
+
+	expect(component.state('temporaryPropertiesJson')).toEqual({
+	"dcaeDeployParameters": {
+		"location_id": "",
+		"policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"}
+	});
+	expect(component.state('show')).toEqual(true);
+
+	expect(component).toMatchSnapshot();
+	});
+
+	it('Test handleClose', () => {
+		const historyMock = { push: jest.fn() };
+		const handleClose = jest.spyOn(LoopPropertiesModal.prototype,'handleClose');
+		const component = shallow(<LoopPropertiesModal history={historyMock} loopCache={loopCache}/>)
+
+		component.find('[variant="secondary"]').prop('onClick')();
+
+		expect(handleClose).toHaveBeenCalledTimes(1);
+		expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
+	});
+
+	it('Test handleSave successful', async () => {
+		const flushPromises = () => new Promise(setImmediate);
+		const historyMock = { push: jest.fn() };
+		const loadLoopFunction = jest.fn();
+		const handleSave = jest.spyOn(LoopPropertiesModal.prototype,'handleSave');
+		LoopService.updateGlobalProperties = jest.fn().mockImplementation(() => {
+			return Promise.resolve({
+				ok: true,
+				status: 200,
+				text: () => "OK"
+			});
+		});
+
+		const component = shallow(<LoopPropertiesModal history={historyMock} 
+						loopCache={loopCache} loadLoopFunction={loadLoopFunction} />)
+
+		component.find('[variant="primary"]').prop('onClick')();
+		await flushPromises();
+		component.update();
+
+		expect(handleSave).toHaveBeenCalledTimes(1);
+		expect(component.state('show')).toEqual(false);
+		expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
+	});
+
+	it('Onchange event', () => {
+		const event = {target:{name:"dcaeDeployParameters", value:"{\"location_id\": \"testLocation\",\"policy_id\": \"TCA_h2NMX_v1_0_ResourceInstanceName1_tca\"}"}};
+		const component = shallow(<LoopPropertiesModal loopCache={loopCache}/>);
+
+		component.find('FormControl').simulate('change', event);
+		component.update();
+
+		expect(component.state('temporaryPropertiesJson').dcaeDeployParameters.location_id).toEqual("testLocation");
+	});
+});
diff --git a/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js b/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js
new file mode 100644
index 000000000..5154a880b
--- /dev/null
+++ b/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js
@@ -0,0 +1,254 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP CLAMP
+ * ================================================================================
+ * Copyright (C) 2020 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, { forwardRef } from 'react'
+import MaterialTable from "material-table";
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import styled from 'styled-components';
+import PolicyToscaService from '../../../api/PolicyToscaService';
+import ArrowUpward from '@material-ui/icons/ArrowUpward';
+import ChevronLeft from '@material-ui/icons/ChevronLeft';
+import ChevronRight from '@material-ui/icons/ChevronRight';
+import Clear from '@material-ui/icons/Clear';
+import FirstPage from '@material-ui/icons/FirstPage';
+import LastPage from '@material-ui/icons/LastPage';
+import Search from '@material-ui/icons/Search';
+import LoopService from '../../../api/LoopService';
+import Tabs from 'react-bootstrap/Tabs';
+import Tab from 'react-bootstrap/Tab';
+import Alert from 'react-bootstrap/Alert';
+
+const ModalStyled = styled(Modal)`
+	background-color: transparent;
+`
+const TextModal = styled.textarea`
+	margin-top: 20px;
+	white-space:pre;
+	background-color: ${props => props.theme.toscaTextareaBackgroundColor};
+	text-align: justify;
+	font-size: ${props => props.theme.toscaTextareaFontSize};
+	width: 100%;
+	height: 300px;
+`
+const cellStyle = { border: '1px solid black' };
+const headerStyle = { backgroundColor: '#ddd',	border: '2px solid black'	};
+const rowHeaderStyle = {backgroundColor:'#ddd',  fontSize: '15pt', text: 'bold', border: '1px solid black'};
+
+export default class ModifyLoopModal extends React.Component {
+
+	state = {
+		show: true,
+		loopCache: this.props.loopCache,
+		content: 'Please select Tosca model to view the details',
+		selectedRowData: {},
+		toscaPolicyModelsData: [],
+		selectedPolicyModelsData: [],
+		key: 'add',
+		showFailAlert: false,
+		toscaColumns: [
+			{ title: "#", field: "index", render: rowData => rowData.tableData.id + 1,
+				cellStyle: cellStyle,
+				headerStyle: headerStyle
+			},
+			{ title: "Policy Model Type", field: "policyModelType",
+				cellStyle: cellStyle,
+				headerStyle: headerStyle
+			},
+			{ title: "Policy Acronym", field: "policyAcronym",
+				cellStyle: cellStyle,
+				headerStyle: headerStyle
+			},
+			{ title: "Policy Name", field: "policyName",
+             	cellStyle: cellStyle,
+                headerStyle: headerStyle
+            },
+			{ title: "Version", field: "version",
+				cellStyle: cellStyle,
+				headerStyle: headerStyle
+			},
+			{ title: "Uploaded By", field: "updatedBy",
+				cellStyle: cellStyle,
+				headerStyle: headerStyle
+			},
+			{ title: "Uploaded Date", field: "updatedDate", editable: 'never',
+				cellStyle: cellStyle,
+				headerStyle: headerStyle
+			},
+             { title: "Created Date", field: "createdDate", editable: 'never',
+             	cellStyle: cellStyle,
+             	headerStyle: headerStyle
+             }
+		],
+		tableIcons: {
+		    FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
+		    LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
+		    NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
+		    PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
+		    ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
+		    Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
+		    SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref} />)
+		}
+	};
+
+	constructor(props, context) {
+		super(props, context);
+		this.handleClose = this.handleClose.bind(this);
+		this.initializeToscaPolicyModelsInfo = this.initializeToscaPolicyModelsInfo.bind(this);
+		this.handleYamlContent = this.handleYamlContent.bind(this);
+		this.getToscaPolicyModelYaml = this.getToscaPolicyModelYaml.bind(this);
+		this.handleAdd = this.handleAdd.bind(this);
+		this.handleRemove = this.handleRemove.bind(this);
+		this.initializeToscaPolicyModelsInfo();
+	}
+
+	componentWillReceiveProps(newProps) {
+		this.setState({
+			loopCache: newProps.loopCache,
+			temporaryPropertiesJson: JSON.parse(JSON.stringify(newProps.loopCache.getGlobalProperties()))
+		});
+	}
+
+	initializeToscaPolicyModelsInfo() {
+		var operationalPolicies = this.state.loopCache.getOperationalPolicies();
+		var selectedPolicyModels = [];
+		for (var policy in operationalPolicies) {
+		    var newRow = operationalPolicies[policy]["policyModel"];
+		    newRow["policyName"] = operationalPolicies[policy].name;
+			selectedPolicyModels.push(newRow);
+		}
+
+		PolicyToscaService.getToscaPolicyModels().then(allToscaModels => {
+			this.setState({ toscaPolicyModelsData: allToscaModels,
+							selectedPolicyModelsData: selectedPolicyModels});
+		});
+	}
+
+	getToscaPolicyModelYaml(policyModelType, policyModelVersion) {
+		if (typeof policyModelType !== "undefined") {
+			PolicyToscaService.getToscaPolicyModelYaml(policyModelType, policyModelVersion).then(toscaYaml => {
+				if (toscaYaml.length !== 0) {
+					this.setState({content: toscaYaml})
+				} else {
+					this.setState({ content: 'No Tosca model Yaml available' })
+				}
+			});
+		} else {
+			this.setState({ content: 'Please select Tosca model to view the details' })
+		}
+	}
+
+	handleYamlContent(event) {
+		this.setState({ content: event.target.value });
+	}
+
+	handleClose() {
+		this.setState({ show: false });
+		this.props.history.push('/');
+	}
+
+	renderAlert() {
+		return (
+			<div>
+				<Alert variant="danger" show={this.state.showFailAlert} onClose={this.disableAlert} dismissible>
+					{this.state.showMessage}
+				</Alert>
+			</div>
+		);
+	}
+
+	handleAdd() {
+		LoopService.addOperationalPolicyType(this.state.loopCache.getLoopName(),this.state.selectedRowData.policyModelType,this.state.selectedRowData.version)
+		.then(pars => {
+			this.props.loadLoopFunction(this.state.loopCache.getLoopName());
+			this.handleClose();
+		})
+		.catch(error => {
+			this.setState({ showFailAlert: true, showMessage: "Adding failed with error: " + error.message});
+		});
+	}
+
+	handleRemove() {
+		LoopService.removeOperationalPolicyType(this.state.loopCache.getLoopName(),this.state.selectedRowData.policyModelType,this.state.selectedRowData.version,this.state.selectedRowData.policyName);
+		this.props.loadLoopFunction(this.state.loopCache.getLoopName());
+		this.handleClose();
+	}
+
+	render() {
+		return (
+			<ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} >
+				<Modal.Header closeButton>
+					<Modal.Title>Modify Loop Operational Policies</Modal.Title>
+				</Modal.Header>
+				<Tabs id="controlled-tab-example" activeKey={this.state.key} onSelect={key => this.setState({ key, selectedRowData: {} })}>
+					<Tab eventKey="add" title="Add Operational Policies">
+						<Modal.Body>
+							<MaterialTable
+							title={"View Tosca Policy Models"}
+							data={this.state.toscaPolicyModelsData}
+							columns={this.state.toscaColumns}
+							icons={this.state.tableIcons}
+							onRowClick={(event, rowData) => {this.getToscaPolicyModelYaml(rowData.policyModelType, rowData.version);this.setState({selectedRowData: rowData})}}
+							options={{
+								headerStyle: rowHeaderStyle,
+								rowStyle: rowData => ({
+									backgroundColor: (this.state.selectedRowData !== {} && this.state.selectedRowData.tableData !== undefined
+									&& this.state.selectedRowData.tableData.id === rowData.tableData.id) ? '#EEE' : '#FFF'
+									})
+							}}
+							/>
+							<div>
+								<TextModal value={this.state.content} onChange={this.handleYamlContent}/>
+							</div>
+						</Modal.Body>
+						{this.renderAlert()}
+					</Tab>
+					<Tab eventKey="remove" title="Remove Operational Policies">
+						<Modal.Body>
+							<MaterialTable
+							title={"Tosca Policy Models already added"}
+							data={this.state.selectedPolicyModelsData}
+							columns={this.state.toscaColumns}
+							icons={this.state.tableIcons}
+							onRowClick={(event, rowData) => {this.setState({selectedRowData: rowData})}}
+							options={{
+								headerStyle: rowHeaderStyle,
+								rowStyle: rowData => ({
+									backgroundColor: (this.state.selectedRowData !== {} && this.state.selectedRowData.tableData !== undefined
+									&& this.state.selectedRowData.tableData.id === rowData.tableData.id) ? '#EEE' : '#FFF'
+								})
+							}}
+							/>
+						</Modal.Body>
+					</Tab>
+				</Tabs>
+				<Modal.Footer>
+					<Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
+					<Button variant="primary" disabled={(this.state.key === "remove")} type="submit" onClick={this.handleAdd}>Add</Button>
+					<Button variant="primary" disabled={(this.state.key === "add")} type="submit" onClick={this.handleRemove}>Remove</Button>
+				</Modal.Footer>
+
+			</ModalStyled>
+		);
+	}
+}
diff --git a/ui-react/src/components/dialogs/Loop/ModifyLoopModal.test.js b/ui-react/src/components/dialogs/Loop/ModifyLoopModal.test.js
new file mode 100644
index 000000000..055ad0e68
--- /dev/null
+++ b/ui-react/src/components/dialogs/Loop/ModifyLoopModal.test.js
@@ -0,0 +1,109 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP CLAMP
+ * ================================================================================
+ * Copyright (C) 2020 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 { mount } from 'enzyme';
+import ModifyLoopModal from './ModifyLoopModal';
+import LoopCache from '../../../api/LoopCache';
+import LoopService from '../../../api/LoopService';
+import PolicyToscaService from '../../../api/PolicyToscaService';
+
+describe('Verify ModifyLoopModal', () => {
+    beforeEach(() => {
+        PolicyToscaService.getToscaPolicyModels = jest.fn().mockImplementation(() => {
+            return Promise.resolve([{
+                "policyModelType":"test",
+                "policyAcronym":"test",
+                "version":"1.0.0",
+                "updatedBy":"",
+                "updatedDate":""
+            }]);
+        });
+        PolicyToscaService.getToscaPolicyModelYaml = jest.fn().mockImplementation(() => {
+            return Promise.resolve("OK");
+        });
+    })
+
+    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": {}}
+            }],
+            "globalPropertiesJson": {
+                "dcaeDeployParameters": {
+                    "testMs": {
+                    "location_id": "",
+                    "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
+                }
+            }
+        }
+    });
+    const historyMock = { push: jest.fn() };
+    const flushPromises = () => new Promise(setImmediate);
+
+    it('Test handleClose', () => {
+        const handleClose = jest.spyOn(ModifyLoopModal.prototype,'handleClose');
+        const component = mount(<ModifyLoopModal history={historyMock} loopCache={loopCache}/>)
+
+        component.find('[variant="secondary"]').get(0).props.onClick();
+
+        expect(handleClose).toHaveBeenCalledTimes(1);
+        expect(component.state('show')).toEqual(false);
+        expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
+    });
+
+    it('Test getToscaPolicyModelYaml',  async () => {
+        const flushPromises = () => new Promise(setImmediate);
+        const component = mount(<ModifyLoopModal history={historyMock} loopCache={loopCache}/>)
+        component.setState({ 
+                "selectedRowData": {"tableData":{"id":0}}
+        });
+        const instance = component.instance();
+
+        instance.getToscaPolicyModelYaml("","1.0.0");
+        expect(component.state('content')).toEqual("Please select Tosca model to view the details");
+
+        instance.getToscaPolicyModelYaml("test","1.0.0");
+        await flushPromises();
+        expect(component.state('content')).toEqual("OK");
+
+        PolicyToscaService.getToscaPolicyModelYaml = jest.fn().mockImplementation(() => {
+            return Promise.resolve("");
+        });
+        instance.getToscaPolicyModelYaml("test","1.0.0");
+        await flushPromises();
+        expect(component.state('content')).toEqual("No Tosca model Yaml available");
+    });
+
+    it('Test handleYamlContent',  async () => {
+        const component = mount(<ModifyLoopModal loopCache={loopCache}/>)
+        const instance = component.instance();
+
+        const event = {"target":{"value":"testValue"}}
+        instance.handleYamlContent(event);
+        expect(component.state('content')).toEqual("testValue");
+    });
+});
\ No newline at end of file
diff --git a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
new file mode 100644
index 000000000..b45df6502
--- /dev/null
+++ b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
@@ -0,0 +1,137 @@
+/*-
+ * ============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 Select from 'react-select';
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import Form from 'react-bootstrap/Form';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import FormCheck from 'react-bootstrap/FormCheck'
+import styled from 'styled-components';
+import LoopService from '../../../api/LoopService';
+import SvgGenerator from '../../loop_viewer/svg/SvgGenerator';
+import LoopCache from '../../../api/LoopCache';
+
+const ModalStyled = styled(Modal)`
+	background-color: transparent;
+`
+const CheckBoxStyled = styled(FormCheck.Input)`
+	margin-left:3rem;
+`
+
+export default class OpenLoopModal extends React.Component {
+	constructor(props, context) {
+		super(props, context);
+
+		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.renderSvg = this.renderSvg.bind(this);
+		this.showReadOnly = props.showReadOnly !== undefined ? props.showReadOnly : true;
+		this.state = {
+			show: true,
+			chosenLoopName: '',
+			loopNames: [],
+			loopCacheOpened: new LoopCache({})
+		};
+	}
+
+	componentWillMount() {
+		this.getLoopNames();
+	}
+
+	handleClose() {
+		this.setState({ show: false });
+		this.props.history.push('/');
+	}
+
+	handleDropDownListChange(e) {
+        LoopService.getLoop(e.value).then(loop => {
+            this.setState({
+                chosenLoopName: e.value,
+                loopCacheOpened: new LoopCache(loop)
+             });
+		});
+	}
+
+	getLoopNames() {
+		LoopService.getLoopNames().then(loopNames => {
+		    if (Object.entries(loopNames).length !== 0) {
+		        const loopOptions = loopNames.filter(loopName => loopName!=='undefined').map((loopName) => { return { label: loopName, value: loopName } });
+            	this.setState({ loopNames: loopOptions })
+		    }
+		});
+	}
+
+	handleOpen() {
+		console.info("Loop " + this.state.chosenLoopName + " is chosen");
+        this.handleClose();
+		this.props.loadLoopFunction(this.state.chosenLoopName);
+	}
+
+	renderSvg() {
+		return(
+				<SvgGenerator loopCache={this.state.loopCacheOpened} clickable={false} generatedFrom={SvgGenerator.GENERATED_FROM_INSTANCE}/>
+		);
+	}
+
+	render() {
+		return (
+			<ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} >
+				<Modal.Header closeButton>
+					<Modal.Title>Open Model</Modal.Title>
+				</Modal.Header>
+				<Modal.Body>
+					<Form.Group as={Row} controlId="formPlaintextEmail">
+						<Form.Label column sm="2">Model Name:</Form.Label>
+						<Col sm="10">
+							<Select onChange={this.handleDropDownListChange}
+							options={this.state.loopNames} />
+						</Col>
+					</Form.Group>
+					<Form.Group as={Row} style={{alignItems: 'center'}} controlId="formSvgPreview">
+						<Form.Label column sm="2">Model Preview:</Form.Label>
+						<Col sm="10">
+						    {this.renderSvg()}
+						</Col>
+					</Form.Group>
+					{this.showReadOnly === true ?
+						<Form.Group as={Row} controlId="formBasicCheckbox">
+							<Form.Check>
+								<FormCheck.Label>Read Only Mode:</FormCheck.Label>
+								<CheckBoxStyled style={{marginLeft: '3.5em'}} type="checkbox" />
+							</Form.Check>
+						</Form.Group>
+					: null}
+				</Modal.Body>
+				<Modal.Footer>
+					<Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
+					<Button variant="primary" type="submit" onClick={this.handleOpen}>Open</Button>
+				</Modal.Footer>
+			</ModalStyled>
+
+		);
+	}
+}
diff --git a/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js b/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js
new file mode 100644
index 000000000..1865869df
--- /dev/null
+++ b/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js
@@ -0,0 +1,92 @@
+/*-
+ * ============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 OpenLoopModal from './OpenLoopModal';
+import LoopService from '../../../api/LoopService';
+
+describe('Verify OpenLoopModal', () => {
+
+  beforeEach(() => {
+      fetch.resetMocks();
+      fetch.mockResponse(JSON.stringify([
+        "LOOP_gmtAS_v1_0_ResourceInstanceName1_tca",
+        "LOOP_gmtAS_v1_0_ResourceInstanceName1_tca_3",
+        "LOOP_gmtAS_v1_0_ResourceInstanceName2_tca_2"
+      ]));
+  });
+
+    it('Test the render method', () => {
+
+    const component = shallow(<OpenLoopModal/>);
+    expect(component).toMatchSnapshot();
+  });
+
+  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");
+  });
+
+
+  it('Test handleClose', () => {
+    const historyMock = { push: jest.fn() }; 
+    const handleClose = jest.spyOn(OpenLoopModal.prototype,'handleClose');
+    const component = shallow(<OpenLoopModal history={historyMock} />)
+
+    component.find('[variant="secondary"]').prop('onClick')();
+
+    expect(handleClose).toHaveBeenCalledTimes(1);
+    expect(component.state('show')).toEqual(false);
+    expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
+    
+    handleClose.mockClear();
+  });
+
+    it('Test handleSubmit', () => {
+    const historyMock = { push: jest.fn() };
+    const loadLoopFunction = jest.fn();  
+    const handleOpen = jest.spyOn(OpenLoopModal.prototype,'handleOpen');
+    const component = shallow(<OpenLoopModal history={historyMock} loadLoopFunction={loadLoopFunction}/>)
+
+    component.find('[variant="primary"]').prop('onClick')();
+
+    expect(handleOpen).toHaveBeenCalledTimes(1);
+    expect(component.state('show')).toEqual(false);
+    expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
+
+    handleOpen.mockClear();
+  });
+
+});
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
new file mode 100644
index 000000000..b05781641
--- /dev/null
+++ b/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap
@@ -0,0 +1,167 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify CreateLoopModal Test the render method 1`] = `
+<Styled(Bootstrap(Modal))
+  backdrop="static"
+  keyboard={false}
+  onHide={[Function]}
+  show={true}
+  size="xl"
+>
+  <ModalHeader
+    closeButton={true}
+    closeLabel="Close"
+  >
+    <ModalTitle>
+      Create Model
+    </ModalTitle>
+  </ModalHeader>
+  <ModalBody>
+    <FormGroup
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "defaultProps": Object {
+            "noGutters": false,
+          },
+          "render": [Function],
+        }
+      }
+      controlId="formPlaintextEmail"
+    >
+      <FormLabel
+        column={true}
+        sm="2"
+        srOnly={false}
+      >
+        Template Name:
+      </FormLabel>
+      <Col
+        sm="10"
+      >
+        <StateManager
+          defaultInputValue=""
+          defaultMenuIsOpen={false}
+          defaultValue={null}
+          onChange={[Function]}
+          options={Array []}
+        />
+      </Col>
+    </FormGroup>
+    <FormGroup
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "defaultProps": Object {
+            "noGutters": false,
+          },
+          "render": [Function],
+        }
+      }
+      controlId="formSvgPreview"
+      style={
+        Object {
+          "alignItems": "center",
+        }
+      }
+    >
+      <FormLabel
+        column={true}
+        sm="2"
+        srOnly={false}
+      >
+        Model Preview:
+      </FormLabel>
+      <Col
+        sm="10"
+      >
+        <withRouter(SvgGenerator)
+          clickable={false}
+          generatedFrom="TEMPLATE"
+          loopCache={
+            LoopCache {
+              "loopJsonCache": Object {},
+            }
+          }
+        />
+      </Col>
+    </FormGroup>
+    <FormGroup
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "defaultProps": Object {
+            "noGutters": false,
+          },
+          "render": [Function],
+        }
+      }
+      controlId="formPlaintextEmail"
+    >
+      <FormLabel
+        column={true}
+        sm="2"
+        srOnly={false}
+      >
+        Model Name:
+      </FormLabel>
+      <input
+        onChange={[Function]}
+        sm="5"
+        style={
+          Object {
+            "marginLeft": "1em",
+            "width": "50%",
+          }
+        }
+        type="text"
+        value=""
+      />
+      <span
+        sm="5"
+      />
+    </FormGroup>
+    <FormGroup
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "defaultProps": Object {
+            "noGutters": false,
+          },
+          "render": [Function],
+        }
+      }
+      controlId="formPlaintextEmail"
+    >
+      <FormLabel
+        column={true}
+        sm="2"
+        srOnly={false}
+      >
+         
+      </FormLabel>
+      <styled.div />
+    </FormGroup>
+  </ModalBody>
+  <ModalFooter>
+    <Button
+      active={false}
+      disabled={false}
+      onClick={[Function]}
+      type="null"
+      variant="secondary"
+    >
+      Cancel
+    </Button>
+    <Button
+      active={false}
+      disabled={false}
+      onClick={[Function]}
+      type="submit"
+      variant="primary"
+    >
+      Create
+    </Button>
+  </ModalFooter>
+</Styled(Bootstrap(Modal))>
+`;
diff --git a/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap b/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap
new file mode 100644
index 000000000..8d0faa5f7
--- /dev/null
+++ b/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap
@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify DeployLoopModal Test the render method 1`] = `
+<Styled(Bootstrap(Modal))
+  backdrop="static"
+  keyboard={false}
+  onHide={[Function]}
+  show={true}
+  size="lg"
+>
+  <ModalHeader
+    closeButton={true}
+    closeLabel="Close"
+  >
+    <ModalTitle>
+      Deployment parameters
+    </ModalTitle>
+  </ModalHeader>
+  <Tabs
+    activeKey="testMs"
+    id="controlled-tab-example"
+    mountOnEnter={false}
+    onSelect={[Function]}
+    unmountOnExit={false}
+    variant="tabs"
+  >
+    <Tab
+      eventKey="testMs"
+      title="testMs"
+    >
+      <Styled(FormGroup)>
+        <FormLabel
+          column={false}
+          srOnly={false}
+        >
+          location_id
+        </FormLabel>
+        <FormControl
+          defaultValue=""
+          name="location_id"
+          onChange={[Function]}
+          type="text"
+        />
+      </Styled(FormGroup)>
+      <Styled(FormGroup)>
+        <FormLabel
+          column={false}
+          srOnly={false}
+        >
+          policy_id
+        </FormLabel>
+        <FormControl
+          defaultValue="TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
+          name="policy_id"
+          onChange={[Function]}
+          type="text"
+        />
+      </Styled(FormGroup)>
+    </Tab>
+  </Tabs>
+  <div />
+  <ModalFooter>
+    <Button
+      active={false}
+      disabled={false}
+      onClick={[Function]}
+      type="null"
+      variant="secondary"
+    >
+      Cancel
+    </Button>
+    <Button
+      active={false}
+      disabled={false}
+      onClick={[Function]}
+      type="submit"
+      variant="primary"
+    >
+      Deploy
+    </Button>
+  </ModalFooter>
+</Styled(Bootstrap(Modal))>
+`;
diff --git a/ui-react/src/components/dialogs/Loop/__snapshots__/LoopPropertiesModal.test.js.snap b/ui-react/src/components/dialogs/Loop/__snapshots__/LoopPropertiesModal.test.js.snap
new file mode 100644
index 000000000..233c560ab
--- /dev/null
+++ b/ui-react/src/components/dialogs/Loop/__snapshots__/LoopPropertiesModal.test.js.snap
@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify LoopPropertiesModal Test the render method 1`] = `
+<Styled(Bootstrap(Modal))
+  backdrop="static"
+  keyboard={false}
+  onHide={[Function]}
+  show={true}
+  size="lg"
+>
+  <ModalHeader
+    closeButton={true}
+    closeLabel="Close"
+  >
+    <ModalTitle>
+      Model Properties
+    </ModalTitle>
+  </ModalHeader>
+  <ModalBody>
+    <Form
+      inline={false}
+    >
+      <FormGroup>
+        <FormLabel
+          column={false}
+          srOnly={false}
+        >
+          Deploy Parameters
+        </FormLabel>
+        <FormControl
+          as="textarea"
+          defaultValue="{\\"location_id\\":\\"\\",\\"policy_id\\":\\"TCA_h2NMX_v1_0_ResourceInstanceName1_tca\\"}"
+          name="dcaeDeployParameters"
+          onChange={[Function]}
+          rows="3"
+        />
+      </FormGroup>
+    </Form>
+  </ModalBody>
+  <ModalFooter>
+    <Button
+      active={false}
+      disabled={false}
+      onClick={[Function]}
+      type="null"
+      variant="secondary"
+    >
+      Cancel
+    </Button>
+    <Button
+      active={false}
+      disabled={false}
+      onClick={[Function]}
+      type="submit"
+      variant="primary"
+    >
+      Save Changes
+    </Button>
+  </ModalFooter>
+</Styled(Bootstrap(Modal))>
+`;
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
new file mode 100644
index 000000000..477260477
--- /dev/null
+++ b/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap
@@ -0,0 +1,144 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify OpenLoopModal Test the render method 1`] = `
+<Styled(Bootstrap(Modal))
+  backdrop="static"
+  keyboard={false}
+  onHide={[Function]}
+  show={true}
+  size="xl"
+>
+  <ModalHeader
+    closeButton={true}
+    closeLabel="Close"
+  >
+    <ModalTitle>
+      Open Model
+    </ModalTitle>
+  </ModalHeader>
+  <ModalBody>
+    <FormGroup
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "defaultProps": Object {
+            "noGutters": false,
+          },
+          "render": [Function],
+        }
+      }
+      controlId="formPlaintextEmail"
+    >
+      <FormLabel
+        column={true}
+        sm="2"
+        srOnly={false}
+      >
+        Model Name:
+      </FormLabel>
+      <Col
+        sm="10"
+      >
+        <StateManager
+          defaultInputValue=""
+          defaultMenuIsOpen={false}
+          defaultValue={null}
+          onChange={[Function]}
+          options={Array []}
+        />
+      </Col>
+    </FormGroup>
+    <FormGroup
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "defaultProps": Object {
+            "noGutters": false,
+          },
+          "render": [Function],
+        }
+      }
+      controlId="formSvgPreview"
+      style={
+        Object {
+          "alignItems": "center",
+        }
+      }
+    >
+      <FormLabel
+        column={true}
+        sm="2"
+        srOnly={false}
+      >
+        Model Preview:
+      </FormLabel>
+      <Col
+        sm="10"
+      >
+        <withRouter(SvgGenerator)
+          clickable={false}
+          generatedFrom="INSTANCE"
+          loopCache={
+            LoopCache {
+              "loopJsonCache": Object {},
+            }
+          }
+        />
+      </Col>
+    </FormGroup>
+    <FormGroup
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "defaultProps": Object {
+            "noGutters": false,
+          },
+          "render": [Function],
+        }
+      }
+      controlId="formBasicCheckbox"
+    >
+      <FormCheck
+        disabled={false}
+        inline={false}
+        isInvalid={false}
+        isValid={false}
+        title=""
+        type="checkbox"
+      >
+        <FormCheckLabel>
+          Read Only Mode:
+        </FormCheckLabel>
+        <Styled(FormCheckInput)
+          style={
+            Object {
+              "marginLeft": "3.5em",
+            }
+          }
+          type="checkbox"
+        />
+      </FormCheck>
+    </FormGroup>
+  </ModalBody>
+  <ModalFooter>
+    <Button
+      active={false}
+      disabled={false}
+      onClick={[Function]}
+      type="null"
+      variant="secondary"
+    >
+      Cancel
+    </Button>
+    <Button
+      active={false}
+      disabled={false}
+      onClick={[Function]}
+      type="submit"
+      variant="primary"
+    >
+      Open
+    </Button>
+  </ModalFooter>
+</Styled(Bootstrap(Modal))>
+`;
diff --git a/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js b/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js
new file mode 100644
index 000000000..90bbc887c
--- /dev/null
+++ b/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js
@@ -0,0 +1,631 @@
+/*-
+ * ============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, { forwardRef } from 'react';
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import styled from 'styled-components';
+import TemplateMenuService from '../../../api/TemplateService';
+import CsvToJson from '../../../utils/CsvToJson';
+import MaterialTable, {MTableToolbar} from "material-table";
+import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
+import AddBox from '@material-ui/icons/AddBox';
+import ArrowUpward from '@material-ui/icons/ArrowUpward';
+import Check from '@material-ui/icons/Check';
+import ChevronLeft from '@material-ui/icons/ChevronLeft';
+import VerticalAlignTopIcon from '@material-ui/icons/VerticalAlignTop';
+import VerticalAlignBottomIcon from '@material-ui/icons/VerticalAlignBottom';
+import ChevronRight from '@material-ui/icons/ChevronRight';
+import Clear from '@material-ui/icons/Clear';
+import DeleteOutline from '@material-ui/icons/DeleteOutline';
+import Edit from '@material-ui/icons/Edit';
+import FilterList from '@material-ui/icons/FilterList';
+import FirstPage from '@material-ui/icons/FirstPage';
+import LastPage from '@material-ui/icons/LastPage';
+import Remove from '@material-ui/icons/Remove';
+import Search from '@material-ui/icons/Search';
+import ViewColumn from '@material-ui/icons/ViewColumn';
+
+
+const ModalStyled = styled(Modal)`
+	@media (min-width: 1200px) {
+		.modal-xl {
+			max-width: 96%;
+		}
+	}
+	background-color: transparent;
+`
+
+const MTableToolbarStyled = styled(MTableToolbar)`
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+`
+const ColPullLeftStyled = styled(Col)`
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	margin-left: -40px;
+`
+
+const cellStyle = { border: '1px solid black' };
+const headerStyle = { backgroundColor: '#ddd',	border: '2px solid black'	};
+const rowHeaderStyle = {backgroundColor:'#ddd',  fontSize: '15pt', text: 'bold', border: '1px solid black'};
+
+let dictList = [];
+let subDictFlag = false;
+
+function SelectSubDictType(props) {
+	const {onChange} = props;
+	const selectedValues = (e) => {
+		let options = e.target.options;
+		let SelectedDictTypes = '';
+		for (let dictType = 0, values = options.length; dictType < values; dictType++) {
+			if (options[dictType].selected) {
+				SelectedDictTypes = SelectedDictTypes.concat(options[dictType].value);
+				SelectedDictTypes = SelectedDictTypes.concat('|');
+			}
+		}
+		SelectedDictTypes = SelectedDictTypes.slice(0,-1);
+		onChange(SelectedDictTypes);
+	}
+	// When the subDictFlag is true, we need to disable selection of element "type"
+	return(
+		<div>
+			<select disabled={subDictFlag} multiple={true} onChange={selectedValues}>
+				<option value="string">string</option>
+				<option value="number">number</option>
+				<option value="datetime">datetime</option>
+				<option value="map">map</option>
+				<option value="json">json</option>
+			</select>
+		</div>
+	);
+}
+
+function SubDict(props) {
+	const {onChange} = props;
+	const subDicts = [];
+	subDicts.push('none');
+	if (dictList !== undefined  && dictList.length > 0) {
+		let item;
+        	for(item in dictList) {
+            		if(dictList[item].secondLevelDictionary === 1) {
+                		subDicts.push(dictList[item].name);
+            		}
+        	}
+	}
+	let optionItems = [];
+	for (let i=0; i<subDicts.length; ++i) {
+		if (i === 0) {
+			optionItems.push(<option selected key={subDicts[i]}>{subDicts[i]}</option>);
+		} else {
+			optionItems.push(<option key={subDicts[i]}>{subDicts[i]}</option>);
+		}
+	}
+
+ 	function selectedValue (e) {
+		onChange(e.target.value);
+	}
+	// When the subDictFlag is true, we need to disable selection of
+	// the sub-dictionary flag
+	return(
+			<select disabled={subDictFlag} onChange={selectedValue} >
+				{optionItems}
+			</select>
+	);
+}
+
+export default class ManageDictionaries extends React.Component {
+	constructor(props, context) {
+		super(props, context);
+		this.addDictionaryElementRow = this.addDictionaryElementRow.bind(this);
+		this.addDictionaryRow = this.addDictionaryRow.bind(this);
+		this.addReplaceDictionaryRequest = this.addReplaceDictionaryRequest.bind(this);
+		this.clickHandler = this.clickHandler.bind(this);
+		this.deleteDictionaryElementRow = this.deleteDictionaryElementRow.bind(this);
+		this.deleteDictionaryRequest = this.deleteDictionaryRequest.bind(this);
+		this.deleteDictionaryRow = this.deleteDictionaryRow.bind(this);
+		this.fileSelectedHandler = this.fileSelectedHandler.bind(this);
+		this.getDictionaries = this.getDictionaries.bind(this);
+		this.getDictionaryElements = this.getDictionaryElements.bind(this);
+		this.handleClose = this.handleClose.bind(this);
+		this.handleDictionaryRowClick = this.handleDictionaryRowClick.bind(this);
+		this.importCsvData = this.importCsvData.bind(this);
+		this.updateDictionaryElementRow = this.updateDictionaryElementRow.bind(this);
+		this.updateDictionaryElementsRequest = this.updateDictionaryElementsRequest.bind(this);
+		this.updateDictionaryRow = this.updateDictionaryRow.bind(this);
+		this.readOnly = props.readOnly !== undefined ? props.readOnly : false;
+		this.state = {
+			show: true,
+			currentSelectedDictionary: null,
+			exportFilename: '',
+			content: null,
+			dictionaryElements: [],
+			tableIcons: {
+				Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
+				Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
+				DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
+				Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
+				Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
+				Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
+				Export: forwardRef((props, ref) => <VerticalAlignBottomIcon {...props} ref={ref} />),
+				Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
+				FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
+				LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
+				NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
+				PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
+				ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
+				Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
+				SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref} />),
+				ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
+				ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
+			},
+			dictColumns: [
+				{
+					title: "Dictionary Name", field: "name",editable: 'onAdd',
+					cellStyle: cellStyle,
+					headerStyle: headerStyle
+				},
+				{
+					title: "Sub Dictionary ?", field: "secondLevelDictionary", lookup: {0: 'No', 1: 'Yes'},
+					cellStyle: cellStyle,
+					headerStyle: headerStyle
+				},
+				{
+					title: "Dictionary Type", field: "subDictionaryType",lookup: {string: 'string', number: 'number'},
+					cellStyle: cellStyle,
+					headerStyle: headerStyle
+				},
+				{
+					title: "Updated By", field: "updatedBy", editable: 'never',
+					cellStyle: cellStyle,
+					headerStyle: headerStyle
+				},
+				{
+					title: "Last Updated Date", field: "updatedDate", editable: 'never',
+					cellStyle: cellStyle,
+					headerStyle: headerStyle
+				}
+			],
+			dictElementColumns: [
+				{
+					title: "Element Short Name", field: "shortName",editable: 'onAdd',
+					cellStyle: cellStyle,
+					headerStyle: headerStyle
+				},
+				{
+					title: "Element Name", field: "name",
+					cellStyle: cellStyle,
+					headerStyle: headerStyle
+				},
+				{
+					title: "Element Description", field: "description",
+					cellStyle: cellStyle,
+					headerStyle: headerStyle
+				},
+				{
+					title: "Element Type", field: "type",
+					editComponent: props => (
+						<div>
+							<SelectSubDictType  value={props.value} onChange={props.onChange} />
+						</div>
+					),
+					cellStyle: cellStyle,
+					headerStyle: headerStyle
+				},
+				{
+					title: "Sub-Dictionary", field: "subDictionary",
+					editComponent: props => (
+						 <div>
+							 <SubDict value={props.value} onChange={props.onChange} />
+						 </div>
+				      ),
+				    cellStyle: cellStyle,
+				    headerStyle: headerStyle
+				},
+				{
+					title: "Updated By", field: "updatedBy", editable: 'never',
+					cellStyle: cellStyle,
+					headerStyle: headerStyle
+				},
+				{
+					title: "Updated Date", field: "updatedDate", editable: 'never',
+					cellStyle: cellStyle,
+					headerStyle: headerStyle
+				}
+			]
+		}
+	}
+
+	componentDidMount() {
+		this.getDictionaries();
+	}
+
+	getDictionaries() {
+		TemplateMenuService.getDictionary().then(arrayOfdictionaries => {
+			this.setState({ dictionaries: arrayOfdictionaries, currentSelectedDictionary: null })
+			// global variable setting used functional components in this file
+			dictList = arrayOfdictionaries;
+		}).catch(() => {
+			console.error('Failed to retrieve dictionaries');
+			this.setState({ dictionaries: [], currentSelectedDictionary: null })
+		});
+	}
+
+	getDictionaryElements(dictionaryName) {
+		TemplateMenuService.getDictionaryElements(dictionaryName).then(dictionaryElements => {
+			this.setState({ dictionaryElements: dictionaryElements.dictionaryElements} );
+			this.setState({ currentSelectDictionary: dictionaryName });
+		}).catch(() => console.error('Failed to retrieve dictionary elements'))
+	}
+
+	clickHandler(rowData) {
+		this.getDictionaries();
+	}
+
+	handleClose() {
+		this.setState({ show: false });
+		this.props.history.push('/');
+	}
+
+	addReplaceDictionaryRequest(dictionaryEntry) {
+		TemplateMenuService.insDictionary(dictionaryEntry)
+		.then(resp => {
+			this.getDictionaries();
+		})
+		.catch(() => console.error('Failed to insert new dictionary elements'));
+	}
+
+	updateDictionaryElementsRequest(dictElements) {
+		let reqData = { "name": this.state.currentSelectedDictionary, 'dictionaryElements': dictElements };
+		TemplateMenuService.insDictionaryElements(reqData)
+		.then(resp => { this.getDictionaryElements(this.state.currentSelectedDictionary) })
+		.catch(() => console.error('Failed to update dictionary elements'));
+	}
+
+	deleteDictionaryRequest(dictionaryName) {
+		TemplateMenuService.deleteDictionary(dictionaryName)
+		.then(resp => {
+			this.getDictionaries();
+		})
+		.catch(() => console.error('Failed to delete dictionary'));
+	}
+
+	deleteDictionaryElementRequest(dictionaryName, elemenetShortName) {
+		TemplateMenuService.deleteDictionaryElements({ 'name': dictionaryName, 'shortName': elemenetShortName })
+		.then(resp => {
+			this.getDictionaryElements(dictionaryName);
+		})
+		.catch(() => console.error('Failed to delete dictionary elements'));
+	}
+
+	fileSelectedHandler = (event) => {
+
+		if (event.target.files[0].type === 'text/csv' || event.target.files[0].type === 'application/vnd.ms-excel') {
+			if (event.target.files && event.target.files[0]) {
+				const reader = new FileReader();
+				reader.onload = (e) => {
+					let errorMessages = this.importCsvData(reader.result);
+					if (errorMessages !== '') {
+						alert(errorMessages);
+					}
+				}
+				reader.readAsText(event.target.files[0]);
+			}
+		} else {
+			alert('Please upload .csv extention files only.');
+		}
+	}
+
+	importCsvData(rawCsvData) {
+
+		const jsonKeyNames = [ 'shortName', 'name', 'description', 'type', 'subDictionary' ];
+		const userHeaderNames = [ 'Element Short Name', 'Element Name', 'Element Description', 'Element Type', 'Sub-Dictionary'  ];
+		const validTypes = ['string','number','datetime','json','map'];
+
+		let mandatory;
+
+		if (subDictFlag) {
+			mandatory = [ true, true, true, false, false ];
+		} else {
+			mandatory = [ true, true, true, true, false ];
+		}
+
+		let result = CsvToJson(rawCsvData, ',', '||||', userHeaderNames, jsonKeyNames, mandatory);
+
+		let errorMessages = result.errorMessages;
+		let jsonObjArray = result.jsonObjArray;
+
+		let validTypesErrorMesg = '';
+
+		for (let i=0; i < validTypes.length; ++i) {
+			if (i === 0) {
+				validTypesErrorMesg = validTypes[i];
+			} else {
+				validTypesErrorMesg += ',' + validTypes[i];
+			}
+		}
+
+		if (errorMessages !== '') {
+			return errorMessages;
+		}
+
+		// Perform further checks on data that is now in JSON form
+		let subDictionaries = [];
+
+		// NOTE: dictList is a global variable  maintained faithfully
+		//       by the getDictionaries() method outside this import
+		//       functionality.
+		let item;
+		for (item in dictList) {
+			if (dictList[item].secondLevelDictionary === 1) {
+				subDictionaries.push(dictList[item].name);
+			}
+		};
+
+		// Check for valid Sub-Dictionary and Element Type values
+		subDictionaries = subDictionaries.toString();
+		let row = 2;
+		let dictElem;
+		for (dictElem of jsonObjArray) {
+			let itemKey;
+			for (itemKey in dictElem){
+				let value = dictElem[itemKey].trim();
+				let keyIndex = jsonKeyNames.indexOf(itemKey);
+				if (itemKey === 'shortName' && /[^a-zA-Z0-9-_.]/.test(value)) {
+					errorMessages += '\n' + userHeaderNames[keyIndex] +
+						' at row #' + row +
+						' can only contain alphanumeric characters and periods, hyphens or underscores';
+				}
+				if (itemKey === 'type' && validTypes.indexOf(value) < 0) {
+					errorMessages += '\nInvalid value of "' + value + '" for "' + userHeaderNames[keyIndex] + '" at row #' + row;
+					errorMessages += '\nValid types are: ' + validTypesErrorMesg;
+				}
+				if (value !== "" && itemKey === 'subDictionary' && subDictionaries.indexOf(value) < 0) {
+					errorMessages += '\nInvalid Sub-Dictionary value of "' + value + '" at row #' + row;
+				}
+			}
+			++row;
+		}
+		if (errorMessages === '') {
+			// We made it through all the checks. Send it to back end
+			this.updateDictionaryElementsRequest(jsonObjArray);
+		}
+
+		return errorMessages;
+	}
+
+	addDictionaryRow(newData) {
+		let validData = true;
+		return new Promise((resolve, reject) => {
+			setTimeout(() => {
+					if (/[^a-zA-Z0-9-_.]/.test(newData.name)) {
+						validData = false;
+						alert('Please enter alphanumeric input. Only allowed special characters are:(period, hyphen, underscore)');
+						reject();
+					}
+					for (let i = 0; i < this.state.dictionaries.length; i++) {
+						if (this.state.dictionaries[i].name === newData.name) {
+							validData = false;
+							alert(newData.name + ' dictionary name already exists')
+							reject();
+						}
+					}
+					if (validData) {
+						this.addReplaceDictionaryRequest(newData);
+					}
+					resolve();
+			}, 1000);
+		});
+	}
+
+
+	updateDictionaryRow(newData, oldData) {
+		let validData = true;
+		return new Promise((resolve, reject) => {
+			setTimeout(() => {
+				if (/[^a-zA-Z0-9-_.]/.test(newData.name)) {
+					validData = false;
+					alert('Please enter alphanumberic input. Only allowed special characters are:(period, hyphen, underscore)');
+					reject();
+				}
+				if (validData) {
+					this.addReplaceDictionaryRequest(newData);
+				}
+				resolve();
+			}, 1000);
+		});
+	}
+
+	deleteDictionaryRow(oldData) {
+		return new Promise((resolve, reject) => {
+			setTimeout(() => {
+				this.deleteDictionaryRequest(oldData.name);
+				resolve();
+			}, 1000);
+		});
+	}
+
+	addDictionaryElementRow(newData) {
+		return new Promise((resolve, reject) => {
+			setTimeout(() => {
+				let dictionaryElements = this.state.dictionaryElements;
+				let errorMessages = '';
+				for (let i = 0; i < this.state.dictionaryElements.length; i++) {
+					if (this.state.dictionaryElements[i].shortName === newData.shortName) {
+						alert('Short Name "' + newData.shortName + '" already exists');
+						reject("");
+					}
+				}
+				// MaterialTable returns no property at all if the user has not touched a
+				// new column, so we want to add the property with an emptry string
+				// for several cases if that is the case to simplify other checks.
+				if (newData.description === undefined) {
+					newData.description = "";
+				}
+				if (newData.subDictionary === undefined) {
+					newData.subDictionary = null;
+				}
+				if (newData.type === undefined) {
+					newData.type = "";
+				}
+				if (!newData.shortName && /[^a-zA-Z0-9-_.]/.test(newData.shortName)) {
+					errorMessages += '\nShort Name is limited to alphanumeric characters and also period, hyphen, and underscore';
+				}
+				if (!newData.shortName){
+					errorMessages += '\nShort Name must be specified';
+				}
+				if (!newData.name){
+					errorMessages += '\nElement Name must be specified';
+				}
+				if (!newData.type && !subDictFlag){
+					errorMessages += '\nElement Type must be specified';
+				}
+				if (errorMessages === '') {
+					dictionaryElements.push(newData);
+					this.updateDictionaryElementsRequest([newData]);
+					resolve();
+				} else {
+					alert(errorMessages);
+					reject("");
+				}
+			}, 1000);
+		});
+	}
+
+	updateDictionaryElementRow(newData, oldData) {
+		return new Promise((resolve, reject) => {
+			setTimeout(() => {
+				let dictionaryElements = this.state.dictionaryElements;
+				let validData =  true;
+				if (!newData.type) {
+					validData = false;
+					alert('Element Type cannot be null');
+					reject();
+				}
+				if (validData) {
+					const index = dictionaryElements.indexOf(oldData);
+					dictionaryElements[index] = newData;
+					this.updateDictionaryElementsRequest([newData]);
+				}
+				resolve();
+			}, 1000);
+		});
+	}
+
+
+	deleteDictionaryElementRow(oldData) {
+		return new Promise((resolve) => {
+			setTimeout(() => {
+				this.deleteDictionaryElementRequest(this.state.currentSelectedDictionary, oldData.shortName);
+				resolve();
+			}, 1000);
+		});
+	}
+
+	handleDictionaryRowClick(event, rowData) {
+		subDictFlag = rowData.secondLevelDictionary === 1 ? true : false;
+		this.setState({
+			currentSelectedDictionary : rowData.name,
+			exportFilename: rowData.name
+		})
+		this.getDictionaryElements(rowData.name);
+	}
+
+	render() {
+		return (
+			<ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} >
+				<Modal.Header closeButton>
+					<Modal.Title>Manage Dictionaries</Modal.Title>
+				</Modal.Header>
+				<Modal.Body>
+					{this.state.currentSelectedDictionary === null ?
+						<MaterialTable
+                        				title={"Dictionary List"}
+                        				data={this.state.dictionaries}
+                        				columns={this.state.dictColumns}
+                        				icons={this.state.tableIcons}
+                        				onRowClick={this.handleDictionaryRowClick}
+                        				options={{
+								headerStyle: rowHeaderStyle,
+                        				}}
+                        				editable={!this.readOnly ?
+								{
+									onRowAdd: this.addDictionaryRow,
+									onRowUpdate: this.updateDictionaryRow,
+									onRowDelete: this.deleteDictionaryRow
+								} : undefined }
+						/> : null
+					}
+					{this.state.currentSelectedDictionary !== null ?
+						<MaterialTable
+                        				title={'Dictionary Elements List for ' + (subDictFlag ? 'Sub-Dictionary "' : '"') + this.state.currentSelectedDictionary + '"'}
+                        				data={this.state.dictionaryElements}
+                        				columns={this.state.dictElementColumns}
+                        				icons={this.state.tableIcons}
+                        				options={{
+								exportAllData: true,
+								exportButton: true,
+								exportFileName: this.state.exportFilename,
+								headerStyle:{backgroundColor:'white',  fontSize: '15pt', text: 'bold', border: '1px solid black'}
+                        				}}
+                        				components={{
+								Toolbar: props => (
+									<Row>
+										<Col sm="11">
+											<MTableToolbarStyled {...props} />
+										</Col>
+										<ColPullLeftStyled sm="1">
+											<Tooltip title="Import" placement = "bottom">
+												<IconButton aria-label="import" disabled={this.readOnly} onClick={() => this.fileUpload.click()}>
+													<VerticalAlignTopIcon />
+												</IconButton>
+											</Tooltip>
+                                							<input type="file" ref={(fileUpload) => {this.fileUpload = fileUpload;}}
+												style={{ visibility: 'hidden', width: '1px' }} onChange={this.fileSelectedHandler} />
+										</ColPullLeftStyled>
+									</Row>
+                            					)
+                        				}}
+                        				editable={!this.readOnly ?
+								{
+                            						onRowAdd: this.addDictionaryElementRow,
+                            						onRowUpdate: this.updateDictionaryElementRow,
+                            						onRowDelete: this.deleteDictionaryElementRow
+                        					} : undefined
+							 }
+						/> : null
+					}
+					{this.state.currentSelectedDictionary !== null ? <button onClick={this.clickHandler} style={{marginTop: '25px'}}>Go Back to Dictionaries List</button>:""}
+				</Modal.Body>
+				<Modal.Footer>
+					<Button variant="secondary" type="null" onClick={this.handleClose}>Close</Button>
+				</Modal.Footer>
+			</ModalStyled>
+		);
+	}
+}
diff --git a/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.test.js b/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.test.js
new file mode 100644
index 000000000..a4c1335d8
--- /dev/null
+++ b/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.test.js
@@ -0,0 +1,462 @@
+/*-
+ * ============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 { mount } from 'enzyme';
+import { render } from 'enzyme';
+import ManageDictionaries from './ManageDictionaries';
+import TemplateMenuService from '../../../api/TemplateService'
+
+const TestDictionaryElements = {
+    name: "test",
+    secondLevelDictionary: 0,
+    subDictionaryType: "", 
+    dictionaryElements: [
+      {
+        shortName: "alertType",
+        name: "Alert Type",
+        description: "Type of Alert",
+        type: "string",
+        subDictionary: "", 
+        createdDate: "2020-06-12T13:58:51.443931Z",
+        updatedDate: "2020-06-13T16:27:57.084870Z",
+        updatedBy: "admin",
+        createdBy: "admin"
+      }
+    ]
+};
+
+const TestDictionaries =
+[
+  {
+    name: "test",
+    secondLevelDictionary: 0,
+    subDictionaryType: "string",
+    dictionaryElements: [ TestDictionaryElements ],
+    createdDate: "2020-06-14T21:00:33.231166Z",
+    updatedDate: "2020-06-14T21:00:33.231166Z",
+    updatedBy: "admin",
+    createdBy: "admin"
+  },
+  {
+    name: "testSub1",
+    secondLevelDictionary: 1,
+    subDictionaryType: "string",
+    dictionaryElements: [
+      {
+        shortName: "subElem",
+        name: "Sub Element",
+        description: "Sub Element Description",
+        type: "string",
+        createdDate: "2020-06-14T21:04:44.402287Z",
+        updatedDate: "2020-06-14T21:04:44.402287Z",
+        updatedBy: "admin",
+        createdBy: "admin"
+      }
+    ],
+    createdDate: "2020-06-14T21:01:16.390250Z",
+    updatedDate: "2020-06-14T21:01:16.390250Z",
+    updatedBy: "admin",
+    createdBy: "admin"
+  }
+];
+
+
+const historyMock = { push: jest.fn() };
+
+let errorMessage = '';
+
+window.alert = jest.fn().mockImplementation((mesg) => { errorMessage = mesg ; return });
+
+TemplateMenuService.getDictionary = jest.fn().mockImplementation(() => {
+	return Promise.resolve(TestDictionaries);
+});
+
+TemplateMenuService.insDictionary = jest.fn().mockImplementation(() => {
+	return Promise.resolve({ ok: true, status: 200 });
+});
+
+TemplateMenuService.deleteDictionary = jest.fn().mockImplementation(() => {
+	return Promise.resolve("200");
+});
+
+TemplateMenuService.getDictionaryElements = jest.fn().mockImplementation(() => {
+	return Promise.resolve(TestDictionaryElements);
+});
+
+TemplateMenuService.deleteDictionaryElements = jest.fn().mockImplementation(() => {
+	return Promise.resolve("200");
+});
+
+TemplateMenuService.insDictionaryElements = jest.fn().mockImplementation(() => {
+	return Promise.resolve("200");
+});
+
+
+describe('Verify ManageDictionaries', () => {
+
+	beforeEach(() => {
+		fetch.resetMocks();
+	});
+
+	it('Test API Successful', () => {
+		fetch.mockImplementationOnce(() => {
+			return Promise.resolve({
+				ok: true,
+				status: 200,
+				json: () => {
+					return Promise.resolve({
+						"name": "vtest",
+						"secondLevelDictionary": 1,
+						"subDictionaryType": "string",
+						"updatedBy": "test",
+						"updatedDate": "05-07-2019 19:09:42"
+					});
+				}
+			});
+		});
+		const component = shallow(<ManageDictionaries />);
+		expect(component).toMatchSnapshot();
+	});
+
+	it('Test API Exception', () => {
+		fetch.mockImplementationOnce(() => {
+			return Promise.resolve({
+				ok: false,
+				status: 500,
+				json: () => {
+					return Promise.resolve({
+						"name": "vtest",
+						"secondLevelDictionary": 1,
+						"subDictionaryType": "string",
+						"updatedBy": "test",
+						"updatedDate": "05-07-2019 19:09:42"
+					});
+				}
+			});
+		});
+		const component = shallow(<ManageDictionaries />);
+	});
+
+	it('Test Table icons', () => {
+
+		const component = mount(<ManageDictionaries />);
+		expect(component.find('[className="MuiSelect-icon MuiTablePagination-selectIcon"]')).toBeTruthy();
+	});
+
+	test('Test add/replace and delete dictionary requests', async () => {
+
+		const component = shallow(<ManageDictionaries history={historyMock}/>)
+		const instance = component.instance();
+
+		const flushPromises = () => new Promise(setImmediate);
+
+		instance.addReplaceDictionaryRequest({name: "newdict", secondLevelDictionary: 0, subDictionaryType: "string"});
+		instance.deleteDictionaryRequest("test");
+
+		await flushPromises();
+
+		expect(component.state('currentSelectedDictionary')).toEqual(null);
+		expect(component.state('dictionaries')).toEqual(TestDictionaries);
+	});
+
+	test('Test update dictionary row', async () => {
+
+		const component = shallow(<ManageDictionaries history={historyMock}/>)
+		const instance = component.instance();
+		const rowData = { name: "newdict", secondLevelDictionary: 0, subDictionaryType: "string" };
+
+		await expect(instance.updateDictionaryRow(rowData, rowData)).resolves.toEqual(undefined);
+
+	}, 2000);
+
+	test('Test add dictionary row', async () => {
+
+		const addReplaceRequest = jest.spyOn(ManageDictionaries.prototype,'addReplaceDictionaryRequest');
+		const component = shallow(<ManageDictionaries />)
+		const instance = component.instance();
+		const rowData = { name: "newdict", secondLevelDictionary: 0, subDictionaryType: "string" };
+
+		await instance.addDictionaryRow(rowData);
+                expect(addReplaceRequest).toHaveBeenCalledWith(rowData);
+
+	}, 2000);
+
+	test('Test add dictionary row with errors name already exists', async () => {
+
+		const component = shallow(<ManageDictionaries />)
+		const instance = component.instance();
+		let  rowData = { name: "test", secondLevelDictionary: 0, subDictionaryType: "" };
+
+		await expect(instance.addDictionaryRow(rowData)).rejects.toEqual(undefined);
+
+	}, 2000);
+
+	test('Test add dictionary row with errors illegal chars in name', async () => {
+
+		const component = shallow(<ManageDictionaries />)
+		const instance = component.instance();
+		let  rowData = { name: "test@@", secondLevelDictionary: 0, subDictionaryType: "" };
+
+		await expect(instance.addDictionaryRow(rowData)).rejects.toEqual(undefined);
+
+	}, 2000);
+
+	test('Test update dictionary row with errors illegal chars in name', async () => {
+
+		const component = shallow(<ManageDictionaries />)
+		const instance = component.instance();
+		let  rowData = { name: "test@@", secondLevelDictionary: 0, subDictionaryType: "" };
+
+		await expect(instance.updateDictionaryRow(rowData)).rejects.toEqual(undefined);
+	});
+
+
+	test('Test add dictionary row with errors (illegal chars)', async () => {
+
+		const addReplaceRequest = jest.spyOn(ManageDictionaries.prototype,'addReplaceDictionaryRequest');
+		const component = shallow(<ManageDictionaries />)
+		const instance = component.instance();
+		let  rowData = { name: "test@@", secondLevelDictionary: 0, subDictionaryType: "" };
+
+		await expect(instance.addDictionaryRow(rowData)).rejects.toEqual(undefined);
+
+	}, 2000);
+
+
+	test('Test delete dictionary row', async () => {
+
+		const deleteRequest = jest.spyOn(ManageDictionaries.prototype,'deleteDictionaryRequest');
+		const component = shallow(<ManageDictionaries />)
+		const instance = component.instance();
+		const rowData = { name: "newdict", secondLevelDictionary: 0, subDictionaryType: "string" };
+
+		await instance.deleteDictionaryRow(rowData);
+                expect(deleteRequest).toHaveBeenCalledWith("newdict");
+
+	}, 2000);
+
+	test('Test handle select dictionary row click', async () => {
+
+		const component = shallow(<ManageDictionaries />)
+		const instance = component.instance();
+		const rowData = { name: "newdict", secondLevelDictionary: 0, subDictionaryType: "string" };
+
+		instance.handleDictionaryRowClick("event", rowData);
+		expect(component.state('currentSelectedDictionary')).toEqual("newdict");
+	}, 2000);
+
+	test('Test dictionary element row add, update, delete', async () => {
+
+		const rowData = {
+			createdBy: "admin",
+			createdDate: "2020-06-15T13:59:20.467381Z",
+			description: "Description",
+			name: "Some Elem",
+			shortName: "someElem",
+			type: "string",
+			updatedBy: "admin",
+			updatedDate: "2020-06-15T13:59:20.467381Z"
+		};
+
+		const component = shallow(<ManageDictionaries/>)
+		const instance = component.instance();
+
+		const badRowData = {
+			description: "Description",
+			name: "Some Elem",
+			shortName: "someElem",
+			type: "string"
+		};
+
+                await instance.clickHandler();
+                await instance.getDictionaryElements("test");
+
+		await expect(instance.addDictionaryElementRow(rowData)).resolves.toEqual(undefined);
+		await expect(instance.updateDictionaryElementRow(rowData, rowData)).resolves.toEqual(undefined);
+		await expect(instance.deleteDictionaryElementRow(rowData)).resolves.toEqual(undefined);
+	});
+
+	test('Test dictionary element row add with errors', async () => {
+
+		const badRowData = {
+			description: "",
+			name: "",
+			shortName: "some#Elem",
+			type: ""
+		};
+
+		const component = shallow(<ManageDictionaries/>)
+		const instance = component.instance();
+
+		await expect(instance.addDictionaryElementRow(badRowData)).rejects.toEqual("");
+	});
+
+	test('Test dictionary element update with error illegal name', async () => {
+
+		const badRowData = {
+			description: "",
+			name: "test@@",
+			shortName: "some#Elem",
+			type: ""
+		};
+
+		const component = shallow(<ManageDictionaries/>)
+		const instance = component.instance();
+
+		await expect(instance.updateDictionaryElementRow(badRowData)).rejects.toEqual(undefined);
+	});
+
+	test('Test dictionary element addition with duplicate name error', async () => {
+
+		const badRowData = {
+			description: "description",
+			name: "Alert Type",
+			shortName: "alertType",
+			type: "string"
+		};
+
+		const component = shallow(<ManageDictionaries/>)
+		const instance = component.instance();
+
+		component.setState({ currentSelectedDictionary: 'test' });
+
+		await instance.getDictionaryElements();
+		await expect(instance.addDictionaryElementRow(badRowData)).rejects.toEqual("");
+	});
+
+	test('Test dictionary element addition with empty name error', async () => {
+
+		const badRowData = {
+			description: "description",
+			name: "Alert Type",
+			shortName: "",
+			type: "string"
+		};
+
+		const component = shallow(<ManageDictionaries/>)
+		const instance = component.instance();
+
+		component.setState({ currentSelectedDictionary: 'test' });
+
+		await instance.getDictionaryElements();
+		await expect(instance.addDictionaryElementRow(badRowData)).rejects.toEqual("");
+	});
+
+
+	it('Test Import CSV Sunny Day', async () => {
+
+                TemplateMenuService.insDictionaryElements = jest.fn().mockImplementation(() => {
+                        return Promise.resolve({ ok: true, status: 200 });
+                });
+
+                let rawCsvData = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
+                rawCsvData += '"alertType","Alert Type","Alert Type Description","string","","admin","2020-06-11T13:56:14.927437Z"';
+
+                let expectedResult = [
+                                {
+                                        description: "Alert Type Description",
+                                        name: "Alert Type",
+                                        shortName: "alertType",
+                                        subDictionary: "",
+                                        type: "string"
+                                }
+		];
+
+		const updateDictionaryElementsRequest = jest.spyOn(ManageDictionaries.prototype,'updateDictionaryElementsRequest');
+
+		const component = shallow(<ManageDictionaries />)
+		const instance = component.instance();
+
+		await expect(instance.importCsvData(rawCsvData)).toEqual('');
+                expect(updateDictionaryElementsRequest).toHaveBeenCalledWith(expectedResult);
+	});
+
+	it('Test Import CSV Mandatory Field Check Errors', () => {
+
+                let rawCsvData = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
+                rawCsvData += '"","","","","","",""';
+
+		// The empty values for all the fields in row 1 of the rawCsvData will trigger a bunch of errors.
+		// Getting Enzyme to properly match them with embedded newlines turned out to be impossible
+		// and maybe not desirable anyway; so our test for "success" here is simply that the
+		// routine returns a non-empty error string.
+
+		const component = shallow(<ManageDictionaries />)
+		const instance = component.instance();
+		expect(instance.importCsvData(rawCsvData)).not.toEqual('');
+	});
+
+	it('Test Import CSV Errors in Row Data', async () => {
+
+                TemplateMenuService.insDictionaryElements = jest.fn().mockImplementation(() => {
+                        return Promise.resolve({ ok: true, status: 200 });
+                });
+
+                let rawCsvData = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
+                rawCsvData += '"alert@Type","Alert Type","Alert Type Description","strin","subby","admin","2020-06-11T13:56:14.927437Z"';
+
+                let expectedResult = [
+                                {
+                                        description: "Alert Type Description",
+                                        name: "Alert Type",
+                                        shortName: "alertType",
+                                        subDictionary: "",
+                                        type: "string"
+                                }
+		];
+
+		const updateDictionaryElementsRequest = jest.spyOn(ManageDictionaries.prototype,'updateDictionaryElementsRequest');
+
+		const component = shallow(<ManageDictionaries />)
+		const instance = component.instance();
+
+		await expect(instance.importCsvData(rawCsvData)).not.toEqual('');
+	});
+
+
+	it('Test handleClose', () => {
+		fetch.mockImplementationOnce(() => {
+			return Promise.resolve({
+				ok: true,
+				status: 200,
+				json: () => {
+					return Promise.resolve({
+						"name": "vtest",
+						"secondLevelDictionary": 1,
+						"subDictionaryType": "string",
+						"updatedBy": "test",
+						"updatedDate": "05-07-2019 19:09:42"
+					});
+				}
+			});
+		});
+		const handleClose = jest.spyOn(ManageDictionaries.prototype,'handleClose');
+		const component = shallow(<ManageDictionaries history={historyMock} />)
+		component.find('[variant="secondary"]').prop('onClick')();
+		expect(handleClose).toHaveBeenCalledTimes(1);
+		expect(component.state('show')).toEqual(false);
+		expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
+		handleClose.mockClear();
+	});
+});
diff --git a/ui-react/src/components/dialogs/ManageDictionaries/__snapshots__/ManageDictionaries.test.js.snap b/ui-react/src/components/dialogs/ManageDictionaries/__snapshots__/ManageDictionaries.test.js.snap
new file mode 100644
index 000000000..40914aee6
--- /dev/null
+++ b/ui-react/src/components/dialogs/ManageDictionaries/__snapshots__/ManageDictionaries.test.js.snap
@@ -0,0 +1,196 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify ManageDictionaries Test API Successful 1`] = `
+<Styled(Bootstrap(Modal))
+  backdrop="static"
+  keyboard={false}
+  onHide={[Function]}
+  show={true}
+  size="xl"
+>
+  <ModalHeader
+    closeButton={true}
+    closeLabel="Close"
+  >
+    <ModalTitle>
+      Manage Dictionaries
+    </ModalTitle>
+  </ModalHeader>
+  <ModalBody>
+    <WithStyles(Component)
+      columns={
+        Array [
+          Object {
+            "cellStyle": Object {
+              "border": "1px solid black",
+            },
+            "editable": "onAdd",
+            "field": "name",
+            "headerStyle": Object {
+              "backgroundColor": "#ddd",
+              "border": "2px solid black",
+            },
+            "title": "Dictionary Name",
+          },
+          Object {
+            "cellStyle": Object {
+              "border": "1px solid black",
+            },
+            "field": "secondLevelDictionary",
+            "headerStyle": Object {
+              "backgroundColor": "#ddd",
+              "border": "2px solid black",
+            },
+            "lookup": Object {
+              "0": "No",
+              "1": "Yes",
+            },
+            "title": "Sub Dictionary ?",
+          },
+          Object {
+            "cellStyle": Object {
+              "border": "1px solid black",
+            },
+            "field": "subDictionaryType",
+            "headerStyle": Object {
+              "backgroundColor": "#ddd",
+              "border": "2px solid black",
+            },
+            "lookup": Object {
+              "number": "number",
+              "string": "string",
+            },
+            "title": "Dictionary Type",
+          },
+          Object {
+            "cellStyle": Object {
+              "border": "1px solid black",
+            },
+            "editable": "never",
+            "field": "updatedBy",
+            "headerStyle": Object {
+              "backgroundColor": "#ddd",
+              "border": "2px solid black",
+            },
+            "title": "Updated By",
+          },
+          Object {
+            "cellStyle": Object {
+              "border": "1px solid black",
+            },
+            "editable": "never",
+            "field": "updatedDate",
+            "headerStyle": Object {
+              "backgroundColor": "#ddd",
+              "border": "2px solid black",
+            },
+            "title": "Last Updated Date",
+          },
+        ]
+      }
+      editable={
+        Object {
+          "onRowAdd": [Function],
+          "onRowDelete": [Function],
+          "onRowUpdate": [Function],
+        }
+      }
+      icons={
+        Object {
+          "Add": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "render": [Function],
+          },
+          "Check": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "render": [Function],
+          },
+          "Clear": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "render": [Function],
+          },
+          "Delete": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "render": [Function],
+          },
+          "DetailPanel": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "render": [Function],
+          },
+          "Edit": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "render": [Function],
+          },
+          "Export": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "render": [Function],
+          },
+          "Filter": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "render": [Function],
+          },
+          "FirstPage": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "render": [Function],
+          },
+          "LastPage": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "render": [Function],
+          },
+          "NextPage": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "render": [Function],
+          },
+          "PreviousPage": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "render": [Function],
+          },
+          "ResetSearch": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "render": [Function],
+          },
+          "Search": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "render": [Function],
+          },
+          "SortArrow": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "render": [Function],
+          },
+          "ThirdStateCheck": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "render": [Function],
+          },
+          "ViewColumn": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "render": [Function],
+          },
+        }
+      }
+      onRowClick={[Function]}
+      options={
+        Object {
+          "headerStyle": Object {
+            "backgroundColor": "#ddd",
+            "border": "1px solid black",
+            "fontSize": "15pt",
+            "text": "bold",
+          },
+        }
+      }
+      title="Dictionary List"
+    />
+  </ModalBody>
+  <ModalFooter>
+    <Button
+      active={false}
+      disabled={false}
+      onClick={[Function]}
+      type="null"
+      variant="secondary"
+    >
+      Close
+    </Button>
+  </ModalFooter>
+</Styled(Bootstrap(Modal))>
+`;
diff --git a/ui-react/src/components/dialogs/PerformActions.js b/ui-react/src/components/dialogs/PerformActions.js
new file mode 100644
index 000000000..f6001e21f
--- /dev/null
+++ b/ui-react/src/components/dialogs/PerformActions.js
@@ -0,0 +1,95 @@
+/*-
+ * ============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 LoopActionService from '../../api/LoopActionService';
+
+
+export default class PerformActions extends React.Component {
+	state = {
+		loopName: this.props.loopCache.getLoopName(),
+		loopAction: this.props.loopAction
+	};
+
+	constructor(props, context) {
+		super(props, context);
+		this.refreshStatus = this.refreshStatus.bind(this);
+	}
+
+	componentWillReceiveProps(newProps) {
+		this.setState({
+			loopName: newProps.loopCache.getLoopName(),
+			loopAction: newProps.loopAction
+		});
+	}
+
+	componentDidMount() {
+		const action = this.state.loopAction;
+		const loopName = this.state.loopName;
+
+		if (action === 'delete') {
+			if (window.confirm('You are about to remove Control Loop Model "' + loopName +
+					'". Select OK to continue with deletion or Cancel to keep the model.') === false) {
+				return;
+			}
+		}
+
+		this.props.setBusyLoading(); // Alert top level to start block user clicks
+
+		LoopActionService.performAction(loopName, action)
+		.then(pars => {
+			this.props.showSucAlert("Action " + action + " successfully performed");
+			if (action === 'delete') {
+				this.props.updateLoopFunction(null);
+				this.props.history.push('/');
+			} else {
+				// refresh status and update loop logs
+				this.refreshStatus(loopName);
+			}
+		})
+		.catch(error => {
+			this.props.showFailAlert("Action " + action + " failed");
+			// refresh status and update loop logs
+			this.refreshStatus(loopName);
+		})
+		.finally(() => this.props.clearBusyLoading());
+	}
+
+	refreshStatus(loopName) {
+
+		this.props.setBusyLoading();
+
+		LoopActionService.refreshStatus(loopName)
+		.then(data => {
+			this.props.updateLoopFunction(data);
+			this.props.history.push('/');
+		})
+		.catch(error => {
+			this.props.history.push('/');
+		})
+		.finally(() => this.props.clearBusyLoading());
+	}
+
+	render() {
+		return null;
+	}
+}
diff --git a/ui-react/src/components/dialogs/PerformActions.test.js b/ui-react/src/components/dialogs/PerformActions.test.js
new file mode 100644
index 000000000..c91c2f675
--- /dev/null
+++ b/ui-react/src/components/dialogs/PerformActions.test.js
@@ -0,0 +1,90 @@
+/*-
+ * ============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 PerformActions from './PerformActions';
+import LoopCache from '../../api/LoopCache';
+import LoopActionService from '../../api/LoopActionService';
+
+describe('Verify PerformActions', () => {
+
+	const loopCache = new LoopCache({
+		"name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca"
+	});
+
+	it('Test the render method action failed', async () => {
+		const flushPromises = () => new Promise(setImmediate);
+		const historyMock = { push: jest.fn() };
+		const updateLoopFunction = jest.fn();
+		const showSucAlert = jest.fn();
+		const showFailAlert = jest.fn();
+		const setBusyLoading = jest.fn();
+		const clearBusyLoading = jest.fn();
+		
+		LoopActionService.refreshStatus = jest.fn().mockImplementation(() => {
+			return Promise.resolve({
+				ok: true,
+				status: 200,
+				json: () => {}
+			});
+		});
+		const component = shallow(<PerformActions loopCache={loopCache} 
+					loopAction="submit" history={historyMock} updateLoopFunction={updateLoopFunction} showSucAlert={showSucAlert} showFailAlert={showFailAlert} setBusyLoading={setBusyLoading} clearBusyLoading={clearBusyLoading}/>)
+		await flushPromises();
+		component.update();
+
+		expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
+	});
+
+	it('Test the render method action successful', async () => {
+		const flushPromises = () => new Promise(setImmediate);
+		const historyMock = { push: jest.fn() };
+		const updateLoopFunction = jest.fn();
+		const showSucAlert = jest.fn();
+		const showFailAlert = jest.fn();
+		const setBusyLoading = jest.fn();
+		const clearBusyLoading = jest.fn();
+
+		LoopActionService.performAction = jest.fn().mockImplementation(() => {
+			return Promise.resolve({
+				ok: true,
+				status: 200,
+				json: () => {}
+			});
+		});		
+		LoopActionService.refreshStatus = jest.fn().mockImplementation(() => {
+			return Promise.resolve({
+				ok: true,
+				status: 200,
+				json: () => {}
+			});
+		});
+		const component = shallow(<PerformActions loopCache={loopCache} 
+						loopAction="submit" history={historyMock} updateLoopFunction={updateLoopFunction} showSucAlert={showSucAlert} showFailAlert={showFailAlert} setBusyLoading={setBusyLoading} clearBusyLoading={clearBusyLoading}/>)
+		await flushPromises();
+		component.update();
+
+		expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
+	});
+
+});
diff --git a/ui-react/src/components/dialogs/Policy/PolicyModal.js b/ui-react/src/components/dialogs/Policy/PolicyModal.js
new file mode 100644
index 000000000..6b1ebe178
--- /dev/null
+++ b/ui-react/src/components/dialogs/Policy/PolicyModal.js
@@ -0,0 +1,358 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP CLAMP
+ * ================================================================================
+ * Copyright (C) 2020 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 Button from 'react-bootstrap/Button';
+import Form from 'react-bootstrap/Form';
+import Col from 'react-bootstrap/Col';
+import Row from 'react-bootstrap/Row';
+import Select from 'react-select';
+import Modal from 'react-bootstrap/Modal';
+import styled from 'styled-components';
+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';
+import OnapUtils from '../../../utils/OnapUtils';
+
+const ModalStyled = styled(Modal)`
+	background-color: transparent;
+`
+
+const DivWhiteSpaceStyled = styled.div`
+	white-space: pre;
+`
+
+export default class PolicyModal extends React.Component {
+
+	state = {
+		show: true,
+		loopCache: this.props.loopCache,
+		jsonEditor: null,
+		policyName: this.props.match.params.policyName,
+		// This is to indicate whether it's an operational or config policy (in terms of loop instance)
+		policyInstanceType: this.props.match.params.policyInstanceType,
+		pdpGroup: null,
+		pdpGroupList: [],
+		pdpSubgroupList: [],
+		chosenPdpGroup: '',
+		chosenPdpSubgroup: '',
+		showSucAlert: false,
+		showFailAlert: false
+	};
+
+	constructor(props, context) {
+		super(props, context);
+		this.handleClose = this.handleClose.bind(this);
+		this.handleSave = this.handleSave.bind(this);
+		this.renderJsonEditor = this.renderJsonEditor.bind(this);
+		this.handlePdpGroupChange = this.handlePdpGroupChange.bind(this);
+		this.handlePdpSubgroupChange = this.handlePdpSubgroupChange.bind(this);
+		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);
+		this.readOnly = props.readOnly !== undefined ? props.readOnly : false;
+	}
+
+	handleSave() {
+		var editorData = this.state.jsonEditor.getValue();
+		var errors = this.state.jsonEditor.validate();
+		errors = errors.concat(this.customValidation(editorData, this.state.loopCache.getTemplateName()));
+
+		if (errors.length !== 0) {
+			console.error("Errors detected during policy data validation ", errors);
+			this.setState({
+				showFailAlert: true,
+				showMessage: 'Errors detected during policy data validation:\n' + OnapUtils.jsonEditorErrorFormatter(errors)
+			});
+			return;
+		}
+		else {
+			console.info("NO validation errors found in policy data");
+			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 => {
+					this.setState({ show: false });
+					this.props.history.push('/');
+					this.props.loadLoopFunction(this.state.loopCache.getLoopName());
+				});
+			} 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 => {
+					this.setState({ show: false });
+					this.props.history.push('/');
+					this.props.loadLoopFunction(this.state.loopCache.getLoopName());
+				});
+			}
+		}
+	}
+
+	customValidation(editorData, templateName) {
+		// method for sub-classes to override with customized validation
+		return [];
+	}
+
+	handleClose() {
+		this.setState({ show: false });
+		this.props.history.push('/');
+	}
+
+	componentDidMount() {
+		this.renderJsonEditor();
+	}
+
+	componentDidUpdate() {
+		if (this.state.showSucAlert === true || this.state.showFailAlert === true) {
+			let modalElement = document.getElementById("policyModal")
+			if (modalElement) {
+				modalElement.scrollTo(0, 0);
+			}
+		}
+	}
+
+    createJsonEditor(toscaModel, editorData) {
+        JSONEditor.defaults.themes.myBootstrap4 = JSONEditor.defaults.themes.bootstrap4.extend({
+    			getTab: function(text,tabId) {
+    				var liel = document.createElement('li');
+    				liel.classList.add('nav-item');
+    				var ael = document.createElement("a");
+    				ael.classList.add("nav-link");
+    				ael.setAttribute("style",'padding:10px;max-width:160px;');
+    				ael.setAttribute("href", "#" + tabId);
+    				ael.setAttribute('data-toggle', 'tab');
+    				text.setAttribute("style",'word-wrap:break-word;');
+    				ael.appendChild(text);
+    				liel.appendChild(ael);
+    				return liel;
+    			}
+    		});
+        return new JSONEditor(document.getElementById("editor"),
+        {   schema: toscaModel,
+              startval: editorData,
+              theme: 'myBootstrap4',
+              object_layout: 'grid',
+              disable_properties: false,
+              disable_edit_json: false,
+              disable_array_reorder: true,
+              disable_array_delete_last_row: true,
+              disable_array_delete_all_rows: false,
+              array_controls_top: true,
+              keep_oneof_values: false,
+              collapsed:true,
+              show_errors: 'always',
+              display_required_only: false,
+              show_opt_in: false,
+              prompt_before_delete: true,
+              required_by_default: false
+        })
+    }
+
+	renderJsonEditor() {
+		console.debug("Rendering PolicyModal ", this.state.policyName);
+		var toscaModel = {};
+		var editorData = {};
+		var pdpGroupValues = {};
+		var chosenPdpGroupValue, chosenPdpSubgroupValue;
+		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 === 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);
+			chosenPdpGroupValue = this.state.loopCache.getOperationalPolicyPdpGroup(this.state.policyName);
+			chosenPdpSubgroupValue = this.state.loopCache.getOperationalPolicyPdpSubgroup(this.state.policyName);
+		}
+
+		if (toscaModel == null) {
+			return;
+		}
+
+        var pdpSubgroupValues = [];
+		if (typeof(chosenPdpGroupValue) !== "undefined") {
+			var selectedPdpGroup =	pdpGroupValues.filter(entry => (Object.keys(entry)[0] === chosenPdpGroupValue));
+			pdpSubgroupValues = selectedPdpGroup[0][chosenPdpGroupValue].map((pdpSubgroup) => { return { label: pdpSubgroup, value: pdpSubgroup } });
+		}
+		this.setState({
+        				jsonEditor: this.createJsonEditor(toscaModel,editorData),
+        				pdpGroup: pdpGroupValues,
+        				pdpGroupList: pdpGroupValues.map(entry => {
+                                      				return { label: Object.keys(entry)[0], value: Object.keys(entry)[0] };
+                                      		}),
+        				pdpSubgroupList: pdpSubgroupValues,
+        				chosenPdpGroup: chosenPdpGroupValue,
+        				chosenPdpSubgroup: chosenPdpSubgroupValue
+        			})
+	}
+
+	handlePdpGroupChange(e) {
+		var selectedPdpGroup =	this.state.pdpGroup.filter(entry => (Object.keys(entry)[0] === e.value));
+		const pdpSubgroupValues = selectedPdpGroup[0][e.value].map((pdpSubgroup) => { return { label: pdpSubgroup, value: pdpSubgroup } });
+		if (this.state.chosenPdpGroup !== e.value) {
+			this.setState({
+				chosenPdpGroup: e.value,
+				chosenPdpSubgroup: '',
+				pdpSubgroupList: pdpSubgroupValues
+			});
+		}
+	}
+
+	handlePdpSubgroupChange(e) {
+		this.setState({ chosenPdpSubgroup: e.value });
+	}
+
+	handleRefresh() {
+		var newLoopCache, toscaModel, editorData;
+		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);
+				editorData = newLoopCache.getMicroServicePropertiesForName(this.state.policyName);
+				document.getElementById("editor").innerHTML = "";
+				this.setState({
+					loopCache: newLoopCache,
+					jsonEditor: this.createJsonEditor(toscaModel,editorData),
+					showSucAlert: true,
+					showMessage: "Successfully refreshed"
+				});
+			})
+			.catch(error => {
+				console.error("Error while refreshing the Operational Policy Json Representation");
+				this.setState({
+					showFailAlert: true,
+					showMessage: "Refreshing of UI failed"
+				});
+			});
+		} 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);
+				editorData = newLoopCache.getOperationalPolicyPropertiesForName(this.state.policyName);
+				document.getElementById("editor").innerHTML = "";
+				this.setState({
+					loopCache: newLoopCache,
+					jsonEditor: this.createJsonEditor(toscaModel,editorData),
+					showSucAlert: true,
+					showMessage: "Successfully refreshed"
+				});
+			})
+			.catch(error => {
+				console.error("Error while refreshing the Operational Policy Json Representation");
+				this.setState({
+					showFailAlert: true,
+					showMessage: "Refreshing of UI failed"
+				});
+			});
+		}
+	}
+
+	disableAlert() {
+		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" backdrop="static" keyboard={false} show={this.state.show} onHide={this.handleClose}>
+				<Modal.Header closeButton>
+					{this.renderModalTitle()}
+				</Modal.Header>
+                                <Alert variant="success" show={this.state.showSucAlert} onClose={this.disableAlert} dismissible>
+                                        <DivWhiteSpaceStyled>
+                                                {this.state.showMessage}
+                                        </DivWhiteSpaceStyled>
+                                </Alert>
+                                <Alert variant="danger" show={this.state.showFailAlert} onClose={this.disableAlert} dismissible>
+                                        <DivWhiteSpaceStyled>
+                                                {this.state.showMessage}
+                                        </DivWhiteSpaceStyled>
+                                </Alert>
+				<Modal.Body>
+					{this.renderOpenLoopMessage()}
+					<div id="editor" />
+					{this.renderPdpGroupDropDown()}
+				</Modal.Body>
+				<Modal.Footer>
+					{this.renderButton()}
+				</Modal.Footer>
+			</ModalStyled>
+		);
+	}
+}
diff --git a/ui-react/src/components/dialogs/Policy/PolicyModal.test.js b/ui-react/src/components/dialogs/Policy/PolicyModal.test.js
new file mode 100644
index 000000000..cb0a32020
--- /dev/null
+++ b/ui-react/src/components/dialogs/Policy/PolicyModal.test.js
@@ -0,0 +1,128 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP CLAMP
+ * ================================================================================
+ * Copyright (C) 2020 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 { 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(() => {
+        fetch.resetMocks();
+        fetch.mockImplementation(() => {
+            return Promise.resolve({
+                ok: true,
+                status: 200,
+                text: () => "OK"
+            });
+        });
+    })
+    const loopCacheStr = {
+            "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
+            "operationalPolicies": [{
+                "name": "OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca",
+                "configurationsJson": {
+                    "operational_policy": {
+                        "controlLoop": {},
+                        "policies": []
+                    }
+                },
+                "policyModel": {"policyPdpGroup": {"supportedPdpGroups":[{"monitoring": ["xacml"]}]}},
+                "jsonRepresentation" : {"schema": {}}
+             }]
+    };
+    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: OnapConstant.operationalPolicyType}}
+        
+    it('Test handleClose', () => {
+      const handleClose = jest.spyOn(PolicyModal.prototype,'handleClose');
+      const component = mount(<PolicyModal history={historyMock} match={match} loopCache={loopCache}/>)
+
+      component.find('[variant="secondary"]').prop('onClick')();
+
+      expect(handleClose).toHaveBeenCalledTimes(1);
+      expect(component.state('show')).toEqual(false);
+      expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
+    });
+
+    it('Test handleSave', async () => {
+        const loadLoopFunction = jest.fn();
+        const handleSave = jest.spyOn(PolicyModal.prototype,'handleSave');
+        const component = mount(<PolicyModal history={historyMock} 
+                          loopCache={loopCache} match={match} loadLoopFunction={loadLoopFunction} />)
+
+        component.find('[variant="primary"]').get(0).props.onClick();
+        await flushPromises();
+        component.update();
+
+        expect(handleSave).toHaveBeenCalledTimes(1);
+        expect(component.state('show')).toEqual(false);
+        expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
+    });
+
+    it('Test handleRefresh', async () => {
+        LoopService.refreshOperationalPolicyJson = jest.fn().mockImplementation(() => {
+            return Promise.resolve(loopCacheStr);
+        });
+        const updateLoopFunction = jest.fn();
+        const handleRefresh = jest.spyOn(PolicyModal.prototype,'handleRefresh');
+        const component = mount(<PolicyModal loopCache={loopCache} match={match} updateLoopFunction={updateLoopFunction} />)
+
+        component.find('[variant="primary"]').get(1).props.onClick();
+        await flushPromises();
+        component.update();
+
+        expect(handleRefresh).toHaveBeenCalledTimes(1);
+        expect(component.state('show')).toEqual(true);
+        expect(component.state('showSucAlert')).toEqual(true);
+        expect(component.state('showMessage')).toEqual("Successfully refreshed");
+    });
+
+    it('Test handlePdpGroupChange', () => {
+        const component = mount(<PolicyModal loopCache={loopCache} match={match} />)
+        component.setState({ 
+                "pdpGroup": [{"option1":["subPdp1","subPdp2"]}],
+                "chosenPdpGroup": "option2"
+        });
+        expect(component.state('chosenPdpGroup')).toEqual("option2");
+
+        const instance = component.instance();
+        const event = {label:"option1", value:"option1"}
+        instance.handlePdpGroupChange(event);
+        expect(component.state('chosenPdpGroup')).toEqual("option1");
+        expect(component.state('chosenPdpSubgroup')).toEqual("");
+        expect(component.state('pdpSubgroupList')).toEqual([{label:"subPdp1", value:"subPdp1"}, {label:"subPdp2", value:"subPdp2"}]);
+    });
+
+    it('Test handlePdpSubgroupChange', () => {
+        const component = mount(<PolicyModal loopCache={loopCache} match={match} />)
+
+        const instance = component.instance();
+        const event = {label:"option1", value:"option1"}
+        instance.handlePdpSubgroupChange(event);
+        expect(component.state('chosenPdpSubgroup')).toEqual("option1");
+    });
+});
\ No newline at end of file
diff --git a/ui-react/src/components/dialogs/RefreshStatus.js b/ui-react/src/components/dialogs/RefreshStatus.js
new file mode 100644
index 000000000..bb0939152
--- /dev/null
+++ b/ui-react/src/components/dialogs/RefreshStatus.js
@@ -0,0 +1,65 @@
+/*-
+ * ============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 LoopActionService from '../../api/LoopActionService';
+import Spinner from 'react-bootstrap/Spinner';
+import styled from 'styled-components';
+
+const StyledSpinnerDiv = styled.div`
+	justify-content: center !important;
+	display: flex !important;
+`;
+
+export default class RefreshStatus extends React.Component {
+	state = {
+		loopName: this.props.loopCache.getLoopName()
+	};
+
+	componentWillReceiveProps(newProps) {
+		this.setState({
+			loopName: newProps.loopCache.getLoopName()
+		});
+	}
+
+	componentDidMount() {
+		// refresh status and update loop logs
+		LoopActionService.refreshStatus(this.state.loopName).then(data => {
+			this.props.showSucAlert("Status successfully refreshed");
+			this.props.updateLoopFunction(data);
+			this.props.history.push('/');
+		})
+		.catch(error => {
+			this.props.showFailAlert("Status refreshing failed");
+			this.props.history.push('/');
+		});
+	}
+
+	render() {
+		return (
+			<StyledSpinnerDiv>
+				<Spinner animation="border" role="status">
+				</Spinner>
+			</StyledSpinnerDiv>
+		);
+	}
+}
diff --git a/ui-react/src/components/dialogs/RefreshStatus.test.js b/ui-react/src/components/dialogs/RefreshStatus.test.js
new file mode 100644
index 000000000..e08c50d2e
--- /dev/null
+++ b/ui-react/src/components/dialogs/RefreshStatus.test.js
@@ -0,0 +1,71 @@
+/*-
+ * ============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 RefreshStatus from './RefreshStatus';
+import LoopCache from '../../api/LoopCache';
+import LoopActionService from '../../api/LoopActionService';
+
+describe('Verify RefreshStatus', () => {
+
+	const loopCache = new LoopCache({
+		"name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca"
+	});
+
+	it('Test refresh status failed', async () => {
+		const flushPromises = () => new Promise(setImmediate);
+		const historyMock = { push: jest.fn() };
+		const showSucAlert = jest.fn();
+		const showFailAlert = jest.fn();
+
+		const component = shallow(<RefreshStatus loopCache={loopCache} history={historyMock} showSucAlert={showSucAlert} showFailAlert={showFailAlert} />)
+		await flushPromises();
+		component.update();
+
+		expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
+	});
+
+	it('Test refresh status successful', async () => {
+		const flushPromises = () => new Promise(setImmediate);
+		const historyMock = { push: jest.fn() };
+		const updateLoopFunction = jest.fn();
+		const showSucAlert = jest.fn();
+		const showFailAlert = jest.fn();
+
+		LoopActionService.refreshStatus = jest.fn().mockImplementation(() => {
+			return Promise.resolve({
+				ok: true,
+				status: 200,
+				json: () => {}
+			});
+		});
+
+		const component = shallow(<RefreshStatus loopCache={loopCache} 
+						loopAction="submit" history={historyMock} updateLoopFunction={updateLoopFunction} showSucAlert={showSucAlert} showFailAlert={showFailAlert} />)
+		await flushPromises();
+		component.update();
+
+		expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
+	});
+
+});
diff --git a/ui-react/src/components/dialogs/Tosca/UploadToscaPolicyModal.js b/ui-react/src/components/dialogs/Tosca/UploadToscaPolicyModal.js
new file mode 100644
index 000000000..fa95ca977
--- /dev/null
+++ b/ui-react/src/components/dialogs/Tosca/UploadToscaPolicyModal.js
@@ -0,0 +1,118 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP CLAMP
+ * ================================================================================
+ * Copyright (C) 2020 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 Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import Form from 'react-bootstrap/Form';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import styled from 'styled-components';
+import Alert from 'react-bootstrap/Alert';
+import PolicyToscaService from '../../../api/PolicyToscaService';
+
+const ModalStyled = styled(Modal)`
+	background-color: transparent;
+`
+export default class UploadToscaPolicyModal extends React.Component {
+	constructor(props, context) {
+		super(props, context);
+
+		this.handleCreateFromToscaPolicyModel = this.handleCreateFromToscaPolicyModel.bind(this);
+		this.handleClose = this.handleClose.bind(this);
+		this.fileSelectedHandler = this.fileSelectedHandler.bind(this);
+		this.state = {
+				show: true,
+				selectedFile: '',
+				policyModelTosca: [],
+				apiResponseStatus: '',
+				apiResponseMessage: '',
+				upldBtnClicked: false
+			};
+		}
+
+		fileSelectedHandler = (event) => {
+				if (event.target.files && event.target.files[0]) {
+					const scope = this;
+  				    let reader = new FileReader();
+					this.setState({policyModelTosca: '' });
+					reader.onload = function(e) {
+					    scope.setState({ policyModelTosca:  reader.result});
+					};
+					console.log("Filename is", event.target.files[0]);
+					reader.readAsText(event.target.files[0]);
+				}
+				this.setState({selectedFile: event.target.files[0]});
+		};
+
+	handleClose() {
+		this.setState({ show: false });
+		this.props.history.push('/');
+	}
+
+	handleCreateFromToscaPolicyModel(e) {
+        e.preventDefault();
+		if(this.state.policyModelTosca) {
+ 		PolicyToscaService.createPolicyModelFromToscaModel(this.state.policyModelTosca).then(resp => {
+			if(resp.status === 200) {
+			this.setState({apiResponseStatus: resp.status, apiResponseMessage: resp.message, upldBtnClicked: true});
+		} else {
+			this.setState({apiResponseStatus: 500, apiResponseMessage: resp, upldBtnClicked: true});
+		}
+	});
+	} else {
+		this.setState({apiResponse: 500, apiResponseMessage: 'Parameters are missing', upldBtnClicked: true});
+	}
+}
+
+	render() {
+		return (
+			<ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} backdrop="static"  keyboard={false} >
+				<Modal.Header closeButton>
+					<Modal.Title>Upload Tosca Model</Modal.Title>
+				</Modal.Header>
+				<Modal.Body>
+					<Form.Group as={Row} controlId="formPlaintextEmail">
+						<Col sm="10">
+						<input style={{display: 'none'}} type="file" name="file" accept=".yaml,.yml" onChange={this.fileSelectedHandler}
+							ref={fileInput => this.fileInput = fileInput}/>
+						<button onClick={() => this.fileInput.click()}>Pick Tosca File</button>
+							<Alert variant="secondary">
+								<p>{this.state.selectedFile.name}</p>
+							</Alert>
+						</Col>
+					</Form.Group>
+				</Modal.Body>
+				<Modal.Footer>
+					{!this.state.apiResponseStatus?<Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>:""}
+				  {!this.state.apiResponseStatus?<Button disabled={!this.state.selectedFile.name || this.state.upldBtnClicked} variant="primary" type="submit" onClick={this.handleCreateFromToscaPolicyModel.bind(this)}>Create</Button>:""}
+					{this.state.apiResponseStatus?<Alert variant={this.state.apiResponseStatus === 200?"success":"danger"}>
+							<p>{this.state.apiResponseMessage}</p>
+								<Button onClick={this.handleClose} variant={this.state.apiResponseStatus === 200?"outline-success":"danger"}>
+									Exit
+								</Button>
+						</Alert>:""}
+				</Modal.Footer>
+			</ModalStyled>
+		);
+	}
+}
diff --git a/ui-react/src/components/dialogs/Tosca/UploadToscaPolicyModal.test.js b/ui-react/src/components/dialogs/Tosca/UploadToscaPolicyModal.test.js
new file mode 100644
index 000000000..e4842062a
--- /dev/null
+++ b/ui-react/src/components/dialogs/Tosca/UploadToscaPolicyModal.test.js
@@ -0,0 +1,71 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP CLAMP
+ * ================================================================================
+ * Copyright (C) 2020 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 UploadToscaPolicyModal from './UploadToscaPolicyModal';
+
+
+describe('Test Upload Tosca Policy Model', () => {
+
+    it('Test handleUploadToscaPolicyModel for Tosca Model', () => {
+
+      const component = shallow(<UploadToscaPolicyModal />);
+
+      const fakeEvent = { preventDefault: () => console.log('preventDefault') };
+
+      component.setState({
+    	policyModelType: "TCA",
+        upldBtnClicked: false,
+        policyModelTosca: "TCAToscaModelYaml",
+        selectedFile: { name: "tca.yaml"}
+      });
+
+      const Button = component.find('Button').at(1);
+
+      Button.simulate('click', fakeEvent);
+
+      expect(component.state('policyModelTosca')).toEqual('TCAToscaModelYaml');
+
+    });
+
+    it('Test handleClose', () => {
+
+      const historyMock = { push: jest.fn() };
+
+      const handleClose = jest.spyOn(UploadToscaPolicyModal.prototype,'handleClose');
+
+      const component = shallow(<UploadToscaPolicyModal history={historyMock} />)
+
+      component.find('[variant="secondary"]').at(1).prop('onClick')();
+
+      expect(handleClose).toHaveBeenCalledTimes(1);
+
+      expect(component.state('show')).toEqual(false);
+
+      expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
+
+      handleClose.mockClear();
+
+    });
+
+});
diff --git a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
new file mode 100644
index 000000000..eb6e70f3d
--- /dev/null
+++ b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
@@ -0,0 +1,163 @@
+/*-
+ * ============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, { forwardRef } from 'react'
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import styled from 'styled-components';
+import TemplateService from '../../../api/TemplateService';
+import ArrowUpward from '@material-ui/icons/ArrowUpward';
+import ChevronLeft from '@material-ui/icons/ChevronLeft';
+import ChevronRight from '@material-ui/icons/ChevronRight';
+import Clear from '@material-ui/icons/Clear';
+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 cellStyle = { border: '1px solid black' };
+const headerStyle = { backgroundColor: '#ddd',	border: '2px solid black'	};
+const rowHeaderStyle = {backgroundColor:'#ddd',  fontSize: '15pt', text: 'bold', border: '1px solid black'};
+
+export default class ViewLoopTemplatesModal extends React.Component {
+  state = {
+        show: true,
+		content: 'Please select a loop template to display it',
+		selectedRow: -1,
+		loopTemplatesData: [],
+		fakeLoopCacheWithTemplate: new LoopCache({}),
+		loopTemplateColumnsDefinition: [
+			{ title: "#", field: "index", render: rowData => rowData.tableData.id + 1,
+				cellStyle: cellStyle,
+				headerStyle: headerStyle
+			},
+			{ title: "Template Name", field: "name",
+				cellStyle: cellStyle,
+				headerStyle: headerStyle
+			},
+			{ title: "Service Model Name", field: "modelService.serviceDetails.name",
+				cellStyle: cellStyle,
+				headerStyle: headerStyle
+			},
+			{ title: "Loop Type Allowed", field: "allowedLoopType",
+				cellStyle: cellStyle,
+				headerStyle: headerStyle
+			},
+			{ title: "# Instances Allowed", field: "maximumInstancesAllowed",
+				cellStyle: cellStyle,
+				headerStyle: headerStyle
+			},
+			{ title: "Modified Date", field: "updatedDate", editable: 'never',
+				cellStyle: cellStyle,
+				headerStyle: headerStyle
+			}
+		],
+		tableIcons: {
+			FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
+			LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
+			NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
+			PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
+			ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
+			Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
+			SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref} />)
+		}
+	};
+
+	constructor(props, context) {
+		super(props, context);
+		this.handleClose = this.handleClose.bind(this);
+		this.renderSvg = this.renderSvg.bind(this);
+		this.getLoopTemplate = this.getLoopTemplate.bind(this);
+		this.getAllLoopTemplates();
+	}
+
+	getAllLoopTemplates() {
+		TemplateService.getAllLoopTemplates().then(templatesData => {
+			// replace -1 in maximumInstancesAllowed with more meaningful 'No Limit'
+			for (let item in templatesData) {
+				if (templatesData[item].maximumInstancesAllowed === -1) {
+					templatesData[item].maximumInstancesAllowed = 'No Limit';
+				}
+			} 
+			this.setState({ loopTemplatesData: templatesData })
+		});
+	}
+
+	getLoopTemplate(templateIdInDataArray) {
+	    if (typeof templateIdInDataArray !== "undefined") {
+	        this.setState({ fakeLoopCacheWithTemplate:
+                new LoopCache({
+                    "loopTemplate":this.state.loopTemplatesData[templateIdInDataArray],
+                    "name": "fakeLoop"
+                })
+	        })
+		} else {
+          	this.setState({ fakeLoopCacheWithTemplate: new LoopCache({}) })
+        }
+    }
+
+	handleClose() {
+		this.setState({ show: false });
+		this.props.history.push('/')
+	}
+
+	renderSvg() {
+		return(
+			<SvgGenerator loopCache={this.state.fakeLoopCacheWithTemplate} clickable={false} generatedFrom={SvgGenerator.GENERATED_FROM_TEMPLATE}/>
+		)
+	}
+
+	render() {
+    return (
+    		<ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static"  keyboard={false}>
+    			<Modal.Header closeButton>
+    			</Modal.Header>
+    			<Modal.Body>
+    			   <MaterialTable
+    				  title={"View Blueprint MicroService Templates"}
+    				  data={this.state.loopTemplatesData}
+					  columns={this.state.loopTemplateColumnsDefinition}
+					  icons={this.state.tableIcons}
+    			      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'
+                          })
+                      }}
+                />
+	            {this.renderSvg()}
+                </Modal.Body>
+                <Modal.Footer>
+                	<Button variant="secondary" onClick={this.handleClose}>Close</Button>
+               </Modal.Footer>
+      </ModalStyled>
+      );
+    }
+  }
diff --git a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js
new file mode 100644
index 000000000..7680ec4b9
--- /dev/null
+++ b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js
@@ -0,0 +1,162 @@
+/*-
+ * ============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 ViewLoopTemplatesModal from './ViewLoopTemplatesModal';
+import { mount } from 'enzyme';
+import { BrowserRouter as Router } from 'react-router-dom';
+
+describe('Verify ViewLoopTemplatesModal', () => {
+	beforeEach(() => {
+		fetch.resetMocks();
+	});
+
+	it('Test API Successful', () => {
+		fetch.mockImplementationOnce(() => {
+			return Promise.resolve({
+				ok: true,
+				status: 200,
+				json: () => {
+					return Promise.resolve({
+						"index": "1",
+						"name": "MTCA version 1",
+						"modelService.serviceDetails.name": "MTCA",
+						"allowedLoopType" : "CLOSED",
+						"maximumInstancesAllowed":1,
+						"updatedDate":"2019-09-06 19:09:42"
+					});
+				}
+			});
+		});
+		const component = shallow(<ViewLoopTemplatesModal/>);
+	});
+  	
+	it('Test API Exception', () => {
+		fetch.mockImplementationOnce(() => {
+			return Promise.resolve({
+				ok: false,
+				status: 500,
+				json: () => {
+					return Promise.resolve({
+						"index": "1",
+						"name": "MTCA version 1",
+						"modelService.serviceDetails.name": "MTCA",
+						"allowedLoopType" : "CLOSED",
+						"maximumInstancesAllowed":1,
+						"updatedDate":"2019-09-06 19:09:42"
+					});
+				}
+			});
+		});
+		const component = shallow(<ViewLoopTemplatesModal/>);
+	});
+
+	it('Test API Rejection', () => {
+		const myMockFunc  = fetch.mockImplementationOnce(() => Promise.reject('error'));
+		setTimeout( () => myMockFunc().catch(e => {
+			console.info(e);
+		}),
+		100
+		);
+		const component = shallow(<ViewLoopTemplatesModal/>);
+		expect(myMockFunc.mock.calls.length).toBe(1);
+	});
+
+	it('Test the tosca model view render method', () => {
+		fetch.mockImplementationOnce(() => {
+			return Promise.resolve({
+				ok: true,
+				status: 200,
+				json: () => {
+					return Promise.resolve({
+						"index": "1",
+						"name": "MTCA version 1",
+						"modelService.serviceDetails.name": "MTCA",
+						"allowedLoopType" : "CLOSED",
+						"maximumInstancesAllowed":1,
+						"updatedDate":"2019-09-06 19:09:42"
+					});
+				}
+			});
+		});
+		const component = shallow(<ViewLoopTemplatesModal/>);
+		component.setState({ loopTemplateData: {
+						"index": "1",
+						"name": "MTCA version 1",
+						"modelService.serviceDetails.name": "MTCA",
+						"allowedLoopType" : "CLOSED",
+						"maximumInstancesAllowed":1,
+						"updatedDate":"2019-09-06 19:09:42"
+		  }
+		});
+		expect(component).toMatchSnapshot();
+	});
+
+	it('Test Table icons', () => {
+			fetch.mockImplementationOnce(() => {
+				return Promise.resolve({
+					ok: true,
+					status: 200,
+					json: () => {
+						return Promise.resolve({
+						"index": "1",
+						"name": "MTCA version 1",
+						"modelService.serviceDetails.name": "MTCA",
+						"allowedLoopType" : "CLOSED",
+						"maximumInstancesAllowed":1,
+						"updatedDate":"2019-09-06 19:09:42"
+						});
+					}
+				});
+			});
+			const component = mount(<Router><ViewLoopTemplatesModal/></Router>);
+			expect(component.find('[className="MuiSelect-icon MuiTablePagination-selectIcon"]')).toBeTruthy();
+		});
+		
+		it('Test handleClose', () => {
+			fetch.mockImplementationOnce(() => {
+				return Promise.resolve({
+					ok: true,
+					status: 200,
+					json: () => {
+						return Promise.resolve({
+						"index": "1",
+						"name": "MTCA version 1",
+						"modelService.serviceDetails.name": "MTCA",
+						"allowedLoopType" : "CLOSED",
+						"maximumInstancesAllowed":1,
+						"updatedDate":"2019-09-06 19:09:42"
+						});
+					}
+				});
+			});
+			const historyMock = { push: jest.fn() };
+			const handleClose = jest.spyOn(ViewLoopTemplatesModal.prototype,'handleClose');
+			const component = shallow(<ViewLoopTemplatesModal history={historyMock} />)
+			component.find('[variant="secondary"]').prop('onClick')();
+			expect(handleClose).toHaveBeenCalledTimes(1);
+			expect(component.state('show')).toEqual(false);
+			expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
+			handleClose.mockClear();
+		});
+	});
diff --git a/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.js b/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.js
new file mode 100644
index 000000000..d49232f2d
--- /dev/null
+++ b/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.js
@@ -0,0 +1,169 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP CLAMP
+ * ================================================================================
+ * Copyright (C) 2020 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, { forwardRef } from 'react'
+import MaterialTable from "material-table";
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import styled from 'styled-components';
+import PolicyToscaService from '../../../api/PolicyToscaService';
+import ArrowUpward from '@material-ui/icons/ArrowUpward';
+import ChevronLeft from '@material-ui/icons/ChevronLeft';
+import ChevronRight from '@material-ui/icons/ChevronRight';
+import Clear from '@material-ui/icons/Clear';
+import FirstPage from '@material-ui/icons/FirstPage';
+import LastPage from '@material-ui/icons/LastPage';
+import Search from '@material-ui/icons/Search';
+
+
+const ModalStyled = styled(Modal)`
+	background-color: transparent;
+`
+const TextModal = styled.textarea`
+	margin-top: 20px;
+	white-space:pre;
+	background-color: ${props => props.theme.toscaTextareaBackgroundColor};
+	text-align: justify;
+	font-size: ${props => props.theme.toscaTextareaFontSize};
+	width: 100%;
+	height: 300px;
+`
+const cellStyle = { border: '1px solid black' };
+const headerStyle = { backgroundColor: '#ddd',	border: '2px solid black'	};
+const rowHeaderStyle = {backgroundColor:'#ddd',  fontSize: '15pt', text: 'bold', border: '1px solid black'};
+
+export default class ViewToscalPolicyModal extends React.Component {
+
+	state = {
+		show: true,
+		content: 'Please select Tosca model to view the details',
+		selectedRow: -1,
+		toscaPolicyModelNames: [],
+		toscaColumns: [
+			{ title: "#", field: "index", render: rowData => rowData.tableData.id + 1,
+				cellStyle: cellStyle,
+				headerStyle: headerStyle
+			},
+			{ title: "Policy Model Type", field: "policyModelType",
+				cellStyle: cellStyle,
+				headerStyle: headerStyle
+			},
+			{ title: "Policy Acronym", field: "policyAcronym",
+				cellStyle: cellStyle,
+				headerStyle: headerStyle
+			},
+			{ title: "Version", field: "version",
+				cellStyle: cellStyle,
+				headerStyle: headerStyle
+			},
+			{ title: "Uploaded By", field: "updatedBy",
+				cellStyle: cellStyle,
+				headerStyle: headerStyle
+			},
+			{ title: "Uploaded Date", field: "updatedDate", editable: 'never',
+				cellStyle: cellStyle,
+				headerStyle: headerStyle
+			}
+		],
+		tableIcons: {
+		    FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
+		    LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
+		    NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
+		    PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
+		    ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
+		    Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
+		    SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref} />)
+		}
+	};
+
+	constructor(props, context) {
+		super(props, context);
+		this.handleClose = this.handleClose.bind(this);
+		this.getPolicyToscaModels = this.getToscaPolicyModels.bind(this);
+		this.handleYamlContent = this.handleYamlContent.bind(this);
+		this.getToscaPolicyModelYaml = this.getToscaPolicyModelYaml.bind(this);
+	}
+
+	componentWillMount() {
+		this.getToscaPolicyModels();
+	}
+
+	getToscaPolicyModels() {
+	    PolicyToscaService.getToscaPolicyModels().then(toscaPolicyModelNames => {
+			this.setState({ toscaPolicyModelNames: toscaPolicyModelNames });
+		});
+	}
+
+	getToscaPolicyModelYaml(policyModelType, policyModelVersion) {
+		if (typeof policyModelType !== "undefined") {
+			PolicyToscaService.getToscaPolicyModelYaml(policyModelType, policyModelVersion).then(toscaYaml => {
+				if (toscaYaml.length !== 0) {
+					this.setState({content: toscaYaml})
+				} else {
+					this.setState({ content: 'Please select Tosca model to view the details' })
+				}
+			});
+		} else {
+			this.setState({ content: 'Please select Tosca model to view the details' })
+		}
+	}
+
+	handleYamlContent(event) {
+		this.setState({ content: event.target.value });
+	}
+
+	handleClose() {
+		this.setState({ show: false });
+		this.props.history.push('/');
+	}
+
+	render() {
+		return (
+			<ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false}>
+				<Modal.Header closeButton>
+				</Modal.Header>
+				<Modal.Body>
+					<MaterialTable
+					title={"View Tosca Policy Models"}
+					data={this.state.toscaPolicyModelNames}
+					columns={this.state.toscaColumns}
+					icons={this.state.tableIcons}
+					onRowClick={(event, rowData) => {this.getToscaPolicyModelYaml(rowData.policyModelType,rowData.version);this.setState({selectedRow: rowData.tableData.id})}}
+					options={{
+						headerStyle: rowHeaderStyle,
+						rowStyle: rowData => ({
+							backgroundColor: (this.state.selectedRow !== -1 && this.state.selectedRow === rowData.tableData.id) ? '#EEE' : '#FFF'
+						})
+					}}
+					/>
+					<div>
+						<TextModal value={this.state.content} onChange={this.handleYamlContent}/>
+					</div>
+				</Modal.Body>
+				<Modal.Footer>
+					<Button variant="secondary" onClick={this.handleClose}>Close</Button>
+				</Modal.Footer>
+			</ModalStyled>
+		);
+	}
+}
diff --git a/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.test.js b/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.test.js
new file mode 100644
index 000000000..a599cec04
--- /dev/null
+++ b/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.test.js
@@ -0,0 +1,195 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP CLAMP
+ * ================================================================================
+ * Copyright (C) 2020 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 ViewToscaPolicyModal from './ViewToscaPolicyModal';
+import { mount } from 'enzyme';
+
+
+describe('Verify ViewToscaPolicyModal', () => {
+	beforeEach(() => {
+		fetch.resetMocks();
+	});
+
+	it('Test API Successful', () => {
+		fetch.mockImplementationOnce(() => {
+			return Promise.resolve({
+				ok: true,
+				status: 200,
+				json: () => {
+					return Promise.resolve({
+						"index": "1",
+						"policyModelTosca":"TCA",
+						"policyModelType":"onap.policies.monitoring.cdap.tca.hi.lo.app",
+						"version":"1.0.0",
+						"policyAcronym": "TCA",
+						"updatedDate": "2020-01-31T20:49:48.658795600Z",
+						"updatedBy": "admin"
+					});
+				}
+			});
+		});
+		const component = shallow(<ViewToscaPolicyModal/>);
+	});
+
+  it('Test API Exception', () => {
+		fetch.mockImplementationOnce(() => {
+			return Promise.resolve({
+				ok: false,
+				status: 500,
+				json: () => {
+					return Promise.resolve({
+						"index": "1",
+						"policyModelTosca":"TCA",
+						"policyModelType":"onap.policies.monitoring.cdap.tca.hi.lo.app",
+						"version":"1.0.0",
+						"policyAcronym": "TCA",
+						"updatedDate": "2020-01-31T20:49:48.658795600Z",
+						"updatedBy": "admin"
+					});
+				}
+			});
+		});
+		const component = shallow(<ViewToscaPolicyModal/>);
+	});
+
+	it('Test API Rejection', () => {
+		const myMockFunc  = fetch.mockImplementationOnce(() => Promise.reject('error'));
+		setTimeout(
+    () =>
+      myMockFunc().catch(e => {
+        console.info(e);
+      }),
+    100
+  );
+	const component = shallow(<ViewToscaPolicyModal/>);
+	expect(myMockFunc.mock.calls.length).toBe(1);
+	});
+
+
+	it('Test the tosca model view render method', () => {
+		fetch.mockImplementationOnce(() => {
+			return Promise.resolve({
+				ok: true,
+				status: 200,
+				json: () => {
+					return Promise.resolve({
+						"index": "1",
+						"policyModelTosca":"TCA",
+						"policyModelType":"onap.policies.monitoring.cdap.tca.hi.lo.app",
+						"version":"1.0.0",
+						"policyAcronym": "TCA",
+						"updatedDate": "2020-01-31T20:49:48.658795600Z",
+						"updatedBy": "admin"
+					});
+				}
+			});
+		});
+		const component = shallow(<ViewToscaPolicyModal/>);
+		component.setState({ toscaNames: {
+			"index": "1",
+			"policyModelTosca":"TCA",
+			"policyModelType":"onap.policies.monitoring.cdap.tca.hi.lo.app",
+			"version":"1.0.0",
+			"policyAcronym": "TCA",
+			"updatedDate": "2020-01-31T20:49:48.658795600Z",
+			"updatedBy": "admin"
+		}
+	});
+  expect(component).toMatchSnapshot();
+  });
+
+	it('Test Table icons', () => {
+		fetch.mockImplementationOnce(() => {
+			return Promise.resolve({
+				ok: true,
+				status: 200,
+				json: () => {
+					return Promise.resolve({
+						"index": "1",
+						"policyModelTosca":"TCA",
+						"policyModelType":"onap.policies.monitoring.cdap.tca.hi.lo.app",
+						"version":"1.0.0",
+						"policyAcronym": "TCA",
+						"updatedDate": "2020-01-31T20:49:48.658795600Z",
+						"updatedBy": "admin"
+					});
+				}
+			});
+		});
+		const component = mount(<ViewToscaPolicyModal/>);
+		expect(component.find('[className="MuiSelect-icon MuiTablePagination-selectIcon"]')).toBeTruthy();
+  });
+
+	it('Test handleYamlContent', () => {
+		fetch.mockImplementationOnce(() => {
+			return Promise.resolve({
+				ok: true,
+				status: 200,
+				json: () => {
+					return Promise.resolve({
+						"index": "1",
+						"policyModelTosca":"TCA",
+						"policyModelType":"onap.policies.monitoring.cdap.tca.hi.lo.app",
+						"version":"1.0.0",
+						"policyAcronym":"TCA",
+						"updatedDate": "2020-01-31T20:49:48.658795600Z",
+						"updatedBy": "admin"
+					});
+				}
+			});
+		});
+		const yamlContent = 'TCA Tosca model details';
+		const component = shallow(<ViewToscaPolicyModal/>);
+		component.find('[value="Please select Tosca model to view the details"]').prop('onChange')({ target: { value: yamlContent }});
+    expect(component.state('content')).toEqual(yamlContent);
+  });
+
+	it('Test handleClose', () => {
+		fetch.mockImplementationOnce(() => {
+			return Promise.resolve({
+				ok: true,
+				status: 200,
+				json: () => {
+					return Promise.resolve({
+						"index": "1",
+						"policyModelTosca":"TCA",
+						"policyModelType":"onap.policies.monitoring.cdap.tca.hi.lo.app",
+						"version":"1.0.0",
+						"policyAcronym": "TCA",
+						"updatedDate": "2020-01-31T20:49:48.658795600Z",
+						"updatedBy": "admin"
+					});
+				}
+			});
+		});
+		const historyMock = { push: jest.fn() };
+		const handleClose = jest.spyOn(ViewToscaPolicyModal.prototype,'handleClose');
+		const component = shallow(<ViewToscaPolicyModal history={historyMock} />)
+		component.find('[variant="secondary"]').prop('onClick')();
+		expect(handleClose).toHaveBeenCalledTimes(1);
+		expect(component.state('show')).toEqual(false);
+		expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
+		handleClose.mockClear();
+	});
+});
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
new file mode 100644
index 000000000..ee7b679a5
--- /dev/null
+++ b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap
@@ -0,0 +1,158 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify ViewLoopTemplatesModal Test the tosca model view render method 1`] = `
+<Styled(Bootstrap(Modal))
+  backdrop="static"
+  keyboard={false}
+  onHide={[Function]}
+  show={true}
+  size="xl"
+>
+  <ModalHeader
+    closeButton={true}
+    closeLabel="Close"
+  />
+  <ModalBody>
+    <WithStyles(Component)
+      columns={
+        Array [
+          Object {
+            "cellStyle": Object {
+              "border": "1px solid black",
+            },
+            "field": "index",
+            "headerStyle": Object {
+              "backgroundColor": "#ddd",
+              "border": "2px solid black",
+            },
+            "render": [Function],
+            "title": "#",
+          },
+          Object {
+            "cellStyle": Object {
+              "border": "1px solid black",
+            },
+            "field": "name",
+            "headerStyle": Object {
+              "backgroundColor": "#ddd",
+              "border": "2px solid black",
+            },
+            "title": "Template Name",
+          },
+          Object {
+            "cellStyle": Object {
+              "border": "1px solid black",
+            },
+            "field": "modelService.serviceDetails.name",
+            "headerStyle": Object {
+              "backgroundColor": "#ddd",
+              "border": "2px solid black",
+            },
+            "title": "Service Model Name",
+          },
+          Object {
+            "cellStyle": Object {
+              "border": "1px solid black",
+            },
+            "field": "allowedLoopType",
+            "headerStyle": Object {
+              "backgroundColor": "#ddd",
+              "border": "2px solid black",
+            },
+            "title": "Loop Type Allowed",
+          },
+          Object {
+            "cellStyle": Object {
+              "border": "1px solid black",
+            },
+            "field": "maximumInstancesAllowed",
+            "headerStyle": Object {
+              "backgroundColor": "#ddd",
+              "border": "2px solid black",
+            },
+            "title": "# Instances Allowed",
+          },
+          Object {
+            "cellStyle": Object {
+              "border": "1px solid black",
+            },
+            "editable": "never",
+            "field": "updatedDate",
+            "headerStyle": Object {
+              "backgroundColor": "#ddd",
+              "border": "2px solid black",
+            },
+            "title": "Modified Date",
+          },
+        ]
+      }
+      data={Array []}
+      icons={
+        Object {
+          "FirstPage": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "render": [Function],
+          },
+          "LastPage": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "render": [Function],
+          },
+          "NextPage": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "render": [Function],
+          },
+          "PreviousPage": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "render": [Function],
+          },
+          "ResetSearch": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "render": [Function],
+          },
+          "Search": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "render": [Function],
+          },
+          "SortArrow": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "render": [Function],
+          },
+        }
+      }
+      onRowClick={[Function]}
+      options={
+        Object {
+          "headerStyle": Object {
+            "backgroundColor": "#ddd",
+            "border": "1px solid black",
+            "fontSize": "15pt",
+            "text": "bold",
+          },
+          "rowStyle": [Function],
+        }
+      }
+      title="View Blueprint MicroService Templates"
+    />
+    <withRouter(SvgGenerator)
+      clickable={false}
+      generatedFrom="TEMPLATE"
+      loopCache={
+        LoopCache {
+          "loopJsonCache": Object {},
+        }
+      }
+    />
+  </ModalBody>
+  <ModalFooter>
+    <Button
+      active={false}
+      disabled={false}
+      onClick={[Function]}
+      type="button"
+      variant="secondary"
+    >
+      Close
+    </Button>
+  </ModalFooter>
+</Styled(Bootstrap(Modal))>
+`;
diff --git a/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewToscaPolicyModal.test.js.snap b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewToscaPolicyModal.test.js.snap
new file mode 100644
index 000000000..5f19a9b7d
--- /dev/null
+++ b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewToscaPolicyModal.test.js.snap
@@ -0,0 +1,155 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify ViewToscaPolicyModal Test the tosca model view render method 1`] = `
+<Styled(Bootstrap(Modal))
+  backdrop="static"
+  keyboard={false}
+  onHide={[Function]}
+  show={true}
+  size="xl"
+>
+  <ModalHeader
+    closeButton={true}
+    closeLabel="Close"
+  />
+  <ModalBody>
+    <WithStyles(Component)
+      columns={
+        Array [
+          Object {
+            "cellStyle": Object {
+              "border": "1px solid black",
+            },
+            "field": "index",
+            "headerStyle": Object {
+              "backgroundColor": "#ddd",
+              "border": "2px solid black",
+            },
+            "render": [Function],
+            "title": "#",
+          },
+          Object {
+            "cellStyle": Object {
+              "border": "1px solid black",
+            },
+            "field": "policyModelType",
+            "headerStyle": Object {
+              "backgroundColor": "#ddd",
+              "border": "2px solid black",
+            },
+            "title": "Policy Model Type",
+          },
+          Object {
+            "cellStyle": Object {
+              "border": "1px solid black",
+            },
+            "field": "policyAcronym",
+            "headerStyle": Object {
+              "backgroundColor": "#ddd",
+              "border": "2px solid black",
+            },
+            "title": "Policy Acronym",
+          },
+          Object {
+            "cellStyle": Object {
+              "border": "1px solid black",
+            },
+            "field": "version",
+            "headerStyle": Object {
+              "backgroundColor": "#ddd",
+              "border": "2px solid black",
+            },
+            "title": "Version",
+          },
+          Object {
+            "cellStyle": Object {
+              "border": "1px solid black",
+            },
+            "field": "updatedBy",
+            "headerStyle": Object {
+              "backgroundColor": "#ddd",
+              "border": "2px solid black",
+            },
+            "title": "Uploaded By",
+          },
+          Object {
+            "cellStyle": Object {
+              "border": "1px solid black",
+            },
+            "editable": "never",
+            "field": "updatedDate",
+            "headerStyle": Object {
+              "backgroundColor": "#ddd",
+              "border": "2px solid black",
+            },
+            "title": "Uploaded Date",
+          },
+        ]
+      }
+      data={Array []}
+      icons={
+        Object {
+          "FirstPage": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "render": [Function],
+          },
+          "LastPage": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "render": [Function],
+          },
+          "NextPage": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "render": [Function],
+          },
+          "PreviousPage": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "render": [Function],
+          },
+          "ResetSearch": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "render": [Function],
+          },
+          "Search": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "render": [Function],
+          },
+          "SortArrow": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "render": [Function],
+          },
+        }
+      }
+      onRowClick={[Function]}
+      options={
+        Object {
+          "headerStyle": Object {
+            "backgroundColor": "#ddd",
+            "border": "1px solid black",
+            "fontSize": "15pt",
+            "text": "bold",
+          },
+          "rowStyle": [Function],
+        }
+      }
+      title="View Tosca Policy Models"
+    />
+    <div>
+      <styled.textarea
+        onChange={[Function]}
+        value="Please select Tosca model to view the details"
+      />
+    </div>
+  </ModalBody>
+  <ModalFooter>
+    <Button
+      active={false}
+      disabled={false}
+      onClick={[Function]}
+      type="button"
+      variant="secondary"
+    >
+      Close
+    </Button>
+  </ModalFooter>
+</Styled(Bootstrap(Modal))>
+`;
diff --git a/ui-react/src/components/dialogs/UserInfoModal.js b/ui-react/src/components/dialogs/UserInfoModal.js
new file mode 100644
index 000000000..4b779dece
--- /dev/null
+++ b/ui-react/src/components/dialogs/UserInfoModal.js
@@ -0,0 +1,110 @@
+/*-
+ * ============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 Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import Form from 'react-bootstrap/Form';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import styled from 'styled-components';
+import UserService from '../../api/UserService';
+
+const ModalStyled = styled(Modal)`
+	background-color: transparent;
+`
+
+export default class UserInfoModal extends React.Component {
+
+	constructor(props, context) {
+		super(props, context);
+
+		this.handleClose = this.handleClose.bind(this);
+	    this.renderPermissions = this.renderPermissions.bind(this);
+		this.renderUserName = this.renderUserName.bind(this);
+		this.state = {
+			show: true,
+			userInfo: {}
+		};
+	}
+	componentWillMount() {
+		UserService.getUserInfo().then(userInfo => {
+			this.setState({ userInfo: userInfo })
+		});
+	}
+
+	handleClose() {
+			this.props.history.push('/');
+	}
+	renderPermissions() {
+          if (this.state.userInfo["allPermissions"]) {
+	        var listOfPermissions = this.state.userInfo["allPermissions"].map(function(perm) {
+	            return <Form.Control plaintext readOnly defaultValue={perm} />;
+	        })
+		    return listOfPermissions;
+		  } else {
+		    return;
+		  }
+ 	}
+	renderUserName() {
+		if (this.state.userInfo["userName"]) {
+			return <Form.Control plaintext readOnly defaultValue={this.state.userInfo["userName"]} />
+		} else  {
+			return;
+		}
+	}
+	renderVersion() {
+		if (this.state.userInfo["cldsVersion"]) {
+			return <Form.Control plaintext readOnly defaultValue={this.state.userInfo["cldsVersion"]} />
+		} else  {
+			return;
+		}
+	}
+	render() {
+		return (
+			<ModalStyled size="lg"  show={this.state.show} onHide={this.handleClose}>
+				<Modal.Header closeButton>
+					<Modal.Title>User Info</Modal.Title>
+				</Modal.Header>
+				<Modal.Body>
+					<Form.Group as={Row} controlId="userName">
+						<Form.Label column sm="3">Current User:</Form.Label>
+						<Col>{this.renderUserName()}</Col>
+					</Form.Group>
+					<Form.Group as={Row} controlId="cldsVersion">
+						<Form.Label column sm="3">CLDS Version:</Form.Label>
+						<Col>{this.renderVersion()}</Col>
+					</Form.Group>
+					<Form.Group as={Row} controlId="userPermissions">
+						<Form.Label column sm="3">User Permissions:</Form.Label>
+						<Col>
+							{this.renderPermissions()}
+						</Col>
+					</Form.Group>
+				</Modal.Body>
+				<Modal.Footer>
+					<Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
+				</Modal.Footer>
+			</ModalStyled>
+		);
+	}
+}
diff --git a/ui-react/src/components/dialogs/UserInfoModal.test.js b/ui-react/src/components/dialogs/UserInfoModal.test.js
new file mode 100644
index 000000000..f5ed0ae10
--- /dev/null
+++ b/ui-react/src/components/dialogs/UserInfoModal.test.js
@@ -0,0 +1,78 @@
+/*-
+ * ============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 UserInfoModal from './UserInfoModal';
+
+describe('Verify UserInfoModal', () => {
+
+	beforeEach(() => {
+		fetch.resetMocks();
+		fetch.mockImplementation(() => {
+			return Promise.resolve({
+				ok: true,
+				status: 200,
+				json: () => {
+					return Promise.resolve({
+						"userName": "test",
+						"cldsVersion": "1.0.0"
+					});
+			}});
+		});
+	})
+
+	it('Test the render method full permission', () => {
+		const component = shallow(<UserInfoModal />)
+		component.setState({ userInfo: {
+			"userName": "test",
+			"cldsVersion": "1.0.0",
+			"allPermissions": ["permission1","permission2"]
+		}});
+		expect(component).toMatchSnapshot();
+	});
+
+	it('Test the render method no permission', () => {
+		const component = shallow(<UserInfoModal />)
+		component.setState({ userInfo: {}
+		});
+
+		expect(component.find('FormControl').length).toEqual(0);
+	});
+
+	it('Test the render method read permission', () => {
+		const component = shallow(<UserInfoModal />)
+		component.setState({ userInfo: {
+			"userName": "test",
+			"cldsVersion": "1.0.0",
+			"allPermissions": ["permission1","permission2"]
+		}});
+
+		expect(component.find('FormControl').length).toEqual(4);
+
+		const forms = component.find('FormControl');
+		expect(forms.get(0).props.defaultValue).toEqual("test");
+		expect(forms.get(1).props.defaultValue).toEqual("1.0.0");
+		expect(forms.get(2).props.defaultValue).toEqual("permission1");
+		expect(forms.get(3).props.defaultValue).toEqual("permission2");
+	});
+});
diff --git a/ui-react/src/components/dialogs/__snapshots__/UserInfoModal.test.js.snap b/ui-react/src/components/dialogs/__snapshots__/UserInfoModal.test.js.snap
new file mode 100644
index 000000000..bd05e8635
--- /dev/null
+++ b/ui-react/src/components/dialogs/__snapshots__/UserInfoModal.test.js.snap
@@ -0,0 +1,117 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify UserInfoModal Test the render method full permission 1`] = `
+<Styled(Bootstrap(Modal))
+  onHide={[Function]}
+  show={true}
+  size="lg"
+>
+  <ModalHeader
+    closeButton={true}
+    closeLabel="Close"
+  >
+    <ModalTitle>
+      User Info
+    </ModalTitle>
+  </ModalHeader>
+  <ModalBody>
+    <FormGroup
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "defaultProps": Object {
+            "noGutters": false,
+          },
+          "render": [Function],
+        }
+      }
+      controlId="userName"
+    >
+      <FormLabel
+        column={true}
+        sm="3"
+        srOnly={false}
+      >
+        Current User:
+      </FormLabel>
+      <Col>
+        <FormControl
+          defaultValue="test"
+          plaintext={true}
+          readOnly={true}
+        />
+      </Col>
+    </FormGroup>
+    <FormGroup
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "defaultProps": Object {
+            "noGutters": false,
+          },
+          "render": [Function],
+        }
+      }
+      controlId="cldsVersion"
+    >
+      <FormLabel
+        column={true}
+        sm="3"
+        srOnly={false}
+      >
+        CLDS Version:
+      </FormLabel>
+      <Col>
+        <FormControl
+          defaultValue="1.0.0"
+          plaintext={true}
+          readOnly={true}
+        />
+      </Col>
+    </FormGroup>
+    <FormGroup
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "defaultProps": Object {
+            "noGutters": false,
+          },
+          "render": [Function],
+        }
+      }
+      controlId="userPermissions"
+    >
+      <FormLabel
+        column={true}
+        sm="3"
+        srOnly={false}
+      >
+        User Permissions:
+      </FormLabel>
+      <Col>
+        <FormControl
+          defaultValue="permission1"
+          plaintext={true}
+          readOnly={true}
+        />
+        <FormControl
+          defaultValue="permission2"
+          plaintext={true}
+          readOnly={true}
+        />
+      </Col>
+    </FormGroup>
+  </ModalBody>
+  <ModalFooter>
+    <Button
+      active={false}
+      disabled={false}
+      onClick={[Function]}
+      type="null"
+      variant="secondary"
+    >
+      Cancel
+    </Button>
+  </ModalFooter>
+</Styled(Bootstrap(Modal))>
+`;
diff --git a/ui-react/src/components/loop_viewer/logs/LoopLogs.js b/ui-react/src/components/loop_viewer/logs/LoopLogs.js
new file mode 100644
index 000000000..b3f052626
--- /dev/null
+++ b/ui-react/src/components/loop_viewer/logs/LoopLogs.js
@@ -0,0 +1,97 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP CLAMP
+ * ================================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights
+ *                             reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END============================================
+ * ===================================================================
+ *
+ */
+import React from 'react';
+import Table from 'react-bootstrap/Table';
+import LoopCache from '../../../api/LoopCache';
+import styled from 'styled-components';
+
+const LoopLogsHeaderDivStyled = styled.div`
+	background-color: ${props => props.theme.loopLogsHeaderBackgroundColor};
+	padding: 10px 10px;
+	color: ${props => props.theme.loopLogsHeaderFontColor};
+`
+const TableStyled = styled(Table)`
+    
+    overflow: auto;
+`
+const TableRow = ({ logRow }) => (
+	<tr>
+		<td>{logRow.logInstant}</td>
+		<td>{logRow.logType}</td>
+		<td>{logRow.logComponent}</td>
+		<td>{logRow.message}</td>
+	</tr>
+
+)
+
+export default class LoopLogs extends React.Component {
+
+	state = {
+		loopCache: new LoopCache({})
+	}
+	constructor(props) {
+		super(props);
+		this.renderLogs = this.renderLogs.bind(this);
+		this.state.loopCache = props.loopCache;
+	}
+
+	shouldComponentUpdate(nextProps, nextState) {
+		return this.state.loopCache !== nextState.loopCache;
+	}
+
+	componentWillReceiveProps(newProps) {
+		this.setState({
+			loopCache: newProps.loopCache
+		});
+	}
+
+	renderLogs() {
+		if (this.state.loopCache.getLoopLogsArray() != null) {
+			return (
+				this.state.loopCache.getLoopLogsArray().map(row => <TableRow logRow={row} />)
+			)
+		}
+	}
+
+	render() {
+		return (
+			<LoopLogsHeaderDivStyled>
+				<label>Loop Logs</label>
+				<TableStyled striped hover variant responsive>
+					<thead>
+						<tr>
+							<th><span align="left">Date</span></th>
+							<th><span align="left">Type</span></th>
+							<th><span align="left">Component</span></th>
+							<th><span align="right">Log</span></th>
+						</tr>
+					</thead>
+					<tbody>
+						{this.renderLogs()}
+					</tbody>
+				</TableStyled>
+			</LoopLogsHeaderDivStyled>
+
+		);
+	}
+}
diff --git a/ui-react/src/components/loop_viewer/logs/LoopLogs.test.js b/ui-react/src/components/loop_viewer/logs/LoopLogs.test.js
new file mode 100644
index 000000000..3b7fd413a
--- /dev/null
+++ b/ui-react/src/components/loop_viewer/logs/LoopLogs.test.js
@@ -0,0 +1,70 @@
+/*-
+ * ============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 LoopLogs from './LoopLogs';
+import LoopCache from '../../../api/LoopCache';
+
+describe('Verify LoopLogs', () => {
+
+	const loopCache = new LoopCache({
+		"name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
+			"loopLogs": [
+			{
+				"id": 1,
+				"logType": "INFO",
+				"logComponent": "CLAMP",
+				"message": "Operational policies UPDATED",
+				"logInstant": "2019-07-08T09:44:37Z"
+			}
+		]
+	});
+
+	it('Test the render method', () => {
+		const component = shallow(<LoopLogs loopCache={loopCache}/>)
+		expect(component).toMatchSnapshot();
+
+		const loopCacheUpdated = new LoopCache({
+		"name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
+			"loopLogs": [
+			{
+				"id": 1,
+				"logType": "INFO",
+				"logComponent": "CLAMP",
+				"message": "Operational policies UPDATED",
+				"logInstant": "2019-07-08T09:44:37Z"
+			},
+			{
+				"id": 2,
+				"logType": "INFO",
+				"logComponent": "CLAMP",
+				"message": "Operational policies UPDATED",
+				"logInstant": "2019-07-08T09:44:50Z"
+			}
+			]
+		});
+
+		component.setProps({ loopCache: loopCacheUpdated });
+		expect(component.find('TableRow').length).toEqual(2);
+	});
+});
\ No newline at end of file
diff --git a/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap b/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap
new file mode 100644
index 000000000..25736d2e9
--- /dev/null
+++ b/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap
@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify LoopLogs Test the render method 1`] = `
+<styled.div>
+  <label>
+    Loop Logs
+  </label>
+  <Styled(Bootstrap(Table))
+    hover={true}
+    responsive={true}
+    striped={true}
+    variant={true}
+  >
+    <thead>
+      <tr>
+        <th>
+          <span
+            align="left"
+          >
+            Date
+          </span>
+        </th>
+        <th>
+          <span
+            align="left"
+          >
+            Type
+          </span>
+        </th>
+        <th>
+          <span
+            align="left"
+          >
+            Component
+          </span>
+        </th>
+        <th>
+          <span
+            align="right"
+          >
+            Log
+          </span>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <TableRow
+        logRow={
+          Object {
+            "id": 1,
+            "logComponent": "CLAMP",
+            "logInstant": "2019-07-08T09:44:37Z",
+            "logType": "INFO",
+            "message": "Operational policies UPDATED",
+          }
+        }
+      />
+    </tbody>
+  </Styled(Bootstrap(Table))>
+</styled.div>
+`;
diff --git a/ui-react/src/components/loop_viewer/status/LoopStatus.js b/ui-react/src/components/loop_viewer/status/LoopStatus.js
new file mode 100644
index 000000000..d960c31e6
--- /dev/null
+++ b/ui-react/src/components/loop_viewer/status/LoopStatus.js
@@ -0,0 +1,105 @@
+/*-
+* ============LICENSE_START=======================================================
+* ONAP CLAMP
+* ================================================================================
+* Copyright (C) 2019 AT&T Intellectual Property. All rights
+*                             reserved.
+* ================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END============================================
+* ===================================================================
+*
+*/
+import React from 'react';
+import Table from 'react-bootstrap/Table';
+import styled from 'styled-components';
+import LoopCache from '../../../api/LoopCache';
+
+const LoopStatusViewDivStyled = styled.div`
+	background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
+	padding: 10px 10px;
+	color: ${props => props.theme.loopViewerHeaderFontColor};
+`
+
+const TableStyled = styled(Table)`
+    overflow: auto;
+`
+
+const TableRow = ({ statusRow }) => (
+	<tr>
+		<td>{statusRow.componentName}</td>
+		<td>{statusRow.stateName}</td>
+		<td>{statusRow.description}</td>
+	</tr>
+
+)
+
+export default class LoopStatus extends React.Component {
+	state = {
+		loopCache: new LoopCache({})
+	}
+
+	constructor(props) {
+		super(props);
+		this.renderStatus = this.renderStatus.bind(this);
+		this.state.loopCache = props.loopCache;
+	}
+
+
+	renderStatus() {
+		if (this.state.loopCache.getComponentStates() != null) {
+			return Object.keys(this.state.loopCache.getComponentStates()).map((key) => {
+				console.debug("Adding status for: ",key);
+				var res={}
+				res[key]=this.state.loopCache.getComponentStates()[key];
+				return (<TableRow statusRow={{'componentName':key,'stateName':this.state.loopCache.getComponentStates()[key].componentState.stateName,'description':this.state.loopCache.getComponentStates()[key].componentState.description}} />)
+			})
+
+		}
+	}
+
+	shouldComponentUpdate(nextProps, nextState) {
+		return this.state.loopCache !== nextState.loopCache;
+	}
+
+	componentWillReceiveProps(newProps) {
+		this.setState({
+			loopCache: newProps.loopCache
+		});
+	}
+
+	render() {
+		return (
+			<LoopStatusViewDivStyled>
+				<label>Loop Status: {this.state.loopCache.getComputedState()}
+				</label>
+
+				<div >
+					<TableStyled striped hover variant responsive>
+						<thead>
+							<tr>
+								<th><span align="left">Component Name</span></th>
+								<th><span align="left">Component State</span></th>
+								<th><span align="right">Description</span></th>
+							</tr>
+						</thead>
+						<tbody>
+							{this.renderStatus()}
+						</tbody>
+					</TableStyled>
+				</div>
+			</LoopStatusViewDivStyled>
+		);
+	}
+}
+
diff --git a/ui-react/src/components/loop_viewer/status/LoopStatus.test.js b/ui-react/src/components/loop_viewer/status/LoopStatus.test.js
new file mode 100644
index 000000000..8d0448796
--- /dev/null
+++ b/ui-react/src/components/loop_viewer/status/LoopStatus.test.js
@@ -0,0 +1,78 @@
+/*-
+ * ============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 LoopStatus from './LoopStatus';
+import LoopCache from '../../../api/LoopCache';
+
+describe('Verify LoopStatus', () => {
+
+	const loopCache = new LoopCache({
+		"name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
+		"lastComputedState": "DESIGN",
+		"components": {
+			"POLICY": {
+				"componentState": {
+					"stateName": "NOT_SENT",
+					"description": "The policies defined have NOT yet been created on the policy engine"
+				}
+			},
+			"DCAE": {
+				"componentState": {
+					"stateName": "BLUEPRINT_DEPLOYED",
+					"description": "The DCAE blueprint has been found in the DCAE inventory but not yet instancianted for this loop"
+				}
+			}
+		}
+	});
+
+	it('Test the render method', () => {
+		const component = shallow(<LoopStatus loopCache={loopCache}/>)
+
+		expect(component).toMatchSnapshot();
+		
+		const loopCacheUpdated = new LoopCache({
+			"name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
+			"lastComputedState": "SUBMIT",
+			"components": {
+				"POLICY": {
+					"componentState": {
+						"stateName": "SENT",
+						"description": "The policies defined have NOT yet been created on the policy engine"
+					}
+				},
+				"DCAE": {
+					"componentState": {
+						"stateName": "BLUEPRINT_DEPLOYED",
+						"description": "The DCAE blueprint has been found in the DCAE inventory but not yet instancianted for this loop"
+					}
+				}
+			}
+		});
+		component.setProps({ loopCache: loopCacheUpdated });
+
+		const forms = component.find('TableRow');
+		expect(forms.get(0).props.statusRow.stateName).toEqual("SENT");
+		expect(component.find('label').text()).toContain('SUBMIT');
+	});
+});
\ No newline at end of file
diff --git a/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap b/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap
new file mode 100644
index 000000000..275933ee8
--- /dev/null
+++ b/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap
@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify LoopStatus Test the render method 1`] = `
+<styled.div>
+  <label>
+    Loop Status: 
+    DESIGN
+  </label>
+  <div>
+    <Styled(Bootstrap(Table))
+      hover={true}
+      responsive={true}
+      striped={true}
+      variant={true}
+    >
+      <thead>
+        <tr>
+          <th>
+            <span
+              align="left"
+            >
+              Component Name
+            </span>
+          </th>
+          <th>
+            <span
+              align="left"
+            >
+              Component State
+            </span>
+          </th>
+          <th>
+            <span
+              align="right"
+            >
+              Description
+            </span>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <TableRow
+          statusRow={
+            Object {
+              "componentName": "POLICY",
+              "description": "The policies defined have NOT yet been created on the policy engine",
+              "stateName": "NOT_SENT",
+            }
+          }
+        />
+        <TableRow
+          statusRow={
+            Object {
+              "componentName": "DCAE",
+              "description": "The DCAE blueprint has been found in the DCAE inventory but not yet instancianted for this loop",
+              "stateName": "BLUEPRINT_DEPLOYED",
+            }
+          }
+        />
+      </tbody>
+    </Styled(Bootstrap(Table))>
+  </div>
+</styled.div>
+`;
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..f5f5047ba
--- /dev/null
+++ b/ui-react/src/components/loop_viewer/svg/SvgGenerator.js
@@ -0,0 +1,246 @@
+/*-
+ * ============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;
+	  display: flex;
+    width: 100%;
+    height: 100%;
+`
+
+const emptySvg = (<svg> <text x="60" 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) {
+		console.debug("svg click event received");
+		if (this.state.clickable) {
+			var elementName = event.target.parentNode.getAttribute('policyId');
+			console.info("SVG element clicked", elementName);
+			// Only allow movement to policy editing IF there busyLoadingCOunt is 0,
+			// meaning we are not waiting for refreshStatus to complete, for example
+			if (elementName !== null && !this.props.isBusyLoading()) {
+				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+50;
+        return (
+
+            <DivStyled onClick={this.handleSvgClick} >
+                <svg height={svgHeight} width={svgWidth}  viewBox="0,0,{svgWidth},{svgHeight}" preserveAspectRatio="none">
+									<svg x="-50" y="25">
+                    {allTheElements}
+									</svg>
+                </svg>
+            </DivStyled>
+        );
+    }
+}
+
+export default withRouter(SvgGenerator);
diff --git a/ui-react/src/components/menu/MenuBar.js b/ui-react/src/components/menu/MenuBar.js
new file mode 100644
index 000000000..7cf56570b
--- /dev/null
+++ b/ui-react/src/components/menu/MenuBar.js
@@ -0,0 +1,123 @@
+/*-
+ * ============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 Nav from 'react-bootstrap/Nav';
+import Navbar from 'react-bootstrap/Navbar';
+import NavDropdown from 'react-bootstrap/NavDropdown';
+import OnapConstants from '../../utils/OnapConstants';
+import 'bootstrap-css-only/css/bootstrap.min.css';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+const StyledLink = styled(Link)`
+	color: ${props => props.theme.menuFontColor};
+	background-color: ${props => props.theme.menuBackgroundColor};
+	font-weight: normal;
+	display: block;
+	width: 100%;
+	padding: .25rem 1.5rem;
+	clear: both;
+	text-align: inherit;
+	white-space: nowrap;
+	border: 0;
+	:hover {
+		text-decoration: none;
+		background-color: ${props => props.theme.menuHighlightedBackgroundColor};
+		color:  ${props => props.theme.menuHighlightedFontColor};
+	}
+`;
+const StyledNavLink = styled(Nav.Link)`
+	color: ${props => props.theme.menuFontColor};
+	background-color: ${props => props.theme.menuBackgroundColor};
+	font-weight: normal;
+	padding: .25rem 1.5rem;
+	:hover {
+		background-color: ${props => props.theme.menuHighlightedBackgroundColor};
+		color:  ${props => props.theme.menuHighlightedFontColor};
+	}
+`;
+
+const StyledNavDropdown = styled(NavDropdown)`
+	color: ${props => props.theme.menuFontColor};
+	& .dropdown-toggle {
+	color: ${props => props.theme.menuFontColor};
+	background-color: ${props => props.theme.backgroundColor};
+	font-weight: normal;
+		:hover {
+				font-weight: bold;
+		}
+	}
+`;
+
+export default class MenuBar extends React.Component {
+	state = {
+		loopName: this.props.loopName,
+		disabled: true
+	};
+
+	componentWillReceiveProps(newProps) {
+		if (newProps.loopName !== OnapConstants.defaultLoopName) {
+			this.setState({ disabled: false });
+		} else {
+			this.setState({ disabled: true });
+		}
+	}
+
+	render () {
+		return (
+				<Navbar.Collapse>
+					<StyledNavDropdown title="Loop Templates">
+							<NavDropdown.Item as={StyledLink} to="/ViewLoopTemplatesModal">View All Templates</NavDropdown.Item>
+					</StyledNavDropdown>
+					<StyledNavDropdown title="Policy Models">
+                    	    <NavDropdown.Item as={StyledLink} to="/uploadToscaPolicyModal">Upload Tosca Model</NavDropdown.Item>
+                    		<NavDropdown.Item as={StyledLink} to="/viewToscaPolicyModal">View Tosca Models</NavDropdown.Item>
+                            <NavDropdown.Item as={StyledLink} to="/ManageDictionaries">Manage Metadata Dictionaries</NavDropdown.Item>
+                    </StyledNavDropdown>
+					<StyledNavDropdown title="Loop Instance">
+					        <NavDropdown.Item as={StyledLink} to="/createLoop">Create</NavDropdown.Item>
+					        <NavDropdown.Item as={StyledLink} to="/openLoop">Open</NavDropdown.Item>
+					        <NavDropdown.Item as={StyledLink} to="/closeLoop" disabled={this.state.disabled}>Close</NavDropdown.Item>
+					        <NavDropdown.Item as={StyledLink} to="/modifyLoop" disabled={this.state.disabled}>Modify</NavDropdown.Item>
+						    <NavDropdown.Divider />
+							<NavDropdown.Item as={StyledLink} to="/loopProperties" disabled={this.state.disabled}>Properties</NavDropdown.Item>
+							<NavDropdown.Item as={StyledLink} to="/refreshStatus" disabled={this.state.disabled}>Refresh Status</NavDropdown.Item>
+					</StyledNavDropdown>
+					<StyledNavDropdown title="Loop Operations">
+							<NavDropdown.Item as={StyledLink} to="/submit" disabled={this.state.disabled}>Create and deploy to Policy Engine(SUBMIT)</NavDropdown.Item>
+							<NavDropdown.Item as={StyledLink} to="/stop" disabled={this.state.disabled}>Undeploy from Policy Engine (STOP)</NavDropdown.Item>
+							<NavDropdown.Item as={StyledLink} to="/restart" disabled={this.state.disabled}>ReDeploy to Policy Engine (RESTART)</NavDropdown.Item>
+							<NavDropdown.Item as={StyledLink} to="/delete" disabled={this.state.disabled}>Delete loop instance (DELETE)</NavDropdown.Item>
+							<NavDropdown.Divider />
+							<NavDropdown.Item as={StyledLink} to="/deploy" disabled={this.state.disabled}>Deploy to DCAE (DEPLOY)</NavDropdown.Item>
+							<NavDropdown.Item as={StyledLink} to="/undeploy" disabled={this.state.disabled}>UnDeploy to DCAE (UNDEPLOY)</NavDropdown.Item>
+					</StyledNavDropdown>
+					<StyledNavDropdown title="Help">
+							<StyledNavLink href="https://wiki.onap.org/" target="_blank">Wiki</StyledNavLink>
+							<StyledNavLink href="mailto:onap-discuss@lists.onap.org?subject=CLAMP&body=Please send us suggestions or feature enhancements or defect. If possible, please send us the steps to replicate any defect.">Contact Us</StyledNavLink>
+							<NavDropdown.Item as={StyledLink} to="/userInfo">User Info</NavDropdown.Item>
+					</StyledNavDropdown>
+				</Navbar.Collapse>
+		);
+	}
+}
diff --git a/ui-react/src/components/menu/MenuBar.test.js b/ui-react/src/components/menu/MenuBar.test.js
new file mode 100644
index 000000000..3e96dbf38
--- /dev/null
+++ b/ui-react/src/components/menu/MenuBar.test.js
@@ -0,0 +1,46 @@
+/*-
+ * ============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 MenuBar from './MenuBar';
+
+describe('Verify MenuBar', () => {
+
+	it('Test the render method', () => {
+		const component = shallow(<MenuBar />)
+
+		expect(component).toMatchSnapshot();
+	});
+
+	it('Update loopName', () => {
+		const component = shallow(<MenuBar />)
+		component.setProps({ loopName: "newLoop" });
+		expect(component.state('disabled')).toBe(false);
+	});
+
+	it('Default loopName', () => {
+		const component = shallow(<MenuBar />)
+		component.setProps({ loopName: "Empty (NO loop loaded yet)" });
+		expect(component.state('disabled')).toBe(true);
+	});
+});
diff --git a/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap b/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap
new file mode 100644
index 000000000..92444ea3d
--- /dev/null
+++ b/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap
@@ -0,0 +1,910 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify MenuBar Test the render method 1`] = `
+<NavbarCollapse>
+  <Styled(NavDropdown)
+    title="Loop Templates"
+  >
+    <DropdownItem
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": ComponentStyle {
+            "componentId": "sc-bdVaJa",
+            "isStatic": false,
+            "rules": Array [
+              "
+	color: ",
+              [Function],
+              ";
+	background-color: ",
+              [Function],
+              ";
+	font-weight: normal;
+	display: block;
+	width: 100%;
+	padding: .25rem 1.5rem;
+	clear: both;
+	text-align: inherit;
+	white-space: nowrap;
+	border: 0;
+	:hover {
+		text-decoration: none;
+		background-color: ",
+              [Function],
+              ";
+		color:  ",
+              [Function],
+              ";
+	}
+",
+            ],
+          },
+          "displayName": "Styled(Link)",
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "styledComponentId": "sc-bdVaJa",
+          "target": [Function],
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      disabled={false}
+      to="/ViewLoopTemplatesModal"
+    >
+      View All Templates
+    </DropdownItem>
+  </Styled(NavDropdown)>
+  <Styled(NavDropdown)
+    title="Policy Models"
+  >
+    <DropdownItem
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": ComponentStyle {
+            "componentId": "sc-bdVaJa",
+            "isStatic": false,
+            "rules": Array [
+              "
+	color: ",
+              [Function],
+              ";
+	background-color: ",
+              [Function],
+              ";
+	font-weight: normal;
+	display: block;
+	width: 100%;
+	padding: .25rem 1.5rem;
+	clear: both;
+	text-align: inherit;
+	white-space: nowrap;
+	border: 0;
+	:hover {
+		text-decoration: none;
+		background-color: ",
+              [Function],
+              ";
+		color:  ",
+              [Function],
+              ";
+	}
+",
+            ],
+          },
+          "displayName": "Styled(Link)",
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "styledComponentId": "sc-bdVaJa",
+          "target": [Function],
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      disabled={false}
+      to="/uploadToscaPolicyModal"
+    >
+      Upload Tosca Model
+    </DropdownItem>
+    <DropdownItem
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": ComponentStyle {
+            "componentId": "sc-bdVaJa",
+            "isStatic": false,
+            "rules": Array [
+              "
+	color: ",
+              [Function],
+              ";
+	background-color: ",
+              [Function],
+              ";
+	font-weight: normal;
+	display: block;
+	width: 100%;
+	padding: .25rem 1.5rem;
+	clear: both;
+	text-align: inherit;
+	white-space: nowrap;
+	border: 0;
+	:hover {
+		text-decoration: none;
+		background-color: ",
+              [Function],
+              ";
+		color:  ",
+              [Function],
+              ";
+	}
+",
+            ],
+          },
+          "displayName": "Styled(Link)",
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "styledComponentId": "sc-bdVaJa",
+          "target": [Function],
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      disabled={false}
+      to="/viewToscaPolicyModal"
+    >
+      View Tosca Models
+    </DropdownItem>
+    <DropdownItem
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": ComponentStyle {
+            "componentId": "sc-bdVaJa",
+            "isStatic": false,
+            "rules": Array [
+              "
+	color: ",
+              [Function],
+              ";
+	background-color: ",
+              [Function],
+              ";
+	font-weight: normal;
+	display: block;
+	width: 100%;
+	padding: .25rem 1.5rem;
+	clear: both;
+	text-align: inherit;
+	white-space: nowrap;
+	border: 0;
+	:hover {
+		text-decoration: none;
+		background-color: ",
+              [Function],
+              ";
+		color:  ",
+              [Function],
+              ";
+	}
+",
+            ],
+          },
+          "displayName": "Styled(Link)",
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "styledComponentId": "sc-bdVaJa",
+          "target": [Function],
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      disabled={false}
+      to="/ManageDictionaries"
+    >
+      Manage Metadata Dictionaries
+    </DropdownItem>
+  </Styled(NavDropdown)>
+  <Styled(NavDropdown)
+    title="Loop Instance"
+  >
+    <DropdownItem
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": ComponentStyle {
+            "componentId": "sc-bdVaJa",
+            "isStatic": false,
+            "rules": Array [
+              "
+	color: ",
+              [Function],
+              ";
+	background-color: ",
+              [Function],
+              ";
+	font-weight: normal;
+	display: block;
+	width: 100%;
+	padding: .25rem 1.5rem;
+	clear: both;
+	text-align: inherit;
+	white-space: nowrap;
+	border: 0;
+	:hover {
+		text-decoration: none;
+		background-color: ",
+              [Function],
+              ";
+		color:  ",
+              [Function],
+              ";
+	}
+",
+            ],
+          },
+          "displayName": "Styled(Link)",
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "styledComponentId": "sc-bdVaJa",
+          "target": [Function],
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      disabled={false}
+      to="/createLoop"
+    >
+      Create
+    </DropdownItem>
+    <DropdownItem
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": ComponentStyle {
+            "componentId": "sc-bdVaJa",
+            "isStatic": false,
+            "rules": Array [
+              "
+	color: ",
+              [Function],
+              ";
+	background-color: ",
+              [Function],
+              ";
+	font-weight: normal;
+	display: block;
+	width: 100%;
+	padding: .25rem 1.5rem;
+	clear: both;
+	text-align: inherit;
+	white-space: nowrap;
+	border: 0;
+	:hover {
+		text-decoration: none;
+		background-color: ",
+              [Function],
+              ";
+		color:  ",
+              [Function],
+              ";
+	}
+",
+            ],
+          },
+          "displayName": "Styled(Link)",
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "styledComponentId": "sc-bdVaJa",
+          "target": [Function],
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      disabled={false}
+      to="/openLoop"
+    >
+      Open
+    </DropdownItem>
+    <DropdownItem
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": ComponentStyle {
+            "componentId": "sc-bdVaJa",
+            "isStatic": false,
+            "rules": Array [
+              "
+	color: ",
+              [Function],
+              ";
+	background-color: ",
+              [Function],
+              ";
+	font-weight: normal;
+	display: block;
+	width: 100%;
+	padding: .25rem 1.5rem;
+	clear: both;
+	text-align: inherit;
+	white-space: nowrap;
+	border: 0;
+	:hover {
+		text-decoration: none;
+		background-color: ",
+              [Function],
+              ";
+		color:  ",
+              [Function],
+              ";
+	}
+",
+            ],
+          },
+          "displayName": "Styled(Link)",
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "styledComponentId": "sc-bdVaJa",
+          "target": [Function],
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      disabled={true}
+      to="/closeLoop"
+    >
+      Close
+    </DropdownItem>
+    <DropdownItem
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": ComponentStyle {
+            "componentId": "sc-bdVaJa",
+            "isStatic": false,
+            "rules": Array [
+              "
+	color: ",
+              [Function],
+              ";
+	background-color: ",
+              [Function],
+              ";
+	font-weight: normal;
+	display: block;
+	width: 100%;
+	padding: .25rem 1.5rem;
+	clear: both;
+	text-align: inherit;
+	white-space: nowrap;
+	border: 0;
+	:hover {
+		text-decoration: none;
+		background-color: ",
+              [Function],
+              ";
+		color:  ",
+              [Function],
+              ";
+	}
+",
+            ],
+          },
+          "displayName": "Styled(Link)",
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "styledComponentId": "sc-bdVaJa",
+          "target": [Function],
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      disabled={true}
+      to="/modifyLoop"
+    >
+      Modify
+    </DropdownItem>
+    <DropdownDivider
+      role="separator"
+    />
+    <DropdownItem
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": ComponentStyle {
+            "componentId": "sc-bdVaJa",
+            "isStatic": false,
+            "rules": Array [
+              "
+	color: ",
+              [Function],
+              ";
+	background-color: ",
+              [Function],
+              ";
+	font-weight: normal;
+	display: block;
+	width: 100%;
+	padding: .25rem 1.5rem;
+	clear: both;
+	text-align: inherit;
+	white-space: nowrap;
+	border: 0;
+	:hover {
+		text-decoration: none;
+		background-color: ",
+              [Function],
+              ";
+		color:  ",
+              [Function],
+              ";
+	}
+",
+            ],
+          },
+          "displayName": "Styled(Link)",
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "styledComponentId": "sc-bdVaJa",
+          "target": [Function],
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      disabled={true}
+      to="/loopProperties"
+    >
+      Properties
+    </DropdownItem>
+    <DropdownItem
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": ComponentStyle {
+            "componentId": "sc-bdVaJa",
+            "isStatic": false,
+            "rules": Array [
+              "
+	color: ",
+              [Function],
+              ";
+	background-color: ",
+              [Function],
+              ";
+	font-weight: normal;
+	display: block;
+	width: 100%;
+	padding: .25rem 1.5rem;
+	clear: both;
+	text-align: inherit;
+	white-space: nowrap;
+	border: 0;
+	:hover {
+		text-decoration: none;
+		background-color: ",
+              [Function],
+              ";
+		color:  ",
+              [Function],
+              ";
+	}
+",
+            ],
+          },
+          "displayName": "Styled(Link)",
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "styledComponentId": "sc-bdVaJa",
+          "target": [Function],
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      disabled={true}
+      to="/refreshStatus"
+    >
+      Refresh Status
+    </DropdownItem>
+  </Styled(NavDropdown)>
+  <Styled(NavDropdown)
+    title="Loop Operations"
+  >
+    <DropdownItem
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": ComponentStyle {
+            "componentId": "sc-bdVaJa",
+            "isStatic": false,
+            "rules": Array [
+              "
+	color: ",
+              [Function],
+              ";
+	background-color: ",
+              [Function],
+              ";
+	font-weight: normal;
+	display: block;
+	width: 100%;
+	padding: .25rem 1.5rem;
+	clear: both;
+	text-align: inherit;
+	white-space: nowrap;
+	border: 0;
+	:hover {
+		text-decoration: none;
+		background-color: ",
+              [Function],
+              ";
+		color:  ",
+              [Function],
+              ";
+	}
+",
+            ],
+          },
+          "displayName": "Styled(Link)",
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "styledComponentId": "sc-bdVaJa",
+          "target": [Function],
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      disabled={true}
+      to="/submit"
+    >
+      Create and deploy to Policy Engine(SUBMIT)
+    </DropdownItem>
+    <DropdownItem
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": ComponentStyle {
+            "componentId": "sc-bdVaJa",
+            "isStatic": false,
+            "rules": Array [
+              "
+	color: ",
+              [Function],
+              ";
+	background-color: ",
+              [Function],
+              ";
+	font-weight: normal;
+	display: block;
+	width: 100%;
+	padding: .25rem 1.5rem;
+	clear: both;
+	text-align: inherit;
+	white-space: nowrap;
+	border: 0;
+	:hover {
+		text-decoration: none;
+		background-color: ",
+              [Function],
+              ";
+		color:  ",
+              [Function],
+              ";
+	}
+",
+            ],
+          },
+          "displayName": "Styled(Link)",
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "styledComponentId": "sc-bdVaJa",
+          "target": [Function],
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      disabled={true}
+      to="/stop"
+    >
+      Undeploy from Policy Engine (STOP)
+    </DropdownItem>
+    <DropdownItem
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": ComponentStyle {
+            "componentId": "sc-bdVaJa",
+            "isStatic": false,
+            "rules": Array [
+              "
+	color: ",
+              [Function],
+              ";
+	background-color: ",
+              [Function],
+              ";
+	font-weight: normal;
+	display: block;
+	width: 100%;
+	padding: .25rem 1.5rem;
+	clear: both;
+	text-align: inherit;
+	white-space: nowrap;
+	border: 0;
+	:hover {
+		text-decoration: none;
+		background-color: ",
+              [Function],
+              ";
+		color:  ",
+              [Function],
+              ";
+	}
+",
+            ],
+          },
+          "displayName": "Styled(Link)",
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "styledComponentId": "sc-bdVaJa",
+          "target": [Function],
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      disabled={true}
+      to="/restart"
+    >
+      ReDeploy to Policy Engine (RESTART)
+    </DropdownItem>
+    <DropdownItem
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": ComponentStyle {
+            "componentId": "sc-bdVaJa",
+            "isStatic": false,
+            "rules": Array [
+              "
+	color: ",
+              [Function],
+              ";
+	background-color: ",
+              [Function],
+              ";
+	font-weight: normal;
+	display: block;
+	width: 100%;
+	padding: .25rem 1.5rem;
+	clear: both;
+	text-align: inherit;
+	white-space: nowrap;
+	border: 0;
+	:hover {
+		text-decoration: none;
+		background-color: ",
+              [Function],
+              ";
+		color:  ",
+              [Function],
+              ";
+	}
+",
+            ],
+          },
+          "displayName": "Styled(Link)",
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "styledComponentId": "sc-bdVaJa",
+          "target": [Function],
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      disabled={true}
+      to="/delete"
+    >
+      Delete loop instance (DELETE)
+    </DropdownItem>
+    <DropdownDivider
+      role="separator"
+    />
+    <DropdownItem
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": ComponentStyle {
+            "componentId": "sc-bdVaJa",
+            "isStatic": false,
+            "rules": Array [
+              "
+	color: ",
+              [Function],
+              ";
+	background-color: ",
+              [Function],
+              ";
+	font-weight: normal;
+	display: block;
+	width: 100%;
+	padding: .25rem 1.5rem;
+	clear: both;
+	text-align: inherit;
+	white-space: nowrap;
+	border: 0;
+	:hover {
+		text-decoration: none;
+		background-color: ",
+              [Function],
+              ";
+		color:  ",
+              [Function],
+              ";
+	}
+",
+            ],
+          },
+          "displayName": "Styled(Link)",
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "styledComponentId": "sc-bdVaJa",
+          "target": [Function],
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      disabled={true}
+      to="/deploy"
+    >
+      Deploy to DCAE (DEPLOY)
+    </DropdownItem>
+    <DropdownItem
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": ComponentStyle {
+            "componentId": "sc-bdVaJa",
+            "isStatic": false,
+            "rules": Array [
+              "
+	color: ",
+              [Function],
+              ";
+	background-color: ",
+              [Function],
+              ";
+	font-weight: normal;
+	display: block;
+	width: 100%;
+	padding: .25rem 1.5rem;
+	clear: both;
+	text-align: inherit;
+	white-space: nowrap;
+	border: 0;
+	:hover {
+		text-decoration: none;
+		background-color: ",
+              [Function],
+              ";
+		color:  ",
+              [Function],
+              ";
+	}
+",
+            ],
+          },
+          "displayName": "Styled(Link)",
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "styledComponentId": "sc-bdVaJa",
+          "target": [Function],
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      disabled={true}
+      to="/undeploy"
+    >
+      UnDeploy to DCAE (UNDEPLOY)
+    </DropdownItem>
+  </Styled(NavDropdown)>
+  <Styled(NavDropdown)
+    title="Help"
+  >
+    <Styled(NavLink)
+      href="https://wiki.onap.org/"
+      target="_blank"
+    >
+      Wiki
+    </Styled(NavLink)>
+    <Styled(NavLink)
+      href="mailto:onap-discuss@lists.onap.org?subject=CLAMP&body=Please send us suggestions or feature enhancements or defect. If possible, please send us the steps to replicate any defect."
+    >
+      Contact Us
+    </Styled(NavLink)>
+    <DropdownItem
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": ComponentStyle {
+            "componentId": "sc-bdVaJa",
+            "isStatic": false,
+            "rules": Array [
+              "
+	color: ",
+              [Function],
+              ";
+	background-color: ",
+              [Function],
+              ";
+	font-weight: normal;
+	display: block;
+	width: 100%;
+	padding: .25rem 1.5rem;
+	clear: both;
+	text-align: inherit;
+	white-space: nowrap;
+	border: 0;
+	:hover {
+		text-decoration: none;
+		background-color: ",
+              [Function],
+              ";
+		color:  ",
+              [Function],
+              ";
+	}
+",
+            ],
+          },
+          "displayName": "Styled(Link)",
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "styledComponentId": "sc-bdVaJa",
+          "target": [Function],
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      disabled={false}
+      to="/userInfo"
+    >
+      User Info
+    </DropdownItem>
+  </Styled(NavDropdown)>
+</NavbarCollapse>
+`;