Merge "Change deatails in result page to dynamic"

8 files changed, 272 insertions, 66 deletions

diff --git a/testapi/3rd_party/static/testapi-ui/assets/css/style.css b/testapi/3rd_party/static/testapi-ui/assets/css/style.css
index feed1b6..fb21399 100644
--- a/testapi/3rd_party/static/testapi-ui/assets/css/style.css
+++ b/testapi/3rd_party/static/testapi-ui/assets/css/style.css
@@ -281,3 +281,15 @@ a.glyphicon {
   border-top:none!important;
   padding-bottom:0px!important;
 }
+
+json-tree .key {
+  color: black!important;
+}
+
+.branch-preview {
+  display: none!important;
+}
+
+json-tree .leaf-value{
+  word-break: normal!important;
+}
\ No newline at end of file
diff --git a/testapi/3rd_party/static/testapi-ui/assets/lib/angular-json-tree/angular-json-tree.css b/testapi/3rd_party/static/testapi-ui/assets/lib/angular-json-tree/angular-json-tree.css
new file mode 100644
index 0000000..f25142a
--- /dev/null
+++ b/testapi/3rd_party/static/testapi-ui/assets/lib/angular-json-tree/angular-json-tree.css
@@ -0,0 +1,76 @@
+/* Structure */
+json-tree {
+  box-sizing: border-box;
+}
+json-tree *,
+json-tree *:before,
+json-tree *:after {
+  box-sizing: border-box;
+}
+json-tree .key {
+  vertical-align: middle;
+}
+json-tree .expandable {
+  position: relative;
+  padding-left: 0px
+}
+json-tree .expandable::before {
+  pointer-events: none;
+}
+json-tree .branch-preview {
+  display: inline-block;
+  vertical-align: middle;
+}
+/* Looks */
+json-tree ul {
+  padding-left: 0px;
+  margin-bottom: 0px;
+}
+json-tree li,
+json-tree ul {
+  list-style: none;
+}
+json-tree li {
+  line-height: 1.5em;
+}
+json-tree .key {
+  font-weight: bold;
+  color: #D02828;
+  /* padding: 5px 10px 5px 15px; */
+}
+json-tree .key::after {
+  content: ':';
+}
+json-tree json-node.expandable::before {
+  /* content: '\25b6'; */
+  position: absolute;
+  left: 0px;
+  font-size: 10px;
+  -webkit-transition: -webkit-transform .1s ease;
+  transition: -webkit-transform .1s ease;
+  transition: transform .1s ease;
+  transition: transform .1s ease, -webkit-transform .1s ease;
+}
+json-tree json-node.expandable.expanded::before {
+  -webkit-transform: rotate(90deg);
+          transform: rotate(90deg);
+}
+json-tree .leaf-value,
+json-tree .branch-preview {
+  word-break: break-all;
+}
+json-tree .branch-preview {
+  overflow: hidden;
+  font-style: italic;
+  max-width: 40%;
+  height: 1.5em;
+  opacity: .7;
+}
+
+json-tree .firstkey::after {
+  content: '';
+}
+
+li > json-node > ul {
+  padding-left: 10px;
+}
\ No newline at end of file
diff --git a/testapi/3rd_party/static/testapi-ui/assets/lib/angular-json-tree/angular-json-tree.min.js b/testapi/3rd_party/static/testapi-ui/assets/lib/angular-json-tree/angular-json-tree.min.js
new file mode 100644
index 0000000..97f407e
--- /dev/null
+++ b/testapi/3rd_party/static/testapi-ui/assets/lib/angular-json-tree/angular-json-tree.min.js
@@ -0,0 +1,67 @@
+/*global angular */ ! function () {
+    "use strict";
+    var e = {
+        is: function (e, a) {
+            return Object.prototype.toString.call(e).slice(8, -1) === a
+        },
+        whatClass: function (e) {
+            return Object.prototype.toString.call(e).slice(8, -1)
+        },
+        forKeys: function (e, a) {
+            for (var n in e)
+                if (e.hasOwnProperty(n) && "function" != typeof e[n] && a(n, e[n])) break
+        }
+    };
+    angular.module("angular-json-tree", ["ajs.RecursiveDirectiveHelper"]).directive("jsonTree", [function () {
+        return {
+            restrict: "E",
+            scope: {
+                object: "=",
+                startExpanded: "&?",
+                rootName: "&?"
+            },
+            template: '<json-node key="rootName() || \'\'" value="object" start-expanded="startExpanded()"></json-node>'
+        }
+    }]).directive("jsonNode", ["ajsRecursiveDirectiveHelper", function (a) {
+        return {
+            restrict: "E",
+            scope: {
+                key: "=",
+                value: "=",
+                startExpanded: "&?"
+            },
+            compile: function (e) {
+                return a.compile(e, this)
+            },
+            template: ' <span style="padding-left:0px" class= "key col-md-1" ng-class="{\'hidden\' : key==\'\' && key!=\'0\'}" ng-click="toggleExpanded()">{{key}}</span>       <span class="leaf-value col-md-11" ng-if="!isExpandable">{{value}}</span>       <span class="branch-preview" ng-if="isExpandable" ng-show="!isExpanded" ng-click="toggleExpanded()">{{preview}}</span>       <ul class="branch-value" ng-if="isExpandable" >           <li ng-repeat="(subkey,subval) in value">               <json-node key="subkey" class="col-md-12" value="subval"></json-node>           </li>       </ul>',
+            pre: function (a, n, s) {
+                if (n.addClass(e.whatClass(a.value).toLowerCase()), e.is(a.value, "Object") || e.is(a.value, "Array")) {
+                    a.isExpandable = !0, n.addClass("expandable");
+                    var t = e.is(a.value, "Array");
+                    a.preview = t ? "[ " : "{ ", e.forKeys(a.value, function (e, n) {
+                        t ? a.preview += n + ", " : a.preview += e + ": " + n + ", "
+                    }), a.preview = a.preview.substring(0, a.preview.length - (a.preview.length > 2 ? 2 : 0)) + (t ? " ]" : " }"), a.startExpanded && a.startExpanded() && (a.shouldRender = !0, n.addClass("expanded")), a.isExpanded = a.startExpanded ? a.startExpanded() : !1, a.toggleExpanded = function () {
+                        a.isExpanded = !a.isExpanded, a.isExpanded ? n.addClass("expanded") : n.removeClass("expanded"), a.shouldRender = !0
+                    }
+                } else a.isExpandable = !1, n.addClass("not-expandable")
+            }
+        }
+    }]), angular.module("ajs.RecursiveDirectiveHelper", []).factory("ajsRecursiveDirectiveHelper", ["$compile", function (e) {
+        return {
+            compile: function (a, n) {
+                angular.isFunction(n) && (n = {
+                    post: n
+                });
+                var s, t = a.contents().remove();
+                return {
+                    pre: n && n.pre ? n.pre : null,
+                    post: function (a, r) {
+                        s || (s = e(t)), s(a, function (e) {
+                            r.append(e)
+                        }), n && n.post && n.post.apply(null, arguments)
+                    }
+                }
+            }
+        }
+    }])
+}();
\ No newline at end of file
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>