Skip to content

Gutyán Gábor / circlestack

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 disks = [];
function vmCreateLoaded() {
// temporarily disable for testing
//$('.vm-create-advanced').hide();
......@@ -15,6 +16,8 @@ function vmCreateLoaded() {
vmCreateTemplateChange(this);
});
/* network thingies */
/* add network */
$('#vm-create-network-add-button').click(function() {
var vlan_pk = $('#vm-create-network-add-select :selected').val();
......@@ -48,7 +51,6 @@ function vmCreateLoaded() {
/* remove network */
// event for network remove button (icon, X)
// TODO still not the right place (wrong file ...)
$('body').on('click', '.vm-create-remove-network', function() {
var vlan_pk = ($(this).parent('span').prop('id')).replace('vlan-', '')
// if it's "blue" then it's managed, kinda not cool
......@@ -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-hidden').show();
$('.js-hidden').hide();
......@@ -109,8 +182,9 @@ function vmCreateTemplateChange(new_this) {
$('#cpu-count-slider').simpleSlider("setValue", data['num_cores']);
$('#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);
$('#vm-create-disk-add-form').find('option').prop('selected', false);
/* append vlans from InterfaceTemplates */
$('#vm-create-network-list').html('');
......@@ -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-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) {
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> ';
}
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 @@
{% include "dashboard/vm-detail-resources.html" %}
</div>
<!-- disk -->
<div class="row">
<div class="col-sm-4">
<h2>Disks</h2>
</div>
<div class="col-sm-8" style="padding-top: 3px;">
<h3>
<span class="label label-primary"><i class="icon-file"></i> default <a href="#" class="hover-black"><i class="icon-remove-sign"></i></a></span>
</h3>
<h3>
<div class="input-group" style="max-width: 300px;">
<select class="form-control" id="vm-create-disks-add">
<option value="1">yo disk</option>
<option value="2">huge</option>
<option value="3">minor</option>
</select>
<div class="input-group-btn">
<!--<input type="submit" value="Add disk" class="btn btn-success"/>-->
<a href="" class="btn btn-success"><i class="icon-plus-sign"></i></a>
<div class="js-hidden" style="padding-top: 15px;">
<select class="form-control" id="vm-create-disk-add-form" multiple>
{% for d in disks %}
<option value="{{ d.pk }}">{{ d.name }}</option>
{% endfor %}
</select>
</div>
<div class="no-js-hidden">
<h3 id="vm-create-disk-list">
No disks are added!
</h3>
<h3 id="vm-create-disk-add">
<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>
</h3>
</h3>
</div>
</div>
</div>
<!-- network -->
<div class="row">
<div class="col-sm-4">
<h2>Network</h2>
......@@ -91,7 +100,7 @@
</select>
</div>
<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!
</h3>
<h3 id="vm-create-network-add">
......
circle/dashboard/views.py
......@@ -6,6 +6,7 @@ from tables import VmListTable
from vm.models import Instance, InstanceTemplate, InterfaceTemplate
from firewall.models import Vlan
from storage.models import Disk
from django.core import signing
import json
......@@ -112,7 +113,8 @@ class VmCreate(TemplateView):
# TODO acl
context.update({
'templates': InstanceTemplate.objects.all(),
'vlans': Vlan.objects.all()
'vlans': Vlan.objects.all(),
'disks': Disk.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