htrace-webapp/src/main/webapp/app/span_widget.js - incubator-retired-htrace - Git at Google

 /*
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
  * distributed with this work for additional information
  * regarding copyright ownership.  The ASF licenses this file
  * to you under the Apache License, Version 2.0 (the
  * "License"); you may not use this file except in compliance
  * with the License.  You may obtain a copy of the License at
  *
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing,
  * software distributed under the License is distributed on an
  * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  * KIND, either express or implied.  See the License for the
  * specific language governing permissions and limitations
  * under the License.
  */

 var htrace = htrace || {};

 htrace.showSpanDetails = function(span) {
   var info = {
     spanID: span.get("spanID"),
     begin: htrace.dateToString(span.get("begin"), 10),
     end: htrace.dateToString(span.get("end"), 10),
     duration: ((span.get("end") - span.get("begin")) + " ms")
   };
   var explicitOrder = {
     spanId: 1,
     begin: 2,
     end: 3,
     duration: 4
   };
   keys = ["duration"];
   for(k in span.attributes) {
     if (k == "reifiedChildren") {
       continue;
     }
     if (k == "reifiedParents") {
       continue;
     }
     if (k == "selected") {
       continue;
     }
     if (k == "timeAnnotations") {
       // 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;
       }
       continue;
     }
     if (k == "infoAnnotations") {
       // For info annotations, move the keys to the top level.
       // Surround them in brackets to make it clear that they are
       // user-defined.
       var infoAnnotations = span.get("infoAnnotations");
       _.each(infoAnnotations, function(value, key) {
         key = "[" + key + "]";
         keys.push(key);
         info[key] = value;
         explicitOrder[key] = 200;
       });
       continue;
     }
     keys.push(k);
     if (info[k] == null) {
       info[k] = span.get(k);
     }
   }
   // We sort the keys so that the stuff we want at the top appears at the top,
   // and everything else is in alphabetical order.
   keys = keys.sort(function(a, b) {
       var oa = explicitOrder[a] || 100;
       var ob = explicitOrder[b] || 100;
       if (oa < ob) {
         return -1;
       } else if (oa > ob) {
         return 1;
       } else if (a < b) {
         return -1;
       } else if (a > b) {
         return 1;
       } else {
         return 0;
       }
     });
   var len = keys.length;
   var h = '<table style="table-layout:fixed;width:100%;word-wrap:break-word">';
   for (i = 0; i < len; i++) {
     // Make every other row grey to improve visibility.
     var colorString = ((i%2) == 1) ? "#f1f1f1" : "#ffffff";
     h += _.template($("#table-row-template").html())(
         {bgcolor: colorString, key: keys[i], val: info[keys[i]]});
   }
   h += '</table>';
   htrace.showModal(_.template($("#modal-table-template").html())(
       {title: "Span Details", body: h}));
 };

 // Widget containing the trace span displayed on the canvas.
 htrace.SpanWidget = function(params) {
   this.draw = function() {
     this.drawBackground();
     this.drawTracerId();
     this.drawDescription();
   };

   // Draw the background of this span widget.
   this.drawBackground = function() {
     this.ctx.save();
     if (this.span.get("selected")) {
       this.ctx.fillStyle="#ffccff";
     } else {
       this.ctx.fillStyle="#ffffff";
     }
     this.ctx.fillRect(this.x0, this.y0, this.xSize, this.ySize);
     this.ctx.restore();
   }

   // Draw process ID text.
   this.drawTracerId = function() {
     this.ctx.save();
     this.ctx.fillStyle="#000000";
     this.ctx.font = (this.ySize - 2) + "px sans-serif";
     this.ctx.beginPath();
     this.ctx.rect(this.x0, this.y0, this.xB - this.x0, this.ySize);
     this.ctx.clip();
     this.ctx.fillText(this.span.get('tracerId'), this.x0, this.yF - 4);
     this.ctx.restore();
   };

   // Draw the span description
   this.drawDescription = function() {
     // Draw the light blue bar representing time.
     this.ctx.save();
     this.ctx.beginPath();
     this.ctx.rect(this.xD, this.y0, this.xF - this.xD, this.ySize);
     this.ctx.clip();
     this.ctx.strokeStyle="#000000";
     this.ctx.fillStyle="#a7b7ff";
     var beginX = this.timeToPosition(this.span.get('begin'));
     var endX = this.timeToPosition(this.span.get('end'));

     // If the span is completely off the screen, draw a diamond at either the
     // beginning or the end of the bar to indicate whether it's too early or too
     // late to be seen.
     if (endX < this.x0) {
       beginX = this.xD;
       endX = this.xD;
     }
     if (beginX > this.xF) {
       beginX = this.xF;
       endX = this.xF;
     }

     var gapY = 2;
     var epsilon = Math.max(2, Math.floor(this.xSize / 1000));
     if (endX - beginX < epsilon) {
       // The time interval is too narrow to see.  Draw a diamond on the point instead.
       this.ctx.beginPath();
       this.ctx.moveTo(beginX, this.y0 + gapY);
       this.ctx.lineTo(beginX + (Math.floor(this.ySize / 2) - gapY),
           this.y0 + Math.floor(this.ySize / 2));
       this.ctx.lineTo(beginX, this.yF - gapY);
       this.ctx.lineTo(beginX - (Math.floor(this.ySize / 2) - gapY),
           this.y0 + Math.floor(this.ySize / 2));
       this.ctx.closePath();
       this.ctx.fill();
     } else {
       // Draw a bar from the start time to the end time.
 //      console.log("beginX=" + beginX + ", endX=" + endX +
 //          ", 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
     this.ctx.fillStyle="#000000";
     this.ctx.font = (this.ySize - gapY) + "px sans-serif";
     this.ctx.fillText(this.span.get('description'),
         this.xD + this.xT,
         this.yF - gapY - 2);

     this.ctx.restore();
   };

   // Convert a time in milliseconds since the epoch to an x position.
   this.timeToPosition = function(time) {
     return this.xD +
       (((time - this.begin) * (this.xF - this.xD)) /
         (this.end - this.begin));
   };

   this.handle = function(e) {
     switch (e.type) {
       case "mouseDown":
         if (!htrace.inBoundingBox(e.x, e.y,
               this.x0, this.xF, this.y0, this.yF)) {
           return true;
         }
         if (e.raw.ctrlKey) {
           // 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);
           }
         } else {
           var that = this;
           this.manager.searchResultsView.applyToAllSpans(function(span) {
               // 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);
               }
             });
         }
         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;
     }
   };

   for (var k in params) {
     this[k]=params[k];
   }
   this.xSize = this.xF - this.x0;
   this.ySize = this.yF - this.y0;
   this.xDB = this.xD - this.xB;
   this.manager.register("draw", this);

   var widget = this;
   if ((this.span.get("reifiedParents") == null) && (this.allowUpButton)) {
     new htrace.TriangleButton({
       ctx: this.ctx,
       manager: this.manager,
       direction: "up",
       x0: this.xB + 2,
       xF: this.xB + (this.xDB / 2) - 2,
       y0: this.y0 + 2,
       yF: this.yF - 2,
       callback: function() {
         $.when(widget.span.reifyParents()).done(function (result) {
           console.log("reifyParents: result was '" + result + "'");
           if (result != "") {
             alert(result);
           } else {
             widget.manager.searchResultsView.render();
           }
         });
       },
     });
   }
   if ((this.span.get("reifiedChildren") == null) && (this.allowDownButton)) {
     new htrace.TriangleButton({
       ctx: this.ctx,
       manager: this.manager,
       direction: "down",
       x0: this.xB + (this.xDB / 2) + 2,
       xF: this.xD - 2,
       y0: this.y0 + 2,
       yF: this.yF - 2,
       callback: function() {
         $.when(widget.span.reifyChildren()).done(function (result) {
           console.log("reifyChildren: result was '" + result + "'");
           if (result != "") {
             alert(result);
           } else {
             widget.manager.searchResultsView.render();
           }
         });
       },
     });
   }
   this.manager.register("mouseDown", this);
   this.manager.register("dblclick", this);
   return this;
 };
	/*
	* Licensed to the Apache Software Foundation (ASF) under one
	* or more contributor license agreements. See the NOTICE file
	* distributed with this work for additional information
	* regarding copyright ownership. The ASF licenses this file
	* to you under the Apache License, Version 2.0 (the
	* "License"); you may not use this file except in compliance
	* with the License. You may obtain a copy of the License at
	*
	* http://www.apache.org/licenses/LICENSE-2.0
	*
	* Unless required by applicable law or agreed to in writing,
	* software distributed under the License is distributed on an
	* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
	* KIND, either express or implied. See the License for the
	* specific language governing permissions and limitations
	* under the License.
	*/

	var htrace = htrace \|\| {};

	htrace.showSpanDetails = function(span) {
	var info = {
	spanID: span.get("spanID"),
	begin: htrace.dateToString(span.get("begin"), 10),
	end: htrace.dateToString(span.get("end"), 10),
	duration: ((span.get("end") - span.get("begin")) + " ms")
	};
	var explicitOrder = {
	spanId: 1,
	begin: 2,
	end: 3,
	duration: 4
	};
	keys = ["duration"];
	for(k in span.attributes) {
	if (k == "reifiedChildren") {
	continue;
	}
	if (k == "reifiedParents") {
	continue;
	}
	if (k == "selected") {
	continue;
	}
	if (k == "timeAnnotations") {
	// 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;
	}
	continue;
	}
	if (k == "infoAnnotations") {
	// For info annotations, move the keys to the top level.
	// Surround them in brackets to make it clear that they are
	// user-defined.
	var infoAnnotations = span.get("infoAnnotations");
	_.each(infoAnnotations, function(value, key) {
	key = "[" + key + "]";
	keys.push(key);
	info[key] = value;
	explicitOrder[key] = 200;
	});
	continue;
	}
	keys.push(k);
	if (info[k] == null) {
	info[k] = span.get(k);
	}
	}
	// We sort the keys so that the stuff we want at the top appears at the top,
	// and everything else is in alphabetical order.
	keys = keys.sort(function(a, b) {
	var oa = explicitOrder[a] \|\| 100;
	var ob = explicitOrder[b] \|\| 100;
	if (oa < ob) {
	return -1;
	} else if (oa > ob) {
	return 1;
	} else if (a < b) {
	return -1;
	} else if (a > b) {
	return 1;
	} else {
	return 0;
	}
	});
	var len = keys.length;
	var h = '<table style="table-layout:fixed;width:100%;word-wrap:break-word">';
	for (i = 0; i < len; i++) {
	// Make every other row grey to improve visibility.
	var colorString = ((i%2) == 1) ? "#f1f1f1" : "#ffffff";
	h += _.template($("#table-row-template").html())(
	{bgcolor: colorString, key: keys[i], val: info[keys[i]]});
	}
	h += '</table>';
	htrace.showModal(_.template($("#modal-table-template").html())(
	{title: "Span Details", body: h}));
	};

	// Widget containing the trace span displayed on the canvas.
	htrace.SpanWidget = function(params) {
	this.draw = function() {
	this.drawBackground();
	this.drawTracerId();
	this.drawDescription();
	};

	// Draw the background of this span widget.
	this.drawBackground = function() {
	this.ctx.save();
	if (this.span.get("selected")) {
	this.ctx.fillStyle="#ffccff";
	} else {
	this.ctx.fillStyle="#ffffff";
	}
	this.ctx.fillRect(this.x0, this.y0, this.xSize, this.ySize);
	this.ctx.restore();
	}

	// Draw process ID text.
	this.drawTracerId = function() {
	this.ctx.save();
	this.ctx.fillStyle="#000000";
	this.ctx.font = (this.ySize - 2) + "px sans-serif";
	this.ctx.beginPath();
	this.ctx.rect(this.x0, this.y0, this.xB - this.x0, this.ySize);
	this.ctx.clip();
	this.ctx.fillText(this.span.get('tracerId'), this.x0, this.yF - 4);
	this.ctx.restore();
	};

	// Draw the span description
	this.drawDescription = function() {
	// Draw the light blue bar representing time.
	this.ctx.save();
	this.ctx.beginPath();
	this.ctx.rect(this.xD, this.y0, this.xF - this.xD, this.ySize);
	this.ctx.clip();
	this.ctx.strokeStyle="#000000";
	this.ctx.fillStyle="#a7b7ff";
	var beginX = this.timeToPosition(this.span.get('begin'));
	var endX = this.timeToPosition(this.span.get('end'));

	// If the span is completely off the screen, draw a diamond at either the
	// beginning or the end of the bar to indicate whether it's too early or too
	// late to be seen.
	if (endX < this.x0) {
	beginX = this.xD;
	endX = this.xD;
	}
	if (beginX > this.xF) {
	beginX = this.xF;
	endX = this.xF;
	}

	var gapY = 2;
	var epsilon = Math.max(2, Math.floor(this.xSize / 1000));
	if (endX - beginX < epsilon) {
	// The time interval is too narrow to see. Draw a diamond on the point instead.
	this.ctx.beginPath();
	this.ctx.moveTo(beginX, this.y0 + gapY);
	this.ctx.lineTo(beginX + (Math.floor(this.ySize / 2) - gapY),
	this.y0 + Math.floor(this.ySize / 2));
	this.ctx.lineTo(beginX, this.yF - gapY);
	this.ctx.lineTo(beginX - (Math.floor(this.ySize / 2) - gapY),
	this.y0 + Math.floor(this.ySize / 2));
	this.ctx.closePath();
	this.ctx.fill();
	} else {
	// Draw a bar from the start time to the end time.
	// console.log("beginX=" + beginX + ", endX=" + endX +
	// ", 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
	this.ctx.fillStyle="#000000";
	this.ctx.font = (this.ySize - gapY) + "px sans-serif";
	this.ctx.fillText(this.span.get('description'),
	this.xD + this.xT,
	this.yF - gapY - 2);

	this.ctx.restore();
	};

	// Convert a time in milliseconds since the epoch to an x position.
	this.timeToPosition = function(time) {
	return this.xD +
	(((time - this.begin) * (this.xF - this.xD)) /
	(this.end - this.begin));
	};

	this.handle = function(e) {
	switch (e.type) {
	case "mouseDown":
	if (!htrace.inBoundingBox(e.x, e.y,
	this.x0, this.xF, this.y0, this.yF)) {
	return true;
	}
	if (e.raw.ctrlKey) {
	// 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);
	}
	} else {
	var that = this;
	this.manager.searchResultsView.applyToAllSpans(function(span) {
	// 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);
	}
	});
	}
	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;
	}
	};

	for (var k in params) {
	this[k]=params[k];
	}
	this.xSize = this.xF - this.x0;
	this.ySize = this.yF - this.y0;
	this.xDB = this.xD - this.xB;
	this.manager.register("draw", this);

	var widget = this;
	if ((this.span.get("reifiedParents") == null) && (this.allowUpButton)) {
	new htrace.TriangleButton({
	ctx: this.ctx,
	manager: this.manager,
	direction: "up",
	x0: this.xB + 2,
	xF: this.xB + (this.xDB / 2) - 2,
	y0: this.y0 + 2,
	yF: this.yF - 2,
	callback: function() {
	$.when(widget.span.reifyParents()).done(function (result) {
	console.log("reifyParents: result was '" + result + "'");
	if (result != "") {
	alert(result);
	} else {
	widget.manager.searchResultsView.render();
	}
	});
	},
	});
	}
	if ((this.span.get("reifiedChildren") == null) && (this.allowDownButton)) {
	new htrace.TriangleButton({
	ctx: this.ctx,
	manager: this.manager,
	direction: "down",
	x0: this.xB + (this.xDB / 2) + 2,
	xF: this.xD - 2,
	y0: this.y0 + 2,
	yF: this.yF - 2,
	callback: function() {
	$.when(widget.span.reifyChildren()).done(function (result) {
	console.log("reifyChildren: result was '" + result + "'");
	if (result != "") {
	alert(result);
	} else {
	widget.manager.searchResultsView.render();
	}
	});
	},
	});
	}
	this.manager.register("mouseDown", this);
	this.manager.register("dblclick", this);
	return this;
	};