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

Thursday, 19 January 2017

Hi Bianca,

I am not able to Add/Remove multiple entries in the boot order list at 
once. Every time I click on "Save" or "Delete" the dialog is closed.

Also the "Remove" buttons are not aligned with each other.

As we are restricting the boot order to have only 3 options (hdd, cdrom 
and network), I'd suggest to show all those options at once and mark 
those already set and let user select more options to "add" in addition 
to grab the elements.

I am OK if you want to keep that design, but it would look better if it 
is similar to what we have on Network tab from Edit guest dialog.

Some more comments below:

On 01/17/2017 05:32 PM, bianca(a)linux.vnet.ibm.com wrote:
...
 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 
That does not make sense anymore

...
           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)
{ 
'deleteBootOrderElem' would be more informative.

...
 +            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
 +        }; 
Why is that needed?

I mean, the input tag has a 'value' parameter to handle the API value 
and the content to be the displayed value so if you are using those 
parameters correct, that conversion is not needed.

...
 +        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> 
Seems the problem I mentioned above is here. The data-value should be 
the value to be sent to backend.

...
 +                            </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"> 

2024

2023

2022

2021

2020

2019

2018

2017

2016

2015

2014

2013

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