Merge "Add New UI component for policies list"

17 files changed, 1427 insertions, 881 deletions

diff --git a/src/main/java/org/onap/policy/clamp/policy/pdpgroup/PoliciesPdpMerger.java b/src/main/java/org/onap/policy/clamp/policy/pdpgroup/PoliciesPdpMerger.java
index 4b94355ee..0bd45cd33 100644
--- a/src/main/java/org/onap/policy/clamp/policy/pdpgroup/PoliciesPdpMerger.java
+++ b/src/main/java/org/onap/policy/clamp/policy/pdpgroup/PoliciesPdpMerger.java
@@ -42,19 +42,22 @@ public class PoliciesPdpMerger {
      * This method extract the content of a policy without knowing the key (policy Id).
      * This JsonElement normally contains only the policy ID then the content,
      * there is only one member in the Json element.
+     * As this is not really practical to use this method remove that
+     * nested Json.
      *
      * @param policyJsonElement The policy as JsonElement
      * @return It return the content as JsonObject
      */
     public static JsonObject getPolicyContentOutOfJsonElement(JsonElement policyJsonElement) {
-        return policyJsonElement.getAsJsonObject()
-                .get(((String) policyJsonElement.getAsJsonObject().keySet().toArray()[0])).getAsJsonObject();
+        mergeJsonElement(policyJsonElement.getAsJsonObject(), policyJsonElement.getAsJsonObject()
+                .remove(((String) policyJsonElement.getAsJsonObject().keySet().toArray()[0])).getAsJsonObject());
+        return policyJsonElement.getAsJsonObject();
     }
 
     /**
      * This method merges 2 JsonElement together. If the jsonToMerge is null nothign is changed.
      *
-     * @param json The initial json that will received the data
+     * @param json        The initial json that will received the data
      * @param jsonToMerge The json that will be added to the first json object
      */
     public static void mergeJsonElement(JsonObject json, JsonObject jsonToMerge) {
@@ -69,16 +72,16 @@ public class PoliciesPdpMerger {
      *
      * @param jsonPoliciesList The Json containing the policies from the PEF
      * @param pdpGroupsJson    The json containing the PDP groups info from the PEF
-     * @return It returns a String containing the policies list enriched with PdpGroup info
+     * @return It returns a JsonObject containing the policies list enriched with PdpGroup info
      */
-    public static String mergePoliciesAndPdpGroupStates(String jsonPoliciesList, String pdpGroupsJson) {
+    public static JsonObject mergePoliciesAndPdpGroupStates(String jsonPoliciesList, String pdpGroupsJson) {
         PdpGroups pdpGroups = JsonUtils.GSON.fromJson(pdpGroupsJson, PdpGroups.class);
         JsonObject policiesListJson =
                 JsonUtils.GSON.fromJson(jsonPoliciesList, JsonObject.class).get("topology_template")
                         .getAsJsonObject();
         StreamSupport.stream(policiesListJson.get("policies").getAsJsonArray().spliterator(), true)
                 .forEach(policyJson -> enrichOnePolicy(pdpGroups, getPolicyContentOutOfJsonElement(policyJson)));
-        return policiesListJson.toString();
+        return policiesListJson;
     }
 
     /**
diff --git a/src/main/resources/clds/camel/rest/clamp-api-v2.xml b/src/main/resources/clds/camel/rest/clamp-api-v2.xml
index 011c24a9d..e1f138b1d 100644
--- a/src/main/resources/clds/camel/rest/clamp-api-v2.xml
+++ b/src/main/resources/clds/camel/rest/clamp-api-v2.xml
@@ -1317,7 +1317,7 @@
                 </doTry>
             </route>
         </get>
-        <get uri="/v2/policies/list" outType="java.lang.String" produces="application/json">
+        <get uri="/v2/policies/list" outType="com.google.gson.JsonObject" produces="application/json">
             <route>
                 <removeHeaders pattern="*"/>
                 <doTry>
diff --git a/src/test/java/org/onap/policy/clamp/policy/pdpgroup/PoliciesPdpMergerTest.java b/src/test/java/org/onap/policy/clamp/policy/pdpgroup/PoliciesPdpMergerTest.java
index 5da68f47f..21157eb71 100644
--- a/src/test/java/org/onap/policy/clamp/policy/pdpgroup/PoliciesPdpMergerTest.java
+++ b/src/test/java/org/onap/policy/clamp/policy/pdpgroup/PoliciesPdpMergerTest.java
@@ -97,6 +97,6 @@ public class PoliciesPdpMergerTest {
         JSONAssert.assertEquals(ResourceFileUtils.getResourceAsString("example/policy/policy-merger.json"),
                 PoliciesPdpMerger.mergePoliciesAndPdpGroupStates(
                         ResourceFileUtils.getResourceAsString("http-cache/example/policy/api/v1/policies/.file"),
-                        pdpGroupsJson), true);
+                        pdpGroupsJson).toString(), true);
     }
 }
diff --git a/src/test/resources/example/policy/policy-merger.json b/src/test/resources/example/policy/policy-merger.json
index 5c6bd5b6b..e1424fffb 100644
--- a/src/test/resources/example/policy/policy-merger.json
+++ b/src/test/resources/example/policy/policy-merger.json
@@ -1,214 +1,208 @@
 {
   "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"
-            ]
-          }
-        ]
-      }
+      "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"
+      "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"
                 },
-                "actor": "SDNR",
-                "operation": "BandwidthOnDemand"
+                "targetType": "VNF"
               },
-              "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"
-            ]
+              "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"
+      "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"
                 }
-              ]
-            },
-            {
-              "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"
-                  }
+              },
+              {
+                "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"
-        }
+              }
+            ]
+          }
+        ],
+        "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/src/test/resources/http-cache/example/policy/pap/v1/pdps/.file b/src/test/resources/http-cache/example/policy/pap/v1/pdps/.file
index af1944c59..b0d6819af 100644
--- a/src/test/resources/http-cache/example/policy/pap/v1/pdps/.file
+++ b/src/test/resources/http-cache/example/policy/pap/v1/pdps/.file
@@ -16,6 +16,10 @@
                         {
                             "name": "onap.policies.controlloop.Operational",
                             "version": "1.0.0"
+                        },
+                        {
+                          "name": "onap.policies.controlloop.operational.common.*",
+                            "version": "1.0.0"
                         }
                     ]
                 },
@@ -71,10 +75,6 @@
                     "pdpType": "xacml",
                     "policies": [
                                 {
-                                  "name": "SDNC_Policy.ONAP_NF_NAMING_TIMESTAMP",
-                                  "version": "1.0.0"
-                                },
-                                {
                                   "name": "MICROSERVICE_vLoadBalancerMS_v1_0_tcagen2_1_0_0_AV0",
                                   "version": "1.0.0"
                                 }
@@ -84,7 +84,12 @@
                         {
                             "name": "onap.policies.monitoring.*",
                             "version": "1.0.0"
+                        },
+                        {
+                            "name": "onap.policies.Naming",
+                            "version": "1.0.0"
                         }
+
                     ]
                 }
             ],
diff --git a/ui-react-lib/libIndex.js b/ui-react-lib/libIndex.js
index 583cc7128..eef1ca215 100755
--- a/ui-react-lib/libIndex.js
+++ b/ui-react-lib/libIndex.js
@@ -26,9 +26,11 @@ export { default as CreateLoopModal } from './src/components/dialogs/Loop/Create
 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';
@@ -49,3 +51,4 @@ 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 ViewToscaPolicyModal } from './src/components/dialogs/Tosca/ViewToscaPolicyModal';
+export { default as ViewAllPolicies } from './src/components/dialogs/Policy/ViewAllPolicies';
diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js
index 5491ab187..339a2c048 100644
--- a/ui-react/src/LoopUI.js
+++ b/ui-react/src/LoopUI.js
@@ -2,7 +2,7 @@
  * ============LICENSE_START=======================================================
  * ONAP CLAMP
  * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
+ * Copyright (C) 2019, 2021 AT&T Intellectual Property. All rights
  *                             reserved.
  * ================================================================================
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -41,6 +41,7 @@ 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';
@@ -57,334 +58,334 @@ import Spinner from 'react-bootstrap/Spinner';
 import { Link } from 'react-router-dom';
 
 const StyledMainDiv = styled.div`
-	background-color: ${props => props.theme.backgroundColor};
+    background-color: ${props => props.theme.backgroundColor};
 `
 
 const StyledSpinnerDiv = styled.div`
-	justify-content: center !important;
-	display: flex !important;
+    justify-content: center !important;
+    display: flex !important;
 `;
 
 const ProjectNameStyled = styled.a`
-	vertical-align: middle;
-	padding-left: 30px;
-	font-size: 36px;
-	font-weight: bold;
+    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};
+    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};
+    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};
+    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};
+    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%;
+    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");
+    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="/uploadToscaPolicyModal" render={(routeProps) => (<UploadToscaPolicyModal {...routeProps} />)} />
-				<Route path="/viewToscaPolicyModal" render={(routeProps) => (<ViewToscaPolicyModal {...routeProps} />)} />
-				<Route path="/ViewLoopTemplatesModal" render={(routeProps) => (<ViewLoopTemplatesModal {...routeProps} />)} />
-				<Route path="/ManageDictionaries" render={(routeProps) => (<ManageDictionaries {...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>
-		);
-	}
+    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="/uploadToscaPolicyModal" render={(routeProps) => (<UploadToscaPolicyModal {...routeProps} />)} />
+                <Route path="/viewToscaPolicyModal" render={(routeProps) => (<ViewToscaPolicyModal {...routeProps} />)} />
+                <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 (
@@ -393,30 +394,30 @@ export default class LoopUI extends React.Component {
         };
 
 
-	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>
-		);
-	}
+    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/ui-react/src/__snapshots__/LoopUI.test.js.snap b/ui-react/src/__snapshots__/LoopUI.test.js.snap
index cae9182ff..1a8a98257 100644
--- a/ui-react/src/__snapshots__/LoopUI.test.js.snap
+++ b/ui-react/src/__snapshots__/LoopUI.test.js.snap
@@ -14,11 +14,15 @@ exports[`Verify LoopUI Test the render method 1`] = `
     render={[Function]}
   />
   <Route
-    path="/ViewLoopTemplatesModal"
+    path="/viewLoopTemplatesModal"
     render={[Function]}
   />
   <Route
-    path="/ManageDictionaries"
+    path="/manageDictionaries"
+    render={[Function]}
+  />
+  <Route
+    path="/viewAllPolicies"
     render={[Function]}
   />
   <Route
diff --git a/ui-react/src/__snapshots__/OnapClamp.test.js.snap b/ui-react/src/__snapshots__/OnapClamp.test.js.snap
index d4573b3d1..fd1b0d57d 100644
--- a/ui-react/src/__snapshots__/OnapClamp.test.js.snap
+++ b/ui-react/src/__snapshots__/OnapClamp.test.js.snap
@@ -41,11 +41,15 @@ exports[`Verify OnapClamp Test the render method 1`] = `
       render={[Function]}
     />
     <Route
-      path="/ViewLoopTemplatesModal"
+      path="/viewLoopTemplatesModal"
       render={[Function]}
     />
     <Route
-      path="/ManageDictionaries"
+      path="/manageDictionaries"
+      render={[Function]}
+    />
+    <Route
+      path="/viewAllPolicies"
       render={[Function]}
     />
     <Route
diff --git a/ui-react/src/api/LoopCache.test.js b/ui-react/src/api/LoopCache.test.js
index 3ae081704..76f819c69 100644
--- a/ui-react/src/api/LoopCache.test.js
+++ b/ui-react/src/api/LoopCache.test.js
@@ -22,7 +22,7 @@
  */
 import LoopCache from '../api/LoopCache';
 
-const json = require('./LoopCache_mokeLoopJsonCache.json');
+const json = require('./LoopCacheMockFile.json');
 
 describe('Verify LoopCache functions', () => {
     const loopCache = new LoopCache(json);
diff --git a/ui-react/src/api/LoopCache_mokeLoopJsonCache.json b/ui-react/src/api/LoopCacheMockFile.json
index cb9ed87b0..cb9ed87b0 100644
--- a/ui-react/src/api/LoopCache_mokeLoopJsonCache.json
+++ b/ui-react/src/api/LoopCacheMockFile.json
diff --git a/ui-react/src/api/PoliciesListCache.js b/ui-react/src/api/PoliciesListCache.js
new file mode 100644
index 000000000..30c9348d0
--- /dev/null
+++ b/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/ui-react/src/api/PoliciesListCacheMockFile.json b/ui-react/src/api/PoliciesListCacheMockFile.json
new file mode 100644
index 000000000..5c6bd5b6b
--- /dev/null
+++ b/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"
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/ui-react/src/api/PolicyService.js b/ui-react/src/api/PolicyService.js
new file mode 100644
index 000000000..d591b093d
--- /dev/null
+++ b/ui-react/src/api/PolicyService.js
@@ -0,0 +1,43 @@
+/*-
+ * ============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/list', {
+        method: 'GET',
+        credentials: 'same-origin'
+        })
+      .then(function (response) {
+        console.debug("getPoliciesList response received: ", response.status);
+        if (response.ok) {
+          return response.json();
+        } else {
+          console.error("getPoliciesList query failed");
+          return {};
+        }
+      })
+      .catch(function (error) {
+        console.error("getPoliciesList error received", error);
+        return {};
+      });
+  }
+}
diff --git a/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js b/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js
new file mode 100644
index 000000000..216a8abd2
--- /dev/null
+++ b/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js
@@ -0,0 +1,188 @@
+/*-
+ * ============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 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 PolicyService from '../../../api/PolicyService';
+import Select from 'react-select';
+
+const ModalStyled = styled(Modal)`
+    background-color: transparent;
+`
+
+const standardCellStyle = { 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'};
+const selectPdpGroupStyle = {
+    width: 2000
+}
+
+export default class ViewAllPolicies extends React.Component {
+  state = {
+        show: true,
+        content: 'Please select a policy to display it',
+        selectedRow: -1,
+        policiesListData: [],
+        policyColumnsDefinition: [
+            {
+                title: "#", field: "index", render: rowData => rowData.tableData.id + 1,
+                cellStyle: standardCellStyle,
+                headerStyle: headerStyle
+            },
+            {
+                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)
+            },
+            {
+                title: "PDP Group", field: "pdpGroupInfo.pdpGroup",
+                cellStyle: cellPdpGroupStyle,
+                headerStyle: headerStyle
+            },
+            {
+                title: "PDP SubGroup", field: "pdpGroupInfo.pdpSubGroup",
+                cellStyle: cellPdpGroupStyle,
+                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.renderPdpGroupDropBox = this.renderPdpGroupDropBox.bind(this);
+        this.handlePdpGroupChange = this.handlePdpGroupChange.bind(this);
+
+        this.getAllPolicies();
+
+    }
+
+    handlePdpGroupChange(e) {
+        let pdpSplit = e.value.split("/");
+        let selectedPdpGroup = pdpSplit[0];
+        let selectedSubPdpGroup = pdpSplit[1];
+        if (typeof selectedSubPdpGroup !== "undefined") {
+            this.state.policiesListData[this.state.selectedRow]["pdpGroupInfo"] = {"pdpGroup":selectedPdpGroup,"pdpSubGroup":selectedSubPdpGroup};
+        } else {
+            delete this.state.policiesListData[this.state.selectedRow]["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('/')
+    }
+
+    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 All Policies in Policy Engine"}
+                      data={this.state.policiesListData}
+                      columns={this.state.policyColumnsDefinition}
+                      icons={this.state.tableIcons}
+                      onRowClick={(event, rowData) => {this.setState({selectedRow: rowData.tableData.id})}}
+                      options={{
+                          headerStyle:rowHeaderStyle,
+                          rowStyle: rowData => ({
+                          backgroundColor: (this.state.selectedRow !== -1 && this.state.selectedRow === rowData.tableData.id) ? '#EEE' : '#FFF'
+                          })
+                      }}
+                />
+                </Modal.Body>
+                <Modal.Footer>
+                    <Button variant="secondary" onClick={this.handleClose}>Close</Button>
+               </Modal.Footer>
+      </ModalStyled>
+      );
+    }
+  }
\ No newline at end of file
diff --git a/ui-react/src/components/menu/MenuBar.js b/ui-react/src/components/menu/MenuBar.js
index 7cf56570b..40a3890a5 100644
--- a/ui-react/src/components/menu/MenuBar.js
+++ b/ui-react/src/components/menu/MenuBar.js
@@ -2,7 +2,7 @@
  * ============LICENSE_START=======================================================
  * ONAP CLAMP
  * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
+ * Copyright (C) 2019, 2021 AT&T Intellectual Property. All rights
  *                             reserved.
  * ================================================================================
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -30,94 +30,95 @@ 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};
-	}
+    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};
-	}
+    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;
-		}
-	}
+    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
-	};
+    state = {
+        loopName: this.props.loopName,
+        disabled: true
+    };
 
-	componentWillReceiveProps(newProps) {
-		if (newProps.loopName !== OnapConstants.defaultLoopName) {
-			this.setState({ disabled: false });
-		} else {
-			this.setState({ disabled: true });
-		}
-	}
+    componentWillReceiveProps(newProps) {
+        if (newProps.loopName !== OnapConstants.defaultLoopName) {
+            this.setState({ disabled: false });
+        } else {
+            this.setState({ disabled: true });
+        }
+    }
 
-	render () {
-		return (
-				<Navbar.Collapse>
-					<StyledNavDropdown title="Loop Templates">
-							<NavDropdown.Item as={StyledLink} to="/ViewLoopTemplatesModal">View All Templates</NavDropdown.Item>
-					</StyledNavDropdown>
-					<StyledNavDropdown title="Policy Models">
-                    	    <NavDropdown.Item as={StyledLink} to="/uploadToscaPolicyModal">Upload Tosca Model</NavDropdown.Item>
-                    		<NavDropdown.Item as={StyledLink} to="/viewToscaPolicyModal">View Tosca Models</NavDropdown.Item>
-                            <NavDropdown.Item as={StyledLink} to="/ManageDictionaries">Manage Metadata Dictionaries</NavDropdown.Item>
+    render () {
+        return (
+                <Navbar.Collapse>
+                    <StyledNavDropdown title="Loop Templates">
+                            <NavDropdown.Item as={StyledLink} to="/viewLoopTemplatesModal">View All 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 Engine(SUBMIT)</NavDropdown.Item>
-							<NavDropdown.Item as={StyledLink} to="/stop" disabled={this.state.disabled}>Undeploy from Policy Engine (STOP)</NavDropdown.Item>
-							<NavDropdown.Item as={StyledLink} to="/restart" disabled={this.state.disabled}>ReDeploy to Policy Engine (RESTART)</NavDropdown.Item>
-							<NavDropdown.Item as={StyledLink} to="/delete" disabled={this.state.disabled}>Delete loop instance (DELETE)</NavDropdown.Item>
-							<NavDropdown.Divider />
-							<NavDropdown.Item as={StyledLink} to="/deploy" disabled={this.state.disabled}>Deploy to DCAE (DEPLOY)</NavDropdown.Item>
-							<NavDropdown.Item as={StyledLink} to="/undeploy" disabled={this.state.disabled}>UnDeploy to DCAE (UNDEPLOY)</NavDropdown.Item>
-					</StyledNavDropdown>
-					<StyledNavDropdown title="Help">
-							<StyledNavLink href="https://wiki.onap.org/" target="_blank">Wiki</StyledNavLink>
-							<StyledNavLink href="mailto:onap-discuss@lists.onap.org?subject=CLAMP&body=Please send us suggestions or feature enhancements or defect. If possible, please send us the steps to replicate any defect.">Contact Us</StyledNavLink>
-							<NavDropdown.Item as={StyledLink} to="/userInfo">User Info</NavDropdown.Item>
-					</StyledNavDropdown>
-				</Navbar.Collapse>
-		);
-	}
+                    <StyledNavDropdown title="Policy Models">
+                            <NavDropdown.Item as={StyledLink} to="/uploadToscaPolicyModal">Upload Tosca Model</NavDropdown.Item>
+                            <NavDropdown.Item as={StyledLink} to="/viewToscaPolicyModal">View Tosca Models</NavDropdown.Item>
+                            <NavDropdown.Item as={StyledLink} to="/manageDictionaries">Manage Metadata Dictionaries</NavDropdown.Item>
+                            <NavDropdown.Item as={StyledLink} to="/viewAllPolicies">View All Policies</NavDropdown.Item>
+                    </StyledNavDropdown>
+                    <StyledNavDropdown title="Loop Instance">
+                            <NavDropdown.Item as={StyledLink} to="/createLoop">Create</NavDropdown.Item>
+                            <NavDropdown.Item as={StyledLink} to="/openLoop">Open</NavDropdown.Item>
+                            <NavDropdown.Item as={StyledLink} to="/closeLoop" disabled={this.state.disabled}>Close</NavDropdown.Item>
+                            <NavDropdown.Item as={StyledLink} to="/modifyLoop" disabled={this.state.disabled}>Modify</NavDropdown.Item>
+                            <NavDropdown.Divider />
+                            <NavDropdown.Item as={StyledLink} to="/loopProperties" disabled={this.state.disabled}>Properties</NavDropdown.Item>
+                            <NavDropdown.Item as={StyledLink} to="/refreshStatus" disabled={this.state.disabled}>Refresh Status</NavDropdown.Item>
+                    </StyledNavDropdown>
+                    <StyledNavDropdown title="Loop Operations">
+                            <NavDropdown.Item as={StyledLink} to="/submit" disabled={this.state.disabled}>Create and deploy to Policy Engine(SUBMIT)</NavDropdown.Item>
+                            <NavDropdown.Item as={StyledLink} to="/stop" disabled={this.state.disabled}>Undeploy from Policy Engine (STOP)</NavDropdown.Item>
+                            <NavDropdown.Item as={StyledLink} to="/restart" disabled={this.state.disabled}>ReDeploy to Policy Engine (RESTART)</NavDropdown.Item>
+                            <NavDropdown.Item as={StyledLink} to="/delete" disabled={this.state.disabled}>Delete loop instance (DELETE)</NavDropdown.Item>
+                            <NavDropdown.Divider />
+                            <NavDropdown.Item as={StyledLink} to="/deploy" disabled={this.state.disabled}>Deploy to DCAE (DEPLOY)</NavDropdown.Item>
+                            <NavDropdown.Item as={StyledLink} to="/undeploy" disabled={this.state.disabled}>UnDeploy to DCAE (UNDEPLOY)</NavDropdown.Item>
+                    </StyledNavDropdown>
+                    <StyledNavDropdown title="Help">
+                            <StyledNavLink href="https://wiki.onap.org/" target="_blank">Wiki</StyledNavLink>
+                            <StyledNavLink href="mailto:onap-discuss@lists.onap.org?subject=CLAMP&body=Please send us suggestions or feature enhancements or defect. If possible, please send us the steps to replicate any defect.">Contact Us</StyledNavLink>
+                            <NavDropdown.Item as={StyledLink} to="/userInfo">User Info</NavDropdown.Item>
+                    </StyledNavDropdown>
+                </Navbar.Collapse>
+        );
+    }
 }
diff --git a/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap b/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap
index 92444ea3d..69a0e85db 100644
--- a/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap
+++ b/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap
@@ -15,29 +15,29 @@ exports[`Verify MenuBar Test the render method 1`] = `
             "isStatic": false,
             "rules": Array [
               "
-	color: ",
+    color: ",
               [Function],
               ";
-	background-color: ",
+    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: ",
+    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:  ",
+        color:  ",
               [Function],
               ";
-	}
+    }
 ",
             ],
           },
@@ -52,7 +52,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
         }
       }
       disabled={false}
-      to="/ViewLoopTemplatesModal"
+      to="/viewLoopTemplatesModal"
     >
       View All Templates
     </DropdownItem>
@@ -70,29 +70,29 @@ exports[`Verify MenuBar Test the render method 1`] = `
             "isStatic": false,
             "rules": Array [
               "
-	color: ",
+    color: ",
               [Function],
               ";
-	background-color: ",
+    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: ",
+    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:  ",
+        color:  ",
               [Function],
               ";
-	}
+    }
 ",
             ],
           },
@@ -121,29 +121,29 @@ exports[`Verify MenuBar Test the render method 1`] = `
             "isStatic": false,
             "rules": Array [
               "
-	color: ",
+    color: ",
               [Function],
               ";
-	background-color: ",
+    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: ",
+    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:  ",
+        color:  ",
               [Function],
               ";
-	}
+    }
 ",
             ],
           },
@@ -172,29 +172,29 @@ exports[`Verify MenuBar Test the render method 1`] = `
             "isStatic": false,
             "rules": Array [
               "
-	color: ",
+    color: ",
               [Function],
               ";
-	background-color: ",
+    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: ",
+    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:  ",
+        color:  ",
               [Function],
               ";
-	}
+    }
 ",
             ],
           },
@@ -209,10 +209,61 @@ exports[`Verify MenuBar Test the render method 1`] = `
         }
       }
       disabled={false}
-      to="/ManageDictionaries"
+      to="/manageDictionaries"
     >
       Manage Metadata Dictionaries
     </DropdownItem>
+    <DropdownItem
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": ComponentStyle {
+            "componentId": "sc-bdVaJa",
+            "isStatic": false,
+            "rules": Array [
+              "
+    color: ",
+              [Function],
+              ";
+    background-color: ",
+              [Function],
+              ";
+    font-weight: normal;
+    display: block;
+    width: 100%;
+    padding: .25rem 1.5rem;
+    clear: both;
+    text-align: inherit;
+    white-space: nowrap;
+    border: 0;
+    :hover {
+        text-decoration: none;
+        background-color: ",
+              [Function],
+              ";
+        color:  ",
+              [Function],
+              ";
+    }
+",
+            ],
+          },
+          "displayName": "Styled(Link)",
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "styledComponentId": "sc-bdVaJa",
+          "target": [Function],
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      disabled={false}
+      to="/viewAllPolicies"
+    >
+      View All Policies
+    </DropdownItem>
   </Styled(NavDropdown)>
   <Styled(NavDropdown)
     title="Loop Instance"
@@ -227,29 +278,29 @@ exports[`Verify MenuBar Test the render method 1`] = `
             "isStatic": false,
             "rules": Array [
               "
-	color: ",
+    color: ",
               [Function],
               ";
-	background-color: ",
+    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: ",
+    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:  ",
+        color:  ",
               [Function],
               ";
-	}
+    }
 ",
             ],
           },
@@ -278,29 +329,29 @@ exports[`Verify MenuBar Test the render method 1`] = `
             "isStatic": false,
             "rules": Array [
               "
-	color: ",
+    color: ",
               [Function],
               ";
-	background-color: ",
+    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: ",
+    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:  ",
+        color:  ",
               [Function],
               ";
-	}
+    }
 ",
             ],
           },
@@ -329,29 +380,29 @@ exports[`Verify MenuBar Test the render method 1`] = `
             "isStatic": false,
             "rules": Array [
               "
-	color: ",
+    color: ",
               [Function],
               ";
-	background-color: ",
+    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: ",
+    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:  ",
+        color:  ",
               [Function],
               ";
-	}
+    }
 ",
             ],
           },
@@ -380,29 +431,29 @@ exports[`Verify MenuBar Test the render method 1`] = `
             "isStatic": false,
             "rules": Array [
               "
-	color: ",
+    color: ",
               [Function],
               ";
-	background-color: ",
+    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: ",
+    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:  ",
+        color:  ",
               [Function],
               ";
-	}
+    }
 ",
             ],
           },
@@ -434,29 +485,29 @@ exports[`Verify MenuBar Test the render method 1`] = `
             "isStatic": false,
             "rules": Array [
               "
-	color: ",
+    color: ",
               [Function],
               ";
-	background-color: ",
+    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: ",
+    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:  ",
+        color:  ",
               [Function],
               ";
-	}
+    }
 ",
             ],
           },
@@ -485,29 +536,29 @@ exports[`Verify MenuBar Test the render method 1`] = `
             "isStatic": false,
             "rules": Array [
               "
-	color: ",
+    color: ",
               [Function],
               ";
-	background-color: ",
+    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: ",
+    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:  ",
+        color:  ",
               [Function],
               ";
-	}
+    }
 ",
             ],
           },
@@ -540,29 +591,29 @@ exports[`Verify MenuBar Test the render method 1`] = `
             "isStatic": false,
             "rules": Array [
               "
-	color: ",
+    color: ",
               [Function],
               ";
-	background-color: ",
+    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: ",
+    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:  ",
+        color:  ",
               [Function],
               ";
-	}
+    }
 ",
             ],
           },
@@ -591,29 +642,29 @@ exports[`Verify MenuBar Test the render method 1`] = `
             "isStatic": false,
             "rules": Array [
               "
-	color: ",
+    color: ",
               [Function],
               ";
-	background-color: ",
+    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: ",
+    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:  ",
+        color:  ",
               [Function],
               ";
-	}
+    }
 ",
             ],
           },
@@ -642,29 +693,29 @@ exports[`Verify MenuBar Test the render method 1`] = `
             "isStatic": false,
             "rules": Array [
               "
-	color: ",
+    color: ",
               [Function],
               ";
-	background-color: ",
+    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: ",
+    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:  ",
+        color:  ",
               [Function],
               ";
-	}
+    }
 ",
             ],
           },
@@ -693,29 +744,29 @@ exports[`Verify MenuBar Test the render method 1`] = `
             "isStatic": false,
             "rules": Array [
               "
-	color: ",
+    color: ",
               [Function],
               ";
-	background-color: ",
+    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: ",
+    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:  ",
+        color:  ",
               [Function],
               ";
-	}
+    }
 ",
             ],
           },
@@ -747,29 +798,29 @@ exports[`Verify MenuBar Test the render method 1`] = `
             "isStatic": false,
             "rules": Array [
               "
-	color: ",
+    color: ",
               [Function],
               ";
-	background-color: ",
+    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: ",
+    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:  ",
+        color:  ",
               [Function],
               ";
-	}
+    }
 ",
             ],
           },
@@ -798,29 +849,29 @@ exports[`Verify MenuBar Test the render method 1`] = `
             "isStatic": false,
             "rules": Array [
               "
-	color: ",
+    color: ",
               [Function],
               ";
-	background-color: ",
+    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: ",
+    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:  ",
+        color:  ",
               [Function],
               ";
-	}
+    }
 ",
             ],
           },
@@ -864,29 +915,29 @@ exports[`Verify MenuBar Test the render method 1`] = `
             "isStatic": false,
             "rules": Array [
               "
-	color: ",
+    color: ",
               [Function],
               ";
-	background-color: ",
+    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: ",
+    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:  ",
+        color:  ",
               [Function],
               ";
-	}
+    }
 ",
             ],
           },