sensu-dashboard-sonian 0.9.3

data/lib/sensu-dashboard/version.rb

@@ -0,0 +1,5 @@
+module Sensu
+  module Dashboard
+    VERSION = "0.9.3"
+  end
+end

data/lib/sensu-dashboard/views/client_templates.erb

@@ -0,0 +1,68 @@
+<!-- Client template -->
+<script id="clientTemplate" type="text/x-jquery-tmpl">
+  <tr id="${name}" rel="leanModal" href="#event_details_modal">
+    <td id="client_id">${name}</td>
+    <td id="environment">${environment}</td>
+    <td id="public_ip">${address}</td>
+    <td id="timestamp">${timestamp}</td>
+    <td id="subscriptions">${subscriptions}</td>
+  </tr>
+</script>
+
+<!-- Client details row template  -->
+<script id="clientDetailsRowTemplate" type="text/x-jquery-tmpl">
+{{each $data}}
+<div class="event_detail_group">
+  <div class="event_detail">
+    <h1>${capitaliseFirstLetter($index)}</h1>
+    <p id="${$index}">${$value}</p>
+  </div>
+  <!--<div class="copy">Copy</div>-->
+  <div style="clear: both;"></div>
+</div>
+{{/each}}
+</script>
+
+<script type="text/javascript">
+fetchClients();
+
+ws = new WebSocket("ws://" + location.hostname + ":9000");
+ws.onmessage = function(evt) {
+  fetchClients();
+}
+
+$("#remove_client").click(function() {
+  var client = $("#name").html();
+  var cross_img = $("#remove_client").children().first();
+  cross_img.attr("src", "/img/loading_circle.gif");
+  $.ajax({
+    type: 'DELETE',
+    contentType: 'application/json',
+    url: '/client/'+client+'.json',
+    success: function(data, textStatus, xhr) {
+      alert('Client '+client+' is being removed, resolving events...');
+	    cross_img.attr("src", "/img/cross.png");
+      $("#lean_overlay").fadeOut(200);
+      $("#event_details_modal").css({'display':'none'});
+      fetchClients();
+    },
+    error: function(xhr, textStatus, errorThrown) {
+      cross_img.attr("src", "/img/cross.png");
+      alert('Client was not found in sensu. This may be due to a delay in a previous removal attempt.');
+    }
+  });
+});
+
+$("input[type=text]").autoSuggest("http://" + location.hostname + ":" + location.port + "/clients/autocomplete.json", {
+  startText: "Enter keywords to filter by",
+  selectedItemProp: "name",
+  searchObjProps: "name",
+  selectionAdded: function(elem) {
+    fetchClients();
+  },
+  selectionRemoved: function(elem) {
+    elem.fadeTo("fast", 0, function() { elem.remove(); });
+    fetchClients();
+  }
+});
+</script>

data/lib/sensu-dashboard/views/clients.erb

@@ -0,0 +1,37 @@
+<h1>Current Clients <span class="clients_count">(<span id="client_count">0</span>)</span></h1>
+
+<input type="text" id="autosuggest_filter" style="width: 300px;"/>
+
+<table id="clients">
+
+    <thead>
+
+      <tr>
+        <th class="col_clients">Client</th>
+        <th class="col_environment">Environment</th>
+        <th class="col_public_ip">Public IP</th>
+        <th class="col_timestamp">Timestamp</th>
+        <th class="col_output">Subscriptions</th>
+      </tr>
+
+    </thead>
+
+    <tbody></tbody>
+
+</table>
+
+<div id="event_details_modal" class="event_details_modal">
+  <h1 class="section_title">Actions</h1>
+  <div id="event_actions">
+    <div class="event_detail_group">
+      <div class="event_detail">
+        <div id="remove_client" class="action_btn" style="margin-right: 7px;">
+          <img src="/img/cross.png" style="vertical-align: middle; padding-right: 7px;"/><strong>Remove</strong>
+        </div>
+      </div>
+      <div style="clear: both;"></div>
+    </div>
+  </div>
+  <h1 class="section_title">Client Data</h1>
+  <div id="client_data"></div>
+</div>

data/lib/sensu-dashboard/views/event_templates.erb

@@ -0,0 +1,190 @@
+<!-- Event template -->
+<script id="eventTemplate" type="text/x-jquery-tmpl">
+  {{if is_unknown}}
+  <tr class="status3" id="${identifier}" rel="leanModal" href="#event_details_modal">
+  {{else}}
+  <tr class="status${status}" id="${identifier}" rel="leanModal" href="#event_details_modal">
+  {{/if}}
+    <td id="client">${client}</td>
+    <td id="check">${check}</td>
+    <td id="environment">${environment}</td>
+    <td id="output">${output}</td>
+  </tr>
+</script>
+
+<!-- Event details row template  -->
+<script id="eventDetailsRowTemplate" type="text/x-jquery-tmpl">
+<div class="event_detail_group">
+  <div class="event_detail">
+    <h1>Client</h1>
+    <p id="client_id_value">${client}</p>
+  </div>
+  <!--<div class="copy">Copy</div>-->
+  <div style="clear: both;"></div>
+</div>
+<div class="event_detail_group">
+  <div class="event_detail">
+    <h1>Check</h1>
+    <p id="check_name_value">${check}</p>
+  </div>
+  <!--<div class="copy">Copy</div>-->
+  <div style="clear: both;"></div>
+</div>
+<div class="event_detail_group">
+  <div class="event_detail">
+    <h1>Status</h1>
+    <p>${status}</p>
+  </div>
+  <!--<div class="copy">Copy</div>-->
+  <div style="clear: both;"></div>
+</div>
+<div class="event_detail_group">
+  <div class="event_detail">
+    <h1>Output</h1>
+    <p>${output}</p>
+  </div>
+  <!--<div class="copy">Copy</div>-->
+  <div style="clear: both;"></div>
+</div>
+<div class="event_detail_group">
+  <div class="event_detail">
+    <h1>Occurrences</h1>
+    <p>${occurrences}</p>
+  </div>
+  <!--<div class="copy">Copy</div>-->
+  <div style="clear: both;"></div>
+</div>
+</script>
+
+<!-- Client details row template  -->
+<script id="clientDetailsRowTemplate" type="text/x-jquery-tmpl">
+{{each $data}}
+<div class="event_detail_group">
+  <div class="event_detail">
+    <h1>${capitaliseFirstLetter($index)}</h1>
+    <p>${$value}</p>
+  </div>
+  <!--<div class="copy">Copy</div>-->
+  <div style="clear: both;"></div>
+</div>
+{{/each}}
+</script>
+
+<script type="text/javascript">
+fetchEvents();
+
+ws = new WebSocket("ws://" + location.hostname + ":9000");
+ws.onmessage = function(evt) {
+  fetchEvents();
+}
+
+$("#disable_client_alerts").click(function() {
+  var client_id = $("#client_id_value").html();
+  var alert_img = $("#disable_client_alerts").children().first();
+
+  if(alert_img.attr("src") == "/img/megaphone_icon_off.png") {
+    alert_img.attr("src", "/img/loading_circle.gif");
+    $.ajax({
+      type: 'DELETE',
+      contentType: 'application/json',
+      url: '/stash/silence/'+client_id+'.json',
+      success: function(data, textStatus, xhr) {
+        alert_img.attr("src", "/img/megaphone_icon.png");
+      },
+      error: function(xhr, textStatus, errorThrown) {
+        if(xhr.status == 404) {
+          alert_img.attr("src", "/img/megaphone_icon_off.png");
+        }
+      },
+      dataType: 'json'
+    });
+  } else if(alert_img.attr("src") == "/img/megaphone_icon.png") {
+    alert_img.attr("src", "/img/loading_circle.gif");
+    $.ajax({
+      type: 'POST',
+      contentType: 'application/json',
+      url: '/stash/silence/'+client_id+'.json',
+      success: function(data, textStatus, xhr) {
+        alert_img.attr("src", "/img/megaphone_icon_off.png");
+      },
+      error: function(xhr, textStatus, errorThrown) {
+      },
+      dataType: 'json'
+    });
+  }
+});
+
+$("#disable_client_check_alerts").click(function() {
+  var client_id = $("#client_id_value").html();
+  var check_name = $("#check_name_value").html();
+  var alert_img = $("#disable_client_check_alerts").children().first();
+
+  if(alert_img.attr("src") == "/img/megaphone_icon_off.png") {
+    alert_img.attr("src", "/img/loading_circle.gif");
+    $.ajax({
+      type: 'DELETE',
+      contentType: 'application/json',
+      url: '/stash/silence/'+client_id+'/'+check_name+'.json',
+      success: function(data, textStatus, xhr) {
+        alert_img.attr("src", "/img/megaphone_icon.png");
+      },
+      error: function(xhr, textStatus, errorThrown) {
+        if(xhr.status == 404) {
+          alert_img.attr("src", "/img/megaphone_icon_off.png");
+        }
+      },
+      dataType: 'json'
+    });
+  } else if(alert_img.attr("src") == "/img/megaphone_icon.png") {
+    alert_img.attr("src", "/img/loading_circle.gif");
+    $.ajax({
+      type: 'POST',
+      contentType: 'application/json',
+      url: '/stash/silence/'+client_id+'/'+check_name+'.json',
+      success: function(data, textStatus, xhr) {
+        alert_img.attr("src", "/img/megaphone_icon_off.png");
+      },
+      error: function(xhr, textStatus, errorThrown) {
+      },
+      dataType: 'json'
+    });
+  }
+});
+
+$("#resolve_event").click(function() {
+  var client = $("#client_id_value").html();
+  var check = $("#check_name_value").html();
+  $.ajax({
+    type: 'POST',
+    contentType: 'application/json',
+    url: '/event/resolve.json',
+    data: JSON.stringify({"client":client, "check":check}),
+    success: function(data, textStatus, xhr) {
+      $("#lean_overlay").fadeOut(200);
+      $("#event_details_modal").css({'display':'none'});
+      fetchEvents();
+    },
+    error: function(xhr, textStatus, errorThrown) {
+      alert('Failed to resolve event');
+    }
+  });
+});
+
+$("input[type=text]").autoSuggest("http://" + location.hostname + ":" + location.port + "/autocomplete.json", {
+  startText: "Enter keywords to filter by",
+  selectedItemProp: "name",
+  searchObjProps: "name",
+  selectionAdded: function(elem) {
+    fetchEvents();
+  },
+  selectionRemoved: function(elem) {
+    elem.fadeTo("fast", 0, function() { elem.remove(); });
+    fetchEvents();
+  }
+});
+
+$('#filter_unknown_checks').change(function() {
+  filter_unknown_checks = !filter_unknown_checks;
+  fetchEvents();
+});
+</script>

