Enhancement on Dashboard

Enhancement on dashboard by including more info related to CRUD actions
on policies and also providing an advanced search feature.

Issue-ID: POLICY-1042
Change-Id: I987e0ca13824413f90299a366fb4464fca7de06a
Signed-off-by: Wang,Frank(gw1218) <gw1218@att.com>

7 files changed, 351 insertions, 6 deletions

diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/dashboardCRUDController.js b/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/dashboardCRUDController.js
new file mode 100644
index 000000000..ce1af6b1a
--- /dev/null
+++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/dashboardCRUDController.js
@@ -0,0 +1,156 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP Policy Engine
+ * ================================================================================
+ * Copyright (C) 2018 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=========================================================
+ */
+
+app.controller('policyDashboardCRUDDataController', function ($scope, PolicyAppService, modalService, $modal){
+	console.log("policyDashboardCRUDDataController called");
+	
+	$('#dashBoardAdvanceSearch').hide();
+	
+    $scope.papCRUDTableDatasTemp = [];
+    
+    $scope.dashboardAdsearch = { isDelected: 'both', stage: 'both',  scope: "", ttlDate_after: "", ttlDate_before: ""};
+
+    PolicyAppService.getData('get_DashboardPolicyCRUDData').then(function(data){
+
+		var j = data;
+		$scope.data = JSON.parse(j.data);
+		console.log($scope.data);
+		$scope.papStatusCRUDDatas =JSON.parse($scope.data.papStatusCRUDData);
+        if($scope.papStatusCRUDDatas != null){
+            for(i = 0; i < $scope.papStatusCRUDDatas.length; i++){
+                $scope.papCRUDTableDatasTemp.push($scope.papStatusCRUDDatas[i].map);
+            }
+            
+            $scope.papCRUDTableDatas = $scope.papCRUDTableDatasTemp;
+        } 
+		
+	},function(error){
+		console.log("failed");
+	});
+
+	$scope.papCRUDStatusDatas = {
+		data : 'papCRUDTableDatas',
+		enableFiltering: true,
+		columnDefs: [{ field: 'id', displayName :'id'},
+		 		 	{field: 'scope', displayName :'Scope'},
+					{field: 'policyName', displayName :'Policy Name'},
+					{field: 'version', displayName :'Version'},
+					{field: 'stage', displayName :'Stage'},
+					{field: 'createdBy', displayName :'Created By'},
+					{field: 'deleted', displayName :'Deleted'},
+					{field: 'deleteReasonCode', displayName :'Deleted Reason'},
+					{field: 'deletedBy' , displayName :'Deleted By'},
+					{field: 'modifiedBy' , displayName :'Modified By'},
+					{field: 'createdDate',  displayName :'Created Date'},
+					{field: 'modifiedDate',  displayName :'Modified Date'}
+		],
+        onRegisterApi: function(gridApi){
+        	$scope.gridApi = gridApi;
+        }
+	};
+	
+    $('#ttlDate_after').datepicker({
+    	dateFormat: 'yy-mm-dd',
+    	changeMonth: true,
+    	changeYear: true,
+    	onSelect: function(date) {
+    		angular.element($('#ttlDate_after')).triggerHandler('input');
+    	}
+    });
+    
+    $('#ttlDate_before').datepicker({
+    	dateFormat: 'yy-mm-dd',
+    	changeMonth: true,
+    	changeYear: true,
+    	onSelect: function(date) {
+    		angular.element($('#ttlDate_before')).triggerHandler('input');
+    	}
+    });
+    
+    $scope.refresh = function(){
+    	$scope.modal('advancedSearch', true);
+    	$scope.temp.policy = "";
+    };
+    
+    
+	$scope.advancedSearch = function(){
+
+		 $('#dashBoardAdvanceSearch').toggle();
+		 if($('#advancedSearchArrow').hasClass('arrowdown')){
+			 $('#advancedSearchArrow').removeClass("arrowdown");
+			 $('#advancedSearchArrow').addClass("arrowup"); 
+			 
+		 }else{
+			 $('#advancedSearchArrow').removeClass("arrowup");
+			 $('#advancedSearchArrow').addClass("arrowdown"); 
+		 }
+	}
+	
+   
+    $scope.startAdvancedSearch = function(data){
+    	
+		 console.log("startAdvancedSearch called");
+		 console.log(data.isDelected);
+		 console.log(data.stage);
+		 console.log(data.scope);
+		 console.log(data.ttlDate_after);
+		 console.log(data.ttlDate_before);
+		 
+		 if(data.scope == null){
+			 return;
+		 }
+		 
+       var uuu = "dashboardController/dashboardAdvancedSearch.htm";
+        
+        var postData={policyData: data};
+ 		$.ajax({
+ 			type : 'POST',
+ 			url : uuu,
+ 			dataType: 'json',
+ 			contentType: 'application/json',
+ 			data: JSON.stringify(postData),
+ 			success : function(data){
+ 				 console.log("dashboardAdvancedSearch data returned: " + data);
+ 				
+                 $scope.$apply(function(){  
+                	
+     				var j = data;
+     				$scope.data = JSON.parse(j.data);
+     				console.log($scope.data);
+     				$scope.papStatusCRUDDatas =JSON.parse($scope.data.policyStatusCRUDData);
+     				
+     				$scope.papCRUDTableDatasTemp = [];
+     		       
+     	            for(i = 0; i < $scope.papStatusCRUDDatas.length; i++){
+     	                $scope.papCRUDTableDatasTemp.push($scope.papStatusCRUDDatas[i].map);
+     	            }
+     	            
+     	            $scope.papCRUDTableDatas = $scope.papCRUDTableDatasTemp;
+     	            
+     	           $scope.gridApi.grid.refresh();
+               });
+ 			},
+ 			error : function(data){
+ 				console.log("dashboardAdvancedSearch Failed: data returned as " + data);
+ 			}
+ 		});
+    };
+
+});
\ No newline at end of file
diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/policyController.js b/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/policyController.js
index a340c6764..702a54366 100644
--- a/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/policyController.js
+++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/controller/policyController.js
@@ -2,7 +2,7 @@
  * ============LICENSE_START=======================================================
  * ONAP Policy Engine
  * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * Copyright (C) 2017-2018 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.
