stackforge-attic/tuskar-ui-extras
Code Issues Proposed changes

Merge "Some basic unit tests for the tuskar.boxes js module"

Browse Source
This commit is contained in:
Jenkins 2015-01-26 13:47:42 +00:00 committed by Gerrit Code Review
commit 3f43c3ab4f
3 changed files with 166 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
tuskar_boxes/static/tuskar_boxes/js/tuskar.boxes.js
View File

@ -3,67 +3,67 @@ tuskar.boxes = (function () {
var module = {};
module.get_role_counts = function ($flavor) {
var roles = {};
$flavor.find('div.boxes-drop-roles div.boxes-role').each(function () {
var $this = $(this);
var name = $this.data('name');
var count = +$this.find('input.number-picker').val();
roles[name] = count;
});
return roles;
};
module.update_maximums = function ($flavor, roles, nodes) {
var used = 0;
$.each(roles, function (key, value) { used += value; });
$flavor.find('div.boxes-drop-roles div.boxes-role').each(function () {
var $this = $(this);
var role = $this.data('name');
var $picker = $this.find('input.number-picker');
$picker.attr('max', Math.max(0, nodes - used + roles[role]));
});
};
module.update_nodes = function ($flavor, roles) {
var role_names = Object.getOwnPropertyNames(roles);
var count = 0;
var role = 0;
$flavor.find('div.boxes-nodes div.boxes-node').each(function () {
var $this = $(this);
$this.removeClass('boxes-role-controller boxes-role-compute boxes-role-cinder-storage boxes-role-swift-storage boxes-role-none');
while (count >= roles[role_names[role]]) {
role += 1;
count = 0;
}
if (!role_names[role]) {
$(this).html('free');
$(this).addClass('boxes-role-none');
} else {
$this.addClass('boxes-role-' + role_names[role]).html(' ');
}
count += 1;
});
var free_nodes = $flavor.find('div.boxes-nodes div.boxes-role-none').length;
$flavor.find('span.free-nodes').text(free_nodes);
};
module.update_boxes = function () {
$('div.boxes-flavor').each(function () {
var $flavor = $(this);
var role_counts = module.get_role_counts($flavor);
var nodes_count = $flavor.find('div.boxes-nodes div.boxes-node').length;
module.update_nodes($flavor, role_counts);
module.update_maximums($flavor, role_counts, nodes_count);
});
};
module.init = function () {
if ($('div.boxes-available-roles').length === 0) {
// Only activate on a page that has the right classes.
return;
}
function get_role_counts($flavor) {
var roles = {};
$flavor.find('div.boxes-drop-roles div.boxes-role').each(function () {
var $this = $(this);
var name = $this.data('name');
var count = +$this.find('input.number-picker').val();
roles[name] = count;
});
return roles;
}
function update_maximums($flavor, roles) {
var nodes = $flavor.find('div.boxes-nodes div.boxes-node').length;
var used = 0;
$.each(roles, function (key, value) { used += value; });
$flavor.find('div.boxes-drop-roles div.boxes-role').each(function () {
var $this = $(this);
var role = $this.data('name');
var $picker = $this.find('input.number-picker');
$picker.attr('max', Math.max(0, nodes - used + roles[role]));
});
}
function update_nodes($flavor, roles) {
var role_names = Object.getOwnPropertyNames(roles);
var count = 0;
var role = 0;
$flavor.find('div.boxes-nodes div.boxes-node').each(function () {
var $this = $(this);
$this.removeClass('boxes-role-controller boxes-role-compute boxes-role-cinder-storage boxes-role-swift-storage boxes-role-none');
while (count >= roles[role_names[role]]) {
role += 1;
count = 0;
}
if (!role_names[role]) {
$(this).html('free');
$(this).addClass('boxes-role-none');
} else {
$this.addClass('boxes-role-' + role_names[role]).html(' ');
}
count += 1;
});
var free_nodes = $flavor.find('div.boxes-nodes div.boxes-role-none').length;
$flavor.find('span.free-nodes').text(free_nodes);
}
function update_boxes() {
$('div.boxes-flavor').each(function () {
var $flavor = $(this);
var roles = get_role_counts($flavor);
update_nodes($flavor, roles);
update_maximums($flavor, roles);
});
}
$('div.boxes-role').draggable({
revert: 'invalid',
helper: 'clone',
@ -82,7 +82,7 @@ tuskar.boxes = (function () {
ui.draggable.find('input.boxes-flavor'
).val($(this).closest('.boxes-flavor').data('flavor'));
$count.trigger('change');
window.setTimeout(update_boxes, 0);
window.setTimeout(module.update_boxes, 0);
}
});
$('div.boxes-available-roles').droppable({
@ -94,12 +94,12 @@ tuskar.boxes = (function () {
ui.draggable.appendTo(this);
ui.draggable.find('input.boxes-flavor').val('');
ui.draggable.find('input.number-picker').trigger('change').val(0);
window.setTimeout(update_boxes, 0);
window.setTimeout(module.update_boxes, 0);
}
});
update_boxes();
$('input.number-picker').change(update_boxes);
module.update_boxes();
$('input.number-picker').change(module.update_boxes);
$('.boxes-roles-menu li a').click(function () {
var name = $(this).data('role');
@ -111,7 +111,7 @@ tuskar.boxes = (function () {
if (+$count.val() < 1) { $count.val(1); }
$flavor.val($drop.closest('.boxes-flavor').data('flavor'));
$count.trigger('change');
window.setTimeout(update_boxes, 0);
window.setTimeout(module.update_boxes, 0);
});
};

55
tuskar_boxes/static/tuskar_boxes/tests/tuskar.boxes.js
View File

@ -3,7 +3,58 @@ horizon.addInitFunction(function () {
module("Tuskar boxes (tuskar.boxes.js)");
test("Passing test", function () {
equal(1, 1);
test("get_role_counts", function () {
var $flavor = $($('div.boxes-flavor')[0]);
var role_counts = tuskar.boxes.get_role_counts($flavor);
deepEqual(role_counts, {
"cinder-storage": 0,
"compute": 1,
"controller": 1,
"swift-storage": 0
});
});
test("update_maximums", function () {
var $flavor = $($('div.boxes-flavor')[0]);
var role_counts = {
"cinder-storage": 0,
"compute": 2,
"controller": 1,
"swift-storage": 0
};
tuskar.boxes.update_maximums($flavor, role_counts, 4);
equal($('div.boxes-role-cinder-storage input.number-picker').attr('max'), 1);
equal($('div.boxes-role-compute input.number-picker').attr('max'), 3);
equal($('div.boxes-role-controller input.number-picker').attr('max'), 2);
equal($('div.boxes-role-swift-storage input.number-picker').attr('max'), 1);
tuskar.boxes.update_maximums($flavor, role_counts, 2);
equal($('div.boxes-role-cinder-storage input.number-picker').attr('max'), 0);
equal($('div.boxes-role-compute input.number-picker').attr('max'), 1);
equal($('div.boxes-role-controller input.number-picker').attr('max'), 0);
equal($('div.boxes-role-swift-storage input.number-picker').attr('max'), 0);
});
test("update_nodes", function() {
var $flavor = $($('div.boxes-flavor')[0]);
var role_counts = {
"cinder-storage": 0,
"compute": 2,
"controller": 1,
"swift-storage": 0
};
equal($('div.boxes-nodes div.boxes-role-').length, 2);
equal($('div.boxes-nodes div.boxes-role-cinder-storage').length, 0);
equal($('div.boxes-nodes div.boxes-role-compute').length, 1);
equal($('div.boxes-nodes div.boxes-role-controller').length, 1);
equal($('div.boxes-nodes div.boxes-role-swift-storage').length, 0);
tuskar.boxes.update_nodes($flavor, role_counts);
equal($('div.boxes-nodes div.boxes-role-none').length, 1);
equal($('div.boxes-nodes div.boxes-role-cinder-storage').length, 0);
equal($('div.boxes-nodes div.boxes-role-compute').length, 2);
equal($('div.boxes-nodes div.boxes-role-controller').length, 1);
equal($('div.boxes-nodes div.boxes-role-swift-storage').length, 0);
});
});

52
tuskar_boxes/templates/tuskar_boxes/qunit.html
View File

@ -22,5 +22,57 @@
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">
<div class="boxes-available-roles"></div>
<div class="boxes-flavor" data-flavor="baremetal">
<div class="row">
<div class="col-md-9"><strong>Flavor:</strong> <i>baremetal</i> x86_64, 1 CPU, 4096MB RAM, 30GB Disk</div>
<div class="col-md-3"><span class="pull-right">Free Nodes:<span class="free-nodes"></span> / 4 </span></div>
</div>
<div class="row">
<div class="col-md-12"><div class="separator-line"></div></div>
</div>
<div class="row">
<div class="col-xs-5"><div class="boxes-drop-roles">
<div class="boxes-role-controller boxes-role" data-name="controller">
<div class="row">
<div class="col-xs-3 deploy-role-count"><input class="form-control number-picker" id="id_09c48fdc-ed80-4e9c-bc57-3c2783bf4dc0-count" min="1" name="09c48fdc-ed80-4e9c-bc57-3c2783bf4dc0-count" step="2" type="text" value="1" /><input class="boxes-flavor form-control" id="id_09c48fdc-ed80-4e9c-bc57-3c2783bf4dc0-flavor" name="09c48fdc-ed80-4e9c-bc57-3c2783bf4dc0-flavor" type="hidden" value="baremetal" /></div>
<div class="col-xs-6 deploy-role-label"><div class="deployment-roles-label">Controller</div></div>
<div class="col-xs-3 deploy-role-icon"><a name="role-edit-controller" href="/infrastructure/roles/09c48fdc-ed80-4e9c-bc57-3c2783bf4dc0/edit" class="btn"><b class="fa fa-lg fa-fw fa-pencil"></b></a></div>
</div>
</div>
<div class="boxes-role-swift-storage boxes-role" data-name="swift-storage" >
<div class="row">
<div class="col-xs-3 deploy-role-count"><input class="form-control number-picker" id="id_a2b6038e-d891-49f7-aeb7-a92dc38abca8-count" min="0" name="a2b6038e-d891-49f7-aeb7-a92dc38abca8-count" step="1" type="text" value="0" /><input class="boxes-flavor form-control" id="id_a2b6038e-d891-49f7-aeb7-a92dc38abca8-flavor" name="a2b6038e-d891-49f7-aeb7-a92dc38abca8-flavor" type="hidden" value="baremetal" /></div>
<div class="col-xs-6 deploy-role-label"><div class="deployment-roles-label">Swift-Storage</div></div>
<div class="col-xs-3 deploy-role-icon"><a name="role-edit-swift-storage" href="/infrastructure/roles/a2b6038e-d891-49f7-aeb7-a92dc38abca8/edit" class="btn"><b class="fa fa-lg fa-fw fa-pencil"></b></a></div>
</div>
</div>
<div class="boxes-role-compute boxes-role" data-name="compute" >
<div class="row">
<div class="col-xs-3 deploy-role-count"><input class="form-control number-picker" id="id_8c14fa61-8a62-4a6a-b43e-970769cf8aa2-count" min="1" name="8c14fa61-8a62-4a6a-b43e-970769cf8aa2-count" step="1" type="text" value="1" /><input class="boxes-flavor form-control" id="id_8c14fa61-8a62-4a6a-b43e-970769cf8aa2-flavor" name="8c14fa61-8a62-4a6a-b43e-970769cf8aa2-flavor" type="hidden" value="baremetal" /></div>
<div class="col-xs-6 deploy-role-label"><div class="deployment-roles-label">Compute</div></div>
<div class="col-xs-3 deploy-role-icon"><a name="role-edit-compute" href="/infrastructure/roles/8c14fa61-8a62-4a6a-b43e-970769cf8aa2/edit" class="btn"><b class="fa fa-lg fa-fw fa-pencil"></b></a></div>
</div>
</div>
<div class="boxes-role-cinder-storage boxes-role" data-name="cinder-storage" >
<div class="row">
<div class="col-xs-3 deploy-role-count"><input class="form-control number-picker" id="id_aa3f46c1-7f7b-4adc-8b06-bcb18254f93f-count" min="0" name="aa3f46c1-7f7b-4adc-8b06-bcb18254f93f-count" step="1" type="text" value="0" /><input class="boxes-flavor form-control" id="id_aa3f46c1-7f7b-4adc-8b06-bcb18254f93f-flavor" name="aa3f46c1-7f7b-4adc-8b06-bcb18254f93f-flavor" type="hidden" value="baremetal" /></div>
<div class="col-xs-6 deploy-role-label"><div class="deployment-roles-label">Cinder-Storage</div></div>
<div class="col-xs-3 deploy-role-icon"><a name="role-edit-cinder-storage" href="/infrastructure/roles/aa3f46c1-7f7b-4adc-8b06-bcb18254f93f/edit" class="btn"><b class="fa fa-lg fa-fw fa-pencil"></b></a></div>
</div>
</div>
</div>
<div class="btn-group boxes-drop-group"></div>
</div>
<div class="boxes-nodes col-xs-7">
<div class="boxes-node boxes-role-" data-toggle="popover" title="Free node" data-content="<dl><dt>Node UUID</dt><dd>a085de77-b2ee-4876-9c90-e5d6cc8ade77</dd><dt>Architecture</dt><dd>x86_64</dd><dt>CPUs</dt><dd>1</dt><dt>RAM (MB)</dt><dd>4096</dd><dt>HDD (GB)</dt><dd>40</dd></dl>"><i class="fa fa-lg fa-minus"></i></div>
<div class="boxes-node boxes-role-" data-toggle="popover" title="Free node" data-content="<dl><dt>Node UUID</dt><dd>5470033e-1c2a-4c5c-90c7-7d96da56ba61</dd><dt>Architecture</dt><dd>x86_64</dd><dt>CPUs</dt><dd>1</dt><dt>RAM (MB)</dt><dd>4096</dd><dt>HDD (GB)</dt><dd>40</dd></dl>"><i class="fa fa-lg fa-minus"></i></div>
<div class="boxes-node boxes-role-compute" data-toggle="popover" title="Compute node" data-content="<dl><dt>Node UUID</dt><dd>d783b2e4-059e-4e2b-a1d1-21b3d1a7dab6</dd><dt>Architecture</dt><dd>x86_64</dd><dt>CPUs</dt><dd>1</dt><dt>RAM (MB)</dt><dd>4096</dd><dt>HDD (GB)</dt><dd>40</dd></dl>"><i class="fa fa-lg fa-check"></i></div>
<div class="boxes-node boxes-role-controller" data-toggle="popover" title="Controller node" data-content="<dl><dt>Node UUID</dt><dd>9262d80e-7a25-4ded-abca-3261a77dbae1</dd><dt>Architecture</dt><dd>x86_64</dd><dt>CPUs</dt><dd>1</dt><dt>RAM (MB)</dt><dd>4096</dd><dt>HDD (GB)</dt><dd>40</dd></dl>"><i class="fa fa-lg fa-check"></i></div>
</div>
</div>
</div>
</body></html>