Skip to content

Commit

Permalink
refactor of stats page to use a simpler template and jquery deferred
Browse files Browse the repository at this point in the history
  • Loading branch information
@garrensmith
garrensmith committed Jul 9, 2012
1 parent a02c2b3 commit a12964a
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 68 deletions.
60 changes: 57 additions & 3 deletions _attachments/script/futon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ var request = function (options, callback) {
options.processData = false;
options.dataType = 'json';
options.contentType = 'application/json';
$.ajax(options);
return $.ajax(options); //return jquery promise
};

var handleError = function (err, resp) {
Expand Down Expand Up @@ -237,9 +237,63 @@ app.showConfig = function () {
};

app.showStats = function () {
this.title('Status');
this.title('Status');
$('span#topbar').html('<strong>Status</strong>');
this.render('templates/stats.mustache').replace('#content').then(function () {
var self = this;

var refreshTimeout = null;
var active_tasks = null;
var refresh = function () {
return request({url:"/_active_tasks"}, function (err, tasks) {
if (err) handleError(err, tasks);
active_tasks = tasks;
if (window.location.hash == '#/_stats') setTimeout(refresh, $("#interval input").val() * 1000);
})
};
var status_promise = refresh();

var stats_promise = request({url:'/_stats'}, function (err, data) {
stats = [];

for (section in data) {
var section_info = { name: section, subsections: [] };

for( subsection in data[section]) {
var subsection_obj = data[section][subsection]
var subsection_info = {
name: subsection,
description: subsection_obj.description,
current: subsection_obj.current,
sum: subsection_obj.sum,
mean: subsection_obj.mean,
stddev: subsection_obj.stddev,
min: subsection_obj.min,
max: subsection_obj.max
};

section_info.subsections.push(subsection_info);
}
stats.push(section_info);
}
});

$.when(stats_promise, status_promise).then(function () {
self.render('templates/stats.mustache', {tasks: active_tasks, stats: stats}).replace('#content').then(function () {

var slider = $("#interval input");
slider.val(5);
if (slider[0].type == "range") {
slider.bind("input", function() {
$("#interval .secs").text(this.value);
});
$("#interval .secs").text($("#interval input").val());
} else {
slider.bind("change", function() {
$("#interval .secs").text(this.value);
});
$("#interval .secs").hide();
}
});

});
};
Expand Down
110 changes: 45 additions & 65 deletions _attachments/templates/stats.mustache
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,69 +26,49 @@ specific language governing permissions and limitations under the License.
<th>PID</th>
<th>Status</th>
</tr></thead>
<tbody class="content"></tbody>
<tbody class="content">
{{#tasks}}
<tr>
<th>{{type}}</th>
<td class='object'>{{task}}</td>
<td class='pid'>{{pid}}</td>
<td class='status'>{{status}}</td>
</tr>
{{/tasks}}

{{^tasks}}
<tr class='none'><th colspan='4'>No tasks running</th></tr>
{{/tasks}}
</tbody>
</table>
<script>
var refreshTimeout = null;
var refresh = function () {
request({url:"/_active_tasks"}, function (err, tasks) {
if (err) handleError(err, tasks);
$("#status tbody.content").empty();
if (!tasks.length) {
$("<tr class='none'><th colspan='4'>No tasks running</th></tr>")
.appendTo("#status tbody.content");
} else {
$.each(tasks, function(idx, task) {
$("<tr><th></th><td class='object'></td><td class='pid'></td><td class='status'></td></tr>")
.find("th").text(task.type).end()
.find("td.object").text(task.task).end()
.find("td.pid").text(task.pid).end()
.find("td.status").text(task.status).end()
.appendTo("#status tbody.content");
});
}
if (window.location.hash == '#/_stats') setTimeout(refresh, $("#interval input").val() * 1000);
})
};
refresh();
var slider = $("#interval input");
slider.val(5);
if (slider[0].type == "range") {
slider.bind("input", function() {
$("#interval .secs").text(this.value);
});
$("#interval .secs").text($("#interval input").val());
} else {
slider.bind("change", function() {
$("#interval .secs").text(this.value);
});
$("#interval .secs").hide();
}
request({url:'/_stats'}, function (err, stats) {
if (err) handleError(err, stats);
var info = $('#content').append('<h2>Raw Info</h2>')
, text = ''
;
for (i in stats) {
text += '<div class="stat-section">'+i+'</div>'
for (x in stats[i]) {
text += '<div class="stat-subsection">'+x+'<span class="stat-subsection-description">'+stats[i][x].description+'</span></div>'
for (y in stats[i][x]) {
if (y !== 'description') {
text += '<span class="stat-title">'+y+'</span>'
text += '<span class="stat-value"> ' +
((stats[i][x][y] === null) ? 'none' : stats[i][x][y]) +
' </span>'
}
}
text += '<br>'
}
text += '<br>'
info.append(text)
text = ''
}
})
</script>
{{#stats}}
<div class="section-wrapper">
<h2>{{name}}</h2>
<div class="section-raw">
<table>
<tr>
<th> section </th>
<th> current </th>
<th> sum </th>
<th> mean </th>
<th> stddev </th>
<th> min </th>
<th> max </th>
</tr>
{{#subsections}}
<tr>
<td>{{name}}</td>
<td>{{current}}</td>
<td>{{sum}}</td>
<td>{{mean}}</td>
<td>{{stddev}}</td>
<td>{{min}}</td>
<td>{{max}}</td>
</tr>
{{/subsections}}
</table>
</div>
</div>
{{/stats}}


0 comments on commit a12964a

Please sign in to comment.