sensu-dashboard 0.5.1

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

@@ -0,0 +1,23 @@
+<h1>Current Clients <span class="clients_count">(<span id="client_count">0</span>)</span></h1>
+
+<table id="clients">
+
+    <thead>
+
+      <tr>
+        <td class="col_clients">Client</td>
+        <td class="col_checks">Public IP</td>
+        <td class="col_status">Timestamp</td>
+        <td class="col_output">Subscriptions</td>
+      </tr>
+
+    </thead>
+
+    <tbody></tbody>
+
+</table>
+
+<div id="event_details_modal" class="event_details_modal">
+  <h1 class="section_title">Client Data</h1>
+  <div id="client_data"></div>
+</div>

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

@@ -0,0 +1,142 @@
+<!-- Event template -->
+<script id="eventTemplate" type="text/x-jquery-tmpl">
+  <tr class="status${status}" id="${client}${check}" rel="leanModal" href="#event_details_modal">
+    <td id="client">${client}</td><td id="check">${check}</td><td id="status">${status}</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_events").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',
+      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',
+      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',
+      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',
+      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'
+    });
+  }
+});
+</script>

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

@@ -0,0 +1,41 @@
+<h1>Current Events <span class="events_count">(<span id="event_count">0</span>)</span></h1>
+
+<input type="text" id="autosuggest_filter" style="width: 300px;"/>
+
+<table id="events">
+
+    <thead>
+
+      <tr>
+        <td class="col_clients">Client</td>
+        <td class="col_checks">Check</td>
+        <td class="col_status">Status</td>
+        <td class="col_output">Output</td>
+      </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>
+      <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,120 @@
+<!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="/">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>
+
+<!-- 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>

data/lib/sensu-dashboard/views/sonian.sass

@@ -0,0 +1,206 @@
+body
+  background-color: #c0c0c0
+  background-image: url('../img/footer_bg.png')
+  z-index: 1
+
+header
+  background-color: #992222
+  background-image: url('../img/header_bg.png')
+  padding: 15px 20px
+  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif
+  font-weight: 300
+  border-bottom: 1px solid #bbb
+  h1
+    font-family: Helvetica Neue Ultra Light
+    font-size: 18px
+    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif
+    font-weight: 300
+    a
+      color: #fafafa
+      text-decoration: none
+      float: left
+      text-shadow: 0 1px 0 #333
+      &:hover
+        color: #fa9999
+        text-shadow: 0 1px 0 #333
+  nav
+    float: right
+    margin-right: 30px
+    ol
+      list-style: none
+      margin: 0
+      padding: 0
+      li
+        margin: 0
+        padding: 0 0 0 30px
+        font-size: 14px
+        font-weight: 300
+        float: right
+        a
+          color: #fafafa
+          text-shadow: 0 1px 0 #333
+          &:hover
+            color: #fa9999
+            text-shadow: 0 1px 0 #333
+
+section#main_content
+  background-color: #eee
+  background-image: url('../img/main_content_bg.png')
+  padding: 20px
+  border-bottom: 1px solid #a0a0a0
+  color: #333
+  h1
+    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif
+    font-weight: 300
+    font-size: 16px
+    margin-bottom: 20px
+    text-shadow: 0 1px 0 white
+    /*-webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.15);
+     *-moz-box-shadow: 0 -1px 0 rgba(0,0,0,0.15);
+     *box-shadow: 0 -1px 0 rgba(0,0,0,0.15);
+  table
+    width: 100%
+    thead tr
+      cursor: pointer
+      td
+        padding: 7px
+        font-weight: 600
+        font-size: 14px
+        text-shadow: 0 1px 0 white
+        &.col_clients
+          width: 100px
+        &.col_checks
+          width: 150px
+        &.col_status
+          width: 80px
+    tbody tr
+      background-color: #fff
+      cursor: pointer
+      &.status2
+        background-color: #b55
+        color: #fff
+        border-bottom: 1px solid #933
+      &.status1
+        background-color: #fff
+        border-bottom: 1px solid #ccc
+      &.status3
+        background-color: #ffffee
+        border-bottom: 1px solid #fffbb5
+      &:first-child
+        &.status2
+          border-top: 1px solid #933
+        &.status1
+          border-top: 1px solid #ccc
+        &.status3
+          border-top: 1px solid #fffbb5
+      &.status2:hover, &.status1:hover, &.status3:hover
+        background-color: #992222
+        color: #fff
+        border-bottom: 1px solid #880000
+        border-top: 1px solid #880000
+      td
+        padding: 7px
+  table#clients
+    tbody
+      tr:first-child
+        border-top: 1px solid #ccc
+      tr
+        border-bottom: 1px solid #ccc
+      tr:hover
+        background-color: #992222
+        color: #fff
+        border-bottom: 1px solid #880000
+        border-top: 1px solid #880000
+  div.event_details_modal
+    background-color: white
+    width: 600px
+    padding: 30px
+    display: none
+    border-radius: 5px
+    -moz-border-radius: 5px
+    -webkit-border-radius: 5px
+    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7)
+    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.7)
+    -moz-box-shadow: 0 0px 4px rgba(0, 0, 0, 0.7)
+    h1.section_title
+      margin: 20px 0 10px 0
+      font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif
+      font-weight: 300
+      font-size: 16px
+      -moz-user-select: none
+      -khtml-user-select: none
+      user-select: none
+    h1.section_title:first-child
+      margin-top: 0
+    div
+      &.event_detail_group
+        background-color: #f0f0f0
+        margin-bottom: 10px
+        padding: 7px
+        border-radius: 5px
+        -moz-border-radius: 5px
+        -webkit-border-radius: 5px
+        overflow: hidden
+        &:last-child
+          margin-bottom: 0
+        div.event_detail
+          float: left
+        h1
+          font-size: 13px
+          margin-bottom: 7px
+          color: #333
+          font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif
+          font-weight: bold
+          margin-bottom: 4px
+          text-shadow: none
+      &.action_btn
+        float: left
+        margin-right: 7px
+        padding: 7px
+        background-color: #933
+        color: white
+        border: 1px solid #880000
+        border-radius: 5px
+        -moz-border-radius: 5px
+        -webkit-border-radius: 5px
+        cursor: pointer
+        -moz-user-select: none
+        -khtml-user-select: none
+        user-select: none
+        &.copy
+          float: right
+          margin-right: 0
+        &:hover
+          background-color: #b33
+        &:active
+          background-color: #733
+
+footer
+  border-top: 1px solid #ccc
+  text-align: center
+  padding-top: 7px
+  color: #333
+  text-shadow: 0 1px 0 #ccc
+  a
+    color: #333
+    &:hover
+      color: #992222
+
+span.events_count
+  color: #992222
+
+#lean_overlay
+  position: fixed
+  z-index: 100
+  top: 0px
+  left: 0px
+  height: 100%
+  width: 100%
+  background: #000
+  display: none
+
+a
+  color: #992222
+  text-decoration: none
+  &:hover
+    color: #550000