yogsototh/riemann-dash
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

implementing initial version of vertical grids, still need to smooth out some rendering glitches

Browse source
This commit is contained in:
egghead 2013-03-12 05:31:22 +00:00
parent ae2d48aa9e
commit 652332aed4
1 changed files with 122 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

183
lib/riemann/dash/public/views/grid.js
View file

@ -6,6 +6,7 @@
this.query = json.query;
this.title = json.title;
this.max = json.max || "all";
this.by = json.by || "host";
this.clickFocusable = true;
// Initial display
@ -18,8 +19,12 @@
this.el.find('h2').text(this.title);
// State
this.columns = [];
this.rows = [];
this.hosts = [];
this.services = [];
this.events = {};
if (this.max === "service" || this.max === "host") {
this.currentMax = {};
@ -44,6 +49,7 @@
title: this.title,
query: this.query,
max: this.max,
by: this.by
});
}
@ -52,18 +58,21 @@
'<input type="text" name="title" value="{{title}}" /><br />' +
'<label for="query">Query</label><br />' +
'<textarea name="query" class="query">{{query}}</textarea><br />' +
'<label for="by">group by (horizontal)</label>' +
'<input type="text" name="by" value="{{by}}" /><br />' +
'<span class="desc">"host" or "service"</span><br />' +
'<label for="max">Max</label>' +
'<input type="text" name="max" value="{{max}}" /><br />' +
'<span class="desc">"all", "host", "service", or any number.</span>',
this)
this);
}
// Returns all events, flat.
Grid.prototype.allEvents = function() {
var events = [];
for (host in this.events) {
for (service in this.events[host]) {
events.push(this.events[host][service]);
for (row in this.events) {
for (column in this.events[row]) {
events.push(this.events[row][column]);
}
}
}
@ -106,10 +115,15 @@
// Render a single event if there's been no change to table structure.
Grid.prototype.partialRender = function(event) {
var table = this.el.find('table');
var hostIndex = this.hosts.indexOf(event.host);
var serviceIndex = this.services.indexOf(event.service);
var row = this.el.find('tbody tr')[hostIndex];
var td = $($(row).find('td')[serviceIndex]);
if (this.by === "host") {
var rowIndex = this.rows.indexOf(event.host);
var columnIndex = this.columns.indexOf(event.service);
} else {
var rowIndex = this.rows.indexOf(event.service);
var columnIndex = this.columns.indexOf(event.host)
}
var row = this.el.find('tbody tr')[rowIndex];
var td = $($(row).find('td')[columnIndex]);
this.renderElement(td, event);
}
@ -122,18 +136,18 @@
// Header
table.append("<thead><tr><th></th></tr></thead>");
var row = table.find("thead tr");
this.services.forEach(function(service) {
this.columns.forEach(function(name) {
var element = $('<th>');
element.text(service);
element.text(name);
row.append(element);
});
this.hosts.forEach(function(host) {
this.rows.forEach(function(name) {
row = $("<tr><th></th>");
table.append(row);
row.find('th').text(host);
this.services.forEach(function(service) {
var event = this.events[host][service];
row.find('th').text(name);
this.columns.forEach(function(subName) {
var event = this.events[name][subName];
var element = $('<td><span class="bar"><span class="metric"/></span></td>');
this.renderElement(element, event);
row.append(element);
@ -151,30 +165,53 @@
}
var e;
if (this.max === "all") {
this.currentMax = -1/0;
for (host in this.events) {
for (service in this.events[host]) {
e = this.events[host][service];
for (name in this.events) {
for (subName in this.events[name]) {
e = this.events[name][subName];
this.currentMax = Math.max(e.metric, this.currentMax || -1/0);
}
}
} else if (this.max === "host" ) {
this.currentMax = {};
for (host in this.events) {
for (service in this.events[host]) {
e = this.events[host][service];
this.currentMax[e.host] =
Math.max(e.metric, this.currentMax[e.host] || -1/0)
} else if (this.by == "host") {
if (this.max == "host") {
this.currentMax = {};
for (host in this.events) {
for (service in this.events[host]) {
e = this.events[host][service];
this.currentMax[e.host] =
Math.max(e.metric, this.currentMax[e.host] || -1/0)
}
}
} else if (this.max === "service") {
this.currentMax = {};
for (host in this.events) {
for (service in this.events[host]) {
e = this.events[host][service];
this.currentMax[e.service] =
Math.max(e.metric, this.currentMax[e.service] || -1/0);
}
}
}
} else if (this.max === "service") {
this.currentMax = {};
for (host in this.events) {
for (service in this.events[host]) {
e = this.events[host][service];
this.currentMax[e.service] =
Math.max(e.metric, this.currentMax[e.service] || -1/0);
} else if (this.by === "service") {
if (this.max == "host") {
this.currentMax = {};
for (service in this.events) {
for (host in this.events[service]) {
e = this.events[service][host];
this.currentMax[e.host] =
Math.max(e.metric, this.currentMax[e.host] || -1/0)
}
}
} else if (this.max === "service") {
this.currentMax = {};
for (service in this.events) {
for (host in this.events[service]) {
e = this.events[service][host];
this.currentMax[e.service] =
Math.max(e.metric, this.currentMax[e.service] || -1/0);
}
}
}
} else {
@ -188,34 +225,58 @@
// Stores an event in the internal state tables. Returns true if we
// haven't seen this host/service before.
Grid.prototype.saveEvent = function(e) {
// Host list
if (this.hosts.indexOf(e.host) === -1) {
this.hosts.push(e.host);
this.hosts = _.uniq(this.hosts.sort(), true);
if (this.by === "host") {
// Host list
if (this.rows.indexOf(e.host) === -1) {
this.rows.push(e.host);
this.rows = _.uniq(this.rows.sort(), true);
}
// Services list
if (this.columns.indexOf(e.service) === -1) {
this.columns.push(e.service);
this.columns = _.uniq(this.columns.sort(), true);
}
// Events map
if (this.events[e.host] === undefined) {
// New host
this.events[e.host] = {};
}
var newEvent = (this.events[e.host][e.service] === undefined);
// Store event
this.events[e.host][e.service] = e;
return newEvent;
} else if (this.by === "service") {
// Services list
if (this.rows.indexOf(e.service) === -1) {
this.rows.push(e.service);
this.rows = _.uniq(this.rows.sort(), true);
}
// Host list
if (this.columns.indexOf(e.host) === -1) {
this.columns.push(e.host);
this.columns = _.uniq(this.columns.sort(), true);
}
// Events map
if (this.events[e.service] === undefined) {
// New host
this.events[e.service] = {};
}
var newEvent = (this.events[e.service][e.host] === undefined);
// Store event
this.events[e.service][e.host] = e;
return newEvent;
}
// Services list
if (this.services.indexOf(e.service) === -1) {
this.services.push(e.service);
this.services = _.uniq(this.services.sort(), true);
}
// Events map
if (this.events[e.host] === undefined) {
// New host
this.events[e.host] = {};
}
if (this.events[e.host][e.service] === undefined) {
// New event
var newEvent = true;
} else {
var newEvent = false;
}
// Store event
this.events[e.host][e.service] = e;
return newEvent;
}
// Add an event.
@ -263,10 +324,10 @@
}
Grid.prototype.reflow = function() {
// this.el.find('table').height(
// this.height() -
// this.el.find('h2').height()
// );
// this.el.find('table').height(
// this.height() -
// this.el.find('h2').height()
// );
}
Grid.prototype.delete = function() {