mirror of
https://github.com/puppetlabs/vmpooler.git
synced 2026-01-26 10:08:40 -05:00
Merge branch 'dashboard'
This commit is contained in:
Scott Schneider
commit
e3080a432d
8 changed files with 643 additions and 1 deletions
138
public/dashboard.css
Normal file
138
public/dashboard.css
Normal 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
BIN
public/img/logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
38
public/img/spinner.svg
Normal file
38
public/img/spinner.svg
Normal 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 |
183
public/lib/stats-vcloud-numbers.js
Normal file
183
public/lib/stats-vcloud-numbers.js
Normal 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 );
|
||||||
|
} )();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
);
|
||||||
|
|
||||||
166
public/lib/stats-vcloud-pool.js
Normal file
166
public/lib/stats-vcloud-pool.js
Normal 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
21
views/dashboard.erb
Normal 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
29
views/layout.erb
Normal 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>
|
||||||
|
|
@ -1,6 +1,9 @@
|
||||||
#!/usr/bin/ruby
|
#!/usr/bin/ruby
|
||||||
|
|
||||||
|
require 'rubygems'
|
||||||
|
|
||||||
require 'json'
|
require 'json'
|
||||||
|
require 'open-uri'
|
||||||
require 'redis'
|
require 'redis'
|
||||||
require 'sinatra'
|
require 'sinatra'
|
||||||
require 'yaml'
|
require 'yaml'
|
||||||
|
|
@ -25,7 +28,71 @@ $redis = Redis.new
|
||||||
|
|
||||||
# Sinatra!
|
# Sinatra!
|
||||||
get '/' do
|
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
|
end
|
||||||
|
|
||||||
get '/status' do
|
get '/status' do
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue