puppetlabs/vmpooler
2
0
Fork 0
mirror of https://github.com/puppetlabs/vmpooler.git synced 2026-01-26 10:08:40 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #18 from sschneid/move_stats_to_header

Browse source 
Tweaks to views and CSS to move statistics to header
This commit is contained in:
Colin 2014-07-21 11:36:58 -07:00
commit e8e8bc4a0e
5 changed files with 57 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

24
lib/vmpooler/public/dashboard.css
View file

@ -12,8 +12,7 @@ body,
} }
#header { #header {
border-bottom: solid 1px #888; margin-top: 5px;
margin-bottom: 20px;
} }
#header .logo, #header .logo,
@ -26,11 +25,26 @@ body,
#header .text { #header .text {
float: right; float: right;
position: relative; position: relative;
right: 30px; right: 40px;
top: 90px; top: 25px;
font: 50px 'PT Sans', sans-serif; font: 50px 'PT Sans', sans-serif;
letter-spacing: -0.05em; 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;
right: 15px;
}
#stats-vmpooler-running {
position: relative;
top -20px;
} }
.label { .label {

45
lib/vmpooler/public/lib/stats-vmpooler-numbers.js
View file

@ -1,5 +1,5 @@
var numbers_url = '/dashboard/stats/vmpooler/numbers'; var numbers_url = '/dashboard/stats/vmpooler/numbers';
var numbers_width = 130; var numbers_width = 110;
var numbers_height = 50; var numbers_height = 50;
var stats_vmpooler_numbers__data = {}; var stats_vmpooler_numbers__data = {};
@ -33,6 +33,7 @@ d3.json( numbers_url,
.append( 'svg' ) .append( 'svg' )
.style( 'margin', '15px 0px 0px 0px' ) .style( 'margin', '15px 0px 0px 0px' )
.style( 'padding', '0px 10px 20px 10px' ) .style( 'padding', '0px 10px 20px 10px' )
.style( 'float', 'right' )
.attr( 'width', numbers_width + 'px' ) .attr( 'width', numbers_width + 'px' )
.attr( 'height', numbers_height + 'px' ); .attr( 'height', numbers_height + 'px' );
@ -42,7 +43,8 @@ d3.json( numbers_url,
( 'total VMs' ) ( 'total VMs' )
) )
.attr( { .attr( {
'x': '5', 'text-anchor': 'end',
'x': numbers_width,
'y': numbers_height, 'y': numbers_height,
'font-face': '\'PT Sans\', sans-serif', 'font-face': '\'PT Sans\', sans-serif',
'font-size': '12px', 'font-size': '12px',
@ -56,7 +58,8 @@ d3.json( numbers_url,
( stats_vmpooler_numbers__data__live[ 'total' ] ) ( stats_vmpooler_numbers__data__live[ 'total' ] )
) )
.attr( { .attr( {
'x': '0', 'text-anchor': 'end',
'x': numbers_width,
'y': '36', 'y': '36',
'font-face': '\'PT Sans\', sans-serif', 'font-face': '\'PT Sans\', sans-serif',
'font-weight': 'bold', 'font-weight': 'bold',
@ -69,6 +72,7 @@ d3.json( numbers_url,
.append( 'svg' ) .append( 'svg' )
.style( 'margin', '15px 0px 0px 0px' ) .style( 'margin', '15px 0px 0px 0px' )
.style( 'padding', '0px 10px 20px 10px' ) .style( 'padding', '0px 10px 20px 10px' )
.style( 'float', 'right' )
.attr( 'width', numbers_width + 'px' ) .attr( 'width', numbers_width + 'px' )
.attr( 'height', numbers_height + 'px' ); .attr( 'height', numbers_height + 'px' );
@ -78,7 +82,8 @@ d3.json( numbers_url,
( 'ready and waiting' ) ( 'ready and waiting' )
) )
.attr( { .attr( {
'x': '5', 'text-anchor': 'end',
'x': numbers_width,
'y': numbers_height, 'y': numbers_height,
'font-face': '\'PT Sans\', sans-serif', 'font-face': '\'PT Sans\', sans-serif',
'font-size': '12px', 'font-size': '12px',
@ -92,7 +97,8 @@ d3.json( numbers_url,
( stats_vmpooler_numbers__data__live[ 'ready' ] ) ( stats_vmpooler_numbers__data__live[ 'ready' ] )
) )
.attr( { .attr( {
'x': '0', 'text-anchor': 'end',
'x': numbers_width,
'y': '36', 'y': '36',
'font-face': '\'PT Sans\', sans-serif', 'font-face': '\'PT Sans\', sans-serif',
'font-weight': 'bold', 'font-weight': 'bold',
@ -105,6 +111,7 @@ d3.json( numbers_url,
.append( 'svg' ) .append( 'svg' )
.style( 'margin', '15px 0px 0px 0px' ) .style( 'margin', '15px 0px 0px 0px' )
.style( 'padding', '0px 10px 20px 10px' ) .style( 'padding', '0px 10px 20px 10px' )
.style( 'float', 'right' )
.attr( 'width', numbers_width + 'px' ) .attr( 'width', numbers_width + 'px' )
.attr( 'height', numbers_height + 'px' ); .attr( 'height', numbers_height + 'px' );
@ -114,7 +121,8 @@ d3.json( numbers_url,
( 'being cloned' ) ( 'being cloned' )
) )
.attr( { .attr( {
'x': '5', 'text-anchor': 'end',
'x': numbers_width,
'y': numbers_height, 'y': numbers_height,
'font-face': '\'PT Sans\', sans-serif', 'font-face': '\'PT Sans\', sans-serif',
'font-size': '12px', 'font-size': '12px',
@ -128,7 +136,8 @@ d3.json( numbers_url,
( stats_vmpooler_numbers__data__live[ 'cloning' ] ) ( stats_vmpooler_numbers__data__live[ 'cloning' ] )
) )
.attr( { .attr( {
'x': '0', 'text-anchor': 'end',
'x': numbers_width,
'y': '36', 'y': '36',
'font-face': '\'PT Sans\', sans-serif', 'font-face': '\'PT Sans\', sans-serif',
'font-weight': 'bold', 'font-weight': 'bold',
@ -141,6 +150,7 @@ d3.json( numbers_url,
.append( 'svg' ) .append( 'svg' )
.style( 'margin', '15px 0px 0px 0px' ) .style( 'margin', '15px 0px 0px 0px' )
.style( 'padding', '0px 10px 20px 10px' ) .style( 'padding', '0px 10px 20px 10px' )
.style( 'float', 'right' )
.attr( 'width', numbers_width + 'px' ) .attr( 'width', numbers_width + 'px' )
.attr( 'height', numbers_height + 'px' ); .attr( 'height', numbers_height + 'px' );
@ -150,7 +160,8 @@ d3.json( numbers_url,
( 'booting up' ) ( 'booting up' )
) )
.attr( { .attr( {
'x': '5', 'text-anchor': 'end',
'x': numbers_width,
'y': numbers_height, 'y': numbers_height,
'font-face': '\'PT Sans\', sans-serif', 'font-face': '\'PT Sans\', sans-serif',
'font-size': '12px', 'font-size': '12px',
@ -164,7 +175,8 @@ d3.json( numbers_url,
( stats_vmpooler_numbers__data__live[ 'booting' ] ) ( stats_vmpooler_numbers__data__live[ 'booting' ] )
) )
.attr( { .attr( {
'x': '0', 'text-anchor': 'end',
'x': numbers_width,
'y': '36', 'y': '36',
'font-face': '\'PT Sans\', sans-serif', 'font-face': '\'PT Sans\', sans-serif',
'font-weight': 'bold', 'font-weight': 'bold',
@ -183,6 +195,7 @@ d3.json( numbers_url,
.append( 'svg' ) .append( 'svg' )
.style( 'margin', '15px 0px 0px 0px' ) .style( 'margin', '15px 0px 0px 0px' )
.style( 'padding', '0px 10px 20px 10px' ) .style( 'padding', '0px 10px 20px 10px' )
.style( 'float', 'right' )
.attr( 'width', numbers_width + 'px' ) .attr( 'width', numbers_width + 'px' )
.attr( 'height', numbers_height + 'px' ); .attr( 'height', numbers_height + 'px' );
@ -192,7 +205,8 @@ d3.json( numbers_url,
( 'running tests' ) ( 'running tests' )
) )
.attr( { .attr( {
'x': '5', 'text-anchor': 'end',
'x': numbers_width,
'y': numbers_height, 'y': numbers_height,
'font-face': '\'PT Sans\', sans-serif', 'font-face': '\'PT Sans\', sans-serif',
'font-size': '12px', 'font-size': '12px',
@ -206,7 +220,8 @@ d3.json( numbers_url,
( stats_vmpooler_numbers__data__live[ 'running' ] ) ( stats_vmpooler_numbers__data__live[ 'running' ] )
) )
.attr( { .attr( {
'x': '0', 'text-anchor': 'end',
'x': numbers_width,
'y': '36', 'y': '36',
'font-face': '\'PT Sans\', sans-serif', 'font-face': '\'PT Sans\', sans-serif',
'font-weight': 'bold', 'font-weight': 'bold',
@ -219,6 +234,8 @@ d3.json( numbers_url,
.append( 'svg' ) .append( 'svg' )
.style( 'margin', '15px 0px 0px 0px' ) .style( 'margin', '15px 0px 0px 0px' )
.style( 'padding', '0px 10px 20px 10px' ) .style( 'padding', '0px 10px 20px 10px' )
.style( 'float', 'right' )
.style( 'text-align', 'right' )
.attr( 'width', numbers_width + 'px' ) .attr( 'width', numbers_width + 'px' )
.attr( 'height', numbers_height + 'px' ); .attr( 'height', numbers_height + 'px' );
@ -228,7 +245,8 @@ d3.json( numbers_url,
( 'waiting to die' ) ( 'waiting to die' )
) )
.attr( { .attr( {
'x': '5', 'text-anchor': 'end',
'x': numbers_width,
'y': numbers_height, 'y': numbers_height,
'font-face': '\'PT Sans\', sans-serif', 'font-face': '\'PT Sans\', sans-serif',
'font-size': '12px', 'font-size': '12px',
@ -242,7 +260,8 @@ d3.json( numbers_url,
( stats_vmpooler_numbers__data__live[ 'completed' ] ) ( stats_vmpooler_numbers__data__live[ 'completed' ] )
) )
.attr( { .attr( {
'x': '0', 'text-anchor': 'end',
'x': numbers_width,
'y': '36', 'y': '36',
'font-face': '\'PT Sans\', sans-serif', 'font-face': '\'PT Sans\', sans-serif',
'font-weight': 'bold', 'font-weight': 'bold',

2
lib/vmpooler/public/lib/stats-vmpooler-running.js
View file

@ -119,7 +119,7 @@ d3.json( running_url+'?history=1',
.append( 'svg' ) .append( 'svg' )
.attr( 'height', running_height ) .attr( 'height', running_height )
.attr( 'width', ( document.getElementById( 'stats-vmpooler-running' ).offsetWidth - 35 ) ) .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' ) .style( 'padding', '0px 10px 10px 10px' )
.append( 'g' ); .append( 'g' );

12
lib/vmpooler/views/dashboard.erb
View file

@ -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 --> <!-- stats-vmpooler-running -->
<div class='label'>VMs running tests</div> <div class='label'>VMs running tests</div>

5
lib/vmpooler/views/layout.erb
View file

@ -18,7 +18,12 @@
<div id='header'> <div id='header'>
<embed src='/img/logo.jpg' width='200px' height='150px' class='logo' /> <embed src='/img/logo.jpg' width='200px' height='150px' class='logo' />
<div class='text'><%= site_name %></div> <div class='text'><%= site_name %></div>
<div id='stats-vmpooler-numbers' class='module'></div>
<script src='/lib/stats-vmpooler-numbers.js'></script>
</div> </div>
<%= yield %> <%= yield %>