scout_realtime 0.5.3 → 0.5.4

data/lib/scout_realtime/web/stylesheets/styles.css

@@ -1,122 +1,121 @@
-* {
-	font-family: "proxima-nova","Lucida Grande", sans-serif;
-}
+/*** overall styles ***/
 
-h1, h2, h3 {
-	font-family: "proxima-nova","Lucida Grande", sans-serif;
-	font-weight: bold;
+body {
+	margin: 0;
+	font-family: "Helvetica Neue","Lucida Grande", sans-serif; 
+	font-size: 12px;
 }
 
 h2 {
 	font-size: 18px;
 }
 
-h3 {
-	font-family: "proxima-nova","Lucida Grande", sans-serif;
-	font-weight: bold;
-}
-
+/* makes 'top' smaller in 'top processes' */
 h2 span {
 	font-weight: normal;
 }
 
+/* default chart styling */
+.chart {
+  height:85px;
+  width:100%;
+}
+
 /* the color used for lines in d3 charts */
 svg .line {
   fill: none;
-  stroke: #A8A5A2;
+  stroke: #A8A5A2; /* off-gray */
   stroke-width: 2.5px;
 }
 
-.container {
-  margin-top: 20px;
-  display:table;
-  width: 100%;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  padding: 0;
-  margin:0;
-}
-
-.main_container {
-	border-top: 7px solid #00A3CC;
+.axis {
+  fill: none;
+  stroke-width: 0.5px;
+  stroke: #333; /* off-gray - same as line color*/
+  font-size: 10px;
 }
 
-/** bootstrap overrides for 100% height columns **/
+/*** main layout container - everything is inside of this ***/
 
-.row
-{
-	height: 100%;
-  display: table-row;
+#main_container {
+	border-top: 7px solid #00A3CC; /* blue */
+	min-width: 960px;
+	width: 100%;
+	margin:0;
+	border-collapse: collapse;
 }
 
-.col-md-8, .col-md-4, .col-md-6
-{
-	display: table-cell;
-	float: none;
-	vertical-align: top;
+#main_container > tbody > tr > td:first-child {
+	padding: 0 30px;
 }
 
-/** general layout **/
+/*** header ***/
 
-.container .row > .col-md-8 {
+#main_container #header {
+	margin: 0;
+	background: #fff;
 	border-bottom: 1px solid #E1E1E1;
+	padding: 0;
 }
 
-/** top area - contains the header + overview **/
+#main_container #header > div {
+	position: relative;
+	padding-top: 10px;
+	padding-bottom: 10px;
+	padding-left: 30px;
+}
 
 /* time + pause/play */
 #toggle {
-	border: 1px solid #E1E1E1;
-	border-radius: 20px;
-	background: #fff;
 	float: right;
-	padding: 5px 14px;
-	font-size: 12px;
+	font-size: 13px;
 	color: #000;
 	font-weight: bold;
-  cursor:pointer;
+	position: absolute;
+	right: 0;
+	top: 0;
 }
 
-
-#toggle img {
-	vertical-align: middle;
+#toggle #report-time {
+  position: absolute;
+  right: 125px;
+  top: 14px;
+  width: 80px;
+  text-align: right;
 }
 
-#toggle span {
-	padding-top: 6px;
-}
-
-#toggle *:nth-child(2){
-	margin-left: 10px;
-	margin-right: 5px;
+#toggle .button {
+	padding: 0 20px;
+	height: 42px;
+	display: inline-block;
+	margin: 0;
+  transition: 0.1s background-color;
 }
 
-#toggle .disabled {
-	opacity: 0.3;
+#toggle .button:hover {
+	cursor: pointer;
+	background-color: #FCF8F6;
 }
 
-
-#top .row.header_row .col-md-6{
-	padding-top: 10px;
-	padding-bottom: 15px;
+#toggle #off {
+	border: 1px solid #E1E1E1;
+	border-width: 0 1px;
+	margin-left: 10px;
 }
 
-#top .row{
-	background: #FCF8F6;
+#toggle img {
+	padding-top: 15px;
+	vertical-align: middle;
 }
 
