Change deatails in result page to dynamic

Change the static code of the show details in the result
page to dynamic

JIRA: RELENG-358

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

5 files changed, 117 insertions, 66 deletions

diff --git a/testapi/opnfv_testapi/tests/UI/e2e/resultsControllerSpec.js b/testapi/opnfv_testapi/tests/UI/e2e/resultsControllerSpec.js
index d091a38..925e82c 100644
--- a/testapi/opnfv_testapi/tests/UI/e2e/resultsControllerSpec.js
+++ b/testapi/opnfv_testapi/tests/UI/e2e/resultsControllerSpec.js
@@ -44,11 +44,40 @@ describe('testing the result page for anonymous user', function () {
             },
             {
                 request: {
+                    path: '/api/v1/results/5a45170bbb2092000e2643f4',
+                    method: 'GET',
+                },
+                response: {
+                    data: {
+                        "project_name": "testproject",
+                        "description": "Demo results",
+                        "stop_date": "2017-12-28 16:08:43",
+                        "case_name": "testcase",
+                        "build_tag": null,
+                        "user": null,
+                        "installer": "fuel",
+                        "scenario": "test-scenario",
+                        "public": "true",
+                        "version": "euphrates",
+                        "details": {
+                            "failures": 0,
+                            "errors": 0,
+                            "stream": "steam text"
+                        },
+                        "criteria": "PASS",
+                        "_id": "5a45170bbb2092000e2643f4",
+                        "start_date": "2017-12-28 14:44:27",
+                        "pod_name": "testPod"
+                    }
+                }
+            },
+            {
+                request: {
                     path: '/api/v1/results',
                     method: 'GET',
                     queryString: {
                         page: '1',
-                        project: 'testproject'
+                        installer: 'testinstaller'
                       }
                 },
                 response: {
@@ -65,7 +94,7 @@ describe('testing the result page for anonymous user', function () {
                                 "case_name": "testcase",
                                 "build_tag": null,
                                 "user": null,
-                                "installer": "fuel",
+                                "installer": "testinstaller",
                                 "scenario": "test-scenario",
                                 "trust_indicator": null,
                                 "public": "true",
@@ -86,8 +115,8 @@ describe('testing the result page for anonymous user', function () {
                     method: 'GET',
                     queryString: {
                         page: '1',
-                        project: 'testproject',
-                        case: 'testcase'
+                        installer: 'testinstaller',
+                        version: 'testversion'
                       }
                 },
                 response: {
@@ -104,10 +133,10 @@ describe('testing the result page for anonymous user', function () {
                                 "case_name": "testcase",
                                 "build_tag": null,
                                 "user": null,
-                                "installer": "fuel",
+                                "installer": "testinstaller",
                                 "scenario": "test-scenario",
                                 "public": "true",
-                                "version": "euphrates",
+                                "version": "testversion",
                                 "details": "",
                                 "criteria": "PASS",
                                 "_id": "5a45170bbb2092000e2643f6",
@@ -117,7 +146,25 @@ describe('testing the result page for anonymous user', function () {
                         ]
                     }
                 }
-            }
+            },
+            {
+                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"}
+                        ]
+                    }
+                }
+              }
         ]);
     });
 
@@ -125,7 +172,7 @@ describe('testing the result page for anonymous user', function () {
         mock.teardown();
     });
 
