Permalink
Browse files

Added initial version of Call Trace Gadget.

  • Loading branch information...
1 parent 5cf6ee5 commit 2ce46c5be9a540edebeb0604f0729f0e4f0eb9a0 @jeffyu jeffyu committed Nov 15, 2012
@@ -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');
@@ -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
+ }
+ ]
+}
@@ -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>
Oops, something went wrong.

0 comments on commit 2ce46c5

Please sign in to comment.