[Kimchi-devel] [PATCH v3] [Kimchi] Issue# 979 - Change boot order UI
Aline Manera
alinefm at linux.vnet.ibm.com
Mon Jan 9 14:22:28 UTC 2017
Hi Bianca,
I have a VM with the following XML:
<os>
<type arch='x86_64' machine='pc-i440fx-2.4'>hvm</type>
<boot dev='hd'/>
</os>
And the UI only list the 'hd' option in the boot order, ie, there is no
way to add 'network' or 'cdrom' to the boor order through UI.
I'd say to add an 'Add'/'Remove' option, so user can add new boot order
element and remove an existing one, in addition to only change the
elements order.
On 01/05/2017 06:47 PM, bianca at linux.vnet.ibm.com wrote:
> From: Bianca Carvalho <bianca at linux.vnet.ibm.com>
>
> 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 at linux.vnet.ibm.com>
> ---
> 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>
More information about the Kimchi-devel
mailing list