Merge pull request #49 from sschneid/extended_dashboard_stats

Extend dashboard stats

lib/vmpooler/api.rb

@@ -43,31 +43,6 @@ module Vmpooler
           }
         end
 
-        get '/dashboard/stats/vmpooler/numbers/?' do
-          result = Hash.new
-          result['pending'] = 0
-          result['cloning'] = 0
-          result['booting'] = 0
-          result['ready'] = 0
-          result['running'] = 0
-          result['completed'] = 0
-
-          $config[:pools].each do |pool|
-            result['pending'] += $redis.scard('vmpooler__pending__' + pool['name'])
-            result['ready'] += $redis.scard('vmpooler__ready__' + pool['name'])
-            result['running'] += $redis.scard('vmpooler__running__' + pool['name'])
-            result['completed'] += $redis.scard('vmpooler__completed__' + pool['name'])
-          end
-
-          result['cloning'] = $redis.get('vmpooler__tasks__clone')
-          result['booting'] = result['pending'].to_i - result['cloning'].to_i
-          result['booting'] = 0 if result['booting'] < 0
-          result['total'] = result['pending'].to_i + result['ready'].to_i + result['running'].to_i + result['completed'].to_i
-
-          content_type :json
-          JSON.pretty_generate(result)
-        end
-
         get '/dashboard/stats/vmpooler/pool/?' do
           result = Hash.new
 
@@ -176,37 +151,54 @@ module Vmpooler
         get '/status/?' do
           content_type :json
 
-          result = {}
+          result = {
+            status: 1,
 
-          result['capacity_current'] = 0
+            pending: 0,
-          result['capacity_total'] = 0
+            cloning: 0,
+            booting: 0,
+            ready: 0,
+            running: 0,
+            completed: 0,
 
-          result['status'] = 1
+            capacity_current: 0,
+            capacity_total: 0
+          }
 
           $config[:pools].each do |pool|
-            pool['capacity_current'] = $redis.scard('vmpooler__ready__' + pool['name']).to_i
+            pool[:capacity_current] = $redis.scard('vmpooler__ready__' + pool['name']).to_i
 
-            result['capacity_current'] += pool['capacity_current']
+            result[:capacity_current] += pool[:capacity_current]
-            result['capacity_total'] += pool['size'].to_i
+            result[:capacity_total] += pool['size'].to_i
 
-            if (pool['capacity_current'] == 0)
+            if (pool[:capacity_current] == 0)
-              result['empty'] ||= []
+              result[:empty] ||= []
-              result['empty'].push(pool['name'])
+              result[:empty].push(pool['name'])
             end
+
+            result[:pending] += $redis.scard('vmpooler__pending__' + pool['name'])
+            result[:ready] += $redis.scard('vmpooler__ready__' + pool['name'])
+            result[:running] += $redis.scard('vmpooler__running__' + pool['name'])
+            result[:completed] += $redis.scard('vmpooler__completed__' + pool['name'])
           end
 
-          if result['empty']
+          if result[:empty]
-            result['status'] = 0
+            result[:status] = 0
           end
 
-          result['capacity_percent'] = (result['capacity_current'].to_f / result['capacity_total'].to_f) * 100.0
+          result[:capacity_percent] = (result[:capacity_current].to_f / result[:capacity_total].to_f) * 100.0
 
-          result['clone_total'] = $redis.hlen('vmpooler__clone__' + Date.today.to_s)
+          result[:cloning] = $redis.get('vmpooler__tasks__clone')
-          if result['clone_total'] > 0
+          result[:booting] = result[:pending].to_i - result[:cloning].to_i
-            result['clone_average'] = $redis.hvals('vmpooler__clone__' + Date.today.to_s).map(&:to_f).reduce(:+) / result['clone_total']
+          result[:booting] = 0 if result[:booting] < 0
+          result[:total] = result[:pending].to_i + result[:ready].to_i + result[:running].to_i + result[:completed].to_i
+
+          result[:clone_total] = $redis.hlen('vmpooler__clone__' + Date.today.to_s)
+          if result[:clone_total] > 0
+            result[:clone_average] = $redis.hvals('vmpooler__clone__' + Date.today.to_s).map(&:to_f).reduce(:+) / result[:clone_total]
           end
 
-          result['uptime'] = Time.now - $config[:uptime]
+          result[:uptime] = Time.now - $config[:uptime] if $config[:uptime]
 
           JSON.pretty_generate(Hash[result.sort_by { |k, _v| k }])
         end

lib/vmpooler/public/dashboard.css

@@ -1,3 +1,9 @@
+@media screen and (max-width:1500px) {
+  #stats-vmpooler-numbers .extra {
+    display: none;
+  }
+}
+
 body,
 #content {
   background: #fff;

lib/vmpooler/public/lib/stats-vmpooler-numbers.js

@@ -1,4 +1,4 @@
-var numbers_url = '/dashboard/stats/vmpooler/numbers';
+var numbers_url = '/status';
 var numbers_width = 110;
 var numbers_height = 50;
 