-.container .row:first-child {
-	background: #FCF8F6;
-	border-bottom: 1px solid #E1E1E1;
+#toggle .disabled img {
+	opacity: 0.3;
 }
 
-/* the larger left column */
-#top .col-md-8 {
-	margin:0;
-}
+/* sidebar */
 
-#top .chart_container{
-	margin-bottom: 20px;
+#sidebar_top, #sidebar_bottom {
+	width: 330px;
 }
 
 /* top sidebar */
@@ -128,13 +127,22 @@ svg .line {
 	line-height: 130%;
 	padding: 0;
 	border-bottom: 1px solid #444140;
+	vertical-align: top;
+}
+
+#sidebar_top div.info#hostname_info {
+	margin-top: 11px;
 }
 
 #hostname {
-	margin-bottom:15px;
+	margin-bottom:25px;
 	color: #fff;
 }
 
+#sidebar_top div.info #os_info {
+	font-size: 15px;
+}
+
 #sidebar_top div span {
 	color: #fff;
 }
@@ -151,65 +159,191 @@ svg .line {
 	padding-bottom: 0;
 }
 
+#sidebar_top div.info .desc {
+	font-weight: normal;
+}
+
 #sidebar_top div.info .value {
 	font-size: 18px;
 }
 
 #sidebar_bottom {
-	background: #35312F;
+  background: #35312F;
   color: #fff;
+  vertical-align: top;
+  padding-top: 20px;
+  padding-left:19px;
+  width: 310px;
+	font-size: 13px;
+  color: #7B7B7B
 }
 
-/** overview charts **/
-.chart {
-  height:55px;
-  width:100%;
-  cursor:crosshair;
+#sidebar_bottom div a {
+	color: #7B7B7B; /* same as text */
+	text-decoration: none;
+}
+
+#sidebar_bottom div a:hover {
+	color: #fff;
 }
 
-.chart_container h3 {
-	color: #A3A3A3;
+#sidebar_bottom a.icon {
+	display: inline-block;
+	margin-right: 10px;
+	margin-top: 10px;
+}
+
+/*** overview charts ***/
+
+#main_container > tbody > tr > td#overview_charts{
+	padding-top: 25px;
+	padding-right: 0; /* svg charts have a 30px margin - in effect, this ends up applying the 30px right margin */ 
+	background: #FCF8F6;
+	border-bottom: 1px solid #E1E1E1;
+}
+
+.overview_chart_container {
+	display: inline-block;
+	width: 49.5%;	
+}
+
+.overview_chart_container .chart_container {
+  width: 100%;
+  overflow: hidden;
+}
+
+.overview_chart_container h3 {
+	color: #333;
 	font-size: 16px;
 	margin-top: 0;
 	float: left;
+	font-weight: normal;
+	margin-bottom:6px;
+	text-shadow: 0 1px 0 #fff;
+	line-height: 100%;
 }
 
