Skip to content

CIRCLE / cloud

Go to a project
Commit a971c548 by Kálmán Viktor
Options

dashboard: vm create finished network part

parent 3936e635
Showing with 88 additions and 29 deletions
circle/dashboard/static/dashboard/dashboard.js
......@@ -48,18 +48,42 @@ function vmCreateTemplateChange(new_this) {
type: 'GET',
success: function(data, textStatus, xhr) {
if(xhr.status == 200) {
// set sliders
// set sliders
$('#cpu-priority-slider').simpleSlider("setValue", data['priority']);
$('#cpu-count-slider').simpleSlider("setValue", data['num_cores']);
$('#ram-slider').simpleSlider("setValue", data['ram_size']);
/* clear selection */
$('select[id^="vm-create-network-add"], select[id$="managed"]').find('option').prop('selected', false);
/* append vlans from InterfaceTemplates */
$('#vm-create-network-list').html('');
var added_vlans = []
for(var n = 0; n<data['network'].length; n++) {
nn = data['network'][n]
$('#vm-create-network-list').append(
vmCreateNetworkLabel(nn.vlan_pk, nn.vlan, nn.managed)
);
$('#vm-create-network-add-form option[value="' + nn.vlan_pk + '|' + (nn.managed ? '1' : '0') + '"]').prop('selected', true);
$('#vm-create-network-add-' + (nn.managed ? '' : 'un') + 'managed option[value="' + nn.vlan_pk + '"]').prop('selected', true);
added_vlans.push(nn.vlan_pk);
}
/* remove already added vlans from dropdown or add new ones */
$('#vm-create-network-add-select').html('');
for(var i=0; i < vlans.length; i++)
if(added_vlans.indexOf(vlans[i].pk) == -1)
$('#vm-create-network-add-select').append($('<option>', {
value: vlans[i].pk,
text: vlans[i].name
}));
/* enalbe the network add button if there are not added vlans */
if(added_vlans.length != vlans.length) {
$('#vm-create-network-add-button').attr('disabled', false);
} else {
$('#vm-create-network-add-select').html('<option value="-1">We are out of &lt;options&gt; hehe</option>');
$('#vm-create-network-add-button').attr('disabled', true);
}
}
}
......@@ -71,6 +95,7 @@ function vmCreateNetworkLabel(pk, name, managed) {
}
var vlans = [];
function vmCreateLoaded() {
// temporarily disable for testing
//$('.vm-create-advanced').hide();
......@@ -89,19 +114,26 @@ function vmCreateLoaded() {
/* add network */
$('#vm-create-network-add-button').click(function() {
var option = $('#vm-create-network-add-select :selected');
var o = option.val().split('|');
var vlan_pk = o[0];
var managed = o[1];
var vlan_pk = $('#vm-create-network-add-select :selected').val();
var managed = $('#vm-create-network-add-checkbox-managed').prop('checked');
var name = $('#vm-create-network-add-select :selected').text();
if ($('#vm-create-network-list').children('span').length < 1) {
$('#vm-create-network-list').html('');
}
$('#vm-create-network-list').append(
vmCreateNetworkLabel(option.val(), option.text(), managed > 0 ? true : false)
vmCreateNetworkLabel(vlan_pk, name, managed)
);
$('#vm-create-network-add-form option[value="' + vlan_pk + '|' + (managed ? '1' : '0') + '"]').prop('selected', true);
$('option:selected', $('#vm-create-network-add-select')).remove();
/* select the network from the managed/unmanaged multiple select */
if(managed) {
$('#vm-create-network-add-managed option[value="' + vlan_pk + '"]').prop('selected', true);
} else {
$('#vm-create-network-add-unmanaged option[value="' + vlan_pk + '"]').prop('selected', true);
}
/* remove the network from select */
$('option:selected', $('#vm-create-network-add-select')).remove();
/* add dummy text if no more networks are available */
if($('#vm-create-network-add-select option').length < 1) {
$('#vm-create-network-add-button').attr('disabled', true);
......@@ -113,26 +145,30 @@ function vmCreateLoaded() {
/* remove network */
// event for network remove button (icon, X)
// TODO still not the right place
// TODO still not the right place (wrong file ...)
$('body').on('click', '.vm-create-remove-network', function() {
var value = ($(this).parent('span').prop('id')).replace('vlan-', '').split('|');
var vlan_pk = value[0];
var managed = value[1];
$(this).parent('span').fadeOut(500, function() {
var vlan_pk = ($(this).parent('span').prop('id')).replace('vlan-', '')
// if it's "blue" then it's managed, kinda not cool
var managed = $(this).parent('span').hasClass('label-primary');
$(this).parent('span').fadeOut(500, function() {
/* if ther are no more vlans disabled the add button */
if($('#vm-create-network-add-select option')[0].value == -1) {
$('#vm-create-network-add-button').attr('disabled', false);
$('#vm-create-network-add-select').html('');
}
/* remove the network label */
$(this).remove();
var vlan_name = $(this).text();
var vlan_name = $(this).text();
$('#vm-create-network-add-select').append($('<option>', {
value: vlan_pk + "|" + managed,
value: vlan_pk,
text: vlan_name
}));
$('#vm-create-network-add-form option[value="' + vlan_pk + '|' + (managed ? '1' : '0') + '"]').prop('selected', false);
/* remove the selection from the multiple select */
$('#vm-create-network-add-' + (managed ? '' : 'un') + 'managed option[value="' + vlan_pk + '"]').prop('selected', false);
if ($('#vm-create-network-list').children('span').length < 1) {
$('#vm-create-network-list').append('Not added to any network!');
}
......@@ -140,6 +176,17 @@ function vmCreateLoaded() {
return false;
});
/* copy networks from hidden select */
$('#vm-create-network-add-select').html($('#vm-create-network-add-managed').html());
/* build up network list */
$('#vm-create-network-add-select option').each(function() {
vlans.push({
'name': $(this).text(),
'pk': parseInt($(this).val())
});
});
/* no js compatibility */
$('.no-js-hidden').show();
......
circle/dashboard/templates/dashboard/vm-create.html
......@@ -61,7 +61,6 @@
</div>
<style>
/* temporary inline css for dev */
a.hover-black {
color:white;
}
......@@ -76,22 +75,33 @@
}
</style>
<div class="col-sm-8" style="padding-top: 3px;">
<select class="form-control js-hidden" id="vm-create-network-add-form" multiple>
<option value="1|1">vmnet2 - managed</option>
<option value="2|0">PUB</option>
<option value="3|0">OFF</option>
</select>
<div class="js-hidden" style="padding-top: 15px;">
<h4>Managed networks</h4>
<select class="form-control" id="vm-create-network-add-managed" multiple>
{% for v in vlans %}
<option value="{{ v.pk }}">{{ v.name }}</option>
{% endfor %}
</select>
<h4>Unmanaged networks</h4>
<select class="form-control" id="vm-create-network-add-unmanaged" multiple>
{% for v in vlans %}
<option value="{{ v.pk }}">{{ v.name }}</option>
{% endfor %}
</select>
</div>
<div class="no-js-hidden">
<h3 id="vm-create-network-list" class="no-js-hidden">
Not added to any network!
</h3>
<h3 id="vm-create-network-add">
<div class="input-group" style="max-width: 300px;">
<div class="input-group" style="max-width: 330px;">
<select class="form-control" id="vm-create-network-add-select">
<option value="1|1">vmnet2</option>
<option value="2|0">PUB</option>
<option value="3|0">OFF</option>
<!-- options should be copied via js from above -->
</select>
<span class="input-group-addon">
<input id="vm-create-network-add-checkbox-managed" type="checkbox" title data-original-title="Managed network?" style="-webkit-transform: scale(1.4, 1.4); margin-top: 4px;" checked/>
</span>
<div class="input-group-btn">
<!--<input type="submit" value="Add to network" class="btn btn-success"/>-->
<a href="#" id="vm-create-network-add-button" class="btn btn-success"><i class="icon-plus-sign"></i></a>
......
circle/dashboard/views.py
......@@ -5,6 +5,7 @@ from django_tables2 import SingleTableView
from tables import VmListTable
from vm.models import Instance, InstanceTemplate, InterfaceTemplate
from firewall.models import Vlan
from django.core import signing
import json
......@@ -108,9 +109,10 @@ class VmCreate(TemplateView):
def get_context_data(self, **kwargs):
context = super(VmCreate, self).get_context_data(**kwargs)
# TODO acl
context.update({
# TODO acl
'templates': InstanceTemplate.objects.all()
'templates': InstanceTemplate.objects.all(),
'vlans': Vlan.objects.all()
})
return context
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment