Browse files

GADGETS-32: updated the css and layout of the call trace gadget.

  • Loading branch information...
1 parent b47b41b commit b299cea5d9c4016f9c907c403839a4486da2385b @jeffyu jeffyu committed Nov 21, 2012
View
52 gadgets/src/main/webapp/calltrace-gadget/g.html
@@ -9,8 +9,10 @@
<style type="text/css">
#tree {width:45%;float:left;}
- #detail {float:right;border:1px solid black; width:50%;}
- .tb-row {border:1px solid #98BF21;}
+ #detail {float:right;border:1px solid #69C; width:50%; border-collapse: collapse;font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 12px;margin:10px;}
+ #detail thead th {font-weight: normal;font-size: 14px; color:#039;border-bottom: 1px dashed #69C; padding:12px 17px;text-align: left;}
+ #detail tbody td {text-align: left;vertical-align: top;color: #669; padding: 7px 10px; }
+ #detail tbody th {text-align: right;vertical-align: top;color: #669; padding: 7px 10px; }
</style>
<script type="text/javascript">
@@ -31,24 +33,30 @@
var treeObject = {};
var isCall = (task.type == "Call");
if (isCall) {
- treeObject["title"] = task.component + " " + task.operation + " [" + task.duration + " ms] (" + task.percentage + "%)";
+ treeObject["title"] = getTruncatedTitle(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["request"] = escapeHTML(task.request);
+ treeObject["response"] = escapeHTML(task.response);
+ treeObject["fault"] = escapeHTML(task.fault);
treeObject['component'] = task.component;
treeObject['operation'] = task.operation;
treeObject['duration'] = task.duration;
treeObject['percentage'] = task.percentage;
treeObject['type'] = task.type;
+ if (task.fault == undefined) {
+ treeObject['addClass'] = 'success';
+ } else {
+ treeObject['addClass'] = 'error';
+ }
} else {
- treeObject["title"] = task.description + " [" + task.duration + "ms] (" + task.percentage + "%)";
+ treeObject["title"] = getTruncatedTitle(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;
+ treeObject['addClass'] = 'task';
}
if (task.tasks != undefined) {
@@ -74,7 +82,7 @@
function showTheDetail(node) {
$("#detail").show();
- var properties = ['type', 'component', 'operation', 'request', 'response', 'requestLatency', 'responseLatency', 'duration', 'percentage'];
+ var properties = ['type', 'component', 'operation', 'request', 'response', 'fault','requestLatency', 'responseLatency', 'duration', 'percentage'];
var thedata = node.data;
deleteRows();
for(i = 0; i < properties.length; i++) {
@@ -95,16 +103,29 @@
}
function insertRow(data) {
- var theBody, theRow, theCell, i;
+ var theBody, theRow, theHead, 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);
- }
+
+ theHead = document.createElement("TH");
+ theHead.innerHTML = data[0];
+ theRow.appendChild(theHead);
+
+ theCell = document.createElement("TD");
+ theCell.innerHTML = data[1];
+ theRow.appendChild(theCell);
+ }
+
+ function getTruncatedTitle(title) {
+ if (title.length < 20) return title;
+ else return title.substring(0, 20) + "...";
+ }
+
+ function escapeHTML(str) {
+ if (str == undefined) return;
+ else return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
</script>
@@ -115,7 +136,8 @@
<body>
<div id="tree"></div>
<div id="detail">
- <table style="width:100%" border="0" cellspacing="3" cellpadding="5">
+ <table style="width:100%" summary="Summary">
+ <thead><tr><th width="20%">Summary</th><th></th></tr></thead>
<tbody id="detail-body">
</tbody>
</table>
View
123 gadgets/src/main/webapp/calltrace-gadget/gadget.xml
@@ -2,7 +2,9 @@
<Module>
<ModulePrefs title="Call Trace" description="Call Trace gadget"
author="Jeff Yu" author_email="jeff.yuchang@gmail.com">
- <Require feature="setprefs" />
+ <Require feature="views"/>
+ <Require feature="setprefs"/>
+ <Require feature="tabs"/>
</ModulePrefs>
<UserPref name="serviceUrl" display_name="Service URL:"
default_value="http://localhost:8080/overlord-bam/acm/query" />
@@ -17,9 +19,11 @@
<Content type="html"><![CDATA[
<style type="text/css">
- #tree {width:45%;float:left;}
- #detail {float:right;border:1px solid black; width:50%;}
- .tb-row {border:1px solid #98BF21;}
+ #tree {width:90%;}
+ #detail {border:1px solid #69C; border-collapse: collapse;font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 9pt;margin:10px;}
+ #detail thead th {font-weight: normal;font-size: 9pt; color:#039;border-bottom: 1px dashed #69C; text-align: left;}
+ #detail tbody td {text-align: left;vertical-align: top;color: #669; padding: 2px 2px; }
+ #detail tbody th {text-align: right;vertical-align: top;color: #669; padding: 2px 2px; }
</style>
<link href="skin/ui.dynatree.css" rel="stylesheet" type="text/css">
@@ -54,38 +58,43 @@
}
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;
+ var treeObject = {};
+ var isCall = (task.type == "Call");
+ if (isCall) {
+ treeObject["title"] = getTruncatedTitle(task.component + " " + task.operation) + " [" + task.duration + " ms] (" + task.percentage + "%)";
+ treeObject["isFolder"] = true;
+ treeObject["request"] = escapeHTML(task.request);
+ treeObject["response"] = escapeHTML(task.response);
+ treeObject["fault"] = escapeHTML(task.fault);
+ treeObject['component'] = task.component;
+ treeObject['operation'] = task.operation;
+ treeObject['duration'] = task.duration;
+ treeObject['percentage'] = task.percentage;
+ treeObject['type'] = task.type;
+ if (task.fault == undefined) {
+ treeObject['addClass'] = 'success';
+ } else {
+ treeObject['addClass'] = 'error';
+ }
- } 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;
- }
+ } else {
+ treeObject["title"] = getTruncatedTitle(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;
+ 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;
}
@@ -100,7 +109,7 @@
function showTheDetail(node) {
$("#detail").show();
- var properties = ['type', 'component', 'operation', 'request', 'response', 'requestLatency', 'responseLatency', 'duration', 'percentage'];
+ var properties = ['type', 'component', 'operation', 'request', 'response', 'fault', 'requestLatency', 'responseLatency', 'duration', 'percentage'];
var thedata = node.data;
deleteRows();
for(i = 0; i < properties.length; i++) {
@@ -121,33 +130,59 @@
}
function insertRow(data) {
- var theBody, theRow, theCell, i;
+ var theBody, theRow, theHead, 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);
- }
+
+ theHead = document.createElement("TH");
+ theHead.innerHTML = data[0];
+ theRow.appendChild(theHead);
+
+ theCell = document.createElement("TD");
+ theCell.innerHTML = data[1];
+ theRow.appendChild(theCell);
+ }
+
+ function getTruncatedTitle(title) {
+ if (title.length < 20) return title;
+ else return title.substring(0, 20) + "...";
+ }
+
+ function escapeHTML(str) {
+ if (str == undefined) return;
+ else return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
function loadData() {
- var prefs, refreshInterval;
+ var prefs, refreshInterval, tabset, theName;
prefs = new gadgets.Prefs();
refreshInterval = prefs.getInt("refreshCycle")
+ theName = getViewName();
+ window.alert(theName);
+ if (theName == "home") {
+ tabset = new gadgets.TabSet();
+ tabset.alignTabs('left');
+ tabset.addTab("Call Trace Tree", {contentContainer:document.getElementById("tree")});
+ tabset.addTab("Summary", {contentContainer:document.getElementById("detail")});
+ window.alert("done");
+ }
makeJSONRequest();
setInterval(makeJSONRequest, refreshInterval * 1000);
}
+
+ function getViewName() {
+ return gadgets.views.getCurrentView().getName();
+ }
gadgets.util.registerOnLoadHandler(loadData);
</script>
<div id="tree"></div>
<div id="detail">
- <table style="width:100%" border="0" cellspacing="3" cellpadding="5">
+ <table style="width:100%" summary="Summary">
+ <thead><tr><th width="30%">Summary</th><th></th></tr></thead>
<tbody id="detail-body">
</tbody>
</table>
View
BIN gadgets/src/main/webapp/calltrace-gadget/skin/green-circle.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN gadgets/src/main/webapp/calltrace-gadget/skin/red-circle.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN gadgets/src/main/webapp/calltrace-gadget/skin/task.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
25 gadgets/src/main/webapp/calltrace-gadget/skin/ui.dynatree.css
@@ -9,7 +9,7 @@ ul.dynatree-container
padding: 3px;
margin: 0; /* issue 201 */
background-color: white;
- border: 1px dotted gray;
+ border: 0px dotted gray;
overflow: auto;
height: 100%; /* issue 263 */
}
@@ -433,8 +433,25 @@ span.dynatree-drop-target.dynatree-drop-after a
* Custom node classes (sample)
*/
-span.custom1 a
+span.success span.dynatree-icon
{
- background-color: maroon;
- color: yellow;
+ background-position: 0 0;
+ background-image: url("green-circle.png");
}
+
+span.error span.dynatree-icon
+{
+ background-position: 0 0;
+ background-image: url("red-circle.png");
+}
+
+span.warning span.dynatree-icon
+{
+ background-position: 0 0;
+ background-image: url("warning.png");
+}
+
+span.task span.dynatree-icon
+{
+ background-position: 0px 0px;
+}
View
BIN gadgets/src/main/webapp/calltrace-gadget/skin/warning.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
44 gadgets/src/main/webapp/calltrace-gadget/tabs.css
@@ -0,0 +1,44 @@
+.tablib_table {
+ width: 100%;
+ border-collapse: separate;
+ border-spacing: 0px;
+ empty-cells: show;
+ font-size: 11px;
+ text-align: center;
+}
+.tablib_emptyTab {
+ border-bottom: 1px solid #676767;
+ padding: 0px 1px;
+}
+.tablib_spacerTab {
+ border-bottom: 1px solid #676767;
+ padding: 0px 1px;
+ width: 1px;
+}
+.tablib_selected {
+ padding: 2px 0px;
+ background-color: #ffffff;
+ border: 1px solid #676767;
+ border-bottom-width: 0px;
+ color: #3366cc;
+ font-weight: bold;
+ width: 80px;
+ cursor: default;
+}
+.tablib_unselected {
+ padding: 2px 0px;
+ background-color: #dddddd;
+ border: 1px solid #aaaaaa;
+ border-bottom-color: #676767;
+ color: #000000;
+ width: 80px;
+ cursor: pointer;
+}
+.tablib_navContainer {
+ width: 10px;
+ vertical-align: middle;
+}
+.tablib_navContainer a:link, .tablib_navContainer a:visited, .tablib_navContainer a:hover {
+ color: #3366aa;
+ text-decoration: none;
+}
View
BIN gadgets/src/main/webapp/calltrace-gadget/thumbnail.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit b299cea

Please sign in to comment.