Add sorting in pods page

Show the results in sorted order
Provide options to sort the results by name,
role, mode

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

3 files changed, 92 insertions, 18 deletions

diff --git a/testapi/opnfv_testapi/tests/UI/e2e/podsControllerSpec.js b/testapi/opnfv_testapi/tests/UI/e2e/podsControllerSpec.js
index 3505a84..0643097 100644
--- a/testapi/opnfv_testapi/tests/UI/e2e/podsControllerSpec.js
+++ b/testapi/opnfv_testapi/tests/UI/e2e/podsControllerSpec.js
@@ -5,19 +5,7 @@ var baseURL = "http://localhost:8000"
 describe('testing the Pods page for anonymous user', function () {
 
     beforeEach(function(){
-        mock([{
-            request: {
-              path: '/api/v1/pods',
-              method: 'GET'
-            },
-            response: {
-                data: {
-                    pods: [{role: "community-ci", name: "test", creator: "testUser",
-                    details: "DemoDetails", mode: "metal", _id: "59f02f099a07c84bfc5c7aed",
-                    creation_date: "2017-10-25 11:58:25.926168"}]
-                }
-            }
-          },
+        mock([
           {
             request: {
                 path: '/api/v1/pods',
@@ -33,7 +21,25 @@ describe('testing the Pods page for anonymous user', function () {
                     creation_date: "2017-10-25 11:58:25.926168"}]
                 }
             }
-        }
+        },
+        {
+            request: {
+              path: '/api/v1/pods',
+              method: 'GET'
+            },
+            response: {
+                data: {
+                    pods: [
+                        {role: "community-ci", name: "test2", creator: "testUser",
+                        details: "DemoDetails", mode: "metal", _id: "59f02f099a07c84bfc5c7ae5",
+                        creation_date: "2017-10-25 11:58:25.926168"},
+                        {role: "production-ci", name: "test", creator: "testUser",
+                        details: "DemoDetails", mode: "virtual", _id: "59f02f099a07c84bfc5c7aed",
+                        creation_date: "2017-10-25 11:58:25.926168"}
+                    ]
+                }
+            }
+          }
     ]);
     });
 
@@ -64,12 +70,30 @@ describe('testing the Pods page for anonymous user', function () {
         expect(buttonDelete.isDisplayed()).toBeFalsy();
     });
 
-    it('Show results', function () {
+    it('Show results in a sorted order', function () {
         var row = element.all(by.repeater('(index, pod) in ctrl.data.pods')).first();
         var cells = row.all(by.tagName('td'));
         expect(cells.get(1).getText()).toContain("test");
     });
 
+    it('Sort the results by mode', function () {
+        browser.get(baseURL+'#/pods');
+        var sortMode = element(by.xpath('//*[@id="ng-app"]/body/div/div[6]/div/table/thead/tr/th[4]/a[2]/span'))
+        sortMode.click();
+        var row = element.all(by.repeater('(index, pod) in ctrl.data.pods')).first();
+        var cells = row.all(by.tagName('td'));
+        expect(cells.get(1).getText()).toContain("test2");
+    });
+
+    it('Sort the results by role', function () {
+        browser.get(baseURL+'#/pods');
+        var sortRole = element(by.xpath('//*[@id="ng-app"]/body/div/div[6]/div/table/thead/tr/th[3]/a[2]/span'))
+        sortRole.click();
+        var row = element.all(by.repeater('(index, pod) in ctrl.data.pods')).first();
+        var cells = row.all(by.tagName('td'));
+        expect(cells.get(1).getText()).toContain("test2");
+    });
+
     it('Show relevant results to the filter', function () {
         var filter = element(by.model('ctrl.filterText'));
         filter.sendKeys('test');
diff --git a/testapi/opnfv_testapi/ui/components/pods/pods.html b/testapi/opnfv_testapi/ui/components/pods/pods.html
index 4fa8fb1..7873977 100644
--- a/testapi/opnfv_testapi/ui/components/pods/pods.html
+++ b/testapi/opnfv_testapi/ui/components/pods/pods.html
@@ -42,9 +42,30 @@
         <tr style="
         text-align: center;">
             <th style="width:1%">Bulk Select</th>
-            <th>Name</th>
-            <th>Role</th>
-            <th>Mode</th>
+            <th>Name
+                <a class="text-danger"  ng-click="ctrl.sortBy('name')" ng-class="{ 'hidden': !ctrl.sorting['name'] }" >
+                    <span class="glyphicon glyphicon-sort-by-alphabet pull-right" aria-hidden="true"></span>
+                </a>
+                <a class="text-danger"  ng-click="ctrl.sortBy('name')" ng-class="{ 'hidden': ctrl.sorting['name'] }" >
+                    <span class="glyphicon glyphicon-sort-by-alphabet-alt pull-right" aria-hidden="true"></span>
+                </a>
+            </th>
+            <th>Role
+                <a class="text-danger"  ng-click="ctrl.sortBy('role')" ng-class="{ 'hidden': !ctrl.sorting['role']}" >
+                    <span class="glyphicon glyphicon-sort-by-alphabet pull-right" aria-hidden="true"></span>
+                </a>
+                <a class="text-danger"  ng-click="ctrl.sortBy('role')" ng-class="{ 'hidden': ctrl.sorting['role']}" >
+                    <span class="glyphicon glyphicon-sort-by-alphabet-alt pull-right" aria-hidden="true"></span>
+                </a>
+            </th>
+            <th>Mode
+                <a class="text-danger"  ng-click="ctrl.sortBy('mode')" ng-class="{ 'hidden': !ctrl.sorting['mode'] }" >
+                    <span class="glyphicon glyphicon-sort-by-alphabet pull-right" aria-hidden="true"></span>
+                </a>
+                <a class="text-danger"  ng-click="ctrl.sortBy('mode')" ng-class="{ 'hidden': ctrl.sorting['mode'] }" >
+                    <span class="glyphicon glyphicon-sort-by-alphabet-alt pull-right" aria-hidden="true"></span>
+                </a>
+            </th>
             <th ng-class="{ 'hidden': !auth.isAuthenticated }">Operation</th>
         </tr>
         </thead>
diff --git a/testapi/opnfv_testapi/ui/components/pods/podsController.js b/testapi/opnfv_testapi/ui/components/pods/podsController.js
index 95e3571..180e0ed 100644
--- a/testapi/opnfv_testapi/ui/components/pods/podsController.js
+++ b/testapi/opnfv_testapi/ui/components/pods/podsController.js
@@ -35,6 +35,7 @@
         ctrl.url = testapiApiUrl + '/pods';
         ctrl.checkBox = []
         ctrl.checkBoxList = [];
+        ctrl.sorting = {};
 
         ctrl.create = create;
         ctrl.listPods = listPods;
@@ -47,6 +48,33 @@
         ctrl.batchDelete = batchDelete;
         ctrl.viewPod = viewPod
         ctrl.filterText = ''
+        ctrl.sortBy = sortBy
+
+        function sortBy(field){
+            if(ctrl.sorting[field]){
+                ctrl.data.pods.sort(function(a,b) {
+                    if (a[field].toLowerCase() > b[field].toLowerCase()) {
+                        return -1;
+                    }
+                    if (a[field].toLowerCase() < b[field].toLowerCase()) {
+                        return 1;
+                    }
+                    return 0;
+                });
+                ctrl.sorting[field] = false
+            }else{
+                ctrl.data.pods.sort(function(a,b) {
+                    if (a[field].toLowerCase() < b[field].toLowerCase()) {
+                        return -1;
+                    }
+                    if (a[field].toLowerCase() > b[field].toLowerCase()) {
+                        return 1;
+                    }
+                        return 0;
+                });
+                ctrl.sorting[field] = true
+            }
+        }
 
         /**
          * This is called when the date filter calendar is opened. It
@@ -105,6 +133,7 @@
             ctrl.podsRequest =
                 $http.get(reqURL).success(function (data) {
                     ctrl.data = data;
+                    ctrl.sortBy("name")
                 }).catch(function (data) {
                     ctrl.data = null;
                     ctrl.showError = true;