Skip to content

CIRCLE / cloud

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

dashboard: vm create finished disks part

parent a177e5a7
Showing with 140 additions and 19 deletions
circle/dashboard/static/dashboard/vm-create.js
var vlans = []; var vlans = [];
var disks = [];
function vmCreateLoaded() { function vmCreateLoaded() {
// temporarily disable for testing // temporarily disable for testing
//$('.vm-create-advanced').hide(); //$('.vm-create-advanced').hide();
...@@ -15,6 +16,8 @@ function vmCreateLoaded() { ...@@ -15,6 +16,8 @@ function vmCreateLoaded() {
vmCreateTemplateChange(this); vmCreateTemplateChange(this);
}); });
/* network thingies */
/* add network */ /* add network */
$('#vm-create-network-add-button').click(function() { $('#vm-create-network-add-button').click(function() {
var vlan_pk = $('#vm-create-network-add-select :selected').val(); var vlan_pk = $('#vm-create-network-add-select :selected').val();
...@@ -48,7 +51,6 @@ function vmCreateLoaded() { ...@@ -48,7 +51,6 @@ 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 (wrong file ...)
$('body').on('click', '.vm-create-remove-network', function() { $('body').on('click', '.vm-create-remove-network', function() {
var vlan_pk = ($(this).parent('span').prop('id')).replace('vlan-', '') var vlan_pk = ($(this).parent('span').prop('id')).replace('vlan-', '')
// if it's "blue" then it's managed, kinda not cool // if it's "blue" then it's managed, kinda not cool
...@@ -91,6 +93,77 @@ function vmCreateLoaded() { ...@@ -91,6 +93,77 @@ function vmCreateLoaded() {
}); });
}); });
/* ----- end of networks thingies ----- */
/* add disk */
$('#vm-create-disk-add-button').click(function() {
var disk_pk = $('#vm-create-disk-add-select :selected').val();
var name = $('#vm-create-disk-add-select :selected').text();
if ($('#vm-create-disk-list').children('span').length < 1) {
$('#vm-create-disk-list').html('');
}
$('#vm-create-disk-list').append(
vmCreateDiskLabel(disk_pk, name)
);
/* select the disk from the multiple select */
$('#vm-create-disk-add-form option[value="' + disk_pk + '"]').prop('selected', true);
$('option:selected', $('#vm-create-disk-add-select')).remove();
/* add dummy text if no more disks are available */
if($('#vm-create-disk-add-select option').length < 1) {
$('#vm-create-disk-add-button').attr('disabled', true);
$('#vm-create-disk-add-select').html('<option value="-1">We are out of &lt;options&gt; hehe</option>');
}
return false;
});
/* remove disk */
// event for disk remove button (icon, X)
$('body').on('click', '.vm-create-remove-disk', function() {
var disk_pk = ($(this).parent('span').prop('id')).replace('vlan-', '')
$(this).parent('span').fadeOut(500, function() {
/* if ther are no more disks disabled the add button */
if($('#vm-create-disk-add-select option')[0].value == -1) {
$('#vm-create-disk-add-button').attr('disabled', false);
$('#vm-create-disk-add-select').html('');
}
/* remove the disk label */
$(this).remove();
var disk_name = $(this).text();
$('#vm-create-disk-add-select').append($('<option>', {
value: disk_pk,
text: disk_name
}));
/* remove the selection from the multiple select */
$('#vm-create-disk-add-form option[value="' + disk_pk + '"]').prop('selected', false);
if ($('#vm-create-disk-list').children('span').length < 1) {
$('#vm-create-disk-list').append('No disks are added!');
}
});
return false;
});
/* copy disks from hidden select */
$('#vm-create-disk-add-select').html($('#vm-create-disk-add-form').html());
/* build up disk list */
$('#vm-create-disk-add-select option').each(function() {
disks.push({
'name': $(this).text(),
'pk': parseInt($(this).val())
});
});
/* no js compatibility */ /* no js compatibility */
$('.no-js-hidden').show(); $('.no-js-hidden').show();
$('.js-hidden').hide(); $('.js-hidden').hide();
...@@ -109,8 +182,9 @@ function vmCreateTemplateChange(new_this) { ...@@ -109,8 +182,9 @@ 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 */ /* clear selections */
$('select[id^="vm-create-network-add"], select[id$="managed"]').find('option').prop('selected', false); $('select[id^="vm-create-network-add"], select[id$="managed"]').find('option').prop('selected', false);
$('#vm-create-disk-add-form').find('option').prop('selected', false);
/* append vlans from InterfaceTemplates */ /* append vlans from InterfaceTemplates */
$('#vm-create-network-list').html(''); $('#vm-create-network-list').html('');
...@@ -141,6 +215,37 @@ function vmCreateTemplateChange(new_this) { ...@@ -141,6 +215,37 @@ function vmCreateTemplateChange(new_this) {
$('#vm-create-network-add-select').html('<option value="-1">We are out of &lt;options&gt; hehe</option>'); $('#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); $('#vm-create-network-add-button').attr('disabled', true);
} }
/* append disks */
$('#vm-create-disk-list').html('');
var added_disks = []
for(var d = 0; d<data['disks'].length; d++) {
dd = data['disks'][d]
$('#vm-create-disk-list').append(
vmCreateDiskLabel(dd.pk, dd.name)
);
$('#vm-create-disk-add-form option[value="' + dd.pk + '"]').prop('selected', true);
added_disks.push(dd.pk);
}
/* remove already added disks from dropdown or add new ones */
$('#vm-create-disk-add-select').html('');
for(var i=0; i < disks.length; i++)
if(added_disks.indexOf(disks[i].pk) == -1)
$('#vm-create-disk-add-select').append($('<option>', {
value: disks[i].pk,
text: disks[i].name
}));
/* enalbe the disk add button if there are not added disks */
if(added_disks.length != disks.length) {
$('#vm-create-disk-add-button').attr('disabled', false);
} else {
$('#vm-create-disk-add-select').html('<option value="-1">We are out of &lt;options&gt; hehe</option>');
$('#vm-create-disk-add-button').attr('disabled', true);
}
} }
} }
}); });
...@@ -149,3 +254,8 @@ function vmCreateTemplateChange(new_this) { ...@@ -149,3 +254,8 @@ function vmCreateTemplateChange(new_this) {
function vmCreateNetworkLabel(pk, name, managed) { function vmCreateNetworkLabel(pk, name, managed) {
return '<span id="vlan-' + pk + '" class="label label-' + (managed ? 'primary' : 'default') + '"><i class="icon-' + (managed ? 'globe' : 'link') + '"></i> ' + name + ' <a href="#" class="hover-black vm-create-remove-network"><i class="icon-remove-sign"></i></a></span> '; return '<span id="vlan-' + pk + '" class="label label-' + (managed ? 'primary' : 'default') + '"><i class="icon-' + (managed ? 'globe' : 'link') + '"></i> ' + name + ' <a href="#" class="hover-black vm-create-remove-network"><i class="icon-remove-sign"></i></a></span> ';
} }
function vmCreateDiskLabel(pk, name) {
return '<span id="vlan-' + pk + '" class="label label-primary"><i class="icon-file"></i> ' + name + ' <a href="#" class="hover-black vm-create-remove-disk"><i class="icon-remove-sign"></i></a></span> ';
}
circle/dashboard/templates/dashboard/vm-create.html
...@@ -31,30 +31,39 @@ ...@@ -31,30 +31,39 @@
{% include "dashboard/vm-detail-resources.html" %} {% include "dashboard/vm-detail-resources.html" %}
</div> </div>
<!-- disk -->
<div class="row"> <div class="row">
<div class="col-sm-4"> <div class="col-sm-4">
<h2>Disks</h2> <h2>Disks</h2>
</div> </div>
<div class="col-sm-8" style="padding-top: 3px;"> <div class="col-sm-8" style="padding-top: 3px;">
<h3> <div class="js-hidden" style="padding-top: 15px;">
<span class="label label-primary"><i class="icon-file"></i> default <a href="#" class="hover-black"><i class="icon-remove-sign"></i></a></span> <select class="form-control" id="vm-create-disk-add-form" multiple>
</h3> {% for d in disks %}
<h3> <option value="{{ d.pk }}">{{ d.name }}</option>
<div class="input-group" style="max-width: 300px;"> {% endfor %}
<select class="form-control" id="vm-create-disks-add"> </select>
<option value="1">yo disk</option> </div>
<option value="2">huge</option> <div class="no-js-hidden">
<option value="3">minor</option> <h3 id="vm-create-disk-list">
</select> No disks are added!
<div class="input-group-btn"> </h3>
<!--<input type="submit" value="Add disk" class="btn btn-success"/>--> <h3 id="vm-create-disk-add">
<a href="" class="btn btn-success"><i class="icon-plus-sign"></i></a> <div class="input-group" style="max-width: 330px;">
<select class="form-control" id="vm-create-disk-add-select">
<!-- options should be copied via js from above -->
</select>
<div class="input-group-btn">
<!--<input type="submit" value="Add to network" class="btn btn-success"/>-->
<a href="#" id="vm-create-disk-add-button" class="btn btn-success"><i class="icon-plus-sign"></i></a>
</div>
</div> </div>
</div> </h3>
</h3> </div>
</div> </div>
</div> </div>
<!-- network -->
<div class="row"> <div class="row">
<div class="col-sm-4"> <div class="col-sm-4">
<h2>Network</h2> <h2>Network</h2>
...@@ -91,7 +100,7 @@ ...@@ -91,7 +100,7 @@
</select> </select>
</div> </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">
Not added to any network! Not added to any network!
</h3> </h3>
<h3 id="vm-create-network-add"> <h3 id="vm-create-network-add">
......
circle/dashboard/views.py
...@@ -6,6 +6,7 @@ from tables import VmListTable ...@@ -6,6 +6,7 @@ from tables import VmListTable
from vm.models import Instance, InstanceTemplate, InterfaceTemplate from vm.models import Instance, InstanceTemplate, InterfaceTemplate
from firewall.models import Vlan from firewall.models import Vlan
from storage.models import Disk
from django.core import signing from django.core import signing
import json import json
...@@ -112,7 +113,8 @@ class VmCreate(TemplateView): ...@@ -112,7 +113,8 @@ class VmCreate(TemplateView):
# TODO acl # TODO acl
context.update({ context.update({
'templates': InstanceTemplate.objects.all(), 'templates': InstanceTemplate.objects.all(),
'vlans': Vlan.objects.all() 'vlans': Vlan.objects.all(),
'disks': Disk.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