-    it( 'should show the results page for anonymous user', function() {
+    it( 'should show the results page ', function() {
         browser.get(baseURL+"#/results");
         expect(element(by.cssContainingText(".ng-binding.ng-scope","Test Results")).isDisplayed()).toBe(true);
     });
@@ -137,26 +184,37 @@ describe('testing the result page for anonymous user', function () {
         browser.wait(EC.urlContains(baseURL+ '#/results'), 10000);
     });
 
-    it('Should show the results in results page for anonymous user ', function () {
+    it('Should show the results in results page', function () {
         browser.get(baseURL+"#/results");
         var row = element.all(by.repeater('(index, result) in ctrl.data.results')).first();
         var cells = row.all(by.tagName('td'));
         expect(cells.get(0).getText()).toContain("0e2643f4");
     });
 
-    it('Should show the results in results page related to the filters for anonymous user ', function () {
+    it( 'navigate to result page and check details', function() {
+        browser.get(baseURL);
+        var resultLink = element(by.linkText('Results')).click();
+        var EC = browser.ExpectedConditions;
+        browser.wait(EC.urlContains(baseURL+ '#/results'), 10000);
+        var resultLink = element(by.linkText('0e2643f4')).click();
+        browser.wait(EC.urlContains(baseURL+ '#/result/5a45170bbb2092000e2643f4'), 10000);
+        expect(element(by.cssContainingText(".key.col-md-1","failures")).isDisplayed()).toBe(true);
+        expect(element(by.cssContainingText(".leaf-value.col-md-11","0")).isDisplayed()).toBe(true);
+    });
+
+    it('Should show the results in results page related to the filters', function () {
         browser.get(baseURL+"#/results");
         var filter = element(by.model('ctrl.filter'));
         var filterText = element(by.model('ctrl.filterText'));
-        filter.sendKeys('project');
-        filterText.sendKeys('testproject');
+        filter.sendKeys('installer');
+        filterText.sendKeys('testinstaller');
         var buttonFilter = element(by.buttonText('Filter'));
         buttonFilter.click();
         var row = element.all(by.repeater('(index, result) in ctrl.data.results')).first();
         var cells = row.all(by.tagName('td'));
         expect(cells.get(0).getText()).toContain("0e2643f5");
-        filter.sendKeys('case');
-        filterText.sendKeys('testcase')
+        filter.sendKeys('version');
+        filterText.sendKeys('testversion')
         buttonFilter.click();
         expect(cells.get(0).getText()).toContain("0e2643f6");
     });
@@ -164,8 +222,8 @@ describe('testing the result page for anonymous user', function () {
         browser.get(baseURL+"#/results");
         var filter = element(by.model('ctrl.filter'));
         var filterText = element(by.model('ctrl.filterText'));
-        filter.sendKeys('project');
-        filterText.sendKeys('testproject1');
+        filter.sendKeys('installer');
+        filterText.sendKeys('testisntaller1');
         var buttonFilter = element(by.buttonText('Filter'));
         buttonFilter.click();
         expect(element(by.css('.alert.alert-danger.ng-binding.ng-scope'))
@@ -233,7 +291,7 @@ describe('testing the result page for user', function () {
                     method: 'GET',
                     queryString: {
                         page: '1',
-                        project: 'testproject'
+                        installer: 'testinstaller'
                       }
                 },
                 response: {
@@ -250,7 +308,7 @@ describe('testing the result page for user', function () {
                                 "case_name": "testcase",
                                 "build_tag": null,
                                 "user": null,
-                                "installer": "fuel",
+                                "installer": "testinstaller",
                                 "scenario": "test-scenario",
                                 "public": "true",
                                 "version": "euphrates",
@@ -270,8 +328,8 @@ describe('testing the result page for user', function () {
                     method: 'GET',
                     queryString: {
                         page: '1',
-                        project: 'testproject',
-                        case: 'testcase'
+                        installer: 'testinstaller',
+                        version: 'testversion'
                       }
                 },
                 response: {
@@ -288,11 +346,11 @@ describe('testing the result page for user', function () {
                                 "case_name": "testcase",
                                 "build_tag": null,
                                 "user": null,
-                                "installer": "fuel",
+                                "installer": "testinstaller",
                                 "scenario": "test-scenario",
                                 "trust_indicator": null,
                                 "public": "true",
-                                "version": "euphrates",
+                                "version": "testversion",
                                 "details": "",
                                 "criteria": "PASS",
                                 "_id": "5a45170bbb2092000e2643f6",
@@ -302,7 +360,25 @@ describe('testing the result page for user', function () {
                         ]
                     }
                 }
-            }
+            },
+            {
+                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"}
+                        ]
+                    }
+                }
+              }
         ]);
     });
 
@@ -333,15 +409,15 @@ describe('testing the result page for user', function () {
         browser.get(baseURL+"#/results");
         var filter = element(by.model('ctrl.filter'));
         var filterText = element(by.model('ctrl.filterText'));
-        filter.sendKeys('project');
-        filterText.sendKeys('testproject');
+        filter.sendKeys('installer');
+        filterText.sendKeys('testinstaller');
         var buttonFilter = element(by.buttonText('Filter'));
         buttonFilter.click();
         var row = element.all(by.repeater('(index, result) in ctrl.data.results')).first();
         var cells = row.all(by.tagName('td'));
         expect(cells.get(0).getText()).toContain("0e2643f5");
-        filter.sendKeys('case');
-        filterText.sendKeys('testcase')
+        filter.sendKeys('version');
+        filterText.sendKeys('testversion')
         buttonFilter.click();
         expect(cells.get(0).getText()).toContain("0e2643f6");
     });
@@ -350,8 +426,8 @@ describe('testing the result page for user', function () {
         browser.get(baseURL+"#/results");
         var filter = element(by.model('ctrl.filter'));
         var filterText = element(by.model('ctrl.filterText'));
-        filter.sendKeys('project');
-        filterText.sendKeys('testproject');
+        filter.sendKeys('installer');
+        filterText.sendKeys('testinstaller');
         var buttonFilter = element(by.buttonText('Filter'));
         buttonFilter.click();
         var row = element.all(by.repeater('(index, result) in ctrl.data.results')).first();
@@ -367,8 +443,8 @@ describe('testing the result page for user', function () {
         browser.get(baseURL+"#/results");
         var filter = element(by.model('ctrl.filter'));
         var filterText = element(by.model('ctrl.filterText'));
-        filter.sendKeys('project');
-        filterText.sendKeys('testproject1');
+        filter.sendKeys('installer');
+        filterText.sendKeys('testisntaller1');
         var buttonFilter = element(by.buttonText('Filter'));
         buttonFilter.click();
         expect(element(by.css('.alert.alert-danger.ng-binding.ng-scope'))
diff --git a/testapi/opnfv_testapi/ui/app.js b/testapi/opnfv_testapi/ui/app.js
index ada7577..b4e8d08 100644
--- a/testapi/opnfv_testapi/ui/app.js
+++ b/testapi/opnfv_testapi/ui/app.js
@@ -19,7 +19,7 @@
     angular
         .module('testapiApp', [
             'ui.router','ui.bootstrap', 'cgBusy',
-            'ngResource', 'angular-confirm'
+            'ngResource', 'angular-confirm', 'angular-json-tree'
         ]);
 
     angular
diff --git a/testapi/opnfv_testapi/ui/components/results/result/result.html b/testapi/opnfv_testapi/ui/components/results/result/result.html
index 52d794e..e6b30a9 100644
--- a/testapi/opnfv_testapi/ui/components/results/result/result.html
+++ b/testapi/opnfv_testapi/ui/components/results/result/result.html
@@ -50,31 +50,7 @@
                 <tr style="padding:9px">
                     <td class="podsTableTd">Details&nbsp;:</td>
                     <td width="90%" class="podsTableLeftTd">
-                            <a ng-click="ctrl.showDetails()">
-                                <p ng-if="ctrl.details">Hide</p>
-                                <p ng-if="!ctrl.details">Show</p>
-                            </a>
-                            <table class="table" ng-class="{'hidden' : !ctrl.details}" style="margin:10px">
-                            <tbody>
-                                <tr style="padding:9px"></tr>
-                                <tr style="padding:9px">
-                                    <td class="podsTableTd">Failures&nbsp;:</td>
-                                    <td width="90%" class="podsTableLeftTd">{{ctrl.data.details.failures}}</td>
-                                </tr>
-                                <tr style="padding:9px">
-                                    <td class="podsTableTd">Details&nbsp;:</td>
-                                    <td width="90%" class="podsTableLeftTd">{{ctrl.data.details.errors}}</td>
-                                </tr>
-                                <tr style="padding:9px">
-                                    <td class="podsTableTd">Stream&nbsp;:</td>
-                                    <td width="90%" class="podsTableLeftTd"><p>{{ctrl.data.details.stream}}</p></td>
-                                </tr>
-                                <tr style="padding:9px">
-                                    <td class="podsTableTd">TestsRun&nbsp;:</td>
-                                    <td width="90%" class="podsTableLeftTd"><p>{{ctrl.data.details.testsRun}}</p></td>
-                                </tr>
-                            </tbody>
-                        </table>
+                        <json-tree object="ctrl.json.object" root-name="object" start-expanded="true"></json-tree>
                     </td>
                 </tr>
             </tbody>
diff --git a/testapi/opnfv_testapi/ui/components/results/result/resultController.js b/testapi/opnfv_testapi/ui/components/results/result/resultController.js
index cb5dd28..d297b43 100644
--- a/testapi/opnfv_testapi/ui/components/results/result/resultController.js
+++ b/testapi/opnfv_testapi/ui/components/results/result/resultController.js
@@ -35,8 +35,10 @@
         ctrl.url = testapiApiUrl + '/results';
         ctrl._id = $state.params['_id'];
         ctrl.loadDetails = loadDetails
-        ctrl.showTrustIndicator = showTrustIndicator
-        ctrl.showDetails = showDetails
+
+        ctrl.json = {};
+        ctrl.json.string = '{"id": ""}';
+        ctrl.json.object = JSON.parse(ctrl.json.string);
 
         /**
          *Contact the testapi and retrevie the result details
@@ -47,6 +49,8 @@
             ctrl.podsRequest =
                 $http.get(resultUrl).success(function (data) {
                     ctrl.data = data;
+                    ctrl.object=JSON.stringify(ctrl.data.details)
+                    ctrl.json.object = JSON.parse(ctrl.object)
                 }).catch(function (error) {
                     ctrl.data = null;
                     ctrl.showError = true;
@@ -54,13 +58,6 @@
                 });
         }
 
-        function showDetails(){
-            if(ctrl.details){
-                ctrl.details = false
-            }else{
-                ctrl.details = true
-            }
-        }
         ctrl.loadDetails();
     }
 })();
\ No newline at end of file
diff --git a/testapi/opnfv_testapi/ui/index.html b/testapi/opnfv_testapi/ui/index.html
index 68c6cc5..f345197 100644
--- a/testapi/opnfv_testapi/ui/index.html
+++ b/testapi/opnfv_testapi/ui/index.html
@@ -28,6 +28,7 @@
         <link rel="stylesheet" href="testapi-ui/assets/lib/angular-busy/dist/angular-busy.min.css">
         <link rel="stylesheet" href="testapi-ui/assets/css/style.css">
         <link rel="stylesheet" href="testapi-ui/assets/lib/font-awesome-4.7.0/css/font-awesome.min.css">
+        <link rel="stylesheet" href="testapi-ui/assets/lib/angular-json-tree/angular-json-tree.css" />
 
         <script src="testapi-ui/assets/lib/jquery/jquery-3.2.1.min.js"></script>
         <script src="testapi-ui/assets/lib/bootstrap/dist/js/bootstrap.min.js"></script>
@@ -36,6 +37,7 @@
         <script src="testapi-ui/assets/lib/angular-resource/angular-resource.min.js"></script>
         <script src="testapi-ui/assets/lib/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
         <script src="testapi-ui/assets/lib/angular-busy/dist/angular-busy.min.js"></script>
+        <script src="testapi-ui/assets/lib/angular-json-tree/angular-json-tree.min.js"></script>
         <script src="testapi-ui/assets/lib/angular-confirm-modal/angular-confirm.js"></script>
         <script src="testapi-ui/app.js"></script>