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 @@
+
+
+
+