Repository: incubator-htrace Updated Branches: refs/heads/master 7eee84045 -> c82e03c98
HTRACE-99: gui: Double clicking on spans should bring up span details (iwasakims / cmccabe) Project: http://git-wip-us.apache.org/repos/asf/incubator-htrace/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-htrace/commit/c82e03c9 Tree: http://git-wip-us.apache.org/repos/asf/incubator-htrace/tree/c82e03c9 Diff: http://git-wip-us.apache.org/repos/asf/incubator-htrace/diff/c82e03c9 Branch: refs/heads/master Commit: c82e03c983101786ccad73bd99808dbb62651b3a Parents: 7eee840 Author: Colin Patrick Mccabe <[email protected]> Authored: Sat Jun 27 12:27:31 2015 -0700 Committer: Colin Patrick Mccabe <[email protected]> Committed: Sat Jun 27 12:27:31 2015 -0700 ---------------------------------------------------------------------- .../src/main/web/app/search_results_view.js | 18 +++++ htrace-webapp/src/main/web/app/span_widget.js | 70 ++++++++++---------- .../src/main/web/app/widget_manager.js | 1 + htrace-webapp/src/main/web/index.html | 35 +++++++--- 4 files changed, 82 insertions(+), 42 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-htrace/blob/c82e03c9/htrace-webapp/src/main/web/app/search_results_view.js ---------------------------------------------------------------------- diff --git a/htrace-webapp/src/main/web/app/search_results_view.js b/htrace-webapp/src/main/web/app/search_results_view.js index 3f009d4..81197c3 100644 --- a/htrace-webapp/src/main/web/app/search_results_view.js +++ b/htrace-webapp/src/main/web/app/search_results_view.js @@ -96,6 +96,17 @@ htrace.SearchResultsView = Backbone.View.extend({ this.draw(); }, + handleDblclick: function(e) { + e.preventDefault(); + this.widgetManager.handle({ + type: "dblclick", + x: this.getCanvasX(e), + y: this.getCanvasY(e), + raw: e + }); + this.draw(); + }, + render: function() { console.log("SearchResultsView#render."); $(this.el).html(_.template($("#search-results-view-template").html())); @@ -259,6 +270,10 @@ htrace.SearchResultsView = Backbone.View.extend({ $("#resultsCanvas").on("mousemove", function(e) { view.handleMouseMove(e); }); + $("#resultsCanvas").off("dblclick"); + $("#resultsCanvas").on("dblclick", function(e) { + view.handleDblclick(e); + }); $("#resultsCanvas").off("contextmenu"); $("#resultsCanvas").on("contextmenu", function(e) { return false; @@ -269,7 +284,10 @@ htrace.SearchResultsView = Backbone.View.extend({ $(window).off("resize"); $("#resultsCanvas").off("mousedown"); $("#resultsCanvas").off("mouseup"); + $("#resultsCanvas").off("mouseout"); $("#resultsCanvas").off("mousemove"); + $("#resultsCanvas").off("dblclick"); + $("#resultsCanvas").off("contextmenu"); Backbone.View.prototype.remove.apply(this, arguments); }, http://git-wip-us.apache.org/repos/asf/incubator-htrace/blob/c82e03c9/htrace-webapp/src/main/web/app/span_widget.js ---------------------------------------------------------------------- diff --git a/htrace-webapp/src/main/web/app/span_widget.js b/htrace-webapp/src/main/web/app/span_widget.js index e06c8b4..1ef402c 100644 --- a/htrace-webapp/src/main/web/app/span_widget.js +++ b/htrace-webapp/src/main/web/app/span_widget.js @@ -19,7 +19,7 @@ var htrace = htrace || {}; -htrace.fillSpanDetailsView = function(span) { +htrace.showSpanDetails = function(span) { var info = { spanID: span.get("spanID"), begin: htrace.dateToString(span.get("begin"), 10), @@ -94,17 +94,12 @@ htrace.fillSpanDetailsView = function(span) { for (i = 0; i < len; i++) { // Make every other row grey to improve visibility. var colorString = ((i%2) == 1) ? "#f1f1f1" : "#ffffff"; - h += _.template('<tr bgcolor="' + colorString + '">' + - '<td style="width:30%;word-wrap:break-word"><%- key %></td>' + - '<td style="width:70%;word-wrap:break-word"><%- val %></td>' + - "</tr>")({key: keys[i], val: info[keys[i]]}); + h += _.template($("#table-row-template").html())( + {bgcolor: colorString, key: keys[i], val: info[keys[i]]}); } h += '</table>'; - $("#spanDetails").html(h); -}; - -htrace.clearSpanDetailsView = function() { - $("#spanDetails").html(""); + htrace.showModal(_.template($("#modal-table-template").html())( + {title: "Span Details", body: h})); }; // Widget containing the trace span displayed on the canvas. @@ -182,6 +177,17 @@ htrace.SpanWidget = function(params) { // ", begin=" + this.span.get('begin') + ", end=" + this.span.get('end')); this.ctx.fillRect(beginX, this.y0 + gapY, endX - beginX, this.ySize - (gapY * 2)); + + // Draw a dots showing time points where annotations are. + var annotations = this.span.get('timeAnnotations'); + var annotationY = this.y0 + gapY; + var annotationW = 4; + var annotationH = (this.ySize - (gapY * 2)) / 2; + this.ctx.fillStyle="#419641"; + for (var i = 0; i < annotations.length; i++) { + this.ctx.fillRect(this.timeToPosition(annotations[i].t), annotationY, + annotationW, annotationH); + } } // Draw description text @@ -209,45 +215,40 @@ htrace.SpanWidget = function(params) { return true; } if (e.raw.ctrlKey) { - // If the control key is pressed, we can unselect the current - // selection, or create multiple selections. + // If the control key is pressed, we toggle the current selection. + // The user can create multiple selections this way. if (this.span.get("selected")) { this.span.set("selected", false); } else { this.span.set("selected", true); } - var selection = null; - var multipleSelections = false; - this.manager.searchResultsView.applyToAllSpans(function(span) { - if (span.get("selected")) { - if (selection == null) { - selection = span; - } else { - multipleSelections = true; - } - } - }); - if (multipleSelections) { - selection = null; - } - if (selection == null) { - htrace.clearSpanDetailsView(); - } else { - htrace.fillSpanDetailsView(selection); - } } else { + var that = this; this.manager.searchResultsView.applyToAllSpans(function(span) { - if (span.get("selected")) { + // Note: we don't want to set the selection state unless we need + // to. Setting the state (even to the same thing it already is) + // triggers a full re-render, if the span is one in the results + // collection. A full re-render slows us down and disrupts events + // like double-clicking. + if (that.span === span) { + if (!span.get("selected")) { + span.set("selected", true); + } + } else if (span.get("selected")) { span.set("selected", false); } }); - this.span.set("selected", true); - htrace.fillSpanDetailsView(this.span); } return true; case "draw": this.draw(); return true; + case "dblclick": + if (htrace.inBoundingBox(e.x, e.y, + this.x0, this.xF, this.y0, this.yF)) { + htrace.showSpanDetails(this.span); + } + return true; } }; @@ -303,5 +304,6 @@ htrace.SpanWidget = function(params) { }); } this.manager.register("mouseDown", this); + this.manager.register("dblclick", this); return this; }; http://git-wip-us.apache.org/repos/asf/incubator-htrace/blob/c82e03c9/htrace-webapp/src/main/web/app/widget_manager.js ---------------------------------------------------------------------- diff --git a/htrace-webapp/src/main/web/app/widget_manager.js b/htrace-webapp/src/main/web/app/widget_manager.js index 5f393b0..ae14b2b 100644 --- a/htrace-webapp/src/main/web/app/widget_manager.js +++ b/htrace-webapp/src/main/web/app/widget_manager.js @@ -32,6 +32,7 @@ htrace.WidgetManager = function(params) { "mouseUp": [], "mouseMove": [], "mouseOut": [], + "dblclick": [], "draw": [], }; http://git-wip-us.apache.org/repos/asf/incubator-htrace/blob/c82e03c9/htrace-webapp/src/main/web/index.html ---------------------------------------------------------------------- diff --git a/htrace-webapp/src/main/web/index.html b/htrace-webapp/src/main/web/index.html index 0e8e6c3..77cbe09 100644 --- a/htrace-webapp/src/main/web/index.html +++ b/htrace-webapp/src/main/web/index.html @@ -92,14 +92,6 @@ </div> <div class="panel panel-default"> <div class="panel-heading"> - <h1 class="panel-title">Span Details</h1> - </div style="border: 1px solid #000000;"> - <div class="panel-body"> - <div id="spanDetails" ></div> - </div> - </div> - <div class="panel panel-default"> - <div class="panel-heading"> <h1 class="panel-title">Search</h1> </div style="border: 1px solid #000000;"> <div class="panel-body"> @@ -197,6 +189,33 @@ </div> </script> + <script id="modal-table-template" type="text/template"> + <div class="modal-dialog modal-lg"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" + aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + <h4 class="modal-title"><%= title %></h4> + </div> + <div class="modal-body"> + <%= body %><p/> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> + </div> + </div> + </div> + </script> + + <script id="table-row-template" type="text/template"> + <tr bgcolor="<%= bgcolor %>"> + <td style="width:30%;word-wrap:break-word"><%- key %></td> + <td style="width:70%;word-wrap:break-word"><%- val %></td> + </tr> + </script> + <script src="lib/jquery-2.1.4.js" type="text/javascript"></script> <script src="lib/bootstrap-3.3.1/js/bootstrap.min.js" type="text/javascript"></script> <script src="lib/underscore-1.7.0.js" type="text/javascript"></script>
