Skip to content

Commit c65f21d

Browse files
amdprophetamdprophet
committed
clients are displayed
1 parent d000426 commit c65f21d

8 files changed

+103
-136
lines changed

‎public/js/functions.js

+31-9
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,12 @@ function capitaliseFirstLetter(string) {
1010
return newStr;
1111
}
1212

13+
function sortEvents(a,b) {
14+
return a - b;
15+
}
16+
1317
function fetchAlerts() {
14-
$.getJSON('/events', function(data) {
18+
$.getJSON('/events.json', function(data) {
1519

1620
m_events = new Array();
1721

@@ -38,6 +42,8 @@ function fetchAlerts() {
3842
}
3943
}
4044

45+
m_events.sort(sortEvents);
46+
4147
for (status in m_events) {
4248
for (a in m_events[status]) {
4349
var m_event = m_events[status][a];
@@ -49,7 +55,7 @@ function fetchAlerts() {
4955
$('div#event_details_modal > div#event_data').empty();
5056
$('div#event_details_modal > div#client_data').empty();
5157
$('#eventDetailsRowTemplate').tmpl(m_event).appendTo('div#event_details_modal > div#event_data');
52-
$.getJSON('/client/'+m_event['client'], function(clientdata) {
58+
$.getJSON('/client/'+m_event['client']+'.json', function(clientdata) {
5359
$('#clientDetailsRowTemplate').tmpl(clientdata).appendTo('div#event_details_modal > div#client_data');
5460
$('div#event_details_modal > div#client_data > h1').click(function() {
5561
$(this).select();
@@ -61,18 +67,34 @@ function fetchAlerts() {
6167

6268
$('tr[rel*=leanModal]').leanModal({ top : 50 });
6369

70+
var row_count = $('table#alerts > tbody > tr').length;
71+
$('span#alert_count').html(row_count);
72+
6473
});
6574
}
6675

67-
/* trigger when page is ready */
68-
$(document).ready(function () {
76+
function fetchClients() {
77+
$.getJSON('/clients.json', function(data) {
6978

70-
fetchAlerts();
79+
m_clients = new Array();
7180

72-
ws = new WebSocket("ws://" + location.hostname + ":9000");
73-
ws.onmessage = function(evt) {
74-
fetchAlerts();
75-
}
81+
$('table#clients > tbody').empty();
82+
83+
for (var clientkey in data) {
84+
var client = data[clientkey];
85+
client['subscriptions'] = client['subscriptions'].join(', ');
86+
m_clients.push(client);
87+
}
88+
89+
$('#clientTemplate').tmpl(m_clients).prependTo('table#clients > tbody');
90+
91+
var row_count = $('table#clients > tbody > tr').length;
92+
$('span#client_count').html(row_count);
93+
});
94+
}
95+
96+
/* trigger when page is ready */
97+
$(document).ready(function () {
7698

7799
// TODO: fix clipboard support
78100
/*$('div#event_details_modal > div.alert_detail_group > div.copy').click(function() {

‎sa-dashboard

+10-4
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,19 @@ EventMachine.run do
2525
body erb :index
2626
end
2727

28+
aget '/clients' do
29+
content_type 'text/html'
30+
@js = erb :client_templates, :layout => false
31+
body erb :clients
32+
end
33+
2834
aget '/css/sonian.css' do
2935
content_type 'text/css'
3036
body sass :sonian
3137
end
3238

3339
# api proxy
34-
aget '/events' do
40+
aget '/events.json' do
3541
begin
3642
http = EventMachine::HttpRequest.new("#{api_server}/events").get
3743
rescue => e
@@ -50,7 +56,7 @@ EventMachine.run do
5056
end
5157
end
5258

53-
aget '/clients' do
59+
aget '/clients.json' do
5460
begin
5561
http = EventMachine::HttpRequest.new("#{api_server}/clients").get
5662
rescue => e
@@ -69,7 +75,7 @@ EventMachine.run do
6975
end
7076
end
7177

72-
aget '/client/:id' do |id|
78+
aget '/client/:id.json' do |id|
7379
begin
7480
http = EventMachine::HttpRequest.new("#{api_server}/client/#{id}").get
7581
rescue => e
@@ -107,7 +113,7 @@ EventMachine.run do
107113
puts 'updated clients'
108114
end
109115

110-
apost '/events' do
116+
apost '/events.json' do
111117
#if secret == params[:secret]
112118
if true
113119
unless websocket_connections.empty?

‎views/client_templates.erb

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!-- Client template -->
2+
<script id="clientTemplate" type="text/x-jquery-tmpl">
3+
<tr id="${name}">
4+
<td>${name}</td><td>${address}</td><td>${timestamp}</td><td>${environment}</td><td>${subscriptions}</td>
5+
</tr>
6+
</script>
7+
8+
<script type="text/javascript">
9+
fetchClients();
10+
11+
ws = new WebSocket("ws://" + location.hostname + ":9000");
12+
ws.onmessage = function(evt) {
13+
fetchClients();
14+
}
15+
</script>

‎views/clients.erb

+13-114
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,19 @@
1-
<!doctype html>
1+
<h1>Current Clients <span class="clients_count">(<span id="client_count">0</span>)</span></h1>
22

3-
<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
4-
<!--[if IE 7 ]> <html class="ie ie7 no-js" lang="en"> <![endif]-->
5-
<!--[if IE 8 ]> <html class="ie ie8 no-js" lang="en"> <![endif]-->
6-
<!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]-->
7-
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
8-
<!-- the "no-js" class is for Modernizr. -->
3+
<table id="clients">
94

10-
<head id="monitoring-sa2s-us" data-template-set="html5-reset">
5+
<thead>
116

12-
<meta charset="utf-8">
7+
<tr>
8+
<td class="col_clients">Client</td>
9+
<td class="col_checks">Public IP</td>
10+
<td class="col_status">Timestamp</td>
11+
<td class="col_output">Environment</td>
12+
<td class="col_output">Subscriptions</td>
13+
</tr>
1314

14-
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
15-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
15+
</thead>
1616

17-
<title>Sonian Monitoring Dashboard</title>
17+
<tbody></tbody>
1818

19-
<meta name="author" content="Justin Kolberg">
20-
<meta name="Copyright" content="Copyright Sonian, Inc. 2011. All Rights Reserved.">
21-
22-
<!-- Mobile Viewport Fix
23-
j.mp/mobileviewport & davidbcalhoun.com/2010/viewport-metatag
24-
device-width : Occupy full width of the screen in its current orientation
25-
initial-scale = 1.0 retains dimensions instead of zooming out if page height > device height
26-
maximum-scale = 1.0 retains dimensions instead of zooming in if page width < device width
27-
-->
28-
<!-- Uncomment to use; use thoughtfully!
29-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
30-
-->
31-
32-
<!--<link rel="shortcut icon" href="img/favicon.ico">-->
33-
<!-- This is the traditional favicon.
34-
- size: 16x16 or 32x32
35-
- transparency is OK
36-
- see wikipedia for info on browser support: http://mky.be/favicon/ -->
37-
38-
<!--<link rel="apple-touch-icon" href="img/apple-touch-icon.png">-->
39-
<!-- The is the icon for iOS's Web Clip.
40-
- size: 57x57 for older iPhones, 72x72 for iPads, 114x114 for iPhone4's retina display (IMHO, just go ahead and use the biggest one)
41-
- To prevent iOS from applying its styles to the icon name it thusly: apple-touch-icon-precomposed.png
42-
- Transparency is not recommended (iOS will put a black BG behind the icon) -->
43-
44-
<!-- CSS: screen, mobile & print are all in the same file -->
45-
<link rel="stylesheet" href="css/style.css">
46-
<link rel="stylesheet" href="css/sonian.css">
47-
48-
<!-- all our JS is at the bottom of the page, except for Modernizr. -->
49-
<script src="js/modernizr-1.7.min.js"></script>
50-
51-
</head>
52-
53-
<body>
54-
55-
<div class="wrapper"><!-- not needed? up to you: http://camendesign.com/code/developpeurs_sans_frontieres -->
56-
57-
<header>
58-
59-
<h1><a href="/">Sonian Monitoring Dashboard</a></h1>
60-
61-
<nav>
62-
63-
<ol>
64-
<li><a href="/clients">Clients</a></li>
65-
<li><a href="/alerts">Current Alerts</a></li>
66-
</ol>
67-
68-
</nav>
69-
70-
<div style="clear: both;"></div>
71-
72-
</header>
73-
74-
<section id="main_content">
75-
76-
<h1>Current Clients <span class="clients_count">(<span id="client_count">0</span>)</span></h1>
77-
78-
<table id="clients">
79-
80-
<thead>
81-
82-
<tr><td>Client</td><td>Address</td><td>Subscriptions</td><td>Timestamp</td></tr>
83-
84-
</thead>
85-
86-
<tbody></tbody>
87-
88-
</table>
89-
90-
</section>
91-
92-
<footer>
93-
94-
<p><small>&copy; Copyright <a href="http://www.sonian.com">Sonian, Inc.</a> 2011. All Rights Reserved.</small></p>
95-
96-
</footer>
97-
98-
</div>
99-
100-
<!-- here comes the javascript -->
101-
102-
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
103-
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
104-
<script>window.jQuery || document.write("<script src='js/jquery-1.5.1.min.js'>\x3C/script>")</script>
105-
106-
<!-- jQuery templates -->
107-
<script src="js/jquery.tmpl.min.js"></script>
108-
109-
<!-- this is where we put our custom functions -->
110-
<script src="js/client_functions.js"></script>
111-
112-
<!-- Client template -->
113-
<script id="clientTemplate" type="text/x-jquery-tmpl">
114-
<tr>
115-
<td>${client}</td><td>${address}</td><td>${subscriptions}</td><td>${timestamp}</td>
116-
</tr>
117-
</script>
118-
119-
</body>
120-
</html>
19+
</table>

‎views/event_templates.erb

+9
Original file line numberDiff line numberDiff line change
@@ -54,3 +54,12 @@
5454
</div>
5555
{{/each}}
5656
</script>
57+
58+
<script type="text/javascript">
59+
fetchAlerts();
60+
61+
ws = new WebSocket("ws://" + location.hostname + ":9000");
62+
ws.onmessage = function(evt) {
63+
fetchAlerts();
64+
}
65+
</script>

‎views/index.erb

+6-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,12 @@
44

55
<thead>
66

7-
<tr><td>Client</td><td>Check</td><td>Status</td><td>Output</td></tr>
7+
<tr>
8+
<td class="col_clients">Client</td>
9+
<td class="col_checks">Check</td>
10+
<td class="col_status">Status</td>
11+
<td class="col_output">Output</td>
12+
</tr>
813

914
</thead>
1015

‎views/layout.erb

+2-2
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,8 @@
6161
<nav>
6262

6363
<ol>
64-
<li><a href="">Clients</a></li>
65-
<li><a href="">Current Alerts</a></li>
64+
<li><a href="/clients">Clients</a></li>
65+
<li><a href="/">Current Alerts</a></li>
6666
</ol>
6767

6868
</nav>

‎views/sonian.sass

+17-6
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,12 @@ section#main_content
6767
font-weight: 600
6868
font-size: 14px
6969
text-shadow: 0 1px 0 white
70+
&.col_clients
71+
width: 100px
72+
&.col_checks
73+
width: 150px
74+
&.col_status
75+
width: 80px
7076
tbody tr
7177
background-color: #fff
7278
cursor: pointer
@@ -94,12 +100,17 @@ section#main_content
94100
border-top: 1px solid #880000
95101
td
96102
padding: 7px
97-
&.client_col
98-
width: 100px
99-
&.check_col
100-
width: 150px
101-
&.status_col
102-
width: 80px
103+
table#clients
104+
tbody
105+
tr:first-child
106+
border-top: 1px solid #ccc
107+
tr
108+
border-bottom: 1px solid #ccc
109+
tr:hover
110+
background-color: #992222
111+
color: #fff
112+
border-bottom: 1px solid #880000
113+
border-top: 1px solid #880000
103114
div.alert_details_modal
104115
background-color: white
105116
width: 600px

0 commit comments

Comments
 (0)