riemann-dash 0.0.5 → 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (25) hide show
  1. data/README.markdown +1 -1
  2. data/lib/riemann/dash.rb +5 -2
  3. data/lib/riemann/dash/controller/websockets.rb +54 -0
  4. data/lib/riemann/dash/helper/renderer.rb +1 -1
  5. data/lib/riemann/dash/public/clock.js +45 -0
  6. data/lib/riemann/dash/public/dash.js +127 -0
  7. data/lib/riemann/dash/public/format.js +24 -0
  8. data/lib/riemann/dash/public/gauge.js +76 -0
  9. data/lib/riemann/dash/public/help.js +27 -0
  10. data/lib/riemann/dash/public/jquery-1.7.2.min.js +4 -0
  11. data/lib/riemann/dash/public/jquery.json-2.2.min.js +31 -0
  12. data/lib/riemann/dash/public/jquery.quickfit.js +144 -0
  13. data/lib/riemann/dash/public/jquery.simplemodal.1.4.3.min.js +26 -0
  14. data/lib/riemann/dash/public/keys.js +45 -0
  15. data/lib/riemann/dash/public/mustache.js +597 -0
  16. data/lib/riemann/dash/public/persistence.js +30 -0
  17. data/lib/riemann/dash/public/subs.js +28 -0
  18. data/lib/riemann/dash/public/title.js +33 -0
  19. data/lib/riemann/dash/public/view.js +684 -0
  20. data/lib/riemann/dash/public/x.png +0 -0
  21. data/lib/riemann/dash/rack/static.rb +3 -3
  22. data/lib/riemann/dash/version.rb +1 -1
  23. data/lib/riemann/dash/views/css.scss +172 -9
  24. data/lib/riemann/dash/views/websockets.erubis +196 -0
  25. metadata +22 -4
data/lib/riemann/dash/public/x.png ADDED
Binary file
data/lib/riemann/dash/rack/static.rb CHANGED
@@ -6,9 +6,9 @@ class Riemann::Dash::Static
6
6
  end
7
7
 
8
8
  def call(env)
9
- r = @file_server.call env
10
- if r[0] == 404
11
- @app.call env
9
+ r = @app.call env
10
+ if r[0] < 200 or 400 <= r[0]
11
+ @file_server.call env
12
12
  else
13
13
  r
14
14
  end
data/lib/riemann/dash/version.rb CHANGED
@@ -1,4 +1,4 @@
1
1
  module Riemann; end
2
2
  class Riemann::Dash
3
- VERSION = '0.0.5'
3
+ VERSION = '0.1.0'
4
4
  end
data/lib/riemann/dash/views/css.scss CHANGED
@@ -1,6 +1,24 @@
1
+ /* Colors! */
2
+ $bright-green: #2CFE40;
3
+ $dark-green: #059F00;
4
+ $fuschia: #FD47B7;
5
+ $purple: #7C2CFF;
6
+ $orange: #FF6513;
7
+ $amber: #FFC712;
8
+ $light-blue: #2CCCFE;
9
+ $blue: #2C55FF;
10
+ $dark-grey: #1F1F1F;
11
+ $green: #06FA23;
12
+ $yellow: #FEF206;
13
+
14
+ body {
15
+ background: #000;
16
+ color: #fff;
17
+ }
18
+
1
19
  html,table {
2
20
  font-family: Helvetica Nueue, Helvetica, sans;
3
- font-size: 8pt;
21
+ font-size: 12pt;
4
22
  }
