riemann / riemann-dash

An HTTP dashboard for Riemann.
MIT License
248 stars 102 forks source link

vertical grid view #16

Closed pdmct closed 11 years ago

pdmct commented 11 years ago

provides a new GridVert view which is a pivot of the standard Grid view. Basically just a copy of grid.js and swaps the columns with the rows.

pdmct commented 11 years ago

To make it a bit easier to see the changes

$ diff grid.js grid-vert.js 
4c4
<   var Grid = function(json) {
---
>   var GridVert = function(json) {
37,39c37,39
<   view.inherit(view.View, Grid);
<   view.Grid = Grid;
<   view.types.Grid = Grid;
---
>   view.inherit(view.View, GridVert);
>   view.GridVert = GridVert;
>   view.types.GridVert = GridVert;
41c41
<   Grid.prototype.json = function() {
---
>   GridVert.prototype.json = function() {
43c43
<       type: 'Grid',
---
>       type: 'GridVert',
50c50
<   Grid.prototype.editForm = function() {
---
>   GridVert.prototype.editForm = function() {
62c62
<   Grid.prototype.allEvents = function() {
---
>   GridVert.prototype.allEvents = function() {
72c72
<   Grid.prototype.eventMax = function(event) {
---
>   GridVert.prototype.eventMax = function(event) {
83c83
<   Grid.prototype.renderElement = function(element, event) {
---
>   GridVert.prototype.renderElement = function(element, event) {
107c107
<   Grid.prototype.partialRender = function(event) {
---
>   GridVert.prototype.partialRender = function(event) {
111,112c111,112
<     var row = this.el.find('tbody tr')[hostIndex];
<     var td = $($(row).find('td')[serviceIndex]);
---
>     var row = this.el.find('tbody tr')[serviceIndex];
>     var td = $($(row).find('td')[hostIndex]);
118c118
<   Grid.prototype.render = util.slur(200, function() {
---
>   GridVert.prototype.render = util.slur(200, function() {
125c125
<     this.services.forEach(function(service) {
---
>     this.hosts.forEach(function(host) {
127c127
<       element.text(service);
---
>       element.text(host);
131c131
<     this.hosts.forEach(function(host) {
---
>     this.services.forEach(function(service) {
134,136c134,136
<       row.find('th').text(host);
<       this.services.forEach(function(service) {
<         var event = this.events[host][service];
---
>       row.find('th').text(service);
>       this.hosts.forEach(function(host) {
>         var event = this.events[service][host];
145c145
<   Grid.prototype.updateMax = function(event) {
---
>   GridVert.prototype.updateMax = function(event) {
190c190
<   Grid.prototype.saveEvent = function(e) {
---
>   GridVert.prototype.saveEvent = function(e) {
222c222
<   Grid.prototype.add = function(e) {
---
>   GridVert.prototype.add = function(e) {
234c234
<   Grid.prototype.remove = function(e) {
---
>   GridVert.prototype.remove = function(e) {
257c257
<   Grid.prototype.update = function(e) {
---
>   GridVert.prototype.update = function(e) {
265c265
<   Grid.prototype.reflow = function() {
---
>   GridVert.prototype.reflow = function() {
272c272
<   Grid.prototype.delete = function() {
---
>   GridVert.prototype.delete = function() {
darkone23 commented 11 years ago

Here's a diff ignoring changes of Grid to GridVert

<     var row = this.el.find('tbody tr')[hostIndex];
<     var td = $($(row).find('td')[serviceIndex]);

>     var row = this.el.find('tbody tr')[serviceIndex];
>     var td = $($(row).find('td')[hostIndex]);

<   Grid.prototype.render = util.slur(200, function() {
>   GridVert.prototype.render = util.slur(200, function() {

<     this.services.forEach(function(service) {
>     this.hosts.forEach(function(host) {
<       element.text(service);
>       element.text(host);
<     this.hosts.forEach(function(host) {
>     this.services.forEach(function(service) {
<       row.find('th').text(host);
<       this.services.forEach(function(service) {
<         var event = this.events[host][service];
>       row.find('th').text(service);
>       this.hosts.forEach(function(host) {
>         var event = this.events[service][host];

pdmct, would it be possible to make this an option in the edit view and just switch based on the value of the field?

darkone23 commented 11 years ago

pdmct: can you verify that this works with the progress bar style widths? Looks like it'd break when trying to calculate 'max'.

I have a version here that solves this problem: https://github.com/eggsby/riemann-dash/commit/652332aed4a044afd412b210d6a60101c345f254

pdmct commented 11 years ago

Happy to go with eggsby implementation ... this pull req can be closed.

aphyr commented 11 years ago

Thanks for working on this, pdmct. :) I merged eggsby's variant, but I'll add you in the thanks file too. :)