Skip to content

Gutyán Gábor / circlestack

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

dashboard: vm create finished network part

parent 3936e635
Showing with 84 additions and 25 deletions
circle/dashboard/static/dashboard/dashboard.js
...@@ -53,13 +53,37 @@ function vmCreateTemplateChange(new_this) { ...@@ -53,13 +53,37 @@ function vmCreateTemplateChange(new_this) {
$('#cpu-count-slider').simpleSlider("setValue", data['num_cores']); $('#cpu-count-slider').simpleSlider("setValue", data['num_cores']);
$('#ram-slider').simpleSlider("setValue", data['ram_size']); $('#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(''); $('#vm-create-network-list').html('');
var added_vlans = []
for(var n = 0; n<data['network'].length; n++) { for(var n = 0; n<data['network'].length; n++) {
nn = data['network'][n] nn = data['network'][n]
$('#vm-create-network-list').append( $('#vm-create-network-list').append(
vmCreateNetworkLabel(nn.vlan_pk, nn.vlan, nn.managed) 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) { ...@@ -71,6 +95,7 @@ function vmCreateNetworkLabel(pk, name, managed) {
} }
var vlans = [];
function vmCreateLoaded() { function vmCreateLoaded() {
// temporarily disable for testing // temporarily disable for testing
//$('.vm-create-advanced').hide(); //$('.vm-create-advanced').hide();
...@@ -89,17 +114,24 @@ function vmCreateLoaded() { ...@@ -89,17 +114,24 @@ function vmCreateLoaded() {
/* add network */ /* add network */
$('#vm-create-network-add-button').click(function() { $('#vm-create-network-add-button').click(function() {
var option = $('#vm-create-network-add-select :selected'); var vlan_pk = $('#vm-create-network-add-select :selected').val();
var o = option.val().split('|'); var managed = $('#vm-create-network-add-checkbox-managed').prop('checked');
var vlan_pk = o[0]; var name = $('#vm-create-network-add-select :selected').text();
var managed = o[1];
if ($('#vm-create-network-list').children('span').length < 1) { if ($('#vm-create-network-list').children('span').length < 1) {
$('#vm-create-network-list').html(''); $('#vm-create-network-list').html('');
} }
$('#vm-create-network-list').append( $('#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);
/* 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(); $('option:selected', $('#vm-create-network-add-select')).remove();
/* add dummy text if no more networks are available */ /* add dummy text if no more networks are available */
...@@ -113,26 +145,30 @@ function vmCreateLoaded() { ...@@ -113,26 +145,30 @@ function vmCreateLoaded() {
/* remove network */ /* remove network */
// event for network remove button (icon, X) // 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() { $('body').on('click', '.vm-create-remove-network', function() {
var value = ($(this).parent('span').prop('id')).replace('vlan-', '').split('|'); var vlan_pk = ($(this).parent('span').prop('id')).replace('vlan-', '')
var vlan_pk = value[0]; // if it's "blue" then it's managed, kinda not cool
var managed = value[1]; var managed = $(this).parent('span').hasClass('label-primary');
$(this).parent('span').fadeOut(500, function() { $(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) { if($('#vm-create-network-add-select option')[0].value == -1) {
$('#vm-create-network-add-button').attr('disabled', false); $('#vm-create-network-add-button').attr('disabled', false);
$('#vm-create-network-add-select').html(''); $('#vm-create-network-add-select').html('');
} }
/* remove the network label */
$(this).remove(); $(this).remove();
var vlan_name = $(this).text();
var vlan_name = $(this).text();
$('#vm-create-network-add-select').append($('<option>', { $('#vm-create-network-add-select').append($('<option>', {
value: vlan_pk + "|" + managed, value: vlan_pk,
text: vlan_name 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) { if ($('#vm-create-network-list').children('span').length < 1) {
$('#vm-create-network-list').append('Not added to any network!'); $('#vm-create-network-list').append('Not added to any network!');
} }
...@@ -140,6 +176,17 @@ function vmCreateLoaded() { ...@@ -140,6 +176,17 @@ function vmCreateLoaded() {
return false; 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 compatibility */
$('.no-js-hidden').show(); $('.no-js-hidden').show();
......
circle/dashboard/templates/dashboard/vm-create.html
...@@ -61,7 +61,6 @@ ...@@ -61,7 +61,6 @@
</div> </div>
<style> <style>
/* temporary inline css for dev */ /* temporary inline css for dev */
a.hover-black { a.hover-black {
color:white; color:white;
} }
...@@ -76,22 +75,33 @@ ...@@ -76,22 +75,33 @@
} }
</style> </style>
<div class="col-sm-8" style="padding-top: 3px;"> <div class="col-sm-8" style="padding-top: 3px;">
<select class="form-control js-hidden" id="vm-create-network-add-form" multiple> <div class="js-hidden" style="padding-top: 15px;">
<option value="1|1">vmnet2 - managed</option> <h4>Managed networks</h4>
<option value="2|0">PUB</option> <select class="form-control" id="vm-create-network-add-managed" multiple>
<option value="3|0">OFF</option> {% for v in vlans %}
<option value="{{ v.pk }}">{{ v.name }}</option>
{% endfor %}
</select> </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"> <div class="no-js-hidden">
<h3 id="vm-create-network-list" class="no-js-hidden"> <h3 id="vm-create-network-list" class="no-js-hidden">
Not added to any network! Not added to any network!
</h3> </h3>
<h3 id="vm-create-network-add"> <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"> <select class="form-control" id="vm-create-network-add-select">
<option value="1|1">vmnet2</option> <!-- options should be copied via js from above -->
<option value="2|0">PUB</option>
<option value="3|0">OFF</option>
</select> </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"> <div class="input-group-btn">
<!--<input type="submit" value="Add to network" class="btn btn-success"/>--> <!--<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> <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 ...@@ -5,6 +5,7 @@ from django_tables2 import SingleTableView
from tables import VmListTable from tables import VmListTable
from vm.models import Instance, InstanceTemplate, InterfaceTemplate from vm.models import Instance, InstanceTemplate, InterfaceTemplate
from firewall.models import Vlan
from django.core import signing from django.core import signing
import json import json
...@@ -108,9 +109,10 @@ class VmCreate(TemplateView): ...@@ -108,9 +109,10 @@ class VmCreate(TemplateView):
def get_context_data(self, **kwargs): def get_context_data(self, **kwargs):
context = super(VmCreate, self).get_context_data(**kwargs) context = super(VmCreate, self).get_context_data(**kwargs)
context.update({
# TODO acl # TODO acl
'templates': InstanceTemplate.objects.all() context.update({
'templates': InstanceTemplate.objects.all(),
'vlans': Vlan.objects.all()
}) })
return context 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