Merge branch 'dashboard'

This commit is contained in:
Scott Schneider 2013-12-18 11:14:13 -08:00
commit 502ebcf8b0
9 changed files with 643 additions and 2 deletions

View file

@ -5,7 +5,6 @@ Features
--------
* Automatic clean-up of long-running VMs in 'running' Redis queues
* Add dashboard to Sinatra (API) app
* Allow rate-limiting of tasks

138
public/dashboard.css Normal file
View file

@ -0,0 +1,138 @@
body,
#content {
margin-top: 20px;
width: 960px;
margin-left: auto;
margin-right: auto;
}
#header {
border-bottom: solid 1px #888;
margin-bottom: 20px;
}
#header .logo,
#header .text {
margin-left: 30px;
margin-bottom: 5px;
display: inline-block;
}
#header .text {
float: right;
position: relative;
right: 30px;
top: 100px;
font: 50px 'PT Sans', sans-serif;
letter-spacing: -0.05em;
color: #444;
}
.label {
text-transform: uppercase;
text-indent: 25px;
font: 12px 'PT Sans', sans-serif;
font-weight: bold;
line-height: 20px;
color: #888;
border-bottom: solid 1px #888;
}
.spinner {
background-image: url( '/img/spinner.svg' );
width: 15px;
height: 15px;
background-size: contain;
opacity: .7;
float: left;
margin-right: 5px;
-webkit-animation:rotate 1.5s infinite steps( 12 );
-moz-animation:rotate 1.5s infinite steps( 12 );
-ms-animation:rotate 1.5s infinite steps( 12 );
-o-animation:rotate 1.5s infinite steps( 12 );
animation:rotate 1.5s infinite steps( 12 );
}
@keyframes 'rotate' {
from {
-webkit-transform: rotate( 0deg );
-moz-transform: rotate( 0deg );
-o-transform: rotate( 0deg );
-ms-transform: rotate( 0deg );
transform: rotate( 0deg );
}
to {
-webkit-transform: rotate( 360deg );
-moz-transform: rotate( 360deg );
-o-transform: rotate( 360deg );
-ms-transform: rotate( 360deg );
transform: rotate( 360deg );
}
}
@-moz-keyframes rotate {
from {
-moz-transform: rotate( 0deg );
transform: rotate( 0deg );
}
to {
-moz-transform: rotate( 360deg );
transform: rotate( 360deg );
}
}
@-webkit-keyframes 'rotate' {
from {
-webkit-transform: rotate( 0deg );
transform: rotate( 0deg );
}
to {
-webkit-transform: rotate( 360deg );
transform: rotate( 360deg );
}
}
@-ms-keyframes 'rotate' {
from {
-ms-transform: rotate( 0deg );
transform: rotate( 0deg );
}
to {
-ms-transform: rotate( 360deg );
transform: rotate( 360deg );
}
}
@-o-keyframes 'rotate' {
from {
-o-transform: rotate( 0deg );
transform: rotate( 0deg );
}
to {
-o-transform: rotate( 360deg );
transform: rotate( 360deg );
}
}
.module {
margin-top: 5px;
margin-left: 25px;
font: 13px 'PT Sans', sans-serif;
line-height: 20px;
color: #888;
}
.line {
fill: none;
}
.area {
stroke-width: 0;
}
.axis path,
.axis line {
fill: none;
stroke: #fff;
shape-rendering: crispEdges;
}
.tick {
fill: none;
stroke: #eee;
}

BIN
public/img/logo.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

38
public/img/spinner.svg Normal file
View file