-.chart_container .latest_value {
+.overview_chart_container .latest_value{
   color: #000;
-  font-size: 18px;
-  font-weight: bold;
+  font-size: 16px;
+ 	font-weight: bold;
   float: right;
+  margin-top:-4px;
+	border: 1px solid #E1E1E1;
+	width: 17%;
+	padding: 2px 0;
+	text-align: center;
+	border-radius: 5px;
+	background: #fff;
 }
 
-.chart_container .chart_info {
-  font-size: 0.8em;
-  height: 1em;
-  color: #000;
-  position: relative;
-  top: -15px;
+.overview_chart_container .chart_info {
+  font-size: 11px;
+  color: #fff;
+	font-weight: normal;
+	height: 12px;
+	margin: 0px 0 3px 0;
+	clear: left;
+}
+
+.overview_chart_container .chart_info span {
+	color: #999;
+	text-shadow: 1px 1px 0 white;
+	padding: 0 5px 0 0;
+}
+
+/* the value */
+.overview_chart_container .chart_info span span {
+	font-weight: bold;
+	padding-left: 3px;
 }
 
 .chart_section {
   fill-opacity: 0;
 }
 
+/* overview chart overrides */
 
+.overview_chart_container .x.axis {
+	display: none;
+}
 
-/** processes table **/
+.overview_chart_container .y.axis {
+	display: block;
+}
+
+.overview_chart_container:hover .axis {
+	display: block;
+}
+
+.chart.overview_chart {
+  margin-left: -30px; /* chart has a 30px left margin */
+  margin-top: -15px; /* accounts for y-axis value. removing spacing btw h3 and chart so mouseover doesn't have a dead area */  
+	height: 101px;
+}
+
+.overview_chart_container svg .line {
+	stroke: #00A3CC; /* blue */
+}
 
-#processes {
+/*** processes table ***/
+
+/* table cell */
+#main_container > tbody > tr > td#processes_container {
+	padding: 0 30px 30px 30px;
+}
+
+td#processes_container h2 {
+	margin-bottom: 0;
+}
+
+.sort-container {
+  position:relative;
+}
+.sort-container .sort-up, .sort-container .sort-down {
+  font-size:8px;
+  position:absolute;
+  display:none;
+}
+
+.sort-container .sort-down {
+  top:4px;
+  left: 3px;
+}
+
+table#processes {
+	border-spacing: 0;
 	width: 100%;
-	margin-top: 10px;
+}
+
+#processes svg .line {
+	stroke: #00A3CC; /* blue */
 }
 
 #processes thead th {
-	font-size: 12px;
+	font-size: 13px;
 	color: #9DB1BC;
-	padding: 10px 20px;
+	padding: 10px 10px;
 	border-bottom: 1px solid #eaeaea;
 	background: #fff;
+  text-align: left;
+	transition: 0.2s background-color;
 }
 
+/* name isn't sortable */
+#processes thead th:not(:first-child) {
+	cursor: pointer;
+}
+
+#processes thead th:not(:first-child):hover {
+  background: #FCF8F6;
+}
+
+#processes tr:nth-child(odd) td {
+	background: #FCF8F6;
+}
+
+
 #processes td:not(:first-child) {
 		width: 26.6666%; /* 3 cols of data. 1st col in table is 20% */
 }
@@ -218,7 +352,14 @@ svg .line {
 	font-size: 14px;
 	font-weight: bold;
 	width: 20%;
-	vertical-align: bottom;
+	vertical-align: top;
+	padding-left: 30px;
+	border-left: 1px solid #eaeaea;
+}
+
+#processes td:last-child {
+	padding-right: 30px;
+	border-right: 1px solid #eaeaea;
 }
 
 #processes tr:last-child td:first-child{
@@ -227,12 +368,17 @@ svg .line {
 
 #processes td {
 	color: #666;
-	padding: 14px 20px;
+	padding: 14px 4px;
+	border-top: 1px solid #fff;
 	border-bottom: 1px solid #eaeaea;
 	font-size: 13px;
 	background: #fff;
 }
 
+#processes td span.chart_container {
+	width: 50%;
+}
+
 #processes tr.compact td {
   padding-left: 16px;
   padding-right: 16px;
@@ -242,13 +388,13 @@ svg .line {
 	display: inline-block;
 }
 
-
 /* process chart */
 
 #processes .chart {
   height: 15px;
+	width: 50%;
 }
 
-#processes .latest_value {
-  float:right;
-}
+#processes .latest_value, #processes .chart_info {
+	padding-left: 10px;
+}

data/lib/scout_realtime/web/views/graph.erb

@@ -1,6 +1,4 @@
 <div class="chart_container">
   <svg class="chart overview_chart" data-collector="<%=chart_collector%>" data-metrics=<%= JSON.dump(chart_metrics) %> data-instance-name="<%=chart_instance_name%>" data-y_scale_max="<%= chart_y_scale_max %>"></svg>
-
-  <div class="chart_legend"></div>
   <div style="clear:both;"></div>
 </div>

data/lib/scout_realtime/web/views/header.erb

