riemann-dash 0.2.4 → 0.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. data/lib/riemann/dash/public/clock.js +12 -8
  2. data/lib/riemann/dash/public/strings.js +8 -2
  3. data/lib/riemann/dash/public/subs.js +8 -4
  4. data/lib/riemann/dash/public/util.js +19 -5
  5. data/lib/riemann/dash/public/vendor/flot/jquery.colorhelpers.js +179 -0
  6. data/lib/riemann/dash/public/vendor/flot/jquery.colorhelpers.min.js +21 -0
  7. data/lib/riemann/dash/public/vendor/flot/jquery.flot.canvas.js +345 -0
  8. data/lib/riemann/dash/public/vendor/flot/jquery.flot.canvas.min.js +28 -0
  9. data/lib/riemann/dash/public/vendor/flot/jquery.flot.categories.js +190 -0
  10. data/lib/riemann/dash/public/vendor/flot/jquery.flot.categories.min.js +44 -0
  11. data/lib/riemann/dash/public/vendor/flot/jquery.flot.crosshair.js +176 -0
  12. data/lib/riemann/dash/public/vendor/flot/jquery.flot.crosshair.min.js +59 -0
  13. data/lib/riemann/dash/public/vendor/flot/jquery.flot.errorbars.js +353 -0
  14. data/lib/riemann/dash/public/vendor/flot/jquery.flot.errorbars.min.js +63 -0
  15. data/lib/riemann/dash/public/vendor/flot/jquery.flot.fillbetween.js +226 -0
  16. data/lib/riemann/dash/public/vendor/flot/jquery.flot.fillbetween.min.js +30 -0
  17. data/lib/riemann/dash/public/vendor/flot/jquery.flot.image.js +241 -0
  18. data/lib/riemann/dash/public/vendor/flot/jquery.flot.image.min.js +53 -0
  19. data/lib/riemann/dash/public/vendor/flot/jquery.flot.js +3061 -0
  20. data/lib/riemann/dash/public/vendor/flot/jquery.flot.min.js +29 -0
  21. data/lib/riemann/dash/public/vendor/flot/jquery.flot.navigate.js +346 -0
  22. data/lib/riemann/dash/public/vendor/flot/jquery.flot.navigate.min.js +86 -0
  23. data/lib/riemann/dash/public/vendor/flot/jquery.flot.pie.js +817 -0
  24. data/lib/riemann/dash/public/vendor/flot/jquery.flot.pie.min.js +56 -0
  25. data/lib/riemann/dash/public/vendor/flot/jquery.flot.resize.js +60 -0
  26. data/lib/riemann/dash/public/vendor/flot/jquery.flot.resize.min.js +19 -0
  27. data/lib/riemann/dash/public/vendor/flot/jquery.flot.selection.js +360 -0
  28. data/lib/riemann/dash/public/vendor/flot/jquery.flot.selection.min.js +79 -0
  29. data/lib/riemann/dash/public/vendor/flot/jquery.flot.stack.js +188 -0
  30. data/lib/riemann/dash/public/vendor/flot/jquery.flot.stack.min.js +36 -0
  31. data/lib/riemann/dash/public/vendor/flot/jquery.flot.symbol.js +71 -0
  32. data/lib/riemann/dash/public/vendor/flot/jquery.flot.symbol.min.js +14 -0
  33. data/lib/riemann/dash/public/vendor/flot/jquery.flot.threshold.js +142 -0
  34. data/lib/riemann/dash/public/vendor/flot/jquery.flot.threshold.min.js +43 -0
  35. data/lib/riemann/dash/public/vendor/flot/jquery.flot.time.js +431 -0
  36. data/lib/riemann/dash/public/vendor/flot/jquery.flot.time.min.js +9 -0
  37. data/lib/riemann/dash/public/view.js +11 -7
  38. data/lib/riemann/dash/public/views/flot.js +248 -0
  39. data/lib/riemann/dash/public/views/grid.js +1 -5
  40. data/lib/riemann/dash/version.rb +1 -1
  41. data/lib/riemann/dash/views/css.scss +24 -0
  42. data/lib/riemann/dash/views/index.erubis +6 -0
  43. metadata +35 -2
