From a971c5480a9997bc89b797e3e64ed1d178163c59 Mon Sep 17 00:00:00 2001
From: Kálmán Viktor <kviktor@cloud.bme.hu>
Date: Mon, 28 Oct 2013 15:27:16 +0100
Subject: [PATCH] dashboard: vm create finished network part
---
circle/dashboard/static/dashboard/dashboard.js | 81 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------------
circle/dashboard/templates/dashboard/vm-create.html | 30 ++++++++++++++++++++----------
circle/dashboard/views.py | 6 ++++--
3 files changed, 88 insertions(+), 29 deletions(-)
diff --git a/circle/dashboard/static/dashboard/dashboard.js b/circle/dashboard/static/dashboard/dashboard.js
index a96d7f3..aa65502 100644
--- a/circle/dashboard/static/dashboard/dashboard.js
+++ b/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 <options> 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();
diff --git a/circle/dashboard/templates/dashboard/vm-create.html b/circle/dashboard/templates/dashboard/vm-create.html
index 51e627a..ddf2453 100644
--- a/circle/dashboard/templates/dashboard/vm-create.html
+++ b/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>
diff --git a/circle/dashboard/views.py b/circle/dashboard/views.py
index 44d8582..c9ec8e5 100644
--- a/circle/dashboard/views.py
+++ b/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
--
libgit2 0.26.0