@@ -1,8 +1,8 @@
-<div class="row header_row" style="height: 100%">
-  <div class="col-md-6"><img src="/images/logo.png" alt="Scout Realtime"/></div>
-  <div class="col-md-6">
-    <div id="toggle">
-      <span id='report-time'></span> <img src="/images/pause.png" class="off-button" /><img src="/images/play.png" class="on-button">
-    </div>
+<div> <!-- wrapper div needed for ff positioning -->
+  <img src="/images/logo.png" alt="Scout Realtime"/>
+  <div id="toggle">
+    <span id='report-time'></span>
+    <span id='off' class="button"><img src="/images/pause.png" width=12 height=14 /></span><span id='on' class="button"><img src="/images/play.png" width=14 height=14 ></span>
   </div>
-</div> <!-- header row -->
+<div>
+

data/lib/scout_realtime/web/views/index.erb

@@ -1,21 +1,27 @@
-<div class="row">
-  <div class="col-md-8" style="height:100%">
-    <div id="top" class="container">
+<table id="main_container">
+  <tbody>
+<tr>
+  <td id="header">
       <%= erb :header %>
-      <%= erb :overview_charts%>
-    </div> <!-- top -->
-  </div> <!-- col-md-8 -->
-  <!-- sidebar -->
-  <div class="col-md-4" id="sidebar_top" style="height:100%">
+  </td>
+  <td id="sidebar_top" rowspan=2>
     <%= erb :sidebar %>
-  </div>
-</div>
-<div class="row">
-  <div class="col-md-8">
+  </td>
+</tr>
+<tr>
+  <td id="overview_charts">
+      <%= erb :overview_charts%>
+  </td>
+</tr> 
+<tr>
+  <td id="processes_container">
     <h2><span>Top</span> Processes</h2>
     <%= erb :processes %>
-  </div>
-  <!-- sidebar -->
-  <div class="col-md-4" id="sidebar_bottom"></div>
-</div>
+  </td>
+  <td id="sidebar_bottom">
+    <%= erb :sidebar_bottom%>
+  </td>
+</tr>
+</tbody>
+</table>
 <script src="/javascripts/application.js"></script>

data/lib/scout_realtime/web/views/layout.erb

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Scout Realtime</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link href="/stylesheets/bootstrap.min.css" rel="stylesheet">
   <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
   <!--[if lt IE 9]>
@@ -14,20 +13,19 @@
   <link rel="stylesheet" href="stylesheets/styles.css?v=1.0">
   <script type="text/javascript" src="javascripts/jquery.js"></script>
   <script src="/javascripts/d3.v3.min.js"></script>
-  <script src="/javascripts/charts.js"></script>
+  <script src="/javascripts/jquery.debouncedresize.js"></script>
+  
+ <!-- <script src="/javascripts/charts.js"></script> -->
   <script src="/javascripts/d3.linechart.js"></script>
   <script type="text/javascript" src="javascripts/handlebars-v1.1.0.js"></script>
   <script>var metrics_array=[]<%#=DATA_FOR_TESTING.to_json%>;</script>
   <script>var metrics=<%=@latest_run.to_json%>;</script>
   <script>var historical_metrics=<%=@historical_metrics.to_json%>;</script>
   <script>var meta=<%=@meta.to_json%>;</script>
-  <script type="text/javascript" src="//use.typekit.net/bfa1mea.js"></script>
+  <script type="text/javascript" src="//use.typekit.net/fxt5xqq.js"></script>
   <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
 </head>
   <body>
-    <div class="container main_container" style="height:100%">
-      <%=yield%>
-    </div><!-- container -->
-    <script src="/javascripts/bootstrap.min.js"></script>
+    <%=yield%>
   </body>
 </html>

data/lib/scout_realtime/web/views/overview_charts.erb

@@ -1,30 +1,26 @@
 <!-- top row of metrics -->
-<div class="row metrics_row">
-  <div class="col-md-6 chart_container">
+  <div class="overview_chart_container">    
     <h3>CPU Usage</h3>
     <div class="latest_value"></div>
-    <%= erb :graph, :locals => {:chart_collector => "cpu", :chart_metrics => ["io_wait", "system", "user"], :chart_instance_name => "", :chart_y_scale_max => "100"} %>
     <div class="chart_info"></div>