@@ -0,0 +1,248 @@
1
+ (function() {
2
+ // Reify a timeseries view from JSON
3
+ var FlotView = function(json) {
4
+ // Extract state from JSON
5
+ view.View.call(this, json);
6
+ this.query = json.query;
7
+ this.title = json.title;
8
+ this.lineWidth = json.lineWidth || 1;
9
+ this.timeRange = (json.timeRange * 1000) || 300000;
10
+
11
+ this.font = {
12
+ size: 11,
13
+ lineheight: 13,
14
+ color: "#444"
15
+ };
16
+
17
+ var self = this;
18
+
19
+ // Set up HTML
20
+ if (this.title) {
21
+ this.el.addClass('flot');
22
+ this.el.append('<h2></h2>' +
23
+ '<div class="container"></div>'
24
+ );
25
+ this.el.find('h2').text(this.title);
26
+ this.container = this.el.find('.container');
27
+ } else {
28
+ this.container = this.el;
29
+ }
30
+
31
+ // Create local copies of slurred functions
32
+ this.reflowGraph = util.slur(200, this.reflowGraph);
33
+
34
+ // This view can be clicked to focus on it.
35
+ this.clickFocusable = true;
36
+
37
+ // Time series state
38
+ this.series = {};
39
+ this.data = [];
40
+
41
+ if (!json.virtual) {
42
+ this.reflow();
43
+
44
+ // Initialize graph
45
+ this.setupGraph(new Date());
46
+
47
+ this.clockSub = clock.subscribe(function(t) {
48
+ self.trimData(t);
49
+ self.setupGraph(t);
50
+ });
51
+
52
+ // Subscribe to our query
53
+ this.sub = subs.subscribe(this.query,
54
+ function(e) {
55
+ self.update(e);
56
+ }
57
+ );
58
+ }
59
+ }
60
+
61
+ // Set up our FlotView class and register it with the view system
62
+ view.inherit(view.View, FlotView);
63
+ view.Flot = FlotView;
64
+ view.types.Flot = FlotView;
65
+
66
+ // Create our Flot graph
67
+ FlotView.prototype.setupGraph = function(t) {
68
+ if (this.container.width() === 0 ||
69
+ this.container.height() === 0) {
70
+ this.graph = null;
71
+ return;
72
+ }
73
+
74
+ // Initialize Flot
75
+ this.container.empty();
76
+ this.graph = $.plot(this.container, this.data, {
77
+ legend: {
78
+ position: "nw",
79
+ backgroundOpacity: 0.7,
80
+ },
81
+ grid: {
82
+ borderWidth: 1,
83
+ borderColor: "#aaa",
84
+ color: "#444",
85
+ backgroundColor: '#fff'
86
+ },
87
+ yaxis: {
88
+ font: this.font,
89
+ min: 0,
90
+ },
91
+ xaxis: {
92
+ font: this.font,
93
+ mode: "time",
94
+ min: t - this.timeRange,
95
+ max: t
96
+ }
97
+ });
98
+ }
99
+
100
+ // Re-order the data list and series index to be in sorted order by label.
101
+ FlotView.prototype.resortSeries = function() {
102
+ // Shorten labels
103
+ var hostPrefix = strings.commonPrefix(_.pluck(this.data, 'riemannHost'));
104
+ var servicePrefix = strings.commonPrefix(
105
+ _.pluck(this.data, 'riemannService'));
106
+ _.each(this.data, function(d) {
107
+ d.label = d.riemannHost.substring(hostPrefix.length) + ' ' +
108
+ d.riemannService.substring(servicePrefix.length);
109
+ // Empty labels are expanded back to full ones.
110
+ if (d.label === ' ') {
111
+ d.label = d.riemannHost + ' ' + d.riemannService;
112
+ }
113
+ });
114
+
115
+ // Sort data series
116
+ this.data.sort(function(a, b) {
117
+ if (a.label === b.label) {
118
+ return 0;
119
+ } else if (a.label > b.label) {
120
+ return 1;
121
+ } else {
122
+ return -1;
123
+ }
124
+ });
125
+
126
+ // Rebuild series index
127
+ this.series = {};
128
+ _.each(this.data, function(s, i) {
129
+ this.series[s.riemannKey] = i;
130
+ }, this);
131
+ };
132
+
133
+ // Accept events from a subscription and update the dataset.
134
+ FlotView.prototype.update = function(event) {
135
+ // Get series for this host/service
136
+ var key = util.eventKey(event);
137
+
138
+ // If this is a new series, add it.
139
+ if (this.series[key] === undefined) {
140
+ this.data.push({
141
+ riemannKey: key,
142
+ riemannHost: event.host || 'nil',
143
+ riemannService: event.service || 'nil',
144
+ lineWidth: this.lineWidth,
145
+ shadowSize: 0,
146
+ data: []
147
+ });
148
+ this.resortSeries();
149
+ }
150
+ var series = this.data[this.series[key]].data;
151
+
152
+ // Add event to series
153
+ if (event.state === "expired") {
154
+ series.push(null);
155
+ } else if (event.metric !== undefined) {
156
+ series.push([event.time, event.metric]);
157
+ }
158
+
159
+ // Update graph data
160
+ if (this.graph) {
161
+ this.graph.setData(this.data);
162
+ }
163
+ }
164
+
165
+ // Clean up old data points.
166
+ FlotView.prototype.trimData = function(t) {
167
+ var t = t - this.timeRange;
168
+ var empties = false;
169
+
170
+ _.each(this.data, function(s) {
171
+ // We leave one data point off the edge of the graph for continuity.
172
+ while (1 < s.data.length && (s.data[1] === null || s.data[1][0] < t)) {
173
+ s.data.shift();
174
+ }
175
+ // And clean up single data points if necessary.
176
+ if (1 === s.data.length && (s.data[0] === null || s.data[0][0] < t)) {
177
+ s.data.shift();
178
+ } else if (0 === s.data.length) {
179
+ empties = true;
180
+ }
181
+ });
182
+
183
+ // Clean up empty datasets
184
+ if (empties) {
185
+ this.data = _.reject(this.data, function(s) {
186
+ return s.data.length === 0;
187
+ });
188
+ this.resortSeries();
189
+ }
190
+ }
191
+
192
+ // Serialize current state to JSON
193
+ FlotView.prototype.json = function() {
194
+ return $.extend(view.View.prototype.json.call(this), {
195
+ type: 'Flot',
196
+ title: this.title,
197
+ query: this.query,
198
+ timeRange: this.timeRange / 1000
199
+ });
200
+ }
201
+
202
+ // HTML template used to edit this view
203
+ var editTemplate = _.template(
204
+ '<label for="title">title</label>' +
205
+ '<input type="text" name="title" value="{{title}}" /><br />' +
206
+ '<label for="query">query</label>' +
207
+ '<textarea type="text" class="query" name="query">{{ query }}</textarea><br />' +
208
+ '<label for="timeRange">Time range (s)</label>' +
209
+ '<input type="text" name="timeRange" value="{{timeRange / 1000}}" />'
210
+ );
211
+
212
+ // Returns the edit form
213
+ FlotView.prototype.editForm = function() {
214
+ return editTemplate(this);
215
+ };
216
+
217
+ // Redraws graph
218
+ FlotView.prototype.refresh = function() {
219
+ this.graph.setupGrid();
220
+ this.graph.draw();
221
+ };
222
+
223
+ // Resizes graph
224
+ FlotView.prototype.reflowGraph = function() {
225
+ if (this.graph) {
226
+ this.graph.resize();
227
+ this.graph.setupGrid();
228
+ this.graph.draw();
229
+ }
230
+ }
231
+
232
+ // Called when our parent needs to resize us
233
+ FlotView.prototype.reflow = function() {
234
+ this.reflowGraph();
235
+ }
236
+
237
+ // When the view is deleted, remove our subscription
238
+ FlotView.prototype.delete = function() {
239
+ if (this.clockSub) {
240
+ clock.unsubscribe(this.clockSub);
241
+ }
242
+ if (this.sub) {
243
+ subs.unsubscribe(this.sub);
244
+ }
245
+ view.View.prototype.delete.call(this);
246
+ }
247
+ })();
248
+
@@ -385,11 +385,7 @@
385
385
 
