[PATCHv4 0/3] UI: manage guest disks
From: Royce Lv <lvroyce@linux.vnet.ibm.com> v1>v3, Adjust html format(Aline's comments) Fix disk view display, Fix align problem in select menu(hongliang's comments) Fill default value in pool and volume box(hongliang's comments) v3>v4, Backend changed param from path to pool/vol, UI change with backend. handle option with no value.(hongliang's comments) Royce Lv (3): Fix select menu data append UI: Support add guest disk Display all disk types in storage edit view ui/css/theme-default/guest-storage-add.css | 16 ++++ ui/js/src/kimchi.guest_edit_main.js | 5 +- ui/js/src/kimchi.guest_storage_add.main.js | 137 ++++++++++++++++++++++++----- ui/js/widgets/select-menu.js | 4 +- ui/pages/guest-edit.html.tmpl | 17 +++- ui/pages/guest-storage-add.html.tmpl | 62 +++++++++++-- 6 files changed, 208 insertions(+), 33 deletions(-) -- 1.8.3.2
From: Royce Lv <lvroyce@linux.vnet.ibm.com> Select menu appended data to list, this results in items accumulating when everytime try to set data. Fix it by clear list before appending. Signed-off-by: Royce Lv <lvroyce@linux.vnet.ibm.com> --- ui/js/widgets/select-menu.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/js/widgets/select-menu.js b/ui/js/widgets/select-menu.js index 237797d..46367f2 100644 --- a/ui/js/widgets/select-menu.js +++ b/ui/js/widgets/select-menu.js @@ -26,7 +26,6 @@ this.label = this.selectDiv.find('span').first(); this.selectDiv.addClass('btn dropdown popable'); this.target.addClass('input'); - this.label.addClass('input'); this.listControl.addClass('select-list'); this.listControl.parent().addClass('popover'); }, @@ -38,6 +37,7 @@ var itemTag = 'li'; var item; if (options.length > 0) { + that.listControl.find('li').remove(); $.each(options, function(index, option) { item = $('<' + itemTag + '>' + option.label +'</' + itemTag + '>'); item.data('value', option.value); @@ -59,7 +59,7 @@ } }); } else { - kimchi.message.code.error('KCHAPI6006E'); + kimchi.message.error.code('KCHAPI6006E'); } }, -- 1.8.3.2
From: Royce Lv <lvroyce@linux.vnet.ibm.com> Extend current cdrom disk add to cdrom disk attachment. Also add 'bus' for user to choose from. Signed-off-by: Royce Lv <lvroyce@linux.vnet.ibm.com> --- 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
From: Royce Lv <lvroyce@linux.vnet.ibm.com> Instead of just displaying cdrom type in storage edit view, Add disk type to storage display view to make sure we get the right view after attach and detach new disk. Signed-off-by: Royce Lv <lvroyce@linux.vnet.ibm.com> --- ui/js/src/kimchi.guest_edit_main.js | 5 ++--- ui/pages/guest-edit.html.tmpl | 17 ++++++++++++++++- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/ui/js/src/kimchi.guest_edit_main.js b/ui/js/src/kimchi.guest_edit_main.js index 2ba6b79..0236e2d 100644 --- a/ui/js/src/kimchi.guest_edit_main.js +++ b/ui/js/src/kimchi.guest_edit_main.js @@ -34,15 +34,14 @@ kimchi.guest_edit_main = function() { var refreshCDROMs = function() { kimchi.listVMStorages({ - vm: kimchi.selectedGuest, - storageType: 'cdrom' + vm: kimchi.selectedGuest }, function(storages) { - var rowHTML = $('#cdrom-row-tmpl').html(); var container = $('#guest-edit-cdrom-row-container'); $(container).empty(); $.each(storages, function(index, storage) { storage['vm'] = kimchi.selectedGuest; + rowHTML = $('#' + storage['type'] + '-row-tmpl').html(); var templated = kimchi.template(rowHTML, storage); container.append(templated); }); diff --git a/ui/pages/guest-edit.html.tmpl b/ui/pages/guest-edit.html.tmpl index 552b4c8..96d907e 100644 --- a/ui/pages/guest-edit.html.tmpl +++ b/ui/pages/guest-edit.html.tmpl @@ -159,7 +159,22 @@ </span> <div> </script> - +<script id="disk-row-tmpl" type="text/html"> + <div> + <div class="guest-edit-wrapper-label"> + <label for="disk-{dev}">{dev}</label> + </div> + <div class="guest-edit-wrapper-controls"> + <input id="disk-{dev}" name="disk" type="text" + data-vm="{vm}" data-dev="{dev}" + value="{path}" readonly="readonly" /> + <button class="guest-edit-cdrom-button detach" + data-vm="{vm}" data-dev="{dev}" + title="$_("Detach")"> + </button> + </div> + </div> +</script> <script type="text/javascript"> kimchi.guest_edit_main(); </script> -- 1.8.3.2
Reviewed-by: Hongliang Wang <hlwang@linux.vnet.ibm.com> On 04/29/2014 06:11 PM, lvroyce@linux.vnet.ibm.com wrote:
From: Royce Lv <lvroyce@linux.vnet.ibm.com>
v1>v3, Adjust html format(Aline's comments) Fix disk view display, Fix align problem in select menu(hongliang's comments) Fill default value in pool and volume box(hongliang's comments)
v3>v4, Backend changed param from path to pool/vol, UI change with backend. handle option with no value.(hongliang's comments) Royce Lv (3): Fix select menu data append UI: Support add guest disk Display all disk types in storage edit view
ui/css/theme-default/guest-storage-add.css | 16 ++++ ui/js/src/kimchi.guest_edit_main.js | 5 +- ui/js/src/kimchi.guest_storage_add.main.js | 137 ++++++++++++++++++++++++----- ui/js/widgets/select-menu.js | 4 +- ui/pages/guest-edit.html.tmpl | 17 +++- ui/pages/guest-storage-add.html.tmpl | 62 +++++++++++-- 6 files changed, 208 insertions(+), 33 deletions(-)
Please review and apply this patchset ASAP that another patch( [WIP] Guest Edit Storage Tab Styling ) depends on it. On 04/29/2014 06:11 PM, lvroyce@linux.vnet.ibm.com wrote:
From: Royce Lv <lvroyce@linux.vnet.ibm.com>
v1>v3, Adjust html format(Aline's comments) Fix disk view display, Fix align problem in select menu(hongliang's comments) Fill default value in pool and volume box(hongliang's comments)
v3>v4, Backend changed param from path to pool/vol, UI change with backend. handle option with no value.(hongliang's comments) Royce Lv (3): Fix select menu data append UI: Support add guest disk Display all disk types in storage edit view
ui/css/theme-default/guest-storage-add.css | 16 ++++ ui/js/src/kimchi.guest_edit_main.js | 5 +- ui/js/src/kimchi.guest_storage_add.main.js | 137 ++++++++++++++++++++++++----- ui/js/widgets/select-menu.js | 4 +- ui/pages/guest-edit.html.tmpl | 17 +++- ui/pages/guest-storage-add.html.tmpl | 62 +++++++++++-- 6 files changed, 208 insertions(+), 33 deletions(-)
participants (3)
-
Aline Manera -
Hongliang Wang -
lvroyce＠linux.vnet.ibm.com