data/lib/sensu-dashboard/views/index.erb

@@ -0,0 +1,48 @@
+<h1>Current Events <span class="events_count">(<span id="event_count">0</span>)</span></h1>
+
+<div style="padding-bottom: 7px;">
+<input type="checkbox" checked="checked" id="filter_unknown_checks" style="margin-right: 7px;"/>Filter Unknown Checks
+</div>
+
+<input type="text" id="autosuggest_client_filter" style="width: 300px;"/>
+
+<table id="events">
+
+    <thead>
+
+      <tr>
+        <th class="col_clients">Client</th>
+        <th class="col_checks">Check</th>
+        <th class="col_environment">Environment</th>
+        <th class="col_output">Output</th>
+      </tr>
+
+    </thead>
+
+    <tbody></tbody>
+
+</table>
+
+<div id="event_details_modal" class="event_details_modal">
+  <h1 class="section_title">Actions</h1>
+  <div id="event_actions">
+    <div class="event_detail_group">
+      <div class="event_detail">
+        <div id="disable_client_alerts" class="action_btn" style="margin-right: 7px;">
+          <img src="/img/loading_circle.gif" style="vertical-align: middle; padding-right: 7px;"/><strong>Client</strong>
+        </div>
+        <div id="disable_client_check_alerts" class="action_btn" style="margin-right: 7px;">
+          <img src="/img/loading_circle.gif" style="vertical-align: middle; padding-right: 7px;"/><strong>Check</strong>
+        </div>
+        <div id="resolve_event" class="action_btn" style="margin-right: 7px;">
+          <img src="/img/cross.png" style="vertical-align: middle; padding-right: 7px;"/><strong>Resolve</strong>
+        </div>
+      </div>
+      <div style="clear: both;"></div>
+    </div>
+  </div>
+  <h1 class="section_title">Event Data</h1>
+  <div id="event_data"></div>
+  <h1 class="section_title">Client Data</h1>
+  <div id="client_data"></div>
+</div>

data/lib/sensu-dashboard/views/layout.erb

