From 763b0310996c352a3ff1943ff2fcc8ac4f9d389e Mon Sep 17 00:00:00 2001
From: Scott Schneider <sschneid@gmail.com>
Date: Wed, 16 Jul 2014 11:59:57 -0700
Subject: [PATCH 1/2] Tweaks to views and CSS to move statistics to header

---
 lib/vmpooler/public/dashboard.css             | 23 +++++++---
 .../public/lib/stats-vmpooler-numbers.js      | 45 +++++++++++++------
 .../public/lib/stats-vmpooler-running.js      |  2 +-
 lib/vmpooler/views/dashboard.erb              | 12 -----
 lib/vmpooler/views/layout.erb                 |  5 +++
 5 files changed, 56 insertions(+), 31 deletions(-)

diff --git a/lib/vmpooler/public/dashboard.css b/lib/vmpooler/public/dashboard.css
index 86680a9..94a487e 100644
--- a/lib/vmpooler/public/dashboard.css
+++ b/lib/vmpooler/public/dashboard.css
@@ -12,8 +12,7 @@ body,
 }
 
 #header {
-  border-bottom: solid 1px #888;
-  margin-bottom: 20px;
+  margin-top: 5px;
 }
 
 #header .logo,
@@ -26,11 +25,25 @@ body,
 #header .text {
   float: right;
   position: relative;
-  right: 30px;
-  top: 90px;
+  right: 25px;
+  top: 25px;
   font: 50px 'PT Sans', sans-serif;
   letter-spacing: -0.05em;