@@ -29,6 +29,126 @@ d3.json( numbers_url,
 
         $( '#stats-vmpooler-numbers' ).empty();
 
+        stats_vmpooler_numbers__svg[ 'clone_total' ] = d3.select( '#stats-vmpooler-numbers' )
+          .append( 'svg' )
+            .style( 'margin', '15px 0px 0px 0px' )
+            .style( 'padding', '0px 10px 20px 10px' )
+            .style( 'float', 'right' )
+            .attr( 'class', 'extra' )
+            .attr( 'width', numbers_width + 'px' )
+            .attr( 'height', numbers_height + 'px' );
+
+        stats_vmpooler_numbers__svg[ 'clone_total' ]
+          .append( 'text' )
+            .text(
+              ( 'cloned today' )
+            )
+            .attr( {
+              'text-anchor': 'end',
+              'x': numbers_width,
+              'y': numbers_height,
+              'font-face': '\'PT Sans\', sans-serif',
+              'font-size': '12px',
+              'font-weight': 'bold',
+              'fill': '#888'
+            } );
+
+        stats_vmpooler_numbers__svg[ 'clone_total' ]
+          .append( 'text' )
+            .text(
+              ( stats_vmpooler_numbers__data__live[ 'clone_total' ] )
+            )
+            .attr( {
+              'text-anchor': 'end',
+              'x': numbers_width,
+              'y': '36',
+              'font-face': '\'PT Sans\', sans-serif',
+              'font-weight': 'bold',
+              'font-size': '50px',
+              'letter-spacing': '-0.05em',
+              'fill': '#444'
+            } );
+
+        stats_vmpooler_numbers__svg[ 'clone_average' ] = d3.select( '#stats-vmpooler-numbers' )
+          .append( 'svg' )
+            .style( 'margin', '15px 0px 0px 0px' )
+            .style( 'padding', '0px 10px 20px 10px' )
+            .style( 'float', 'right' )
+            .attr( 'class', 'extra' )
+            .attr( 'width', numbers_width + 'px' )
+            .attr( 'height', numbers_height + 'px' );
+
+        stats_vmpooler_numbers__svg[ 'clone_average' ]
+          .append( 'text' )
+            .text(
+              ( 'clone time average' )
+            )
+            .attr( {
+              'text-anchor': 'end',
+              'x': numbers_width,
+              'y': numbers_height,
+              'font-face': '\'PT Sans\', sans-serif',
+              'font-size': '12px',
+              'font-weight': 'bold',
+              'fill': '#888'
+            } );
+
+        stats_vmpooler_numbers__svg[ 'clone_average' ]
+          .append( 'text' )
+            .text(
+              ( stats_vmpooler_numbers__data__live[ 'clone_average' ].toFixed(1) + 's' )
+            )
+            .attr( {
+              'text-anchor': 'end',
+              'x': numbers_width,
+              'y': '36',
+              'font-face': '\'PT Sans\', sans-serif',
+              'font-weight': 'bold',
+              'font-size': '50px',
+              'letter-spacing': '-0.05em',
+              'fill': '#444'
+            } );
+
+        stats_vmpooler_numbers__svg[ 'capacity' ] = d3.select( '#stats-vmpooler-numbers' )
+          .append( 'svg' )
+            .style( 'margin', '15px 0px 0px 0px' )
+            .style( 'padding', '0px 10px 20px 10px' )
+            .style( 'float', 'right' )
+            .attr( 'class', 'extra' )
+            .attr( 'width', numbers_width + 'px' )
+            .attr( 'height', numbers_height + 'px' );
+
+        stats_vmpooler_numbers__svg[ 'capacity' ]
+          .append( 'text' )
+            .text(
+              ( 'capacity percent' )
+            )
+            .attr( {
+              'text-anchor': 'end',
+              'x': numbers_width,
+              'y': numbers_height,
+              'font-face': '\'PT Sans\', sans-serif',
+              'font-size': '12px',
+              'font-weight': 'bold',
+              'fill': '#888'
+            } );
+
+        stats_vmpooler_numbers__svg[ 'capacity' ]
+          .append( 'text' )
+            .text(
+              ( stats_vmpooler_numbers__data__live[ 'capacity_percent' ] )
+            )
+            .attr( {
+              'text-anchor': 'end',
+              'x': numbers_width,
+              'y': '36',
+              'font-face': '\'PT Sans\', sans-serif',
+              'font-weight': 'bold',
+              'font-size': '50px',
+              'letter-spacing': '-0.05em',
+              'fill': '#444'
+            } );
+
         stats_vmpooler_numbers__svg[ 'total' ] = d3.select( '#stats-vmpooler-numbers' )
           .append( 'svg' )
             .style( 'margin', '15px 0px 0px 0px' )
@@ -40,7 +160,7 @@ d3.json( numbers_url,
         stats_vmpooler_numbers__svg[ 'total' ]
           .append( 'text' )
             .text(
-              ( 'total VMs' )
+              ( 'total # of VMs' )
             )
             .attr( {
               'text-anchor': 'end',