@@ -0,0 +1,124 @@
+<!doctype html>
+
+<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
+<!--[if IE 7 ]>    <html class="ie ie7 no-js" lang="en"> <![endif]-->
+<!--[if IE 8 ]>    <html class="ie ie8 no-js" lang="en"> <![endif]-->
+<!--[if IE 9 ]>    <html class="ie ie9 no-js" lang="en"> <![endif]-->
+<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
+<!-- the "no-js" class is for Modernizr. -->
+
+<head id="www-sitename-com" data-template-set="html5-reset">
+
+	<meta charset="utf-8">
+
+	<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+	<title>Sensu Dashboard</title>
+
+	<meta name="author" content="Justin Kolberg">
+	<meta name="Copyright" content="Copyright Sonian, Inc. 2011. MIT License.">
+
+	<!--  Mobile Viewport Fix
+	j.mp/mobileviewport & davidbcalhoun.com/2010/viewport-metatag
+	device-width : Occupy full width of the screen in its current orientation
+	initial-scale = 1.0 retains dimensions instead of zooming out if page height > device height
+	maximum-scale = 1.0 retains dimensions instead of zooming in if page width < device width
+	-->
+	<!-- Uncomment to use; use thoughtfully!
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+	-->
+
+	<!--<link rel="shortcut icon" href="img/favicon.ico">-->
+	<!-- This is the traditional favicon.
+		 - size: 16x16 or 32x32
+		 - transparency is OK
+		 - see wikipedia for info on browser support: http://mky.be/favicon/ -->
+
+	<!--<link rel="apple-touch-icon" href="img/apple-touch-icon.png">-->
+	<!-- The is the icon for iOS's Web Clip.
+		 - size: 57x57 for older iPhones, 72x72 for iPads, 114x114 for iPhone4's retina display (IMHO, just go ahead and use the biggest one)
+		 - To prevent iOS from applying its styles to the icon name it thusly: apple-touch-icon-precomposed.png
+		 - Transparency is not recommended (iOS will put a black BG behind the icon) -->
+
+	<!-- CSS: screen, mobile & print are all in the same file -->
+	<link rel="stylesheet" href="css/style.css">
+	<link rel="stylesheet" href="css/sonian.css">
+        <link rel="stylesheet" href="css/autoSuggest.css">
+
+	<!-- all our JS is at the bottom of the page, except for Modernizr. -->
+	<script src="js/modernizr-1.7.min.js"></script>
+
+</head>
+
+<body>
+
+<div class="wrapper"><!-- not needed? up to you: http://camendesign.com/code/developpeurs_sans_frontieres -->
+
+	<header>
+
+		<h1><a href="/">Sensu Dashboard</a></h1>
+
+		<nav>
+
+			<ol>
+				<li><a href="/clients">Clients</a></li>
+                                <li><a href="/stashes">Stashes</a></li>
+				<li><a href="/">Current Events</a></li>
+			</ol>
+
+		</nav>
+
+		<div style="clear: both;"></div>
+
+	</header>
+
+	<section id="main_content">
+
+                <%= yield %>
+
+	</section>
+
+	<footer>
+
+		<p><small>&copy;
+                Copyright <a href="http://www.sonian.com">Sonian, Inc.</a> 2011.
+                <a href="https://github.com/sonian/sensu-dashboard/blob/master/MIT-LICENSE.txt">License (MIT)</a>
+                </small></p>
+
+	</footer>
+
+</div>
+
+<!-- here comes the javascript -->
+
+<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
+<script>window.jQuery || document.write("<script src='js/jquery-1.5.1.min.js'>\x3C/script>")</script>
+
+<!-- Javascript SHA1 -->
+<script src="js/webtoolkit.sha1.js"></script>
+
+<!-- jQuery templates -->
+<script src="js/jquery.tmpl.min.js"></script>
+
+<!-- jQuery lean modal -->
+<script src="js/jquery.leanModal.min.js"></script>
+
+<!-- jQuery zclip (clipboard support) -->
+<script type="text/javascript" src="js/jquery.zclip.min.js"></script>
+
+<!-- this is where we put our custom functions -->
+<script src="js/functions.js"></script>
+
+<!-- jQuery sort elements -->
+<script src="js/jquery.sortElements.js"></script>
+
+<!-- jQuery auto suggest -->
+<script src="js/jquery.autoSuggest.js"></script>
+
+<!-- include other js -->
+<%= @js %>
+
+</body>
+</html>