riemann-dash 0.1.1 → 0.2.0
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/controller/index.rb +46 -1
- data/lib/riemann/dash/public/dash.js +6 -3
- data/lib/riemann/dash/public/persistence.js +2 -2
- data/lib/riemann/dash/public/subs.js +117 -12
- data/lib/riemann/dash/public/toastr.css +174 -0
- data/lib/riemann/dash/public/toastr.js +207 -0
- data/lib/riemann/dash/public/util.js +31 -0
- data/lib/riemann/dash/public/views/gauge.js +4 -4
- data/lib/riemann/dash/public/views/grid.js +11 -11
- data/lib/riemann/dash/public/views/title.js +4 -2
- data/lib/riemann/dash/version.rb +1 -1
- data/lib/riemann/dash/views/css.scss +83 -57
- data/lib/riemann/dash/views/index.erubis +200 -6
- data/lib/riemann/dash.rb +7 -38
- metadata +35 -66
- data/lib/riemann/dash/controller/websockets.rb +0 -50
- data/lib/riemann/dash/helper/renderer.rb +0 -266
- data/lib/riemann/dash/views/websockets.erubis +0 -201
|
@@ -1,201 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8" />
|
|
5
|
-
<title>Riemann</title>
|
|
6
|
-
<link rel="stylesheet" href="/css" type="text/css" />
|
|
7
|
-
|
|
8
|
-
</head>
|
|
9
|
-
<body>
|
|
10
|
-
<div id="toolbar"></div>
|
|
11
|
-
<div id="view"></div>
|
|
12
|
-
|
|
13
|
-
<script type="text/javascript" src="/underscore-min.js"></script>
|
|
14
|
-
<script type="text/javascript" src="/jquery-1.7.2.min.js"></script>
|
|
15
|
-
<script type="text/javascript" src="/jquery-ui-1.9.0.custom.min.js"></script>
|
|
16
|
-
<script type="text/javascript" src="/jquery.json-2.2.min.js"></script>
|
|
17
|
-
<script type="text/javascript" src="/jquery.simplemodal.1.4.3.min.js"></script>
|
|
18
|
-
<script type="text/javascript" src="/jquery.quickfit.js"></script>
|
|
19
|
-
<script type="text/javascript" src="/util.js"></script>
|
|
20
|
-
<script type="text/javascript" src="/mustache.js"></script>
|
|
21
|
-
<script src="http://d3js.org/d3.v2.js"></script>
|
|
22
|
-
<script type="text/javascript" src="/profile.js"></script>
|
|
23
|
-
<script type="text/javascript" src="/clock.js"></script>
|
|
24
|
-
<script type="text/javascript" src="/persistence.js"></script>
|
|
25
|
-
<script type="text/javascript" src="/keys.js"></script>
|
|
26
|
-
<script type="text/javascript" src="/subs.js"></script>
|
|
27
|
-
<script type="text/javascript" src="/format.js"></script>
|
|
28
|
-
<script type="text/javascript" src="/toolbar.js"></script>
|
|
29
|
-
<script type="text/javascript" src="/view.js"></script>
|
|
30
|
-
<script type="text/javascript" src="/views/title.js"></script>
|
|
31
|
-
<script type="text/javascript" src="/views/help.js"></script>
|
|
32
|
-
<script type="text/javascript" src="/views/gauge.js"></script>
|
|
33
|
-
<script type="text/javascript" src="/views/grid.js"></script>
|
|
34
|
-
<script type="text/javascript" src="/dash.js"></script>
|
|
35
|
-
|
|
36
|
-
<script type="text/javascript">
|
|
37
|
-
function logTable(container, query) {
|
|
38
|
-
var $container = $(container);
|
|
39
|
-
$container.addClass("log-table");
|
|
40
|
-
$container.append('<input type="text" class="query"></input>');
|
|
41
|
-
var prompt = $container.find('input');
|
|
42
|
-
$container.append('<div class="scroll"><table><thead><tr>' +
|
|
43
|
-
'<th>host</th>' +
|
|
44
|
-
'<th>service</th>' +
|
|
45
|
-
'<th>state</th>' +
|
|
46
|
-
'<th>metric</th>' +
|
|
47
|
-
'<th>description</th>' +
|
|
48
|
-
'</tr></thead><tbody></tbody></table></div>');
|
|
49
|
-
var scroll = $container.find('.scroll');
|
|
50
|
-
var log = $container.find('tbody');
|
|
51
|
-
var sub = null;
|
|
52
|
-
var tracking = true;
|
|
53
|
-
|
|
54
|
-
var template = "<tr><td>{{host}}</td><td>{{service}}</td><td>{{state}}</td><td>{{{metric}}}</td><td>{{description}}</td></tr>";
|
|
55
|
-
|
|
56
|
-
// Are we following the bottom of the log?
|
|
57
|
-
scroll.scroll(function(e) {
|
|
58
|
-
if (scroll.scrollTop() > (log.height() - scroll.height())) {
|
|
59
|
-
tracking = true;
|
|
60
|
-
} else {
|
|
61
|
-
tracking = false;
|
|
62
|
-
}
|
|
63
|
-
});
|
|
64
|
-
|
|
65
|
-
var scrollToBottom = function() {
|
|
66
|
-
scroll.stop().animate({
|
|
67
|
-
scrollTop: (log.height() - scroll.height() + 20)
|
|
68
|
-
}, 1000, "swing");
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
var atBottom = function() {
|
|
72
|
-
console.log(scroll.scrollTop());
|
|
73
|
-
console.log(log.height() - scroll.height());
|
|
74
|
-
return (scroll.scrollTop() > (log.height() - scroll.height()));
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
// Add an event
|
|
78
|
-
var append = function(e) {
|
|
79
|
-
$.extend(e, {
|
|
80
|
-
metric: format.metric(e)
|
|
81
|
-
});
|
|
82
|
-
log.append(Mustache.render(template, e));
|
|
83
|
-
if (tracking) { scrollToBottom() };
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
// Set up our query
|
|
87
|
-
var startQuery = function(query) {
|
|
88
|
-
// Cancel existing sub
|
|
89
|
-
if (sub != null) { sub.close(); }
|
|
90
|
-
|
|
91
|
-
// Subscribe
|
|
92
|
-
sub = subs.subscribe(query, function(e) {
|
|
93
|
-
e.time = d3.time.format.iso.parse(e.time);
|
|
94
|
-
clock.advance(e.time);
|
|
95
|
-
append(e);
|
|
96
|
-
});
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
// Initial subscription
|
|
100
|
-
if (query) { prompt[0].value = query; startQuery(query); }
|
|
101
|
-
|
|
102
|
-
// Prompt entry
|
|
103
|
-
prompt.change(function() { startQuery(this.value) });
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
function timeSeries(container) {
|
|
108
|
-
// Container
|
|
109
|
-
var $container = $(container);
|
|
110
|
-
var container = d3.select(container);
|
|
111
|
-
$container.append('<input type=\"text\" style="display: block"></input>');
|
|
112
|
-
var prompt = $container.children().last();
|
|
113
|
-
|
|
114
|
-
// Data structures
|
|
115
|
-
var data = [];
|
|
116
|
-
var n = 60;
|
|
117
|
-
var sub = null;
|
|
118
|
-
|
|
119
|
-
// Scale
|
|
120
|
-
var w = 20;
|
|
121
|
-
var h = 80;
|
|
122
|
-
|
|
123
|
-
var x = d3.time.scale()
|
|
124
|
-
.domain([0,1])
|
|
125
|
-
.range([0, w * n]);
|
|
126
|
-
var y = d3.scale.linear()
|
|
127
|
-
.domain([0,100])
|
|
128
|
-
.rangeRound([0,h]);
|
|
129
|
-
|
|
130
|
-
var updateTime = function(max) {
|
|
131
|
-
var min = d3.time.minute.offset(max, -1);
|
|
132
|
-
x.domain([min, max]);
|
|
133
|
-
}
|
|
134
|
-
updateTime(new Date());
|
|
135
|
-
|
|
136
|
-
// Chart itself
|
|
137
|
-
var chart = container.append("svg")
|
|
138
|
-
.attr("class", "timeSeries")
|
|
139
|
-
.attr("width", w * (n - 1))
|
|
140
|
-
.attr("height", h);
|
|
141
|
-
|
|
142
|
-
// Baseline
|
|
143
|
-
chart.append("line")
|
|
144
|
-
.attr("x1", 0)
|
|
145
|
-
.attr("x2", w * n)
|
|
146
|
-
.attr("y1", h - .5)
|
|
147
|
-
.attr("y2", h - .5)
|
|
148
|
-
.style("stroke", "#000");
|
|
149
|
-
|
|
150
|
-
// Subscribe
|
|
151
|
-
prompt.change(function() {
|
|
152
|
-
if (sub != null) { sub.close(); }
|
|
153
|
-
|
|
154
|
-
sub = subscribe(this.value, function(e) {
|
|
155
|
-
// Move time
|
|
156
|
-
e.time = d3.time.format.iso.parse(e.time);
|
|
157
|
-
clock.advance(e.time);
|
|
158
|
-
|
|
159
|
-
// Append to window
|
|
160
|
-
if (data.length >= n) {
|
|
161
|
-
data.shift();
|
|
162
|
-
}
|
|
163
|
-
data.push(e);
|
|
164
|
-
|
|
165
|
-
console.log(e.time, "maps to", x(e.time), "in", x.domain(), x.range());
|
|
166
|
-
});
|
|
167
|
-
});
|
|
168
|
-
|
|
169
|
-
var clockSub = clock.register(function(t) {
|
|
170
|
-
updateTime(t);
|
|
171
|
-
|
|
172
|
-
// Move events
|
|
173
|
-
var rect = chart.selectAll("rect")
|
|
174
|
-
.data(data, function(e) { if (e) { return e.time } });
|
|
175
|
-
|
|
176
|
-
rect.enter().insert("rect", "line")
|
|
177
|
-
.attr("x", function(e, i) {
|
|
178
|
-
return x(e.time) - .5; })
|
|
179
|
-
.attr("y", function(e) { return h - y(e.metric) - .5 })
|
|
180
|
-
.attr("width", w)
|
|
181
|
-
.attr("height", function(e) { return y(e.metric); })
|
|
182
|
-
.transition()
|
|
183
|
-
.duration(1000)
|
|
184
|
-
.attr("x", function(e, i) { return x(e.time) - .5 });
|
|
185
|
-
|
|
186
|
-
rect.transition()
|
|
187
|
-
.duration(1000)
|
|
188
|
-
.attr("x", function(e) { return x(e.time) - .5; });
|
|
189
|
-
|
|
190
|
-
rect.exit().transition()
|
|
191
|
-
.duration(1000)
|
|
192
|
-
.attr("x", function(e) { return x(e.time) - .5 })
|
|
193
|
-
.remove();
|
|
194
|
-
});
|
|
195
|
-
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
dash.reload();
|
|
199
|
-
</script>
|
|
200
|
-
</body>
|
|
201
|
-
</html>
|