Permalink
Browse files

GADGETS-34: present context and properties information.

  • Loading branch information...
1 parent 91c5281 commit a5e47065abaa890dda298b43f08a045fe2119111 @jeffyu jeffyu committed Feb 16, 2013
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -7,9 +7,15 @@
#sla-body tr{background-color:#FFFFFF;}
.tb-header {background:#A7C942;color: #FFFFFF; font-weight:bold;border:1px solid #98BF21;}
.tb-header td {}
- .tb-row {border:1px solid #98BF21;}
- .violation-text {color: red;}
+ .table-row {border:1px solid #98BF21;}
+ .highlight {background: #fbfac1;}
+ .violation-text {color: red;}
+ .ui-state-hover {color:blue; cursor:pointer;}
+ .clickable {cursor: pointer;}
+ div.arrows {background:transparent url(arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
+ div.up {background-position:0px 0px;}
</style>
+ <script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<div style="float:right;">
@@ -18,12 +24,13 @@
<table style="width:100%" id="sla-table" border="0" cellspacing="3" cellpadding="5">
<thead>
<tr class="tb-header">
- <td>Service Type</td><td>Operation</td><td>Violation Description</td><td>Time</td>
+ <td>Service Type</td><td>Operation</td><td>Violation Description</td><td>Time</td><td> Details</td>
</tr>
</thead>
<tbody id="sla-body">
</tbody>
</table>
+
<script type="text/javascript">
function deleteRows() {
var theBody, theSize, i;
@@ -34,20 +41,76 @@
}
}
- function insertRow(data) {
+ function insertRow(data, rowId) {
var theBody, theRow, theCell, i;
theBody = document.getElementById("sla-body");
theRow = document.createElement("TR");
- theRow.setAttribute("class", "tb-row");
+ theRow.setAttribute("class", "table-row");
+ theRow.setAttribute("id", rowId);
theBody.appendChild(theRow);
for (i = 0; i < data.length; i++) {
theCell = document.createElement("TD");
+ theCell.setAttribute("class", "clickable");
theCell.innerHTML = data[i];
if (i == 2) {
- theCell.setAttribute("class", "violation-text");
+ theCell.setAttribute("class", "clickable violation-text");
}
theRow.appendChild(theCell);
}
+ theCell = document.createElement("TD");
+ theCell.setAttribute("class", "clickable");
+ theCell.innerHTML="<div class='arrows'></div>";
+ theRow.appendChild(theCell);
+
+ appendContextHeader(theBody, rowId);
+
+ var theContext = [{"type":"Message", "value":"This is the first message"},
+ {"type":"message", "value":"Another message"}];
+ appendContext(theContext, rowId, theBody, "Context");
+ appendContext(theContext, rowId, theBody, "Properties");
+ }
+
+ function appendContextHeader(theBody, rowId){
+ var theRow, cell;
+ theRow = document.createElement("TR");
+ theRow.setAttribute("class", "table-row detail child-" + rowId);
+ theBody.appendChild(theRow);
+
+ cell = document.createElement("TD");
+ theRow.appendChild(cell);
+
+ cell = document.createElement("TD");
+ cell.innerHTML="Type";
+ theRow.appendChild(cell);
+
+ cell = document.createElement("TD");
+ cell.innerHTML="Value";
+ theRow.appendChild(cell);
+ }
+
+ function appendContext(data, rowId, theBody, description) {
+ var i, contextRow, cell;
+ if (data.length > 0) {
+ for (i = 0; i < data.length; i++) {
+ contextRow = document.createElement("TR");
+ contextRow.setAttribute("class", "table-row detail child-" + rowId);
+ theBody.appendChild(contextRow);
+ cell = document.createElement("TD");
+ if (i == 0) {
+ cell.innerHTML="<b>" + description + "</b>";
+ }
+ contextRow.appendChild(cell);
+
+ cell = document.createElement("TD");
+ cell.innerHTML=data.type;
+ contextRow.appendChild(cell);
+
+ cell = document.createElement("TD");
+ cell.setAttribute("colspan", "3");
+ cell.innerHTML=data.message;
+ contextRow.appendChild(cell);
+ }
+ }
}
function parseJSON(data) {
@@ -72,10 +135,18 @@
for (i = 0; i < jsonData.length; i++) {
theModel = jsonData[i];
rowData = [theModel.serviceType, theModel.operation, theModel.violation, getDateTime(new Date(theModel.timestamp))];
- insertRow(rowData);
+ insertRow(rowData, i);
}
+
+ $("tr.detail").hide();
+ $("td.clickable").click(function(){
+ $(this).parent().find(".arrows").toggleClass("up");
+ var parentId = $(this).parent().prop("id");
+ $(".child-" + parentId).toggle();
+ });
}
init();
+
</script>
</body>
</html>
@@ -16,10 +16,13 @@
#sla-body tr{background-color:#FFFFFF;}
.tb-header {background:#A7C942;color: #FFFFFF; font-weight:bold;border:1px solid #98BF21;}
.tb-header td {}
- .tb-row {border:1px solid #98BF21;}
- .violation-text {color: red;}
+ .table-row {border:1px solid #98BF21;}
+ .violation-text {color: red;}
+ .clickable {cursor: pointer;}
+ div.arrows {background:transparent url(arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
+ div.up {background-position:0px 0px;}
</style>
-
+ <script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
function makeJSONRequest() {
@@ -55,29 +58,91 @@
for (i = 0; i < jsondata.length; i++) {
slaResult = jsondata[i];
rowData = [slaResult.type, slaResult.severity, slaResult.description, getDateTime(new Date(slaResult.timestamp))];
- insertRow(rowData);
+ insertRow(rowData, i, slaResult);
}
+
+ $("tr.detail").hide();
+ $("td.clickable").click(function(){
+ $(this).parent().find(".arrows").toggleClass("up");
+ var parentId = $(this).parent().prop("id");
+ $(".child-" + parentId).toggle();
+ });
}
function getDateTime(theDate) {
return theDate.getFullYear() + "-" + (theDate.getMonth() +1) + "-" + theDate.getDate() + " " + theDate.getHours()
+ ":" + theDate.getMinutes() + ":" + theDate.getSeconds();
}
- function insertRow(data) {
+ function insertRow(data, rowId, rawData) {
var theBody, theRow, theCell, i;
theBody = document.getElementById("sla-body");
theRow = document.createElement("TR");
- theRow.setAttribute("class", "tb-row");
+ theRow.setAttribute("class", "table-row");
+ theRow.setAttribute("id", rowId);
theBody.appendChild(theRow);
for (i = 0; i < data.length; i++) {
theCell = document.createElement("TD");
theCell.innerHTML = data[i];
+ theCell.setAttribute("class", "clickable");
if (i == 2) {
- theCell.setAttribute("class", "violation-text");
+ theCell.setAttribute("class", "clickable violation-text");
}
theRow.appendChild(theCell);
}
+
+ theCell = document.createElement("TD");
+ theCell.setAttribute("class", "clickable");
+ theCell.innerHTML="<div class='arrows'></div>";
+ theRow.appendChild(theCell);
+
+ appendContextHeader(theBody, rowId);
+ appendContext(rawData.context, rowId, theBody, "Context");
+ appendContext(rawData.properties, rowId, theBody, "Properties");
+ }
+
+ function appendContextHeader(theBody, rowId){
+ var theRow, cell;
+ theRow = document.createElement("TR");
+ theRow.setAttribute("class", "table-row detail child-" + rowId);
+ theBody.appendChild(theRow);
+
+ cell = document.createElement("TD");
+ theRow.appendChild(cell);
+
+ cell = document.createElement("TD");
+ cell.innerHTML="Type";
+ theRow.appendChild(cell);
+
+ cell = document.createElement("TD");
+ cell.setAttribute("colspan", "3");
+ cell.innerHTML="Value";
+ theRow.appendChild(cell);
+ }
+
+ function appendContext(data, rowId, theBody, description) {
+ var i, contextRow, cell;
+ if (data.length > 0) {
+ for (i = 0; i < data.length; i++) {
+ contextRow = document.createElement("TR");
+ contextRow.setAttribute("class", "table-row detail child-" + rowId);
+ theBody.appendChild(contextRow);
+ cell = document.createElement("TD");
+ if (i == 0) {
+ cell.innerHTML="<b>" + description + "</b>";
+ }
+ contextRow.appendChild(cell);
+
+ cell = document.createElement("TD");
+ cell.innerHTML=data[i].type;
+ contextRow.appendChild(cell);
+
+ cell = document.createElement("TD");
+ cell.setAttribute("colspan", "3");
+ cell.innerHTML=data[i].value;
+ contextRow.appendChild(cell);
+ }
+ }
}
function deleteRows() {
@@ -105,7 +170,7 @@
<table style="width:100%" id="sla-table" border="0" cellspacing="3" cellpadding="5">
<thead>
<tr class="tb-header">
- <td>Type</td><td>Severity</td><td>Description</td><td>Time</td>
+ <td>Type</td><td>Severity</td><td>Description</td><td>Time</td><td>Details</td>
</tr>
</thead>
<tbody id="sla-body">

Large diffs are not rendered by default.

Oops, something went wrong.

0 comments on commit a5e4706

Please sign in to comment.