diff --git a/gui-clamp/.gitignore b/gui-clamp/.gitignore
new file mode 100644
index 0000000..a4bc4e7
--- /dev/null
+++ b/gui-clamp/.gitignore
@@ -0,0 +1,26 @@
+# Ignore files and directories that start with .
+.*
+.*/
+
+target
+/bin/
+
+# IntelliJ files
+*.iml
+**/*.iml
+
+# Node, NPM and Yarn files
+node
+node_modules
+package-lock.json
+yarn.lock
+
+# React
+*.log
+logs
+**/*.backup.*
+**/*.back.*
+bower_components
+
+# Exclude .gitignore from ignore list
+!/.gitignore
diff --git a/gui-clamp/pom.xml b/gui-clamp/pom.xml
index 44d2028..a1219e1 100644
--- a/gui-clamp/pom.xml
+++ b/gui-clamp/pom.xml
@@ -16,18 +16,217 @@
 
   SPDX-License-Identifier: Apache-2.0
   ============LICENSE_END=========================================================
--->
+ -->
 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.onap.policy.gui</groupId>
         <artifactId>policy-gui</artifactId>
         <version>2.1.0-SNAPSHOT</version>
     </parent>
-
     <artifactId>gui-clamp</artifactId>
     <packaging>pom</packaging>
     <name>${project.artifactId}</name>
     <description>This module contains the implementation code for the CLAMP GUIs in the Policy Framework</description>
+    <properties>
+        <ui.react.src>ui-react</ui.react.src>
+        <ui.react.lib.src>ui-react-lib</ui.react.lib.src>
+    </properties>
+    <build>
+        <plugins>
+            <plugin>
+                <artifactId>maven-resources-plugin</artifactId>
+                <version>3.2.0</version>
+                <executions>
+                    <execution>
+                        <id>copy-resources-1</id>
+                        <!-- here the phase you need -->
+                        <phase>compile</phase>
+                        <goals>
+                            <goal>copy-resources</goal>
+                        </goals>
+                        <configuration>
+                            <outputDirectory>${project.build.directory}/${ui.react.src}</outputDirectory>
+                            <resources>
+                                <resource>
+                                    <directory>${ui.react.src}</directory>
+                                    <excludes>
+                                        <exclude>node_modules</exclude>
+                                    </excludes>
+                                    <includes>
+                                        <include>src/**</include>
+                                        <include>public/**</include>
+                                        <include>package.json</include>
+                                        <include>package-lock.json</include>
+                                    </includes>
+                                    <filtering>true</filtering>
+                                </resource>
+                            </resources>
+                        </configuration>
+                    </execution>
+                    <execution>
+                        <id>copy-resources-2</id>
+                        <!-- here the phase you need -->
+                        <phase>compile</phase>
+                        <goals>
+                            <goal>copy-resources</goal>
+                        </goals>
+                        <configuration>
+                            <outputDirectory>${project.build.directory}/${ui.react.src}</outputDirectory>
+                            <resources>
+                                <resource>
+                                    <directory>${ui.react.src}</directory>
+                                    <includes>
+                                        <include>src/**</include>
+                                    </includes>
+                                    <excludes>
+                                        <exclude>**/__snapshots__/**</exclude>
+                                        <exclude>**/**.test.js</exclude>
+                                    </excludes>
+                                    <filtering>true</filtering>
+                                </resource>
+                            </resources>
+                        </configuration>
+                    </execution>
+                    <execution>
+                        <id>copy-resources-3</id>
+                        <!-- here the phase you need -->
+                        <phase>compile</phase>
+                        <goals>
+                            <goal>copy-resources</goal>
+                        </goals>
+                        <configuration>
+                            <outputDirectory>${project.build.directory}/${ui.react.lib.src}</outputDirectory>
+                            <resources>
+                                <resource>
+                                    <directory>${ui.react.lib.src}</directory>
+                                    <includes>
+                                        <include>**</include>
+                                    </includes>
+                                    <excludes>
+                                        <exclude>node_modules/**</exclude>
+                                        <exclude>package-lock.json</exclude>
+                                    </excludes>
+                                    <filtering>true</filtering>
+                                </resource>
+                            </resources>
+                        </configuration>
+                    </execution>
+                </executions>
+            </plugin>
+            <plugin>
+                <groupId>com.github.eirslett</groupId>
+                <artifactId>frontend-maven-plugin</artifactId>
+                <version>1.11.3</version>
+                <configuration>
+                    <installDirectory>${project.build.directory}/${ui.react.src}</installDirectory>
+                    <npmDownloadRoot>${repo.npm}</npmDownloadRoot>
+                </configuration>
+                <executions>
+                    <execution>
+                        <id>install node and npm</id>
+                        <goals>
+                            <goal>install-node-and-npm</goal>
+                        </goals>
+                        <phase>generate-sources</phase>
+                        <configuration>
+                            <nodeVersion>v14.17.0</nodeVersion>
+                        </configuration>
+                    </execution>
+                    <execution>
+                        <id>npm_install</id>
+                        <goals>
+                            <goal>npm</goal>
+                        </goals>
+                        <phase>compile</phase>
+                        <configuration>
+                            <workingDirectory>${project.build.directory}/${ui.react.src}</workingDirectory>
+                            <arguments>install</arguments>
+                        </configuration>
+                    </execution>
+                    <execution>
+                        <id>npm_test</id>
+                        <goals>
+                            <goal>npm</goal>
+                        </goals>
+                        <phase>test</phase>
+                        <configuration>
+                            <skip>${maven.test.skip}</skip>
+                            <arguments>run-script test:coverage</arguments>
+                            <workingDirectory>${project.build.directory}/${ui.react.src}</workingDirectory>
+                        </configuration>
+                    </execution>
+                    <execution>
+                        <id>npm_install_lib</id>
+                        <goals>
+                            <goal>npm</goal>
+                        </goals>
+                        <phase>deploy</phase>
+                        <configuration>
+                            <workingDirectory>${project.build.directory}/${ui.react.lib.src}</workingDirectory>
+                            <arguments>install</arguments>
+                        </configuration>
+                    </execution>
+                    <execution>
+                        <id>npm_build_lib</id>
+                        <goals>
+                            <goal>npm</goal>
+                        </goals>
+                        <phase>deploy</phase>
+                        <configuration>
+                            <workingDirectory>${project.build.directory}/${ui.react.lib.src}</workingDirectory>
+                            <arguments>run build</arguments>
+                        </configuration>
+                    </execution>
+                    <execution>
+                        <id>npm_publish</id>
+                        <goals>
+                            <goal>npm</goal>
+                        </goals>
+                        <phase>deploy</phase>
+                        <configuration>
+                            <workingDirectory>${project.build.directory}/${ui.react.lib.src}</workingDirectory>
+                            <arguments>publish</arguments>
+                        </configuration>
+                    </execution>
+                </executions>
+            </plugin>
+            <plugin>
+                <groupId>org.apache.maven.plugins</groupId>
+                <artifactId>maven-clean-plugin</artifactId>
+                <version>3.0.0</version>
+                <configuration>
+                    <filesets>
+                        <fileset>
+                            <directory>${ui.react.lib.src}/node</directory>
+                        </fileset>
+                        <fileset>
+                            <directory>${ui.react.src}/node</directory>
+                        </fileset>
+                        <fileset>
+                            <directory>${ui.react.src}/node_modules</directory>
+                        </fileset>
+                        <fileset>
+                            <directory>${ui.react.lib.src}/node_modules</directory>
+                        </fileset>
+                    </filesets>
+                </configuration>
+            </plugin>
+            <plugin>
+                <groupId>org.apache.maven.plugins</groupId>
+                <artifactId>maven-compiler-plugin</artifactId>
+                <version>3.8.1</version>
+                <configuration>
+                    <source>11</source>
+                    <target>11</target>
+                </configuration>
+            </plugin>
+            <plugin>
+                <groupId>org.codehaus.mojo</groupId>
+                <artifactId>versions-maven-plugin</artifactId>
+                <version>1.3.1</version>
+            </plugin>
+        </plugins>
+    </build>
 </project>
diff --git a/gui-clamp/ui-react-lib/libExportExclusions.dat b/gui-clamp/ui-react-lib/libExportExclusions.dat
new file mode 100644
index 0000000..7194fc2
--- /dev/null
+++ b/gui-clamp/ui-react-lib/libExportExclusions.dat
@@ -0,0 +1,4 @@
+./src/theme/globalStyle.js
+./src/index.js
+./src/setupTests.js
+./src/OnapClamp.js
diff --git a/gui-clamp/ui-react-lib/libIndex.js b/gui-clamp/ui-react-lib/libIndex.js
new file mode 100644
index 0000000..46c331f
--- /dev/null
+++ b/gui-clamp/ui-react-lib/libIndex.js
@@ -0,0 +1,54 @@
+/*-
+ * ============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============================================
+ * ===================================================================
+ *
+ */
+
+export { default as CsvToJson } from './src/utils/CsvToJson';
+export { default as CreateLoopModal } from './src/components/dialogs/Loop/CreateLoopModal';
+export { default as DeployLoopModal } from './src/components/dialogs/Loop/DeployLoopModal';
+export { default as LoopActionService } from './src/api/LoopActionService';
+export { default as LoopCache } from './src/api/LoopCache';
+export { default as PoliciesListCache } from './src/api/PoliciesListCache';
+export { default as LoopLogs } from './src/components/loop_viewer/logs/LoopLogs';
+export { default as LoopPropertiesModal } from './src/components/dialogs/Loop/LoopPropertiesModal';
+export { default as LoopService } from './src/api/LoopService';
+export { default as PolicyService } from './src/api/PolicyService';
+export { default as LoopStatus } from './src/components/loop_viewer/status/LoopStatus';
+export { default as LoopUI } from './src/LoopUI';
+export { default as ManageDictionaries } from './src/components/dialogs/ManageDictionaries/ManageDictionaries';
+export { default as MenuBar } from './src/components/menu/MenuBar';
+export { default as ModifyLoopModal } from './src/components/dialogs/Loop/ModifyLoopModal';
+export { default as NotFound } from './src/NotFound';
+export { default as OnapConstants } from './src/utils/OnapConstants';
+export { default as OnapUtils } from './src/utils/OnapUtils';
+export { default as OpenLoopModal } from './src/components/dialogs/Loop/OpenLoopModal';
+export { default as PerformActions } from './src/components/dialogs/PerformActions';
+export { default as PolicyModal } from './src/components/dialogs/Policy/PolicyModal';
+export { default as ToscaViewer } from './src/components/dialogs/Policy/ToscaViewer';
+export { default as PolicyEditor } from './src/components/dialogs/Policy/PolicyEditor';
+export { default as PolicyToscaService } from './src/api/PolicyToscaService';
+export { default as RefreshStatus } from './src/components/dialogs/RefreshStatus';
+export { default as SvgGenerator } from './src/components/loop_viewer/svg/SvgGenerator';
+export { default as TemplateService } from './src/api/TemplateService';
+export { default as UserInfoModal } from './src/components/dialogs/UserInfoModal';
+export { default as UserService } from './src/api/UserService';
+export { default as ViewLoopTemplatesModal } from './src/components/dialogs/Tosca/ViewLoopTemplatesModal';
+export { default as ViewAllPolicies } from './src/components/dialogs/Policy/ViewAllPolicies';
diff --git a/gui-clamp/ui-react-lib/package.json b/gui-clamp/ui-react-lib/package.json
new file mode 100644
index 0000000..b1efe2f
--- /dev/null
+++ b/gui-clamp/ui-react-lib/package.json
@@ -0,0 +1,54 @@
+{
+	"name": "onap-policy-clamp-ui-lib",
+	"version": "${project.version}",
+	"description": "ONAP Policy Clamp UI Library",
+	"author": "ONAP Policy Team",
+	"license": "Apache-2.0",
+	"publishConfig": {
+		"registry": "${npm.publish.url}"
+	},
+	"main": "dist/index.js",
+	"module": "dist/esindex.js",
+	"scripts": {
+		"build": "rollup -c"
+	},
+	"files": [
+		"dist"
+	],
+	"peerDependencies": {
+		"@json-editor/json-editor": "1.4.0-beta.0",
+		"@material-ui/core": "4.6.0",
+		"@material-ui/icons": "4.5.1",
+		"bootstrap-css-only": "4.3.1",
+		"material-table": "1.53.0",
+		"react": "16.9.0",
+		"react-bootstrap": "1.0.0-beta.14",
+		"react-dom": "16.9.0",
+		"react-router-dom": "5.0.1",
+		"react-scripts": "3.1.1",
+		"react-select": "3.0.8",
+		"rollup": "^1.29.1",
+		"styled-components": "4.3.2"
+	},
+	"devDependencies": {
+		"@babel/cli": "7.7.5",
+		"@babel/core": "7.7.5",
+		"@babel/helper-plugin-utils": "7.0.0",
+		"@babel/plugin-external-helpers": "^7.7.4",
+		"@babel/plugin-proposal-class-properties": "7.5.5",
+		"@babel/plugin-transform-runtime": "7.7.6",
+		"@babel/preset-env": "7.5.5",
+		"@babel/preset-react": "7.0.0",
+		"rollup": "1.29.1",
+		"@rollup/plugin-commonjs": "^11.0.1",
+		"@rollup/plugin-image": "2.0.0",
+		"@rollup/plugin-node-resolve": "7.0.0",
+		"@rollup/plugin-replace": "2.2.1",
+		"@rollup/plugin-url": "4.0.0",
+		"@svgr/rollup": "5.1.0",
+		"babel-plugin-external-helpers": "6.22.0",
+		"rollup-plugin-babel": "4.3.3",
+		"rollup-plugin-peer-deps-external": "2.2.0",
+		"rollup-plugin-postcss": "2.0.3"
+	}
+}
diff --git a/gui-clamp/ui-react-lib/rollup.config.js b/gui-clamp/ui-react-lib/rollup.config.js
new file mode 100644
index 0000000..c671779
--- /dev/null
+++ b/gui-clamp/ui-react-lib/rollup.config.js
@@ -0,0 +1,48 @@
+import babel from 'rollup-plugin-babel'
+import commonjs from '@rollup/plugin-commonjs'
+import postcss from 'rollup-plugin-postcss'
+import resolve from '@rollup/plugin-node-resolve'
+import external from 'rollup-plugin-peer-deps-external'
+import img from '@rollup/plugin-image'
+
+import pkg from './package.json'
+
+export default {
+	input: './libIndex.js',
+	output: [
+		{
+			file: pkg.main,
+			format: 'cjs',
+			sourcemap: true
+		},
+		{
+			file: pkg.module,
+			format: 'es',
+			sourcemap: true
+		}
+	],
+	plugins: [
+		img(),
+		external(),
+		postcss({
+			modules: true
+		}),
+		babel({
+			exclude: 'node_modules/**',
+			presets: [
+	
+				"@babel/preset-env", {},
+				"@babel/preset-react", {}
+			],
+			plugins: [
+					[
+						"@babel/plugin-proposal-class-properties",
+						{
+							"loose": true
+						}
+					]
+			]
+		}),
+		resolve({ preferBuiltins: true, mainFields: ['browser'] })
+	]
+}
diff --git a/gui-clamp/ui-react/package.json b/gui-clamp/ui-react/package.json
new file mode 100644
index 0000000..8d11044
--- /dev/null
+++ b/gui-clamp/ui-react/package.json
@@ -0,0 +1,98 @@
+{
+	"name": "onap-policy-clamp-ui",
+	"version": "${project.version}",
+	"description": "ONAP Policy Clamp UI",
+	"author": "ONAP Policy Team",
+	"license": "Apache-2.0",
+	"publishConfig": {
+		"registry": "${npm.publish.url}"
+	},
+	"main": "index.js",
+	"proxy": "https://localhost:8443",
+	"scripts": {
+		"start": "HTTPS=true react-scripts start",
+		"build": "react-scripts build",
+		"test": "jest",
+		"test:watch": "jest --watch",
+		"test:coverage": "jest --coverage",
+		"eject": "react-scripts eject"
+	},
+	"files": [
+		"src/*.js",
+		"src/*.png",
+		"src/api",
+		"src/components",
+		"src/theme"
+	],
+	"dependencies": {
+		"@json-editor/json-editor": "2.5.2",
+		"@fortawesome/fontawesome-free": "5.15.2",
+		"react": "17.0.1",
+		"react-dom": "17.0.1",
+		"react-scripts": "4.0.3",
+		"react-bootstrap": "1.5.2",
+		"bootstrap-css-only": "4.3.1",
+		"styled-components": "5.2.1",
+		"react-router-dom": "5.2.0",
+		"@material-ui/core": "4.11.3",
+		"@material-ui/icons": "4.11.2",
+		"material-table": "1.68.1",
+		"react-select": "4.2.1",
+		"react-uuid": "1.0.2"
+	},
+	"devDependencies": {
+		"jest": "26.6.0",
+		"babel-jest": "26.6.0",
+		"@babel/preset-env": "7.13.10",
+		"@babel/preset-react": "7.12.13",
+		"@babel/plugin-proposal-class-properties": "7.13.0",
+		"enzyme": "3.11.0",
+		"enzyme-adapter-react-17-updated": "1.0.2",
+		"enzyme-to-json": "3.6.1",
+		"jest-fetch-mock": "3.0.3"
+	},
+	"browserslist": [
+		">0.2%",
+		"not dead",
+		"not ie <= 11",
+		"not op_mini all"
+	],
+	"jest": {
+		"verbose": true,
+		"coverageDirectory": "${project.build.directory}/${ui.react.src}/coverage",
+		"collectCoverageFrom": [
+			"**/*.{js,jsx}"
+		],
+		"rootDir": "${project.build.directory}/${ui.react.src}",
+		"coverageReporters": [
+			"lcov"
+		],
+		"moduleNameMapper": {
+			"\\.(css|png)$": "identity-obj-proxy"
+		},
+		"setupFiles": [
+			"./src/setupTests.js"
+		],
+		"snapshotSerializers": [
+			"enzyme-to-json/serializer"
+		]
+	},
+	"babel": {
+		"presets": [
+			"@babel/preset-env",
+			"@babel/preset-react"
+		],
+		"plugins": [
+			[
+				"@babel/plugin-proposal-class-properties",
+				{
+					"loose": true
+				}
+			],
+			[
+				"@babel/plugin-transform-runtime"
+			]
+		]
+	}
+}
+
diff --git a/gui-clamp/ui-react/public/index.html b/gui-clamp/ui-react/public/index.html
new file mode 100644
index 0000000..bab3e7a
--- /dev/null
+++ b/gui-clamp/ui-react/public/index.html
@@ -0,0 +1,40 @@
+<!--
+  ============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============================================
+  ===================================================================
+
+  -->
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport"
+    content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<meta name="theme-color" content="#000000">
+<link rel="manifest" href="manifest.json">
+<link rel="shortcut icon" href="onap.ico">
+
+<title>Clamp Designer UI</title>
+</head>
+<body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+</body>
+</html>
diff --git a/gui-clamp/ui-react/public/manifest.json b/gui-clamp/ui-react/public/manifest.json
new file mode 100644
index 0000000..8210c4e
--- /dev/null
+++ b/gui-clamp/ui-react/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "Clamp Designer UI",
+  "name": "Clamp Designer UI",
+  "icons": [
+    {
+      "src": "onap.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/gui-clamp/ui-react/public/onap.ico b/gui-clamp/ui-react/public/onap.ico
new file mode 100644
index 0000000..85e168a
--- /dev/null
+++ b/gui-clamp/ui-react/public/onap.ico
Binary files differ
diff --git a/gui-clamp/ui-react/src/LoopUI.js b/gui-clamp/ui-react/src/LoopUI.js
new file mode 100644
index 0000000..d998762
--- /dev/null
+++ b/gui-clamp/ui-react/src/LoopUI.js
@@ -0,0 +1,420 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP CLAMP
+ * ================================================================================
+ * Copyright (C) 2019, 2021 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 MenuBar from './components/menu/MenuBar';
+import Navbar from 'react-bootstrap/Navbar';
+import logo from './logo.png';
+import { GlobalClampStyle } from './theme/globalStyle.js';
+import OnapConstants from './utils/OnapConstants';
+
+import SvgGenerator from './components/loop_viewer/svg/SvgGenerator';
+import LoopLogs from './components/loop_viewer/logs/LoopLogs';
+import LoopStatus from './components/loop_viewer/status/LoopStatus';
+import UserService from './api/UserService';
+import LoopCache from './api/LoopCache';
+import LoopActionService from './api/LoopActionService';
+
+import { Route } from 'react-router-dom'
+import CreateLoopModal from './components/dialogs/Loop/CreateLoopModal';
+import OpenLoopModal from './components/dialogs/Loop/OpenLoopModal';
+import ModifyLoopModal from './components/dialogs/Loop/ModifyLoopModal';
+import PolicyModal from './components/dialogs/Policy/PolicyModal';
+import ViewAllPolicies from './components/dialogs/Policy/ViewAllPolicies';
+import LoopPropertiesModal from './components/dialogs/Loop/LoopPropertiesModal';
+import UserInfoModal from './components/dialogs/UserInfoModal';
+import LoopService from './api/LoopService';
+import ViewLoopTemplatesModal from './components/dialogs/Tosca/ViewLoopTemplatesModal';
+import ManageDictionaries from './components/dialogs/ManageDictionaries/ManageDictionaries';
+import PerformAction from './components/dialogs/PerformActions';
+import RefreshStatus from './components/dialogs/RefreshStatus';
+import DeployLoopModal from './components/dialogs/Loop/DeployLoopModal';
+import Alert from 'react-bootstrap/Alert';
+import Spinner from 'react-bootstrap/Spinner';
+
+import { Link } from 'react-router-dom';
+
+const StyledMainDiv = styled.div`
+  background-color: ${ props => props.theme.backgroundColor };
+`
+
+const StyledSpinnerDiv = styled.div`
+  justify-content: center !important;
+  display: flex !important;
+`;
+
+const ProjectNameStyled = styled.a`
+  vertical-align: middle;
+  padding-left: 30px;
+  font-size: 36px;
+  font-weight: bold;
+`
+
+const StyledRouterLink = styled(Link)`
+  color: ${ props => props.theme.menuFontColor };
+  background-color: ${ props => props.theme.backgroundColor };
+`
+
+const StyledLoginInfo = styled.a`
+  color: ${ props => props.theme.menuFontColor };
+  background-color: ${ props => props.theme.backgroundColor };
+`
+
+const LoopViewDivStyled = styled.div`
+  height: 100%;
+  overflow: hidden;
+  margin-left: 10px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  color: ${ props => props.theme.loopViewerFontColor };
+  background-color: ${ props => props.theme.loopViewerBackgroundColor };
+  border: 1px solid transparent;
+  border-color: ${ props => props.theme.loopViewerHeaderBackgroundColor };
+`
+
+const LoopViewHeaderDivStyled = styled.div`
+  background-color: ${ props => props.theme.loopViewerHeaderBackgroundColor };
+  padding: 10px 10px;
+  color: ${ props => props.theme.loopViewerHeaderFontColor };
+`
+
+const LoopViewBodyDivStyled = styled.div`
+  background-color: ${ props => (props.theme.loopViewerBackgroundColor) };
+  padding: 10px 10px;
+  color: ${ props => (props.theme.loopViewerHeaderFontColor) };
+  height: 95%;
+`
+
+export default class LoopUI extends React.Component {
+
+  state = {
+    userName: null,
+    loopName: OnapConstants.defaultLoopName,
+    loopCache: new LoopCache({}),
+    showSucAlert: false,
+    showFailAlert: false,
+    busyLoadingCount: 0
+  };
+
+  constructor() {
+    super();
+    this.getUser = this.getUser.bind(this);
+    this.updateLoopCache = this.updateLoopCache.bind(this);
+    this.loadLoop = this.loadLoop.bind(this);
+    this.closeLoop = this.closeLoop.bind(this);
+    this.showSucAlert = this.showSucAlert.bind(this);
+    this.showFailAlert = this.showFailAlert.bind(this);
+    this.disableAlert = this.disableAlert.bind(this);
+    this.setBusyLoading = this.setBusyLoading.bind(this);
+    this.clearBusyLoading = this.clearBusyLoading.bind(this);
+    this.isBusyLoading = this.isBusyLoading.bind(this);
+    this.renderGlobalStyle = this.renderGlobalStyle.bind(this);
+    this.renderSvg = this.renderSvg.bind(this);
+  }
+
+  componentWillMount() {
+    this.getUser();
+  }
+
+  getUser() {
+    UserService.login().then(user => {
+      this.setState({ userName: user })
+    });
+  }
+
+  renderMenuNavBar() {
+    return (
+      <MenuBar loopName={ this.state.loopName }/>
+    );
+  }
+
+  renderUserLoggedNavBar() {
+    return (
+      <Navbar.Text>
+        <StyledLoginInfo>Signed in as: </StyledLoginInfo>
+        <StyledRouterLink to="/userInfo">{ this.state.userName }</StyledRouterLink>
+      </Navbar.Text>
+    );
+  }
+
+  renderLogoNavBar() {
+    return (
+      <Navbar.Brand>
+        <img height="50px" width="234px" src={ logo } alt=""/>
+        <ProjectNameStyled>CLAMP</ProjectNameStyled>
+      </Navbar.Brand>
+    );
+  }
+
+  renderAlertBar() {
+    return (
+      <div>
+        <Alert variant="success" show={ this.state.showSucAlert } onClose={ this.disableAlert } dismissible>
+          { this.state.showMessage }
+        </Alert>
+        <Alert variant="danger" show={ this.state.showFailAlert } onClose={ this.disableAlert } dismissible>
+          { this.state.showMessage }
+        </Alert>
+      </div>
+    );
+  }
+
+  renderNavBar() {
+    return (
+      <Navbar>
+        { this.renderLogoNavBar() }
+        <Navbar.Toggle aria-controls="responsive-navbar-nav"/>
+        { this.renderMenuNavBar() }
+        { this.renderUserLoggedNavBar() }
+      </Navbar>
+    );
+  }
+
+  renderLoopViewHeader() {
+    return (
+      <LoopViewHeaderDivStyled>
+        Loop Viewer - { this.state.loopName } - ({ this.state.loopCache.getTemplateName() })
+      </LoopViewHeaderDivStyled>
+    );
+  }
+
+  renderSvg() {
+    return (
+      <SvgGenerator loopCache={ this.state.loopCache } clickable={ true } generatedFrom={ SvgGenerator.GENERATED_FROM_INSTANCE } isBusyLoading={ this.isBusyLoading }/>
+    )
+  }
+
+  renderLoopViewBody() {
+    return (
+      <LoopViewBodyDivStyled>
+        { this.renderSvg() }
+        <LoopStatus loopCache={ this.state.loopCache }/>
+        <LoopLogs loopCache={ this.state.loopCache }/>
+      </LoopViewBodyDivStyled>
+    );
+  }
+
+  getLoopCache() {
+    return this.state.loopCache;
+
+  }
+
+  renderLoopViewer() {
+    return (
+      <LoopViewDivStyled>
+        { this.renderLoopViewHeader() }
+        { this.renderLoopViewBody() }
+      </LoopViewDivStyled>
+    );
+  }
+
+  updateLoopCache(loopJson) {
+
+    // If call with an empty object for loopJson, this is a reset to empty
+    // from someplace like PerformActions for the case where we are "deleting"
+    // a Control Loop model. Set the loopName to the default.
+
+    if (loopJson === null) {
+      this.setState({ loopName: OnapConstants.defaultLoopName });
+      this.setState({ loopCache: new LoopCache({}) });
+    } else {
+      this.setState({ loopCache: new LoopCache(loopJson) });
+      this.setState({ loopName: this.state.loopCache.getLoopName() });
+    }
+    console.info(this.state.loopName + " loop loaded successfully");
+  }
+
+  showSucAlert(message) {
+    this.setState({ showSucAlert: true, showMessage: message });
+  }
+
+  showFailAlert(message) {
+    this.setState({ showFailAlert: true, showMessage: message });
+  }
+
+  disableAlert() {
+    this.setState({ showSucAlert: false, showFailAlert: false });
+  }
+
+  loadLoop(loopName) {
+    this.setBusyLoading();
+    LoopService.getLoop(loopName).then(loop => {
+      console.debug("Updating loopCache");
+      LoopActionService.refreshStatus(loopName).then(data => {
+        this.updateLoopCache(data);
+        this.clearBusyLoading();
+        this.props.history.push('/');
+      })
+        .catch(error => {
+          this.updateLoopCache(loop);
+          this.clearBusyLoading();
+          this.props.history.push('/');
+        });
+    });
+  }
+
+  setBusyLoading() {
+    this.setState((state, props) => ({ busyLoadingCount: ++state.busyLoadingCount }));
+  }
+
+  clearBusyLoading() {
+    this.setState((state, props) => ({ busyLoadingCount: --state.busyLoadingCount }));
+  }
+
+  isBusyLoading() {
+    if (this.state.busyLoadingCount === 0) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  closeLoop() {
+    this.setState({ loopCache: new LoopCache({}), loopName: OnapConstants.defaultLoopName });
+    this.props.history.push('/');
+  }
+
+  renderRoutes() {
+    return (
+      <React.Fragment>
+        <Route path="/viewLoopTemplatesModal" render={ (routeProps) => (<ViewLoopTemplatesModal { ...routeProps } />) }/>
+        <Route path="/manageDictionaries" render={ (routeProps) => (<ManageDictionaries { ...routeProps } />) }/>
+        <Route path="/viewAllPolicies" render={ (routeProps) => (<ViewAllPolicies { ...routeProps } />) }/>
+        <Route path="/policyModal/:policyInstanceType/:policyName" render={ (routeProps) => (<PolicyModal { ...routeProps }
+                                                                                                          loopCache={ this.getLoopCache() }
+                                                                                                          loadLoopFunction={ this.loadLoop }/>) }
+        />
+        <Route path="/createLoop" render={ (routeProps) => (<CreateLoopModal { ...routeProps }
+                                                                             loadLoopFunction={ this.loadLoop }/>) }
+        />
+        <Route path="/openLoop" render={ (routeProps) => (<OpenLoopModal { ...routeProps }
+                                                                         loadLoopFunction={ this.loadLoop }/>) }
+        />
+        <Route path="/loopProperties" render={ (routeProps) => (<LoopPropertiesModal { ...routeProps }
+                                                                                     loopCache={ this.getLoopCache() }
+                                                                                     loadLoopFunction={ this.loadLoop }/>) }
+        />
+        <Route path="/modifyLoop" render={ (routeProps) => (<ModifyLoopModal { ...routeProps }
+                                                                             loopCache={ this.getLoopCache() }
+                                                                             loadLoopFunction={ this.loadLoop }/>) }
+        />
+
+        <Route path="/userInfo" render={ (routeProps) => (<UserInfoModal { ...routeProps } />) }/>
+        <Route path="/closeLoop" render={ this.closeLoop }/>
+
+        <Route path="/submit" render={ (routeProps) => (<PerformAction { ...routeProps }
+                                                                       loopAction="submit"
+                                                                       loopCache={ this.getLoopCache() }
+                                                                       updateLoopFunction={ this.updateLoopCache }
+                                                                       showSucAlert={ this.showSucAlert }
+                                                                       showFailAlert={ this.showFailAlert }
+                                                                       setBusyLoading={ this.setBusyLoading }
+                                                                       clearBusyLoading={ this.clearBusyLoading }/>) }
+        />
+        <Route path="/stop" render={ (routeProps) => (<PerformAction { ...routeProps }
+                                                                     loopAction="stop"
+                                                                     loopCache={ this.getLoopCache() }
+                                                                     updateLoopFunction={ this.updateLoopCache }
+                                                                     showSucAlert={ this.showSucAlert }
+                                                                     showFailAlert={ this.showFailAlert }
+                                                                     setBusyLoading={ this.setBusyLoading }
+                                                                     clearBusyLoading={ this.clearBusyLoading }/>) }
+        />
+        <Route path="/restart" render={ (routeProps) => (<PerformAction { ...routeProps }
+                                                                        loopAction="restart"
+                                                                        loopCache={ this.getLoopCache() }
+                                                                        updateLoopFunction={ this.updateLoopCache }
+                                                                        showSucAlert={ this.showSucAlert }
+                                                                        showFailAlert={ this.showFailAlert }
+                                                                        setBusyLoading={ this.setBusyLoading }
+                                                                        clearBusyLoading={ this.clearBusyLoading }/>) }
+        />
+        <Route path="/delete" render={ (routeProps) => (<PerformAction { ...routeProps }
+                                                                       loopAction="delete"
+                                                                       loopCache={ this.getLoopCache() }
+                                                                       updateLoopFunction={ this.updateLoopCache }
+                                                                       showSucAlert={ this.showSucAlert }
+                                                                       showFailAlert={ this.showFailAlert }
+                                                                       setBusyLoading={ this.setBusyLoading }
+                                                                       clearBusyLoading={ this.clearBusyLoading }/>) }
+        />
+        <Route path="/undeploy" render={ (routeProps) => (<PerformAction { ...routeProps }
+                                                                         loopAction="undeploy"
+                                                                         loopCache={ this.getLoopCache() }
+                                                                         updateLoopFunction={ this.updateLoopCache }
+                                                                         showSucAlert={ this.showSucAlert }
+                                                                         showFailAlert={ this.showFailAlert }
+                                                                         setBusyLoading={ this.setBusyLoading }
+                                                                         clearBusyLoading={ this.clearBusyLoading }/>) }
+        />
+        <Route path="/deploy" render={ (routeProps) => (<DeployLoopModal { ...routeProps }
+                                                                         loopCache={ this.getLoopCache() }
+                                                                         updateLoopFunction={ this.updateLoopCache }
+                                                                         showSucAlert={ this.showSucAlert }
+                                                                         showFailAlert={ this.showFailAlert }/>) }
+        />
+        <Route path="/refreshStatus" render={ (routeProps) => (<RefreshStatus { ...routeProps }
+                                                                              loopCache={ this.getLoopCache() }
+                                                                              updateLoopFunction={ this.updateLoopCache }
+                                                                              showSucAlert={ this.showSucAlert }
+                                                                              showFailAlert={ this.showFailAlert }/>) }
+        />
+      </React.Fragment>
+    );
+  }
+
+  renderGlobalStyle() {
+    return (
+      <GlobalClampStyle/>
+    );
+  };
+
+
+  renderSpinner() {
+    if (this.isBusyLoading()) {
+      return (
+        <StyledSpinnerDiv>
+          <Spinner animation="border" role="status">
+            <span className="sr-only">Loading...</span>
+          </Spinner>
+        </StyledSpinnerDiv>
+      );
+    } else {
+      return (<div></div>);
+    }
+  }
+
+  render() {
+    return (
+      <StyledMainDiv id="main_div">
+        { this.renderGlobalStyle() }
+        { this.renderRoutes() }
+        { this.renderSpinner() }
+        { this.renderAlertBar() }
+        { this.renderNavBar() }
+        { this.renderLoopViewer() }
+      </StyledMainDiv>
+    );
+  }
+}
diff --git a/gui-clamp/ui-react/src/LoopUI.test.js b/gui-clamp/ui-react/src/LoopUI.test.js
new file mode 100644
index 0000000..47ade44
--- /dev/null
+++ b/gui-clamp/ui-react/src/LoopUI.test.js
@@ -0,0 +1,173 @@
+/*-
+ * ============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 LoopUI from './LoopUI';
+import OnapConstants from './utils/OnapConstants';
+
+import LoopCache from './api/LoopCache';
+import LoopActionService from './api/LoopActionService';
+import LoopService from './api/LoopService';
+
+describe('Verify LoopUI', () => {
+  beforeEach(() => {
+    fetch.resetMocks();
+    fetch.mockImplementation(() => {
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        text: () => "testUser"
+
+      });
+    });
+  })
+
+  const loopCache = new LoopCache({
+    "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
+    "components": {
+      "POLICY": {
+        "componentState": {
+          "stateName": "UNKNOWN",
+          "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', async () => {
+    const flushPromises = () => new Promise(setImmediate);
+
+    const component = shallow(<LoopUI/>)
+    component.setState({
+      loopName: "testLoopName",
+      showSucAlert: false,
+      showFailAlert: false
+    });
+    await flushPromises();
+    expect(component).toMatchSnapshot();
+  });
+
+  test('Test closeLoop method', () => {
+    const historyMock = { push: jest.fn() };
+    const component = shallow(<LoopUI history={ historyMock }/>)
+    const instance = component.instance();
+    instance.closeLoop();
+
+    expect(component.state('loopName')).toEqual(OnapConstants.defaultLoopName);
+    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
+  })
+
+  test('Test loadLoop method refresh suc', async () => {
+    const historyMock = { push: jest.fn() };
+    LoopService.getLoop = jest.fn().mockImplementation(() => {
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        text: () => {
+        }
+      });
+    });
+
+    LoopActionService.refreshStatus = jest.fn().mockImplementation(() => {
+      return Promise.resolve({ name: "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca" });
+    });
+
+    const flushPromises = () => new Promise(setImmediate);
+    const component = shallow(<LoopUI history={ historyMock }/>)
+    const instance = component.instance();
+    instance.loadLoop("LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca");
+
+    await flushPromises();
+
+    const resLoopCache = instance.getLoopCache();
+
+    expect(resLoopCache.getComponentStates()).toBeUndefined();
+    expect(component.state('loopName')).toEqual("LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca");
+  })
+
+  test('Test loadLoop method refresh fail', async () => {
+    const historyMock = { push: jest.fn() };
+    LoopService.getLoop = jest.fn().mockImplementation(() => {
+      return Promise.resolve({
+        name: "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
+        "components": {
+          "POLICY": {
+            "componentState": {
+              "stateName": "UNKNOWN",
+              "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"
+            }
+          }
+        }
+      });
+    });
+
+    LoopActionService.refreshStatus = jest.fn().mockImplementation(() => {
+      return Promise.reject({ error: "whatever" });
+    });
+
+    const flushPromises = () => new Promise(setImmediate);
+    const component = shallow(<LoopUI history={ historyMock }/>)
+    const instance = component.instance();
+    instance.loadLoop("LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca");
+
+    await flushPromises();
+
+    const resLoopCache = instance.getLoopCache();
+
+    expect(resLoopCache).toEqual(loopCache);
+    expect(component.state('loopName')).toEqual("LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca");
+  })
+
+  test('Test alert methods', () => {
+    const component = shallow(<LoopUI/>)
+    expect(component.state('showSucAlert')).toEqual(false);
+
+    const instance = component.instance();
+    instance.showSucAlert("testAlert");
+    expect(component.state('showSucAlert')).toEqual(true);
+    expect(component.state('showFailAlert')).toEqual(false);
+    expect(component.state('showMessage')).toEqual("testAlert");
+
+    instance.disableAlert();
+
+    expect(component.state('showSucAlert')).toEqual(false);
+    expect(component.state('showFailAlert')).toEqual(false);
+
+    instance.showFailAlert("testAlert2");
+    expect(component.state('showSucAlert')).toEqual(false);
+    expect(component.state('showFailAlert')).toEqual(true);
+    expect(component.state('showMessage')).toEqual("testAlert2");
+  })
+});
diff --git a/gui-clamp/ui-react/src/NotFound.js b/gui-clamp/ui-react/src/NotFound.js
new file mode 100644
index 0000000..fb6d10a
--- /dev/null
+++ b/gui-clamp/ui-react/src/NotFound.js
@@ -0,0 +1,36 @@
+/*-
+ * ============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'
+
+
+export default class NotFound extends React.Component {
+  render() {
+    return (
+      <div id='main'>
+        <div class="divRow"><b>Page Not Found!</b></div>
+        <div class="divRow">Please cick <a href="/">here</a> to go back to the main page.</div>
+      </div>
+
+    );
+  }
+}
diff --git a/gui-clamp/ui-react/src/NotFound.test.js b/gui-clamp/ui-react/src/NotFound.test.js
new file mode 100644
index 0000000..3b4dcb0
--- /dev/null
+++ b/gui-clamp/ui-react/src/NotFound.test.js
@@ -0,0 +1,36 @@
+/*-
+ * ============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 NotFound from './NotFound';
+
+describe('Verify OnapClamp', () => {
+
+  it('Test the render method', () => {
+
+    const component = shallow(<NotFound/>)
+
+    expect(component).toMatchSnapshot();
+  });
+
+});
diff --git a/gui-clamp/ui-react/src/OnapClamp.js b/gui-clamp/ui-react/src/OnapClamp.js
new file mode 100644
index 0000000..b8615ac
--- /dev/null
+++ b/gui-clamp/ui-react/src/OnapClamp.js
@@ -0,0 +1,39 @@
+/*-
+ * ============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 LoopUI from './LoopUI'
+import { ThemeProvider } from 'styled-components';
+import { DefaultClampTheme } from './theme/globalStyle.js';
+
+export default class OnapClamp extends LoopUI {
+
+  render() {
+    console.info("Onap Clamp UI starting");
+    return (
+      <ThemeProvider theme={ DefaultClampTheme }>
+        { super.render() }
+      </ThemeProvider>);
+  }
+}
+
diff --git a/gui-clamp/ui-react/src/OnapClamp.test.js b/gui-clamp/ui-react/src/OnapClamp.test.js
new file mode 100644
index 0000000..c711a95
--- /dev/null
+++ b/gui-clamp/ui-react/src/OnapClamp.test.js
@@ -0,0 +1,36 @@
+/*-
+ * ============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 OnapClamp from './OnapClamp';
+
+describe('Verify OnapClamp', () => {
+
+  it('Test the render method', () => {
+
+    const component = shallow(<OnapClamp/>)
+
+    expect(component).toMatchSnapshot();
+  });
+
+});
diff --git a/gui-clamp/ui-react/src/__snapshots__/LoopUI.test.js.snap b/gui-clamp/ui-react/src/__snapshots__/LoopUI.test.js.snap
new file mode 100644
index 0000000..322c931
--- /dev/null
+++ b/gui-clamp/ui-react/src/__snapshots__/LoopUI.test.js.snap
@@ -0,0 +1,188 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify LoopUI Test the render method 1`] = `
+<styled.div
+  id="main_div"
+>
+  <Memo(l) />
+  <Route
+    path="/viewLoopTemplatesModal"
+    render={[Function]}
+  />
+  <Route
+    path="/manageDictionaries"
+    render={[Function]}
+  />
+  <Route
+    path="/viewAllPolicies"
+    render={[Function]}
+  />
+  <Route
+    path="/policyModal/:policyInstanceType/:policyName"
+    render={[Function]}
+  />
+  <Route
+    path="/createLoop"
+    render={[Function]}
+  />
+  <Route
+    path="/openLoop"
+    render={[Function]}
+  />
+  <Route
+    path="/loopProperties"
+    render={[Function]}
+  />
+  <Route
+    path="/modifyLoop"
+    render={[Function]}
+  />
+  <Route
+    path="/userInfo"
+    render={[Function]}
+  />
+  <Route
+    path="/closeLoop"
+    render={[Function]}
+  />
+  <Route
+    path="/submit"
+    render={[Function]}
+  />
+  <Route
+    path="/stop"
+    render={[Function]}
+  />
+  <Route
+    path="/restart"
+    render={[Function]}
+  />
+  <Route
+    path="/delete"
+    render={[Function]}
+  />
+  <Route
+    path="/undeploy"
+    render={[Function]}
+  />
+  <Route
+    path="/deploy"
+    render={[Function]}
+  />
+  <Route
+    path="/refreshStatus"
+    render={[Function]}
+  />
+  <div />
+  <div>
+    <Alert
+      closeLabel="Close alert"
+      dismissible={true}
+      onClose={[Function]}
+      show={false}
+      transition={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "defaultProps": Object {
+            "appear": false,
+            "in": false,
+            "mountOnEnter": false,
+            "timeout": 300,
+            "unmountOnExit": false,
+          },
+          "render": [Function],
+        }
+      }
+      variant="success"
+    />
+    <Alert
+      closeLabel="Close alert"
+      dismissible={true}
+      onClose={[Function]}
+      show={false}
+      transition={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "defaultProps": Object {
+            "appear": false,
+            "in": false,
+            "mountOnEnter": false,
+            "timeout": 300,
+            "unmountOnExit": false,
+          },
+          "render": [Function],
+        }
+      }
+      variant="danger"
+    />
+  </div>
+  <Navbar
+    collapseOnSelect={false}
+    expand={true}
+    variant="light"
+  >
+    <NavbarBrand>
+      <img
+        alt=""
+        height="50px"
+        src={null}
+        width="234px"
+      />
+      <styled.a>
+        CLAMP
+      </styled.a>
+    </NavbarBrand>
+    <NavbarToggle
+      aria-controls="responsive-navbar-nav"
+      label="Toggle navigation"
+    />
+    <MenuBar
+      loopName="testLoopName"
+    />
+    <NavbarText>
+      <styled.a>
+        Signed in as: 
+      </styled.a>
+      <Styled(Link)
+        to="/userInfo"
+      >
+        testUser
+      </Styled(Link)>
+    </NavbarText>
+  </Navbar>
+  <styled.div>
+    <styled.div>
+      Loop Viewer - 
+      testLoopName
+       - (
+      )
+    </styled.div>
+    <styled.div>
+      <withRouter(SvgGenerator)
+        clickable={true}
+        generatedFrom="INSTANCE"
+        isBusyLoading={[Function]}
+        loopCache={
+          LoopCache {
+            "loopJsonCache": Object {},
+          }
+        }
+      />
+      <LoopStatus
+        loopCache={
+          LoopCache {
+            "loopJsonCache": Object {},
+          }
+        }
+      />
+      <LoopLogs
+        loopCache={
+          LoopCache {
+            "loopJsonCache": Object {},
+          }
+        }
+      />
+    </styled.div>
+  </styled.div>
+</styled.div>
+`;
diff --git a/gui-clamp/ui-react/src/__snapshots__/NotFound.test.js.snap b/gui-clamp/ui-react/src/__snapshots__/NotFound.test.js.snap
new file mode 100644
index 0000000..86bcfd1
--- /dev/null
+++ b/gui-clamp/ui-react/src/__snapshots__/NotFound.test.js.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify OnapClamp Test the render method 1`] = `
+<div
+  id="main"
+>
+  <div
+    class="divRow"
+  >
+    <b>
+      Page Not Found!
+    </b>
+  </div>
+  <div
+    class="divRow"
+  >
+    Please cick 
+    <a
+      href="/"
+    >
+      here
+    </a>
+     to go back to the main page.
+  </div>
+</div>
+`;
diff --git a/gui-clamp/ui-react/src/__snapshots__/OnapClamp.test.js.snap b/gui-clamp/ui-react/src/__snapshots__/OnapClamp.test.js.snap
new file mode 100644
index 0000000..353bc11
--- /dev/null
+++ b/gui-clamp/ui-react/src/__snapshots__/OnapClamp.test.js.snap
@@ -0,0 +1,216 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify OnapClamp Test the render method 1`] = `
+<Component
+  theme={
+    Object {
+      "backgroundColor": "#eeeeee",
+      "fontDanger": "#eb238e",
+      "fontDark": "#888888",
+      "fontFamily": "Arial, Sans-serif",
+      "fontHighlight": "#ffff00",
+      "fontLight": "#ffffff",
+      "fontNormal": "black",
+      "fontSize": "16px",
+      "fontWarning": "#eb238e",
+      "loopLogsHeaderBackgroundColor": "white",
+      "loopLogsHeaderFontColor": "black",
+      "loopViewerBackgroundColor": "white",
+      "loopViewerFontColor": "yellow",
+      "loopViewerHeaderBackgroundColor": "#337ab7",
+      "loopViewerHeaderFontColor": "white",
+      "menuBackgroundColor": "white",
+      "menuFontColor": "black",
+      "menuHighlightedBackgroundColor": "#337ab7",
+      "menuHighlightedFontColor": "white",
+      "policyEditorBackgroundColor": "white",
+      "policyEditorFontSize": "13px",
+      "toscaTextareaBackgroundColor": "white",
+      "toscaTextareaFontSize": "13px",
+    }
+  }
+>
+  <styled.div
+    id="main_div"
+  >
+    <Memo(l) />
+    <Route
+      path="/viewLoopTemplatesModal"
+      render={[Function]}
+    />
+    <Route
+      path="/manageDictionaries"
+      render={[Function]}
+    />
+    <Route
+      path="/viewAllPolicies"
+      render={[Function]}
+    />
+    <Route
+      path="/policyModal/:policyInstanceType/:policyName"
+      render={[Function]}
+    />
+    <Route
+      path="/createLoop"
+      render={[Function]}
+    />
+    <Route
+      path="/openLoop"
+      render={[Function]}
+    />
+    <Route
+      path="/loopProperties"
+      render={[Function]}
+    />
+    <Route
+      path="/modifyLoop"
+      render={[Function]}
+    />
+    <Route
+      path="/userInfo"
+      render={[Function]}
+    />
+    <Route
+      path="/closeLoop"
+      render={[Function]}
+    />
+    <Route
+      path="/submit"
+      render={[Function]}
+    />
+    <Route
+      path="/stop"
+      render={[Function]}
+    />
+    <Route
+      path="/restart"
+      render={[Function]}
+    />
+    <Route
+      path="/delete"
+      render={[Function]}
+    />
+    <Route
+      path="/undeploy"
+      render={[Function]}
+    />
+    <Route
+      path="/deploy"
+      render={[Function]}
+    />
+    <Route
+      path="/refreshStatus"
+      render={[Function]}
+    />
+    <div />
+    <div>
+      <Alert
+        closeLabel="Close alert"
+        dismissible={true}
+        onClose={[Function]}
+        show={false}
+        transition={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "defaultProps": Object {
+              "appear": false,
+              "in": false,
+              "mountOnEnter": false,
+              "timeout": 300,
+              "unmountOnExit": false,
+            },
+            "render": [Function],
+          }
+        }
+        variant="success"
+      />
+      <Alert
+        closeLabel="Close alert"
+        dismissible={true}
+        onClose={[Function]}
+        show={false}
+        transition={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "defaultProps": Object {
+              "appear": false,
+              "in": false,
+              "mountOnEnter": false,
+              "timeout": 300,
+              "unmountOnExit": false,
+            },
+            "render": [Function],
+          }
+        }
+        variant="danger"
+      />
+    </div>
+    <Navbar
+      collapseOnSelect={false}
+      expand={true}
+      variant="light"
+    >
+      <NavbarBrand>
+        <img
+          alt=""
+          height="50px"
+          src={null}
+          width="234px"
+        />
+        <styled.a>
+          CLAMP
+        </styled.a>
+      </NavbarBrand>
+      <NavbarToggle
+        aria-controls="responsive-navbar-nav"
+        label="Toggle navigation"
+      />
+      <MenuBar
+        loopName="Empty (NO loop loaded yet)"
+      />
+      <NavbarText>
+        <styled.a>
+          Signed in as: 
+        </styled.a>
+        <Styled(Link)
+          to="/userInfo"
+        />
+      </NavbarText>
+    </Navbar>
+    <styled.div>
+      <styled.div>
+        Loop Viewer - 
+        Empty (NO loop loaded yet)
+         - (
+        )
+      </styled.div>
+      <styled.div>
+        <withRouter(SvgGenerator)
+          clickable={true}
+          generatedFrom="INSTANCE"
+          isBusyLoading={[Function]}
+          loopCache={
+            LoopCache {
+              "loopJsonCache": Object {},
+            }
+          }
+        />
+        <LoopStatus
+          loopCache={
+            LoopCache {
+              "loopJsonCache": Object {},
+            }
+          }
+        />
+        <LoopLogs
+          loopCache={
+            LoopCache {
+              "loopJsonCache": Object {},
+            }
+          }
+        />
+      </styled.div>
+    </styled.div>
+  </styled.div>
+</Component>
+`;
diff --git a/gui-clamp/ui-react/src/api/LoopActionService.js b/gui-clamp/ui-react/src/api/LoopActionService.js
new file mode 100644
index 0000000..f3695c2
--- /dev/null
+++ b/gui-clamp/ui-react/src/api/LoopActionService.js
@@ -0,0 +1,74 @@
+/*-
+ * ============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============================================
+ * ===================================================================
+ *
+ */
+
+export default class LoopActionService {
+
+  static performAction(cl_name, uiAction) {
+    console.info("LoopActionService perform action: " + uiAction + " closedloopName=" + cl_name);
+    const svcAction = uiAction.toLowerCase();
+    return fetch(window.location.pathname + "restservices/clds/v2/loop/" + svcAction + "/" + cl_name, {
+      method: 'PUT',
+      credentials: 'same-origin'
+    })
+      .then(function (response) {
+        if (response.ok) {
+          return response.json();
+        } else {
+          return Promise.reject("Perform action failed with code:" + response.status);
+        }
+      })
+      .then(function (data) {
+        console.info("Action Successful: " + uiAction);
+        return data;
+      })
+      .catch(function (error) {
+        console.info("Action Failure: " + uiAction);
+        return Promise.reject(error);
+      });
+  }
+
+
+  static refreshStatus(cl_name) {
+    console.info("Refresh the status for closedloopName=" + cl_name);
+
+    return fetch(window.location.pathname + "restservices/clds/v2/loop/getstatus/" + cl_name, {
+      method: 'GET',
+      credentials: 'same-origin'
+    })
+      .then(function (response) {
+        if (response.ok) {
+          return response.json();
+        } else {
+          return Promise.reject("Refresh status failed with code:" + response.status);
+        }
+      })
+      .then(function (data) {
+        console.info("Refresh status Successful");
+        return data;
+      })
+      .catch(function (error) {
+        console.info("Refresh status failed:", error);
+        return Promise.reject(error);
+      });
+  }
+}
diff --git a/gui-clamp/ui-react/src/api/LoopCache.js b/gui-clamp/ui-react/src/api/LoopCache.js
new file mode 100644
index 0000000..ac2da07
--- /dev/null
+++ b/gui-clamp/ui-react/src/api/LoopCache.js
@@ -0,0 +1,252 @@
+/*-
+ * ============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============================================
+ * ===================================================================
+ *
+ */
+
+export default class LoopCache {
+  loopJsonCache;
+
+  constructor(loopJson) {
+    this.loopJsonCache = loopJson;
+  }
+
+  updateMicroServiceProperties(name, newMsProperties) {
+    for (var policy in this.loopJsonCache["microServicePolicies"]) {
+      if (this.loopJsonCache["microServicePolicies"][policy]["name"] === name) {
+        this.loopJsonCache["microServicePolicies"][policy]["configurationsJson"] = newMsProperties;
+      }
+    }
+  }
+
+  updateMicroServicePdpGroup(name, pdpGroup, pdpSubgroup) {
+    for (var policy in this.loopJsonCache["microServicePolicies"]) {
+      if (this.loopJsonCache["microServicePolicies"][policy]["name"] === name) {
+        this.loopJsonCache["microServicePolicies"][policy]["pdpGroup"] = pdpGroup;
+        this.loopJsonCache["microServicePolicies"][policy]["pdpSubgroup"] = pdpSubgroup;
+      }
+    }
+  }
+
+  updateGlobalProperties(newGlobalProperties) {
+    this.loopJsonCache["globalPropertiesJson"] = newGlobalProperties;
+  }
+
+  updateOperationalPolicyProperties(name, newOpProperties) {
+    for (var policy in this.loopJsonCache["operationalPolicies"]) {
+      if (this.loopJsonCache["operationalPolicies"][policy]["name"] === name) {
+        this.loopJsonCache["operationalPolicies"][policy]["configurationsJson"] = newOpProperties;
+      }
+    }
+  }
+
+  updateOperationalPolicyPdpGroup(name, pdpGroup, pdpSubgroup) {
+    for (var policy in this.loopJsonCache["operationalPolicies"]) {
+      if (this.loopJsonCache["operationalPolicies"][policy]["name"] === name) {
+        this.loopJsonCache["operationalPolicies"][policy]["pdpGroup"] = pdpGroup;
+        this.loopJsonCache["operationalPolicies"][policy]["pdpSubgroup"] = pdpSubgroup;
+      }
+    }
+  }
+
+  getLoopName() {
+    return this.loopJsonCache["name"];
+  }
+
+  getOperationalPolicyJsonSchema() {
+    return this.loopJsonCache["operationalPolicies"]["0"]["jsonRepresentation"];
+  }
+
+  getOperationalPolicies() {
+    return this.loopJsonCache["operationalPolicies"];
+  }
+
+  getOperationalPoliciesNoJsonSchema() {
+    var operationalPolicies = JSON.parse(JSON.stringify(this.loopJsonCache["operationalPolicies"]));
+    delete operationalPolicies[0]["jsonRepresentation"];
+    return operationalPolicies;
+  }
+
+  getGlobalProperties() {
+    return this.loopJsonCache["globalPropertiesJson"];
+  }
+
+  getDcaeDeploymentProperties() {
+    return this.loopJsonCache["globalPropertiesJson"]["dcaeDeployParameters"];
+  }
+
+  getMicroServicePolicies() {
+    return this.loopJsonCache["microServicePolicies"];
+  }
+
+  getOperationalPolicyForName(name) {
+    var opProperties = this.getOperationalPolicies();
+    for (var policy in opProperties) {
+      if (opProperties[policy]["name"] === name) {
+        return opProperties[policy];
+      }
+    }
+    return null;
+  }
+
+  getOperationalPolicyPropertiesForName(name) {
+    var opConfig = this.getOperationalPolicyForName(name);
+    if (opConfig !== null) {
+      return opConfig["configurationsJson"];
+    }
+    return null;
+  }
+
+  getOperationalPolicyJsonRepresentationForName(name) {
+    var opConfig = this.getOperationalPolicyForName(name);
+    if (opConfig !== null) {
+      return opConfig["jsonRepresentation"];
+    }
+    return null;
+  }
+
+  getOperationalPolicySupportedPdpGroup(name) {
+    var opConfig = this.getOperationalPolicyForName(name);
+    if (opConfig !== null) {
+      if (opConfig["policyModel"]["policyPdpGroup"] !== undefined && opConfig["policyModel"]["policyPdpGroup"]["supportedPdpGroups"] !== undefined) {
+        return opConfig["policyModel"]["policyPdpGroup"]["supportedPdpGroups"];
+      }
+    }
+    return [];
+  }
+
+  getOperationalPolicyPdpGroup(name) {
+    var opConfig = this.getOperationalPolicyForName(name);
+    if (opConfig !== null) {
+      return opConfig["pdpGroup"];
+    }
+    return null;
+  }
+
+  getOperationalPolicyPdpSubgroup(name) {
+    var opConfig = this.getOperationalPolicyForName(name);
+    if (opConfig !== null) {
+      return opConfig["pdpSubgroup"];
+    }
+    return null;
+  }
+
+  getMicroServiceSupportedPdpGroup(name) {
+    var microService = this.getMicroServiceForName(name);
+    if (microService !== null) {
+      if (microService["policyModel"]["policyPdpGroup"] !== undefined && microService["policyModel"]["policyPdpGroup"]["supportedPdpGroups"] !== undefined) {
+        return microService["policyModel"]["policyPdpGroup"]["supportedPdpGroups"];
+      }
+    }
+    return [];
+  }
+
+  getMicroServicePdpGroup(name) {
+    var microService = this.getMicroServiceForName(name);
+    if (microService !== null) {
+      return microService["pdpGroup"];
+    }
+    return null;
+  }
+
+  getMicroServicePdpSubgroup(name) {
+    var microService = this.getMicroServiceForName(name);
+    if (microService !== null) {
+      return microService["pdpSubgroup"];
+    }
+    return null;
+  }
+
+  getMicroServiceForName(name) {
+    var msProperties = this.getMicroServicePolicies();
+    for (var policy in msProperties) {
+      if (msProperties[policy]["name"] === name) {
+        return msProperties[policy];
+      }
+    }
+    return null;
+  }
+
+  getMicroServicePropertiesForName(name) {
+    var msConfig = this.getMicroServiceForName(name);
+    if (msConfig !== null) {
+      return msConfig["configurationsJson"];
+    }
+    return null;
+  }
+
+  getMicroServiceJsonRepresentationForName(name) {
+    var msConfig = this.getMicroServiceForName(name);
+    if (msConfig !== null) {
+      return msConfig["jsonRepresentation"];
+    }
+    return null;
+  }
+
+  getResourceDetailsVfProperty() {
+    return this.loopJsonCache["modelService"]["resourceDetails"]["VF"];
+  }
+
+  getResourceDetailsVfModuleProperty() {
+    return this.loopJsonCache["modelService"]["resourceDetails"]["VFModule"];
+  }
+
+  getLoopLogsArray() {
+    return this.loopJsonCache.loopLogs;
+  }
+
+  getComputedState() {
+    return this.loopJsonCache.lastComputedState;
+  }
+
+  getComponentStates() {
+    return this.loopJsonCache.components;
+  }
+
+  getTemplateName() {
+    if (this.getLoopTemplate() !== undefined) {
+      return this.getLoopTemplate().name;
+    }
+    return null;
+  }
+
+  getLoopTemplate() {
+    return this.loopJsonCache["loopTemplate"];
+  }
+
+  isOpenLoopTemplate() {
+    var loopTemplate = this.getLoopTemplate();
+    if (loopTemplate != null && loopTemplate["allowedLoopType"] === "OPEN") {
+      return true;
+    }
+    return false;
+  }
+
+  getAllLoopElementModels() {
+    var loopTemplate = this.getLoopTemplate();
+    var loopElementModels = [];
+    if (loopTemplate != null) {
+      for (var element of loopTemplate['loopElementModelsUsed']) {
+        loopElementModels.push(element['loopElementModel'])
+      }
+    }
+    return loopElementModels;
+  }
+}
diff --git a/gui-clamp/ui-react/src/api/LoopCache.test.js b/gui-clamp/ui-react/src/api/LoopCache.test.js
new file mode 100644
index 0000000..76f819c
--- /dev/null
+++ b/gui-clamp/ui-react/src/api/LoopCache.test.js
@@ -0,0 +1,305 @@
+/*-
+ * ============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 LoopCache from '../api/LoopCache';
+
+const json = require('./LoopCacheMockFile.json');
+
+describe('Verify LoopCache functions', () => {
+    const loopCache = new LoopCache(json);
+		it('getLoopName', () => {
+      expect(loopCache.getLoopName()).toBe("LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca");
+		});
+
+    it('getOperationalPolicies', () => {
+      const opPolicy = [{
+        "name": "OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca",
+        "configurationsJson": {
+          "operational_policy": {
+            "controlLoop": {},
+            "policies": []
+          }
+        },
+        "pdpGroup": "pdpGroupTest",
+        "pdpSubgroup": "pdpSubgroupTest",
+        "jsonRepresentation": {
+        "schema": {}
+      }
+      }];
+      expect(loopCache.getOperationalPolicies()).toStrictEqual(opPolicy);
+    });
+
+    it('getOperationalPoliciesNoJsonSchema', () => {
+      const opPolicy = [{
+        "name": "OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca",
+        "configurationsJson": {
+          "operational_policy": {
+            "controlLoop": {},
+            "policies": []
+          }
+        },
+        "pdpGroup": "pdpGroupTest",
+        "pdpSubgroup": "pdpSubgroupTest",
+      }];
+      expect(loopCache.getOperationalPoliciesNoJsonSchema()).toStrictEqual(opPolicy);
+    });
+
+    it('getOperationalPolicyJsonSchema', () => {
+      const jsonSchema = {
+          "schema": {}
+      };
+
+      expect(loopCache.getOperationalPolicyJsonSchema()).toStrictEqual(jsonSchema);
+    });
+    it('getGlobalProperties', () => {
+      const globelProp = {
+        "dcaeDeployParameters": {
+          "location_id": "",
+          "service_id": "",
+          "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
+        }
+      };
+      expect(loopCache.getGlobalProperties()).toStrictEqual(globelProp);
+    });
+
+    it('getDcaeDeploymentProperties', () => {
+      const deploymentProp = {
+          "location_id": "",
+          "service_id": "",
+          "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
+      };
+      expect(loopCache.getDcaeDeploymentProperties()).toStrictEqual(deploymentProp);
+    });
+
+    it('getMicroServiceForName', () => {
+      const msJson = {
+          "name": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca",
+          "modelType": "onap.policies.monitoring.cdap.tca.hi.lo.app",
+          "configurationsJson": {"domain": "measurementsForVfScaling"},
+          "shared": false,
+          "pdpGroup": "pdpGroupTest",
+          "pdpSubgroup": "pdpSubgroupTest",
+          "policyModel": {"policyPdpGroup": {"supportedPdpGroups": "supportedPdpGroupsTest"}},
+          "jsonRepresentation": {"schema": {}}
+      };
+      expect(loopCache.getMicroServiceForName("TCA_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual(msJson);
+      expect(loopCache.getMicroServiceForName("TCA_h2NMX_v1_0_ResourceInstanceName1_tca_2")).toBeNull();
+    });
+
+    it('getMicroServicePropertiesForName', () => {
+      const msProp = {"domain": "measurementsForVfScaling"};
+      expect(loopCache.getMicroServicePropertiesForName("TCA_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual(msProp);
+      expect(loopCache.getMicroServicePropertiesForName("TCA_h2NMX_v1_0_ResourceInstanceName1_tca_2")).toBeNull();
+    });
+
+    it('getMicroServiceJsonRepresentationForName', () => {
+      const msJsonRepresentation = {"schema": {}};
+      expect(loopCache.getMicroServiceJsonRepresentationForName("TCA_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual(msJsonRepresentation);
+    });
+
+    it('getResourceDetailsVfProperty', () => {
+      const resourceVF = {
+        "vLoadBalancerMS 0": {
+          "resourceVendor": "Test",
+          "resourceVendorModelNumber": "",
+          "name": "vLoadBalancerMS",
+          "description": "vLBMS",
+          "invariantUUID": "1a31b9f2-e50d-43b7-89b3-a040250cf506",
+          "subcategory": "Load Balancer",
+          "category": "Application L4+",
+          "type": "VF",
+          "UUID": "b4c4f3d7-929e-4b6d-a1cd-57e952ddc3e6",
+          "version": "1.0",
+          "resourceVendorRelease": "1.0",
+          "customizationUUID": "465246dc-7748-45f4-a013-308d92922552"
+        }
+      };
+      expect(loopCache.getResourceDetailsVfProperty()).toStrictEqual(resourceVF);
+    });
+
+    it('getResourceDetailsVfModuleProperty', () => {
+      const vfModule = {
+        "Vloadbalancerms..vpkg..module-1": {
+          "vfModuleModelInvariantUUID": "ca052563-eb92-4b5b-ad41-9111768ce043",
+          "vfModuleModelVersion": "1",
+          "vfModuleModelName": "Vloadbalancerms..vpkg..module-1",
+          "vfModuleModelUUID": "1e725ccc-b823-4f67-82b9-4f4367070dbc",
+          "vfModuleModelCustomizationUUID": "1bffdc31-a37d-4dee-b65c-dde623a76e52",
+          "min_vf_module_instances": 0,
+          "vf_module_label": "vpkg",
+          "max_vf_module_instances": 1,
+          "vf_module_type": "Expansion",
+          "isBase": false,
+          "initial_count": 0,
+          "volume_group": false
+        }
+      };
+      expect(loopCache.getResourceDetailsVfModuleProperty()).toStrictEqual(vfModule);
+    });
+
+    it('getLoopLogsArray', () => {
+      const logs = [
+        {
+          "id": 1,
+          "logType": "INFO",
+          "logComponent": "CLAMP",
+          "message": "Operational policies UPDATED",
+          "logInstant": "2019-07-08T09:44:37Z"
+        }
+      ];
+      expect(loopCache.getLoopLogsArray()).toStrictEqual(logs);
+    });
+
+    it('getComponentStates', () => {
+      const component = {
+        "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"
+          }
+        }
+      };
+      expect(loopCache.getComponentStates()).toStrictEqual(component);
+    });
+
+    it('getOperationalPolicyForName', () => {
+      const opPolicy = {
+      "name": "OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca",
+      "configurationsJson": {
+        "operational_policy": {
+          "controlLoop": {},
+          "policies": []
+        }
+      },
+      "pdpGroup": "pdpGroupTest",
+      "pdpSubgroup": "pdpSubgroupTest",
+      "jsonRepresentation": {
+        "schema": {}
+      }
+    };
+      expect(loopCache.getOperationalPolicyForName("OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual(opPolicy);
+      expect(loopCache.getOperationalPolicyForName("Not_Exist")).toBeNull();
+    });
+
+    it('getOperationalPolicyPropertiesForName', () => {
+      const opPolicyJson = {
+        "operational_policy": {
+          "controlLoop": {},
+          "policies": []
+        }};
+      expect(loopCache.getOperationalPolicyPropertiesForName("OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual(opPolicyJson);
+      expect(loopCache.getOperationalPolicyPropertiesForName("Not_Exist")).toBeNull();
+    });
+
+    it('getOperationalPolicyJsonRepresentationForName', () => {
+      const opPolicySchema = {
+        "schema": {}
+      };
+      expect(loopCache.getOperationalPolicyJsonRepresentationForName("OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual(opPolicySchema);
+      expect(loopCache.getOperationalPolicyJsonRepresentationForName("Not_Exist")).toBeNull();
+    });
+
+    it('getOperationalPolicySupportedPdpGroup', () => {
+      expect(loopCache.getOperationalPolicySupportedPdpGroup("Not_Exist")).toStrictEqual([]);
+    });
+
+    it('getOperationalPolicyPdpGroup', () => {
+      expect(loopCache.getOperationalPolicyPdpGroup("OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual("pdpGroupTest");
+      expect(loopCache.getOperationalPolicyPdpGroup("Not_Exist")).toBeNull();
+    });
+
+    it('getOperationalPolicyPdpSubgroup', () => {
+      expect(loopCache.getOperationalPolicyPdpSubgroup("OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual("pdpSubgroupTest");
+      expect(loopCache.getOperationalPolicyPdpSubgroup("Not_Exist")).toBeNull();
+    });
+
+    it('getMicroServiceSupportedPdpGroup', () => {
+      expect(loopCache.getMicroServiceSupportedPdpGroup("TCA_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual("supportedPdpGroupsTest");
+      expect(loopCache.getMicroServiceSupportedPdpGroup("Not_Exist")).toStrictEqual([]);
+    });
+
+    it('getMicroServicePdpGroup', () => {
+      expect(loopCache.getMicroServicePdpGroup("TCA_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual("pdpGroupTest");
+      expect(loopCache.getMicroServicePdpGroup("Not_Exist")).toBeNull();
+    });
+
+    it('getMicroServicePdpSubgroup', () => {
+      expect(loopCache.getMicroServicePdpSubgroup("TCA_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual("pdpSubgroupTest");
+      expect(loopCache.getMicroServicePdpSubgroup("Not_Exist")).toBeNull();
+    });
+
+    it('getMicroServiceJsonRepresentationForName', () => {
+      const msPolicySchema = {
+        "schema": {}
+      };
+      expect(loopCache.getMicroServiceJsonRepresentationForName("TCA_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual(msPolicySchema);
+      expect(loopCache.getMicroServiceJsonRepresentationForName("Not_Exist")).toBeNull();
+    });
+
+    it('getTemplateName', () => {
+      expect(loopCache.getTemplateName()).toStrictEqual("loopTemplateTest");
+    });
+
+    it('updateGlobalProperties', () => {
+      const newGlobalProps = {
+        "dcaeDeployParameters": {
+          "location_id": "newLocation",
+          "service_id": "newServiceId",
+          "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca_2"
+        }
+      };
+      loopCache.updateGlobalProperties(newGlobalProps);
+      expect(loopCache.getGlobalProperties()).toStrictEqual(newGlobalProps);
+    });
+
+    it('updateOperationalPolicyProperties', () => {
+      const newOpPolicy = {
+          "operational_policy": {
+            "controlLoop": {},
+            "policies": []
+          }
+        };
+      loopCache.updateOperationalPolicyProperties("OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca",newOpPolicy);
+      expect(loopCache.getOperationalPolicyPropertiesForName("OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual(newOpPolicy);
+    });
+
+    it('updateMicroServiceProperties', () => {
+      const newMsPolicyProperties = {"domain": "measurementsForVfScalingNew"};
+      loopCache.updateMicroServiceProperties("TCA_h2NMX_v1_0_ResourceInstanceName1_tca", newMsPolicyProperties);
+      expect(loopCache.getMicroServicePropertiesForName("TCA_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual(newMsPolicyProperties);
+    });
+
+    it('updateMicroServicePdpGroup', () => {
+      const newMsPolicyProperties = {"domain": "measurementsForVfScalingNew"};
+      loopCache.updateMicroServicePdpGroup("TCA_h2NMX_v1_0_ResourceInstanceName1_tca", "pdpGroupTest1", "pdpSubgroupTest1");
+      expect(loopCache.getMicroServicePdpGroup("TCA_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual("pdpGroupTest1");
+      expect(loopCache.getMicroServicePdpGroup("Not_Exist")).toBeNull();
+      expect(loopCache.getMicroServicePdpSubgroup("TCA_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual("pdpSubgroupTest1");
+      expect(loopCache.getMicroServicePdpSubgroup("Not_Exist")).toBeNull();
+    });
+ });
diff --git a/gui-clamp/ui-react/src/api/LoopCacheMockFile.json b/gui-clamp/ui-react/src/api/LoopCacheMockFile.json
new file mode 100644
index 0000000..e5a6702
--- /dev/null
+++ b/gui-clamp/ui-react/src/api/LoopCacheMockFile.json
@@ -0,0 +1,135 @@
+{
+  "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
+  "dcaeBlueprintId": "typeId-3a942643-a8f7-4e54-b2c1-eea8daba2b17",
+  "globalPropertiesJson": {
+    "dcaeDeployParameters": {
+      "location_id": "",
+      "service_id": "",
+      "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
+    }
+  },
+  "loopTemplate": {
+    "name": "loopTemplateTest"
+  },
+  "modelService": {
+    "serviceDetails": {
+      "serviceType": "",
+      "namingPolicy": "",
+      "environmentContext": "General_Revenue-Bearing",
+      "serviceEcompNaming": "true",
+      "serviceRole": "",
+      "name": "vLoadBalancerMS",
+      "description": "vLBMS",
+      "invariantUUID": "30ec5b59-4799-48d8-ac5f-1058a6b0e48f",
+      "ecompGeneratedNaming": "true",
+      "category": "Network L4+",
+      "type": "Service",
+      "UUID": "63cac700-ab9a-4115-a74f-7eac85e3fce0",
+      "instantiationType": "A-la-carte"
+    },
+    "resourceDetails": {
+      "CP": {},
+      "VL": {},
+      "VF": {
+        "vLoadBalancerMS 0": {
+          "resourceVendor": "Test",
+          "resourceVendorModelNumber": "",
+          "name": "vLoadBalancerMS",
+          "description": "vLBMS",
+          "invariantUUID": "1a31b9f2-e50d-43b7-89b3-a040250cf506",
+          "subcategory": "Load Balancer",
+          "category": "Application L4+",
+          "type": "VF",
+          "UUID": "b4c4f3d7-929e-4b6d-a1cd-57e952ddc3e6",
+          "version": "1.0",
+          "resourceVendorRelease": "1.0",
+          "customizationUUID": "465246dc-7748-45f4-a013-308d92922552"
+        }
+      },
+      "CR": {},
+      "VFC": {},
+      "PNF": {},
+      "Service": {},
+      "CVFC": {},
+      "Service Proxy": {},
+      "Configuration": {},
+      "AllottedResource": {},
+      "VFModule": {
+        "Vloadbalancerms..vpkg..module-1": {
+          "vfModuleModelInvariantUUID": "ca052563-eb92-4b5b-ad41-9111768ce043",
+          "vfModuleModelVersion": "1",
+          "vfModuleModelName": "Vloadbalancerms..vpkg..module-1",
+          "vfModuleModelUUID": "1e725ccc-b823-4f67-82b9-4f4367070dbc",
+          "vfModuleModelCustomizationUUID": "1bffdc31-a37d-4dee-b65c-dde623a76e52",
+          "min_vf_module_instances": 0,
+          "vf_module_label": "vpkg",
+          "max_vf_module_instances": 1,
+          "vf_module_type": "Expansion",
+          "isBase": false,
+          "initial_count": 0,
+          "volume_group": false
+        }
+      }
+    }
+  },
+  "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"
+      }
+    }
+  },
+  "operationalPolicies": [
+    {
+      "name": "OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca",
+      "configurationsJson": {
+        "operational_policy": {
+          "controlLoop": {},
+          "policies": []
+        }
+      },
+      "pdpGroup": "pdpGroupTest",
+      "pdpSubgroup": "pdpSubgroupTest",
+      "jsonRepresentation": {
+        "schema": {}
+      }
+    }
+  ],
+  "microServicePolicies": [
+    {
+      "name": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca",
+      "modelType": "onap.policies.monitoring.cdap.tca.hi.lo.app",
+      "configurationsJson": {
+        "domain": "measurementsForVfScaling"
+      },
+      "shared": false,
+      "pdpGroup": "pdpGroupTest",
+      "pdpSubgroup": "pdpSubgroupTest",
+      "policyModel": {
+        "policyPdpGroup": {
+          "supportedPdpGroups": "supportedPdpGroupsTest"
+        }
+      },
+      "jsonRepresentation": {
+        "schema": {}
+      }
+    }
+  ],
+  "loopLogs": [
+    {
+      "id": 1,
+      "logType": "INFO",
+      "logComponent": "CLAMP",
+      "message": "Operational policies UPDATED",
+      "logInstant": "2019-07-08T09:44:37Z"
+    }
+  ]
+}
diff --git a/gui-clamp/ui-react/src/api/LoopService.js b/gui-clamp/ui-react/src/api/LoopService.js
new file mode 100644
index 0000000..16f1bec
--- /dev/null
+++ b/gui-clamp/ui-react/src/api/LoopService.js
@@ -0,0 +1,244 @@
+/*-
+ * ============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============================================
+ * ===================================================================
+ *
+ */
+
+export default class LoopService {
+  static getLoopNames() {
+    return fetch(window.location.pathname + 'restservices/clds/v2/loop/getAllNames', { method: 'GET', credentials: 'same-origin' })
+      .then(function (response) {
+        console.debug("GetLoopNames response received: ", response.status);
+        if (response.ok) {
+          return response.json();
+        } else {
+          console.error("GetLoopNames query failed");
+          return {};
+        }
+      })
+      .catch(function (error) {
+        console.error("GetLoopNames error received", error);
+        return {};
+      });
+  }
+
+  static createLoop(loopName, templateName) {
+    return fetch(window.location.pathname + 'restservices/clds/v2/loop/create/' + loopName + '?templateName=' + templateName, {
+      method: 'POST',
+      headers: {
+        "Content-Type": "application/json"
+      },
+      credentials: 'same-origin'
+    })
+      .then(function (response) {
+        console.debug("CreateLoop response received: ", response.status);
+        return response.json();
+      })
+      .catch(function (error) {
+        console.error("CreateLoop error received", error);
+        return "";
+      });
+  }
+
+  static getLoop(loopName) {
+    return fetch(window.location.pathname + 'restservices/clds/v2/loop/' + loopName, {
+      method: 'GET',
+      headers: {
+        "Content-Type": "application/json"
+      },
+      credentials: 'same-origin'
+    })
+      .then(function (response) {
+        console.debug("GetLoop response received: ", response.status);
+        if (response.ok) {
+          return response.json();
+        } else {
+          console.error("GetLoop query failed");
+          return {};
+        }
+      })
+      .catch(function (error) {
+        console.error("GetLoop error received", error);
+        return {};
+      });
+  }
+
+  static setMicroServiceProperties(loopName, jsonData) {
+    return fetch(window.location.pathname + 'restservices/clds/v2/loop/updateMicroservicePolicy/' + loopName, {
+      method: 'POST',
+      credentials: 'same-origin',
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(jsonData)
+    })
+      .then(function (response) {
+        console.debug("updateMicroservicePolicy response received: ", response.status);
+        if (response.ok) {
+          return response.text();
+        } else {
+          console.error("updateMicroservicePolicy query failed");
+          return "";
+        }
+      })
+      .catch(function (error) {
+        console.error("updateMicroservicePolicy error received", error);
+        return "";
+      });
+  }
+
+  static setOperationalPolicyProperties(loopName, jsonData) {
+    return fetch(window.location.pathname + 'restservices/clds/v2/loop/updateOperationalPolicies/' + loopName, {
+      method: 'POST',
+      credentials: 'same-origin',
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(jsonData)
+    })
+      .then(function (response) {
+        console.debug("updateOperationalPolicies response received: ", response.status);
+        if (response.ok) {
+          return response.text();
+        } else {
+          console.error("updateOperationalPolicies query failed");
+          return "";
+        }
+      })
+      .catch(function (error) {
+        console.error("updateOperationalPolicies error received", error);
+        return "";
+      });
+  }
+
+  static updateGlobalProperties(loopName, jsonData) {
+    return fetch(window.location.pathname + 'restservices/clds/v2/loop/updateGlobalProperties/' + loopName, {
+      method: 'POST',
+      credentials: 'same-origin',
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(jsonData)
+    })
+      .then(function (response) {
+        console.debug("updateGlobalProperties response received: ", response.status);
+        if (response.ok) {
+          return response.text();
+        } else {
+          console.error("updateGlobalProperties query failed");
+          return "";
+        }
+      })
+      .catch(function (error) {
+        console.error("updateGlobalProperties error received", error);
+        return "";
+      });
+  }
+
+  static refreshOperationalPolicyJson(loopName, operationalPolicyName) {
+    return fetch(window.location.pathname + 'restservices/clds/v2/loop/refreshOperationalPolicyJsonSchema/' + loopName + '/' + operationalPolicyName, {
+      method: 'PUT',
+      headers: {
+        "Content-Type": "application/json"
+      },
+      credentials: 'same-origin'
+    })
+      .then(function (response) {
+        console.debug("Refresh Operational Policy Json Schema response received: ", response.status);
+        if (response.ok) {
+          return response.json();
+        } else {
+          console.error("Refresh Operational Policy Json Schema query failed");
+          return {};
+        }
+      })
+      .catch(function (error) {
+        console.error("Refresh Operational Policy Json Schema error received", error);
+        return {};
+      });
+  }
+
+  static refreshMicroServicePolicyJson(loopName, microServicePolicyName) {
+    return fetch(window.location.pathname + 'restservices/clds/v2/loop/refreshMicroServicePolicyJsonSchema/' + loopName + '/' + microServicePolicyName, {
+      method: 'PUT',
+      headers: {
+        "Content-Type": "application/json"
+      },
+      credentials: 'same-origin'
+    })
+      .then(function (response) {
+        console.debug("Refresh Operational Policy Json Schema response received: ", response.status);
+        if (response.ok) {
+          return response.json();
+        } else {
+          console.error("Refresh Operational Policy Json Schema query failed");
+          return {};
+        }
+      })
+      .catch(function (error) {
+        console.error("Refresh Operational Policy Json Schema error received", error);
+        return {};
+      });
+  }
+
+  static addOperationalPolicyType(loopName, policyType, policyVersion) {
+    return fetch(window.location.pathname + 'restservices/clds/v2/loop/addOperationaPolicy/' + loopName + '/policyModel/' + policyType + '/' + policyVersion, {
+      method: 'PUT',
+      headers: {
+        "Content-Type": "application/json"
+      },
+      credentials: 'same-origin'
+    })
+      .then(function (response) {
+        console.debug("Add Operational Policy response received: ", response.status);
+        if (response.ok) {
+          return response.json();
+        } else {
+          return response.text();
+        }
+      })
+      .catch(function (error) {
+        console.error("Add Operational Policy query failed");
+        throw new Error(error);
+      })
+  }
+
+  static removeOperationalPolicyType(loopName, policyType, policyVersion, policyName) {
+    return fetch(window.location.pathname + 'restservices/clds/v2/loop/removeOperationaPolicy/' + loopName + '/policyModel/' + policyType + '/' + policyVersion + '/' + policyName, {
+      method: 'PUT',
+      headers: {
+        "Content-Type": "application/json"
+      },
+      credentials: 'same-origin'
+    })
+      .then(function (response) {
+        console.debug("Remove Operational Policy response received: ", response.status);
+        if (response.ok) {
+          return response.json();
+        } else {
+          console.error("Remove Operational Policy query failed");
+          return {};
+        }
+      })
+      .catch(function (error) {
+        console.error("Remove Operational Policy error received", error);
+        return {};
+      });
+  }
+}
diff --git a/gui-clamp/ui-react/src/api/PoliciesListCache.js b/gui-clamp/ui-react/src/api/PoliciesListCache.js
new file mode 100644
index 0000000..265dab4
--- /dev/null
+++ b/gui-clamp/ui-react/src/api/PoliciesListCache.js
@@ -0,0 +1,34 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP CLAMP
+ * ================================================================================
+ * Copyright (C) 2021 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============================================
+ * ===================================================================
+ *
+ */
+
+export default class PoliciesListCache {
+  policiesJsonCache;
+
+  constructor(policiesJson) {
+    this.policiesJsonCache = policiesJson;
+  }
+
+  getAllPolicies() {
+    return this.policiesJsonCache["policies"];
+  }
+}
diff --git a/gui-clamp/ui-react/src/api/PoliciesListCacheMockFile.json b/gui-clamp/ui-react/src/api/PoliciesListCacheMockFile.json
new file mode 100644
index 0000000..14d5cc6
--- /dev/null
+++ b/gui-clamp/ui-react/src/api/PoliciesListCacheMockFile.json
@@ -0,0 +1,215 @@
+{
+  "policies": [
+    {
+      "MICROSERVICE_vLoadBalancerMS_v1_0_tcagen2_1_0_0_AV0": {
+        "type": "onap.policies.monitoring.tcagen2",
+        "type_version": "1.0.0",
+        "properties": {
+          "tca.policy": {
+            "domain": "measurementsForVfScaling",
+            "metricsPerEventName": [
+              {
+                "policyScope": "DCAE",
+                "thresholds": [
+                  {
+                    "version": "1.0.2",
+                    "severity": "MAJOR",
+                    "thresholdValue": 200,
+                    "closedLoopEventStatus": "ONSET",
+                    "closedLoopControlName": "LOOP_test",
+                    "direction": "LESS_OR_EQUAL",
+                    "fieldPath": "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedTotalPacketsDelta"
+                  }
+                ],
+                "eventName": "vLoadBalancer",
+                "policyVersion": "v0.0.1",
+                "controlLoopSchemaType": "VM",
+                "policyName": "DCAE.Config_tca-hi-lo"
+              }
+            ]
+          }
+        },
+        "name": "MICROSERVICE_vLoadBalancerMS_v1_0_tcagen2_1_0_0_AV0",
+        "version": "1.0.0",
+        "metadata": {
+          "policy-id": "MICROSERVICE_vLoadBalancerMS_v1_0_tcagen2_1_0_0_AV0",
+          "policy-version": "1.0.0"
+        },
+        "pdpGroupInfo": {
+          "pdpGroup": "pdpGroup2",
+          "pdpSubGroup": "subGroup2"
+        },
+        "supportedPdpGroups": [
+          {
+            "pdpGroup2": [
+              "subGroup2",
+              "subGroup3"
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "OPERATIONAL_vLoadBalancerMS_v1_0_Drools_1_0_0_7xd": {
+        "type": "onap.policies.controlloop.operational.common.Drools",
+        "type_version": "1.0.0",
+        "properties": {
+          "abatement": false,
+          "operations": [
+            {
+              "failure_retries": "final_failure_retries",
+              "id": "test1",
+              "failure_timeout": "final_failure_timeout",
+              "failure": "final_failure",
+              "operation": {
+                "payload": {
+                  "artifact_name": "baseconfiguration",
+                  "artifact_version": "1.0.0",
+                  "mode": "async",
+                  "data": "{\"resource-assignment-properties\":{\"request-id\":\"\",\"service-instance-id\":\"\",\"hostname\":\"\",\"request-info\":{\"prop1\":\"\",\"prop2\":\"\"}}}"
+                },
+                "target": {
+                  "entityIds": {
+                    "resourceID": "Vloadbalancerms..vdns..module-3",
+                    "modelInvariantId": "4c10ba9b-f88f-415e-9de3-5d33336047fa",
+                    "modelVersionId": "4fa73b49-8a6c-493e-816b-eb401567b720",
+                    "modelName": "Vloadbalancerms..vdns..module-3",
+                    "modelVersion": "1",
+                    "modelCustomizationId": "bafcdab0-801d-4d81-9ead-f464640a38b1"
+                  },
+                  "targetType": "VNF"
+                },
+                "actor": "SDNR",
+                "operation": "BandwidthOnDemand"
+              },
+              "failure_guard": "final_failure_guard",
+              "retries": 0,
+              "timeout": 0,
+              "failure_exception": "final_failure_exception",
+              "description": "test",
+              "success": "final_success"
+            }
+          ],
+          "trigger": "test1",
+          "timeout": 0,
+          "id": "LOOP_test"
+        },
+        "name": "OPERATIONAL_vLoadBalancerMS_v1_0_Drools_1_0_0_7xd",
+        "version": "1.0.0",
+        "metadata": {
+          "policy-id": "OPERATIONAL_vLoadBalancerMS_v1_0_Drools_1_0_0_7xd",
+          "policy-version": "1.0.0"
+        },
+        "pdpGroupInfo": {
+          "pdpGroup": "pdpGroup2",
+          "pdpSubGroup": "subGroup3"
+        },
+        "supportedPdpGroups": [
+          {
+            "pdpGroup2": [
+              "subGroup2",
+              "subGroup3"
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "SDNC_Policy.ONAP_NF_NAMING_TIMESTAMP": {
+        "type": "onap.policies.Naming",
+        "type_version": "1.0.0",
+        "properties": {
+          "naming-models": [
+            {
+              "naming-type": "VNF",
+              "naming-recipe": "AIC_CLOUD_REGION|DELIMITER|CONSTANT|DELIMITER|TIMESTAMP",
+              "name-operation": "to_lower_case()",
+              "naming-properties": [
+                {
+                  "property-name": "AIC_CLOUD_REGION"
+                },
+                {
+                  "property-name": "CONSTANT",
+                  "property-value": "onap-nf"
+                },
+                {
+                  "property-name": "TIMESTAMP"
+                },
+                {
+                  "property-value": "-",
+                  "property-name": "DELIMITER"
+                }
+              ]
+            },
+            {
+              "naming-type": "VNFC",
+              "naming-recipe": "VNF_NAME|DELIMITER|NFC_NAMING_CODE|DELIMITER|SEQUENCE",
+              "name-operation": "to_lower_case()",
+              "naming-properties": [
+                {
+                  "property-name": "VNF_NAME"
+                },
+                {
+                  "property-name": "SEQUENCE",
+                  "increment-sequence": {
+                    "max": "zzz",
+                    "scope": "ENTIRETY",
+                    "start-value": "1",
+                    "length": "3",
+                    "increment": "1",
+                    "sequence-type": "alpha-numeric"
+                  }
+                },
+                {
+                  "property-name": "NFC_NAMING_CODE"
+                },
+                {
+                  "property-value": "-",
+                  "property-name": "DELIMITER"
+                }
+              ]
+            },
+            {
+              "naming-type": "VF-MODULE",
+              "naming-recipe": "VNF_NAME|DELIMITER|VF_MODULE_LABEL|DELIMITER|VF_MODULE_TYPE|DELIMITER|SEQUENCE",
+              "name-operation": "to_lower_case()",
+              "naming-properties": [
+                {
+                  "property-name": "VNF_NAME"
+                },
+                {
+                  "property-value": "-",
+                  "property-name": "DELIMITER"
+                },
+                {
+                  "property-name": "VF_MODULE_LABEL"
+                },
+                {
+                  "property-name": "VF_MODULE_TYPE"
+                },
+                {
+                  "property-name": "SEQUENCE",
+                  "increment-sequence": {
+                    "max": "zzz",
+                    "scope": "PRECEEDING",
+                    "start-value": "1",
+                    "length": "3",
+                    "increment": "1",
+                    "sequence-type": "alpha-numeric"
+                  }
+                }
+              ]
+            }
+          ],
+          "policy-instance-name": "ONAP_NF_NAMING_TIMESTAMP"
+        },
+        "name": "SDNC_Policy.ONAP_NF_NAMING_TIMESTAMP",
+        "version": "1.0.0",
+        "metadata": {
+          "policy-id": "SDNC_Policy.ONAP_NF_NAMING_TIMESTAMP",
+          "policy-version": "1.0.0"
+        }
+      }
+    }
+  ]
+}
diff --git a/gui-clamp/ui-react/src/api/PolicyService.js b/gui-clamp/ui-react/src/api/PolicyService.js
new file mode 100644
index 0000000..046f789
--- /dev/null
+++ b/gui-clamp/ui-react/src/api/PolicyService.js
@@ -0,0 +1,98 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP POLICY-CLAMP
+ * ================================================================================
+ * Copyright (C) 2021 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============================================
+ * ===================================================================
+ *
+ */
+
+export default class PolicyService {
+  static getPoliciesList() {
+    return fetch(window.location.pathname + 'restservices/clds/v2/policies', {
+      method: 'GET',
+      credentials: 'same-origin'
+    })
+      .then(function (response) {
+        console.debug("getPoliciesList response received: ", response.status);
+        if (response.ok) {
+          console.info("getPoliciesList query successful");
+          return response.json();
+        } else {
+          return response.text().then(responseBody => {
+            throw new Error("HTTP " + response.status + "," + responseBody);
+          })
+        }
+      })
+      .catch(function (error) {
+        console.error("getPoliciesList error occurred ", error);
+        alert("getPoliciesList error occurred " + error);
+        return undefined;
+      })
+  }
+
+  static createNewPolicy(policyModelType, policyModelVersion, policyName, policyVersion, policyJson) {
+    return fetch(window.location.pathname + 'restservices/clds/v2/policies/' + policyModelType + '/'
+      + policyModelVersion + '/' + policyName + '/' + policyVersion, {
+      method: 'POST',
+      credentials: 'same-origin',
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(policyJson)
+    })
+      .then(function (response) {
+        console.debug("createNewPolicy response received: ", response.status);
+        if (response.ok) {
+          console.info("createNewPolicy query successful");
+          return response.text();
+        } else {
+          return response.text().then(responseBody => {
+            throw new Error("HTTP " + response.status + "," + responseBody);
+          })
+        }
+      })
+      .catch(function (error) {
+        console.error("createNewPolicy error occurred ", error);
+        alert("createNewPolicy error occurred " + error);
+        return undefined;
+      });
+  }
+
+  static deletePolicy(policyModelType, policyModelVersion, policyName, policyVersion) {
+    return fetch(window.location.pathname + 'restservices/clds/v2/policies/' + policyModelType + '/'
+      + policyModelVersion + '/' + policyName + '/' + policyVersion, {
+      method: 'DELETE',
+      credentials: 'same-origin'
+    })
+      .then(function (response) {
+        console.debug("deletePolicy response received: ", response.status);
+        if (response.ok) {
+          console.info("deletePolicy query successful");
+          return response.text();
+        } else {
+          return response.text().then(responseBody => {
+            throw new Error("HTTP " + response.status + "," + responseBody);
+          })
+        }
+      })
+      .catch(function (error) {
+        console.error("deletePolicy error occurred ", error);
+        alert("deletePolicy error occurred " + error);
+        return undefined;
+      });
+  }
+}
diff --git a/gui-clamp/ui-react/src/api/PolicyToscaService.js b/gui-clamp/ui-react/src/api/PolicyToscaService.js
new file mode 100644
index 0000000..b5282f9
--- /dev/null
+++ b/gui-clamp/ui-react/src/api/PolicyToscaService.js
@@ -0,0 +1,136 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP CLAMP
+ * ================================================================================
+ * Copyright (C) 2019, 2021 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============================================
+ * ===================================================================
+ *
+ */
+
+export default class PolicyToscaService {
+  static getToscaPolicyModels() {
+    return fetch(window.location.pathname + 'restservices/clds/v2/policyToscaModels', { method: 'GET', credentials: 'same-origin' })
+      .then(function (response) {
+        console.debug("getToscaPolicyModels response received: ", response.status);
+        if (response.ok) {
+          return response.json();
+        } else {
+          console.error("getToscaPolicyModels query failed");
+          return {};
+        }
+      })
+      .catch(function (error) {
+        console.error("getToscaPolicyModels error received", error);
+        return {};
+      });
+  }
+
+  static getToscaPolicyModelYaml(policyModelType, policyModelVersion) {
+    return fetch(window.location.pathname + 'restservices/clds/v2/policyToscaModels/yaml/' + policyModelType + "/" + policyModelVersion, {
+      method: 'GET',
+      credentials: 'same-origin'
+    })
+      .then(function (response) {
+        console.debug("getToscaPolicyModelYaml response received: ", response.status);
+        if (response.ok) {
+          return response.json();
+        } else {
+          console.error("getToscaPolicyModelYaml query failed");
+          return "";
+        }
+      })
+      .catch(function (error) {
+        console.error("getToscaPolicyModelYaml error received", error);
+        return "";
+      });
+  }
+
+  static getToscaPolicyModel(policyModelType, policyModelVersion) {
+    return fetch(window.location.pathname + 'restservices/clds/v2/policyToscaModels/' + policyModelType + "/" + policyModelVersion, {
+      method: 'GET',
+      credentials: 'same-origin'
+    })
+      .then(function (response) {
+        console.debug("getToscaPolicyModel response received: ", response.status);
+        if (response.ok) {
+          return response.json();
+        } else {
+          console.error("getToscaPolicyModel query failed");
+          return {};
+        }
+      })
+      .catch(function (error) {
+        console.error("getToscaPolicyModel error received", error);
+        return {};
+      });
+  }
+
+  static createPolicyModelFromToscaModel(jsonData) {
+    return fetch(window.location.pathname + 'restservices/clds/v2/policyToscaModels', {
+      method: 'POST',
+      credentials: 'same-origin',
+      headers: {
+        "Content-Type": "a",
+      },
+      body: JSON.stringify(jsonData)
+    })
+      .then(function (response) {
+        console.debug("createPolicyModelFromToscaModel response received: ", response.status);
+        if (response.ok) {
+          var message = {
+            status: response.status,
+            message: 'Tosca Policy Model successfully uploaded'
+          };
+          return message;
+        } else {
+          console.error("createPolicyModelFromToscaModel failed");
+          return response.text();
+        }
+      })
+      .catch(function (error) {
+        console.error("createPolicyModelFromToscaModel error received", error);
+        return "";
+      });
+  }
+
+  static updatePolicyModelTosca(policyModelType, policyModelVersion, jsonData) {
+    return fetch(window.location.pathname + 'restservices/clds/v2/policyToscaModels/' + policyModelType + '/' + policyModelVersion, {
+      method: 'PUT',
+      credentials: 'same-origin',
+      headers: {
+        "Content-Type": "a",
+      },
+      body: JSON.stringify(jsonData)
+    })
+      .then(function (response) {
+        console.debug("updatePolicyModelTosca response received: ", response.status);
+        if (response.ok) {
+          var message = {
+            status: response.status,
+            message: 'Tosca Policy Model successfully uploaded'
+          };
+          return message;
+        } else {
+          console.error("updatePolicyModelTosca failed");
+          return response.text();
+        }
+      })
+      .catch(function (error) {
+        console.error("updatePolicyModelTosca error received", error);
+        return "";
+      });
+  }
+}
diff --git a/gui-clamp/ui-react/src/api/TemplateService.js b/gui-clamp/ui-react/src/api/TemplateService.js
new file mode 100644
index 0000000..a6e386e
--- /dev/null
+++ b/gui-clamp/ui-react/src/api/TemplateService.js
@@ -0,0 +1,197 @@
+/*-
+ * ============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============================================
+ * ===================================================================
+ *
+ */
+
+export default class TemplateService {
+
+  static getLoopNames() {
+    return fetch(window.location.pathname + 'restservices/clds/v2/loop/getAllNames', { method: 'GET', credentials: 'same-origin' })
+      .then(function (response) {
+        console.debug("getLoopNames response received: ", response.status);
+        if (response.ok) {
+          return response.json();
+        } else {
+          console.error("getLoopNames query failed");
+          return {};
+        }
+      })
+      .catch(function (error) {
+        console.error("getLoopNames error received", error);
+        return {};
+      });
+  }
+
+  static getAllLoopTemplates() {
+    return fetch(window.location.pathname + 'restservices/clds/v2/templates', { method: 'GET', credentials: 'same-origin', })
+      .then(function (response) {
+        console.debug("getAllLoopTemplates response received: ", response.status);
+        if (response.ok) {
+          return response.json();
+        } else {
+          console.error("getAllLoopTemplates query failed");
+          return {};
+        }
+      })
+      .catch(function (error) {
+        console.error("getAllLoopTemplates error received", error);
+        return {};
+      });
+  }
+
+  static getDictionary() {
+    return fetch(window.location.pathname + 'restservices/clds/v2/dictionary/', { method: 'GET', credentials: 'same-origin', })
+      .then(function (response) {
+        console.debug("getDictionary response received: ", response.status);
+        if (response.ok) {
+          return response.json();
+        } else {
+          console.error("getDictionary query failed");
+          return {};
+        }
+      })
+      .catch(function (error) {
+        console.error("getDictionary error received", error);
+        return {};
+      });
+  }
+
+  static getDictionaryElements(dictionaryName) {
+    return fetch(window.location.pathname + 'restservices/clds/v2/dictionary/' + dictionaryName, {
+      method: 'GET',
+      headers: {
+        "Content-Type": "application/json",
+      },
+      credentials: 'same-origin',
+    })
+      .then(function (response) {
+        console.debug("getDictionaryElements response received: ", response.status);
+        if (response.ok) {
+          return response.json();
+        } else {
+          console.error("getDictionaryElements query failed");
+          return {};
+        }
+      })
+      .catch(function (error) {
+        console.error("getDictionaryElements error received", error);
+        return {};
+      });
+  }
+
+  static insDictionary(jsonData) {
+    console.log("dictionaryName is", jsonData.name)
+    return fetch(window.location.pathname + 'restservices/clds/v2/dictionary/', {
+      method: 'PUT',
+      credentials: 'same-origin',
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(jsonData)
+    })
+      .then(function (response) {
+        console.debug("insDictionary response received: ", response.status);
+        if (response.ok) {
+          return response.status;
+        } else {
+          var errorMessage = response.status;
+          console.error("insDictionary query failed", response.status);
+          return errorMessage;
+        }
+      })
+      .catch(function (error) {
+        console.error("insDictionary error received", error);
+        return "";
+      });
+  }
+
+  static insDictionaryElements(jsonData) {
+    console.log("dictionaryName is", jsonData.name)
+    return fetch(window.location.pathname + 'restservices/clds/v2/dictionary/' + jsonData.name, {
+      method: 'PUT',
+      credentials: 'same-origin',
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(jsonData)
+    })
+      .then(function (response) {
+        console.debug("insDictionary response received: ", response.status);
+        if (response.ok) {
+          return response.status;
+        } else {
+          var errorMessage = response.status;
+          console.error("insDictionary query failed", response.status);
+          return errorMessage;
+        }
+      })
+      .catch(function (error) {
+        console.error("insDictionary error received", error);
+        return "";
+      });
+  }
+
+  static deleteDictionary(dictionaryName) {
+    console.log("inside templaemenu service", dictionaryName)
+    return fetch(window.location.pathname + 'restservices/clds/v2/dictionary/' + dictionaryName, {
+      method: 'DELETE',
+      headers: {
+        "Content-Type": "application/json",
+      },
+      credentials: 'same-origin',
+    })
+      .then(function (response) {
+        console.debug("deleteDictionary response received: ", response.status);
+        if (response.ok) {
+          return response.status;
+        } else {
+          console.error("deleteDictionary query failed");
+          return {};
+        }
+      })
+      .catch(function (error) {
+        console.error("deleteDictionary error received", error);
+        return {};
+      });
+  }
+
+  static deleteDictionaryElements(dictionaryData) {
+    return fetch(window.location.pathname + 'restservices/clds/v2/dictionary/' + dictionaryData.name + '/elements/' + dictionaryData.shortName, {
+      method: 'DELETE',
+      headers: {
+        "Content-Type": "application/json",
+      },
+      credentials: 'same-origin',
+    })
+      .then(function (response) {
+        console.debug("deleteDictionary response received: ", response.status);
+        if (response.ok) {
+          return response.status;
+        } else {
+          console.error("deleteDictionary query failed");
+          return {};
+        }
+      })
+      .catch(function (error) {
+        console.error("deleteDictionary error received", error);
+        return {};
+      });
+  }
+}
diff --git a/gui-clamp/ui-react/src/api/UserService.js b/gui-clamp/ui-react/src/api/UserService.js
new file mode 100644
index 0000000..bcf46ea
--- /dev/null
+++ b/gui-clamp/ui-react/src/api/UserService.js
@@ -0,0 +1,75 @@
+/*-
+ * ============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============================================
+ * ===================================================================
+ *
+ */
+
+export default class UserService {
+  static notLoggedUserName = 'Anonymous';
+
+  static login() {
+    return fetch(window.location.pathname + 'restservices/clds/v1/user/getUser', {
+      method: 'GET',
+      credentials: 'same-origin'
+    })
+      .then(function (response) {
+        console.debug("getUser response received, status code:", response.status);
+        if (response.ok) {
+          return response.text();
+        } else {
+          console.error("getUser response is nok");
+          return UserService.notLoggedUserName;
+        }
+      })
+      .then(function (data) {
+        console.info("User connected:", data)
+        return data;
+      })
+      .catch(function (error) {
+        console.warn("getUser error received, user set to: ", UserService.notLoggedUserName);
+        console.error("getUser error:", error);
+        return UserService.notLoggedUserName;
+      });
+  }
+
+  static getUserInfo() {
+    return fetch(window.location.pathname + 'restservices/clds/v2/clampInformation', {
+      method: 'GET',
+      credentials: 'same-origin'
+    })
+      .then(function (response) {
+        console.debug("getUserInfo response received, status code:", response.status);
+        if (response.ok) {
+          return response.json();
+        } else {
+          return {}
+        }
+      })
+      .then(function (data) {
+        console.info("User info received:", data)
+        return data;
+      })
+      .catch(function (error) {
+        console.warn("getUserInfo error received, user set to: ", UserService.notLoggedUserName);
+        console.error("getUserInfo error:", error);
+        return {};
+      });
+  }
+}
diff --git a/gui-clamp/ui-react/src/components/dialogs/Loop/CreateLoopModal.js b/gui-clamp/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
new file mode 100644
index 0000000..690dcbb
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
@@ -0,0 +1,193 @@
+/*-
+ * ============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/gui-clamp/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js b/gui-clamp/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js
new file mode 100644
index 0000000..401bb6a
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js
@@ -0,0 +1,144 @@
+/*-
+ * ============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/gui-clamp/ui-react/src/components/dialogs/Loop/DeployLoopModal.js b/gui-clamp/ui-react/src/components/dialogs/Loop/DeployLoopModal.js
new file mode 100644
index 0000000..b7ab8a5
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/Loop/DeployLoopModal.js
@@ -0,0 +1,183 @@
+/*-
+ * ============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/gui-clamp/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js b/gui-clamp/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js
new file mode 100644
index 0000000..0c68f23
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js
@@ -0,0 +1,114 @@
+/*-
+ * ============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");
+  });
+});
diff --git a/gui-clamp/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js b/gui-clamp/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js
new file mode 100644
index 0000000..6917713
--- /dev/null
+++ b/gui-clamp/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/gui-clamp/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.test.js b/gui-clamp/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.test.js
new file mode 100644
index 0000000..a9c5903
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.test.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 { 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/gui-clamp/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js b/gui-clamp/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js
new file mode 100644
index 0000000..8f8b74d
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js
@@ -0,0 +1,269 @@
+/*-
+ * ============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/gui-clamp/ui-react/src/components/dialogs/Loop/ModifyLoopModal.test.js b/gui-clamp/ui-react/src/components/dialogs/Loop/ModifyLoopModal.test.js
new file mode 100644
index 0000000..79267af
--- /dev/null
+++ b/gui-clamp/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");
+  });
+});
diff --git a/gui-clamp/ui-react/src/components/dialogs/Loop/OpenLoopModal.js b/gui-clamp/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
new file mode 100644
index 0000000..b6407fb
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
@@ -0,0 +1,139 @@
+/*-
+ * ============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/gui-clamp/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js b/gui-clamp/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js
new file mode 100644
index 0000000..6b2dc4a
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js
@@ -0,0 +1,93 @@
+/*-
+ * ============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/gui-clamp/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap
new file mode 100644
index 0000000..1ba9dba
--- /dev/null
+++ b/gui-clamp/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(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(Modal)>
+`;
diff --git a/gui-clamp/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap
new file mode 100644
index 0000000..4779ced
--- /dev/null
+++ b/gui-clamp/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(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(Modal)>
+`;
diff --git a/gui-clamp/ui-react/src/components/dialogs/Loop/__snapshots__/LoopPropertiesModal.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/Loop/__snapshots__/LoopPropertiesModal.test.js.snap
new file mode 100644
index 0000000..3baaa57
--- /dev/null
+++ b/gui-clamp/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(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(Modal)>
+`;
diff --git a/gui-clamp/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap
new file mode 100644
index 0000000..581fd0e
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap
@@ -0,0 +1,137 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify OpenLoopModal Test the render method 1`] = `
+<Styled(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>
+        <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(Modal)>
+`;
diff --git a/gui-clamp/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js b/gui-clamp/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js
new file mode 100644
index 0000000..d7ba8d1
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js
@@ -0,0 +1,637 @@
+/*-
+ * ============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/gui-clamp/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.test.js b/gui-clamp/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.test.js
new file mode 100644
index 0000000..2552d7a
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.test.js
@@ -0,0 +1,465 @@
+/*-
+ * ============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/gui-clamp/ui-react/src/components/dialogs/ManageDictionaries/__snapshots__/ManageDictionaries.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/ManageDictionaries/__snapshots__/ManageDictionaries.test.js.snap
new file mode 100644
index 0000000..6b58363
--- /dev/null
+++ b/gui-clamp/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(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(Modal)>
+`;
diff --git a/gui-clamp/ui-react/src/components/dialogs/PerformActions.js b/gui-clamp/ui-react/src/components/dialogs/PerformActions.js
new file mode 100644
index 0000000..ba7c99d
--- /dev/null
+++ b/gui-clamp/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/gui-clamp/ui-react/src/components/dialogs/PerformActions.test.js b/gui-clamp/ui-react/src/components/dialogs/PerformActions.test.js
new file mode 100644
index 0000000..74c9145
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/PerformActions.test.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 { 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/gui-clamp/ui-react/src/components/dialogs/Policy/PolicyEditor.js b/gui-clamp/ui-react/src/components/dialogs/Policy/PolicyEditor.js
new file mode 100644
index 0000000..525d66b
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/Policy/PolicyEditor.js
@@ -0,0 +1,217 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP POLICY-CLAMP
+ * ================================================================================
+ * Copyright (C) 2021 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 PolicyToscaService from '../../../api/PolicyToscaService';
+import { JSONEditor } from '@json-editor/json-editor/dist/nonmin/jsoneditor.js';
+import "@fortawesome/fontawesome-free/css/all.css"
+import styled from 'styled-components';
+import Button from 'react-bootstrap/Button';
+import TextField from '@material-ui/core/TextField';
+import Alert from 'react-bootstrap/Alert';
+import PolicyService from '../../../api/PolicyService';
+import OnapUtils from '../../../utils/OnapUtils';
+import uuid from 'react-uuid';
+
+//const JSONEditor = require("@json-editor/json-editor").JSONEditor;
+const DivWhiteSpaceStyled = styled.div`
+  white-space: pre;
+`
+
+const JsonEditorDiv = styled.div`
+  margin-top: 20px;
+  background-color: ${ props => props.theme.loopViewerBackgroundColor };
+  text-align: justify;
+  font-size: ${ props => props.theme.policyEditorFontSize };
+  border: 1px solid #C0C0C0;
+`
+const PanelDiv = styled.div`
+  margin-top: 20px;
+  text-align: justify;
+  font-size: ${ props => props.theme.policyEditorFontSize };
+  background-color: ${ props => props.theme.loopViewerBackgroundColor };
+`
+
+export default class PolicyEditor extends React.Component {
+
+  state = {
+    policyModelType: this.props.policyModelType,
+    policyModelTypeVersion: this.props.policyModelTypeVersion,
+    policyName: (typeof this.props.policyName !== "undefined") ? this.props.policyName : "org.onap.policy.new",
+    policyVersion: (typeof this.props.policyVersion !== "undefined") ? this.props.policyVersion : "0.0.1",
+    policyProperties: this.props.policyProperties,
+    showSuccessAlert: false,
+    showFailAlert: false,
+    jsonEditor: null,
+    jsonEditorDivId: uuid(),
+  }
+
+  constructor(props, context) {
+    super(props, context);
+    this.createJsonEditor = this.createJsonEditor.bind(this);
+    this.getToscaModelForPolicy = this.getToscaModelForPolicy.bind(this);
+    this.disableAlert = this.disableAlert.bind(this);
+    this.handleCreateNewVersion = this.handleCreateNewVersion.bind(this);
+    this.handleChangePolicyName = this.handleChangePolicyName.bind(this);
+    this.handleChangePolicyVersion = this.handleChangePolicyVersion.bind(this);
+  }
+
+  disableAlert() {
+    this.setState({ showSuccessAlert: false, showFailAlert: false });
+  }
+
+  customValidation(editorData) {
+    // method for sub-classes to override with customized validation
+    return [];
+  }
+
+  handleCreateNewVersion() {
+    var editorData = this.state.jsonEditor.getValue();
+    var errors = this.state.jsonEditor.validate();
+    errors = errors.concat(this.customValidation(editorData));
+
+    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");
+      PolicyService.createNewPolicy(this.state.policyModelType, this.state.policyModelTypeVersion,
+        this.state.policyName, this.state.policyVersion, editorData).then(respPolicyCreation => {
+        if (typeof (respPolicyCreation) === "undefined") {
+          //it indicates a failure
+          this.setState({
+            showFailAlert: true,
+            showMessage: 'Policy Creation Failure'
+          });
+        } else {
+          this.setState({
+            showSuccessAlert: true,
+            showMessage: 'Policy ' + this.state.policyName + '/' + this.state.policyVersion + ' created successfully'
+          });
+          this.props.policyUpdateFunction();
+        }
+      })
+    }
+  }
+
+  bumpVersion(versionToBump) {
+    let semVer = versionToBump.split(".");
+    return parseInt(semVer[0]) + 1 + "." + semVer[1] + "." + semVer[2];
+  }
+
+  getToscaModelForPolicy() {
+    PolicyToscaService.getToscaPolicyModel(this.state.policyModelType, this.state.policyModelTypeVersion).then(respJsonPolicyTosca => {
+      if (respJsonPolicyTosca !== {}) {
+        this.setState({
+          jsonSchemaPolicyTosca: respJsonPolicyTosca,
+          jsonEditor: this.createJsonEditor(respJsonPolicyTosca, this.state.policyProperties),
+        })
+      }
+    });
+  }
+
+  componentDidMount() {
+    this.getToscaModelForPolicy();
+  }
+
+  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(this.state.jsonEditorDivId),
+      {
+        schema: toscaModel,
+        startval: editorData,
+        //theme: 'myBootstrap4',
+        theme: 'bootstrap4',
+        iconlib: 'fontawesome5',
+        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
+      })
+  }
+
+  handleChangePolicyName(event) {
+    this.setState({
+      policyName: event.target.value,
+    });
+  }
+
+  handleChangePolicyVersion(event) {
+    this.setState({
+      policyVersion: event.target.value,
+    });
+  }
+
+  render() {
+    return (
+      <PanelDiv>
+        <Alert variant="success" show={ this.state.showSuccessAlert } 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>
+        <TextField required id="policyName" label="Required" defaultValue={ this.state.policyName }
+                   onChange={ this.handleChangePolicyName } variant="outlined" size="small"/>
+        <TextField required id="policyVersion" label="Required" defaultValue={ this.state.policyVersion }
+                   onChange={ this.handleChangePolicyVersion } size="small" variant="outlined"/>
+        <Button variant="secondary" title="Create a new policy version from the defined parameters"
+                onClick={ this.handleCreateNewVersion }>Create New Version</Button>
+        <JsonEditorDiv id={ this.state.jsonEditorDivId } title="Policy Properties"/>
+      </PanelDiv>
+    );
+  }
+}
diff --git a/gui-clamp/ui-react/src/components/dialogs/Policy/PolicyModal.js b/gui-clamp/ui-react/src/components/dialogs/Policy/PolicyModal.js
new file mode 100644
index 0000000..105b2c5
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/Policy/PolicyModal.js
@@ -0,0 +1,364 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP POLICY-CLAMP
+ * ================================================================================
+ * Copyright (C) 2020-2021 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/dist/jsoneditor.js';
+import "@fortawesome/fontawesome-free/css/all.css"
+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: 'bootstrap4',
+        iconlib: 'fontawesome5',
+        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/gui-clamp/ui-react/src/components/dialogs/Policy/PolicyModal.test.js b/gui-clamp/ui-react/src/components/dialogs/Policy/PolicyModal.test.js
new file mode 100644
index 0000000..734f22e
--- /dev/null
+++ b/gui-clamp/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");
+  });
+});
diff --git a/gui-clamp/ui-react/src/components/dialogs/Policy/ToscaViewer.js b/gui-clamp/ui-react/src/components/dialogs/Policy/ToscaViewer.js
new file mode 100644
index 0000000..ce4edce
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/Policy/ToscaViewer.js
@@ -0,0 +1,67 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP POLICY-CLAMP
+ * ================================================================================
+ * Copyright (C) 2021 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 PolicyToscaService from '../../../api/PolicyToscaService';
+import styled from 'styled-components';
+import Button from 'react-bootstrap/Button';
+
+const JsonEditorDiv = styled.div`
+  margin-top: 20px;
+  background-color: ${ props => props.theme.toscaTextareaBackgroundColor };
+  text-align: justify;
+  font-size: ${ props => props.theme.toscaTextareaFontSize };
+  width: 100%;
+  height: 30%;
+`
+
+export default class ToscaViewer extends React.Component {
+
+  state = {
+    toscaData: this.props.toscaData,
+    yamlPolicyTosca: this.getToscaModelYamlFor(this.props.toscaData),
+  }
+
+  constructor(props, context) {
+    super(props, context);
+    this.getToscaModelYamlFor = this.getToscaModelYamlFor.bind(this);
+  }
+
+  getToscaModelYamlFor(toscaData) {
+    PolicyToscaService.getToscaPolicyModelYaml(toscaData["policyModelType"], toscaData["version"]).then(respYamlPolicyTosca => {
+      this.setState({
+        yamlPolicyTosca: respYamlPolicyTosca,
+      })
+    });
+  }
+
+  render() {
+    return (
+      <JsonEditorDiv>
+        <pre>{ this.state.yamlPolicyTosca }</pre>
+        <Button variant="secondary" title="Create a new policy version from the defined parameters"
+                onClick={ this.handleCreateNewVersion }>Create New Version</Button>
+      </JsonEditorDiv>
+    );
+  }
+}
diff --git a/gui-clamp/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js b/gui-clamp/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js
new file mode 100644
index 0000000..a97deea
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js
@@ -0,0 +1,427 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP POLICY-CLAMP
+ * ================================================================================
+ * Copyright (C) 2021 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 AddBox from '@material-ui/icons/AddBox';
+import ArrowDownward from '@material-ui/icons/ArrowDownward';
+import Check from '@material-ui/icons/Check';
+import ChevronLeft from '@material-ui/icons/ChevronLeft';
+import ChevronRight from '@material-ui/icons/ChevronRight';
+import Clear from '@material-ui/icons/Clear';
+import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
+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 SaveAlt from '@material-ui/icons/SaveAlt';
+import Search from '@material-ui/icons/Search';
+import ViewColumn from '@material-ui/icons/ViewColumn';
+import DehazeIcon from '@material-ui/icons/Dehaze';
+import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
+import AddIcon from '@material-ui/icons/Add';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Switch from '@material-ui/core/Switch';
+import MaterialTable from "material-table";
+import PolicyService from '../../../api/PolicyService';
+import PolicyToscaService from '../../../api/PolicyToscaService';
+import Select from 'react-select';
+import Alert from 'react-bootstrap/Alert';
+import Tabs from 'react-bootstrap/Tabs';
+import Tab from 'react-bootstrap/Tab';
+import PolicyEditor from './PolicyEditor';
+import ToscaViewer from './ToscaViewer';
+
+const DivWhiteSpaceStyled = styled.div`
+  white-space: pre;
+`
+
+const ModalStyled = styled(Modal)`
+  @media (min-width: 1000px) {
+    .modal-xl {
+      max-width: 96%;
+    }
+  }
+  background-color: transparent;
+`
+const DetailedRow = styled.div`
+  margin: 0 auto;
+  background-color: ${ props => props.theme.policyEditorBackgroundColor };
+  font-size: ${ props => props.theme.policyEditorFontSize };
+  width: 97%;
+  margin-left: auto;
+  margin-right: 0;
+`
+
+
+const standardCellStyle = { backgroundColor: '#039be5', color: '#FFF', border: '1px solid black' };
+const cellPdpGroupStyle = { backgroundColor: '#039be5', color: '#FFF', 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 ViewAllPolicies extends React.Component {
+  state = {
+    show: true,
+    content: 'Please select a policy to display it',
+    selectedRowId: -1,
+    policiesListData: [],
+    toscaModelsListData: [],
+    jsonEditorForPolicy: new Map(),
+    prefixGrouping: false,
+    showSuccessAlert: false,
+    showFailAlert: false,
+    policyColumnsDefinition: [
+      {
+        title: "Policy Name", field: "name",
+        cellStyle: standardCellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Policy Version", field: "version",
+        cellStyle: standardCellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Policy Type", field: "type",
+        cellStyle: standardCellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Policy Type Version", field: "type_version",
+        cellStyle: standardCellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Deployed in PDP", field: "pdpGroupInfo.pdpGroup",
+        cellStyle: cellPdpGroupStyle,
+        headerStyle: headerStyle,
+        render: rowData => this.renderPdpGroupDropBox(rowData),
+        grouping: false
+      },
+      {
+        title: "PDP Group", field: "pdpGroupInfo.pdpGroup",
+        cellStyle: cellPdpGroupStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "PDP SubGroup", field: "pdpGroupInfo.pdpSubGroup",
+        cellStyle: cellPdpGroupStyle,
+        headerStyle: headerStyle
+      }
+    ],
+    toscaColumnsDefinition: [
+      {
+        title: "Policy Model Type", field: "policyModelType",
+        cellStyle: standardCellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Policy Acronym", field: "policyAcronym",
+        cellStyle: standardCellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Version", field: "version",
+        cellStyle: standardCellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Uploaded By", field: "updatedBy",
+        cellStyle: standardCellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Uploaded Date", field: "updatedDate", editable: 'never',
+        cellStyle: standardCellStyle,
+        headerStyle: headerStyle
+      }
+    ],
+    tableIcons: {
+      Add: forwardRef((props, ref) => <AddBox { ...props } ref={ ref }/>),
+      Check: forwardRef((props, ref) => <Check { ...props } ref={ ref }/>),
+      Clear: forwardRef((props, ref) => <Clear { ...props } ref={ ref }/>),
+      Delete: forwardRef((props, ref) => <DeleteRoundedIcon { ...props } ref={ ref }/>),
+      DetailPanel: forwardRef((props, ref) => <ChevronRight { ...props } ref={ ref }/>),
+      Edit: forwardRef((props, ref) => <Edit { ...props } ref={ ref }/>),
+      Export: forwardRef((props, ref) => <SaveAlt { ...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) => <ArrowDownward { ...props } ref={ ref }/>),
+      ThirdStateCheck: forwardRef((props, ref) => <Remove { ...props } ref={ ref }/>),
+      ViewColumn: forwardRef((props, ref) => <ViewColumn { ...props } ref={ ref }/>)
+    }
+  };
+
+  constructor(props, context) {
+    super(props, context);
+    this.handleClose = this.handleClose.bind(this);
+    this.renderPdpGroupDropBox = this.renderPdpGroupDropBox.bind(this);
+    this.handlePdpGroupChange = this.handlePdpGroupChange.bind(this);
+    this.handlePrefixGrouping = this.handlePrefixGrouping.bind(this);
+    this.handleDeletePolicy = this.handleDeletePolicy.bind(this);
+    this.disableAlert = this.disableAlert.bind(this);
+    this.getAllPolicies = this.getAllPolicies.bind(this);
+    this.getAllToscaModels = this.getAllToscaModels.bind(this);
+    this.getAllPolicies();
+    this.getAllToscaModels();
+  }
+
+  getAllToscaModels() {
+    PolicyToscaService.getToscaPolicyModels().then(toscaModelsList => {
+      this.setState({ toscaModelsListData: toscaModelsList });
+    });
+  }
+
+  handlePdpGroupChange(e) {
+    let pdpSplit = e.value.split("/");
+    let selectedPdpGroup = pdpSplit[0];
+    let selectedSubPdpGroup = pdpSplit[1];
+    if (typeof selectedSubPdpGroup !== "undefined") {
+      let temp = this.state.policiesListData;
+      temp[this.state.selectedRowId]["pdpGroupInfo"] = { "pdpGroup": selectedPdpGroup, "pdpSubGroup": selectedSubPdpGroup };
+      this.setState({ policiesListData: temp });
+    } else {
+      delete this.state.policiesListData[this.state.selectedRowId]["pdpGroupInfo"];
+    }
+  }
+
+  renderPdpGroupDropBox(dataRow) {
+    let optionItems = [{ label: "NOT DEPLOYED", value: "NOT DEPLOYED" }];
+    let selectedItem = { label: "NOT DEPLOYED", value: "NOT DEPLOYED" };
+    if (typeof dataRow.supportedPdpGroups !== "undefined") {
+      for (const pdpGroup of dataRow["supportedPdpGroups"]) {
+        for (const pdpSubGroup of Object.values(pdpGroup)[0]) {
+          optionItems.push({
+            label: Object.keys(pdpGroup)[0] + "/" + pdpSubGroup,
+            value: Object.keys(pdpGroup)[0] + "/" + pdpSubGroup
+          });
+        }
+      }
+    }
+    if (typeof dataRow.pdpGroupInfo !== "undefined") {
+      selectedItem = {
+        label: dataRow["pdpGroupInfo"]["pdpGroup"] + "/" + dataRow["pdpGroupInfo"]["pdpSubGroup"],
+        value: dataRow["pdpGroupInfo"]["pdpGroup"] + "/" + dataRow["pdpGroupInfo"]["pdpSubGroup"]
+      };
+    }
+    return (<div style={ { width: '250px' } }><Select value={ selectedItem } options={ optionItems } onChange={ this.handlePdpGroupChange }/></div>);
+  }
+
+  getAllPolicies() {
+    PolicyService.getPoliciesList().then(allPolicies => {
+      this.setState({ policiesListData: allPolicies["policies"] })
+    });
+  }
+
+  handleClose() {
+    this.setState({ show: false });
+    this.props.history.push('/')
+  }
+
+  handlePrefixGrouping(event) {
+    this.setState({ prefixGrouping: event.target.checked });
+  }
+
+  handleDeletePolicy(event, rowData) {
+    PolicyService.deletePolicy(rowData["type"], rowData["type_version"], rowData["name"], rowData["version"]).then(
+      respPolicyDeletion => {
+        if (typeof (respPolicyDeletion) === "undefined") {
+          //it indicates a failure
+          this.setState({
+            showFailAlert: true,
+            showMessage: 'Policy Deletion Failure'
+          });
+        } else {
+          this.setState({
+            showSuccessAlert: true,
+            showMessage: 'Policy successfully Deleted'
+          });
+        }
+        this.getAllPolicies();
+      }
+    )
+  }
+
+  disableAlert() {
+    this.setState({ showSuccessAlert: false, showFailAlert: false });
+  }
+
+  renderPoliciesTab() {
+    return (
+      <Tab eventKey="policies" title="Policies in Policy Framework">
+        <Modal.Body>
+          <FormControlLabel
+            control={ <Switch checked={ this.state.prefixGrouping } onChange={ this.handlePrefixGrouping }/> }
+            label="Group by prefix"
+          />
+          <MaterialTable
+            title={ "Policies" }
+            data={ this.state.policiesListData }
+            columns={ this.state.policyColumnsDefinition }
+            icons={ this.state.tableIcons }
+            onRowClick={ (event, rowData, togglePanel) => togglePanel() }
+            options={ {
+              grouping: true,
+              exportButton: true,
+              headerStyle: rowHeaderStyle,
+              rowStyle: rowData => ({
+                backgroundColor: (this.state.selectedRowId !== -1 && this.state.selectedRowId === rowData.tableData.id) ? '#EEE' : '#FFF'
+              }),
+              actionsColumnIndex: -1
+            } }
+            detailPanel={ [
+              {
+                icon: ArrowForwardIosIcon,
+                tooltip: 'Show Configuration',
+                render: rowData => {
+                  return (
+                    <DetailedRow>
+                      <PolicyEditor policyModelType={ rowData["type"] } policyModelTypeVersion={ rowData["type_version"] } policyName={ rowData["name"] } policyVersion={ rowData["version"] }
+                                    policyProperties={ rowData["properties"] } policyUpdateFunction={ this.getAllPolicies }/>
+                    </DetailedRow>
+                  )
+                },
+              },
+              {
+                icon: DehazeIcon,
+                tooltip: 'Show Raw Data',
+                render: rowData => {
+                  return (
+                    <DetailedRow>
+                      <pre>{ JSON.stringify(rowData, null, 2) }</pre>
+                    </DetailedRow>
+                  )
+                },
+              },
+            ] }
+            actions={ [
+              {
+                icon: forwardRef((props, ref) => <DeleteRoundedIcon { ...props } ref={ ref }/>),
+                tooltip: 'Delete Policy',
+                onClick: (event, rowData) => this.handleDeletePolicy(event, rowData)
+              }
+            ] }
+          />
+        </Modal.Body>
+      </Tab>
+    );
+  }
+
+  renderToscaTab() {
+    return (
+      <Tab eventKey="tosca models" title="Tosca Models in Policy Framework">
+        <Modal.Body>
+          <FormControlLabel
+            control={ <Switch checked={ this.state.prefixGrouping } onChange={ this.handlePrefixGrouping }/> }
+            label="Group by prefix"
+          />
+          <MaterialTable
+            title={ "Tosca Models" }
+            data={ this.state.toscaModelsListData }
+            columns={ this.state.toscaColumnsDefinition }
+            icons={ this.state.tableIcons }
+            onRowClick={ (event, rowData, togglePanel) => togglePanel() }
+            options={ {
+              grouping: true,
+              exportButton: true,
+              headerStyle: rowHeaderStyle,
+              rowStyle: rowData => ({
+                backgroundColor: (this.state.selectedRowId !== -1 && this.state.selectedRowId === rowData.tableData.id) ? '#EEE' : '#FFF'
+              }),
+              actionsColumnIndex: -1
+            } }
+            detailPanel={ [
+              {
+                icon: ArrowForwardIosIcon,
+                tooltip: 'Show Tosca',
+                render: rowData => {
+                  return (
+                    <DetailedRow>
+                      <ToscaViewer toscaData={ rowData }/>
+                    </DetailedRow>
+                  )
+                },
+              },
+              {
+                icon: DehazeIcon,
+                tooltip: 'Show Raw Data',
+                render: rowData => {
+                  return (
+                    <DetailedRow>
+                      <pre>{ JSON.stringify(rowData, null, 2) }</pre>
+                    </DetailedRow>
+                  )
+                },
+              },
+              {
+                icon: AddIcon,
+                tooltip: 'Create a policy from this model',
+                render: rowData => {
+                  return (
+                    <DetailedRow>
+                      <PolicyEditor policyModelType={ rowData["policyModelType"] } policyModelTypeVersion={ rowData["version"] } policyProperties={ {} } policyUpdateFunction={ this.getAllPolicies }/>
+                    </DetailedRow>
+                  )
+                },
+              },
+            ] }
+          />
+        </Modal.Body>
+      </Tab>
+    );
+  }
+
+  render() {
+    return (
+      <ModalStyled size="xl" show={ this.state.show } onHide={ this.handleClose } backdrop="static" keyboard={ false }>
+        <Modal.Header closeButton>
+        </Modal.Header>
+        <Tabs id="controlled-tab-example" activeKey={ this.state.key } onSelect={ key => this.setState({ key, selectedRowData: {} }) }>
+          { this.renderPoliciesTab() }
+          { this.renderToscaTab() }
+        </Tabs>
+        <Alert variant="success" show={ this.state.showSuccessAlert } 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.Footer>
+          <Button variant="secondary" onClick={ this.handleClose }>Close</Button>
+        </Modal.Footer>
+      </ModalStyled>
+    );
+  }
+}
diff --git a/gui-clamp/ui-react/src/components/dialogs/RefreshStatus.js b/gui-clamp/ui-react/src/components/dialogs/RefreshStatus.js
new file mode 100644
index 0000000..e23ab3f
--- /dev/null
+++ b/gui-clamp/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/gui-clamp/ui-react/src/components/dialogs/RefreshStatus.test.js b/gui-clamp/ui-react/src/components/dialogs/RefreshStatus.test.js
new file mode 100644
index 0000000..7736ffd
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/RefreshStatus.test.js
@@ -0,0 +1,72 @@
+/*-
+ * ============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/gui-clamp/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js b/gui-clamp/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
new file mode 100644
index 0000000..7257337
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
@@ -0,0 +1,173 @@
+/*-
+ * ============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/gui-clamp/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js b/gui-clamp/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js
new file mode 100644
index 0000000..d93f0b0
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.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 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/gui-clamp/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap
new file mode 100644
index 0000000..73f6596
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap
@@ -0,0 +1,157 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify ViewLoopTemplatesModal Test the tosca model view render method 1`] = `
+<Styled(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]}
+      variant="secondary"
+    >
+      Close
+    </Button>
+  </ModalFooter>
+</Styled(Modal)>
+`;
diff --git a/gui-clamp/ui-react/src/components/dialogs/UserInfoModal.js b/gui-clamp/ui-react/src/components/dialogs/UserInfoModal.js
new file mode 100644
index 0000000..e58c61a
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/UserInfoModal.js
@@ -0,0 +1,115 @@
+/*-
+ * ============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/gui-clamp/ui-react/src/components/dialogs/UserInfoModal.test.js b/gui-clamp/ui-react/src/components/dialogs/UserInfoModal.test.js
new file mode 100644
index 0000000..7168792
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/UserInfoModal.test.js
@@ -0,0 +1,84 @@
+/*-
+ * ============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/gui-clamp/ui-react/src/components/dialogs/__snapshots__/UserInfoModal.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/__snapshots__/UserInfoModal.test.js.snap
new file mode 100644
index 0000000..7c725bc
--- /dev/null
+++ b/gui-clamp/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(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(Modal)>
+`;
diff --git a/gui-clamp/ui-react/src/components/loop_viewer/logs/LoopLogs.js b/gui-clamp/ui-react/src/components/loop_viewer/logs/LoopLogs.js
new file mode 100644
index 0000000..b03b740
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/loop_viewer/logs/LoopLogs.js
@@ -0,0 +1,98 @@
+/*-
+ * ============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/gui-clamp/ui-react/src/components/loop_viewer/logs/LoopLogs.test.js b/gui-clamp/ui-react/src/components/loop_viewer/logs/LoopLogs.test.js
new file mode 100644
index 0000000..d3a21d8
--- /dev/null
+++ b/gui-clamp/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);
+  });
+});
diff --git a/gui-clamp/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap b/gui-clamp/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap
new file mode 100644
index 0000000..75b817b
--- /dev/null
+++ b/gui-clamp/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(Component)
+    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(Component)>
+</styled.div>
+`;
diff --git a/gui-clamp/ui-react/src/components/loop_viewer/status/LoopStatus.js b/gui-clamp/ui-react/src/components/loop_viewer/status/LoopStatus.js
new file mode 100644
index 0000000..2994c84
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/loop_viewer/status/LoopStatus.js
@@ -0,0 +1,109 @@
+/*-
+* ============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/gui-clamp/ui-react/src/components/loop_viewer/status/LoopStatus.test.js b/gui-clamp/ui-react/src/components/loop_viewer/status/LoopStatus.test.js
new file mode 100644
index 0000000..b84067e
--- /dev/null
+++ b/gui-clamp/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');
+  });
+});
diff --git a/gui-clamp/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap b/gui-clamp/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap
new file mode 100644
index 0000000..73da5ff
--- /dev/null
+++ b/gui-clamp/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(Component)
+      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(Component)>
+  </div>
+</styled.div>
+`;
diff --git a/gui-clamp/ui-react/src/components/loop_viewer/svg/SvgGenerator.js b/gui-clamp/ui-react/src/components/loop_viewer/svg/SvgGenerator.js
new file mode 100644
index 0000000..f5f5047
--- /dev/null
+++ b/gui-clamp/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/gui-clamp/ui-react/src/components/menu/MenuBar.js b/gui-clamp/ui-react/src/components/menu/MenuBar.js
new file mode 100644
index 0000000..8956c8b
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/menu/MenuBar.js
@@ -0,0 +1,128 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP POLICY-CLAMP
+ * ================================================================================
+ * Copyright (C) 2019, 2021 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="POLICY Framework">
+          <NavDropdown.Item as={ StyledLink } to="/viewAllPolicies">View All Policies</NavDropdown.Item>
+        </StyledNavDropdown>
+        <StyledNavDropdown title="CLAMP Options">
+          <NavDropdown.Item as={ StyledLink } to="/manageDictionaries">Tosca Metadata Dictionaries</NavDropdown.Item>
+          <NavDropdown.Divider/>
+          <NavDropdown.Item as={ StyledLink } to="/viewLoopTemplatesModal">View All Loop Templates</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 Framework (SUBMIT)</NavDropdown.Item>
+          <NavDropdown.Item as={ StyledLink } to="/stop" disabled={ this.state.disabled }>Undeploy from Policy Framework (STOP)</NavDropdown.Item>
+          <NavDropdown.Item as={ StyledLink } to="/restart" disabled={ this.state.disabled }>ReDeploy to Policy Framework (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/gui-clamp/ui-react/src/components/menu/MenuBar.test.js b/gui-clamp/ui-react/src/components/menu/MenuBar.test.js
new file mode 100644
index 0000000..81117bb
--- /dev/null
+++ b/gui-clamp/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/gui-clamp/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap b/gui-clamp/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap
new file mode 100644
index 0000000..317c5a0
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap
@@ -0,0 +1,1086 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify MenuBar Test the render method 1`] = `
+<NavbarCollapse>
+  <Styled(NavDropdown)
+    title="POLICY Framework"
+  >
+    <DropdownItem
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": e {
+            "baseHash": 1014106698,
+            "baseStyle": undefined,
+            "componentId": "sc-bdfBwQ",
+            "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],
+              ";
+  }
+",
+            ],
+            "staticRulesId": "",
+          },
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "shouldForwardProp": undefined,
+          "styledComponentId": "sc-bdfBwQ",
+          "target": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "propTypes": Object {
+              "innerRef": [Function],
+              "onClick": [Function],
+              "replace": [Function],
+              "target": [Function],
+              "to": [Function],
+            },
+            "render": [Function],
+          },
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      disabled={false}
+      to="/viewAllPolicies"
+    >
+      View All Policies
+    </DropdownItem>
+  </Styled(NavDropdown)>
+  <Styled(NavDropdown)
+    title="CLAMP Options"
+  >
+    <DropdownItem
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": e {
+            "baseHash": 1014106698,
+            "baseStyle": undefined,
+            "componentId": "sc-bdfBwQ",
+            "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],
+              ";
+  }
+",
+            ],
+            "staticRulesId": "",
+          },
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "shouldForwardProp": undefined,
+          "styledComponentId": "sc-bdfBwQ",
+          "target": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "propTypes": Object {
+              "innerRef": [Function],
+              "onClick": [Function],
+              "replace": [Function],
+              "target": [Function],
+              "to": [Function],
+            },
+            "render": [Function],
+          },
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      disabled={false}
+      to="/manageDictionaries"
+    >
+      Tosca Metadata Dictionaries
+    </DropdownItem>
+    <DropdownDivider
+      role="separator"
+    />
+    <DropdownItem
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": e {
+            "baseHash": 1014106698,
+            "baseStyle": undefined,
+            "componentId": "sc-bdfBwQ",
+            "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],
+              ";
+  }
+",
+            ],
+            "staticRulesId": "",
+          },
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "shouldForwardProp": undefined,
+          "styledComponentId": "sc-bdfBwQ",
+          "target": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "propTypes": Object {
+              "innerRef": [Function],
+              "onClick": [Function],
+              "replace": [Function],
+              "target": [Function],
+              "to": [Function],
+            },
+            "render": [Function],
+          },
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      disabled={false}
+      to="/viewLoopTemplatesModal"
+    >
+      View All Loop Templates
+    </DropdownItem>
+  </Styled(NavDropdown)>
+  <Styled(NavDropdown)
+    title="LOOP Instance"
+  >
+    <DropdownItem
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": e {
+            "baseHash": 1014106698,
+            "baseStyle": undefined,
+            "componentId": "sc-bdfBwQ",
+            "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],
+              ";
+  }
+",
+            ],
+            "staticRulesId": "",
+          },
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "shouldForwardProp": undefined,
+          "styledComponentId": "sc-bdfBwQ",
+          "target": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "propTypes": Object {
+              "innerRef": [Function],
+              "onClick": [Function],
+              "replace": [Function],
+              "target": [Function],
+              "to": [Function],
+            },
+            "render": [Function],
+          },
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      disabled={false}
+      to="/createLoop"
+    >
+      Create
+    </DropdownItem>
+    <DropdownItem
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": e {
+            "baseHash": 1014106698,
+            "baseStyle": undefined,
+            "componentId": "sc-bdfBwQ",
+            "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],
+              ";
+  }
+",
+            ],
+            "staticRulesId": "",
+          },
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "shouldForwardProp": undefined,
+          "styledComponentId": "sc-bdfBwQ",
+          "target": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "propTypes": Object {
+              "innerRef": [Function],
+              "onClick": [Function],
+              "replace": [Function],
+              "target": [Function],
+              "to": [Function],
+            },
+            "render": [Function],
+          },
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      disabled={false}
+      to="/openLoop"
+    >
+      Open
+    </DropdownItem>
+    <DropdownItem
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": e {
+            "baseHash": 1014106698,
+            "baseStyle": undefined,
+            "componentId": "sc-bdfBwQ",
+            "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],
+              ";
+  }
+",
+            ],
+            "staticRulesId": "",
+          },
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "shouldForwardProp": undefined,
+          "styledComponentId": "sc-bdfBwQ",
+          "target": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "propTypes": Object {
+              "innerRef": [Function],
+              "onClick": [Function],
+              "replace": [Function],
+              "target": [Function],
+              "to": [Function],
+            },
+            "render": [Function],
+          },
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      disabled={true}
+      to="/closeLoop"
+    >
+      Close
+    </DropdownItem>
+    <DropdownItem
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": e {
+            "baseHash": 1014106698,
+            "baseStyle": undefined,
+            "componentId": "sc-bdfBwQ",
+            "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],
+              ";
+  }
+",
+            ],
+            "staticRulesId": "",
+          },
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "shouldForwardProp": undefined,
+          "styledComponentId": "sc-bdfBwQ",
+          "target": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "propTypes": Object {
+              "innerRef": [Function],
+              "onClick": [Function],
+              "replace": [Function],
+              "target": [Function],
+              "to": [Function],
+            },
+            "render": [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": e {
+            "baseHash": 1014106698,
+            "baseStyle": undefined,
+            "componentId": "sc-bdfBwQ",
+            "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],
+              ";
+  }
+",
+            ],
+            "staticRulesId": "",
+          },
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "shouldForwardProp": undefined,
+          "styledComponentId": "sc-bdfBwQ",
+          "target": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "propTypes": Object {
+              "innerRef": [Function],
+              "onClick": [Function],
+              "replace": [Function],
+              "target": [Function],
+              "to": [Function],
+            },
+            "render": [Function],
+          },
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      disabled={true}
+      to="/loopProperties"
+    >
+      Properties
+    </DropdownItem>
+    <DropdownItem
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": e {
+            "baseHash": 1014106698,
+            "baseStyle": undefined,
+            "componentId": "sc-bdfBwQ",
+            "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],
+              ";
+  }
+",
+            ],
+            "staticRulesId": "",
+          },
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "shouldForwardProp": undefined,
+          "styledComponentId": "sc-bdfBwQ",
+          "target": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "propTypes": Object {
+              "innerRef": [Function],
+              "onClick": [Function],
+              "replace": [Function],
+              "target": [Function],
+              "to": [Function],
+            },
+            "render": [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": e {
+            "baseHash": 1014106698,
+            "baseStyle": undefined,
+            "componentId": "sc-bdfBwQ",
+            "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],
+              ";
+  }
+",
+            ],
+            "staticRulesId": "",
+          },
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "shouldForwardProp": undefined,
+          "styledComponentId": "sc-bdfBwQ",
+          "target": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "propTypes": Object {
+              "innerRef": [Function],
+              "onClick": [Function],
+              "replace": [Function],
+              "target": [Function],
+              "to": [Function],
+            },
+            "render": [Function],
+          },
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      disabled={true}
+      to="/submit"
+    >
+      Create and deploy to Policy Framework (SUBMIT)
+    </DropdownItem>
+    <DropdownItem
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": e {
+            "baseHash": 1014106698,
+            "baseStyle": undefined,
+            "componentId": "sc-bdfBwQ",
+            "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],
+              ";
+  }
+",
+            ],
+            "staticRulesId": "",
+          },
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "shouldForwardProp": undefined,
+          "styledComponentId": "sc-bdfBwQ",
+          "target": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "propTypes": Object {
+              "innerRef": [Function],
+              "onClick": [Function],
+              "replace": [Function],
+              "target": [Function],
+              "to": [Function],
+            },
+            "render": [Function],
+          },
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      disabled={true}
+      to="/stop"
+    >
+      Undeploy from Policy Framework (STOP)
+    </DropdownItem>
+    <DropdownItem
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": e {
+            "baseHash": 1014106698,
+            "baseStyle": undefined,
+            "componentId": "sc-bdfBwQ",
+            "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],
+              ";
+  }
+",
+            ],
+            "staticRulesId": "",
+          },
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "shouldForwardProp": undefined,
+          "styledComponentId": "sc-bdfBwQ",
+          "target": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "propTypes": Object {
+              "innerRef": [Function],
+              "onClick": [Function],
+              "replace": [Function],
+              "target": [Function],
+              "to": [Function],
+            },
+            "render": [Function],
+          },
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      disabled={true}
+      to="/restart"
+    >
+      ReDeploy to Policy Framework (RESTART)
+    </DropdownItem>
+    <DropdownItem
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": e {
+            "baseHash": 1014106698,
+            "baseStyle": undefined,
+            "componentId": "sc-bdfBwQ",
+            "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],
+              ";
+  }
+",
+            ],
+            "staticRulesId": "",
+          },
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "shouldForwardProp": undefined,
+          "styledComponentId": "sc-bdfBwQ",
+          "target": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "propTypes": Object {
+              "innerRef": [Function],
+              "onClick": [Function],
+              "replace": [Function],
+              "target": [Function],
+              "to": [Function],
+            },
+            "render": [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": e {
+            "baseHash": 1014106698,
+            "baseStyle": undefined,
+            "componentId": "sc-bdfBwQ",
+            "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],
+              ";
+  }
+",
+            ],
+            "staticRulesId": "",
+          },
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "shouldForwardProp": undefined,
+          "styledComponentId": "sc-bdfBwQ",
+          "target": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "propTypes": Object {
+              "innerRef": [Function],
+              "onClick": [Function],
+              "replace": [Function],
+              "target": [Function],
+              "to": [Function],
+            },
+            "render": [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": e {
+            "baseHash": 1014106698,
+            "baseStyle": undefined,
+            "componentId": "sc-bdfBwQ",
+            "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],
+              ";
+  }
+",
+            ],
+            "staticRulesId": "",
+          },
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "shouldForwardProp": undefined,
+          "styledComponentId": "sc-bdfBwQ",
+          "target": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "propTypes": Object {
+              "innerRef": [Function],
+              "onClick": [Function],
+              "replace": [Function],
+              "target": [Function],
+              "to": [Function],
+            },
+            "render": [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": e {
+            "baseHash": 1014106698,
+            "baseStyle": undefined,
+            "componentId": "sc-bdfBwQ",
+            "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],
+              ";
+  }
+",
+            ],
+            "staticRulesId": "",
+          },
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "shouldForwardProp": undefined,
+          "styledComponentId": "sc-bdfBwQ",
+          "target": Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "propTypes": Object {
+              "innerRef": [Function],
+              "onClick": [Function],
+              "replace": [Function],
+              "target": [Function],
+              "to": [Function],
+            },
+            "render": [Function],
+          },
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      disabled={false}
+      to="/userInfo"
+    >
+      User Info
+    </DropdownItem>
+  </Styled(NavDropdown)>
+</NavbarCollapse>
+`;
diff --git a/gui-clamp/ui-react/src/index.js b/gui-clamp/ui-react/src/index.js
new file mode 100644
index 0000000..9baeaee
--- /dev/null
+++ b/gui-clamp/ui-react/src/index.js
@@ -0,0 +1,38 @@
+/*-
+ * ============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 ReactDOM from 'react-dom';
+import OnapClamp from './OnapClamp';
+import { Route, MemoryRouter } from 'react-router-dom'
+
+
+const routing = (
+  <MemoryRouter forceRefresh={ false }>
+    <Route path="/" component={ OnapClamp }/>
+  </MemoryRouter>
+);
+
+export var mainClamp = ReactDOM.render(
+  routing,
+  document.getElementById('root')
+)
diff --git a/gui-clamp/ui-react/src/logo.png b/gui-clamp/ui-react/src/logo.png
new file mode 100644
index 0000000..c6f6857
--- /dev/null
+++ b/gui-clamp/ui-react/src/logo.png
Binary files differ
diff --git a/gui-clamp/ui-react/src/setupTests.js b/gui-clamp/ui-react/src/setupTests.js
new file mode 100644
index 0000000..f553583
--- /dev/null
+++ b/gui-clamp/ui-react/src/setupTests.js
@@ -0,0 +1,28 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP POLICY-CLAMP
+ * ================================================================================
+ * Copyright (C) 2019, 2021 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 { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-17-updated';
+
+configure({ adapter: new Adapter() });
+global.fetch = require('jest-fetch-mock');
\ No newline at end of file
diff --git a/gui-clamp/ui-react/src/theme/globalStyle.js b/gui-clamp/ui-react/src/theme/globalStyle.js
new file mode 100644
index 0000000..5245aae
--- /dev/null
+++ b/gui-clamp/ui-react/src/theme/globalStyle.js
@@ -0,0 +1,98 @@
+/*-
+ * ============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 { createGlobalStyle } from 'styled-components';
+
+export const GlobalClampStyle = createGlobalStyle`
+  body {
+    padding: 0;
+    margin: 0;
+    font-family: ${ props => props.theme.fontFamily };
+    font-size: ${ props => props.theme.fontSize };
+    font-weight: normal;
+  }
+
+  span {
+    font-family: ${ props => props.theme.fontFamily };
+    font-size: ${ props => props.theme.fontSize };
+    font-weight: bold;
+  }
+
+  a {
+    font-family: ${ props => props.theme.fontFamily };
+    font-size: ${ props => props.theme.fontSize };
+    font-weight: bold;
+  }
+
+  div {
+    font-family: ${ props => props.theme.fontFamily };
+    font-size: ${ props => props.theme.fontSize };
+    border-radius: 4px;
+    margin-top: 1px;
+  }
+
+  label {
+    font-family: ${ props => props.theme.fontFamily };
+    font-size: ${ props => props.theme.fontSize };
+    font-weight: bold;
+  }
+
+  button {
+    font-family: ${ props => props.theme.fontFamily };
+    font-size: ${ props => props.theme.fontSize };
+    font-weight: bold;
+  }
+
+`
+
+export const DefaultClampTheme = {
+  fontDanger: '#eb238e',
+  fontWarning: '#eb238e',
+  fontLight: '#ffffff',
+  fontDark: '#888888',
+  fontHighlight: '#ffff00',
+  fontNormal: 'black',
+
+  backgroundColor: '#eeeeee',
+  fontFamily: 'Arial, Sans-serif',
+  fontSize: '16px',
+
+  loopViewerBackgroundColor: 'white',
+  loopViewerFontColor: 'yellow',
+  loopViewerHeaderBackgroundColor: '#337ab7',
+  loopViewerHeaderFontColor: 'white',
+
+  loopLogsHeaderBackgroundColor: 'white',
+  loopLogsHeaderFontColor: 'black',
+
+  menuBackgroundColor: 'white',
+  menuFontColor: 'black',
+  menuHighlightedBackgroundColor: '#337ab7',
+  menuHighlightedFontColor: 'white',
+
+  toscaTextareaBackgroundColor: 'white',
+  toscaTextareaFontSize: '13px',
+
+  policyEditorBackgroundColor: 'white',
+  policyEditorFontSize: '13px'
+};
diff --git a/gui-clamp/ui-react/src/utils/CsvToJson.js b/gui-clamp/ui-react/src/utils/CsvToJson.js
new file mode 100644
index 0000000..6d95b31
--- /dev/null
+++ b/gui-clamp/ui-react/src/utils/CsvToJson.js
@@ -0,0 +1,204 @@
+/*-
+ * ============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============================================
+ * ===================================================================
+ *
+ */
+
+export default function CsvToJson(rawCsvData, delimiter, internalDelimiter, csvHeaderNames, jsonKeyNames, mandatory) {
+
+  let printDictKeys = '';
+  let result = { jsonObjArray: [], errorMessages: '' };
+
+  // Validate that all parallel arrays passed in have same number of elements;
+  // this would be a developer error.
+
+  let checkLength = csvHeaderNames.length;
+
+  if (checkLength !== jsonKeyNames.length || checkLength !== mandatory.length) {
+    result.errorMessages = 'interanl error: csvHeaderNames, jsonKeyNames, and mandatory arrays parameters are not the same length';
+    return result;
+  }
+
+  if (checkLength < 1) {
+    result.errorMessages = 'interanl error: csvHeaderNames, jsonKeyNames, and mandatory arrays have no entries';
+    return result;
+  }
+
+  // Make a nice string to print in the error case to tell user what is the
+  //  required heaer row format
+
+  for (let i = 0; i < csvHeaderNames.length; ++i) {
+    if (i === 0) {
+      printDictKeys = csvHeaderNames[i];
+    } else {
+      printDictKeys += ',' + csvHeaderNames[i];
+    }
+  }
+
+  let dictElems = rawCsvData.split('\n');
+  let numColumns = 0;
+  let filteredDictElems = [];
+
+  // The task of the following loop is to convert raw CSV rows into easily parseable
+  // and streamlined versions of the rows with an internalDelimiter replacing the standard
+  // comma; it is presumed (and checked) that the internalDelimiter cannot exist as a valid
+  // sequence of characters in the user's data.
+
+  // This conversion process also strips leading and trailing whitespace from each row,
+  // discards empty rows, correctly interprets and removes all double quotes that programs like
+  // Excel use to support user columns that contain special characters, most notably, the comma
+  // delimiter. A double-quote that is contained within a double-quoted column value
+  // must appear in this raw data as a sequence of two double quotes. Furthermore, any column
+  // value in the raw CSV data that does not contain a delimiter may or may not be enclosed in
+  // double quotes. It is the Excel convention to not use double qoutes unless necessary, and
+  // there is no reasonable way to tell Excel to surround every column value with double quotes.
+  // Any files that were directly "exported" by CLAMP itself from the Managing Dictionaries
+  // capability, surround all columns with double quotes.
+
+  for (let i = 0; i < dictElems.length; i++) {
+
+    let oneRow = dictElems[i].trim();
+    let j = 0;
+    let inQuote = false
+    let nextChar = undefined;
+    let prevChar = null;
+
+
+    if (oneRow === '') {
+      continue; // Skip blank rows
+    } else if (oneRow.indexOf(internalDelimiter) !== -1) {
+      result.errorMessages += '\nRow #' + i + ' contains illegal sequence of characters (' + internalDelimiter + ')';
+      break;
+    } else {
+      nextChar = oneRow[1];
+    }
+
+    let newStr = '';
+    numColumns = 1;
+
+    // This "while loop" performs the very meticulous task of removing double quotes that
+    // are used by Excel to encase special characters as user string value data,
+    // and manages to correctly identify columns that are defined with or without
+    // double quotes and to process the comma delimiter correctly when encountered
+    // as a user value within a column. Such a column would have to be encased in
+    // double quotes; a comma found outside double quotes IS a delimiter.
+
+    while (j < oneRow.length) {
+      if (oneRow[j] === '"') {
+        if (inQuote === false) {
+          if (prevChar !== delimiter && prevChar !== null) {
+            result.errorMessages += '\nMismatched double quotes or illegal whitespace around delimiter at row #' + (i + 1) + ' near column #' + numColumns;
+            break;
+          } else {
+            inQuote = true;
+          }
+        } else {
+          if (nextChar === '"') {
+            newStr += '"';
+            ++j;
+          } else if ((nextChar !== delimiter) && (nextChar !== undefined)) {
+            result.errorMessages += '\nRow #' + (i + 1) + ' is badly formatted at column #' + numColumns + '. Perhaps an unescaped double quote.';
+            break;
+          } else if (nextChar === delimiter) {
+            ++numColumns;
+            inQuote = false;
+            newStr += internalDelimiter;
+            prevChar = delimiter;
+            j += 2;
+            nextChar = oneRow[j + 1];
+            continue;
+          } else {
+            ++numColumns;
+            inQuote = false;
+            break;
+          }
+        }
+      } else {
+        if (oneRow[j] === delimiter && inQuote === false) {
+          newStr += internalDelimiter;
+          ++numColumns;
+        } else {
+          newStr += oneRow[j];
+        }
+      }
+      prevChar = oneRow[j];
+      ++j;
+      nextChar = oneRow[j + 1]; // can result in undefined at the end
+    }
+
+    if (result.errorMessages === '' && inQuote !== false) {
+      result.errorMessages += '\nMismatched double quotes at row #' + (i + 1);
+      break;
+    } else if (result.errorMessages === '' && numColumns < jsonKeyNames.length) {
+      result.errorMessages += '\nNot enough columns (' + jsonKeyNames.length + ') at row #' + (i + 1);
+      break;
+    }
+
+    filteredDictElems.push(newStr);
+  }
+
+  if (result.errorMessages !== '') {
+    return result;
+  }
+
+  // Perform further checks on data that is now in JSON form
+  if (filteredDictElems.length < 2) {
+    result.errorMessages += '\nNot enough row data found in import file. Need at least a header row and one row of data';
+    return result;
+  }
+
+  // Now that we have something reliably parsed into sanitized columns lets run some checks
+  // and convert it all into an array of JSON objects to push to the back end if all the
+  // checks pass.
+
+  let headers = filteredDictElems[0].split(internalDelimiter);
+
+  // check that headers are included in proper order
+  for (let i = 0; i < jsonKeyNames.length; ++i) {
+    if (csvHeaderNames[i] !== headers[i]) {
+      result.errorMessages += 'Row 1 header key at column #' + (i + 1) + ' is a mismatch. Expected row header must contain at least:\n' + printDictKeys;
+      return result;
+    }
+  }
+
+  // Convert the ASCII rows of data into an array of JSON obects that omit the header
+  // row which is not sent to the back end.
+
+  for (let i = 1; i < filteredDictElems.length; i++) {
+    let data = filteredDictElems[i].split(internalDelimiter);
+    let obj = {};
+    for (let j = 0; j < data.length && j < jsonKeyNames.length; j++) {
+      let value = data[j].trim();
+      if (mandatory[j] === true && value === '') {
+        result.errorMessages += '\n' + csvHeaderNames[j] + ' at row #' + (i + 1) + ' is empty but requires a value.';
+      }
+      obj[jsonKeyNames[j]] = value;
+    }
+    result.jsonObjArray.push(obj);
+  }
+
+  if (result.errorMessages !== '') {
+    // If we have errors, return empty parse result even though some things
+    // may have parsed properly. We do not want to encourage the caller
+    // to think the data is good for use.
+    result.jsonObjArray = [];
+  }
+
+  return result;
+}
diff --git a/gui-clamp/ui-react/src/utils/CsvToJson.test.js b/gui-clamp/ui-react/src/utils/CsvToJson.test.js
new file mode 100644
index 0000000..e36e855
--- /dev/null
+++ b/gui-clamp/ui-react/src/utils/CsvToJson.test.js
@@ -0,0 +1,268 @@
+/*-
+ * ============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 CsvToJson from './CsvToJson'
+
+describe('Verify CsvToJson', () => {
+
+  const hdrNames = [
+    "Element Short Name",
+    "Element Name",
+    "Element Description",
+    "Element Type",
+    "Sub-Dictionary"
+  ];
+
+  const jsonKeyNames = [
+    "shortName",
+    "name",
+    "description",
+    "type",
+    "subDictionary"
+  ];
+
+  const mandatory = [true, true, true, true, false];
+
+  it('Test CsvToJson No Error Case, Quoted Columns', () => {
+
+    let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
+    rawCsv += '"alertType","Alert Type","Type of Alert","string","","admin","2020-06-11T13:56:14.927437Z"';
+
+    let expectedResult = {
+      errorMessages: '',
+      jsonObjArray: [
+        {
+          description: "Type of Alert",
+          name: "Alert Type",
+          shortName: "alertType",
+          subDictionary: "",
+          type: "string"
+        }
+      ]
+    };
+
+    expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
+  });
+
+  it('Test CsvToJson No Error Case, Unquoted Columns', () => {
+
+    let rawCsv = 'Element Short Name,Element Name,Element Description,Element Type,Sub-Dictionary\n';
+    rawCsv += 'alertType,Alert Type,Type of Alert,string,,admin,2020-06-11T13:56:14.927437Z';
+
+    let expectedResult = {
+      errorMessages: '',
+      jsonObjArray: [
+        {
+          description: "Type of Alert",
+          name: "Alert Type",
+          shortName: "alertType",
+          subDictionary: "",
+          type: "string"
+        }
+      ]
+    };
+
+    expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
+  });
+
+  it('Test CsvToJson Properly Escaped Double Quote and Delimiter', () => {
+
+    let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
+    rawCsv += '"alertType","Alert ""Type""","Type of Alert, Varies","string","","admin","2020-06-11T13:56:14.927437Z"';
+
+    let errorMessage = '';
+
+    let expectedResult = {
+      errorMessages: errorMessage,
+      jsonObjArray: [
+        {
+          description: "Type of Alert, Varies",
+          name: 'Alert "Type"',
+          shortName: 'alertType',
+          subDictionary: "",
+          type: "string",
+        }
+
+      ]
+    };
+
+    expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
+  });
+
+
+  it('Test CsvToJson Error Header Mismatch Error Case', () => {
+
+    let rawCsv = '"Element Short Names","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
+    rawCsv += '"alertType","Alert Type","Type of Alert","string","","admin","2020-06-11T13:56:14.927437Z"';
+
+    let errorMessage = 'Row 1 header key at column #1 is a mismatch. Expected row header must contain at least:\n';
+    errorMessage += 'Element Short Name,Element Name,Element Description,Element Type,Sub-Dictionary';
+
+    let expectedResult = {
+      errorMessages: errorMessage,
+      jsonObjArray: []
+    };
+
+    expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
+  });
+
+  it('Test CsvToJson Error Mismatched Double Quotes in Column', () => {
+
+    let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
+    rawCsv += '"alert"Type","Alert Type","Type of Alert","string","","admin","2020-06-11T13:56:14.927437Z"';
+
+    let errorMessage = '\nRow #2 is badly formatted at column #1. Perhaps an unescaped double quote.'
+
+    let expectedResult = {
+      errorMessages: errorMessage,
+      jsonObjArray: []
+    };
+
+    expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
+  });
+
+  it('Test CsvToJson Error Illegal Whitespace', () => {
+
+    let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
+    rawCsv += 'alertType ,  "Alert Type","Type of Alert","string","","admin","2020-06-11T13:56:14.927437Z"';
+
+    let errorMessage = '\nMismatched double quotes or illegal whitespace around delimiter at row #2 near column #2';
+
+    let expectedResult = {
+      errorMessages: errorMessage,
+      jsonObjArray: []
+    };
+
+    expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
+  });
+
+  it('Test CsvToJson Error Too Few Data Columns', () => {
+
+    let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
+    rawCsv += '"alertType","Alert Type","Type of Alert"';
+
+    let errorMessage = '\nNot enough columns (5) at row #2';
+
+    let expectedResult = {
+      errorMessages: errorMessage,
+      jsonObjArray: []
+    };
+
+    expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
+  });
+
+  it('Test CsvToJson Error Wrong Header Column Order', () => {
+
+    let rawCsv = '"Element Name","Element Short Name","Element Description","Element Type","Sub-Dictionary"\n';
+    rawCsv += '"alertType","Alert Type","Type of Alert","string","","admin","2020-06-11T13:56:14.927437Z"';
+
+    let errorMessage = 'Row 1 header key at column #1 is a mismatch. Expected row header must contain at least:\n';
+    errorMessage += 'Element Short Name,Element Name,Element Description,Element Type,Sub-Dictionary';
+
+    let expectedResult = {
+      errorMessages: errorMessage,
+      jsonObjArray: []
+    };
+
+    expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
+  });
+
+  it('Test CsvToJson Error Not Enough Rows', () => {
+
+    let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
+
+    let errorMessage = '\nNot enough row data found in import file. Need at least a header row and one row of data';
+
+    let expectedResult = {
+      errorMessages: errorMessage,
+      jsonObjArray: []
+    };
+
+    expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
+  });
+
+  it('Test CsvToJson Error Mandatory Field Is Empty', () => {
+
+    let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
+    rawCsv += '"","Alert Type","Type of Alert","string","","admin","2020-06-11T13:56:14.927437Z"';
+
+    let expectedResult = {
+      errorMessages: '\nElement Short Name at row #2 is empty but requires a value.',
+      jsonObjArray: []
+    };
+
+    expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
+  });
+
+  it('Test CsvToJson Error Mismatched Double Quotes At End', () => {
+
+    let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
+    rawCsv += '"alertType","Alert Type","Alert Type Description","string","admin","2020-06-11T13:56:14.927437Z';
+
+    let expectedResult = {
+      errorMessages: '\nMismatched double quotes at row #2',
+      jsonObjArray: []
+    };
+
+    expect(CsvToJson(rawCsv, ',', '||', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
+  });
+
+  it('Test CsvToJson Error Mismatched Mandatory Array Parameters', () => {
+
+    let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
+    rawCsv += '"alertType","Alert Type","Alert Type Description","string","admin","2020-06-11T13:56:14.927437Z';
+
+    let expectedResult = {
+      errorMessages: 'interanl error: csvHeaderNames, jsonKeyNames, and mandatory arrays parameters are not the same length',
+      jsonObjArray: []
+    };
+
+    expect(CsvToJson(rawCsv, ',', '||', hdrNames, jsonKeyNames, [true])).toEqual(expectedResult);
+  });
+
+  it('Test CsvToJson Error Empty Mandatory Array Parameters', () => {
+
+    let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
+    rawCsv += '"alertType","Alert Type","Alert Type Description","string","admin","2020-06-11T13:56:14.927437Z';
+
+    let expectedResult = {
+      errorMessages: 'interanl error: csvHeaderNames, jsonKeyNames, and mandatory arrays have no entries',
+      jsonObjArray: []
+    };
+
+    expect(CsvToJson(rawCsv, ',', '||', [], [], [])).toEqual(expectedResult);
+  });
+
+  it('Test CsvToJson Error Illegal Data Contains Internal Delimiter', () => {
+
+    let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
+    rawCsv += '"alertType","Alert Type","Alert Type||Description","string","admin","2020-06-11T13:56:14.927437Z';
+
+    let expectedResult = {
+      errorMessages: '\nRow #1 contains illegal sequence of characters (||)',
+      jsonObjArray: []
+    };
+
+    expect(CsvToJson(rawCsv, ',', '||', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
+  });
+})
diff --git a/gui-clamp/ui-react/src/utils/OnapConstants.js b/gui-clamp/ui-react/src/utils/OnapConstants.js
new file mode 100644
index 0000000..c5b96d4
--- /dev/null
+++ b/gui-clamp/ui-react/src/utils/OnapConstants.js
@@ -0,0 +1,32 @@
+/*-
+ * ============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============================================
+ * ===================================================================
+ *
+ */
+
+// Maintain a list of ONAP CLAMP UI "constants" that can be used by any componenet within CLAMP
+
+const OnapConstants = {
+  defaultLoopName: "Empty (NO loop loaded yet)",
+  microServiceType: "MICRO-SERVICE-POLICY",
+  operationalPolicyType: "OPERATIONAL_POLICY_TYPE"
+};
+
+export default OnapConstants;
diff --git a/gui-clamp/ui-react/src/utils/OnapUtils.js b/gui-clamp/ui-react/src/utils/OnapUtils.js
new file mode 100644
index 0000000..9ba9382
--- /dev/null
+++ b/gui-clamp/ui-react/src/utils/OnapUtils.js
@@ -0,0 +1,65 @@
+/*-
+ * ============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============================================
+ * ===================================================================
+ *
+ */
+
+export default class OnapUtils {
+
+  constructor() {
+    this.clickBlocked = false;
+  }
+
+  static jsonEditorErrorFormatter(errors) {
+
+    let messages = [];
+    let messagesOutputString = null;
+
+    // errors is an array of JSON Editor "error" objects, where each
+    // object looks like this:
+
+    // {
+    //   message: "Please populate the required property "Threshold""
+    //   path: "root.signatures.0"
+    //   property: "required"
+    // }
+
+    // In this function we concatenate all the messages, removing any duplicates,
+    // and adding a newline between each message. The result returned is a single
+    // string that can be displayed to the user in an alert message
+
+    if (!Array.isArray(errors)) {
+      console.error('jsoneEditorErrorFormatter was passed a non-array argument');
+    } else {
+      for (let ii = 0; ii < errors.length; ++ii) {
+        if (!messages.includes(errors[ii].message)) {
+          messages.push(errors[ii].message);
+          if (messagesOutputString) {
+            messagesOutputString += '\n' + errors[ii].message;
+          } else {
+            messagesOutputString = errors[ii].message;
+          }
+        }
+      }
+    }
+
+    return messagesOutputString;
+  }
+}
diff --git a/gui-editors/gui-editor-apex/pom.xml b/gui-editors/gui-editor-apex/pom.xml
index 2090e9e..b52631a 100644
--- a/gui-editors/gui-editor-apex/pom.xml
+++ b/gui-editors/gui-editor-apex/pom.xml
@@ -159,7 +159,7 @@
                 <artifactId>frontend-maven-plugin</artifactId>
                 <version>1.9.1</version>
                 <configuration>
-                    <nodeVersion>v12.18.0</nodeVersion>
+                    <nodeVersion>v14.17.0</nodeVersion>
                     <installDirectory>${webapp.dir}</installDirectory>
                     <workingDirectory>${webapp.dir}</workingDirectory>
                     <npmDownloadRoot>${repo.npm}</npmDownloadRoot>
diff --git a/gui-pdp-monitoring/pom.xml b/gui-pdp-monitoring/pom.xml
index 2108d91..4fe4491 100644
--- a/gui-pdp-monitoring/pom.xml
+++ b/gui-pdp-monitoring/pom.xml
@@ -87,7 +87,7 @@
                 <artifactId>frontend-maven-plugin</artifactId>
                 <version>1.9.1</version>
                 <configuration>
-                    <nodeVersion>v12.18.0</nodeVersion>
+                    <nodeVersion>v14.17.0</nodeVersion>
                     <installDirectory>${webapp.dir}</installDirectory>
                     <workingDirectory>${webapp.dir}</workingDirectory>
                     <npmDownloadRoot>${repo.npm}</npmDownloadRoot>
diff --git a/gui-pdp-monitoring/src/webapp/js/MonitoringChart.js b/gui-pdp-monitoring/src/webapp/js/MonitoringChart.js
index 2744469..94a18df 100644
--- a/gui-pdp-monitoring/src/webapp/js/MonitoringChart.js
+++ b/gui-pdp-monitoring/src/webapp/js/MonitoringChart.js
@@ -26,36 +26,36 @@
 function createChart(data, container, title, unit, lineStroke, nodeColour) {
     // Set the dimensions of the canvas
     var margin = {
-        top : 30,
-        right : 20,
-        bottom : 30,
-        left : 50
+        top: 30,
+        right: 20,
+        bottom: 30,
+        left: 50
     }, width = 600 - margin.left - margin.right, height = 270 - margin.top
-            - margin.bottom;
+        - margin.bottom;
 
     // Set the ranges
-    var x = d3.time.scale().range([ 0, width ]);
-    var y = d3.scale.linear().range([ height, 0 ]);
+    var x = d3.time.scale().range([0, width]);
+    var y = d3.scale.linear().range([height, 0]);
 
     // Define the axes
     var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(5).innerTickSize(
-            -height).outerTickSize(0).tickPadding(10);
+        -height).outerTickSize(0).tickPadding(10);
 
     var yAxis = d3.svg.axis().scale(y).orient("left").ticks(10).innerTickSize(
-            -width).outerTickSize(0).tickPadding(10);
+        -width).outerTickSize(0).tickPadding(10);
 
     // Define the line
-    var valueline = d3.svg.line().x(function(d) {
+    var valueline = d3.svg.line().x(function (d) {
         return x(d.timestamp);
-    }).y(function(d) {
+    }).y(function (d) {
         return y(d.value);
     });
 
     // Add the svg canvas to the container
     var svg = d3.select(container).append("svg").attr("preserveAspectRatio",
-            "xMinYMin meet").attr("viewBox", "0 0 600 400").classed(
-            "svg-content-responsive", true).append("g").attr("transform",
-            "translate(" + margin.left + "," + margin.top + ")");
+        "xMinYMin meet").attr("viewBox", "0 0 600 400").classed(
+        "svg-content-responsive", true).append("g").attr("transform",
+        "translate(" + margin.left + "," + margin.top + ")");
 
     // Set the unit for the value
     svg.attr("unit", unit);
@@ -63,12 +63,12 @@
     data = formatDataForChart(data);
 
     // Scale the range of the data
-    x.domain(d3.extent(data, function(d) {
+    x.domain(d3.extent(data, function (d) {
         return d.timestamp;
     }));
-    y.domain([ 0, d3.max(data, function(d) {
+    y.domain([0, d3.max(data, function (d) {
         return Math.ceil((d.value + 1) / 10) * 10;
-    }) ]);
+    })]);
 
     // Set the colour of the line
     if (!lineStroke) {
@@ -82,36 +82,36 @@
 
     // Add the valueline path
     svg.append("path").attr("class", "line").data(data).attr("unit", unit)
-            .attr("stroke", lineStroke).attr("d", valueline(data));
+        .attr("stroke", lineStroke).attr("d", valueline(data));
 
     // Add the scatterplot
     svg.selectAll("circle").data(data).enter().append("circle").attr("r", 3.5)
-            .attr("class", "circle").attr("fill", nodeColour).attr("cx",
-                    function(d) {
-                        return x(d.timestamp);
-                    }).attr("cy", function(d) {
-                return y(d.value);
-            })
+        .attr("class", "circle").attr("fill", nodeColour).attr("cx",
+        function (d) {
+            return x(d.timestamp);
+        }).attr("cy", function (d) {
+        return y(d.value);
+    })
 
-            // Apply the tooltip to each node
-            .on("mouseover", handleMouseOver)
-            .on("mouseout", handleMouseOut);
+        // Apply the tooltip to each node
+        .on("mouseover", handleMouseOver)
+        .on("mouseout", handleMouseOut);
 
     // Add the X Axis
     svg.append("g").attr("class", "x axis").attr("transform",
-            "translate(0," + height + ")").call(xAxis);
+        "translate(0," + height + ")").call(xAxis);
 
     // Add the Y Axis
     svg.append("g").attr("class", "y axis").call(yAxis);
 
     // Add the title
     svg.append("text").attr("x", (width / 2)).attr("y", 0 - (margin.top / 2))
-            .attr("text-anchor", "middle").style("font-size", "16px").style(
-                    "text-decoration", "underline").text(title);
+        .attr("text-anchor", "middle").style("font-size", "16px").style(
+        "text-decoration", "underline").text(title);
 
     // Add the background
     svg.selectAll(".tick:not(:first-of-type) line").attr("stroke", "#777")
-            .attr("stroke-dasharray", "2,2");
+        .attr("stroke-dasharray", "2,2");
 }
 
 /*
@@ -122,8 +122,8 @@
     var data = [];
     for (var i = 0; i < 30; i++) {
         data.push({
-            timestamp : new Date().getTime() - (i * 5000),
-            value : Math.floor(Math.random() * 100) + 1
+            timestamp: new Date().getTime() - (i * 5000),
+            value: Math.floor(Math.random() * 100) + 1
         });
     }
     return data;
@@ -134,12 +134,12 @@
  */
 function updateChart(container, data, nodeColour) {
     var margin = {
-        top : 30,
-        right : 20,
-        bottom : 30,
-        left : 50
+        top: 30,
+        right: 20,
+        bottom: 30,
+        left: 50
     }, width = 600 - margin.left - margin.right, height = 270 - margin.top
-            - margin.bottom;
+        - margin.bottom;
 
     data = formatDataForChart(data);
 
@@ -147,28 +147,28 @@
     var svg = d3.select(container);
 
     // Set the ranges
-    var x = d3.time.scale().range([ 0, width ]);
-    var y = d3.scale.linear().range([ height, 0 ]);
+    var x = d3.time.scale().range([0, width]);
+    var y = d3.scale.linear().range([height, 0]);
 
     // Define the axes
     var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(5).innerTickSize(
-            -height).outerTickSize(0).tickPadding(10);
+        -height).outerTickSize(0).tickPadding(10);
 
     var yAxis = d3.svg.axis().scale(y).orient("left").ticks(10).innerTickSize(
-            -width).outerTickSize(0).tickPadding(10);
+        -width).outerTickSize(0).tickPadding(10);
 
     // Scale the range of the data
-    x.domain(d3.extent(data, function(d) {
+    x.domain(d3.extent(data, function (d) {
         return d.timestamp;
     }));
-    y.domain([ 0, d3.max(data, function(d) {
+    y.domain([0, d3.max(data, function (d) {
         return Math.ceil((d.value + 1) / 10) * 10;
-    }) ]);
+    })]);
 
     // Update the valueline path
-    var valueline = d3.svg.line().x(function(d) {
+    var valueline = d3.svg.line().x(function (d) {
         return x(d.timestamp);
-    }).y(function(d) {
+    }).y(function (d) {
         return y(d.value);
     });
 
@@ -182,24 +182,24 @@
 
     // Make the changes
     svg.select(".line").data(data) // change the line
-    .transition().duration(750).attr("d", valueline(data));
+        .transition().duration(750).attr("d", valueline(data));
     svg.select(".x.axis") // change the x axis
-    .transition().duration(750).call(xAxis.ticks(5));
+        .transition().duration(750).call(xAxis.ticks(5));
     svg.select(".y.axis") // change the y axis
-    .transition().duration(750).call(yAxis);
+        .transition().duration(750).call(yAxis);
 
     // Redraw the nodes based on the new data
     svg.select("svg").select("g").selectAll("circle").data(data).enter()
-            .append("circle").attr("r", 3.5).attr("class", "circle").attr(
-                    "fill", nodeColour).attr("cx", function(d) {
-                return x(d.timestamp);
-            }).attr("cy", function(d) {
-                return y(d.value);
-            })
+        .append("circle").attr("r", 3.5).attr("class", "circle").attr(
+        "fill", nodeColour).attr("cx", function (d) {
+        return x(d.timestamp);
+    }).attr("cy", function (d) {
+        return y(d.value);
+    })
 
-            // Apply the tooltip to each node
-            .on("mouseover", handleMouseOver)
-            .on("mouseout", handleMouseOut);
+        // Apply the tooltip to each node
+        .on("mouseover", handleMouseOver)
+        .on("mouseout", handleMouseOut);
 
 }
 
@@ -208,7 +208,7 @@
  */
 function initTooltip() {
     d3.select("body").append("div").attr("class", "tooltip").attr("id",
-            "tooltip").style("opacity", 0);
+        "tooltip").style("opacity", 0);
 }
 
 /*
@@ -220,7 +220,7 @@
 
 function formatDataForChart(data) {
     // Format the data for the chart
-    data.forEach(function(d) {
+    data.forEach(function (d) {
         d.value = +d.value;
     });
 
@@ -231,17 +231,17 @@
     var unit = svg.select(".line").attr("unit");
 
     d3.select("body").select(".tooltip").transition()
-            .duration(50).style("opacity", 1);
+        .duration(50).style("opacity", 1);
     d3.select("body").select(".tooltip").html(
-            formatDate(new Date(d.timestamp)) + "<br/>"
-                    + d.value + (unit ? " " + unit : ""))
-            .style("left", (d3.event.pageX) + "px").style(
-                    "top", (d3.event.pageY - 28) + "px");
+        formatDate(new Date(d.timestamp)) + "<br/>"
+        + d.value + (unit ? " " + unit : ""))
+        .style("left", (d3.event.pageX) + "px").style(
+        "top", (d3.event.pageY - 28) + "px");
 }
 
 function handleMouseOut(d) {
     d3.select("body").select(".tooltip").transition()
-            .duration(500).style("opacity", 0);
+        .duration(500).style("opacity", 0);
 }
 
-export { initTooltip, createChart, updateChart, generateRandomData };
\ No newline at end of file
+export {initTooltip, createChart, updateChart, generateRandomData};