Add the filter option in results page

apply multiple filter in results page.
Add e2e tests for results page.

Change-Id: Ia55407d921136756ab5f15507c92775f95a761dc
Signed-off-by: thuva4 <tharma.thuva@gmail.com>

2 files changed, 112 insertions, 49 deletions

diff --git a/testapi/opnfv_testapi/ui/components/results/results.html b/testapi/opnfv_testapi/ui/components/results/results.html
index 2ae5339..0e7b8d5 100644
--- a/testapi/opnfv_testapi/ui/components/results/results.html
+++ b/testapi/opnfv_testapi/ui/components/results/results.html
@@ -18,15 +18,28 @@
 </div>
 </form>
 <div class="row" style="margin-bottom:24px;"></div>
-<div class="result-filters">
-    <h4>Filters</h4>
-    <div class="row">
-        <div class="col-md-3">
-            <label for="cpid">Start Date</label>
-            <p class="input-group">
+<div class="result-filters" style="border-top: none;">
+    <div class="row podTable" style="vertical-align:middle">
+            <div class="col-sm-1 pull-right">
+                    <button type="button" class="btn btn-danger" ng-click="ctrl.clearFilters()">
+                      <i class="fa fa-search"></i> Clear
+                    </button>
+            </div>
+        <div class="col-sm-1 pull-right">
+            <button type="button" class="btn btn-success" ng-click="ctrl.filterList()">
+              <i class="fa fa-search"></i> Filter</button>
+        </div>
+        <div class="col-sm-2 pull-right" ng-class="{'hidden': ctrl.filter=='start_date' || ctrl.filter=='end_date'}">
+            <span style="margin-top:6px">Search:&nbsp;&nbsp;</span>
+            <input type="text" class="form-control search" style="display:inline;width:105px;padding-left:6px;"
+                ng-Model="ctrl.filterText" placeholder="Search String">
+        </div>
+        <div class="col-sm-3 pull-right" style="width:20%" ng-class="{'hidden': ctrl.filter!='start_date'}">
+            <span style="margin-top:6px">Start&nbsp;Date:&nbsp;&nbsp;</span>
+            <p class="input-group" style="width:48%;display:inline-flex;">
                 <input type="text" class="form-control"
                     uib-datepicker-popup="{{ctrl.format}}"
-                    ng-model="ctrl.startDate" is-open="ctrl.startOpen"
+                    ng-model="ctrl.filterText" is-open="ctrl.startOpen"
                     close-text="Close" />
                 <span class="input-group-btn">
                     <button type="button" class="btn btn-default" ng-click="ctrl.open($event, 'startOpen')">
@@ -35,12 +48,12 @@
                 </span>
             </p>
         </div>
-        <div class="col-md-3">
-            <label for="cpid">End Date</label>
-            <p class="input-group">
+        <div class="col-sm-3 pull-right" style="width:20%" ng-class="{'hidden': ctrl.filter!='end_date'}">
+            <span style="margin-top:6px">End&nbsp;Date:&nbsp;&nbsp;</span>
+            <p class="input-group" style="width:48%;display:inline-flex;">
                 <input type="text" class="form-control"
                     uib-datepicker-popup="{{ctrl.format}}"
-                    ng-model="ctrl.endDate" is-open="ctrl.endOpen"
+                    ng-model="ctrl.filterText" is-open="ctrl.endOpen"
                     close-text="Close" />
                 <span class="input-group-btn">
                     <button type="button" class="btn btn-default" ng-click="ctrl.open($event, 'endOpen')">
@@ -49,9 +62,29 @@
                 </span>
             </p>
         </div>
-        <div class="col-md-3" style="margin-top:24px;">
-            <button type="submit" class="btn btn-primary" ng-click="ctrl.update()">Filter</button>
-            <button type="submit" class="btn btn-primary btn-danger" ng-click="ctrl.clearFilters()">Clear</button>
+        <div class="col-md-2 row pull-right" style="width: 20%;">
+            <span style="margin-top:6px">Filter:&nbsp;&nbsp;</span>
+            <select ng-model="ctrl.filter" class="form-control" style="display:inline; width:150px;">
+                    <option value="pod" ng-disabled="ctrl.testFilter('pod')" >Pod Name</option>
+                    <option value="project" ng-disabled="ctrl.testFilter('project')" >Project Name</option>
+                    <option value="case" ng-disabled="ctrl.testFilter('case')">Case Name</option>
+                    <option value="installer" ng-disabled="ctrl.testFilter('installer')">Installer</option>
+                    <option value="version" ng-disabled="ctrl.testFilter('version')">Version</option>
+                    <option value="scenario" ng-disabled="ctrl.testFilter('scenario')">Scenario</option>
+                    <option value="build_tag" ng-disabled="ctrl.testFilter('build_tag')">Build Tag</option>
+                    <option value="criteria" ng-disabled="ctrl.testFilter('criteria')">Criteria</option>
+                    <option value="start_date" ng-disabled="ctrl.testFilter('start_date')">Start Date</option>
+                    <option value="end_date" ng-disabled="ctrl.testFilter('end_date')">End Date</option>
+            </select>
+        </div>
+
+        <div class='filter-box'>
+            <div class='filter-tag' ng-repeat="(key, tag) in ctrl.tagArray">
+                {{key}}&nbsp:&nbsp{{tag}}
+                <div class='delete-tag' ng-click='ctrl.deleteTag(key)'>
+                    &times;
+                </div>
+            </div>
         </div>
     </div>
 </div>
@@ -103,7 +136,7 @@
             boundary-links="true"
             rotate="false"
             num-pages="ctrl.numPages"
-            ng-change="ctrl.update()">
+            ng-change="ctrl.filterList()">
         </uib-pagination>
     </div>
 </div>