@@ -53,6 +53,10 @@ app.config(function($routeProvider) {
 		templateUrl: 'app/policyApp/policy-models/policy_DashboardHealth.html',
 		controller : "policyDashboardHealthController"
 	})
+	.when('/Dashboard_crud', {
+		templateUrl: 'app/policyApp/policy-models/policy_DashboardCRUD.html',
+		controller : "policyDashboardCRUDDataController"
+	})
 	.when('/policy_SearchFilter', {
 		templateUrl: 'app/policyApp/policy-models/policy_SearchFilter.html',
 		controller : "PolicySearchController"
diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/main/policyEditor.html b/POLICY-SDK-APP/src/main/webapp/app/policyApp/main/policyEditor.html
index 9be8d015a..430907a65 100644
--- a/POLICY-SDK-APP/src/main/webapp/app/policyApp/main/policyEditor.html
+++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/main/policyEditor.html
@@ -100,6 +100,7 @@
 	<script src= "app/policyApp/controller/policyAdminTabController.js"></script>
 	<script src= "app/policyApp/controller/dashboard_Logging_Controller.js"></script>
 	<script src= "app/policyApp/controller/dashboardController.js"></script>
+        <script src= "app/policyApp/controller/dashboardCRUDController.js"></script>
 	<script src= "app/policyApp/controller/pdpController.js"></script>
 	<script src= "app/policyApp/controller/pdpGroupPopUpController.js"></script>
 	<script src= "app/policyApp/controller/DictionaryController.js"></script>
diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/css/main.css b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/css/main.css
index 850adb338..d7c98b98c 100644
--- a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/css/main.css
+++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/css/main.css
@@ -2,7 +2,7 @@
  * ============LICENSE_START=======================================================
  * ONAP Policy Engine
  * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * Copyright (C) 2017-2018 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.
@@ -469,4 +469,85 @@ table th > a:focus {
 
 .mstooltip:hover .tooltiptext {
     visibility: visible;
+}
+
+
+.msloader {
+    border: 6px solid #a94442; 
+    border-top: 6px solid #3498db; /* Blue */
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    animation: spin 2s linear infinite;
+}
+
+
+@-webkit-keyframes spin {
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+#msPolicyloader {
+   display:block;
+   background-color:#c0c0c0;
+   width:20px;
+   height: 20px;
+   margin-left: 5px;
+}
+
+#msVersion {
+    width: 195px;
+    height: 20px;
+    border: 0px;
+    display: -webkit-flex; /* Safari */
+    -webkit-flex-flow: row-reverse wrap; /* Safari 6.1+ */
+    display: flex;
+    flex-flow: row-reverse wrap;
+}
+
+#advancedSearch i {
+  border: solid black;
+  border-width: 0 1px 1px 0;
+  display: inline-block;
+  padding: 3px;
+  margin-left:20px;
+}
+.arrowright {
+    transform: rotate(-45deg);
+    -webkit-transform: rotate(-45deg);
+}
+
+.arrowleft {
+    transform: rotate(135deg);
+    -webkit-transform: rotate(135deg);
+}
+
+.arrowup {
+    transform: rotate(-135deg);
+    -webkit-transform: rotate(-135deg);
+}
+
+.arrowdown {
+    transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+}
+
+#dashBoardAdvanceSearch .well {
+    padding-bottom: 5px;
+}
+
+#dashBoardAdvanceSearch button {
+    float: left;
+    padding-bottom: 10px;
+    background: #f5f5f5;
+    color: black;
+    font-size: 22px;
+    border: 0px solid grey;
+    border-left: none;
+    cursor: pointer;
 }