+    <%= erb :graph, :locals => {:chart_collector => "cpu", :chart_metrics => ["io_wait", "system", "user"], :chart_instance_name => "", :chart_y_scale_max => "100"} %>
   </div>
-  <div class="col-md-6 chart_container">
+  <div class="overview_chart_container">
     <h3>Memory Usage</h3>
     <div class="latest_value"></div>
-    <%= erb :graph, :locals => {:chart_collector => "memory", :chart_metrics => ["used_percent"], :chart_instance_name => "", :chart_y_scale_max => "100"} %>
     <div class="chart_info"></div>
+    <%= erb :graph, :locals => {:chart_collector => "memory", :chart_metrics => ["used_percent"], :chart_instance_name => "", :chart_y_scale_max => "100"} %>
   </div>
-</div> <!-- end first row of metrics -->
 <!-- bottom row of metrics -->
-<div class="row metrics_row">
-  <div class="col-md-6 chart_container">
+  <div class="overview_chart_container">
     <h3>Disk Utilization</h3>
     <div class="latest_value"></div>
-    <%= erb :graph, :locals => {:chart_collector => "disk", :chart_metrics => ["utilization"], :chart_instance_name => @disks.last, :chart_y_scale_max => "100"} %>
     <div class="chart_info"></div>
+    <%= erb :graph, :locals => {:chart_collector => "disk", :chart_metrics => ["utilization"], :chart_instance_name => @disks.last, :chart_y_scale_max => "100"} %>
   </div>
-  <div class="col-md-6 chart_container">
+  <div class="overview_chart_container">
     <h3>Network Traffic</h3>
     <div class="latest_value"></div>
-    <%= erb :graph, :locals => {:chart_collector => "network", :chart_metrics => ["bytes_in", "bytes_out"], :chart_instance_name => @networks.first, :chart_y_scale_max => ""} %>
     <div class="chart_info"></div>
+    <%= erb :graph, :locals => {:chart_collector => "network", :chart_metrics => ["bytes_in", "bytes_out"], :chart_instance_name => @networks.first, :chart_y_scale_max => ""} %>
   </div> <!--  -->
-</div> <!-- end bottom row of metrics -->

data/lib/scout_realtime/web/views/processes.erb

@@ -2,9 +2,9 @@
   <thead>
     <tr>
       <th></th>
-      <th>Count</th>
-      <th>CPU %</th>
-      <th>Memory</th>
+      <th data-sort-by="count">Count&nbsp;<span class="sort-container"><span class="sort-up">&#9650;</span><span class="sort-down">&#9660;</span></span></th>
+      <th data-sort-by="cpu">CPU %&nbsp;<span class="sort-container"><span class="sort-up">&#9650;</span><span class="sort-down">&#9660;</span></span></th>
+      <th data-sort-by="memory">Memory&nbsp;<span class="sort-container"><span class="sort-up">&#9650;</span><span class="sort-down">&#9660;</span></span></th>
     </tr>
   </thead>
   <tbody></tbody>
@@ -14,17 +14,17 @@
     <td>{{cmd}}</td>
     <td class="process">
       <span><svg class="chart" data-collector="{{cmd}}" data-type="count" data-instance-name=""></svg></span>
-      <span class="chart_info"></span>
+      <span class="chart_info" style="display:none"></span>
       <span class="latest_value">{{count}}</span>
     </td>
     <td class="process">
       <span><svg class="chart" data-collector="{{cmd}}" data-type="cpu" data-instance-name=""></svg></span>
-      <span class="chart_info"></span>
+      <span class="chart_info" style="display:none"></span>
       <span class="latest_value">{{cpu}}</span>
     </td>
     <td class="process">
       <span><svg class="chart" data-collector="{{cmd}}" data-type="memory" data-instance-name=""></svg></span>
-      <span class="chart_info"></span>
+      <span class="chart_info" style="display:none"></span>
       <span class="latest_value">{{memory}}</span>
     </td>
   </tr>