change_slider_type(type);
}
+
+function set_simple_slider(slider_id, value_id, min_value, max_value, max_available_value, start_value, step_value){
+ if(typeof(start_value) == 'undefined'){
+ start_value = min_value;
+ }
+
+ if(typeof(step_value) == 'undefined'){
+ step_value = 1;
+ }
+
+ if(max_available_value < start_value){
+ alert("${_('Start value is more than max available value!')}");
+ return false;
+ }
+
+ var str_slider_id = slider_id.replace("#", "");
+ var str_slider_left_id = str_slider_id + '_left';
+ var slider_left_id = slider_id + '_left';
+
+ $(slider_id).html('<div id="' + str_slider_left_id + '" data-corner="left 5px" class="slider-left"></div>');
+ set_left_area_func = function(){
+ var left_value = $("div.ui-slider-range").css("left");
+ $(slider_left_id).css("width", left_value);
+ }
+
+ // set slider
+ $(slider_id).slider('destroy');
+ $(slider_id).slider({
+ range: true,
+ min: min_value,
+ max: max_value,
+ step: step_value,
+ values: [start_value, max_available_value],
+ startValue: start_value,
+ slide: function(event, ui){
+ set_left_area_func();
+ $(value_id).val(ui.values[0]);
+ }
+ });
+
+ // corner
+ $(slider_id).corner('round 5px');
+
+ // set left area
+ set_left_area_func();
+
+ // remove right handle
+ $(slider_id).unbind();
+ $(slider_id).bind('slidechange', function(event, ui){
+ set_left_area_func();
+ if(max_available_value != ui.values[1]){
+ $(this).slider("values", 1, max_available_value);
+ }
+ });
+ if($("a", slider_id).size() > 1){
+ $("a.:last-child", slider_id).hide();
+ }
+
+ // set value
+ $(value_id).unbind();
+ $(value_id).change(function(){
+ $(slider_id).slider("values", 0, $(this).val());
+ });
+ $(value_id).val(start_value);
+}
+
+
}
// pool function
-function switch_section() {
- var _checkedObj = $("input:radio[name='disk_layout']:checked");
- if(_checkedObj.val() == "create") {
- show_element("#guest_create_disk_section",true);
- show_element("#guest_iscsi_disk_section",false);
- } else if(_checkedObj.val() == "iscsi") {
- show_element("#guest_create_disk_section",false);
- show_element("#guest_iscsi_disk_section",true);
- }
-}
function show_element(id,flag) {
if(flag) {
$(id).show();
}
}
-
$(document).ready(function(){
+ // TODO: ストレージプール毎に最大値等を設定する
+ set_simple_slider("#disk_slider", "#vm_disk_size", 0, ${int(pools_info['default']['available']) / (1024 * 1024)}, ${int(pools_info['default']['available']) / (1024 * 1024)});
+ $("#pool_dir").change(function(){
+ var pool_name = $('option:selected', this).val();
+ var disk_type = $('option:selected', this).parent('optgroup').attr('label');
+ if(disk_type == 'block'){
+ var parts = pool_name.split("_");
+ var vol_name = parts[1];
+
+ var vols_info = new Array();
+% for pool_name in sorted(pools_vols_info.keys()):
+% for vol_name in sorted(pools_vols_info[pool_name].keys()):
+ var vol_info = new Array();
+ vol_info['capacity'] = "${pools_vols_info[pool_name][vol_name]['capacity']}";
+ vols_info["${vol_name}"] = vol_info;
+% endfor
+% endfor
+ var disk_capacity = Math.floor(vols_info[vol_name]['capacity'] / (1024 * 1024));
+ $("#disk_size_box").hide();
+ $("#disk_type_value_box").html(disk_type);
+ $("#disk_available_box").hide();
+ $("#disk_capacity_value_box").html(disk_capacity);
+ $("#disk_format_box").hide();
+ } else { // type is 'dir' or 'fs'
+ var pools_info = new Array();
+% for pool_name in pools_info.keys():
+ var pool_info = new Array();
+ pool_info['available'] = "${pools_info[pool_name]['available']}";
+ pool_info['capacity'] = "${pools_info[pool_name]['capacity']}";
+ pools_info["${pool_name}"] = pool_info
+% endfor
+ var disk_available = Math.floor(pools_info[pool_name]['available'] / (1024 * 1024));
+ var disk_capacity = Math.floor(pools_info[pool_name]['capacity'] / (1024 * 1024));
+ $("#disk_size_box").show();
+ set_simple_slider("#disk_slider", "#vm_disk_size", 0, disk_available, disk_available);
+ $("#disk_type_value_box").html(disk_type);
+ $("#disk_available_box").show();
+ $("#disk_available_value_box").html(disk_available);
+ $("#disk_capacity_value_box").html(disk_capacity);
+ $("#disk_format_box").show();
+ }
+
+ });
+
$("#pool_iscsi_list").tablesorter({
widgets: ['zebra', 'select'],
headers: {
$("#mem_slider").slider("value",$(this).val());
});
- $("#disk_slider").slider({
- startValue: 4096,
- min: ${min_disk},
- max: ${max_disk},
- slide: function(event, ui){
- $("#vm_disk_size").val(ui.value);
- }
- });
-
- $("#vm_disk_size").change(function(){
- $("#disk_slider").slider("value",$(this).val());
- });
-
icon_post_event(
"#input_guest_icon_form",
"${ctx.homepath}/icon",
);
- // pool
- $("input:radio[name='disk_layout']").click(function(){
- switch_section();
- });
- switch_section();
-
$("tr[id*='pool_iscsi_row_']").each(function(){
$(this).one('click.once', function(){
var selc = $(this).attr("id").replace("pool_iscsi_row_", "").split("_");
<div class="grayout-param">${_('Storage Type')}<span id="disk_layout_help"/></div>
<div class="grayout-value grayout-form">
- <!-- TRANSLATORS: 新規作成-->
- <input type="radio" id="disk_layout_create" name="disk_layout" value="create" checked />${_("Create New Disk Image")}
- <!-- TRANSLATORS: iSCSI利用-->
- <input type="radio" id="disk_layout_iscsi" name="disk_layout" value="iscsi" /> ${_("Use iSCSI")}
- <!-- create -->
- <div id="guest_create_disk_section">
- <div class="grayout-value grayout-form">
- <table><tr>
- <th>${_("Storage Name")}<span id="guest_disk_storage_name_help"/></th>
- <th>${_("Available (MB)")}<span id="guest_disk_storage_available_help"/></th>
- <th>${_("Capacity (MB)")}<span id="guest_disk_storage_capacity_help"/></th>
- <th>${_("Disk Size (MB)")}<span id="guest_disk_storage_help"/></th>
- <th>${_("OS Image Type")}<span id="guest_disk_os_image_type_help" /></th>
- </tr><tr>
- <td><select id="pool_dir" name="pool_dir">
-% for name in pools_info.keys():
+<style type="text/css">
+.grayout-detail {
+ border: 1px solid #BCBCBC;
+ width: 100%;
+ margin: 5px 0px;
+}
+.detail-contents {
+ width: 100%;
+}
+.detail-separator{
+ height:18px;
+ width:60px;
+}
+.detail-space {
+ background:transparent url(${ctx.homepath}/static/images/kugiri-a.gif) repeat scroll 0 0;
+ height:4px;
+ margin-bottom:8px;
+ margin-top:8px;
+ width:100%;
+}
+table.detail-contents>tbody>tr>th{
+ font-weight: bold;
+ background-color: #FFFFFF;
+ padding:0px 10px;
+ width:20%;
+ text-align: left;
+ white-space: nowrap;
+}
+table.detail-contents>tbody>tr>td{
+ background-color: #FFFFFF;
+}
+</style>
+ ${_("Storage Pool Name")} :
+ <select id="pool_dir" name="pool_dir">
+<!--
+TODO: iscsiのストレージプールを表示させない。dir, fsのみ表示させる。
+-->
+% for group_type in ['dir', 'fs', 'block']:
+ <optgroup label="${group_type}">
+% for name in sorted(pools_info.keys()):
+% if group_type == 'dir' and pools_info[name]['type'] == 'dir':
+% if pools_info[name]['name'] == 'default':
+ <option value="${name}" selected>${name}</option>
+% else:
<option value="${name}">${name}</option>
-% endfor
- </select></td>
- <td>TODO : ${view_autounit(pools_info['default']['available'])}</td>
- <td>TODO : ${view_autounit(pools_info['default']['capacity'])}</td>
- <td>
- <div id="disk_slider"></div>
- <input type="text" id="vm_disk_size" name="vm_disk_size" value="4096" /><span class="require-text">${_('Require')}</span>
- </td>
- <td>
- <select id="select_disk_format" name="disk_format">
-% if "KVM" in hypervisors.keys():
-% for x in DISK_QEMU_FORMAT.values():
-% if x == "qcow2":
- <option value="${x}" selected>${x}</option>
-% else:
- <option value="${x}">${x}</option>
-% endif
-% endfor
-% else:
-% for x in DISK_NON_QEMU_FORMAT.values():
- <option value="${x}">${x}</option>
-% endfor
-% endif
- </select>
- </td>
- </tr></table>
-
+% endif
+% endif
- </div>
- </div>
- <!-- iscsi -->
- <div id="guest_iscsi_disk_section">
+% if group_type == 'fs' and pools_info[name]['type'] == 'fs':
+ <option value="${name}">${name}</option>
+% endif
+
+% if group_type == 'block' and pools_info[name]['type'] == 'iscsi':
+% for vol_name in sorted(pools_vols_info[name].keys()):
+ <option value="${name}_${vol_name}">${name}/${vol_name}</option>
+% endfor
+% endif
+% endfor
+ </optgroup>
+% endfor
+ </select>
+ <div class="grayout-detail">
<input type="hidden" id="iscsi_pool" name="iscsi_pool" value="" />
<input type="hidden" id="iscsi_volume" name="iscsi_volume" value="" />
- <div class="grayout-value grayout-form">
- <table id="pool_iscsi_list" class="tablesorter">
- <thead>
- <tr>
- <th>${_("No")}</th>
- <th>${_("Storage Pool Type")}<span id="guest_iscsi_storage_pool_type_help"/></th>
- <th>${_("Storage Pool Name")}<span id="guest_iscsi_storage_pool_help"/></th>
- <th>${_("Storage Volume Name")}<span id="guest_iscsi_storage_volume_name_help"/></th>
-<!--
- <th>${_("Volume Path")}<span id="guest_iscsi_help"/></th>
--->
+ <table class="detail-contents">
+ <tr id="disk_type_box">
+ <th>${_('Storage Pool Type')}</th>
+ <td class="detail-separator"><img src="${ctx.homepath}/static/images/table-space.gif" alt="" /></td>
+ <td id="disk_type_value_box">${pools_info['default']['type'] | h}</td>
</tr>
- </thead>
- <tbody>
-<% i = 0 %>
-% for name in pools:
-% if pools_info[name]['type'] == 'iscsi' and pools_vols_info[name]:
-% for vol in pools_vols_info[name]:
- <tr id="pool_iscsi_row_${name}_${vol['name']}">
- <td>${i+1}</td>
- <td>${pools_info[name]["type"]}</td>
- <td>${pools_info[name]["name"]}</td>
- <td>${vol["name"]}</td>
-<!--
- <td>${vol["key"]}</td>
--->
+ <tr id="disk_size_box">
+ <th>${_('Disk Size (MB)')}</th>
+ <td class="detail-separator"><img src="${ctx.homepath}/static/images/table-space.gif" alt="" /></td>
+ <td id="disk_size_value_box">
+ <div id="disk_slider"></div>
+ <input type="text" id="vm_disk_size" name="vm_disk_size" value="0" /><span class="require-text">${_('Require')}</span>
+ </td>
+ </tr>
+ <tr id="disk_available_box">
+ <th>${_('Available (MB)')}</th>
+ <td class="detail-separator"><img src="${ctx.homepath}/static/images/table-space.gif" alt="" /></td>
+ <td id="disk_available_value_box">${int(pools_info['default']['available']) / (1024 * 1024)}</td>
+ </tr>
+ <tr id="disk_capacity_box">
+ <th>${_('Capacity (MB)')}</th>
+ <td class="detail-separator"><img src="${ctx.homepath}/static/images/table-space.gif" alt="" /></td>
+ <td id="disk_capacity_value_box">${int(pools_info['default']['capacity']) / (1024 * 1024)}</td>
+ </tr>
+ <tr id="disk_format_box">
+ <th>${_('OS Image Type')}</th>
+ <td class="detail-separator"><img src="${ctx.homepath}/static/images/table-space.gif" alt="" /></td>
+ <td id="disk_format_value_box">
+ <select id="select_disk_format" name="disk_format">
+% if "KVM" in hypervisors.keys():
+% for x in DISK_QEMU_FORMAT.values():
+% if x == "qcow2":
+ <option value="${x}" selected>${x}</option>
+% else:
+ <option value="${x}">${x}</option>
+% endif
+% endfor
+% else:
+% for x in DISK_NON_QEMU_FORMAT.values():
+ <option value="${x}">${x}</option>
+% endfor
+% endif
+ </select>
+ </td>
</tr>
-<% i += 1 %>
-% endfor
-% endif
-% endfor
- <tbody>
</table>
- </div>
- </div>
+ </div>
</div>
<div class="grayout-param">${_('Bus Type')}<span id="guest_bus_type_help"/></div>
OSDN Git Service