\ No newline at end of file
diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/policy_DashboardCRUD.html b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/policy_DashboardCRUD.html
new file mode 100644
index 000000000..cb02a1ca8
--- /dev/null
+++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/policy_DashboardCRUD.html
@@ -0,0 +1,99 @@
+<!--/*-
+ * ============LICENSE_START=======================================================
+ * ONAP Policy Engine
+ * ================================================================================
+ * Copyright (C) 2018 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=========================================================
+ */-->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/> 
+<div id="page-content" style="margin-bottom: 20px; width: 100%" ng-app ng-controller = "policyDashboardCRUDDataController">
+	<div>
+		<h1 style="text-align: left;font-size: 25px;color: #066090;padding-top: 15px;">Policy Status Info</h1>
+		<div ng-show="showLoader" class="span loader-container">
+			<i class="icon-spinner" role="img"
+				aria-label="Please wait while we load your content"></i>
+		</div>
+	</div>
+	<div ng-hide="showLoader">
+		<div class="btn-group" role="group">
+				<button class="btn btn-secondary" type="button"
+					onClick="window.location='policy#/Dashboard';">Logging</button>
+				<button class="btn btn-secondary" type="button"
+					onClick="window.location='policy#/Dashboard_Health';">Health</button>
+				<button class="btn btn-primary" type="button"
+					onClick="window.location='policy#/Dashboard_crud';">CRUD Info</button>	
+		</div>
+	</div>
+	<br>
+	<a id='advancedSearch' href="" ng-click="advancedSearch()" title="" class="ng-binding">Advanced Search<i id='advancedSearchArrow' class="arrowdown"></i></a>
+    <br>
+	<br>
+	<div id="dashBoardAdvanceSearch">
+		<form>
+			<div class="well">
+	
+				<div class="row">
+					<div class="form-group col-sm-2">
+						<input type="text"
+							class="form-control" 
+							ng-model="dashboardAdsearch.scope" required pattern="\S+"
+							title="Enter scope name without any spaces" placeholder="Scope like *" />
+					</div>
+					<div class="form-group col-sm-2">
+						<select 
+							class="form-control" 
+							ng-model="dashboardAdsearch.stage"
+							required pattern="\S+" title="Select the dropdown PAP or PDP.">
+							<option value="both" selected>Select Stage...</option>
+							<option>PAP</option>
+							<option>PDP</option>
+	                       </select>
+					</div>
+					<div class="form-group col-sm-2">
+						<select 
+							class="form-control" 
+							ng-model="dashboardAdsearch.isDelected"
+							required pattern="\S+" title="Select the dropdown Yes or No">
+							<option value="both" selected>Is Deleted ?</option>
+							<option>Yes</option>
+							<option>No</option>
+	                       </select>
+					</div>
+					<div class="form-group col-sm-2">
+						<input type="text" id="ttlDate_after"
+							class="form-control" name="ttlDate_after" 
+							ng-model="dashboardAdsearch.ttlDate_after" title="Select the date from calender onclick on the field." placeholder="Creation Date After..." />
+					</div>
+					<div class="form-group col-sm-2">
+						<input type="text" id="ttlDate_before"
+							class="form-control" name="ttlDate_before" 
+							ng-model="dashboardAdsearch.ttlDate_before" title="Select the date from calender onclick on the field." placeholder="Creation Date Before..."/>
+					</div>
+					<div class="form-group col-sm-2">
+	                    <button class="" herf="javascript:void(0)" ng-click="startAdvancedSearch(dashboardAdsearch);" title="Search the data entered in the Policy fields."><i class="fa fa-search"></i></button>
+					</div>
+	
+				</div>
+			</div>
+	
+		</form>
+	</div>
+     <p id=recordsMessage>Policies were retrieved for last 30 days...</p>
+	<h4 style="text-align: left; color: #157bb2"></h4>
+	<div ui-grid="papCRUDStatusDatas" ui-grid-pagination ui-grid-selection
+		ui-grid-resize-columns ui-grid-exporter class="grid" ></div>
+</div>
+	
+ 
\ No newline at end of file
diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/policy_DashboardHealth.html b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/policy_DashboardHealth.html
index 5fbdf528d..046643ea5 100644
--- a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/policy_DashboardHealth.html
+++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/policy_DashboardHealth.html
@@ -2,7 +2,7 @@
  * ============LICENSE_START=======================================================
  * ONAP Policy Engine
  * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * Copyright (C) 2017-2018 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.