386
386
  // Accept an event.
387
387
  Grid.prototype.update = function(e) {
388
- if (e.state === "expired") {
389
- this.remove(e);
390
- } else {
391
- this.add(e);
392
- }
388
+ this.add(e);
393
389
  }
394
390
 
395
391
  Grid.prototype.reflow = function() {
@@ -1,4 +1,4 @@
1
1
  module Riemann; end
2
2
  module Riemann::Dash
3
- VERSION = '0.2.4'
3
+ VERSION = '0.2.5'
4
4
  end
@@ -176,6 +176,10 @@ html,table {
176
176
  background: $orange;
177
177
  color: #000;
178
178
  }
179
+ .state.expired {
180
+ background: $purple;
181
+ color: #000;
182
+ }
179
183
 
180
184
  .view .query {
181
185
  display: block;
@@ -428,5 +432,25 @@ h2 {
428
432
  .event-legend:hover {
429
433
  background-color: hsla(0, 0%, 100%, .8) !important;
430
434
  }
435
+ }
436
+
437
+ .flot.view {
438
+ .legend {
439
+ font-size: 13px;
440
+ color: #000;
441
+ opacity: 1;
442
+ }
443
+
444
+ h2 {
445
+ height: 28px;
446
+ font-size: 24px;
447
+ }
431
448
 
449
+ .container {
450
+ position: absolute;
451
+ top: 28px;
452
+ left: 0;
453
+ right: 0;
454
+ bottom: 0;
455
+ }
432
456
  }
@@ -19,6 +19,11 @@
19
19
  <script src="/vendor/jquery/jquery.simplemodal.1.4.4.min.js"></script>
20
20
  <script src="/vendor/jquery/jquery.quickfit.js"></script>
21
21
  <script src="/vendor/toastr/toastr.js"></script>
22
+ <script src="/vendor/flot/jquery.colorhelpers.min.js"></script>
23
+ <script src="/vendor/flot/jquery.flot.js"></script>
24
+ <script src="/vendor/flot/jquery.flot.canvas.min.js"></script>
25
+ <script src="/vendor/flot/jquery.flot.time.min.js"></script>
26
+ <!-- <script src="/vendor/flot/jquery.flot.stack.min.js"></script>-->
22
27
  <script> // turn underscore templates into mustache style templates
23
28
  _.templateSettings = {
24
29
  evaluate : /\{\%([\s\S]+?)\%\}/g, // {% eval(js); %}
@@ -39,6 +44,7 @@
39
44
  <script src="/toolbar.js"></script>
40
45
  <script src="/view.js"></script>
41
46
  <script src="/views/timeseries.js"></script>
47
+ <script src="/views/flot.js"></script>
42
48
  <script src="/views/title.js"></script>
43
49
  <script src="/views/help.js"></script>
44
50
  <script src="/views/gauge.js"></script>
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: riemann-dash
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.2.4
4
+ version: 0.2.5
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2013-04-29 00:00:00.000000000 Z
12
+ date: 2013-06-27 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: riemann-client
@@ -139,6 +139,38 @@ files:
139
139
  - lib/riemann/dash/public/toolbar.js
140
140
  - lib/riemann/dash/public/util.js
141
141
  - lib/riemann/dash/public/vendor/backbone.js
142
+ - lib/riemann/dash/public/vendor/flot/jquery.colorhelpers.js
143
+ - lib/riemann/dash/public/vendor/flot/jquery.colorhelpers.min.js
144
+ - lib/riemann/dash/public/vendor/flot/jquery.flot.canvas.js
145
+ - lib/riemann/dash/public/vendor/flot/jquery.flot.canvas.min.js
146
+ - lib/riemann/dash/public/vendor/flot/jquery.flot.categories.js
147
+ - lib/riemann/dash/public/vendor/flot/jquery.flot.categories.min.js
148
+ - lib/riemann/dash/public/vendor/flot/jquery.flot.crosshair.js
149
+ - lib/riemann/dash/public/vendor/flot/jquery.flot.crosshair.min.js
150
+ - lib/riemann/dash/public/vendor/flot/jquery.flot.errorbars.js
151
+ - lib/riemann/dash/public/vendor/flot/jquery.flot.errorbars.min.js
152
+ - lib/riemann/dash/public/vendor/flot/jquery.flot.fillbetween.js
153
+ - lib/riemann/dash/public/vendor/flot/jquery.flot.fillbetween.min.js
154
+ - lib/riemann/dash/public/vendor/flot/jquery.flot.image.js
155
+ - lib/riemann/dash/public/vendor/flot/jquery.flot.image.min.js
156
+ - lib/riemann/dash/public/vendor/flot/jquery.flot.js
157
+ - lib/riemann/dash/public/vendor/flot/jquery.flot.min.js
158
+ - lib/riemann/dash/public/vendor/flot/jquery.flot.navigate.js
159
+ - lib/riemann/dash/public/vendor/flot/jquery.flot.navigate.min.js
160
+ - lib/riemann/dash/public/vendor/flot/jquery.flot.pie.js
161
+ - lib/riemann/dash/public/vendor/flot/jquery.flot.pie.min.js
162
+ - lib/riemann/dash/public/vendor/flot/jquery.flot.resize.js
163
+ - lib/riemann/dash/public/vendor/flot/jquery.flot.resize.min.js
164
+ - lib/riemann/dash/public/vendor/flot/jquery.flot.selection.js
165
+ - lib/riemann/dash/public/vendor/flot/jquery.flot.selection.min.js
166
+ - lib/riemann/dash/public/vendor/flot/jquery.flot.stack.js
167
+ - lib/riemann/dash/public/vendor/flot/jquery.flot.stack.min.js
168
+ - lib/riemann/dash/public/vendor/flot/jquery.flot.symbol.js
169
+ - lib/riemann/dash/public/vendor/flot/jquery.flot.symbol.min.js
170
+ - lib/riemann/dash/public/vendor/flot/jquery.flot.threshold.js
171
+ - lib/riemann/dash/public/vendor/flot/jquery.flot.threshold.min.js
172
+ - lib/riemann/dash/public/vendor/flot/jquery.flot.time.js
173
+ - lib/riemann/dash/public/vendor/flot/jquery.flot.time.min.js
142
174
  - lib/riemann/dash/public/vendor/jquery/jquery-1.9.1.min.js
143
175
  - lib/riemann/dash/public/vendor/jquery/jquery-ui-1.10.2.custom.min.js
144
176
  - lib/riemann/dash/public/vendor/jquery/jquery.quickfit.js
@@ -148,6 +180,7 @@ files:
148
180
  - lib/riemann/dash/public/vendor/toastr/toastr.css
149
181
  - lib/riemann/dash/public/vendor/toastr/toastr.js
150
182
  - lib/riemann/dash/public/view.js
183
+ - lib/riemann/dash/public/views/flot.js
151
184
  - lib/riemann/dash/public/views/gauge.js
152
185
  - lib/riemann/dash/public/views/grid.js
153
186
  - lib/riemann/dash/public/views/help.js