From 4ca8f9bc1b74ce826b36f0d44233679bfc5ce8f9 Mon Sep 17 00:00:00 2001 From: thuva4 Date: Fri, 16 Mar 2018 15:29:44 +0530 Subject: 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 --- .../static/testapi-ui/assets/css/style.css | 12 ++ .../lib/angular-json-tree/angular-json-tree.css | 76 ++++++++++++ .../lib/angular-json-tree/angular-json-tree.min.js | 67 ++++++++++ .../tests/UI/e2e/resultsControllerSpec.js | 138 ++++++++++++++++----- testapi/opnfv_testapi/ui/app.js | 2 +- .../ui/components/results/result/result.html | 26 +--- .../components/results/result/resultController.js | 15 +-- testapi/opnfv_testapi/ui/index.html | 2 + 8 files changed, 272 insertions(+), 66 deletions(-) create mode 100644 testapi/3rd_party/static/testapi-ui/assets/lib/angular-json-tree/angular-json-tree.css create mode 100644 testapi/3rd_party/static/testapi-ui/assets/lib/angular-json-tree/angular-json-tree.min.js (limited to 'testapi') 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: '' + } + }]).directive("jsonNode", ["ajsRecursiveDirectiveHelper", function (a) { + return { + restrict: "E", + scope: { + key: "=", + value: "=", + startExpanded: "&?" + }, + compile: function (e) { + return a.compile(e, this) + }, + template: ' {{key}} {{value}} {{preview}} ', + 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 @@ -42,13 +42,42 @@ 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 @@ Details : - -

Hide

-

Show

- - - - - - - - - - - - - - - - - - - - - -
Failures :{{ctrl.data.details.failures}}
Details :{{ctrl.data.details.errors}}
Stream :

{{ctrl.data.details.stream}}

TestsRun :

{{ctrl.data.details.testsRun}}

+ 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 @@ + @@ -36,6 +37,7 @@ + -- cgit 1.2.3-korg