diff --git a/htrace-webapp/src/main/web/app/span_widget.js b/htrace-webapp/src/main/web/app/span_widget.js index e06c8b4..92328fd 100644 --- a/htrace-webapp/src/main/web/app/span_widget.js +++ b/htrace-webapp/src/main/web/app/span_widget.js @@ -33,6 +33,7 @@ htrace.fillSpanDetailsView = function(span) { duration: 4 }; keys = ["duration"]; + annotations = []; for(k in span.attributes) { if (k == "reifiedChildren") { continue; @@ -47,10 +48,8 @@ htrace.fillSpanDetailsView = function(span) { // For timeline annotations, make the times into top-level keys. var timeAnnotations = span.get("timeAnnotations"); for (var i = 0; i < timeAnnotations.length; i++) { - var key = htrace.dateToString(timeAnnotations[i].t); - keys.push(key); - info[key] = timeAnnotations[i].m; - explicitOrder[key] = 200; + annotations.push( + [htrace.dateToString(timeAnnotations[i].t), timeAnnotations[i].m]); } continue; } @@ -60,10 +59,7 @@ htrace.fillSpanDetailsView = function(span) { // user-defined. var infoAnnotations = span.get("infoAnnotations"); _.each(infoAnnotations, function(value, key) { - key = "[" + key + "]"; - keys.push(key); - info[key] = value; - explicitOrder[key] = 200; + annotations.push(["[" + key + "]", value]); }); continue; } @@ -94,13 +90,30 @@ 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('' + - '<%- key %>' + - '<%- val %>' + - "")({key: keys[i], val: info[keys[i]]}); + h += _.template($("#table-row-template").html())( + {bgcolor: colorString, key: keys[i], val: info[keys[i]]}); } h += ''; $("#spanDetails").html(h); + + // pop up table showing annotation on clicking "Annotations" button + $("#annotationsButton").off("click"); + if (annotations.length > 0) { + $("#annotationsButton").on("click", function() { + var t = ''; + var timeAnnotations = span.get("timeAnnotations"); + for (var i = 0; i < annotations.length; i++) { + var bgcolor = ((i%2) == 1) ? "#f1f1f1" : "#ffffff"; + t += _.template($("#table-row-template").html())( + {bgcolor: bgcolor, + key: annotations[i][0], + val: annotations[i][1]}); + } + t += '
'; + htrace.showModal(_.template($("#modal-table-template").html())( + {title: "Annotations", body: t})); + }); + } }; htrace.clearSpanDetailsView = function() { @@ -182,6 +195,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 diff --git a/htrace-webapp/src/main/web/index.html b/htrace-webapp/src/main/web/index.html index 0e8e6c3..3560eb4 100644 --- a/htrace-webapp/src/main/web/index.html +++ b/htrace-webapp/src/main/web/index.html @@ -97,6 +97,12 @@
+
+
+ +
+
@@ -197,6 +203,33 @@
+ + + +