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.
- data/lib/riemann/dash/public/clock.js +12 -8
- data/lib/riemann/dash/public/strings.js +8 -2
- data/lib/riemann/dash/public/subs.js +8 -4
- data/lib/riemann/dash/public/util.js +19 -5
- data/lib/riemann/dash/public/vendor/flot/jquery.colorhelpers.js +179 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.colorhelpers.min.js +21 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.canvas.js +345 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.canvas.min.js +28 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.categories.js +190 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.categories.min.js +44 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.crosshair.js +176 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.crosshair.min.js +59 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.errorbars.js +353 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.errorbars.min.js +63 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.fillbetween.js +226 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.fillbetween.min.js +30 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.image.js +241 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.image.min.js +53 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.js +3061 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.min.js +29 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.navigate.js +346 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.navigate.min.js +86 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.pie.js +817 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.pie.min.js +56 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.resize.js +60 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.resize.min.js +19 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.selection.js +360 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.selection.min.js +79 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.stack.js +188 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.stack.min.js +36 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.symbol.js +71 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.symbol.min.js +14 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.threshold.js +142 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.threshold.min.js +43 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.time.js +431 -0
- data/lib/riemann/dash/public/vendor/flot/jquery.flot.time.min.js +9 -0
- data/lib/riemann/dash/public/view.js +11 -7
- data/lib/riemann/dash/public/views/flot.js +248 -0
- data/lib/riemann/dash/public/views/grid.js +1 -5
- data/lib/riemann/dash/version.rb +1 -1
- data/lib/riemann/dash/views/css.scss +24 -0
- data/lib/riemann/dash/views/index.erubis +6 -0
- 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
|
+
|
data/lib/riemann/dash/version.rb
CHANGED
@@ -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
|
+
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-
|
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
|