Merge pull request Netflix#959 from sasrin/monitor

Enable Hystrix Dashboard to monitor multiple independent applications

hystrix-dashboard/src/main/webapp/components/hystrixCommand/hystrixCommand.css

@@ -110,7 +110,7 @@
 
 .dependencies div.monitor {
  width: 245px; /* we want a fixed width instead of percentage as I want the boxes to be a set size and then fill in as many as can fit in each row ... this allows 3 columns on an iPad */
- height: 155px;
+ height: 160px;
 }
 
 .dependencies .success {

hystrix-dashboard/src/main/webapp/components/hystrixCommand/hystrixCommand.js

@@ -19,14 +19,15 @@
  * 
  * Publish this externally as "HystrixCommandMonitor"
  */
- window.HystrixCommandMonitor = function(containerId, args) {
+ window.HystrixCommandMonitor = function(index, containerId, args) {
 
  var self = this; // keep scope under control
  self.args = args;
  if(self.args == undefined) {
  self.args = {};
  }
 
+ this.index = index;
  this.containerId = containerId;
 
  /**
@@ -66,6 +67,7 @@
  /* public */ self.eventSourceMessageListener = function(e) {
  var data = JSON.parse(e.data);
  if(data) {
+ data.index = self.index;
  // check for reportingHosts (if not there, set it to 1 for singleHost vs cluster)
  if(!data.reportingHosts) {
  data.reportingHosts = 1;
@@ -91,7 +93,7 @@
  // assert all the values we need
  validateData(data);
  // escape string used in jQuery & d3 selectors
- data.escapedName = data.name.replace(/([ !"#$%&'()*+,./:;<=>?@[\]^`{|}~])/g,'\\$1');
+ data.escapedName = data.name.replace(/([ !"#$%&'()*+,./:;<=>?@[\]^`{|}~])/g,'\\$1') + '_' + data.index;
  // do math
  convertAllAvg(data);
  calcRatePerSecond(data);

hystrix-dashboard/src/main/webapp/components/hystrixCommand/templates/hystrixCircuitContainer.html

@@ -1,4 +1,4 @@
-<div class="monitor" id="CIRCUIT_<%= name %>" style="position:relative;">
+<div class="monitor" id="CIRCUIT_<%= name + '_' + index %>" style="position:relative;">
  <%
  var displayName = name;
  var toolTip = "";
@@ -8,12 +8,12 @@
  }
  %>
 
- <div id="chart_CIRCUIT_<%= name %>" class="chart" style="position:absolute;top:0px;left:0; float:left; width:100%; height:100%;"></div>
+ <div id="chart_CIRCUIT_<%= name + '_' + index %>" class="chart" style="position:absolute;top:0px;left:0; float:left; width:100%; height:100%;"></div>
  <div style="position:absolute;top:0;width:100%;height:15px;opacity:0.8; background:white;">
  <% if(includeDetailIcon) { %>
  <p class="name" <%= toolTip %> style="padding-right:16px">
  <%= displayName %>
- <a href="../dependencies/command.jsp?name=<%= name %>"><img src="../components/hystrixCommand/magnifying-glass-icon-20.png" height="14px" width="14px" border="0" style="position: absolute; right:0px;"></a>
+ <a href="../dependencies/command.jsp?name=<%= name + '_' + index %>"><img src="../components/hystrixCommand/magnifying-glass-icon-20.png" height="14px" width="14px" border="0" style="position: absolute; right:0px;"></a>
  </p>
  <% } else { %>
  <p class="name" <%= toolTip %>><%= displayName %></p>
@@ -22,19 +22,19 @@
  <div style="position:absolute;top:15px;; opacity:0.8; background:white; width:100%; height:95%;">
  <div class="monitor_data"></div>
  </div>
- <div id="graph_CIRCUIT_<%= name %>" class="graph" style="position:absolute;top:25px;left:0; float:left; width:140px; height:62px;"></div>
+ <div id="graph_CIRCUIT_<%= name + '_' + index %>" class="graph" style="position:absolute;top:25px;left:0; float:left; width:140px; height:62px;"></div>
 
  <script>
  var y = 200;
  /* escape with two backslashes */
- var vis = d3.select("#chart_CIRCUIT_<%= name.replace(/([ !"#$%&'()*+,./:;<=>?@[\]^`{|}~])/g,'\\\\$1') %>").append("svg:svg").attr("width", "100%").attr("height", "100%");
+ var vis = d3.select("#chart_CIRCUIT_<%= name.replace(/([ !"#$%&'()*+,./:;<=>?@[\]^`{|}~])/g,'\\\\$1') + '_' + index %>").append("svg:svg").attr("width", "100%").attr("height", "100%");
  /* add a circle -- we don't use the data point, we set it manually, so just passing in [1] */
  var circle = vis.selectAll("circle").data([1]).enter().append("svg:circle");
  /* setup the initial styling and sizing of the circle */
  circle.style("fill", "green").attr("cx", "30%").attr("cy", "30%").attr("r", 5);
 
  /* add the line graph - it will be populated by javascript, no default to show here */
  /* escape with two backslashes */
- var graph = d3.select("#graph_CIRCUIT_<%= name.replace(/([ !"#$%&'()*+,./:;<=>?@[\]^`{|}~])/g,'\\\\$1') %>").append("svg:svg").attr("width", "100%").attr("height", "100%");
+ var graph = d3.select("#graph_CIRCUIT_<%= name.replace(/([ !"#$%&'()*+,./:;<=>?@[\]^`{|}~])/g,'\\\\$1') + '_' + index %>").append("svg:svg").attr("width", "100%").attr("height", "100%");
  </script>
 </div>

hystrix-dashboard/src/main/webapp/components/hystrixThreadPool/hystrixThreadPool.js

@@ -19,10 +19,11 @@
  * 
  * Publish this externally as "HystrixThreadPoolMonitor"
  */
- window.HystrixThreadPoolMonitor = function(containerId) {
+ window.HystrixThreadPoolMonitor = function(index, containerId) {
 
  var self = this; // keep scope under control
 
+ this.index = index;
  this.containerId = containerId;
 
  /**
@@ -61,6 +62,7 @@
  /* public */ self.eventSourceMessageListener = function(e) {
  var data = JSON.parse(e.data);
  if(data) {
+ data.index = self.index;
  // check for reportingHosts (if not there, set it to 1 for singleHost vs cluster)
  if(!data.reportingHosts) {
  data.reportingHosts = 1;
@@ -83,7 +85,7 @@
  function preProcessData(data) {
  validateData(data);
  // escape string used in jQuery & d3 selectors
- data.escapedName = data.name.replace(/([ !"#$%&'()*+,./:;<=>?@[\]^`{|}~])/g,'\\$1');
+ data.escapedName = data.name.replace(/([ !"#$%&'()*+,./:;<=>?@[\]^`{|}~])/g,'\\$1') + '_' + data.index;
  // do math
  converAllAvg(data);
  calcRatePerSecond(data);

hystrix-dashboard/src/main/webapp/components/hystrixThreadPool/templates/hystrixThreadPoolContainer.html

@@ -1,4 +1,4 @@
-<div class="monitor" id="THREAD_POOL_<%= name %>" style="position:relative;">
+<div class="monitor" id="THREAD_POOL_<%= name + '_' + index %>" style="position:relative;">
 
  <%
  var displayName = name;
@@ -9,7 +9,7 @@
  }
  %>
 
- <div id="chart_THREAD_POOL_<%= name %>" class="chart" style="position:absolute;top:0px;left:0; float:left; width:100%; height:100%;"></div>
+ <div id="chart_THREAD_POOL_<%= name + '_' + index %>" class="chart" style="position:absolute;top:0px;left:0; float:left; width:100%; height:100%;"></div>
  <div style="position:absolute;top:0;width:100%;height:15px;opacity:0.8; background:white;"><p class="name" <%= toolTip %>><%= displayName %></p></div>
  <div style="position:absolute;top:15px;; opacity:0.8; background:white; width:100%; height:95%;">
  <div class="monitor_data"></div>
@@ -24,7 +24,7 @@
  <% } %>
  var y = 200;
  /* escape with two backslashes */
- var vis = d3.select("#chart_THREAD_POOL_<%= name.replace(/([ !"#$%&'()*+,./:;<=>?@[\]^`{|}~])/g,'\\\\$1') %>").append("svg:svg").attr("width", "100%").attr("height", "100%");
+ var vis = d3.select("#chart_THREAD_POOL_<%= name.replace(/([ !"#$%&'()*+,./:;<=>?@[\]^`{|}~])/g,'\\\\$1') + '_' + index %>").append("svg:svg").attr("width", "100%").attr("height", "100%");
  /* add a circle -- we don't use the data point, we set it manually, so just passing in [1] */
  var circle = vis.selectAll("circle").data([1]).enter().append("svg:circle");
  /* setup the initial styling and sizing of the circle */

hystrix-dashboard/src/main/webapp/css/global.css

@@ -12,14 +12,18 @@ img {
  height: auto;
 }
 
-
 #header {
  background: #FFFFFF url(../images/hystrix-logo-tagline-tiny.png) no-repeat scroll 99% 0%;
  height: 65px;
  margin-bottom: 5px;
 }
 
-#header h2 {
+#streamHeader {
+ height: 65px;
+ margin-bottom: 5px;
+}
+
+#streamHeader h2 {
  float:left;
  color: black;
  position:relative;
@@ -56,7 +60,6 @@ img {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
 }
 
-
 @media screen and (min-width: 1500px) {
 
  #header .header_nav {
@@ -68,4 +71,8 @@ img {
  background: #FFFFFF url(../images/hystrix-logo-tagline-tiny.png) no-repeat scroll 99% 50%;
  height: 65px;
  }
+
+ #streamHeader {
+ height: 65px;
+ }
 }

hystrix-dashboard/src/main/webapp/index.css

@@ -0,0 +1,16 @@
+table {
+ width: 80%;
+ border-collapse: collapse;
+}
+
+table, td {
+ border: 1px solid #DBDBDB;
+}
+
+table tr:nth-child(even) {
+ background-color: #ECECEC;
+}
+
+table tr:nth-child(odd) {
+ background-color: #FFFFFF;
+}

hystrix-dashboard/src/main/webapp/index.html

@@ -4,32 +4,43 @@
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 <title>Hystrix Dashboard</title>
 
+ <!-- Our custom CSS -->
+ <link rel="stylesheet" type="text/css" href="./index.css" />
+
  <!-- Javascript to monitor and display -->
  <script src="./js/jquery.min.js" type="text/javascript"></script>
-
+ <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
+
  <script>
- function sendToMonitor() {
-  
+ var streams = [];
+ function addStream() {
  if($('#stream').val().length > 0) {
- var url = "./monitor/monitor.html?stream=" + encodeURIComponent($('#stream').val()) + "";
- if($('#delay').val().length > 0) { 
- url += "&delay=" + $('#delay').val();
- }
- if($('#title').val().length > 0) { 
-  url += "&title=" + encodeURIComponent($('#title').val());
- }
- if($('#authorization').val().length > 0) {
- url += "&authorization=" + encodeURIComponent($('#authorization').val());
- }
- location.href= url;
+ var s = {
+  name: $('#title').val(),
+ stream: $('#stream').val(),
+  auth: $('#authorization').val(),
+  delay: $('#delay').val()
+ };
+
+ streams.push(s);
+ $('#streams').html('<table>' + _.reduce(streams, function(html, s) {
+ return html + '<tr><td>' + s.name + '</td><td>' + s.stream + '</td></tr>';
+ }, '') + '</table>');
  } else {
  $('#message').html("The 'stream' value is required.");
  }
  }
+ function monitorStreams() {
+ if (streams.length) {
+ location.href= './monitor/monitor.html?streams=' + encodeURIComponent(JSON.stringify(streams));
+ } else {
+ $('#message').html("Add Streams to monitor, before starting to monitor.");
+ }
+ }
  $(document).ready(function() {
  $('#stream').keypress(function(e) {
  if(e.which == 13) {
- sendToMonitor();
+ monitorStreams();
  }
  });
  });
@@ -57,7 +68,11 @@ <h2>Hystrix Dashboard</h2>
  Title: <input id="title" type="textfield" size="60" placeholder="Example Hystrix App"></input><br><br>
  Authorization: <input id="authorization" type="textfield" size="60" placeholder="Basic Zm9vOmJhcg=="></input><br>
  <br>
- <button onclick="sendToMonitor()">Monitor Stream</button>
+ <button onclick="addStream()">Add Stream</button>
+ <br><br>
+ <ol id='streams'></ol>
+ <br><br>
+ <button onclick="monitorStreams()">Monitor Streams</button>
  <br><br>
  <div id="message" style="color:red"></div>