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>

3 files changed, 155 insertions, 0 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