[Kimchi-devel] [PATCHv4 2/3] UI: Support add guest disk

From: Royce Lv <lvroyce(a)linux.vnet.ibm.com&gt; Extend current cdrom disk add to cdrom disk attachment. Also add 'bus' for user to choose from. Signed-off-by: Royce Lv <lvroyce(a)linux.vnet.ibm.com&gt; --- ui/css/theme-default/guest-storage-add.css | 16 ++++ ui/js/src/kimchi.guest_storage_add.main.js | 137 ++++++++++++++++++++++++----- ui/pages/guest-storage-add.html.tmpl | 62 +++++++++++-- 3 files changed, 188 insertions(+), 27 deletions(-) diff --git a/ui/css/theme-default/guest-storage-add.css b/ui/css/theme-default/guest-storage-add.css index 4da8389..e0be9c0 100644 --- a/ui/css/theme-default/guest-storage-add.css +++ b/ui/css/theme-default/guest-storage-add.css @@ -52,6 +52,22 @@ cursor: not-allowed; } +.guest-storage-add-wrapper-label, .guest-storage-add-wrapper-controls { + display: inline-block; +} + +.guest-storage-add-wrapper-label { + height: 38px; + line-height: 38px; + margin-top: 5px; + vertical-align: top; + width: 80px; +} + +.guest-storage-add-wrapper-controls { + width: 470px; +} + #vm-storage-button-add[disabled] { background: #c0c0c0; color: #ddd; diff --git a/ui/js/src/kimchi.guest_storage_add.main.js b/ui/js/src/kimchi.guest_storage_add.main.js index 9e232d7..6af00cc 100644 --- a/ui/js/src/kimchi.guest_storage_add.main.js +++ b/ui/js/src/kimchi.guest_storage_add.main.js @@ -18,43 +18,136 @@ kimchi.guest_storage_add_main = function() { var types = [{ label: 'cdrom', - value: 'cdrom' + value: 'cdrom', + bus: ['ide'] + }, + { + label: 'disk', + value: 'disk', + bus: ['virtio', 'ide'] }]; kimchi.select('guest-storage-type-list', types); + kimchi.select('guest-storage-bus-list', [{label: 'ide', value: 'ide'}]); var storageAddForm = $('#form-guest-storage-add'); var submitButton = $('#guest-storage-button-add'); var nameTextbox = $('input[name="dev"]', storageAddForm); var typeTextbox = $('input[name="type"]', storageAddForm); + var busTextbox = $('input[name="bus"]', storageAddForm); var pathTextbox = $('input[name="path"]', storageAddForm); + var poolTextbox = $('input[name="pool"]', storageAddForm); + var volTextbox = $('input[name="vol"]', storageAddForm); - var submitForm = function(event) { - if(submitButton.prop('disabled')) { - return false; + typeTextbox.change(function() { + $('#guest-storage-bus').selectMenu(); + var pathObject = {'cdrom': ".path-section", 'disk': '.volume-section'} + var selectType = $(this).val(); + $.each(pathObject, function(type, value) { + if(selectType == type){ + $(value).removeClass('hidden'); + } else { + $(value).addClass('hidden'); + } + }); + + $.each(types, function(index, elem){ + if (selectType == elem.value) { + var buses = new Array(); + $.each(elem.bus, function (index, elem) { + buses[index] = {label: elem, value: elem}; + }); + $('#guest-storage-bus').selectMenu("setData", buses); + $('#guest-storage-bus-label').text(buses[0].value); + $('#guest-storage-bus-type').val(buses[0].value); + } + }); + }); + + kimchi.listStoragePools(function(result) { + var options = []; + if (result && result.length) { + $.each(result, function(index, storagePool) { + if ((storagePool.state=="active") && (storagePool.type !== 'kimchi-iso')) { + options.push({ + label: storagePool.name, + value: storagePool.name + }); + } + }); + $(poolTextbox).val('default'); + $(poolTextbox).change(); + kimchi.select('guest-add-storage-pool-list', options); } + }); - var dev = nameTextbox.val(); - var type = typeTextbox.val(); - var path = pathTextbox.val(); - if(!path || path === '') { + poolTextbox.change(function() { + var options = []; + kimchi.listStorageVolumes($(this).val(), function(result) { + $('#guest-disk').selectMenu(); + if (result.length) { + $.each(result, function(index, value) { + // Only unused volume can be attached + if (value.ref_cnt == 0) { + options.push({ + label: value.name, + value: value.name + }); + } + }); + if (options.length) { + $(volTextbox).val(options[0].value); + $(volTextbox).change(); + } + } + $('#guest-disk').selectMenu("setData", options); + }); + }); + + + typeTextbox.change(function() { + var pathObject = {'cdrom': ".path-section", 'disk': '.volume-section'} + var selectType = $(this).val(); + $.each(pathObject, function(type, value) { + if(selectType == type){ + $(value).removeClass('hidden'); + } else { + $(value).addClass('hidden'); + } + }); + + $.each(types, function(index, elem){ + if (selectType == elem.value) { + var buses = new Array(); + $.each(elem.bus, function (index, elem) { + buses[index] = {label: elem, value: elem}; + }); + $('#guest-storage-bus').selectMenu("setData", buses); + $('#guest-storage-bus-label').text(buses[0].value); + } + }); + }); + + var submitForm = function(event) { + if (submitButton.prop('disabled')) { return false; } var formData = storageAddForm.serializeObject(); - $.each([submitButton, nameTextbox, pathTextbox], function(i, c) { - $(c).prop('disabled', true); - }); - $(submitButton).addClass('loading').text(i18n['KCHVMCD6003M']); - var settings = { vm: kimchi.selectedGuest, - type: type, - path: path + type: typeTextbox.val(), + bus: busTextbox.val() }; - if(dev && dev !== '') { - settings['dev'] = dev; - } + $(submitButton).prop('disabled', true); + $.each([nameTextbox, pathTextbox, poolTextbox, volTextbox], function(i, c) { + $(c).prop('disabled', true); + val = $(c).val() + if (val && val != '') { + settings[$(c).attr('name')] = $(c).val(); + } + }); + $(submitButton).addClass('loading').text(i18n['KCHVMCD6003M']); kimchi.addVMStorage(settings, function(result) { kimchi.window.close(); @@ -66,7 +159,7 @@ kimchi.guest_storage_add_main = function() { result['responseJSON']['reason']; kimchi.message.error(errText); - $.each([submitButton, nameTextbox, pathTextbox], function(i, c) { + $.each([submitButton, nameTextbox, pathTextbox, poolTextbox, volTextbox], function(i, c) { $(c).prop('disabled', false); }); $(submitButton).removeClass('loading').text(i18n['KCHVMCD6002M']); @@ -77,7 +170,11 @@ kimchi.guest_storage_add_main = function() { storageAddForm.on('submit', submitForm); submitButton.on('click', submitForm); - pathTextbox.on('input propertychange', function(event) { + pathTextbox.on('change input propertychange', function(event) { $(submitButton).prop('disabled', $(this).val() === ''); }); + volTextbox.on('change propertychange', function (event) { + $(submitButton).prop('disabled', $(this).val() === ''); + }); + }; diff --git a/ui/pages/guest-storage-add.html.tmpl b/ui/pages/guest-storage-add.html.tmpl index 71e0610..6574dcf 100644 --- a/ui/pages/guest-storage-add.html.tmpl +++ b/ui/pages/guest-storage-add.html.tmpl @@ -41,7 +41,7 @@ <h2>2. $_("Device Type")</h2> <div class="field"> <p class="text-help"> - $_("The device type. Currently, only \"cdrom\" is supported.") + $_("The device type. Currently, \"cdrom\" and \"disk\" are supported.") </p> <div class="btn dropdown popable"> <input id="guest-storage-type" name="type" value="cdrom" type="hidden" /> @@ -54,20 +54,68 @@ </div> </section> <section class="form-section"> - <h2>3. $_("File Path")</h2> + <h2>3. $_("Device Bus")</h2> <div class="field"> - <p class="text-help"> - $_("The ISO file path in the server for CDROM.") - </p> - <input type="text" class="text" name="path" /> + <div class="btn dropdown popable" id="guest-storage-bus"> + <input id="guest-storage-bus-type" name="bus" value='ide' type="hidden" /> + <span class="text" id="guest-storage-bus-label"></span> + <span class="arrow"></span> + <div class="popover"> + <ul class="select-list" id="guest-storage-bus-list" data-target="guest-storage-bus-type" data-label="guest-storage-bus-label"></ul> + </div> + </div> </div> </section> + <div class="volume-section hidden"> + <section class="form-section"> + <h2>4. $_("Storage Pool")</h2> + <div class="field storage-field"> + <p class="text-help"> + $_("Storage pool which volume located in") + </p> + <div class="btn dropdown popable"> + <input value="default" id="guest-disk-pool" name="pool" type="hidden"/> + <span class="text" id="guest-disk-pool-label">default</span><span class="arrow"></span> + <div class="popover" style="width: 100%"> + <ul class="select-list" id="guest-add-storage-pool-list" data-target="guest-disk-pool" data-label="guest-disk-pool-label"></ul> + </div> + </div> + </div> + </section> + <section class="form-section"> + <h2>5. $_("Storage Volume")</h2> + <div class="field storage-field"> + <p class="text-help"> + $_("Storage volume to be attached") + </p> + <div class="btn dropdown popable" id="guest-disk"> + <input id="guest-disk-vol" name="vol" type="hidden"> + <span class="text" id="guest-disk-vol-label"></span><span class="arrow"></span> + <div class="popover" style="width: 100%"> + <ul class="select-list" id="guest-add-storage-pool-list" data-target="guest-disk-vol" data-label="guest-disk-vol-label"></ul> + </div> + </div> + </div> + </section> + </div> + <div class="path-section"> + <section class="form-section"> + <h2>4. $_("File Path")</h2> + <div class="field"> + <p class="text-help"> + $_("The ISO file path in the server for CDROM.") + </p> + <input type="text" class="text" name="path" /> + </div> + </section> + </div> + </fieldset> </form> </div> <footer> <div class="btn-group"> <button id="guest-storage-button-add" class="btn-normal" disabled="disabled"> - <span class="text">$_("Attach")</span> + <span class="text">$_("Attach")</span> </button> </div> </footer> -- 1.8.3.2