@ -0,0 +1,38 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="128px" height="128px" viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
<g id="_x31_6x16_Spinner.psd" display="none">
<defs>
<rect id="SVGID_1_" width="128" height="128"/>
</defs>
<clipPath id="SVGID_2_" display="inline">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<g display="inline" clip-path="url(#SVGID_2_)">
<image overflow="visible" width="16" height="16" id="Layer_1_1_" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAFiAAABYgFfJ9BTAAAA
GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAWVJREFUeNqM098rQ3EYx/Fzdhgh
bcWW/GiKxKK2SKTcrP0PuFP+ABf+AP+Cf8OVe5dquMEVlgsZkhiFIys/3t/6HH2ds+GpV+1s5zzP
s+f5HseJRsz6XMQmPOef0YMNZHW9ghslaFbCoUbVTHxgFmu6bkUN70qawrP9gGdVbsMtrrCMYwwg
hx2M4RRlddMF31MXq1jCo27Oq5ttXffjBbvoxhxGcOaqgwwWMKUK60rwZnUaU+JhVHGkbn/EJBbr
zCaIrCp/h+mggDQ+NawSLhokaMc44nrWb9IwUkpQ+2PnprNOtChBpNNeTOjHepHRPZE1mn1PY0br
LGuI4cirgOniwXTsqlpR6zG7P9H/fMK5iiR1AktaaU7z2vKsYQaHJKl1VtCHUVyrsq8CFZ3IuyBB
VV+Y6c7jFXsYRAL76FCySx24ezP48BQTmvCBthIT0+GhEqd/extdDdQeWsHaSjy85i8BBgAjbUmT
DlLqrAAAAABJRU5ErkJggg==" transform="matrix(8 0 0 8 0 0)">
</image>
</g>
</g>
<line fill="none" stroke="#363636" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10" x1="64.001" y1="8.125" x2="64.001" y2="27.762"/>
<line fill="none" stroke="#484848" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10" x1="36.062" y1="15.611" x2="45.88" y2="32.618"/>
<line fill="none" stroke="#5A5A5A" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10" x1="15.611" y1="36.062" x2="32.618" y2="45.882"/>
<line fill="none" stroke="#6C6C6C" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10" x1="8.126" y1="64" x2="27.764" y2="64"/>
<line fill="none" stroke="#7E7E7E" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10" x1="15.612" y1="91.938" x2="32.619" y2="82.117"/>
<line fill="none" stroke="#909090" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10" x1="36.064" y1="112.389" x2="45.883" y2="95.381"/>
<line fill="none" stroke="#A2A2A2" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10" x1="64.001" y1="119.873" x2="64.001" y2="100.237"/>
<line fill="none" stroke="#B4B4B4" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10" x1="91.939" y1="112.387" x2="82.121" y2="95.381"/>
<line fill="none" stroke="#C6C6C6" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10" x1="112.391" y1="91.935" x2="95.386" y2="82.116"/>
<line fill="none" stroke="#000000" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10" x1="119.875" y1="63.997" x2="100.241" y2="63.998"/>
<line fill="none" stroke="#121212" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10" x1="112.389" y1="36.06" x2="95.384" y2="45.877"/>
<line fill="none" stroke="#242424" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10" x1="91.937" y1="15.609" x2="82.118" y2="32.614"/>
</svg>

After

Width:  |  Height:  |  Size: 3.2 KiB

View file

