Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Added initial version of Call Trace Gadget.
  • Loading branch information
jeffyu committed Nov 15, 2012
1 parent 5cf6ee5 commit 2ce46c5
Show file tree
Hide file tree
Showing 4 changed files with 256 additions and 167 deletions.
1 change: 1 addition & 0 deletions gadget-web/src/main/webapp/WEB-INF/classes/import.sql
Expand Up @@ -6,6 +6,7 @@ INSERT INTO GS_USER_GROUP(`USER_ID`, `GROUP_ID`) VALUES(1, 1);
INSERT INTO GS_GADGET(`GADGET_TITLE`,`GADGET_AUTHOR`,`GADGET_AUTHOR_EMAIL`,`GADGET_DESCRIPTION`,`GADGET_THUMBNAIL_URL`,`GADGET_URL`) VALUES('Response Time','Red Hat','jeffyu@overlord.com','Response Time Gadget','http://localhost:8080/gadgets/rt-gadget/thumbnail.png','http://localhost:8080/gadgets/rt-gadget/gadget.xml');
INSERT INTO GS_GADGET(`GADGET_TITLE`,`GADGET_AUTHOR`,`GADGET_AUTHOR_EMAIL`,`GADGET_DESCRIPTION`,`GADGET_THUMBNAIL_URL`,`GADGET_URL`) VALUES('Currency Converter','Google','info@tofollow.com','currency converter widget','http://www.gstatic.com/ig/modules/currency_converter/currency_converter_content/en_us-thm.cache.png','http://www.gstatic.com/ig/modules/currency_converter/currency_converter_v2.xml');
INSERT INTO GS_GADGET(`GADGET_TITLE`,`GADGET_AUTHOR`,`GADGET_AUTHOR_EMAIL`,`GADGET_DESCRIPTION`,`GADGET_THUMBNAIL_URL`,`GADGET_URL`) VALUES('Situation Gadget','Red Hat','jeffyu@overlord.com','Situation Gadget','http://localhost:8080/gadgets/situation-gadget/thumbnail.png','http://localhost:8080/gadgets/situation-gadget/gadget.xml');
INSERT INTO GS_GADGET(`GADGET_TITLE`,`GADGET_AUTHOR`,`GADGET_AUTHOR_EMAIL`,`GADGET_DESCRIPTION`,`GADGET_THUMBNAIL_URL`,`GADGET_URL`) VALUES('Service Call Gadget','Red Hat','jeffyu@overlord.com','Service Call Gadget','http://localhost:8080/gadgets/situation-gadget/thumbnail.png','http://localhost:8080/gadgets/calltrace-gadget/gadget.xml');
INSERT INTO GS_GADGET(`GADGET_TITLE`,`GADGET_AUTHOR`,`GADGET_AUTHOR_EMAIL`,`GADGET_DESCRIPTION`,`GADGET_THUMBNAIL_URL`,`GADGET_URL`) VALUES('Service Overview Gadget','Red Hat','jeffyu@overlord.com','Service Overview Gadget','http://localhost:8080/gadgets/so-gadget/thumbnail.png','http://localhost:8080/gadgets/so-gadget/gadget.xml');
INSERT INTO GS_GADGET(`GADGET_TITLE`,`GADGET_AUTHOR`,`GADGET_AUTHOR_EMAIL`,`GADGET_DESCRIPTION`,`GADGET_THUMBNAIL_URL`,`GADGET_URL`) VALUES('Date & Time','Google','admin@google.com','Add a clock to your page. Click edit to change it to the color of your choice','http://gadgets.adwebmaster.net/images/gadgets/datetimemulti/thumbnail_en.jpg','http://www.gstatic.com/ig/modules/datetime_v3/datetime_v3.xml');
INSERT INTO GS_GADGET(`GADGET_TITLE`,`GADGET_AUTHOR`,`GADGET_AUTHOR_EMAIL`,`GADGET_DESCRIPTION`,`GADGET_THUMBNAIL_URL`,`GADGET_URL`) VALUES('Economic Data - ALFRED Graph','Research Department','webmaster@research.stlouisfed.org','Vintage Economic Data from the Federal Reserve Bank of St. Louis','http://research.stlouisfed.org/gadgets/images/alfredgraphgadgetthumbnail.png','http://research.stlouisfed.org/gadgets/code/alfredgraph.xml');
43 changes: 43 additions & 0 deletions gadgets/src/main/webapp/calltrace-gadget/calltrace.json
@@ -0,0 +1,43 @@
{
"tasks":[
{
"type":"Call",
"component":"TestComponent",
"operation":"TestOperation",
"fault":"TestFault",
"request":"<request/>",
"response":"<response/>",
"requestLatency":1,
"responseLatency":2,
"tasks":[
{
"type":"Task",
"description":"This is task 1",
"duration":50,"percentage":25
},{
"type":"Call",
"component":"OtherComponent",
"operation":"OtherOp",
"request":"<req2/>",
"tasks":[
{
"type":"Task",
"description":"This is task 3",
"duration":100,
"percentage":100
}
],
"duration":100,
"percentage":50
},{
"type":"Task",
"description":"This is task 2",
"duration":50,
"percentage":25
}
],
"duration":56,
"percentage":100
}
]
}
128 changes: 104 additions & 24 deletions gadgets/src/main/webapp/calltrace-gadget/g.html
Expand Up @@ -6,39 +6,119 @@
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="jquery-ui.custom.min.js"></script>
<script type="text/javascript" src="jquery.dynatree.min.js"></script>

