j3d1/webvirtcloud
1
0
Fork 0
mirror of https://github.com/retspen/webvirtcloud synced 2024-12-24 23:25:24 +00:00
Code Issues Projects Releases Wiki Activity

Change column sizes. Add icon for deselecting of disks/networks. add bus selection for disk. add device selection for disk. Some ui changes.

Browse source
This commit is contained in:
catborise 2018-11-23 15:20:51 +03:00
parent eb8aae957e
commit be75381bea
1 changed files with 70 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

109
create/templates/create_instance.html
View file

@ -248,33 +248,33 @@
<form class="form-horizontal" method="post" role="form">{% csrf_token %} <form class="form-horizontal" method="post" role="form">{% csrf_token %}
<div class="form-group"> <div class="form-group">
<label class="col-sm-3 control-label">{% trans "Name" %}</label> <label class="col-sm-3 control-label">{% trans "Name" %}</label>
<div class="col-sm-6"> <div class="col-sm-7">
<input type="text" class="form-control" name="name" placeholder="{% trans "Name" %}" maxlength="14" required pattern="[a-zA-Z0-9\.\-_]+"> <input type="text" class="form-control" name="name" placeholder="{% trans "Name" %}" maxlength="20" required pattern="[a-zA-Z0-9\.\-_]+">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-sm-3 control-label">{% trans "VCPU" %}</label> <label class="col-sm-3 control-label">{% trans "VCPU" %}</label>
<div class="col-sm-6"> <div class="col-sm-7">
<input type="text" class="form-control" name="vcpu" value="1" maxlength="2" required pattern="[0-9]"> <input type="text" class="form-control" name="vcpu" value="1" maxlength="2" required pattern="[0-9]">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-sm-3 control-label">{% trans "Host-Model" %}</label> <label class="col-sm-3 control-label">{% trans "Host-Model" %}</label>
<div class="col-sm-6"> <div class="col-sm-7">
<input type="checkbox" name="host_model" value="true" checked> <input type="checkbox" name="host_model" value="true" checked>
</div> </div>
<label class="col-sm-1 control-label">{% trans "CPU" %}</label> <label class="col-sm-1 control-label">{% trans "CPU" %}</label>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-sm-3 control-label">{% trans "RAM" %}</label> <label class="col-sm-3 control-label">{% trans "RAM" %}</label>
<div class="col-sm-6"> <div class="col-sm-7">
<input type="text" class="form-control" name="memory" value="512" maxlength="5" required pattern="[0-9]+"> <input type="text" class="form-control" name="memory" value="512" maxlength="5" required pattern="[0-9]+">
</div> </div>
<label class="col-sm-1 control-label">{% trans "MB" %}</label> <label class="col-sm-1 control-label">{% trans "MB" %}</label>
</div> </div>
<div id="disk_list_div" class="form-group" hidden> <div id="disk_list_div" class="form-group" hidden>
<label id="added_disks" class="col-sm-3 control-label">{% trans "Added Disks" %}</label> <label id="added_disks" class="col-sm-3 control-label">{% trans "Added Disks" %}</label>
<div class="col-sm-6"> <div class="col-sm-7">
<ul id="img-list" class="form-row"> <ul id="img-list" class="form-row">
<!-- populated from javascript --> <!-- populated from javascript -->
</ul> </ul>
@ -295,8 +295,8 @@
{% endif %} {% endif %}
</select> </select>
</div> </div>
<div class="col-sm-3"> <div class="col-sm-4">
<select id="image-control" name="image-control" multiple="multiple"> <select id="image-control" class="form-control" name="image-control" multiple="multiple">
<!-- populated from javascript --> <!-- populated from javascript -->
</select> </select>
</div> </div>
@ -304,14 +304,14 @@
<div class="form-group meta-prealloc"> <div class="form-group meta-prealloc">
<label class="col-sm-3 control-label">{% trans "Metadata" %}</label> <label class="col-sm-3 control-label">{% trans "Metadata" %}</label>
<div class="col-sm-6"> <div class="col-sm-7">
<input type="checkbox" name="meta_prealloc" title="Metadata preallocation" value="true"> <input type="checkbox" name="meta_prealloc" title="Metadata preallocation" value="true">
</div> </div>
<label class="col-lg-1 control-label">{% trans "Image" %}</label> <label class="col-lg-1 control-label">{% trans "Image" %}</label>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-sm-3 control-label">{% trans "HDD cache mode" %}</label> <label class="col-sm-3 control-label">{% trans "HDD cache mode" %}</label>
<div class="col-sm-6"> <div class="col-sm-7">
<select id="cache_mode" name="cache_mode" class="form-control"> <select id="cache_mode" name="cache_mode" class="form-control">
{% for mode, name in cache_modes %} {% for mode, name in cache_modes %}
<option value="{{ mode }}" {% ifequal mode default_cache %}selected {% endifequal %}> <option value="{{ mode }}" {% ifequal mode default_cache %}selected {% endifequal %}>
@ -322,7 +322,7 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-sm-3 control-label">{% trans "Network" %}</label> <label class="col-sm-3 control-label">{% trans "Network" %}</label>
<div class="col-sm-6"> <div class="col-sm-7">
<ul id="net-list"> <ul id="net-list">
<!-- populated from javascript --> <!-- populated from javascript -->
</ul> </ul>
@ -336,7 +336,7 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-sm-3 control-label">{% trans "NWFilter" %}</label> <label class="col-sm-3 control-label">{% trans "NWFilter" %}</label>
<div class="col-sm-6"> <div class="col-sm-7">
<select name="nwfilter" class="form-control"> <select name="nwfilter" class="form-control">
<option value="">{% trans "None" %}</option> <option value="">{% trans "None" %}</option>
{% for nwfilter in nwfilters %} {% for nwfilter in nwfilters %}
@ -347,7 +347,7 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-sm-3 control-label">{% trans "Video" %}</label> <label class="col-sm-3 control-label">{% trans "Video" %}</label>
<div class="col-sm-6"> <div class="col-sm-7">
<select name="video" class="form-control"> <select name="video" class="form-control">
{% if not videos %} {% if not videos %}
<option value="vga">vga</option> <option value="vga">vga</option>
@ -361,13 +361,13 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-sm-3 control-label">{% trans "Console Password" %}</label> <label class="col-sm-3 control-label">{% trans "Console Password" %}</label>
<div class="col-sm-6"> <div class="col-sm-7">
<input type="password" class="form-control" name="console_pass" placeholder="{% trans "Console Password" %}" maxlength="14"> <input type="password" class="form-control" name="console_pass" placeholder="{% trans "Console Password" %}" maxlength="14">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-sm-3 control-label">{% trans "Console Access" %}</label> <label class="col-sm-3 control-label">{% trans "Console Access" %}</label>
<div class="col-sm-6"> <div class="col-sm-7">
<select name="listener_addr" class="form-control"> <select name="listener_addr" class="form-control">
{% for addr, label in listener_addr %} {% for addr, label in listener_addr %}
<option value="{{ addr }}" {% if addr == "0.0.0.0" %} selected {% endif %}>{{ label }}</option> <option value="{{ addr }}" {% if addr == "0.0.0.0" %} selected {% endif %}>{{ label }}</option>
@ -377,7 +377,7 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-sm-3 control-label">{% trans "VirtIO" %}</label> <label class="col-sm-3 control-label">{% trans "VirtIO" %}</label>
<div class="col-sm-6"> <div class="col-sm-7">
<input type="checkbox" name="virtio" value="true" checked> <input type="checkbox" name="virtio" value="true" checked>
</div> </div>
</div> </div>
@ -400,26 +400,26 @@
<form class="form-horizontal" method="post" role="form">{% csrf_token %} <form class="form-horizontal" method="post" role="form">{% csrf_token %}
<div class="form-group"> <div class="form-group">
<label class="col-sm-3 control-label">{% trans "Name" %}</label> <label class="col-sm-3 control-label">{% trans "Name" %}</label>
<div class="col-sm-6"> <div class="col-sm-7">
<input type="text" class="form-control" name="name" placeholder="{% trans "Name" %}" maxlength="14" required pattern="[a-zA-Z0-9\.\-_]+"> <input type="text" class="form-control" name="name" placeholder="{% trans "Name" %}" maxlength="20" required pattern="[a-zA-Z0-9\.\-_]+">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-sm-3 control-label">{% trans "VCPU" %}</label> <label class="col-sm-3 control-label">{% trans "VCPU" %}</label>
<div class="col-sm-6"> <div class="col-sm-7">
<input type="text" class="form-control" name="vcpu" value="1" maxlength="2" required pattern="[0-9]"> <input type="text" class="form-control" name="vcpu" value="1" maxlength="2" required pattern="[0-9]">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-sm-3 control-label">{% trans "Host-Model" %}</label> <label class="col-sm-3 control-label">{% trans "Host-Model" %}</label>
<div class="col-sm-6"> <div class="col-sm-7">
<input type="checkbox" name="host_model" value="true" checked> <input type="checkbox" name="host_model" value="true" checked>
</div> </div>
<label class="col-sm-1 control-label">{% trans "CPU" %}</label> <label class="col-sm-1 control-label">{% trans "CPU" %}</label>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-sm-3 control-label">{% trans "RAM" %}</label> <label class="col-sm-3 control-label">{% trans "RAM" %}</label>
<div class="col-sm-6"> <div class="col-sm-7">
<input type="text" class="form-control" name="memory" value="512" maxlength="5" required pattern="[0-9]+"> <input type="text" class="form-control" name="memory" value="512" maxlength="5" required pattern="[0-9]+">
</div> </div>
<label class="col-sm-1 control-label">{% trans "MB" %}</label> <label class="col-sm-1 control-label">{% trans "MB" %}</label>
@ -440,7 +440,7 @@
{% endif %} {% endif %}
</select> </select>
</div> </div>
<div class="col-sm-3"> <div class="col-sm-4">
<select id="template" class="form-control" name="template" disabled> <select id="template" class="form-control" name="template" disabled>
<!-- populated from javascript --> <!-- populated from javascript -->
</select> </select>
@ -448,14 +448,14 @@
</div> </div>
<div class="form-group meta-prealloc"> <div class="form-group meta-prealloc">
<label class="col-sm-3 control-label">{% trans "Metadata" %}</label> <label class="col-sm-3 control-label">{% trans "Metadata" %}</label>
<div class="col-sm-6"> <div class="col-sm-7">
<input type="checkbox" name="meta_prealloc" title="Metadata preallocation" value="true"> <input type="checkbox" name="meta_prealloc" title="Metadata preallocation" value="true">
</div> </div>
<label class="col-lg-1 control-label">{% trans "Image" %}</label> <label class="col-lg-1 control-label">{% trans "Image" %}</label>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-sm-3 control-label">{% trans "HDD cache mode" %}</label> <label class="col-sm-3 control-label">{% trans "HDD cache mode" %}</label>
<div class="col-sm-6"> <div class="col-sm-7">
<select id="cache_mode" name="cache_mode" class="form-control"> <select id="cache_mode" name="cache_mode" class="form-control">
{% for mode, name in cache_modes %} {% for mode, name in cache_modes %}
<option value="{{ mode }}" {% ifequal mode default_cache %}selected {% endifequal %}> <option value="{{ mode }}" {% ifequal mode default_cache %}selected {% endifequal %}>
@ -466,7 +466,7 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-sm-3 control-label">{% trans "Network" %}</label> <label class="col-sm-3 control-label">{% trans "Network" %}</label>
<div class="col-sm-6"> <div class="col-sm-7">
<select name="networks" class="form-control"> <select name="networks" class="form-control">
{% for network in networks %} {% for network in networks %}
<option value="{{ network }}">{{ network }}</option> <option value="{{ network }}">{{ network }}</option>
@ -476,7 +476,7 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-sm-3 control-label">{% trans "NWFilter" %}</label> <label class="col-sm-3 control-label">{% trans "NWFilter" %}</label>
<div class="col-sm-6"> <div class="col-sm-7">
<select name="nwfilter" class="form-control"> <select name="nwfilter" class="form-control">
<option value="">{% trans "None" %}</option> <option value="">{% trans "None" %}</option>
{% for nwfilter in nwfilters %} {% for nwfilter in nwfilters %}
@ -485,15 +485,9 @@
</select> </select>
</div> </div>
</div> </div>
<div class="form-group">
<label class="col-sm-3 control-label">{% trans "VirtIO" %}</label>
<div class="col-sm-6">
<input type="checkbox" name="virtio" value="true" checked>
</div>
</div>
<div class="form-group"> <div class="form-group">
<label class="col-sm-3 control-label">{% trans "Video" %}</label> <label class="col-sm-3 control-label">{% trans "Video" %}</label>
<div class="col-sm-6"> <div class="col-sm-7">
<select name="video" class="form-control"> <select name="video" class="form-control">
{% if not videos %} {% if not videos %}
<option value="vga">vga</option> <option value="vga">vga</option>
@ -507,13 +501,13 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-sm-3 control-label">{% trans "Console Password" %}</label> <label class="col-sm-3 control-label">{% trans "Console Password" %}</label>
<div class="col-sm-6"> <div class="col-sm-7">
<input type="password" class="form-control" name="console_pass" placeholder="{% trans "Console Password" %}" maxlength="14"> <input type="password" class="form-control" name="console_pass" placeholder="{% trans "Console Password" %}" maxlength="14">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-sm-3 control-label">{% trans "Console Access" %}</label> <label class="col-sm-3 control-label">{% trans "Console Access" %}</label>
<div class="col-sm-6"> <div class="col-sm-7">
<select name="listener_addr" class="form-control"> <select name="listener_addr" class="form-control">
{% for addr, label in listener_addr %} {% for addr, label in listener_addr %}
<option value="{{ addr }}" {% if addr == "0.0.0.0" %} selected {% endif %}>{{ label }}</option> <option value="{{ addr }}" {% if addr == "0.0.0.0" %} selected {% endif %}>{{ label }}</option>
@ -521,6 +515,12 @@
</select> </select>
</div> </div>
</div> </div>
<div class="form-group">
<label class="col-sm-3 control-label">{% trans "VirtIO" %}</label>
<div class="col-sm-7">
<input type="checkbox" name="virtio" value="true" checked>
</div>
</div>
{% if storages %} {% if storages %}
<button type="submit" class="btn btn-primary" name="create" value="1" formnovalidate onclick="showPleaseWaitDialog()"> <button type="submit" class="btn btn-primary" name="create" value="1" formnovalidate onclick="showPleaseWaitDialog()">
@ -581,6 +581,9 @@
enableCaseInsensitiveFiltering: true, enableCaseInsensitiveFiltering: true,
maxHeight: 400, maxHeight: 400,
inheritClass: true, inheritClass: true,
buttonWidth:function (options, select) {
return '100%';
},
buttonText: function (options, select) { buttonText: function (options, select) {
return 'Add image...'; return 'Add image...';
}, },
@ -596,9 +599,22 @@
if (input_value != '') { if (input_value != '') {
$('#disk_list_div').show(); $('#disk_list_div').show();
$.each(input_value.split(','), function (index, value) { $.each(input_value.split(','), function (index, value) {
var li = '<li>hdd' + counter + var li = '<li>hdd' + counter + ' - ' +
'<select name="device' + counter + '" class="image-format" onchange="get_disk_bus_choices({{ compute_id }},' + counter + ', value);">' +
'{% for dev in disk_devices %}' +
'<option value=' + '"{{ dev }}">' + '{% trans dev %}</option>' +
'{% endfor %}' +
'</select>' +
'<select id="bus' + counter + '" name="bus' + counter + '" class="image-format">' +
'{% for bus in disk_buses %}' +
'<option value=' + '"{{ bus }}"' +
'{% if bus == default_bus %}selected{% endif %}>' +
'{% trans bus %}</option>' +
'{% endfor %}' +
'</select>' +
' -> ' + value + ' ' + ' -> ' + value + ' ' +
'<a class="btn-link" onclick="javascript:$(\'#image-control\').multiselect(\'deselect\', \'' + value + '\', true)">x</a></li>'; '<a class="btn-link pull-right" onclick="javascript:$(\'#image-control\').multiselect(\'deselect\', \'' + value + '\', true)"><i class="fa fa-remove"></i></a>' +
'</li>';
selected_list_html += li; selected_list_html += li;
counter++; counter++;
}); });
@ -619,6 +635,9 @@
buttonTitle: function (options, select) { buttonTitle: function (options, select) {
return ''; return '';
}, },
buttonWidth:function (options, select) {
return '100%';
},
onChange: function (element, checked) { onChange: function (element, checked) {
var input_value = toggleValue($('#networks').val(), element.val(), checked); var input_value = toggleValue($('#networks').val(), element.val(), checked);
$('#networks').val(input_value); $('#networks').val(input_value);
@ -628,7 +647,7 @@
$.each(input_value.split(','), function (index, value) { $.each(input_value.split(','), function (index, value) {
var li = '<li>eth' + counter + var li = '<li>eth' + counter +
' -> ' + value + ' ' + ' -> ' + value + ' ' +
'<a class="btn-link" onclick="javascript:$(\'#network-control\').multiselect(\'deselect\', \'' + value + '\', true)">x</a></li>'; '<a class="btn-link pull-right" onclick="javascript:$(\'#network-control\').multiselect(\'deselect\', \'' + value + '\', true)"><i class="fa fa-remove"></i></a></a></li>';
selected_list_html += li; selected_list_html += li;
counter++; counter++;
}); });
@ -638,13 +657,14 @@
}); });
}); });
function get_cust_vols(compute_id, pool) { function get_cust_vols(compute_id, pool) {
get_vol_url = "/computes/" + compute_id + "/storage/" + pool + "/volumes"; get_vol_url = "/computes/" + compute_id + "/storage/" + pool + "/volumes";
$.getJSON(get_vol_url, function (data) { $.getJSON(get_vol_url, function (data) {
$("#image-control").find('option').remove(); $("#image-control").find('option').remove();
$.each(data['vols'], function(i, item) { $.each(data['vols'], function(i, item) {
$("#image-control").append('<option value=' + item +'>' + item + '</option>'); $("#image-control").append('<option value=' + item +'>' + item + '</option>');
}); });
$('#image-control').multiselect('rebuild'); $('#image-control').multiselect('rebuild');
}); });
@ -660,6 +680,17 @@
}); });
$("#template").removeAttr("disabled"); $("#template").removeAttr("disabled");
} }
function get_disk_bus_choices(compute_id, dev_idx, disk_type){
get_diskBus_url = "/computes/" + compute_id + "/disk/" + disk_type + "/buses";
$.getJSON(get_diskBus_url, function (data) {
$("#bus" + dev_idx).find('option').remove();
$.each(data['bus'], function(i, item) {
$("#bus" + dev_idx).append('<option value=' + item +'>' + item + '</option>');
});
});
}
</script> </script>
<script src="{% static "js/ace.js" %}"></script> <script src="{% static "js/ace.js" %}"></script>