@ -0,0 +1,183 @@
var numbers_url = '/dashboard/stats/vcloud/numbers';
var numbers_width = 130;
var numbers_height = 50;
var stats_vcloud_numbers__data = {};
var stats_vcloud_numbers__svg = {};
d3.json( numbers_url,
function( stats_vcloud_numbers__data ) {
( function tick() {
setTimeout( function() {
var stats_vcloud_numbers__data__live = ( function() {
var stats_vcloud_numbers__data__live = null;
$.ajax( {
'url': numbers_url,
'async': false,
'global': false,
'dataType': 'json',
'success': function( data ) {
stats_vcloud_numbers__data__live = data;
}
} );
return stats_vcloud_numbers__data__live;
} )();
$( '#stats-vcloud-numbers' ).empty();
stats_vcloud_numbers__svg[ 'ready' ] = d3.select( '#stats-vcloud-numbers' )
.append( 'svg' )
.style( 'margin', '10px 25px 0px 0px' )
.style( 'padding', '0px 0px 20px 0px' )
.attr( 'width', numbers_width + 'px' )
.attr( 'height', numbers_height + 'px' );
stats_vcloud_numbers__svg[ 'ready' ]
.append( 'text' )
.text(
( 'ready and waiting' )
)
.attr( {
'x': '5',
'y': numbers_height,
'font-face': '\'PT Sans\', sans-serif',
'font-size': '12px',
'font-weight': 'bold',
'fill': '#888'
} );
stats_vcloud_numbers__svg[ 'ready' ]
.append( 'text' )
.text(
( stats_vcloud_numbers__data__live[ 'ready' ] )
)
.attr( {
'x': '0',
'y': '36',
'font-face': '\'PT Sans\', sans-serif',
'font-weight': 'bold',
'font-size': '50px',
'letter-spacing': '-0.05em',
'fill': '#444'
} );
stats_vcloud_numbers__svg[ 'pending' ] = d3.select( '#stats-vcloud-numbers' )
.append( 'svg' )
.style( 'margin', '10px 25px 0px 0px' )
.style( 'padding', '0px 0px 20px 0px' )
.attr( 'width', numbers_width + 'px' )
.attr( 'height', numbers_height + 'px' );
stats_vcloud_numbers__svg[ 'pending' ]
.append( 'text' )
.text(
( 'being built' )
)
.attr( {
'x': '5',
'y': numbers_height,
'font-face': '\'PT Sans\', sans-serif',
'font-size': '12px',
'font-weight': 'bold',
'fill': '#888'
} );
stats_vcloud_numbers__svg[ 'pending' ]
.append( 'text' )
.text(
( stats_vcloud_numbers__data__live[ 'pending' ] )
)
.attr( {
'x': '0',
'y': '36',
'font-face': '\'PT Sans\', sans-serif',
'font-weight': 'bold',
'font-size': '50px',
'letter-spacing': '-0.05em',
'fill': '#444'
} );
stats_vcloud_numbers__svg[ 'running' ] = d3.select( '#stats-vcloud-numbers' )
.append( 'svg' )
.style( 'margin', '10px 25px 0px 0px' )
.style( 'padding', '0px 0px 20px 0px' )
.attr( 'width', numbers_width + 'px' )
.attr( 'height', numbers_height + 'px' );
stats_vcloud_numbers__svg[ 'running' ]
.append( 'text' )
.text(
( 'running tests' )
)
.attr( {
'x': '5',
'y': numbers_height,
'font-face': '\'PT Sans\', sans-serif',
'font-size': '12px',
'font-weight': 'bold',
'fill': '#888'
} );
stats_vcloud_numbers__svg[ 'running' ]
.append( 'text' )
.text(
( stats_vcloud_numbers__data__live[ 'running' ] )
)
.attr( {
'x': '0',
'y': '36',
'font-face': '\'PT Sans\', sans-serif',
'font-weight': 'bold',
'font-size': '50px',
'letter-spacing': '-0.05em',
'fill': '#444'
} );
stats_vcloud_numbers__svg[ 'completed' ] = d3.select( '#stats-vcloud-numbers' )
.append( 'svg' )
.style( 'margin', '10px 25px 0px 0px' )
.style( 'padding', '0px 0px 20px 0px' )
.attr( 'width', numbers_width + 'px' )
.attr( 'height', numbers_height + 'px' );
stats_vcloud_numbers__svg[ 'completed' ]
.append( 'text' )
.text(
( 'waiting to die' )
)
.attr( {
'x': '5',
'y': numbers_height,
'font-face': '\'PT Sans\', sans-serif',
'font-size': '12px',
'font-weight': 'bold',
'fill': '#888'
} );
stats_vcloud_numbers__svg[ 'completed' ]
.append( 'text' )
.text(
( stats_vcloud_numbers__data__live[ 'completed' ] )
)
.attr( {
'x': '0',
'y': '36',
'font-face': '\'PT Sans\', sans-serif',
'font-weight': 'bold',
'font-size': '50px',
'letter-spacing': '-0.05em',
'fill': '#444'
} );
tick();
}, 5000 );
} )();
}
);

View file

