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 | 60 +++++++++++++++- ui/js/src/kimchi.guest_edit_main.js | 133 ++++++++++++++++++++++++++++++++++- ui/pages/guest-edit.html.tmpl | 37 ++++++++-- 4 files changed, 280 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..c8cc122 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,61 @@ #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; +} + +.boot-order li i { + text-align: right; +} diff --git a/ui/js/src/kimchi.guest_edit_main.js b/ui/js/src/kimchi.guest_edit_main.js index 1682a58..2f15729 100644 --- a/ui/js/src/kimchi.guest_edit_main.js +++ b/ui/js/src/kimchi.guest_edit_main.js @@ -15,6 +15,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + kimchi.guest_edit_main = function() { var authType; var formTargetId; @@ -26,6 +27,7 @@ kimchi.guest_edit_main = function() { var networkOptions = ""; clearTimeout(kimchi.vmTimeout); + var bootOrderOptions = []; $('#modalWindow').on('hidden.bs.modal', function() { kimchi.setListVMAutoTimeout(); @@ -45,7 +47,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, @@ -966,6 +968,113 @@ 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 + "<button class='btn btn-link deleteDev'><i class='fa fa-minus-circle'></i> Remove</button></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).attr("data-value")) + }); + bootOrderOptions.forEach(function(entry) { + console.log(entry); + }); + } + }); + + $(".deleteDev").on('click', function(evt) { + evt.preventDefault(); + var item = $(this).parent().attr("data-value"); + var index = guestBootOrder.indexOf(item); + if (index !== -1) { + guestBootOrder.splice(index, 1); + } + var data = { + bootorder: guestBootOrder + }; + kimchi.updateVM(kimchi.selectedGuest, data, function() { + wok.window.close(); + }); + }); + + $("#guest-edit-add-boot-button").on('click', function(evt) { + evt.preventDefault(); + var html1 = "<div class='item' id='bootDevOrder'><span class='cell column-device'><select id='bootDev' data-none-selected-text='Nothing selected'>" + var html2 = "</select></span><span class='cell column-actions action-area'><button class='btn btn-primary save'>Save</button> <button class='btn btn-primary cancel'>Remove</button></span><div>" + var selectOptions = [] + var dev = ["cdrom", "hd", "network"]; + $.each(dev, function(index, value) { + if (!($.inArray(value, guestBootOrder) > -1)) { + var option = "<option id='"+ value +"-check'>" + value + "</option>" + selectOptions.push(option); + } + }); + var addBootorder = html1 + selectOptions.toString().replace(",", "") + html2; + var selectionVal = $("#add-boot-order").html(addBootorder); + addItem({ bootorder: selectionVal }); + + if ($('.body:not(:empty)')) { + $("#guest-edit-add-boot-button").prop('disabled', true); + } + }); + + if (guestBootOrder.length == 3) { + $("#guest-edit-add-boot-button").prop('disabled', true); + } + + var addItem = function(data) { + var itemNode = $.parseHTML(wok.substitute($('#add-boot-order').html(), data)); + $(".body", "#form-guest-edit-bootorder").append(itemNode); + + $('#bootDev').selectpicker({ + size: 4, + width: '150px' + }); + + $(".save", itemNode).on('click', function(evt) { + evt.preventDefault(); + guestBootOrder.push($("select", "#bootDevOrder").val()); + var data = { + bootorder: guestBootOrder + }; + + kimchi.updateVM(kimchi.selectedGuest, data, function() { + wok.window.close(); + }); + }); + $(".cancel", itemNode).on('click', function(evt) { + evt.preventDefault(); + var item = $(this).parent().parent(); + $("label", item).text() === "" ? item.remove() : toggleEdit(item, false, data.id); + + $("#guest-edit-add-boot-button").prop('disabled', false); + }); + + }; + + }; + var initContent = function(guest) { guest['icon'] = guest['icon'] || 'plugins/kimchi/images/icon-vm.png'; $('#form-guest-edit-general').fillWithObject(guest); @@ -1031,6 +1140,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")) { @@ -1128,6 +1238,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..df35b8e 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> @@ -39,7 +39,7 @@ <li role="presentation"><a href="#form-guest-edit-snapshot" aria-controls="form-guest-edit-snapshot" role="tab" data-id="form-guest-edit-snapshot" data-toggle="tab">$_("Snapshot")</a></li> <li role="presentation"><a href="#form-edit-processor" aria-controls="form-edit-processor" role="tab" data-id="form-edit-processor" data-toggle="tab">$_("Processor")</a></li> </ul> - <div class="tab-content" id="guest-edit-tabs"> + <div class="tab-content" id="guest-edit-tabs" style="height: 720px;"> <form role="tabpanel" class="tab-pane active" id="form-guest-edit-general"> <div class="form-group"> <label for="guest-edit-id-textbox">$_("Name")</label> @@ -68,6 +68,21 @@ <option value="virtio">$_("virtio")</option> </select> </div> + <div class="guest-edit-bootorder tab-pane" id="form-guest-edit-bootorder"> + <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> + <p><button id="guest-edit-add-boot-button" class="add btn btn-primary"><i class="fa fa-plus-circle"></i> $_("Add")</button></p> + <div class="body"></div> + </div> + </div> </form> <form role="tabpanel" class="tab-pane" id="form-guest-edit-storage"> <div class="btn-group action-area"> @@ -197,7 +212,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> @@ -238,6 +252,21 @@ <button id="guest-edit-button-cancel" class="btn btn-default" data-dismiss="modal">$_("Cancel")</button> </div> </div> +<script id="add-boot-order" type="text/html"> + <div class="item" id="bootDevOrder"> + <span class="cell column-device"> + <select id="bootDev" data-none-selected-text="$_("Nothing selected")"> + <option id="cdrom-check">cdrom</option> + <option id="hdd-check">hd</option> + <option id="network-check">network</option> + </select> + </span> + <span class="cell column-actions action-area"> + <button class="btn btn-primary save">$_("Save")</button> + <button class="btn btn-primary cancel">$_("Remove")</button> + </span> + <div> +</script> <script id="cdrom-row-tmpl" type="text/html"> <div class="item view" id="cdrom-{dev}"> <span class="cell dev column-device"> -- 2.9.3