5
23
  h1 {
6
24
  margin-bottom: 0.2em;
@@ -11,18 +29,76 @@ h2 {
11
29
  }
12
30
 
13
31
  .box {
14
- float: left;
15
- margin: 4px;
32
+ position: absolute;
33
+ height: auto;
34
+ width: auto;
35
+ top: 0;
36
+ bottom: 0;
37
+ left: 0;
38
+ right: 0;
39
+ margin: 3px;
40
+ padding: 3px;
41
+ background: $dark-grey;
42
+ border-radius: 3px;
16
43
  }
17
44
 
18
- .ok {
19
- background: #B8F1BC;
45
+ .state.ok, .bar.ok {
46
+ background: $green;
47
+ color: #000;
20
48
  }
21
- .warning {
22
- background: #F7D18E;
49
+ .state.warning, .bar.warning {
50
+ background: $amber;
51
+ color: #000;
52
+ }
53
+ .state.critical, .bar.critical {
54
+ background: $orange;
55
+ color: #000;
56
+ }
57
+
58
+ .view .query {
59
+ display: block;
60
+ position: absolute;
61
+ top: 0;
62
+ left: 0;
63
+ right: 0;
64
+ height: 16px;
65
+ margin: 0;
23
66
  }
24
- .critical {
25
- background: #FF3C43;
67
+
68
+ .scroll {
69
+ overflow-x: hidden;
70
+ overflow-y: scroll;
71
+ }
72
+
73
+ .log-table .scroll {
74
+ position: absolute;
75
+ top: 26px;
76
+ left: 0;
77
+ right: 0;
78
+ bottom: 0;
79
+ }
80
+
81
+ .log-table table {
82
+ width: 100%;
83
+ border-collapse: collapse;
84
+ }
85
+
86
+ .log-table thead {
87
+ text-align: left;
88
+ }
89
+
90
+ .log-table tbody {
91
+ }
92
+
93
+ .log-table td {
94
+ border-bottom: 1px solid #eee;
95
+ vertical-align: top;
96
+ padding: 3px;
97
+ white-space: pre;
98
+ }
99
+ .log-table td .bar {
100
+ margin: -3px;
101
+ padding: 3px;
26
102
  }
27
103
 
28
104
  .chart {
@@ -37,3 +113,90 @@ h2 {
37
113
  width: 1px;
38
114
  text-align: left;
39
115
  }
116
+
117
+ .timeSeries rect {
118
+ fill: #CA0000;
119
+ stroke: white;
120
+ }
121
+
122
+ #layout {
123
+ position: relative;
124
+ }
125
+
126
+ .view {
127
+ margin: 0;
128
+ padding: 0;
129
+ position: absolute;
130
+ top: 0;
131
+ left: 0;
132
+ height: 0;
133
+ width: 0;
134
+ overflow: hidden;
135
+ }
136
+
137
+ .focusOverlay {
138
+ position: absolute;
139
+ z-index: 1000;
140
+ border-radius: 5px;
141
+ background: rgba(255,251,180,0.5);
142
+ }
143
+
144
+ #simplemodal-overlay {
145
+ background-color:#000;
146
+ }
147
+ #simplemodal-container {
148
+ background-color:#fff;
149
+ color: #000;
150
+ padding:12px;
151
+ border-radius: 4px;
152
+ min-width: 400px;
153
+ min-height: 400px;
154
+ }
155
+ #simplemodal-container a.modalCloseImg {
156
+ background:url(/x.png) no-repeat; /* adjust url as required */
157
+ width:25px;
158
+ height:29px;
159
+ display:inline;
160
+ z-index:3200;
161
+ position:absolute;
162
+ top:-10px;
163
+ right:-10px;
164
+ cursor:pointer;
165
+ }
166
+
167
+
168
+ .quickfit {
169
+ display: block;
170
+ white-space: nowrap;
171
+ width: 100%;
172
+ }
173
+
174
+ .title {
175
+ text-align: right;
176
+ }
177
+
178
+ .gauge {
179
+ .title {
180
+ position: absolute;
181
+ height: 25%;
182
+ width: 75%;
183
+ bottom: 3px;
184
+ right: 3px;
185
+ text-align: right;
186
+ }
187
+
188
+ .value {
189
+ position: absolute;
190
+ height: 75%;
191
+ top: 0;
192
+ right: 0;
193
+ width: 100%;
194
+ text-align: right;
195
+ }
196
+
197
+ .metric {
198
+ font-weight: bolder;
199
+ text-align: right;
200
+ }
201
+ }
202
+
data/lib/riemann/dash/views/websockets.erubis ADDED
@@ -0,0 +1,196 @@
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="chart" class="view">
11
+ </div>
12
+
13
+ <script type="text/javascript" src="/jquery-1.7.2.min.js"></script>
14
+ <script type="text/javascript" src="/jquery.json-2.2.min.js"></script>
15
+ <script type="text/javascript" src="/jquery.simplemodal.1.4.3.min.js"></script>
16
+ <script type="text/javascript" src="/jquery.quickfit.js"></script>
17
+ <script type="text/javascript" src="/mustache.js"></script>
18
+ <script src="http://d3js.org/d3.v2.js"></script>
19
+ <script type="text/javascript" src="/clock.js"></script>
20
+ <script type="text/javascript" src="/persistence.js"></script>
21
+ <script type="text/javascript" src="/keys.js"></script>
22
+ <script type="text/javascript" src="/subs.js"></script>
23
+ <script type="text/javascript" src="/format.js"></script>
24
+ <script type="text/javascript" src="/view.js"></script>
25
+ <script type="text/javascript" src="/title.js"></script>
26
+ <script type="text/javascript" src="/help.js"></script>
27
+ <script type="text/javascript" src="/gauge.js"></script>
28
+ <script type="text/javascript" src="/dash.js"></script>
29
+
30
+
31
+ <script type="text/javascript">
32
+ function logTable(container, query) {
33
+ var $container = $(container);
34
+ $container.addClass("log-table");
35
+ $container.append('<input type="text" class="query"></input>');
36
+ var prompt = $container.find('input');
37
+ $container.append('<div class="scroll"><table><thead><tr>' +
38
+ '<th>host</th>' +
39
+ '<th>service</th>' +
40
+ '<th>state</th>' +
41
+ '<th>metric</th>' +
42
+ '<th>description</th>' +
43
+ '</tr></thead><tbody></tbody></table></div>');
44
+ var scroll = $container.find('.scroll');
45
+ var log = $container.find('tbody');
46
+ var sub = null;
47
+ var tracking = true;
48
+
49
+ var template = "<tr><td>{{host}}</td><td>{{service}}</td><td>{{state}}</td><td>{{{metric}}}</td><td>{{description}}</td></tr>";
50
+
51
+ // Are we following the bottom of the log?
52
+ scroll.scroll(function(e) {
53
+ if (scroll.scrollTop() > (log.height() - scroll.height())) {
54
+ tracking = true;
55
+ } else {
56
+ tracking = false;
57
+ }
58
+ });
59
+
60
+ var scrollToBottom = function() {
61
+ scroll.stop().animate({
62
+ scrollTop: (log.height() - scroll.height() + 20)
63
+ }, 1000, "swing");
64
+ }
65
+
66
+ var atBottom = function() {
67
+ console.log(scroll.scrollTop());
68
+ console.log(log.height() - scroll.height());
69
+ return (scroll.scrollTop() > (log.height() - scroll.height()));
70
+ }
71
+
72
+ // Add an event
73
+ var append = function(e) {
74
+ $.extend(e, {
75
+ metric: format.metric(e)
76
+ });
77
+ log.append(Mustache.render(template, e));
78
+ if (tracking) { scrollToBottom() };
79
+ }
80
+
81
+ // Set up our query
82
+ var startQuery = function(query) {
83
+ // Cancel existing sub
84
+ if (sub != null) { sub.close(); }
85
+
86
+ // Subscribe
87
+ sub = subs.subscribe(query, function(e) {
88
+ e.time = d3.time.format.iso.parse(e.time);
89
+ clock.advance(e.time);
90
+ append(e);
91
+ });
92
+ }
93
+
94
+ // Initial subscription
95
+ if (query) { prompt[0].value = query; startQuery(query); }
96
+
97
+ // Prompt entry
98
+ prompt.change(function() { startQuery(this.value) });
99
+ }
100
+
101
+
102
+ function timeSeries(container) {
103
+ // Container
104
+ var $container = $(container);
105
+ var container = d3.select(container);
106
+ $container.append('<input type=\"text\" style="display: block"></input>');
107
+ var prompt = $container.children().last();
108
+
109
+ // Data structures
110
+ var data = [];
111
+ var n = 60;
112
+ var sub = null;
113
+
114
+ // Scale
115
+ var w = 20;
116
+ var h = 80;
117
+
118
+ var x = d3.time.scale()
119
+ .domain([0,1])
120
+ .range([0, w * n]);
121
+ var y = d3.scale.linear()
122
+ .domain([0,100])
123
+ .rangeRound([0,h]);
124
+
125
+ var updateTime = function(max) {
126
+ var min = d3.time.minute.offset(max, -1);
127
+ x.domain([min, max]);
128
+ }
129
+ updateTime(new Date());
130
+
131
+ // Chart itself
132
+ var chart = container.append("svg")
133
+ .attr("class", "timeSeries")
134
+ .attr("width", w * (n - 1))
135
+ .attr("height", h);
136
+
137
+ // Baseline
138
+ chart.append("line")
139
+ .attr("x1", 0)
140
+ .attr("x2", w * n)
141
+ .attr("y1", h - .5)
142
+ .attr("y2", h - .5)
143
+ .style("stroke", "#000");
144
+
145
+ // Subscribe
146
+ prompt.change(function() {
147
+ if (sub != null) { sub.close(); }
148
+
149
+ sub = subscribe(this.value, function(e) {
150
+ // Move time
151
+ e.time = d3.time.format.iso.parse(e.time);
152
+ clock.advance(e.time);
153
+
154
+ // Append to window
155
+ if (data.length >= n) {
156
+ data.shift();
157
+ }
158
+ data.push(e);
159
+
160
+ console.log(e.time, "maps to", x(e.time), "in", x.domain(), x.range());
161
+ });
162
+ });
163
+
164
+ var clockSub = clock.register(function(t) {
165
+ updateTime(t);
166
+
167
+ // Move events
168
+ var rect = chart.selectAll("rect")
169
+ .data(data, function(e) { if (e) { return e.time } });
170
+
171
+ rect.enter().insert("rect", "line")
172
+ .attr("x", function(e, i) {
173
+ return x(e.time) - .5; })
174
+ .attr("y", function(e) { return h - y(e.metric) - .5 })
175
+ .attr("width", w)
176
+ .attr("height", function(e) { return y(e.metric); })
177
+ .transition()
178
+ .duration(1000)
179
+ .attr("x", function(e, i) { return x(e.time) - .5 });
180
+
181
+ rect.transition()
182
+ .duration(1000)
183
+ .attr("x", function(e) { return x(e.time) - .5; });
184
+
185
+ rect.exit().transition()
186
+ .duration(1000)
187
+ .attr("x", function(e) { return x(e.time) - .5 })
188
+ .remove();
189
+ });
190
+
191
+ }
192
+
193
+ dash.reload();
194
+ </script>
195
+ </body>
196
+ </html>
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.0.5
4
+ version: 0.1.0
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: 2012-04-17 00:00:00.000000000 Z
12
+ date: 2012-10-06 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: riemann-client
@@ -18,7 +18,7 @@ dependencies:
18
18
  requirements:
19
19
  - - ! '>='
20
20
  - !ruby/object:Gem::Version
21
- version: 0.0.3
21
+ version: 0.0.7
22
22
  type: :runtime
23
23
  prerelease: false
24
24
  version_requirements: !ruby/object:Gem::Requirement
@@ -26,7 +26,7 @@ dependencies:
26
26
  requirements:
27
27
  - - ! '>='
28
28
  - !ruby/object:Gem::Version
29
- version: 0.0.3
29
+ version: 0.0.7
30
30
  - !ruby/object:Gem::Dependency
31
31
  name: erubis
32
32
  requirement: !ruby/object:Gem::Requirement
@@ -100,11 +100,29 @@ extra_rdoc_files: []
100
100
  files:
101
101
  - lib/riemann/dash.rb
102
102
  - lib/riemann/dash/version.rb
103
+ - lib/riemann/dash/public/help.js
104
+ - lib/riemann/dash/public/keys.js
105
+ - lib/riemann/dash/public/subs.js
106
+ - lib/riemann/dash/public/title.js
107
+ - lib/riemann/dash/public/jquery-1.7.2.min.js
108
+ - lib/riemann/dash/public/x.png
109
+ - lib/riemann/dash/public/jquery.quickfit.js
110
+ - lib/riemann/dash/public/view.js
111
+ - lib/riemann/dash/public/jquery.simplemodal.1.4.3.min.js
112
+ - lib/riemann/dash/public/dash.js
113
+ - lib/riemann/dash/public/gauge.js
114
+ - lib/riemann/dash/public/format.js
115
+ - lib/riemann/dash/public/mustache.js
116
+ - lib/riemann/dash/public/persistence.js
117
+ - lib/riemann/dash/public/clock.js
118
+ - lib/riemann/dash/public/jquery.json-2.2.min.js
103
119
  - lib/riemann/dash/controller/css.rb
104
120
  - lib/riemann/dash/controller/index.rb
121
+ - lib/riemann/dash/controller/websockets.rb
105
122
  - lib/riemann/dash/views/layout.erubis
106
123
  - lib/riemann/dash/views/index.erubis
107
124
  - lib/riemann/dash/views/css.scss
125
+ - lib/riemann/dash/views/websockets.erubis
108
126
  - lib/riemann/dash/helper/renderer.rb
109
127
  - lib/riemann/dash/rack/static.rb
110
128
  - bin/riemann-dash