[PATCHv3 0/3] UI: Manage guest disks
From: Royce Lv <lvroyce@linux.vnet.ibm.com> v1>v3, Fix disk view display, Fix align problem in select menu, Fill default value in pool and volume box. 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 | 114 +++++++++++++++++++++++++++-- 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, 199 insertions(+), 19 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 | 114 +++++++++++++++++++++++++++-- ui/pages/guest-storage-add.html.tmpl | 62 ++++++++++++++-- 3 files changed, 179 insertions(+), 13 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..ac514d2 100644 --- a/ui/js/src/kimchi.guest_storage_add.main.js +++ b/ui/js/src/kimchi.guest_storage_add.main.js @@ -18,25 +18,127 @@ 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="storagepool"]', storageAddForm); + var volTextbox = $('input[name="storagevol"]', storageAddForm); + + 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); + } + }); + + 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.path + }); + } + }); + $(volTextbox).val(options[0].value); + $(volTextbox).change(); + } + $('#guest-disk').selectMenu("setData", options); + }); + }); + + volTextbox.change(function () { + pathTextbox.val(volTextbox.val()); + pathTextbox.change(); + }); + + 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')) { + if (submitButton.prop('disabled')) { return false; } var dev = nameTextbox.val(); var type = typeTextbox.val(); var path = pathTextbox.val(); - if(!path || path === '') { + var bus = busTextbox.val(); + if (!path || path === '') { return false; } @@ -49,13 +151,13 @@ kimchi.guest_storage_add_main = function() { var settings = { vm: kimchi.selectedGuest, type: type, - path: path + path: path, + bus: bus }; if(dev && dev !== '') { settings['dev'] = dev; } - kimchi.addVMStorage(settings, function(result) { kimchi.window.close(); kimchi.topic('kimchi/vmCDROMAttached').publish({ @@ -77,7 +179,7 @@ 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() === ''); }); }; diff --git a/ui/pages/guest-storage-add.html.tmpl b/ui/pages/guest-storage-add.html.tmpl index 71e0610..44b97e0 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="storagepool" 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="storagevol" 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
On 04/29/2014 02:53 PM, lvroyce@linux.vnet.ibm.com wrote:
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 | 114 +++++++++++++++++++++++++++-- ui/pages/guest-storage-add.html.tmpl | 62 ++++++++++++++-- 3 files changed, 179 insertions(+), 13 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..ac514d2 100644 --- a/ui/js/src/kimchi.guest_storage_add.main.js +++ b/ui/js/src/kimchi.guest_storage_add.main.js @@ -18,25 +18,127 @@ 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="storagepool"]', storageAddForm); + var volTextbox = $('input[name="storagevol"]', storageAddForm); + + 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(); Hard-coded? + kimchi.select('guest-add-storage-pool-list', options); + } + }); + + 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.path + }); + } + });
+ $(volTextbox).val(options[0].value); + $(volTextbox).change(); The array options may be empty. Check it. if(options.length) { // ... } + } + $('#guest-disk').selectMenu("setData", options); + }); + }); + + volTextbox.change(function () { + pathTextbox.val(volTextbox.val()); + pathTextbox.change(); + }); + + 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')) { + if (submitButton.prop('disabled')) { return false; }
var dev = nameTextbox.val(); var type = typeTextbox.val(); var path = pathTextbox.val(); - if(!path || path === '') { + var bus = busTextbox.val(); + if (!path || path === '') { return false; }
@@ -49,13 +151,13 @@ kimchi.guest_storage_add_main = function() { var settings = { vm: kimchi.selectedGuest, type: type, - path: path + path: path, + bus: bus };
if(dev && dev !== '') { settings['dev'] = dev; } - kimchi.addVMStorage(settings, function(result) { kimchi.window.close(); kimchi.topic('kimchi/vmCDROMAttached').publish({ @@ -77,7 +179,7 @@ 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() === ''); }); }; diff --git a/ui/pages/guest-storage-add.html.tmpl b/ui/pages/guest-storage-add.html.tmpl index 71e0610..44b97e0 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="storagepool" 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="storagevol" 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>
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
participants (2)
-
Hongliang Wang -
lvroyce＠linux.vnet.ibm.com