Re: [Kimchi-devel] [PATCH v3] [Kimchi] Issue# 979 - Change boot order UI

From: Bianca Carvalho <bianca(a)linux.vnet.ibm.com&gt; This patch adds the UI portion for supporting changing the guest boot order via edit guest panel. This was based off of what Samuel had prototyped. Issue found in backend during test: When updating the VM even with just changing the name, the bootorder gets reset to 'hd' only. I tested this using the curl command and confirmed that indeed it does get reset to one entry only. Issue written to address this: https://github.com/kimchi-project/kimchi/issues/1012 Signed-off-by: Bianca Carvalho <bianca(a)linux.vnet.ibm.com&gt; --- ui/css/kimchi.css | 57 +++++++++++++++++++++++++++++++- ui/css/src/modules/_edit-guests.scss | 56 +++++++++++++++++++++++++++++++- ui/js/src/kimchi.guest_edit_main.js | 63 ++++++++++++++++++++++++++++++++++-- ui/pages/guest-edit.html.tmpl | 18 +++++++++-- 4 files changed, 187 insertions(+), 7 deletions(-) diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css index fff3279..16cc161 100644 --- a/ui/css/kimchi.css +++ b/ui/css/kimchi.css @@ -1,7 +1,7 @@ /* * Project Kimchi * - * Copyright IBM Corp, 2015-2016 + * Copyright IBM Corp, 2015-2017 * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -1557,6 +1557,61 @@ body.wok-gallery { overflow: visible; } +ul { + cursor: default; +} + +.boot-order { + display: block; + width: 85%; + font-size: 14px; + line-height: 1.42857; + color: #444; + overflow: hidden; + background-color: #fff; + background-image: none; + border: 1px solid #ccc; + border-radius: 3px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; +} + +.boot-order:focus, +.boot-order.focus { + border-color: #66afe9; + outline: 0; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); +} + +.boot-order > li { + cursor: move; + /* fallback if grab cursor is unsupported */ + cursor: grab; + cursor: -moz-grab; + cursor: -webkit-grab; + border-left: 0; + border-right: 0; +} + +.boot-order > li:first-child { + border-top: 0; +} + +.boot-order > li:last-child { + border-bottom: 0; +} + +.boot-order > li.ui-sortable-helper { + cursor: grabbing; + cursor: -moz-grabbing; + cursor: -webkit-grabbing; + border: 1px solid #ccc !important; +} + /* Add Template Modal Window */ .templates-modal .modal-dialog { width: 1100px; diff --git a/ui/css/src/modules/_edit-guests.scss b/ui/css/src/modules/_edit-guests.scss index 25d4d65..e0794de 100644 --- a/ui/css/src/modules/_edit-guests.scss +++ b/ui/css/src/modules/_edit-guests.scss @@ -1,7 +1,7 @@ // // Project Kimchi // -// Copyright IBM Corp, 2015-2016 +// Copyright IBM Corp, 2015-2017 // // Licensed under the Apache License, Version 2.0 (the "License"); // you may not use this file except in compliance with the License. @@ -429,3 +429,57 @@ #form-guest-storage-add .form-section .field { overflow: visible; } + +ul { + cursor: default; +} + +.boot-order { + display: block; + width: 85%; + font-size: 14px; + line-height: 1.42857; + color: #444; + overflow: hidden; + background-color: #fff; + background-image: none; + border: 1px solid #ccc; + border-radius: 3px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; +} + +.boot-order:focus, +.boot-order.focus { + border-color: #66afe9; + outline: 0; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); +} + +.boot-order > li { + cursor: move; /* fallback if grab cursor is unsupported */ + cursor: grab; + cursor: -moz-grab; + cursor: -webkit-grab; + border-left: 0; + border-right: 0; +} + +.boot-order > li:first-child { + border-top: 0; +} + +.boot-order > li:last-child { + border-bottom: 0; +} + +.boot-order > li.ui-sortable-helper { + cursor: grabbing; + cursor: -moz-grabbing; + cursor: -webkit-grabbing; + border: 1px solid #ccc !important; +} diff --git a/ui/js/src/kimchi.guest_edit_main.js b/ui/js/src/kimchi.guest_edit_main.js index bb82077..38a1d39 100644 --- a/ui/js/src/kimchi.guest_edit_main.js +++ b/ui/js/src/kimchi.guest_edit_main.js @@ -1,7 +1,7 @@ /* * Project Kimchi * - * Copyright IBM Corp, 2013-2016 + * Copyright IBM Corp, 2013-2017 * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -26,6 +26,7 @@ kimchi.guest_edit_main = function() { var networkOptions = ""; clearTimeout(kimchi.vmTimeout); + var bootOrderOptions = []; $('#modalWindow').on('hidden.bs.modal', function() { kimchi.setListVMAutoTimeout(); @@ -45,7 +46,7 @@ kimchi.guest_edit_main = function() { var submitForm = function(event) { - // tap map, "general": 0, "storage": 1, "interface": 2, "permission": 3, "password": 4 + // tap map, "general": 0, "storage": 1, "interface": 2, "permission": 3, "pci": 4, "snapshot": 5, "processor": 6 var submit_map = { 0: generalSubmit, 3: permissionSubmit, @@ -967,6 +968,42 @@ kimchi.guest_edit_main = function() { } }; + var setupBootOrder = function(guest) { + var guestBootOrder = guest['bootorder']; + $("#myList").empty(); + $.each(guestBootOrder, function(index, value) { + var itemNode = $.parseHTML("<li class='list-group-item' " + "data-value=" + value + ">" + value + "</li>"); + $("#myList").append(itemNode); + }); + + $('.boot-order').sortable({ + items: 'li', + cursor: 'move', + opacity: 0.6, + containment: "parent", + start: function(event, ui) { + $(this).addClass('focus'); + }, + stop: function(event, ui) { + $(this).removeClass('focus'); + }, + change: function(event, ui) { + // callback once started changing order + }, + update: function(event, ui) { + // callback once finished order + $(saveButton).prop('disabled', false); + bootOrderOptions = []; + $("#myList li").each(function() { + bootOrderOptions.push($(this).text()) + }); + bootOrderOptions.forEach(function(entry) { + console.log(entry); + }); + } + }); + }; + var initContent = function(guest) { guest['icon'] = guest['icon'] || 'plugins/kimchi/images/icon-vm.png'; $('#form-guest-edit-general').fillWithObject(guest); @@ -1032,6 +1069,7 @@ kimchi.guest_edit_main = function() { setupPermission(); setupPCIDevice(); setupSnapshot(); + setupBootOrder(guest); kimchi.init_processor_tab(guest.cpu_info, $(saveButton)); if ((kimchi.thisVMState === "running") || (kimchi.thisVMState === "paused")) { @@ -1129,6 +1167,27 @@ kimchi.guest_edit_main = function() { }); }); + //Format the strings to go in the array before passing in to the API + //"hd", "network", "cdrom" + var formattedBootOrderOptions = []; + for (var i=0; i<bootOrderOptions.length; i++) { + var str = bootOrderOptions[i].trim(); + str = str.toLowerCase(); + if (str === "hdd") { + str = "hd"; + } else if (str === "cd-rom") { + str = "cdrom"; + } + formattedBootOrderOptions.push(str); + } + var data = { + bootorder: formattedBootOrderOptions + }; + kimchi.updateVM(kimchi.selectedGuest, data, function() { + wok.window.close(); + }, function(err) { + wok.message.error(err.responseJSON.reason,'#alert-modal-container'); + }); }; var permissionSubmit = function(event) { diff --git a/ui/pages/guest-edit.html.tmpl b/ui/pages/guest-edit.html.tmpl index d8a482c..9cc73b6 100644 --- a/ui/pages/guest-edit.html.tmpl +++ b/ui/pages/guest-edit.html.tmpl @@ -1,7 +1,7 @@ #* * Project Kimchi * - * Copyright IBM Corp, 2013-2016 + * Copyright IBM Corp, 2013-2017 * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -30,7 +30,7 @@ </div> <div class="modal-body"> <span id="alert-modal-container"></span> -<ul class="nav nav-tabs" role="tablist"> + <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#form-guest-edit-general" aria-controls="form-guest-edit-general" role="tab" data-id="form-guest-edit-general" data-toggle="tab">$_("General")</a></li> <li role="presentation"><a href="#form-guest-edit-storage" aria-controls="form-guest-edit-storage" role="tab" data-id="form-guest-edit-storage" data-toggle="tab">$_("Storage")</a></li> <li role="presentation"><a href="#form-guest-edit-interface" aria-controls="form-guest-edit-interface" role="tab" data-id="form-guest-edit-interface" data-toggle="tab">$_("Interface")</a></li> @@ -68,6 +68,19 @@ <option value="virtio">$_("virtio")</option> </select> </div> + <div class="form-group"> + <div id="bootOrder"> + <label for="guest-edit-boot-order-textbox">Boot Order</label> + <ul id="myList" class="list-group boot-order"> + <li class="list-group-item" data-value="CD-ROM">CD-ROM</li> + <li class="list-group-item" data-value="HDD">HDD</li> + <li class="list-group-item" data-value="Network">Network</li> + </ul> + <p class="help-block"> + <i class="fa fa-info-circle"></i> $_("Change the boot order by dragging the items on the list.")</p> + </p> + </div> + </div> </form> <form role="tabpanel" class="tab-pane" id="form-guest-edit-storage"> <div class="btn-group action-area"> @@ -197,7 +210,6 @@ $_("Current CPU must be equal or lower than the Maximum CPU value. If a topology is set, it must be also be a multiple of the 'threads' value.") </p> </div> - <div id="guest-max-processor-panel" class="form-group"> <label for="guest-edit-max-processor-textbox">$_("Max CPU")</label> <p id="settings-readonly-help" class="hidden">$_("Unable to edit maximum CPU or CPU topology when editing a running or paused virtual machine.")</p>