diff --git a/testapi/opnfv_testapi/ui/components/results/resultsController.js b/testapi/opnfv_testapi/ui/components/results/resultsController.js
index cc6cc0b..e9b4443 100644
--- a/testapi/opnfv_testapi/ui/components/results/resultsController.js
+++ b/testapi/opnfv_testapi/ui/components/results/resultsController.js
@@ -51,7 +51,6 @@
         var ctrl = this;
 
         ctrl.uploadFile=uploadFile;
-        ctrl.update = update;
         ctrl.open = open;
         ctrl.clearFilters = clearFilters;
         ctrl.associateMeta = associateMeta;
@@ -60,6 +59,11 @@
         ctrl.associateProductVersion = associateProductVersion;
         ctrl.getProductVersions = getProductVersions;
         ctrl.prepVersionEdit = prepVersionEdit;
+        ctrl.deleteTag = deleteTag;
+        ctrl.filterList= filterList;
+        ctrl.testFilter = testFilter
+
+        ctrl.tagArray = {}
 
         /** Mappings of Interop WG components to marketing program names. */
         ctrl.targetMappings = {
@@ -104,8 +108,7 @@
             $state.go('home');
         }
 
-        ctrl.pageHeader = ctrl.isUserResults ?
-            'Private test results' : 'Community test results';
+        ctrl.pageHeader = "Test Results"
 
         ctrl.pageParagraph = ctrl.isUserResults ?
             'Your most recently uploaded test results are listed here.' :
@@ -118,10 +121,24 @@
 
         if (ctrl.isUserResults) {
             ctrl.authRequest = $scope.auth.doSignCheck()
-                .then(ctrl.update);
+                .then(ctrl.filterList);
             // ctrl.getUserProducts();
         } else {
-            ctrl.update();
+            ctrl.filterList();
+        }
+
+        function deleteTag(index){
+            delete  ctrl.tagArray[index];
+            ctrl.filterList();
+        }
+
+        function testFilter(text){
+            for (var filter in ctrl.tagArray){
+                if(text==filter){
+                    return true;
+                }
+            }
+            return false;
         }
 
 
@@ -138,7 +155,7 @@
            .success(function(data){
               var id = data.href.substr(data.href.lastIndexOf('/')+1);
               ctrl.uploadState = "Upload succeed. Result id is " + id;
-              ctrl.update();
+              ctrl.filterList();
            })
 
            .error(function(data, status){
@@ -159,37 +176,50 @@
          * This will contact the TestAPI API to get a listing of test run
          * results.
          */
-        function update() {
+        function filterList(){
+            if(ctrl.filter && ctrl.filterText!=""){
+                ctrl.tagArray[ctrl.filter] =  ctrl.filterText;
+            }
             ctrl.showError = false;
-            // Construct the API URL based on user-specified filters.
             var content_url = testapiApiUrl + '/results' +
                 '?page=' + ctrl.currentPage;
-            var start = $filter('date')(ctrl.startDate, 'yyyy-MM-dd');
-            if (start) {
-                content_url =
-                    content_url + '&from=' + start + ' 00:00:00';
-            }
-            var end = $filter('date')(ctrl.endDate, 'yyyy-MM-dd');
-            if (end) {
-                content_url = content_url + '&to=' + end + ' 23:59:59';
-            }
-            if (ctrl.isUserResults) {
-                content_url = content_url + '&signed';
+            for(var key in ctrl.tagArray){
+                if(key=="start_date"){
+                    var start = $filter('date')(ctrl.tagArray[key], 'yyyy-MM-dd');
+                    if (start) {
+                        content_url =
+                            content_url + '&from=' + start + ' 00:00:00';
+                    }
+                }
+                else if(key=="end_date"){
+                    var end = $filter('date')(ctrl.tagArray[key], 'yyyy-MM-dd');
+                    if (end) {
+                        content_url = content_url + '&to=' + end + ' 23:59:59';
+                    }
+                }
+                else{
+                    content_url = content_url + "&" + key + "=" + ctrl.tagArray[key]
+                }
+                if (ctrl.isUserResults) {
+                    content_url = content_url + '&signed';
+                }
             }
             ctrl.resultsRequest =
-                $http.get(content_url).success(function (data) {
-                    ctrl.data = data;
-                    ctrl.totalItems = ctrl.data.pagination.total_pages * ctrl.itemsPerPage;
-                    ctrl.currentPage = ctrl.data.pagination.current_page;
-                }).error(function (error) {
-                    ctrl.data = null;
-                    ctrl.totalItems = 0;
-                    ctrl.showError = true;
-                    ctrl.error =
-                        'Error retrieving results listing from server: ' +
-                        angular.toJson(error);
-                });
+                    $http.get(content_url).success(function (data) {
+                        ctrl.data = data;
+                        ctrl.totalItems = ctrl.data.pagination.total_pages * ctrl.itemsPerPage;
+                        ctrl.currentPage = ctrl.data.pagination.current_page;
+                    }).error(function (error) {
+                        ctrl.data = null;
+                        ctrl.totalItems = 0;
+                        ctrl.showError = true;
+                        ctrl.error =
+                            'Error retrieving results listing from server: ' +
+                            angular.toJson(error);
+                    });
+            ctrl.filterText = ''
         }
+        ctrl.filterList();
 
         /**
          * This is called when the date filter calendar is opened. It
@@ -209,9 +239,9 @@
          * listing.
          */
         function clearFilters() {
-            ctrl.startDate = null;
-            ctrl.endDate = null;
-            ctrl.update();
+            ctrl.tagArray = {}
+            ctrl.filter = undefined
+            ctrl.filterList();
         }
 
         /**