Fixed the Policy API issues and Bugfixes

Change-Id: I6e8b54442421b6ebd0ff88426fc6e5f3a36b0690
Signed-off-by: Ravindra Bakkamanthala <rb7147@att.com>

20 files changed, 164 insertions, 47 deletions

diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/Windows/PDPTabWindows/AddorEditPDPtoGroup.html b/POLICY-SDK-APP/src/main/webapp/app/policyApp/Windows/PDPTabWindows/AddorEditPDPtoGroup.html
index 19e11bfeb..3bfb50fd7 100644
--- a/POLICY-SDK-APP/src/main/webapp/app/policyApp/Windows/PDPTabWindows/AddorEditPDPtoGroup.html
+++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/Windows/PDPTabWindows/AddorEditPDPtoGroup.html
@@ -19,7 +19,7 @@
  */-->
 <script type="text/ng-template" id="create_newPDP_InGroup.html">
 <div class="modal">
-	<div class="modal-dialog-lg">
+	<div class="modal-dialog modal-lg">
 	<div class="modal-content">
         <div class="modal-header">
             <h2 class="font-showcase-font-name" style="color : #157bb2">{{label}}</h2>
diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/Windows/PushtabWindow/removeGroupPoliciesWindow.html b/POLICY-SDK-APP/src/main/webapp/app/policyApp/Windows/PushtabWindow/removeGroupPoliciesWindow.html
index 9a880bd52..6ebda43a7 100644
--- a/POLICY-SDK-APP/src/main/webapp/app/policyApp/Windows/PushtabWindow/removeGroupPoliciesWindow.html
+++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/Windows/PushtabWindow/removeGroupPoliciesWindow.html
@@ -18,7 +18,7 @@
  * ============LICENSE_END=========================================================
  */-->
 <script type="text/ng-template" id="remove_PDPGroupPolicies_popup.html">
-<div class="modal" style="margin-bottom: 20px; width: 100%" data-backdrop="static"
+<div class="modal" style="margin-bottom: 20px; width: 100%; height:80%" data-backdrop="static"
 	data-keyboard="false">
 	<div class="modal-dialog-lg">
 	<div class="modal-content">
diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/dictionaryGridController/BRMSParamDictGridController.js b/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/dictionaryGridController/BRMSParamDictGridController.js
index fd49a3a9e..fc0cbc1a6 100644
--- a/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/dictionaryGridController/BRMSParamDictGridController.js
+++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/dictionaryGridController/BRMSParamDictGridController.js
@@ -125,7 +125,7 @@ app.controller('brmsParamDictGridController', function ($scope, PolicyAppService
 				var i;
 				if($scope.searchDatas.length > 0){
 					for(i = 0 ; i < $scope.searchDatas.length; i++){
-						searchString += $scope.searchDatas[i].name + "\n";
+						searchString += $scope.searchDatas[i] + "\n";
 					}	
 				}else{
 					searchString += "No Policies is Using this Value"
diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/dictionaryGridController/CLPepOptionsDictGridController.js b/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/dictionaryGridController/CLPepOptionsDictGridController.js
index 9ec2a2091..db6d2a7b1 100644
--- a/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/dictionaryGridController/CLPepOptionsDictGridController.js
+++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/dictionaryGridController/CLPepOptionsDictGridController.js
@@ -151,7 +151,7 @@ app.controller('pepOptionsDictGridController', function ($scope, PolicyAppServic
 				var i;
 				if($scope.searchDatas.length > 0){
 					for(i = 0 ; i < $scope.searchDatas.length; i++){
-						searchString += $scope.searchDatas[i].name + "\n";
+						searchString += $scope.searchDatas[i] + "\n";
 					}	
 				}else{
 					searchString += "No Policies is Using this Value"
diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/dictionaryGridController/CLServiceDictGridController.js b/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/dictionaryGridController/CLServiceDictGridController.js
index 099c1e648..b63cec043 100644
--- a/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/dictionaryGridController/CLServiceDictGridController.js
+++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/dictionaryGridController/CLServiceDictGridController.js
@@ -126,7 +126,7 @@ app.controller('serviceDictGridController', function ($scope, PolicyAppService,
 				var i;
 				if($scope.searchDatas.length > 0){
 					for(i = 0 ; i < $scope.searchDatas.length; i++){
-						searchString += $scope.searchDatas[i].name + "\n";
+						searchString += $scope.searchDatas[i] + "\n";
 					}	
 				}else{
 					searchString += "No Policies is Using this Value"
diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/dictionaryGridController/CLSiteDictGridController.js b/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/dictionaryGridController/CLSiteDictGridController.js
index d42674a33..638fd84ad 100644
--- a/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/dictionaryGridController/CLSiteDictGridController.js
+++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/dictionaryGridController/CLSiteDictGridController.js
@@ -126,7 +126,7 @@ app.controller('siteDictGridController', function ($scope, PolicyAppService, mod
 				var i;
 				if($scope.searchDatas.length > 0){
 					for(i = 0 ; i < $scope.searchDatas.length; i++){
-						searchString += $scope.searchDatas[i].name + "\n";
+						searchString += $scope.searchDatas[i] + "\n";
 					}	
 				}else{
 					searchString += "No Policies is Using this Value"
diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/dictionaryGridController/CLVarbindDictGridController.js b/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/dictionaryGridController/CLVarbindDictGridController.js
index f191da9c7..b2bb51b64 100644
--- a/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/dictionaryGridController/CLVarbindDictGridController.js
+++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/dictionaryGridController/CLVarbindDictGridController.js
@@ -150,7 +150,7 @@ app.controller('varbindDictGridController', function ($scope, PolicyAppService,
     			var i;
     			if($scope.searchDatas.length > 0){
     				for(i = 0 ; i < $scope.searchDatas.length; i++){
-    					searchString += $scope.searchDatas[i].name + "\n";
+    					searchString += $scope.searchDatas[i] + "\n";
     				}	
     			}else{
     				searchString += "No Policies is Using this Value"
diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/dictionaryGridController/CLVnfTypeDictGridController.js b/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/dictionaryGridController/CLVnfTypeDictGridController.js
index 545568f68..bea675588 100644
--- a/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/dictionaryGridController/CLVnfTypeDictGridController.js
+++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/dictionaryGridController/CLVnfTypeDictGridController.js
@@ -149,7 +149,7 @@ app.controller('vnfTypeDictGridController', function ($scope, PolicyAppService,
     			var i;
     			if($scope.searchDatas.length > 0){
     				for(i = 0 ; i < $scope.searchDatas.length; i++){
-    					searchString += $scope.searchDatas[i].name + "\n";
+    					searchString += $scope.searchDatas[i] + "\n";
     				}	
     			}else{
     				searchString += "No Policies is Using this Value"
diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/dictionaryGridController/CLVsclActionDictGridController.js b/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/dictionaryGridController/CLVsclActionDictGridController.js
index 61091523f..512e11464 100644
--- a/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/dictionaryGridController/CLVsclActionDictGridController.js
+++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/dictionaryGridController/CLVsclActionDictGridController.js
@@ -150,7 +150,7 @@ app.controller('vsclActionDictGridController', function ($scope, PolicyAppServic
     			var i;
     			if($scope.searchDatas.length > 0){
     				for(i = 0 ; i < $scope.searchDatas.length; i++){
-    					searchString += $scope.searchDatas[i].name + "\n";
+    					searchString += $scope.searchDatas[i] + "\n";
     				}	
     			}else{
     				searchString += "No Policies is Using this Value"
diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplateController/ActionPolicyController.js b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplateController/ActionPolicyController.js
index 0bfcd3c01..398b285e6 100644
--- a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplateController/ActionPolicyController.js
+++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplateController/ActionPolicyController.js
@@ -143,6 +143,7 @@ app.controller('actionPolicyController', ['$scope', 'PolicyAppService', 'policyN
 
     if(!$scope.temp.policy.editPolicy && !$scope.temp.policy.readOnly){
     	$scope.temp.policy.attributes = [];
+    	$scope.temp.policy.attributes.push({'id':'choice'+1});
     	 $scope.temp.policy.ruleAlgorithmschoices = [];
     }else{
 	   if($scope.temp.policy.attributes.length == 0){
diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplateController/DCAEMicroServicePolicyController.js b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplateController/DCAEMicroServicePolicyController.js
index 5e602ae12..fb966430c 100644
--- a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplateController/DCAEMicroServicePolicyController.js
+++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplateController/DCAEMicroServicePolicyController.js
@@ -403,9 +403,12 @@ angular.module('abs').controller('dcaeMicroServiceController', ['$scope', '$wind
 	    	   if(attribute.includes(":")){
 	    		   enumName = attribute.split(":")[0];
 	    	   }
-	    	}   	
+	    	}   
             var baseEnum = $scope.dcaeModelData.enumValues;
-	    	var enumList = baseEnum.split(splitEnum);
+            var enumList = [];
+            if(baseEnum != null){
+            	enumList = baseEnum.split(splitEnum);
+            }
 	    	var enumAttributes;
 	    	var patternTest = new RegExp(enumName);
 	    	for (k=0; k < enumList.length; k += 1){
diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplateController/DecisionPolicyController.js b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplateController/DecisionPolicyController.js
index ce27e04e0..e7858d7b5 100644
--- a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplateController/DecisionPolicyController.js
+++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplateController/DecisionPolicyController.js
@@ -163,8 +163,14 @@ angular.module('abs').controller('decisionPolicyController', ['$scope', 'PolicyA
    
     if(!$scope.temp.policy.editPolicy  && !$scope.temp.policy.readOnly){
     	$scope.temp.policy.attributes = [];
-    	  $scope.temp.policy.settings = [];
-    	 $scope.temp.policy.ruleAlgorithmschoices = [];
+    	$scope.temp.policy.settings = [];
+    	$scope.temp.policy.ruleAlgorithmschoices = [];
+    	if(!$scope.temp.policy.yamlparams){
+    		$scope.temp.policy.yamlparams = {};
+    	}
+    	if(!$scope.temp.policy.yamlparams.blackList){
+    		$scope.temp.policy.yamlparams.blackList = [];
+    	}
     }else if($scope.temp.policy.ruleProvider=="Custom"){
 	   if($scope.temp.policy.attributes.length == 0){
 		   $scope.temp.policy.attributes = [];
@@ -172,10 +178,14 @@ angular.module('abs').controller('decisionPolicyController', ['$scope', 'PolicyA
 	   if($scope.temp.policy.settings.length == 0){
 		   $scope.temp.policy.settings = [];
 	   }
-	   if($scope.temp.policy.ruleAlgorithmschoices.length == 0){
+	   if($scope.temp.policy.ruleAlgorithmschoices == null || $scope.temp.policy.ruleAlgorithmschoices.length == 0){
 		   $scope.temp.policy.ruleAlgorithmschoices = [];
 	   }
-   }
+    }else if($scope.temp.policy.ruleProvider=="GUARD_BL_YAML"){
+    	if($scope.temp.policy.yamlparams.blackList.length==0){
+    		$scope.temp.policy.yamlparams.blackList = [];
+    	}
+    }
     $scope.attributeDatas = [{"attributes" : $scope.temp.policy.attributes}];
     $scope.addNewChoice = function() {
       var newItemNo = $scope.temp.policy.attributes.length+1;
@@ -197,6 +207,14 @@ angular.module('abs').controller('decisionPolicyController', ['$scope', 'PolicyA
       $scope.temp.policy.settings.splice(lastItem);
     };
     
+    $scope.addNewBL = function() {
+    	$scope.temp.policy.yamlparams.blackList.push('');
+    };
+    $scope.removeBL = function() {
+    	var lastItem = $scope.temp.policy.yamlparams.blackList.length-1;
+    	$scope.temp.policy.yamlparams.blackList.splice(lastItem);
+    };
+    
     $scope.ItemNo = 0;
     $scope.ruleAlgorithmDatas = [{"ruleAlgorithms" : $scope.temp.policy.ruleAlgorithmschoices }];
     
diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplates/ActionPolicyTemplate.html b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplates/ActionPolicyTemplate.html
index ffb0e972f..e58e7bb62 100644
--- a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplates/ActionPolicyTemplate.html
+++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplates/ActionPolicyTemplate.html
@@ -51,7 +51,7 @@
 				</div>
 			</div>
 			<div class="well">
-				<label>Rule Algorithms:<sup><b>*</b></sup></label><br>
+				<label>Rule Algorithms:<sup><b></b></sup></label><br>
 				<div class="form-group row">
 					<div class="form-group col-sm-1">
 						<button type="button" class="btn btn-default"
diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplates/ClosedLoopFaultPolicyTemplate.html b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplates/ClosedLoopFaultPolicyTemplate.html
index e831bb40e..fad038ddc 100644
--- a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplates/ClosedLoopFaultPolicyTemplate.html
+++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplates/ClosedLoopFaultPolicyTemplate.html
@@ -301,7 +301,7 @@
 		</div>
 		<div class="well">
 			<div class="form-group row">
-				<label>PEP:<sup><b>*</b></sup></label><br>
+				<label>PEP:<sup><b></b></sup></label><br>
 				<div class="form-group col-sm-3">
 					<label>PEP Options:<sup><b></b></sup></label><br> <select
 						class="form-control" ng-disabled="temp.policy.readOnly"
diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplates/DecisionPolicyTemplate.html b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplates/DecisionPolicyTemplate.html
index a98dbff1d..637ecff03 100644
--- a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplates/DecisionPolicyTemplate.html
+++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplates/DecisionPolicyTemplate.html
@@ -32,11 +32,90 @@
 						<option>Custom</option>
 						<option>AAF</option>
 						<option>GUARD_YAML</option>
+						<option>GUARD_BL_YAML<option>
 					</select>
 				</div>
 			</div>
 		</div>
 		
+		<div ng-if="temp.policy.ruleProvider == 'GUARD_BL_YAML'">
+			<div class="well">
+				<div class="form-group row">
+					<div class="form-group col-sm-1">
+						<label>Guard YAML Attributes:</label><br>
+					</div>
+				</div>
+				<div class="form-group row">
+						<div class="form-group row" style="margin-left: 2%">
+							<div class="form-group col-sm-3">
+								<label> actor: </label>
+							</div>
+							<div class="form-group col-sm-3">
+								<input type="text" class="form-control"
+									ng-disabled="temp.policy.readOnly" ng-model="temp.policy.yamlparams.actor"
+									placeholder="Actor" />
+							</div>
+						</div>
+						<div class="form-group row" style="margin-left: 2%">
+							<div class="form-group col-sm-3">
+								<label> recipe: </label>
+							</div>
+							<div class="form-group col-sm-3">
+								<input type="text" class="form-control"
+									ng-disabled="temp.policy.readOnly" ng-model="temp.policy.yamlparams.recipe"
+									placeholder="Recipe" />
+							</div>
+						</div>
+						<div class="form-group row" style="margin-left: 2%">
+							<div class="form-group col-sm-3">
+								<label> guardActiveStart: </label>
+							</div>
+							<div class="form-group col-sm-3">
+								<input type="text" class="form-control"
+									ng-disabled="temp.policy.readOnly" ng-model="temp.policy.yamlparams.guardActiveStart"
+									placeholder="00:00:00-05:00" />
+							</div>
+						</div>
+						<div class="form-group row" style="margin-left: 2%">
+							<div class="form-group col-sm-3">
+								<label> guardActiveEnd: </label>
+							</div>
+							<div class="form-group col-sm-3">
+								<input type="text" class="form-control"
+									ng-disabled="temp.policy.readOnly" ng-model="temp.policy.yamlparams.guardActiveEnd"
+									placeholder="00:00:00-05:00" />
+							</div>
+						</div>
+						<div class="form-group row" style="margin-left: 2%">
+							<div class="form-group col-sm-3">
+								<label> BlackList: </label>
+								<button type="button" class="btn btn-default"
+									ng-disabled="temp.policy.readOnly" ng-click="addNewBL()">
+									<i class="fa fa-plus"></i>
+								</button>
+							</div>
+							<div class="form-group col-sm-4">
+								<div data-ng-repeat="choice in temp.policy.yamlparams.blackList track by $index">
+									<div class="form-group row">
+									<div class="form-group col-sm-9">
+										<input type="text" class="form-control"
+										ng-disabled="temp.policy.readOnly"
+										ng-model="temp.policy.yamlparams.blackList[$index]" placeholder="BlackList" />
+									</div>
+									<div class="form-group col-sm-1">
+										<button type="button" class="btn btn-default" ng-show="$last"
+										ng-disabled="temp.policy.readOnly" ng-click="removeBL()">
+										<i class="fa fa-minus"></i>
+										</button>
+									</div>
+									</div>
+								</div>
+							</div>
+						</div>
+				</div>
+			</div>
+		</div>
+		
 		<div ng-if="temp.policy.ruleProvider == 'GUARD_YAML'">
 			<div class="well">
 				<div class="form-group row">
@@ -199,7 +278,7 @@
 
 		<div ng-if="temp.policy.ruleProvider == 'Custom'">
 			<div class="well">
-				<label>Decision Rule Algorithms:<sup><b>*</b></sup></label><br>
+				<label>Decision Rule Algorithms:<sup><b></b></sup></label><br>
 				<div class="form-group row">
 					<div class="form-group col-sm-1">
 						<button type="button" class="btn btn-default"
diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplates/PolicyTypeTemplate.html b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplates/PolicyTypeTemplate.html
index ada2428ed..acbc4eec5 100644
--- a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplates/PolicyTypeTemplate.html
+++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplates/PolicyTypeTemplate.html
@@ -25,7 +25,7 @@
 		<!-- Modal content-->
 		<div class="modal-content">
 			<div class="modal-header">
-				<button type="button" class="close" data-dismiss="modal">
+				<button type="button" class="close" data-dismiss="modal" ng-click="refresh();">
 					<span class="sr-only">{{"close"
 						| translate}}</span>
 				</button>
diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/policy_AutoPush.html b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/policy_AutoPush.html
index b53dab32a..776663595 100644
--- a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/policy_AutoPush.html
+++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/policy_AutoPush.html
@@ -25,9 +25,18 @@
 	padding: 10px;
 }
 
+/* The Modal (background) */
 .modal {
-	display: block;
-	overflow-y: auto;
+    display: block; 
+    position: fixed; 
+    z-index: 1; 
+    left: 0;
+    top: 0;
+    width: 100%; 
+    height: 100%; 
+    overflow: auto; 
+    background-color: rgb(0,0,0); 
+    background-color: rgba(0,0,0,0.4);
 }
 </style>
 <div ng-app id="page-content" style="margin-bottom: 20px; width: 100%">
diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/policy_Dictionary.html b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/policy_Dictionary.html
index db490c400..4e3a9746f 100644
--- a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/policy_Dictionary.html
+++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/policy_Dictionary.html
@@ -18,21 +18,18 @@
   ============LICENSE_END=========================================================
   -->
 <style>
+/* The Modal (background) */
 .modal {
-	display: block;
-}
-
-.modal {
-	overflow-y: auto;
-	max-height: 90%;
-	margin-top: 5%;
-	margin-bottom: 5%;
-	margin-left: 10%;
-	margin-right: 10%;
-}
-
-.modal-backdrop {
-   background-color: red;
+    display: block; 
+    position: fixed; 
+    z-index: 1; 
+    left: 0;
+    top: 0;
+    width: 100%; 
+    height: 100%; 
+    overflow: auto; 
+    background-color: rgb(0,0,0); 
+    background-color: rgba(0,0,0,0.4);
 }
 </style>
 <div ng-app id="page-content"  style="margin-bottom: 20px; width: 100%">
diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/policy_PDPManagement.html b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/policy_PDPManagement.html
index 1e88e7acb..4c77cf528 100644
--- a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/policy_PDPManagement.html
+++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/policy_PDPManagement.html
@@ -18,9 +18,18 @@
  * ============LICENSE_END=========================================================
  */-->
 <style>
+/* The Modal (background) */
 .modal {
-	display: block;
-	overflow-y: auto;
+    display: block; 
+    position: fixed; 
+    z-index: 1; 
+    left: 0;
+    top: 0;
+    width: 100%; 
+    height: 100%; 
+    overflow: auto; 
+    background-color: rgb(0,0,0); 
+    background-color: rgba(0,0,0,0.4);
 }
 </style>
 <div id="page-content" style="margin-bottom: 20px; width: 99%">
diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/policy_Roles.html b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/policy_Roles.html
index 6ca03c963..6df44bc24 100644
--- a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/policy_Roles.html
+++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/policy_Roles.html
@@ -18,17 +18,18 @@
  * ============LICENSE_END=========================================================
  */-->
 <style>
+/* The Modal (background) */
 .modal {
-	display: block;
-}
-
-.modal {
-	overflow-y: auto;
-	max-height: 90%;
-	margin-top: 5%;
-	margin-bottom: 5%;
-	margin-left: 10%;
-	margin-right: 10%;
+    display: block; 
+    position: fixed; 
+    z-index: 1; 
+    left: 0;
+    top: 0;
+    width: 100%; 
+    height: 100%; 
+    overflow: auto; 
+    background-color: rgb(0,0,0); 
+    background-color: rgba(0,0,0,0.4);
 }
 </style>
 <div id="page-content" style="margin-bottom: 20px; width: 100%">