@ -0,0 +1,166 @@
var pool_url = '/dashboard/stats/vcloud/pool';
var pool_width = 130;
var pool_height = 85;
var stats_vcloud_pool__data = {};
var stats_vcloud_pool__svg = {};
d3.json( pool_url+'?history=1',
function( stats_vcloud_pool__data ) {
var stats_vcloud_pool__data__keys = [];
for ( var key in stats_vcloud_pool__data ) {
stats_vcloud_pool__data__keys.push( key );
}
stats_vcloud_pool__data__keys.sort().map(
function( pool ) {
stats_vcloud_pool__data[ pool ][ 'r' ] = stats_vcloud_pool__data[ pool ][ 'history' ];
}
);
( function tick() {
setTimeout( function() {
var stats_vcloud_pool__data__live = ( function() {
var stats_vcloud_pool__data__live = null;
$.ajax( {
'url': pool_url,
'async': false,
'global': false,
'dataType': 'json',
'success': function( data ) {
stats_vcloud_pool__data__live = data;
}
} );
return stats_vcloud_pool__data__live;
} )();
$( '#stats-vcloud-pool' ).empty();
stats_vcloud_pool__data__keys.sort().map(
function( pool ) {
var x = d3.scale.linear().domain( [ 0, 500 ] ).range( [ 0, pool_width ] );
var y = d3.scale.linear().domain( [ parseInt( stats_vcloud_pool__data__live[ pool ][ 'size' ] ), 0 ] ).range( [ 0, pool_height - 15 ] );
var area = d3.svg.area()
.interpolate( 'basis' )
.x( function( d, i ) { return x( i ); } )
.y0( pool_height - 15 )
.y1( function( d ) { return y( d ); } );
var path = d3.svg.line()
.interpolate( 'basis' )
.x( function( d, i ) { return x( i ); } )
.y( function( d ) { return y( d ); } );
stats_vcloud_pool__data[ pool ][ 'r' ].push( parseInt( stats_vcloud_pool__data__live[ pool ][ 'ready' ] ) );
var pool_current = stats_vcloud_pool__data[ pool ][ 'r' ].slice( -1 )[ 0 ];
var pool_size = stats_vcloud_pool__data[ pool ][ 'size' ]
var pool_pct = Math.floor( ( pool_current / pool_size ) * 100 );
var statuscolor = '#78a830';
if ( pool_pct < 50 ) { statuscolor = '#f0a800'; }
if ( pool_pct < 25 ) { statuscolor = '#d84830'; }
stats_vcloud_pool__svg[ pool ] = d3.select( '#stats-vcloud-pool' )
.append( 'svg' )
.style( 'margin', '15px 25px 0px 0px' )
.style( 'padding', '0px 0px 20px 0px' )
.attr( 'width', pool_width )
.attr( 'height', pool_height );
stats_vcloud_pool__svg[ pool ]
.append( 'g' )
.attr( 'class', 'x tick' )
.attr( 'transform', 'translate( 0,' + ( pool_height - 15 ) + ')' )
.call(
d3.svg.axis()
.scale( x )
.ticks( 4 )
.tickSize( -pool_height )
.outerTickSize( 0 )
.tickFormat( '' )
.tickSubdivide( true )
.orient( 'bottom' )
);
stats_vcloud_pool__svg[ pool ]
.append( 'text' )
.text(
( pool )
)
.attr( {
'x': '5',
'y': pool_height - 2,
'font-face': '\'PT Sans\', sans-serif',
'font-weight': 'bold',
'font-size': '12px',
'fill': '#888'
} );
stats_vcloud_pool__svg[ pool ]
.append( 'text' )
.text(
( pool_pct + '%' )
)
.attr( {
'x': '5',
'y': pool_height - 20,
'font-face': '\'PT Sans\', sans-serif',
'font-weight': 'bold',
'font-size': '12px',
'letter-spacing': '-0.05em',
'fill': '#888'
} );
stats_vcloud_pool__svg[ pool ]
.append( 'text' )
.text(
( '( ' ) +
( pool_current ) +
( '/' ) +
( pool_size ) +
( ' )' )
)
.attr( {
'x': 40,
'y': pool_height - 20,
'font-face': '\'PT Sans\', sans-serif',
'font-size': '12px',
'letter-spacing': '-0.05em',
'fill': '#888'
} );
stats_vcloud_pool__svg[ pool ]
.append( 'path' )
.attr( 'class', 'area' )
.attr( 'fill', statuscolor )
.attr( 'opacity', '0.25' )
.attr( 'd', area( stats_vcloud_pool__data[ pool ][ 'r' ] ) );
stats_vcloud_pool__svg[ pool ]
.append( 'path' )
.attr( 'class', 'line' )
.attr( 'stroke', statuscolor )
.attr( 'stroke-width', '1' )
.attr( 'd', path( stats_vcloud_pool__data[ pool ][ 'r' ] ) );
if ( stats_vcloud_pool__data[ pool ][ 'r' ].length > 500 ) {
stats_vcloud_pool__data[ pool ][ 'r' ].shift();
}
}
)
tick();
}, 5000 );
} )();
}
);