-  color: #444;
+  line-height: 50px;
+  color: #fff;
+  background: #444;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+#stats-vmpooler-numbers {
+  position: relative;
+  top: -80px;
+}
+
+#stats-vmpooler-running {
+  position: relative;
+  top -20px;
 }
 
 .label {
diff --git a/lib/vmpooler/public/lib/stats-vmpooler-numbers.js b/lib/vmpooler/public/lib/stats-vmpooler-numbers.js
index 87b47e2..54751c6 100644
--- a/lib/vmpooler/public/lib/stats-vmpooler-numbers.js
+++ b/lib/vmpooler/public/lib/stats-vmpooler-numbers.js
@@ -1,5 +1,5 @@
 var numbers_url = '/dashboard/stats/vmpooler/numbers';
-var numbers_width = 130;
+var numbers_width = 100;
 var numbers_height = 50;
 
 var stats_vmpooler_numbers__data  = {};
@@ -33,6 +33,7 @@ d3.json( numbers_url,
           .append( 'svg' )
             .style( 'margin', '15px 0px 0px 0px' )
             .style( 'padding', '0px 10px 20px 10px' )
+            .style( 'float', 'right' )
             .attr( 'width', numbers_width + 'px' )
             .attr( 'height', numbers_height + 'px' );
 
@@ -42,7 +43,8 @@ d3.json( numbers_url,
               ( 'total VMs' )
             )
             .attr( {
-              'x': '5',
+              'text-anchor': 'end',
+              'x': numbers_width,
               'y': numbers_height,
               'font-face': '\'PT Sans\', sans-serif',
               'font-size': '12px',
@@ -56,7 +58,8 @@ d3.json( numbers_url,
               ( stats_vmpooler_numbers__data__live[ 'total' ] )
             )
             .attr( {
-              'x': '0',
+              'text-anchor': 'end',
+              'x': numbers_width,
               'y': '36',
               'font-face': '\'PT Sans\', sans-serif',
               'font-weight': 'bold',
@@ -69,6 +72,7 @@ d3.json( numbers_url,
           .append( 'svg' )
             .style( 'margin', '15px 0px 0px 0px' )
             .style( 'padding', '0px 10px 20px 10px' )
+            .style( 'float', 'right' )
             .attr( 'width', numbers_width + 'px' )
             .attr( 'height', numbers_height + 'px' );
 
@@ -78,7 +82,8 @@ d3.json( numbers_url,
               ( 'ready and waiting' )
             )
             .attr( {
-              'x': '5',
+              'text-anchor': 'end',
+              'x': numbers_width,
               'y': numbers_height,
               'font-face': '\'PT Sans\', sans-serif',
               'font-size': '12px',
@@ -92,7 +97,8 @@ d3.json( numbers_url,
               ( stats_vmpooler_numbers__data__live[ 'ready' ] )
             )
             .attr( {
-              'x': '0',
+              'text-anchor': 'end',
+              'x': numbers_width,
               'y': '36',
               'font-face': '\'PT Sans\', sans-serif',
               'font-weight': 'bold',
@@ -105,6 +111,7 @@ d3.json( numbers_url,
           .append( 'svg' )
             .style( 'margin', '15px 0px 0px 0px' )
             .style( 'padding', '0px 10px 20px 10px' )
+            .style( 'float', 'right' )
             .attr( 'width', numbers_width + 'px' )
             .attr( 'height', numbers_height + 'px' );
 
@@ -114,7 +121,8 @@ d3.json( numbers_url,
               ( 'being cloned' )
             )
             .attr( {
-              'x': '5',
+              'text-anchor': 'end',
+              'x': numbers_width,
               'y': numbers_height,
               'font-face': '\'PT Sans\', sans-serif',
               'font-size': '12px',
@@ -128,7 +136,8 @@ d3.json( numbers_url,
               ( stats_vmpooler_numbers__data__live[ 'cloning' ] )
             )
             .attr( {
-              'x': '0',
+              'text-anchor': 'end',
+              'x': numbers_width,
               'y': '36',
               'font-face': '\'PT Sans\', sans-serif',
               'font-weight': 'bold',
@@ -141,6 +150,7 @@ d3.json( numbers_url,
           .append( 'svg' )
             .style( 'margin', '15px 0px 0px 0px' )
             .style( 'padding', '0px 10px 20px 10px' )
+            .style( 'float', 'right' )
             .attr( 'width', numbers_width + 'px' )
             .attr( 'height', numbers_height + 'px' );
 
@@ -150,7 +160,8 @@ d3.json( numbers_url,
               ( 'booting up' )
             )
             .attr( {
-              'x': '5',
+              'text-anchor': 'end',
+              'x': numbers_width,
               'y': numbers_height,
               'font-face': '\'PT Sans\', sans-serif',
               'font-size': '12px',
@@ -164,7 +175,8 @@ d3.json( numbers_url,
               ( stats_vmpooler_numbers__data__live[ 'booting' ] )
             )
             .attr( {
-              'x': '0',
+              'text-anchor': 'end',
+              'x': numbers_width,
               'y': '36',
               'font-face': '\'PT Sans\', sans-serif',
               'font-weight': 'bold',
@@ -183,6 +195,7 @@ d3.json( numbers_url,
           .append( 'svg' )
             .style( 'margin', '15px 0px 0px 0px' )
             .style( 'padding', '0px 10px 20px 10px' )
+            .style( 'float', 'right' )
             .attr( 'width', numbers_width + 'px' )
             .attr( 'height', numbers_height + 'px' );
 
@@ -192,7 +205,8 @@ d3.json( numbers_url,
               ( 'running tests' )
             )
             .attr( {
-              'x': '5',
+              'text-anchor': 'end',
+              'x': numbers_width,
               'y': numbers_height,
               'font-face': '\'PT Sans\', sans-serif',
               'font-size': '12px',
@@ -206,7 +220,8 @@ d3.json( numbers_url,
               ( stats_vmpooler_numbers__data__live[ 'running' ] )
             )
             .attr( {
-              'x': '0',
+              'text-anchor': 'end',
+              'x': numbers_width,
               'y': '36',
               'font-face': '\'PT Sans\', sans-serif',
               'font-weight': 'bold',
@@ -219,6 +234,8 @@ d3.json( numbers_url,
           .append( 'svg' )
             .style( 'margin', '15px 0px 0px 0px' )
             .style( 'padding', '0px 10px 20px 10px' )
+            .style( 'float', 'right' )
+            .style( 'text-align', 'right' )
             .attr( 'width', numbers_width + 'px' )
             .attr( 'height', numbers_height + 'px' );
 
@@ -228,7 +245,8 @@ d3.json( numbers_url,
               ( 'waiting to die' )
             )
             .attr( {
-              'x': '5',
+              'text-anchor': 'end',
+              'x': numbers_width,
               'y': numbers_height,
               'font-face': '\'PT Sans\', sans-serif',
               'font-size': '12px',
@@ -242,7 +260,8 @@ d3.json( numbers_url,
               ( stats_vmpooler_numbers__data__live[ 'completed' ] )
             )
             .attr( {
-              'x': '0',
+              'text-anchor': 'end',
+              'x': numbers_width,
               'y': '36',
               'font-face': '\'PT Sans\', sans-serif',
               'font-weight': 'bold',
diff --git a/lib/vmpooler/public/lib/stats-vmpooler-running.js b/lib/vmpooler/public/lib/stats-vmpooler-running.js
index 146a566..e105a64 100644
--- a/lib/vmpooler/public/lib/stats-vmpooler-running.js
+++ b/lib/vmpooler/public/lib/stats-vmpooler-running.js
@@ -119,7 +119,7 @@ d3.json( running_url+'?history=1',
           .append( 'svg' )
           .attr( 'height', running_height )
           .attr( 'width', ( document.getElementById( 'stats-vmpooler-running' ).offsetWidth - 35 ) )
-          .style( 'margin', '15px 0px 0px 0px' )
+          .style( 'margin', '-40px 0px 0px 0px' )
           .style( 'padding', '0px 10px 10px 10px' )
           .append( 'g' );
 
diff --git a/lib/vmpooler/views/dashboard.erb b/lib/vmpooler/views/dashboard.erb
index 0165114..888ba29 100644
--- a/lib/vmpooler/views/dashboard.erb
+++ b/lib/vmpooler/views/dashboard.erb
@@ -1,15 +1,3 @@
-<!-- stats-vmpooler-numbers -->
-
-<div class='label'>the numbers</div>
-
-<div id='stats-vmpooler-numbers' class='module'>
-  <div class='spinner'></div> Loading data...
-</div>
-
-<script src='/lib/stats-vmpooler-numbers.js'></script>
-
-<br />
-
 <!-- stats-vmpooler-running -->
 
 <div class='label'>VMs running tests</div>
diff --git a/lib/vmpooler/views/layout.erb b/lib/vmpooler/views/layout.erb
index 2f0b10f..79fa8a7 100644
--- a/lib/vmpooler/views/layout.erb
+++ b/lib/vmpooler/views/layout.erb
@@ -18,7 +18,12 @@
 
 <div id='header'>
   <embed src='/img/logo.jpg' width='200px' height='150px' class='logo' />
+
   <div class='text'><%= site_name %></div>
+
+  <div id='stats-vmpooler-numbers' class='module'></div>
+
+  <script src='/lib/stats-vmpooler-numbers.js'></script>
 </div>
 
 <%= yield %>

From b5db9ee4eb3db158118be0f39a5e63d8ec12d0d8 Mon Sep 17 00:00:00 2001
From: Scott Schneider <sschneider@puppetlabs.com>
Date: Mon, 21 Jul 2014 10:46:42 -0700
Subject: [PATCH 2/2] Alignment/spacing tweaks

---
 lib/vmpooler/public/dashboard.css                 | 3 ++-
 lib/vmpooler/public/lib/stats-vmpooler-numbers.js | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/lib/vmpooler/public/dashboard.css b/lib/vmpooler/public/dashboard.css
index 94a487e..b9b263c 100644
--- a/lib/vmpooler/public/dashboard.css
+++ b/lib/vmpooler/public/dashboard.css
@@ -25,7 +25,7 @@ body,
 #header .text {
   float: right;
   position: relative;
-  right: 25px;
+  right: 40px;
   top: 25px;
   font: 50px 'PT Sans', sans-serif;
   letter-spacing: -0.05em;
@@ -39,6 +39,7 @@ body,
 #stats-vmpooler-numbers {
   position: relative;
   top: -80px;
+  right: 15px;
 }
 
 #stats-vmpooler-running {
diff --git a/lib/vmpooler/public/lib/stats-vmpooler-numbers.js b/lib/vmpooler/public/lib/stats-vmpooler-numbers.js
index 54751c6..0fc88d1 100644
--- a/lib/vmpooler/public/lib/stats-vmpooler-numbers.js
+++ b/lib/vmpooler/public/lib/stats-vmpooler-numbers.js
@@ -1,5 +1,5 @@
 var numbers_url = '/dashboard/stats/vmpooler/numbers';
-var numbers_width = 100;
+var numbers_width = 110;
 var numbers_height = 50;
 
 var stats_vmpooler_numbers__data  = {};