@@ -19,7 +19,7 @@
  */-->
 <div id="page-content" style="margin-bottom: 20px; width: 100%">
 	<div>
-		<h1 style="text-align: left; color: #157bb2">Policy Engine Health</h1>
+        <h1 style="text-align: left;font-size: 25px;color: #066090;padding-top: 15px;">Policy Engine Health</h1>
 		<div ng-show="showLoader" class="span loader-container">
 			<i class="icon-spinner" role="img"
 				aria-label="Please wait while we load your content"></i>
@@ -31,6 +31,8 @@
 					onClick="window.location='policy#/Dashboard';">Logging</button>
 				<button class="btn btn-primary" type="button"
 					onClick="window.location='policy#/Dashboard_Health';">Health</button>
+                <button class="btn btn-secondary" type="button"
+                    onClick="window.location='policy#/Dashboard_crud';">CRUD Info</button>  
 		</div>
 	</div>
 	<br>
diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/policy_DashboardLogging.html b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/policy_DashboardLogging.html
index a42427fb5..8ec80dcba 100644
--- a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/policy_DashboardLogging.html
+++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/policy_DashboardLogging.html
@@ -2,7 +2,7 @@
  * ============LICENSE_START=======================================================
  * ONAP Policy Engine
  * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * Copyright (C) 2017-2018 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.
@@ -19,7 +19,7 @@
  */-->
 <div id="page-content" style="margin-bottom: 20px; width: 100%">
 	<div>
-		<h1 style="text-align: left; color: #157bb2">Dashboard Logging</h1>
+        <h1 style="text-align: left;font-size: 25px;color: #066090;padding-top: 15px;">Dashboard Logging</h1>
 		<div ng-show="showLoader" class="span loader-container">
 			<i class="icon-spinner" role="img"
 				aria-label="Please wait while we load your content"></i>
@@ -31,6 +31,8 @@
 					onClick="window.location='policy#/Dashboard';">Logging</button>
 				<button class="btn btn-secondary" type="button"
 					onClick="window.location='policy#/Dashboard_Health';">Health</button>
+                <button class="btn btn-secondary" type="button"
+                    onClick="window.location='policy#/Dashboard_crud';">CRUD Info</button>  
 		</div>
 	</div>
 	<br>