21
views/dashboard.erb Normal file
View file

@ -0,0 +1,21 @@
<!-- stats-vcloud-numbers -->
<div class='label'>the numbers</div>
<div id='stats-vcloud-numbers' class='module'>
<div class='spinner'></div> Loading data...
</div>
<script src='/lib/stats-vcloud-numbers.js'></script>
<br />
<!-- stats-vcloud-pool -->
<div class='label'>vCloud pool status</div>
<div id='stats-vcloud-pool' class='module'>
<div class='spinner'></div> Loading data...
</div>
<script src='/lib/stats-vcloud-pool.js'></script>

29
views/layout.erb Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta charset='utf-8'>
<link rel='stylesheet' type='text/css' href='/dashboard.css' />
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
<script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script>
</head>
<body>
<div id='content'>
<div id='header'>
<embed src='/img/logo.jpg' width='216px' height='162px' class='logo' />
<div class='text'><b>vmware-host-pooler</b></div>
</div>
<%= yield %>
</div>
</body>
</html>

View file

@ -1,6 +1,9 @@
#!/usr/bin/ruby
require 'rubygems'
require 'json'
require 'open-uri'
require 'redis'
require 'sinatra'
require 'yaml'
@ -25,7 +28,71 @@ $redis = Redis.new
# Sinatra!
get '/' do
puts ''
erb :dashboard
end
get '/dashboard/stats/vcloud/numbers' do
result = Hash.new
result['pending'] = 0
result['ready'] = 0
result['running'] = 0
result['completed'] = 0
config[:pools].each do |pool|
result['pending'] += $redis.scard( 'vmware_host_pool__pending__' + pool['name'] )
result['ready'] += $redis.scard( 'vmware_host_pool__ready__' + pool['name'] )
result['running'] += $redis.scard( 'vmware_host_pool__running__' + pool['name'] )
result['completed'] += $redis.scard( 'vmware_host_pool__completed__' + pool['name'] )
end
content_type :json
JSON.pretty_generate( result )
end
get '/dashboard/stats/vcloud/pool' do
result = Hash.new
config[:pools].each do |pool|
result[pool['name']] ||= Hash.new
result[pool['name']]['size'] = pool['size']
result[pool['name']]['ready'] = $redis.scard( 'vmware_host_pool__ready__' + pool['name'] )
end
if ( params[:history] )
if ( config[:config]['graphite'] )
history ||= Hash.new
buffer = open( 'http://'+config[:config]['graphite']+'/render?target=vcloud.ready.*&from=-1hour&format=json' ).read
history = JSON.parse( buffer )
history.each do |pool|
if pool['target'] =~ /.*\.(.*)$/
pool['name'] = $1
pool['last'] = result[pool['name']]['size']
result[pool['name']]['history'] ||= Array.new
pool['datapoints'].each do |metric|
8.times do |n|
if ( metric[0] )
pool['last'] = metric[0].to_i
result[pool['name']]['history'].push( metric[0].to_i )
else
result[pool['name']]['history'].push( pool['last'] )
end
end
end
end
end
else
config[:pools].each do |pool|
result[pool['name']] ||= Hash.new
result[pool['name']]['history'] = [ $redis.scard( 'vmware_host_pool__ready__' + pool['name'] ) ]
end
end
end
content_type :json
JSON.pretty_generate( result )
end
get '/status' do