Repository: incubator-htrace Updated Branches: refs/heads/master 10f2c6a60 -> 4da50ae58
HTRACE-45. Add Span details page skeleton (Abraham Elmahrek via Colin P. McCabe) Project: http://git-wip-us.apache.org/repos/asf/incubator-htrace/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-htrace/commit/4da50ae5 Tree: http://git-wip-us.apache.org/repos/asf/incubator-htrace/tree/4da50ae5 Diff: http://git-wip-us.apache.org/repos/asf/incubator-htrace/diff/4da50ae5 Branch: refs/heads/master Commit: 4da50ae58d8b4a2d915f810a9c791e4d17903973 Parents: 10f2c6a Author: Colin P. Mccabe <[email protected]> Authored: Mon Jan 12 13:03:02 2015 -0800 Committer: Colin P. Mccabe <[email protected]> Committed: Mon Jan 12 13:03:02 2015 -0800 ---------------------------------------------------------------------- htrace-core/src/web/app/setup.js | 70 ++++++++++++++++++++++++--- htrace-core/src/web/app/views/span.js | 44 +++++++++++++++-- htrace-core/src/web/index.html | 78 ++++++++++++++++++++++-------- 3 files changed, 163 insertions(+), 29 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-htrace/blob/4da50ae5/htrace-core/src/web/app/setup.js ---------------------------------------------------------------------- diff --git a/htrace-core/src/web/app/setup.js b/htrace-core/src/web/app/setup.js index 12bd691..211b2ea 100644 --- a/htrace-core/src/web/app/setup.js +++ b/htrace-core/src/web/app/setup.js @@ -16,12 +16,68 @@ * specific language governing permissions and limitations * under the License. */ - -$(function() { - var spansCollection = spans.clone(); - $("*[role='main']").append(new App.SpanView({"collection": spansCollection, "id": "span-list"}).$el); - spansCollection.trigger('change'); +var Router = Backbone.Router.extend({ + + routes: { + "": "search", + "spans/:span": "span" + }, + + initialize: function() { + this.spansCollection = spans.clone(); + this.spanViews = {}; + + this.listSpansView = new App.ListSpansView({ + "collection": this.spansCollection, + "id": "span-list" + }); + this.searchView = new App.SearchView({ + "collection": this.spansCollection, + "el": $("#list").find("[role='form']") + }); + + + this.spansCollection.trigger('change'); + }, + + search: function() { + var root = $("#list"); + + $("*[role='application']").css('display', 'none'); + + root.find("*[role='main']").append(this.listSpansView.$el); - var search = new App.SearchView({"collection": spansCollection, "el": $("*[role='form']")}); -}) \ No newline at end of file + root.show(); + }, + + span: function(span) { + var root = $("#span"); + + // Cache views to avoid leaks + if (!(span in this.spanViews)) { + this.spanViews[span] = new App.SpanView({ + "model": this.spansCollection.findWhere({ + "spanId": parseInt(span) + }), + "id": "span-details" + }); + } + + var view = this.spanViews[span]; + + $("*[role='application']").css('display', 'none'); + + view.render(); + root.find("*[role='main']").empty(); + root.find("*[role='main']").append(view.$el); + + root.show(); + } +}); + +window.urlconf = new Router(); + +$(function() { + Backbone.history.start(); +}); http://git-wip-us.apache.org/repos/asf/incubator-htrace/blob/4da50ae5/htrace-core/src/web/app/views/span.js ---------------------------------------------------------------------- diff --git a/htrace-core/src/web/app/views/span.js b/htrace-core/src/web/app/views/span.js index 81cf59c..d976a71 100644 --- a/htrace-core/src/web/app/views/span.js +++ b/htrace-core/src/web/app/views/span.js @@ -17,10 +17,13 @@ * under the License. */ -App.SpanView = Backbone.View.extend({ +App.ListSpansView = Backbone.View.extend({ "tagName": "ul", "className": "spans", - "template": _.template($("#span-template").html()), + "template": _.template($("#list-span-template").html()), + "events": { + "click li": "spanClicked" + }, initialize: function() { _.bindAll(this, "render"); @@ -30,9 +33,44 @@ App.SpanView = Backbone.View.extend({ }, "render": function() { + if (this.rendered) { + $(this.el).empty(); + } + + $(this.el).append( + this.template({ + "spans": this.collection.toJSON() + })); + + this.rendered = true; + + return this; + }, + + "spanClicked": function(e) { + e.preventDefault(); + var spanId = $(e.currentTarget).data("id"); + window.urlconf.navigate("/spans/" + spanId, true); + } +}); + +App.SpanView = Backbone.View.extend({ + "tagName": "div", + "className": "span", + "template": _.template($("#span-details-template").html()), + + initialize: function() { + _.bindAll(this, "render"); + this.model.bind('change', this.render); + + this.rendered = false; + }, + + "render": function() { var context = { - "spans": this.collection.toJSON() + "span": this.model.toJSON() }; + context["span"]["duration"] = this.model.duration(); if (this.rendered) { $(this.el).empty(); http://git-wip-us.apache.org/repos/asf/incubator-htrace/blob/4da50ae5/htrace-core/src/web/index.html ---------------------------------------------------------------------- diff --git a/htrace-core/src/web/index.html b/htrace-core/src/web/index.html index 443116e..efb8ff0 100644 --- a/htrace-core/src/web/index.html +++ b/htrace-core/src/web/index.html @@ -40,7 +40,14 @@ </div> </nav> </header> - <div class="container-fluid" role="application"> + + <div class="container-fluid" id="span" role="application"> + <div class="row"> + <div class="col-md-12" role="main"></div> + </div> + </div> + + <div class="container-fluid" id="list" role="application"> <div class="row"> <div class="col-md-3" role="form"> <div class="panel panel-default"> @@ -83,26 +90,62 @@ <div class="col-md-9" role="main"></div> </div> </div> + <footer></footer> - <script id="span-template" type="text/html"> - <% _.each(spans, function(span) { %> - <li class="span"> - <div class="panel panel-primary"> - <div class="panel-heading"> - <h3 class="panel-title"> - <p class="pull-right"><%- span.processId %></p> - <p class="pull-left"><%- span.spanId %> </p> - <p class="pull-left"><%- span.description %></p> - <div style="clear: both; line-height: 0px; font-size: 0px;"></div> - </h3> + <script id="span-details-template" type="text/html"> + <div class="page-header"> + <h1><%- span.description %></h1> + </div> + <div class="page-contents"> + <div class="row"> + <div class="col-md-2"> + <h4>Span id</h4> + </div> + <div class="col-md-10"><%- span.spanId %></div> </div> - <div class="panel-body"> - + <div class="row"> + <div class="col-md-2"> + <h4>Process id</h4> + </div> + <div class="col-md-10"><%- span.processId %></div> + </div> + <div class="row"> + <div class="col-md-2"> + <h4>Begin time</h4> + </div> + <div class="col-md-10"><%- span.beginTime %></div> + </div> + <div class="row"> + <div class="col-md-2"> + <h4>End time</h4> + </div> + <div class="col-md-10"><%- span.stopTime %></div> + </div> + <div class="row"> + <div class="col-md-2"> + <h4>Duration</h4> + </div> + <div class="col-md-10"><%- span.duration %></div> </div> </div> - </li> - <% }); %> + </script> + + <script id="list-span-template" type="text/html"> + <% _.each(spans, function(span) { %> + <li class="span" data-id="<%- span.spanId %>"> + <div class="panel panel-primary"> + <div class="panel-heading"> + <h3 class="panel-title"> + <p class="pull-right"><%- span.processId %></p> + <p class="pull-left"><%- span.spanId %> </p> + <p class="pull-left"><%- span.description %></p> + <div style="clear: both; line-height: 0px; font-size: 0px;"></div> + </h3> + </div> + </div> + </li> + <% }); %> </script> <script src="lib/js/jquery-2.1.3.min.js" type="text/javascript"></script> @@ -118,8 +161,5 @@ <script src="app/views/span.js" type="text/javascript"></script> <script src="app/views/search.js" type="text/javascript"></script> <script src="app/setup.js" type="text/javascript"></script> - <script type="text/javascript"> - - </script> </body> </html>
