Skip to content

Gutyán Gábor / circlestack

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

dashboard: vm create UI improvements

parent 32ce5d44
Showing with 131 additions and 16 deletions
circle/dashboard/static/dashboard/dashboard.js
...@@ -59,6 +59,60 @@ $(function () { ...@@ -59,6 +59,60 @@ $(function () {
vmCreateLoaded(); 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() { function vmCreateLoaded() {
// temporarily disable for testing // temporarily disable for testing
//$('.vm-create-advanced').hide(); //$('.vm-create-advanced').hide();
...@@ -71,6 +125,25 @@ function vmCreateLoaded() { ...@@ -71,6 +125,25 @@ 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() { $("[data-slider]").each(function() {
if($(this).css('display') != "none") if($(this).css('display') != "none")
......
circle/dashboard/templates/dashboard/vm-create.html
<style> <style>
.row { .row {
margin-bottom: 15px; margin-bottom: 15px;
...@@ -6,12 +5,11 @@ ...@@ -6,12 +5,11 @@
</style> </style>
<div class="row"> <div class="row">
<div class="col-sm-10"> <div class="col-sm-10">
<select class="select form-control"> <select class="select form-control" id="vm-create-template-select">
<option>Menő gép</option> <option value="-1">Choose a VM template</option>
<option>Menő gép</option> {% for template in templates %}
<option>Menő gép</option> <option value="{{ template.pk }}">{{ template.name}}</option>
<option>Menő gép</option> {% endfor %}
<option>Menő gép</option>
</select> </select>
</div> </div>
</div> </div>
...@@ -43,7 +41,7 @@ ...@@ -43,7 +41,7 @@
</h3> </h3>
<h3> <h3>
<div class="input-group" style="max-width: 300px;"> <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="1">yo disk</option>
<option value="2">huge</option> <option value="2">huge</option>
<option value="3">minor</option> <option value="3">minor</option>
...@@ -74,20 +72,19 @@ ...@@ -74,20 +72,19 @@
} }
</style> </style>
<div class="col-sm-8" style="padding-top: 3px;"> <div class="col-sm-8" style="padding-top: 3px;">
<h3> <h3 id="vm-create-network-list">
<span class="label label-primary"><i class="icon-globe"></i> vmnet <a href="#" class="hover-black"><i class="icon-remove-sign"></i></a></span> Not added to any network!
<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> </h3>
<h3> <h3 id="vm-create-network-add">
<div class="input-group" style="max-width: 300px;"> <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="1">vmnet2</option>
<option value="2">PUB</option> <option value="2">PUB</option>
<option value="3">OFF</option> <option value="3">OFF</option>
</select> </select>
<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="" 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>
</div> </div>
</h3> </h3>
......
circle/dashboard/urls.py
from django.conf.urls import patterns, url from django.conf.urls import patterns, url
from .views import IndexView, VmDetailView, VmList, VmCreate from .views import IndexView, VmDetailView, VmList, VmCreate, TemplateDetail
urlpatterns = patterns( urlpatterns = patterns(
'', '',
url(r'^$', IndexView.as_view()), 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(), url(r'^vm/(?P<pk>\d+)/$', VmDetailView.as_view(),
name='dashboard.views.detail'), name='dashboard.views.detail'),
url(r'^vm/list/$', VmList.as_view(), name='dashboard.views.vm-list'), url(r'^vm/list/$', VmList.as_view(), name='dashboard.views.vm-list'),
......
circle/dashboard/views.py
from django.http import HttpResponse
from django.views.generic import TemplateView, DetailView from django.views.generic import TemplateView, DetailView
from django_tables2 import SingleTableView from django_tables2 import SingleTableView
from tables import VmListTable from tables import VmListTable
from vm.models import Instance from vm.models import Instance, InstanceTemplate, InterfaceTemplate
from django.core import signing from django.core import signing
import json
class IndexView(TemplateView): class IndexView(TemplateView):
template_name = "dashboard/index.html" template_name = "dashboard/index.html"
...@@ -50,6 +53,37 @@ class VmDetailView(DetailView): ...@@ -50,6 +53,37 @@ class VmDetailView(DetailView):
return context 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): class VmList(SingleTableView):
template_name = "dashboard/vm-list.html" template_name = "dashboard/vm-list.html"
model = Instance model = Instance
...@@ -73,3 +107,12 @@ class VmCreate(TemplateView): ...@@ -73,3 +107,12 @@ class VmCreate(TemplateView):
'box_title': 'Create a VM' 'box_title': 'Create a VM'
}) })
return self.render_to_response(context) 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