Commit 568b9de9 by Kálmán Viktor

dashboard: vm create UI improvements

parent 32ce5d44
......@@ -59,6 +59,60 @@ $(function () {
vmCreateLoaded();
});
function vmCreateTemplateChange(new_this) {
this.value = new_this.value;
if(this.value < 0) return;
$.ajax({
url: '/dashboard/template/' + this.value,
type: 'GET',
success: function(data, textStatus, xhr) {
if(xhr.status == 200) {
// set sliders
$('#cpu-priority-slider').simpleSlider("setValue", data['priority']);
$('#cpu-count-slider').simpleSlider("setValue", data['num_cores']);
$('#ram-slider').simpleSlider("setValue", data['ram_size']);
$('#vm-create-network-list').html('');
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)
);
}
vmCreateAddRemoveNetworkClick();
}
}
});
}
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> ';
}
// #TODO this doesn't feel right
function vmCreateAddRemoveNetworkClick() {
$('.vm-create-remove-network').click(function() {
var vlan_pk = ($(this).parent('span').prop('id')).replace('vlan-', '');
$(this).parent('span').fadeOut(500, function() {
$(this).remove();
var vlan_name = $(this).text();
$('#vm-create-network-add-select').append($('<option>', {
value: vlan_pk,
text: vlan_name
}));
if ($('#vm-create-network-list').children('span').length < 1) {
$('#vm-create-network-list').append('Not added to any network!');
}
});
return false;
});
}
function vmCreateLoaded() {
// temporarily disable for testing
//$('.vm-create-advanced').hide();
......@@ -71,7 +125,26 @@ function vmCreateLoaded() {
}
});
$('#vm-create-template-select').change(function() {
vmCreateTemplateChange(this);
});
$('#vm-create-network-add-button').click(function() {
var option = $('#vm-create-network-add-select :selected');
if(option.val() > 0) {
if ($('#vm-create-network-list').children('span').length < 1) {
$('#vm-create-network-list').html('');
}
$('#vm-create-network-list').append(
vmCreateNetworkLabel(option.val(), option.text(), true)
);
$('option:selected', $('#vm-create-network-add-select')).remove();
vmCreateAddRemoveNetworkClick();
}
return false;
});
$("[data-slider]").each(function() {
if($(this).css('display') != "none")
$(this).simpleSlider();
......
<style>
.row {
margin-bottom: 15px;
......@@ -6,12 +5,11 @@
</style>
<div class="row">
<div class="col-sm-10">
<select class="select form-control">
<option>Menő gép</option>
<option>Menő gép</option>
<option>Menő gép</option>
<option>Menő gép</option>
<option>Menő gép</option>
<select class="select form-control" id="vm-create-template-select">
<option value="-1">Choose a VM template</option>
{% for template in templates %}
<option value="{{ template.pk }}">{{ template.name}}</option>
{% endfor %}
</select>
</div>
</div>
......@@ -43,7 +41,7 @@
</h3>
<h3>
<div class="input-group" style="max-width: 300px;">
<select class="form-control">
<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>
......@@ -74,20 +72,19 @@
}
</style>
<div class="col-sm-8" style="padding-top: 3px;">
<h3>
<span class="label label-primary"><i class="icon-globe"></i> vmnet <a href="#" class="hover-black"><i class="icon-remove-sign"></i></a></span>
<span class="label label-default"><i class="icon-link"></i> grid <a href="#" class="hover-black"><i class="icon-remove-sign hover-danger"></i></a></span>
<h3 id="vm-create-network-list">
Not added to any network!
</h3>
<h3>
<h3 id="vm-create-network-add">
<div class="input-group" style="max-width: 300px;">
<select class="form-control">
<select class="form-control" id="vm-create-network-add-select">
<option value="1">vmnet2</option>
<option value="2">PUB</option>
<option value="3">OFF</option>
</select>
<div class="input-group-btn">
<!--<input type="submit" value="Add to network" class="btn btn-success"/>-->
<a href="" 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>
</div>
</div>
</h3>
......
from django.conf.urls import patterns, url
from .views import IndexView, VmDetailView, VmList, VmCreate
from .views import IndexView, VmDetailView, VmList, VmCreate, TemplateDetail
urlpatterns = patterns(
'',
url(r'^$', IndexView.as_view()),
url(r'^template/(?P<pk>\d+)/$', TemplateDetail.as_view(),
name='dashboard.views.template-detail'),
url(r'^vm/(?P<pk>\d+)/$', VmDetailView.as_view(),
name='dashboard.views.detail'),
url(r'^vm/list/$', VmList.as_view(), name='dashboard.views.vm-list'),
......
from django.http import HttpResponse
from django.views.generic import TemplateView, DetailView
from django_tables2 import SingleTableView
from tables import VmListTable
from vm.models import Instance
from vm.models import Instance, InstanceTemplate, InterfaceTemplate
from django.core import signing
import json
class IndexView(TemplateView):
template_name = "dashboard/index.html"
......@@ -50,6 +53,37 @@ class VmDetailView(DetailView):
return context
class TemplateDetail(DetailView):
model = InstanceTemplate
def get(self, request, *args, **kwargs):
if request.is_ajax():
template = InstanceTemplate.objects.get(pk=kwargs['pk'])
template = {
'num_cores': template.num_cores,
'ram_size': template.ram_size,
'priority': template.priority,
'arch': template.arch,
'description': template.description,
'system': template.system,
'name': template.name,
'disks': [{'pk': d.pk, 'name': d.name}
for d in template.disks.all()],
'network': [
{'vlan_pk': i.vlan.pk, 'vlan': i.vlan.name,
'managed': i.managed}
for i in InterfaceTemplate.objects.filter(
template=self.get_object()).all()
]
}
print template
return HttpResponse(json.dumps(template),
content_type="application/json")
else:
# return super(TemplateDetail, self).get(request, *args, **kwargs)
return HttpResponse('soon')
class VmList(SingleTableView):
template_name = "dashboard/vm-list.html"
model = Instance
......@@ -73,3 +107,12 @@ class VmCreate(TemplateView):
'box_title': 'Create a VM'
})
return self.render_to_response(context)
def get_context_data(self, **kwargs):
context = super(VmCreate, self).get_context_data(**kwargs)
context.update({
# TODO acl
'templates': InstanceTemplate.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