<style type="text/css">
#tree {width:45%;float:left;}
#detail {float:right;border:1px solid black; width:50%;}
.tb-row {border:1px solid #98BF21;}
</style>

<script type="text/javascript">
$(function(){
// Attach the dynatree widget to an existing <div id="tree"> element
// and pass the tree options as an argument to the dynatree() function:
$("#tree").dynatree({
onActivate: function(node) {
// A DynaTreeNode object is passed to the activation handler
// Note: we also get this event, if persistence is on, and the page is reloaded.
//alert("You activated " + node.data.title);
},
children: [
{title: "Operation 1 [2000 ms]", isFolder: true, key: "o1",
children:[
{title: "Assign Variable 1 [100ms]"}
]},
{title: "Folder 2", isFolder: true, key: "folder2",
children: [
{title: "Sub-item 2.1"},
{title: "Sub-item 2.2"}
]
},
{title: "Item 3"}
]
$.getJSON("calltrace.json", function(data){
var treeData = new Array(data.tasks.length);
for(var i = 0; i < treeData.length; i++) {
var task = data.tasks[i];
treeData[i] = convertJsonToTreeData(task);
}

initialiseTree(treeData);
$("#detail").hide();
});
});

function convertJsonToTreeData(task) {
var treeObject = {};
var isCall = (task.type == "Call");
if (isCall) {
treeObject["title"] = task.component + " " + task.operation + " [" + task.duration + " ms] (" + task.percentage + "%)";
treeObject["isFolder"] = true;
treeObject["request"] = task.request;
treeObject["response"] = task.response;
treeObject["fault"] = task.fault;
treeObject['component'] = task.component;
treeObject['operation'] = task.operation;
treeObject['duration'] = task.duration;
treeObject['percentage'] = task.percentage;
treeObject['type'] = task.type;

} else {
treeObject["title"] = task.description + " [" + task.duration + "ms] (" + task.percentage + "%)";
treeObject["isFolder"] = false;
treeObject['description'] = task.description;
treeObject['duration'] = task.duration;
treeObject['percentage'] = task.percentage;
treeObject['type'] = task.type;
}

if (task.tasks != undefined) {
var children = new Array(task.tasks.length);
for (var i = 0; i < task.tasks.length; i++) {
var theTask = task.tasks[i];
children[i] = convertJsonToTreeData(theTask);
}
treeObject["children"] = children;
}
return treeObject;

}

function initialiseTree(data) {
// Attach the dynatree widget to an existing <div id="tree"> element
// and pass the tree options as an argument to the dynatree() function:
$("#tree").dynatree({
onActivate: function(node) {showTheDetail(node);},
children: data
});
}

function showTheDetail(node) {
$("#detail").show();
var properties = ['type', 'component', 'operation', 'request', 'response', 'requestLatency', 'responseLatency', 'duration', 'percentage'];
var thedata = node.data;
deleteRows();
for(i = 0; i < properties.length; i++) {
var theProperty = properties[i];
if (thedata[theProperty] != undefined) {
insertRow([theProperty + " :" , thedata[theProperty]]);
}
}
}

function deleteRows() {
var theBody, theSize, i;
theBody = document.getElementById("detail-body");
theSize = theBody.rows.length;
for (i = 0; i < theSize; i++) {
theBody.deleteRow(theBody.rows[i]);
}
}

function insertRow(data) {
var theBody, theRow, theCell, i;
theBody = document.getElementById("detail-body");
theRow = document.createElement("TR");
theRow.setAttribute("class", "tb-row");
theBody.appendChild(theRow);
for (i = 0; i < data.length; i++) {
theCell = document.createElement("TD");
theCell.innerHTML = data[i];
theRow.appendChild(theCell);
}
}

</script>

</head>
<body>

<body class="example">
<h1>Example: Default</h1>
<div id="tree"></div>
<body>
<div id="tree"></div>
<div id="detail">
<table style="width:100%" border="0" cellspacing="3" cellpadding="5">
<tbody id="detail-body">
</tbody>
</table>
</div>
</body>
</html>

0 comments on commit 2ce46c5

Please sign in to comment.