[PATCH] [new-ui] Edit Guests v2
From: samhenri <samuel.guimaraes@eldorado.org.br> New-UI added to Edit Guest modal window. This patch includes guest IP address from previous patches (added enough space for IPV6 addresses). Includes some minor fixes such as: *Added doctype to wok-ui.html.tmpl *Fixed Edit Templates modal window in Firefox *Some minor fixes to wok.message instances showing behind modal windows V2 *Fixed new navigation bar to work with HTML5 strict mode. (markup was camelcase, CSS in lowercase) *Other minor CSS issues with Storages and Network samhenri (1): [new-ui] Edit Guests modal window .../kimchi/ui/css/theme-default/guest-edit.css | 420 ---------------- .../ui/css/theme-default/guest-storage-add.css | 81 --- src/wok/plugins/kimchi/ui/js/src/kimchi.api.js | 6 +- .../kimchi/ui/js/src/kimchi.guest_edit_main.js | 550 +++++++++++---------- .../ui/js/src/kimchi.guest_storage_add.main.js | 39 +- .../plugins/kimchi/ui/pages/guest-edit.html.tmpl | 257 +++++----- .../kimchi/ui/pages/guest-storage-add.html.tmpl | 99 ++-- ui/css/src/modules/_edit-guests.scss | 362 ++++++++++++++ ui/css/src/modules/_modal-flat.scss | 19 +- ui/css/src/modules/_network.scss | 1 - ui/css/src/modules/_storage.scss | 2 - ui/css/src/modules/_templates.scss | 16 +- ui/css/src/modules/_toolbar.scss | 46 +- ui/css/src/wok.scss | 2 + ui/js/src/wok.main.js | 13 +- ui/pages/wok-ui.html.tmpl | 1 + 16 files changed, 897 insertions(+), 1017 deletions(-) delete mode 100644 src/wok/plugins/kimchi/ui/css/theme-default/guest-edit.css delete mode 100644 src/wok/plugins/kimchi/ui/css/theme-default/guest-storage-add.css create mode 100644 ui/css/src/modules/_edit-guests.scss -- 1.9.3
From: samhenri <samuel.guimaraes@eldorado.org.br> Addind new-ui to Edit Guests and Attach Storage Device modal windows. This commit also fixes some wok.message instances that were showing behind other modal windows. Signed-off-by: samhenri <samuel.guimaraes@eldorado.org.br> --- .../kimchi/ui/css/theme-default/guest-edit.css | 420 ---------------- .../ui/css/theme-default/guest-storage-add.css | 81 --- src/wok/plugins/kimchi/ui/js/src/kimchi.api.js | 6 +- .../kimchi/ui/js/src/kimchi.guest_edit_main.js | 550 +++++++++++---------- .../ui/js/src/kimchi.guest_storage_add.main.js | 39 +- .../plugins/kimchi/ui/pages/guest-edit.html.tmpl | 257 +++++----- .../kimchi/ui/pages/guest-storage-add.html.tmpl | 99 ++-- ui/css/src/modules/_edit-guests.scss | 362 ++++++++++++++ ui/css/src/modules/_modal-flat.scss | 19 +- ui/css/src/modules/_network.scss | 1 - ui/css/src/modules/_storage.scss | 2 - ui/css/src/modules/_templates.scss | 16 +- ui/css/src/modules/_toolbar.scss | 46 +- ui/css/src/wok.scss | 2 + ui/js/src/wok.main.js | 13 +- ui/pages/wok-ui.html.tmpl | 1 + 16 files changed, 897 insertions(+), 1017 deletions(-) delete mode 100644 src/wok/plugins/kimchi/ui/css/theme-default/guest-edit.css delete mode 100644 src/wok/plugins/kimchi/ui/css/theme-default/guest-storage-add.css create mode 100644 ui/css/src/modules/_edit-guests.scss diff --git a/src/wok/plugins/kimchi/ui/css/theme-default/guest-edit.css b/src/wok/plugins/kimchi/ui/css/theme-default/guest-edit.css deleted file mode 100644 index 98901da..0000000 --- a/src/wok/plugins/kimchi/ui/css/theme-default/guest-edit.css +++ /dev/null @@ -1,420 +0,0 @@ -/* - * Project Kimchi - * - * Copyright IBM, Corp. 2013-2015 - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS,pick 3b4871a Squash with SCSS patch - - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -#guest-edit-window #action-button-container { - padding-right: 0; -} - -#guest-edit-window #guest-edit-button-cancel { - margin-left: 10px; -} - -#guest-edit-tabs { - background: transparent; - border: none; - height: 100%; - padding: 0; -} - -#form-guest-edit-general { - padding: 1em; -} - -#form-guest-edit-general .edit-general-inline { - display: inline-block; -} - -#form-guest-edit-storage input[readonly] { - background: none; - border-color: transparent; - text-overflow: ellipsis; -} - -.guest-edit-fieldset { - padding-right: 0; -} - -.guest-edit-wrapper-label { - height: 30px; - line-height: 30px; - margin-top: 10px; - vertical-align: top; - min-width: 100px; - font-weight: lighter; - font-family: 'Helvetica Neue', Helvetica, Arial; -} - -#form-guest-edit-storage .guest-edit-wrapper-label { - width: 60px; -} - -.guest-edit-wrapper-controls { - width: 470px; - margin-top: 5px;ß -} - -#form-guest-edit-storage .guest-edit-wrapper-controls { - width: 486px; -} - -.guest-edit-wrapper-controls input[type="text"] { - font-size: 16px; - height: 30px; - width: 450px; - border: 1px solid #CCCCCC; -} - -.guest-edit-wrapper-controls input[type="text"][disabled] { - color: #bbb; - background-color: #fafafa; - cursor: not-allowed; - border: 1px solid #CCCCCC; -} - -.guest-edit-cdrom-row-container { - max-height: 180px; - overflow: auto; -} - -.guest-edit-cdrom-row-container input[type="text"] { - width: 400px; -} - -#form-guest-edit-storage .header, -.guest-edit-snapshot .header, -.guest-edit-interface .header, -#form-guest-edit-permission .ldap .header { - margin-bottom: 8px; - padding-bottom: 2px; - font-weight: bold; - border-bottom: 1px solid #999999; - overflow: hidden; -} - -#form-guest-edit-storage .body .item, -.guest-edit-snapshot .body .item, -.guest-edit-snapshot .task .item, -.guest-edit-interface .body .item { - margin: 5px 0; -} - -#form-guest-edit-storage .cell, -.guest-edit-interface .cell { - display: inline-block; - width: 200px; -} - -.guest-edit-snapshot .cell { - display: inline-block; -} - -.guest-edit-snapshot .sel { - width: 25px; - vertical-align: top; -} - -.guest-edit-snapshot .icon { - background: url('../images/theme-default/kimchi-loading15x15.gif') no-repeat; - display: block; - width: 16px; - height: 16px; - vertical-align: middle; - margin-left: 2px; -} - -.guest-edit-snapshot .name { - width: 400px; -} - -.guest-edit-snapshot .created { - width: 270px; -} - -#form-guest-edit-storage .cell.dev { - width: 60px; -} - -#form-guest-edit-storage .cell.path { - width: 440px; -} - -#form-guest-edit-storage .cell.dev input, -#form-guest-edit-storage .cell.path input { - box-sizing: border-box; - width: 100%; -} - -.guest-edit-interface .body select { - width: 180px; - padding: 0px; -} - -#form-guest-edit-storage .action-area, -.guest-edit-snapshot .action-area, -.guest-edit-interface .action-area { - float: right; -} - -#form-guest-edit-storage .action-area { - line-height: 24px; -} - -#form-guest-edit-storage button, -.guest-edit-snapshot button, -.guest-edit-interface button { - width: 20px; - height: 20px; -} - -#form-guest-edit-storage .body button:not(:last-child), -.guest-edit-interface .body button:not(:last-child) { - margin-right: 2px; -} - -.guest-edit-snapshot .hide, -.guest-edit-interface .hide { - display: none!important; -} - -.guest-edit-permission .pam { - height: 220px; - padding: 5px 10px!important; -} - -.guest-edit-permission .hide { - display: none; -} - -.guest-edit-permission .pam .column { - display: inline-block; - vertical-align: top; -} - -.guest-edit-permission .pam .title { - margin-bottom: 3px; -} - -.guest-edit-permission .pam input[type="text"] { - margin-bottom: 3px; - font-size: 12px; - width: 97%; -} - -.guest-edit-permission .pam .body { - border: 1px solid #999999; - font-size: 12px; - padding: 1px; - height: 192px; - overflow: auto; -} - -.guest-edit-permission .pam .body .head { - margin-bottom: 3px; - font-weight: bold; - background: linear-gradient(to bottom, #E5E5E5 0%, #C4C4C4 100%) repeat scroll 0 0 transparent; -} - -.guest-edit-permission .pam .body .item { - padding: 2px 3px; - margin-bottom: 1px; - cursor: pointer; -} - -.guest-edit-permission .pam .body .item:hover { - background-color: #AAAAAA; -} - -.guest-edit-permission .pam .body .item-picked { - background-color: #BBBBBB; -} - -.guest-edit-permission .pam .body .item .icon { - display: inline-block; - height: 15px; - width: 15px; - vertical-align: bottom; -} - -.guest-edit-permission .pam .body .item .user-icon { - background: url('../images/theme-default/user.png') no-repeat scroll; - background-size: 15px 15px; -} - -.guest-edit-permission .pam .body .item .group-icon { - background: url('../images/theme-default/group.png') no-repeat scroll; - background-size: 15px 15px; -} - -.guest-edit-permission .pam .body .column-user { - width: 48%; -} -.guest-edit-permission .pam .body .column-group { - width: 50%; -} - -.guest-edit-permission .pam .control { - width: 5%; -} - -.guest-edit-permission .pam .control button { - width: 26px; - margin-left: 7px; -} - -.guest-edit-permission .pam .control button:first-child { - margin-top: 110px; - margin-bottom: 2px; -} - -.guest-edit-permission .pam .control .ui-button-text-only .ui-button-text { - padding: 2px 8px; -} - -.guest-edit-permission .pam .avail { - width: 46%; -} - -.guest-edit-permission .pam .selected { - width: 46%; - float: right; -} - -#form-guest-edit-permission .ldap .body .item { - margin: 8px 0; -} - -#form-guest-edit-permission .ldap .cell { - width: 250px; -} - -#form-guest-edit-permission .ldap .action-area { - float: right; - line-height: 24px; -} - -#form-guest-edit-permission .ldap button { - width: 20px; - height: 20px; -} - -#form-guest-edit-permission input[type="text"] { - width: 300px; -} - -#form-guest-edit-permission .ldap .header button { - margin-bottom: 1px; -} - -#form-guest-edit-permission .ldap .checked { - border-color: red; - border-style: solid; - border-width: 1px; -} - -#form-guest-edit-permission .ldap .checked.hide { - display: none; -} - -.guest-edit-pci { - height: 79%; - overflow: auto; - font-size: 12px; -} - -.guest-edit-pci .guest-scroll-indent { - width: 783px; -} - -.guest-edit-pci .filter { - height: 35px; - margin-right: 5px; - overflow: hidden; -} - -.guest-edit-pci .group { - float: right; -} - -.guest-edit-pci .filter .control { - border: 1px solid #AAAAAA; - font-size: 12px; - background-color: white; -} - -.guest-edit-pci .filter select { - border-right: 0px!important; - border-radius: 7px 0px 0px 7px; - padding: 2px 2px 2px 7px; - width: 100px; - height: 24px; -} - -.guest-edit-pci .filter select option { - padding-left: 7px; -} - -.guest-edit-pci .filter input { - border-radius: 0px 7px 7px 0px; - padding: 3px 3px 3px 10px; - width: 200px; - height: 16px; - font-style: italic; -} - -.guest-edit-pci .header { - margin-bottom: 8px; - padding-bottom: 2px; - font-weight: bold; - border-bottom: 1px solid #999999; -} - -.guest-edit-pci .item { - margin-bottom: 4px; - overflow: hidden; -} - -.guest-edit-pci .cell { - display: inline-block; - vertical-align: middle; - margin-right: 10px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.guest-edit-pci .item button { - width: 20px; - height: 20px; - float: right; -} - -.guest-edit-pci .name { - width: 18%; - max-width: 18%; -} - -.guest-edit-pci .product { - width: 45%; - max-width: 45%; -} - -.guest-edit-pci .vendor { - width: 25%; - max-width: 25%; -} diff --git a/src/wok/plugins/kimchi/ui/css/theme-default/guest-storage-add.css b/src/wok/plugins/kimchi/ui/css/theme-default/guest-storage-add.css deleted file mode 100644 index 9cc41e8..0000000 --- a/src/wok/plugins/kimchi/ui/css/theme-default/guest-storage-add.css +++ /dev/null @@ -1,81 +0,0 @@ -/* - * Project Kimchi - * - * Copyright IBM, Corp. 2014 - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -#guest-storage-add-window { - font-size: 13px; - height: 600px; - width: 700px; -} - -.guest-storage-add-fieldset { - padding: 1em; -} - -#guest-storage-add-window .btn { - width: 587px; -} - -#form-guest-storage-add .form-section .field { - overflow: visible; -} - -#guest-storage-add-window input[type="text"] { - font-size: 16px; - height: 38px; - background: #fff; - -webkit-border-radius: 5px; - border-radius: 5px; - box-shadow: 2px 2px 2px #eee inset; - border-top: 1px solid #bbb; - border-left: 1px solid #bbb; - padding-left: 10px; - width: 600px; -} - -#guest-storage-add-window input[type="text"][disabled] { - color: #bbb; - background-color: #fafafa; - 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; - padding-left: 26px; -} - -#vm-storage-button-add.loading[disabled] { - background: url("../../images/theme-default/loading.gif") 7px center no-repeat #c0c0c0; - color: #ddd; - padding-left: 26px; -} diff --git a/src/wok/plugins/kimchi/ui/js/src/kimchi.api.js b/src/wok/plugins/kimchi/ui/js/src/kimchi.api.js index ff0c172..cb6aaab 100644 --- a/src/wok/plugins/kimchi/ui/js/src/kimchi.api.js +++ b/src/wok/plugins/kimchi/ui/js/src/kimchi.api.js @@ -950,7 +950,7 @@ var kimchi = { resend : true, success : suc, error : err ? err : function(data) { - wok.message.error(data.responseJSON.reason); + wok.message.error(data.responseJSON.reason,'#alert-modal-container'); } }); }, @@ -964,7 +964,7 @@ var kimchi = { data : JSON.stringify(device), success : suc, error : err ? err : function(data) { - wok.message.error(data.responseJSON.reason); + wok.message.error(data.responseJSON.reason,'#alert-modal-container'); } }); }, @@ -977,7 +977,7 @@ var kimchi = { dataType : 'json', success : suc, error : err ? err : function(data) { - wok.message.error(data.responseJSON.reason); + wok.message.error(data.responseJSON.reason,'#alert-modal-container'); } }); }, diff --git a/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_edit_main.js b/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_edit_main.js index 9005d9b..7d3a5e3 100644 --- a/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_edit_main.js +++ b/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_edit_main.js @@ -16,26 +16,59 @@ * limitations under the License. */ kimchi.guest_edit_main = function() { - var buttonContainer = $('#action-button-container'); - $('#guest-edit-tabs').tabs({ - beforeActivate: function(event, ui) { - var display_list = null; - if(kimchi.thisVMState === "running") { - display_list = ['form-guest-edit-permission']; - } else { - display_list = ['form-guest-edit-general', 'form-guest-edit-permission']; - } - $(buttonContainer).addClass('hidden'); - var deactivated = ui['newPanel']; - if(display_list.indexOf($(deactivated).attr('id')) >= 0) { - $(buttonContainer).removeClass('hidden'); - } + var authType; + var formTargetId; + //var buttonContainer = $('#action-button-container'); + var guestEditForm = $('#form-guest-edit-general'); + var saveButton = $('#guest-edit-button-save'); + + $('#guest-edit-window a[data-toggle="tab"]').on('show.bs.tab', function(tab) { + tab.target // newly activated tab + tab.relatedTarget // previous active tab + var display_list = null; + if (kimchi.thisVMState === "running") { + display_list = ['form-guest-edit-permission']; + } else { + display_list = ['form-guest-edit-general', 'form-guest-edit-permission']; + } + $(saveButton).prop('disabled', true); + formTargetId = $(tab.target).data('id'); + var deactivated = $('form#' + formTargetId); + if (display_list.indexOf($(deactivated).attr('id')) >= 0) { + $(saveButton).prop('disabled', false); } }); - var guestEditForm = $('#form-guest-edit-general'); - var saveButton = $('#guest-edit-button-save'); - var authType; + var submitForm = function(event) { + + // tap map, "general": 0, "storage": 1, "interface": 2, "permission": 3, "password": 4 + var submit_map = { + 0: generalSubmit, + 3: permissionSubmit + }; + var currentTab = $('#guest-edit-window li.active a[data-toggle="tab"]').data('id'); + var toSubmit = parseInt($('#'+currentTab).index()); + var submitFun = submit_map[toSubmit]; + submitFun && submitFun(event); + event.preventDefault(); + }; + + $(guestEditForm).on('submit', submitForm); + $(saveButton).on('click', submitForm); + + + $('#guest-edit-window a[data-toggle="tab"]').on('shown.bs.tab', function(e) { + var target = $(this).attr('href'); + $(target).css('left', '-' + $(window).width() + 'px'); + var left = $(target).offset().left; + $(target).css({ + left: left + }).animate({ + "left": "0px" + }, "10"); + }); + + $('#guest-edit-window a[data-toggle="tab"]:first').tab('show'); var refreshCDROMs = function() { kimchi.listVMStorages({ @@ -50,17 +83,17 @@ kimchi.guest_edit_main = function() { container.append(templated); }); - $('.replace', container).button(); + //$('.replace', container).button(); - $('.detach', container).button(); + //$('.detach', container).button(); if (kimchi.thisVMState === 'running') { $('.detach[data-type="cdrom"]', container).remove(); } - $('.save', container).button(); + //$('.save', container).button(); - $('.cancel', container).button(); + //$('.cancel', container).button(); }); }; @@ -68,10 +101,8 @@ kimchi.guest_edit_main = function() { var initStorageListeners = function() { var container = $('#form-guest-edit-storage .body'); var toggleCDROM = function(rowNode, toEdit) { - $('button.replace,button.detach', rowNode) - [(toEdit ? 'add' : 'remove') + 'Class']('hidden'); - $('button.save,button.cancel', rowNode) - [(toEdit ? 'remove' : 'add') + 'Class']('hidden'); + $('button.replace,button.detach', rowNode)[(toEdit ? 'add' : 'remove') + 'Class']('hidden'); + $('button.save,button.cancel', rowNode)[(toEdit ? 'remove' : 'add') + 'Class']('hidden'); var pathBox = $('.path input', rowNode) .prop('readonly', !toEdit); toEdit && pathBox.select(); @@ -93,10 +124,10 @@ kimchi.guest_edit_main = function() { $(container).on('click', 'button.detach', function(e) { e.preventDefault(); var settings = { - title : i18n['KCHAPI6004M'], - content : i18n['KCHVMCD6001M'], - confirm : i18n['KCHAPI6002M'], - cancel : i18n['KCHAPI6003M'] + title: i18n['KCHAPI6004M'], + content: i18n['KCHVMCD6001M'], + confirm: i18n['KCHAPI6002M'], + cancel: i18n['KCHAPI6003M'] }; if ($(this).data('type') == "disk") settings['content'] = i18n['KCHVMCD6009M']; @@ -128,7 +159,7 @@ kimchi.guest_edit_main = function() { }, function(result) { var errText = result['reason'] || result['responseJSON']['reason']; - wok.message.error(errText); + wok.message.error(errText, '#alert-modal-container'); }); }); @@ -140,7 +171,7 @@ kimchi.guest_edit_main = function() { }; var setupInterface = function() { - $(".add", "#form-guest-edit-interface").button().click(function(evt){ + $(".add", "#form-guest-edit-interface").on('click', function(evt) { evt.preventDefault(); addItem({ id: -1, @@ -152,88 +183,89 @@ kimchi.guest_edit_main = function() { editMode: "" }); }); - var toggleEdit = function(item, on, itemId){ + var toggleEdit = function(item, on, itemId) { $("#label-mac-" + itemId, item).toggleClass("hide", on); $("#edit-mac-" + itemId, item).toggleClass("hide", !on); $("#label-network-" + itemId, item).toggleClass("hide", false); $("select", item).toggleClass("hide", true); + $(".bootstrap-select", item).toggleClass("hide", true); $(".action-area", item).toggleClass("hide"); }; var addItem = function(data) { if (data.id == -1) { data.id = $('#form-guest-edit-interface > .body').children().size() } - if (data.ips == "" || data.ips == null){ + if (data.ips == "" || data.ips == null) { data.ips = i18n["KCHNET6001M"]; - }else{ + } else { data.ips = data.ips; } - var itemNode = $.parseHTML(wok.substitute($('#interface-tmpl').html(),data)); + var itemNode = $.parseHTML(wok.substitute($('#interface-tmpl').html(), data)); $(".body", "#form-guest-edit-interface").append(itemNode); $("select", itemNode).append(networkOptions); - if(data.network!==""){ + $("select", itemNode).selectpicker(); + if (data.network !== "") { $("select", itemNode).val(data.network); } - $(".edit", itemNode).button({ disabled: kimchi.thisVMState === "running" }).click(function(evt){ + $('.edit', itemNode).attr('disabled', kimchi.thisVMState === "running"); + $(".edit", itemNode).on('click', function(evt) { evt.preventDefault(); toggleEdit($(this).closest('div'), true, data.id); }); - $(".delete", itemNode).button({ - icons: { primary: "ui-icon-trash" }, - text: false - }).click(function(evt){ + $(".delete", itemNode).on('click', function(evt) { evt.preventDefault(); var item = $(this).parent().parent(); - kimchi.deleteGuestInterface(kimchi.selectedGuest, item.prop("id"), function(){ + kimchi.deleteGuestInterface(kimchi.selectedGuest, item.prop("id"), function() { item.remove(); }); }); - $(".save", itemNode).button().click(function(evt){ + $(".save", itemNode).on('click', function(evt) { evt.preventDefault(); var item = $(this).parent().parent(); var interface = { network: $("select", item).val(), - type: "network", - mac: $(":text", item).val(), - ips: $(".ipText", item).val() + type: "network", + mac: $(":text", item).val(), + ips: $(".ipText", item).val() }; - var postUpdate = function(mac){ + var postUpdate = function(mac) { $("#label-network-" + data.id, item).text(interface.network); $("#label-mac-" + data.id, item).text(mac); $("#edit-mac-" + data.id, item).val(mac); toggleEdit(item, false, data.id); }; - if(item.prop("id")==""){ - kimchi.createGuestInterface(kimchi.selectedGuest, interface, function(data){ + if (item.prop("id") == "") { + kimchi.createGuestInterface(kimchi.selectedGuest, interface, function(data) { item.prop("id", data.mac); postUpdate(data.mac); }); - }else{ + } else { if (item.prop('id') == interface.mac) { toggleEdit(item, false, data.id); } else { kimchi.updateGuestInterface(kimchi.selectedGuest, item.prop('id'), - interface, function(data){ - item.prop("id", data.mac); - postUpdate(data.mac); - }); + interface, + function(data) { + item.prop("id", data.mac); + postUpdate(data.mac); + }); } } }); - $(".cancel", itemNode).button().click(function(evt){ + $(".cancel", itemNode).on('click', function(evt) { evt.preventDefault(); var item = $(this).parent().parent(); - $("label", item).text()==="" ? item.remove() : toggleEdit(item, false, data.id); + $("label", item).text() === "" ? item.remove() : toggleEdit(item, false, data.id); }); }; var networkOptions = ""; - kimchi.listNetworks(function(data){ - for(var i=0;i<data.length;i++){ - var isSlected = i==0 ? " selected" : ""; - networkOptions += "<option"+isSlected+">"+data[i].name+"</option>"; + kimchi.listNetworks(function(data) { + for (var i = 0; i < data.length; i++) { + var isSlected = i == 0 ? " selected" : ""; + networkOptions += "<option" + isSlected + ">" + data[i].name + "</option>"; } - kimchi.getGuestInterfaces(kimchi.selectedGuest, function(data){ - for(var i=0;i<data.length;i++){ + kimchi.getGuestInterfaces(kimchi.selectedGuest, function(data) { + for (var i = 0; i < data.length; i++) { data[i].viewMode = ""; data[i].editMode = "hide"; data[i].id = i; @@ -244,8 +276,8 @@ kimchi.guest_edit_main = function() { }; var setupPermission = function() { - //set up for LDAP - $(".add", "#form-guest-edit-permission").button().click(function(evt){ + //set up for LDAP + $(".add", "#form-guest-edit-permission").on('click', function(evt) { evt.preventDefault(); addItem({ user: "", @@ -256,16 +288,16 @@ kimchi.guest_edit_main = function() { }); }); var addItem = function(data) { - var itemNode = $.parseHTML(wok.substitute($('#ldap-user-tmpl').html(),data)); + var itemNode = $.parseHTML(wok.substitute($('#ldap-user-tmpl').html(), data)); $(".body", "#form-guest-edit-permission .ldap").append(itemNode); - $(".delete", itemNode).button().click(function(evt){ + $(".delete", itemNode).on('click', function(evt) { evt.preventDefault(); var item = $(this).parent().parent(); item.remove(); }); $("input").focusout(function() { var item = $(this).parent().parent(); - var user= $(this).val(); + var user = $(this).val(); item.prop("id", user); $("label", item).text(user); }); @@ -277,95 +309,98 @@ kimchi.guest_edit_main = function() { $(".checked", itemNode).addClass("hide"); } }; - var toggleEdit = function(item, on){ - $("label", item).toggleClass("hide", on); + var toggleEdit = function(item, on) { + $(".cell span", item).toggleClass("hide", on); $("input", item).toggleClass("hide", !on); $(".action-area", item).toggleClass("hide"); }; //set up for PAM - var userNodes = {}, groupNodes = {}; + var userNodes = {}, + groupNodes = {}; authType = kimchi.capabilities['auth'] if (authType == 'pam') { $("#form-guest-edit-permission .ldap").hide(); - kimchi.retrieveVM(kimchi.selectedGuest, function(vm){ - kimchi.getUsers(function(users){ - kimchi.getGroups(function(groups){ - var subArray = function(a1, a2){ //a1-a2 - for(var i=0; i<a2.length; i++){ - for(var j=0; j<a1.length; j++){ - if(a2[i] == a1[j]){ + kimchi.retrieveVM(kimchi.selectedGuest, function(vm) { + kimchi.getUsers(function(users) { + kimchi.getGroups(function(groups) { + var subArray = function(a1, a2) { //a1-a2 + for (var i = 0; i < a2.length; i++) { + for (var j = 0; j < a1.length; j++) { + if (a2[i] == a1[j]) { a1.splice(j, 1); break; } } } }; - subArray(users, vm.users); subArray(groups, vm.groups); + subArray(users, vm.users); + subArray(groups, vm.groups); init(users, groups, vm.users, vm.groups); }); }); }); } else if (authType == 'ldap') { $("#form-guest-edit-permission .pam").hide(); - kimchi.retrieveVM(kimchi.selectedGuest, function(vm){ - for (var i=0; i<vm.users.length; i++) { + kimchi.retrieveVM(kimchi.selectedGuest, function(vm) { + for (var i = 0; i < vm.users.length; i++) { addItem({ user: vm.users[i], viewMode: "", freeze: true, editMode: "hide", - checked: true}); + checked: true + }); } - }); + }); } - var sortNodes = function(container, isUser){ + var sortNodes = function(container, isUser) { nodes = container.children(); var keys = []; - nodes.each(function(){ + nodes.each(function() { keys.push($("label", this).text()); }); keys.sort(); container.empty(); - for(var i=0; i<keys.length; i++){ + for (var i = 0; i < keys.length; i++) { var itemNode = isUser ? userNodes[keys[i]] : groupNodes[keys[i]]; - $(itemNode).click(function(){ + $(itemNode).click(function() { $(this).toggleClass("item-picked"); }); container.append(itemNode); } }; - var init = function(availUsers, availGroups, selUsers, selGroups){ - var initNode = function(key, isUserNode){ + var init = function(availUsers, availGroups, selUsers, selGroups) { + var initNode = function(key, isUserNode) { var nodeGroups = isUserNode ? userNodes : groupNodes; nodeGroups[key] = $.parseHTML(wok.substitute($('#permission-item-pam').html(), { val: key, - class: isUserNode? "user-icon" : "group-icon" + class: isUserNode ? "fa-user" : "fa-users" })); }; - for(var i=0; i<availUsers.length; i++){ + for (var i = 0; i < availUsers.length; i++) { initNode(availUsers[i], true); $("#permission-avail-users").append(userNodes[availUsers[i]]); } sortNodes($("#permission-avail-users"), true); - for(var i=0; i<selUsers.length; i++){ + for (var i = 0; i < selUsers.length; i++) { initNode(selUsers[i], true); $("#permission-sel-users").append(userNodes[selUsers[i]]); } sortNodes($("#permission-sel-users"), true); - for(var i=0; i<availGroups.length; i++){ + for (var i = 0; i < availGroups.length; i++) { initNode(availGroups[i], false); $("#permission-avail-groups").append(groupNodes[availGroups[i]]); } sortNodes($("#permission-avail-groups"), false); - for(var i=0; i<selGroups.length; i++){ + for (var i = 0; i < selGroups.length; i++) { initNode(selGroups[i], false); $("#permission-sel-groups").append(groupNodes[selGroups[i]]); } sortNodes($("#permission-sel-groups"), false); }; - var filterNodes = function(key, container){ - container.children().each(function(){ - $(this).css("display", $("label", this).text().indexOf(key)==-1 ? "none" : ""); + var filterNodes = function(key, container) { + container.children().each(function() { + $(this).css("display", $("label", this).text().indexOf(key) == -1 ? "none" : ""); }); } $("#permission-avail-searchBox").on("keyup", function() { @@ -378,7 +413,7 @@ kimchi.guest_edit_main = function() { filterNodes(key, $("#permission-sel-users")); filterNodes(key, $("#permission-sel-groups")); }); - $('#permissionGo').button().click(function(evt) { + $('#permissionGo').on('click', function(evt) { evt.preventDefault(); $("#permission-avail-users").children(".item-picked").appendTo("#permission-sel-users").removeClass("item-picked"); sortNodes($("#permission-sel-users"), true); @@ -388,7 +423,7 @@ kimchi.guest_edit_main = function() { filterNodes("", $("#permission-sel-users")); filterNodes("", $("#permission-sel-groups")); }); - $('#permissionBack').button().click(function(evt) { + $('#permissionBack').on('click', function(evt) { evt.preventDefault(); $("#permission-sel-users").children(".item-picked").appendTo("#permission-avail-users").removeClass("item-picked"); sortNodes($("#permission-avail-users"), true); @@ -399,211 +434,212 @@ kimchi.guest_edit_main = function() { filterNodes("", $("#permission-avail-groups")); }); } - var filterPCINodes = function(group, text, targetName, targetIcon){ + + var filterPCINodes = function(group, text, targetName) { text = text.toLowerCase(); targetName = targetName.toLowerCase(); - $(".body", "#form-guest-edit-pci").children().each(function(){ - var currentName = $(".name", this).text().toLowerCase(); - var textFilter = currentName.indexOf(text)!=-1; - textFilter = textFilter || $(".product", this).text().toLowerCase().indexOf(text)!=-1; - textFilter = textFilter || $(".vendor", this).text().toLowerCase().indexOf(text)!=-1; - var display = "none"; - var itemGroup = $("button", this).button("option", "icons").primary; - if (currentName == targetName){ - itemGroup = targetIcon; - } - if(textFilter){ - if(group == "all"){ - display = ""; - }else if(group=="toAdd" && itemGroup=="ui-icon-plus"){ - display = "" - }else if(group == "added" && itemGroup=="ui-icon-minus"){ - display = "" + $('.body', '#form-guest-edit-pci').children().each(function() { + var currentName = $('.name', this).text().toLowerCase(); + var textFilter = currentName.indexOf(text) !== -1; + textFilter = textFilter || $('.product', this).text().toLowerCase().indexOf(text) !== -1; + textFilter = textFilter || $('.vendor', this).text().toLowerCase().indexOf(text) !== -1; + var display = 'none'; + var itemGroup = $('button i', this); + // if (currentName === targetName) { + // itemGroup.addClass('fa ' + targetIcon); + // } + if (textFilter) { + if (group === 'all') { + display = ''; + } else if (group === 'toAdd' && itemGroup.hasClass('fa-power-off')) { + display = ''; + } else if (group === 'added' && itemGroup.hasClass('fa-ban')) { + display = ''; } } - $(this).css("display", display); + $(this).css('display', display); }); - } - var setupPCIDevice = function(){ - kimchi.getAvailableHostPCIDevices(function(hostPCIs){ - kimchi.getVMPCIDevices(kimchi.selectedGuest, function(vmPCIs){ - setupNode(hostPCIs, "ui-icon-plus"); - setupNode(vmPCIs, "ui-icon-minus"); + }; + var setupPCIDevice = function() { + kimchi.getAvailableHostPCIDevices(function(hostPCIs) { + kimchi.getVMPCIDevices(kimchi.selectedGuest, function(vmPCIs) { + setupNode(hostPCIs, 'fa-power-off'); + setupNode(vmPCIs, 'fa-ban'); }); }); - $("select", "#form-guest-edit-pci").change(function(){ - filterPCINodes($(this).val(), $("input", "#form-guest-edit-pci").val(), "", ""); + $('select', '#form-guest-edit-pci').change(function() { + filterPCINodes($(this).val(), $('input', '#form-guest-edit-pci').val(), ''); }); - $("input", "#form-guest-edit-pci").on("keyup", function() { - filterPCINodes($("select", "#form-guest-edit-pci").val(), $(this).val(), "", ""); + $('select', '#form-guest-edit-pci').selectpicker(); + $('input', '#form-guest-edit-pci').on('keyup', function() { + filterPCINodes($('select', '#form-guest-edit-pci').val(), $(this).val(), ''); }); }; - var setupNode = function(arrPCIDevices, iconClass){ + var setupNode = function(arrPCIDevices, iconClass) { var pciEnabled = kimchi.capabilities.kernel_vfio; - var pciDeviceName, pciDeviceProduct, pciDeviceProductDesc, pciDeviceVendor, pciDeviceVendorDesc; - for(var i=0; i<arrPCIDevices.length; i++){ + var pciDeviceName, pciDeviceProduct, pciDeviceProductDesc, pciDeviceVendor, pciDeviceVendorDesc, pciDeviceStatus; + for (var i = 0; i < arrPCIDevices.length; i++) { pciDeviceName = arrPCIDevices[i].name; pciDeviceProduct = arrPCIDevices[i].product; pciDeviceVendor = arrPCIDevices[i].vendor; - if(pciDeviceProduct!=null){ + pciDeviceStatus = (iconClass === 'fa-ban') ? 'enabled' : 'disabled'; + if (pciDeviceProduct !== null) { pciDeviceProductDesc = pciDeviceProduct.description; } - if(pciDeviceVendor!=null){ + if (pciDeviceVendor !== null) { pciDeviceVendorDesc = pciDeviceVendor.description; } - var itemNode = $.parseHTML(wok.substitute($('#pci-tmpl').html(),{ - name: pciDeviceName, - product: pciDeviceProductDesc, - vendor: pciDeviceVendorDesc + var itemNode = $.parseHTML(wok.substitute($('#pci-tmpl').html(), { + status: pciDeviceStatus, + name: pciDeviceName, + product: pciDeviceProductDesc, + vendor: pciDeviceVendorDesc })); - $(".body", "#form-guest-edit-pci").append(itemNode); - pciEnabled || $("button", itemNode).remove(); - $("button", itemNode).button({ - icons: { primary: iconClass }, - text: false - }).click(function(){ + $('.body', '#form-guest-edit-pci').append(itemNode); + pciEnabled || $('button', itemNode).remove(); + $('button i', itemNode).addClass(iconClass); + $('button', itemNode).on('click', function(event) { + event.preventDefault(); var obj = $(this); - var id = obj.parent().prop("id"); - if(obj.button("option", "icons").primary == "ui-icon-minus"){ - kimchi.removeVMPCIDevice(kimchi.selectedGuest, id, function(){ - kimchi.getAvailableHostPCIDevices(function(arrPCIDevices1){ - kimchi.getVMPCIDevices(kimchi.selectedGuest, function(vmPCIs1){ - for(var k=0; k<arrPCIDevices1.length; k++) { - $("button", "#" + arrPCIDevices1[k].name).button("option", "icons", {primary: "ui-icon-plus"}); + var objIcon = obj.find('i'); + var id = obj.parent().parent().attr('id'); + if (objIcon.hasClass('fa-ban')) { + kimchi.removeVMPCIDevice(kimchi.selectedGuest, id, function() { + kimchi.getAvailableHostPCIDevices(function(arrPCIDevices1) { + kimchi.getVMPCIDevices(kimchi.selectedGuest, function(vmPCIs1) { + for (var k = 0; k < arrPCIDevices1.length; k++) { + $('button i', '#' + arrPCIDevices1[k].name).removeClass('fa-ban').addClass('fa-power-off'); } - for(var k=0; k<vmPCIs1.length; k++) { - $("button", "#" + vmPCIs1[k].name).button("option", "icons", {primary: "ui-icon-minus"}); + for (var k = 0; k < vmPCIs1.length; k++) { + $('button i', '#' + arrPCIDevices1[k].name).removeClass('fa-power-off').addClass('fa-ban'); } }); }); //id is for the object that is being added back to the available PCI devices - filterPCINodes($("select", "#form-guest-edit-pci").val(), $("input", "#form-guest-edit-pci").val(), id, "ui-icon-plus"); + filterPCINodes($('select', '#form-guest-edit-pci').val(), $('input', '#form-guest-edit-pci').val(), id); }); } else { - kimchi.addVMPCIDevice(kimchi.selectedGuest, { name: id }, function(){ - kimchi.getVMPCIDevices(kimchi.selectedGuest, function(vmPCIs1){ - for(var k=0; k<vmPCIs1.length; k++) { - $("button", "#" + vmPCIs1[k].name).button("option", "icons", {primary: "ui-icon-minus"}); + kimchi.addVMPCIDevice(kimchi.selectedGuest, { + name: id + }, function() { + kimchi.getVMPCIDevices(kimchi.selectedGuest, function(vmPCIs1) { + for (var k = 0; k < vmPCIs1.length; k++) { + $('button i', '#' + arrPCIDevices1[k].name).removeClass('fa-power-off').addClass('fa-ban'); } }); //id is for the object that is being removed from the available PCI devices - filterPCINodes($("select", "#form-guest-edit-pci").val(), $("input", "#form-guest-edit-pci").val(), id, "ui-icon-minus"); + filterPCINodes($('select', '#form-guest-edit-pci').val(), $('input', '#form-guest-edit-pci').val(), id); }); } }); kimchi.getPCIDeviceCompanions(pciDeviceName, function(infoData) { - var pciTitle = i18n["KCHVMED6007M"] + "\n"; + var pciTitle = i18n['KCHVMED6007M'] + '\n'; var haveCompanions = false; - for(var p=0; p<infoData.length; p++) { - if(infoData[p].device_type === "net") { + for (var p = 0; p < infoData.length; p++) { + if (infoData[p].device_type === 'net') { haveCompanions = true; - pciTitle += " " + infoData[p].name + "\n"; - pciTitle += " " + i18n["KCHVMED6001M"] + " " + infoData[p].interface; - pciTitle += ", " + i18n["KCHVMED6002M"] + " " + infoData[p].address; - pciTitle += ", " + i18n["KCHVMED6003M"] + " " + infoData[p].link_type + "\n"; - } else if(infoData[p].device_type === "storage") { + pciTitle += ' ' + infoData[p].name + '\n'; + pciTitle += ' ' + i18n['KCHVMED6001M'] + ' ' + infoData[p].interface; + pciTitle += ', ' + i18n['KCHVMED6002M'] + ' ' + infoData[p].address; + pciTitle += ', ' + i18n['KCHVMED6003M'] + ' ' + infoData[p].link_type + '\n'; + } else if (infoData[p].device_type === 'storage') { haveCompanions = true; - pciTitle += " " + infoData[p].name + "\n"; - pciTitle += " " + i18n["KCHVMED6004M"] + " " + infoData[p].block; - pciTitle += ", " + i18n["KCHVMED6005M"] + " " + infoData[p].drive_type; - pciTitle += ", " + i18n["KCHVMED6006M"] + " " + infoData[p].model + "\n"; + pciTitle += ' ' + infoData[p].name + '\n'; + pciTitle += ' ' + i18n['KCHVMED6004M'] + ' ' + infoData[p].block; + pciTitle += ', ' + i18n['KCHVMED6005M'] + ' ' + infoData[p].drive_type; + pciTitle += ', ' + i18n['KCHVMED6006M'] + ' ' + infoData[p].model + '\n'; } } - for(var q=0; q<infoData.length; q++) { - haveCompanions && $(".name", "#" + infoData[q].parent).attr("title", pciTitle); - haveCompanions && $(".product", "#" + infoData[q].parent).attr("title", pciTitle); - haveCompanions && $(".vendor", "#" + infoData[q].parent).attr("title", pciTitle); + for (var q = 0; q < infoData.length; q++) { + haveCompanions && $('.name', '#' + infoData[q].parent).attr('title', pciTitle); + haveCompanions && $('.product', '#' + infoData[q].parent).attr('title', pciTitle); + haveCompanions && $('.vendor', '#' + infoData[q].parent).attr('title', pciTitle); } }); } }; + var setupSnapshot = function() { var currentSnapshot; - var setCurrentSnapshot = function(aSnapshot){ - if(!aSnapshot) - kimchi.getCurrentSnapshot(kimchi.selectedGuest, function(snapshot){ - if(snapshot&&snapshot.name) aSnapshot = snapshot.name; + var setCurrentSnapshot = function(aSnapshot) { + if (!aSnapshot) + kimchi.getCurrentSnapshot(kimchi.selectedGuest, function(snapshot) { + if (snapshot && snapshot.name) aSnapshot = snapshot.name; }, null, true); - if(aSnapshot){ - if(currentSnapshot) $(".ui-icon-check", "#"+currentSnapshot).addClass("hide"); - $(".ui-icon-check", "#"+aSnapshot).removeClass("hide"); + if (aSnapshot) { + if (currentSnapshot) $(".fa.fa-check", "#" + currentSnapshot).addClass("hide"); + $(".fa.fa-check", "#" + aSnapshot).removeClass("hide"); currentSnapshot = aSnapshot; } }; var addItem = function(data, container) { - var itemNode = $.parseHTML(wok.substitute($('#snapshot-tmpl').html(),data)); - $("."+container, "#form-guest-edit-snapshot").append(itemNode); - $(".delete", itemNode).button({ - icons: { primary: "ui-icon-trash" }, - text: false - }).click(function(evt){ + var itemNode = $.parseHTML(wok.substitute($('#snapshot-tmpl').html(), data)); + $("." + container, "#form-guest-edit-snapshot").append(itemNode); + $(".delete", itemNode).on('click', function(evt) { evt.preventDefault(); var item = $(this).parent().parent(); - $("button", "#form-guest-edit-snapshot").button("disable"); - kimchi.deleteSnapshot(kimchi.selectedGuest, item.prop("id"), function(){ + $("button", "#form-guest-edit-snapshot").prop("disabled", true); + kimchi.deleteSnapshot(kimchi.selectedGuest, item.prop("id"), function() { item.remove(); setCurrentSnapshot(); - $("button", "#form-guest-edit-snapshot").button("enable"); - }, function(data){ - wok.message.error(data.responseJSON.reason); - $("button", "#form-guest-edit-snapshot").button("enable"); + $("button", "#form-guest-edit-snapshot").prop("disabled", false); + }, function(data) { + wok.message.error(data.responseJSON.reason, '#alert-modal-container'); + $("button", "#form-guest-edit-snapshot").prop("disabled", false); }); }); - $(".revert", itemNode).button({ - icons: { primary: "ui-icon-arrowthick-1-ne" }, - text: false - }).click(function(evt){ + $(".revert", itemNode).on('click', function(evt) { evt.preventDefault(); var item = $(this).parent().parent(); - $(".ui-icon-check", item).addClass("hide"); - $(".icon", item).removeClass("hide"); - $("button", "#form-guest-edit-snapshot").button("disable"); - kimchi.revertSnapshot(kimchi.selectedGuest, item.prop("id"), function(){ - $(".icon", item).addClass("hide"); - $("button", "#form-guest-edit-snapshot").button("enable"); + $(".fa.fa-check", item).addClass("hide"); + $(".wok-loading", item).removeClass("hide"); + $("button", "#form-guest-edit-snapshot").prop("disabled", true); + kimchi.revertSnapshot(kimchi.selectedGuest, item.prop("id"), function() { + $(".wok-loading", item).addClass("hide"); + $("button", "#form-guest-edit-snapshot").prop("disabled", false); setCurrentSnapshot(item.prop("id")); kimchi.listVmsAuto(); wok.window.close(); - }, function(data){ - wok.message.error(data.responseJSON.reason); - $(".icon", item).addClass("hide"); - $("button", "#form-guest-edit-snapshot").button("enable"); + }, function(data) { + wok.message.error(data.responseJSON.reason, '#alert-modal-container'); + $(".wok-loading-icon", item).addClass("hide"); + $("button", "#form-guest-edit-snapshot").prop("disabled", false); }); }); }; - var addOngoingItem = function(task){ + var addOngoingItem = function(task) { var uri = task.target_uri; addItem({ - name: uri.substring(uri.lastIndexOf('/')+1, uri.length), + name: uri.substring(uri.lastIndexOf('/') + 1, uri.length), created: "", listMode: "hide", createMode: "" }, 'task'); - if(kimchi.trackingTasks.indexOf(task.id)==-1) - kimchi.trackTask(task.id, function(task){ + if (kimchi.trackingTasks.indexOf(task.id) == -1) + kimchi.trackTask(task.id, function(task) { listGeneratingSnapshots(); - $("button", "#form-guest-edit-snapshot").button("enable"); - }, function(err){ - wok.message.error(err.message); + $("button", "#form-guest-edit-snapshot").prop("disabled", false); + }, function(err) { + wok.message.error(err.message, '#alert-modal-container'); listGeneratingSnapshots(); - $("button", "#form-guest-edit-snapshot").button("enable"); + $("button", "#form-guest-edit-snapshot").prop("disabled", false); }); }; - var listGeneratingSnapshots = function(){ - kimchi.getTasksByFilter('status=running&target_uri='+encodeURIComponent('^/plugins/kimchi/snapshots/*'), function(tasks) { + var listGeneratingSnapshots = function() { + kimchi.getTasksByFilter('status=running&target_uri=' + encodeURIComponent('^/plugins/kimchi/snapshots/*'), function(tasks) { $(".task", "#form-guest-edit-snapshot").empty(); - for(var i=0;i<tasks.length;i++){ + for (var i = 0; i < tasks.length; i++) { addOngoingItem(tasks[i]); } - if(tasks.length==0) listSnapshots(); + if (tasks.length == 0) listSnapshots(); }); }; - var listSnapshots = function(){ - kimchi.listSnapshots(kimchi.selectedGuest, function(data){ + var listSnapshots = function() { + kimchi.listSnapshots(kimchi.selectedGuest, function(data) { $(".body", "#form-guest-edit-snapshot").empty(); - for(var i=0;i<data.length;i++){ - data[i].created = new Date(data[i].created*1000).toLocaleString(); + for (var i = 0; i < data.length; i++) { + data[i].created = new Date(data[i].created * 1000).toLocaleString(); data[i].createMode = "hide"; data[i].listMode = ""; addItem(data[i], 'body'); @@ -612,17 +648,14 @@ kimchi.guest_edit_main = function() { }); }; listGeneratingSnapshots(); - $(".add", "#form-guest-edit-snapshot").button({ - icons: { primary: "ui-icon-plusthick" }, - text: false - }).click(function(evt){ + $(".add", "#form-guest-edit-snapshot").on('click', function(evt) { evt.preventDefault(); - kimchi.createSnapshot(kimchi.selectedGuest, function(task){ - $("button", "#form-guest-edit-snapshot").button("disable"); + kimchi.createSnapshot(kimchi.selectedGuest, function(task) { + $("button", "#form-guest-edit-snapshot").prop("disabled", true); addOngoingItem(task); }); }); - if(kimchi.thisVMState=="running") $("button", "#form-guest-edit-snapshot").remove(); + if (kimchi.thisVMState == "running") $("button", "#form-guest-edit-snapshot").remove(); }; var initContent = function(guest) { @@ -630,19 +663,12 @@ kimchi.guest_edit_main = function() { $('#form-guest-edit-general').fillWithObject(guest); kimchi.thisVMState = guest['state']; refreshCDROMs(); - $('#guest-edit-attach-cdrom-button').button({ - icons: { - primary: "ui-icon-plusthick" - }, - text: false - }).click(function(event) { - event.preventDefault(); - wok.window.open('plugins/kimchi/guest-storage-add.html','extendCreateStorage'); - }); + $('#guest-edit-attach-cdrom-button').on('click', function(event) { + event.preventDefault(); + wok.window.open('plugins/kimchi/guest-storage-add.html', 'extendCreateStorage'); + }); if ((kimchi.thisVMState === "running") || (kimchi.thisVMState === "paused")) { $("#form-guest-edit-general input").prop("disabled", true); - } else { - $("#action-button-container").removeClass("hidden"); } var onAttached = function(params) { @@ -676,55 +702,60 @@ kimchi.guest_edit_main = function() { var generalSubmit = function(event) { $(saveButton).prop('disabled', true); - var data=$('#form-guest-edit-general').serializeObject(); - if(data['memory']!=undefined) { + var data = $('#form-guest-edit-general').serializeObject(); + if (data['memory'] != undefined) { data['memory'] = Number(data['memory']); } - if(data['cpus']!=undefined) { - data['cpus'] = Number(data['cpus']); + if (data['cpus'] != undefined) { + data['cpus'] = Number(data['cpus']); } kimchi.updateVM(kimchi.selectedGuest, data, function() { kimchi.listVmsAuto(); wok.window.close(); }, function(err) { - wok.message.error(err.responseJSON.reason); + wok.message.error(err.responseJSON.reason, '#alert-modal-container'); $(saveButton).prop('disabled', false); }); } var permissionSubmit = function(event) { - var content = { users: [], groups: [] }; + var content = { + users: [], + groups: [] + }; authType = kimchi.capabilities['auth'] if (authType == 'pam') { - $("#permission-sel-users").children().each(function(){ + $("#permission-sel-users").children().each(function() { content.users.push($("label", this).text()); }); - $("#permission-sel-groups").children().each(function(){ + $("#permission-sel-groups").children().each(function() { content.groups.push($("label", this).text()); }); - kimchi.updateVM(kimchi.selectedGuest, content, function(){ + kimchi.updateVM(kimchi.selectedGuest, content, function() { wok.window.close(); }); } else if (authType == 'ldap') { $(saveButton).prop('disabled', true); var errors = 0; - $(".body", "#form-guest-edit-permission .ldap").children().each(function () { + $(".body", "#form-guest-edit-permission .ldap").children().each(function() { var elem = $(this); content.users.push(elem.attr("id")); if (!$('input', elem).hasClass('hide')) { - var user = {'user_id': $(this).attr("id")}; - kimchi.getUserById(user, null, function (data) { + var user = { + 'user_id': $(this).attr("id") + }; + kimchi.getUserById(user, null, function(data) { errors += 1; $("input", elem).addClass("checked"); }); } }); if (errors == 0) { - kimchi.updateVM(kimchi.selectedGuest, content, function(){ - wok.window.close(); + kimchi.updateVM(kimchi.selectedGuest, content, function() { + wok.window.close(); }); } else { $(saveButton).prop('disabled', false); @@ -732,15 +763,4 @@ kimchi.guest_edit_main = function() { } } - // tap map, "general": 0, "storage": 1, "interface": 2, "permission": 3, "password": 4 - var submit_map = {0: generalSubmit, 3:permissionSubmit}; - var submitForm = function(event) { - var current = $('#guest-edit-tabs').tabs( "option", "active" ); - var submitFun = submit_map[current]; - submitFun && submitFun(event); - event.preventDefault(); - }; - - $(guestEditForm).on('submit', submitForm); - $(saveButton).on('click', submitForm); }; diff --git a/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_storage_add.main.js b/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_storage_add.main.js index d6606ee..881ff7c 100644 --- a/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_storage_add.main.js +++ b/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_storage_add.main.js @@ -31,10 +31,13 @@ kimchi.guest_storage_add_main = function() { var storageAddForm = $('#form-guest-storage-add'); var submitButton = $('#guest-storage-button-add'); - var typeTextbox = $('input[name="type"]', storageAddForm); + var typeTextbox = $('select#guest-storage-type', storageAddForm); var pathTextbox = $('input[name="path"]', storageAddForm); - var poolTextbox = $('input[name="pool"]', storageAddForm); - var volTextbox = $('input[name="vol"]', storageAddForm); + var poolTextbox = $('select#guest-disk-pool', storageAddForm); + var volTextbox = $('select#guest-disk-vol', storageAddForm); + var selectStorageTypeHTML = ''; + var selectStoragePoolHTML = ''; + var selectStorageVolHTML = ''; typeTextbox.change(function() { var pathObject = {'cdrom': ".path-section", 'disk': '.volume-section'} @@ -56,6 +59,7 @@ kimchi.guest_storage_add_main = function() { $(poolTextbox).val(""); $(volTextbox).val(""); } + $('.selectpicker').selectpicker('refresh'); }); kimchi.listStoragePools(function(result) { @@ -67,17 +71,22 @@ kimchi.guest_storage_add_main = function() { label: storagePool.name, value: storagePool.name }); + selectStoragePoolHTML += '<option value="'+ storagePool.name + '">' + storagePool.name + '</option>'; } + }); - wok.select('guest-add-storage-pool-list', options); + poolTextbox.append(selectStoragePoolHTML); + poolTextbox.val(options[0].value); + poolTextbox.selectpicker(); } }); poolTextbox.change(function() { var options = []; + selectStorageVolHTML = ''; + volTextbox.empty(); kimchi.listStorageVolumes($(this).val(), function(result) { var validVolType = { cdrom: /iso/, disk: /^(raw|qcow|qcow2|bochs|qed|vmdk)$/}; - $('#guest-disk').selectMenu(); if (result.length) { $.each(result, function(index, value) { // Only unused volume can be attached @@ -89,11 +98,20 @@ kimchi.guest_storage_add_main = function() { } }); if (options.length) { + for (var i = 0; i < options.length; i++) { + selectStorageVolHTML += '<option value="'+ options[i].value + '">' + options[i].label + '</option>'; + } + volTextbox.append(selectStorageVolHTML); $(volTextbox).val(options[0].value); $(volTextbox).change(); + $(volTextbox).prop('disabled',false); + }else { + $(volTextbox).prop('disabled',true); + $(submitButton).prop('disabled', true); } - } - $('#guest-disk').selectMenu("setData", options); + volTextbox.selectpicker(); + $('.selectpicker').selectpicker('refresh'); + } }, null, false); }); @@ -117,7 +135,12 @@ kimchi.guest_storage_add_main = function() { poolTextbox.change(); } var selectType = $(typeTextbox).val(); - wok.select('guest-storage-type-list', types); + for (var i = 0; i < types.length; i++) { + selectStorageTypeHTML += '<option value="'+ types[i].value + '">' + types[i].label + '</option>'; + } + typeTextbox.append(selectStorageTypeHTML); + typeTextbox.find('option:first').attr('selected','selected'); + typeTextbox.selectpicker(); var validateCDROM = function(settings) { if (/^((https|http|ftp|ftps|tftp|\/).*)+$/.test(settings['path'])) diff --git a/src/wok/plugins/kimchi/ui/pages/guest-edit.html.tmpl b/src/wok/plugins/kimchi/ui/pages/guest-edit.html.tmpl index 868dd4d..4568f34 100644 --- a/src/wok/plugins/kimchi/ui/pages/guest-edit.html.tmpl +++ b/src/wok/plugins/kimchi/ui/pages/guest-edit.html.tmpl @@ -22,31 +22,21 @@ #silent _t = t.gettext <div id="guest-edit-window" class="window modal-content"> <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">$_("Edit Guest")</h4> </div> <div class="modal-body"> - <div id="guest-edit-tabs"> - <ul> - <li> - <a href="#form-guest-edit-general">$_("General")</a> - </li> - <li> - <a href="#form-guest-edit-storage">$_("Storage")</a> - </li> - <li> - <a href="#form-guest-edit-interface">$_("Interface")</a> - </li> - <li> - <a href="#form-guest-edit-permission">$_("Permission")</a> - </li> - <li> - <a href="#form-guest-edit-pci">$_("Host PCI Device")</a> - </li> - <li> - <a href="#form-guest-edit-snapshot">$_("Snapshot")</a> - </li> - </ul> - <form id="form-guest-edit-general"> + <span id="alert-modal-container"></span> +<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> + <li role="presentation"><a href="#form-guest-edit-permission" aria-controls="form-guest-edit-permission" role="tab" data-id="form-guest-edit-permission" data-toggle="tab">Permission</a></li> + <li role="presentation"><a href="#form-guest-edit-pci" aria-controls="form-guest-edit-pci" role="form-guest-edit-pci" data-id="form-guest-edit-pci" data-toggle="tab">Pci</a></li> + <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> + </ul> + <div class="tab-content" id="guest-edit-tabs"> + <form role="tabpanel" class="tab-pane active" id="form-guest-edit-general"> <div class="form-group"> <label for="guest-edit-id-textbox">$_("Name")</label> <input id="guest-edit-id-textbox" class="form-control" name="name" type="text" /> @@ -64,88 +54,104 @@ <input id="guest-edit-icon-textbox" class="form-control" name="icon" type="text" disabled="disabled" /> </div> </form> - <form id="form-guest-edit-storage"> + <form role="tabpanel" class="tab-pane" id="form-guest-edit-storage"> + <div class="btn-group action-area"> + <button type="button" id="guest-edit-attach-cdrom-button" class="attach btn btn-primary"><i class="fa fa-plus-circle"></i> $_("Add")</button> + </div> <div class="header"> - <span class="cell">$_("Device")</span> - <span class="cell">$_("Path")</span> - <button type="button" id="guest-edit-attach-cdrom-button" class="action-area attach"></button> + <span class="cell column-device">$_("Device")</span> + <span class="cell column-path">$_("Path")</span> + <span class="cell column-actions"><span class="sr-only">$_("Actions")</span></span> </div> <div class="body"></div> </form> - <form id="form-guest-edit-interface" class="guest-edit-interface"> + <form role="tabpanel" class="guest-edit-interface tab-pane" id="form-guest-edit-interface"> <button class="add btn btn-primary"><i class="fa fa-plus-circle"></i> Add</button> <div class="header"> - <span class="cell">$_("Network")</span> - <span class="cell">$_("Type")</span> - <span class="cell">$_("MAC Address")</span> - <span class="cell">$_("IP Address")</span> + <span class="cell column-network">$_("Network")</span> + <span class="cell column-type">$_("Type")</span> + <span class="cell column-mac">$_("MAC Address")</span> + <span class="cell column-ip">$_("IP Address")</span> + <span class="cell column-actions"><span class="sr-only">$_("Actions")</span></span> </div> <div class="body"></div> </form> - <form id="form-guest-edit-permission" class="guest-edit-permission"> - <div class="pam"> - <div class="column avail"> - <div class="title">$_("Available system users and groups")</div> - <input type="text" id="permission-avail-searchBox"> - <div class="body"> + <form role="tabpanel" class="guest-edit-permission tab-pane" id="form-guest-edit-permission"> + <div class="pam col-md-12"> + <div class="column avail col-md-5"> + <h4 class="title">$_("Available system users and groups")</h4> + <div class="input-group"> + <div class="input-group-addon"><i class="fa fa-search"></i></div> + <input type="text" id="permission-avail-searchBox" class="form-control"> + </div> + <div class="body col-md-12"> <div class="head"> - <div class="column column-user"><div class="item">$_("Users")</div></div> - <div class="column column-group"><div class="item">$_("Groups")</div></div> + <div class="column column-user col-md-6"><div class="item">$_("Users")</div></div> + <div class="column column-group col-md-6"><div class="item">$_("Groups")</div></div> </div> - <div id="permission-avail-users" class="column column-user"></div> - <div id="permission-avail-groups" class="column column-group"></div> + <div id="permission-avail-users" class="column column-user col-md-6"></div> + <div id="permission-avail-groups" class="column column-group col-md-6"></div> </div> </div> - <div class="column control"> - <button id="permissionGo"> < </button> - <button id="permissionBack"> > </button> + <div class="column control col-md-2 v-center"> + <button id="permissionBack" class="center-block btn btn-primary btn-lg"><i class="fa fa-chevron-left"></i></button> + <button id="permissionGo" class="center-block btn btn-primary btn-lg"><i class="fa fa-chevron-right"></i></button> </div> - <div class="column selected"> - <div class="title">$_("Selected system users and groups")</div> - <input type="text" id="permission-sel-searchBox"> - <div class="body"> + <div class="column selected col-md-5"> + <h4 class="title">$_("Selected system users and groups")</h4> + <div class="input-group"> + <div class="input-group-addon"><i class="fa fa-search"></i></div> + <input type="text" id="permission-sel-searchBox" class="form-control"> + </div> + <div class="body col-md-12"> <div class="head"> - <div class="column column-user"><div class="item">$_("Users")</div></div> - <div class="column column-group"><div class="item">$_("Groups")</div></div> + <div class="column column-user col-md-6"><div class="item">$_("Users")</div></div> + <div class="column column-group col-md-6"><div class="item">$_("Groups")</div></div> </div> - <div id="permission-sel-users" class="column column-user"></div> - <div id="permission-sel-groups" class="column column-group"></div> + <div id="permission-sel-users" class="column column-user col-md-6"></div> + <div id="permission-sel-groups" class="column column-group col-md-6"></div> </div> </div> </div> <div class="ldap"> <div class="header"> <span class="cell">$_("User")</span> - <button type="button" id="guest-edit-add-user-button" class="action-area add"></button> + <button type="button" id="guest-edit-add-user-button" class="action-area add btn btn-primary">$_("Add")</button> </div> <div class="body"></div> </div> </form> - <form id="form-guest-edit-pci" class="guest-edit-pci"> + <form role="tabpanel" class="guest-edit-pci tab-pane" id="form-guest-edit-pci"> <div class="guest-scroll-indent"> <div class="filter"> - <span class="group"> + <div class="form-group pull-right"> <select class="control selectpicker"> <option value="all">$_("All")</option> <option value="toAdd">$_("To Add")</option> <option value="added">$_("Added")</option> - </select><input type="text" class="control" placeholder="$_("filter")"> - </span> + </select> + <input type="text" class="form-control" placeholder="$_("Filter")" /> + </div> </div> <div class="header"> - <span class="cell name">$_("Name")</span> - <span class="cell product">$_("Product")</span> - <span class="cell vendor">$_("Vendor")</span> + <span class="cell status column-pci-status"><span class="sr-only">$_("Status")</span></span> + <span class="cell name column-pci-name">$_("Name")</span> + <span class="cell product column-product">$_("Product")</span> + <span class="cell vendor column-vendor">$_("Vendor")</span> + <span class="cell column-actions"><span class="sr-only">$_("Actions")</span></span> </div> <div class="body"></div> </div> </form> - <form id="form-guest-edit-snapshot" class="guest-edit-snapshot"> + <form role="tabpanel" id="form-guest-edit-snapshot" class="guest-edit-snapshot tab-pane"> + <div class="btn-group"> + <button class="add btn btn-primary"><i class="fa fa-plus-circle"></i> $_("Add")</button> + </div> <div class="header"> - <span class="cell sel"></span> - <span class="cell name">$_("Name")</span> - <span class="cell created">$_("Created")</span> - <button class="add action-area"></button> + <span class="cell column-sel"><span class="sr-only">$_("Status")</span></span> + <span class="cell column-snapshot-name">$_("Name")</span> + <span class="cell column-snapshot-created">$_("Created")</span> + <span class="cell column-actions"><span class="sr-only">$_("Actions")</span></span> </div> <div class="task"></div> <div class="body"></div> @@ -153,123 +159,124 @@ </div> </div> <div class="modal-footer"> - <div id="action-button-container" class="hidden"> - <button id="guest-edit-button-save" class="btn btn-default">$_("Save")</button> - </div> - <button id="guest-edit-button-cancel" class="btn btn-default">$_("Cancel")</button> + <button id="guest-edit-button-save" class="btn btn-default">$_("Save")</button> + <button id="guest-edit-button-cancel" class="btn btn-default" data-dismiss="modal">$_("Cancel")</button> </div> </div> <script id="cdrom-row-tmpl" type="text/html"> <div class="item view" id="cdrom-{dev}"> - <span class="cell dev"> + <span class="cell dev column-device"> <input type="text" readonly="readonly" - id="cdrom-dev-{dev}" name="cdrom-dev-{dev}" value="{dev}" /> + id="cdrom-dev-{dev}" name="cdrom-dev-{dev}" value="{dev}" class="form-control" /> </span> - <span class="cell path"> + <span class="cell path column-path"> <input id="cdrom-path-{dev}" name="cdrom" type="text" data-vm="{vm}" data-dev="{dev}" - value="{path}" readonly="readonly" /> + value="{path}" readonly="readonly" class="form-control" /> </span> - <span class="action-area"> - <button type="button" class="guest-edit-cdrom-button replace" + <span class="cell action-area column-actions"> + <button type="button" class="guest-edit-cdrom-button replace btn btn-link" data-vm="{vm}" data-dev="{dev}" - title='$_("Replace")'> - </button> - <button type="button" class="guest-edit-cdrom-button detach" + title='$_("Replace")'><i class="fa fa-pencil"></i> $_("Replace")</button> + + <button type="button" class="guest-edit-cdrom-button detach btn btn-link" data-vm="{vm}" data-dev="{dev}" data-type="{type}" - title='$_("Detach")'> - </button> - <button type="button" class="guest-edit-cdrom-button save hidden" + title='$_("Detach")'><i class="fa fa-minus-circle"></i> $_("Detach")</button> + + <button type="button" class="guest-edit-cdrom-button save hidden btn btn-primary" data-vm="{vm}" data-dev="{dev}" - title='$_("Save")'> - </button> - <button type="button" class="guest-edit-cdrom-button cancel hidden" + title='$_("Save")'>$_("Save")</button> + + <button type="button" class="guest-edit-cdrom-button cancel hidden btn btn-primary" data-vm="{vm}" data-dev="{dev}" - title='$_("Cancel")'> - </button> + title='$_("Cancel")'>$_("Cancel")</button> </span> </div> </script> <script id="interface-tmpl" type="text/html"> <div class="item" id="{mac}"> - <span class="cell"> - <label id="label-network-{id}" class="{viewMode}">{network}</label> + <span class="cell column-network"> + <span id="label-network-{id}" class="{viewMode}">{network}</span> <select class="{editMode}"></select> </span> - <span class="cell"> - <span>{type}</span> + <span class="cell column-type"> + {type} </span> - <span class="cell"> - <label id="label-mac-{id}" class="{viewMode}">{mac}</label> - <input class="{editMode}" type="text" - id="edit-mac-{id}" name="{mac}" value="{mac}" /> + <span class="cell column-mac"> + <span id="label-mac-{id}" class="{viewMode}">{mac}</span> + <input class="form-control {editMode}" type="text" + id="edit-mac-{id}" class="form-control" name="{mac}" value="{mac}" /> </span> - <span class="cell"> + <span class="cell column-ip"> <span class=ipText>{ips}</span> </span> - <span class="action-area {editMode}"> - <button class="save"></button><button class="cancel"></button> + <span class="cell {editMode} column-actions action-area"> + <button class="btn btn-primary save">$_("Save")</button> + <button class="btn btn-primary cancel">$_("Remove")</button> </span> - <span class="action-area {viewMode}"> - <button class="edit"></button><button class="delete"></button> + <span class="cell {viewMode} column-actions action-area"> + <button class="btn btn-link edit"><i class="fa fa-pencil"></i> $_("Edit")</button> + <button class="btn btn-link delete"><i class="fa fa-minus-circle"></i> $_("Remove")</button> </span> <div> </script> <script id="ldap-user-tmpl" type="text/html"> <div class="item" id="{user}"> <span class="cell"> - <label class="{viewMode}">{user}</label> - <input type="text" placeholder=$_("LDAP User ID,e.g.foo@foo.com") class="{editMode}"/> + <span class="{viewMode}">{user}</span> + <input type="text" placeholder=$_("LDAP User ID,e.g.foo@foo.com") class="form-control {editMode}" /> </span> <span class="action-area"> - <button class="delete"></button> + <button class="btn btn-default delete"><i class="fa fa-minus-circle"></i> $_("Remove")</button> </span> <div> </script> <script id="disk-row-tmpl" type="text/html"> <div class="item" id="cdrom-{dev}"> - <span class="cell dev"> + <span class="cell dev column-device"> <input type="text" readonly="readonly" - id="disk-dev-{dev}" name="disk-dev-{dev}" value="{dev}" /> + id="disk-dev-{dev}" name="disk-dev-{dev}" class="form-control" value="{dev}" /> </span> - <span class="cell path"> - <input id="disk-path-{dev}" name="path-{dev}" type="text" + <span class="cell path column-path"> + <input id="disk-path-{dev}" class="" name="path-{dev}" type="text" data-vm="{vm}" data-dev="{dev}" - value="{path}" readonly="readonly" /> + value="{path}" readonly="readonly" class="form-control" /> </span> - <span class="action-area"> - <button type="button" class="guest-edit-cdrom-button detach" + <span class="action-area column-actions"> + <button type="button" class="guest-edit-cdrom-button detach btn btn-link" data-vm="{vm}" data-dev="{dev}" data-type="{type}" - title="$_("Detach")"> - </button> + title="$_("Detach")"><i class="fa fa-minus-circle"></i> $_("Detach")</button> </span> </div> </script> <script id="permission-item-pam" type="text/html"> <div class="item"> - <span class="icon {class}"></span> + <i class="fa {class}"></i> <label>{val}</label> </div> </script> <script id="pci-tmpl" type="text/html"> -<div class="item" id="{name}"> - <span class="cell name" title="{name}">{name}</span> - <span class="cell product" title="{product}">{product}</span> - <span class="cell vendor" title="{vendor}">{vendor}</span> - <button></button> +<div class="item {status}" id="{name}"> + <span class="cell status column-pci-status"> + <i class="fa fa-power-off"></i> + </span> + <span class="cell name column-pci-name"><input type="text" readonly="readonly" value="{name}" title="{name}" class="form-control" /></span> + <span class="cell product column-product"><input type="text" readonly="readonly" value="{product}" title="{product}" class="form-control" /></span> + <span class="cell vendor column-vendor"><input type="text" readonly="readonly" value="{vendor}" title="{vendor}" class="form-control" /></span> + <span class="cell column-actions action-area"><button class="btn btn-link"><i class="fa"></i></button></span> </div> </script> <script id="snapshot-tmpl" type="text/html"> <div class="item" id="{name}"> - <span class="cell sel"> - <span class="icon {createMode}"></span> - <span class="ui-icon ui-icon-check hide"></span> + <span class="cell column-sel"> + <span class="wok-loading-icon {createMode}"></span> + <i class="fa fa-check hide"></i> </span> - <span class="cell name">{name}</span> - <span class="cell created">{created}</span> - <span class="action-area"> - <button class="revert {listMode}" title="$_("revert")"></button> - <button class="delete {listMode}"></button> + <span class="cell column-snapshot-name name"><input type="text" readonly="readonly" value="{name}" class="form-control" /></span> + <span class="cell column-snapshot-created created"><input type="text" readonly="readonly" value="{created}" class="form-control" /></span> + <span class="cell column-actions action-area"> + <button class="revert {listMode} btn btn-link" title="$_("Revert")"><i class="fa fa-undo"></i> $_("Revert")</button> + <button class="delete {listMode} btn btn-link"><i class="fa fa-minus-circle"></i> $_("Remove")</button> </span> <div> </script> diff --git a/src/wok/plugins/kimchi/ui/pages/guest-storage-add.html.tmpl b/src/wok/plugins/kimchi/ui/pages/guest-storage-add.html.tmpl index c8ab96c..43cfd48 100644 --- a/src/wok/plugins/kimchi/ui/pages/guest-storage-add.html.tmpl +++ b/src/wok/plugins/kimchi/ui/pages/guest-storage-add.html.tmpl @@ -22,77 +22,44 @@ #silent _ = t.gettext #silent _t = t.gettext <div id="guest-storage-add-window" class="window"> - <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> - <h4 class="modal-title">$_("Add a Storage Device to VM")</hh> - </div> - <div class="modal-body"> - <form id="form-guest-storage-add"> - <section class="form-section"> - <h2>1. $_("Device Type")</h2> - <div class="field"> - <p class="text-help"> - $_("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" /> - <span class="text" id="guest-storage-type-label"></span> - <span class="arrow"></span> - <div class="popover"> - <ul class="select-list" id="guest-storage-type-list" data-target="guest-storage-type" data-label="guest-storage-type-label"></ul> - </div> - </div> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> + <h4 class="modal-title">$_("Add a Storage Device to VM")</h4> + </div> + <div class="modal-body"> + <form id="form-guest-storage-add"> + <div class="form-group"> + <label>$_("Device Type")</label> + <select id="guest-storage-type" class="selectpicker col-md-12 col-lg-12"> + </select> + <p class="help-block"><i class="fa fa-info-circle"></i> $_("The device type. Currently, \"cdrom\" and \"disk\" are supported.")</p> </div> - </section> - <div class="volume-section hidden"> - <section class="form-section"> - <h2>2. $_("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="pool" 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>3. $_("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="vol" 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 class="volume-section hidden"> + <div class="form-group"> + <label>$_("Storage Pool")</label> + <select id="guest-disk-pool" class="selectpicker col-md-12 col-lg-12"> + </select> + <p class="help-block"><i class="fa fa-info-circle"></i> $_("Storage pool which volume located in")</p> </div> - </section> - </div> - <div class="path-section"> - <section class="form-section"> - <h2>2. $_("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 class="form-group"> + <label>$_("Storage Volume")</label> + <select id="guest-disk-vol" class="selectpicker col-md-12 col-lg-12"> + </select> + <p class="help-block"><i class="fa fa-info-circle"></i> $_("Storage volume to be attached")</p> </div> - </section> - </div> - </fieldset> - </form> - </div> - <div class="modal-footer"> + </div> + <div class="path-section form-group"> + <label for="path">$_("File Path")</label> + <input type="text" class="form-control" name="path" id="path" /> + <p class="help-block"><i class="fa fa-info-circle"></i> $_("The ISO file path in the server for CDROM.")</p> + </div> + </form> + </div> + <div class="modal-footer"> <button id="guest-storage-button-add" class="btn btn-default" disabled="disabled">$_("Attach")</button> <button class="btn btn-default" data-dismiss="modal">$_("Cancel")</button> + </div> </div> </div> <script type="text/javascript"> diff --git a/ui/css/src/modules/_edit-guests.scss b/ui/css/src/modules/_edit-guests.scss new file mode 100644 index 0000000..085141a --- /dev/null +++ b/ui/css/src/modules/_edit-guests.scss @@ -0,0 +1,362 @@ +#guest-edit-window { + .tab-content { + overflow: hidden; + height: 559px; + } + .tab-content .tab-pane { + position: relative; + } + #form-guest-edit-interface { + .column-actions { + width: 23%; + } + } + #form-guest-edit-storage { + .column-actions { + width: 26%; + } + } + #form-guest-edit-snapshot { + .column-actions { + width: 22%; + } + } + #form-guest-edit-pci { + .column-actions { + width: 4.47%; + } + } + form { + margin: 15px 0 0; + .header, + .body { + .column-actions { + text-align: right; + } + .column-device { + width: 12.7%; + } + .column-path { + width: 60.25%; + } + .cell.column-network { + width: 18%; + > span { + width: 100%; + display: inline-block; + text-overflow: ellipsis; + overflow: hidden; + } + .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { + width: 180px; + } + } + .cell.column-type { + width: 11.35%; + } + .cell.column-mac { + width: 14.5%; + } + .cell.column-ip { + width: 31%; + } + .cell.column-sel { + width: 1.77%; + } + .cell.column-snapshot-name { + width: 58%; + } + .cell.column-snapshot-created { + width: 16.5%; + } + .cell.column-pci-status { + width: 3.7%; + .fa { + color: $guests-color; + font-size: 24px; + } + } + .cell.column-pci-name { + width: 21%; + } + .cell.column-product { + width: 45%; + } + .cell.column-vendor { + width: 24.1%; + } + } + .header { + background: $table-bg; + display: block; + border-bottom: 1px solid $table-border-color; + overflow: hidden; + clear: both; + > span { + padding: $table-cell-padding; + display: inline-block; + font-family: $font-family-light; + font-weight: 400; + font-size: 12.5pt; + vertical-align: bottom; + border-bottom: none; + border-top: 0; + line-height: $line-height-base; + &.column-actions { + height: 36px; + } + } + } + .body { + overflow-y: auto; + overflow-x: hidden; + height: 471px; + .item { + border-top: 1px solid $table-border-color; + height: 53px; + &:first-child { + border-top: 0; + } + &:nth-child(even) { + background-color: $table-bg-accent; + } + &:nth-child(odd) { + background-color: $table-bg; + } + > span { + padding: $table-cell-padding; + display: inline-block; + vertical-align: middle; + input[type="text"] { + height: 40px; + } + input[readonly], + input[readonly]:hover, + input[readonly]:focus, + input[readonly]:active { + background-color: transparent !important; + border-color: transparent !important; + box-shadow: none !important; + border-radius: 0 !important; + text-overflow: ellipsis; + padding-right: 0 !important; + padding-left: 0 !important; + width: 100%; + } + } + } + } + } +} + +.guest-edit-snapshot .hide, +.guest-edit-interface .hide { + display: none !important; +} + +.guest-edit-pci { + .filter { + height: 40px; + overflow: visible; + clear: both; + } + .pull-right .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { + width: 133px; + } + .filter input[type="text"].form-control { + width: 460px; + height: 40px; + float: right; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .filter .bootstrap-select.btn-group .btn .caret { + border-left: 0; + } + .filter button.btn.dropdown-toggle.form-control.selectpicker.btn-default { + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + background: $table-bg-accent; + border-right: 0; + } + .body { + overflow-y: auto; + overflow-x: hidden; + height: 442px !important; + } + .body .item.disabled input[type="text"].form-control { + color: $gray-light; + } + .body .item.disabled span.column-pci-status i { + display: none; + } +} + +.guest-edit-permission { + .pam { + height: 540px; + .column { + display: inline-block; + vertical-align: top; + } + .v-center { + min-height: 532px; + display: flex; + justify-content: center; + flex-flow: column wrap; + } + .center-block { + display: block; + margin-left: auto; + margin-right: auto; + } + .center-block + .center-block { + margin-top: 5px; + } + .title { + font-size: 13pt; + } + .body { + margin-top: 4px; + border-radius: 3px; + border: 1px solid $table-border-color; + height: 460px !important; + } + .body .head { + .item { + display: block; + padding: $table-cell-padding; + margin-bottom: 5px; + font-family: $font-family-light; + font-weight: 400; + font-size: 12.5pt; + vertical-align: bottom; + line-height: $line-height-base; + height: auto !important; + background: $table-bg; + border-top: 0; + border-bottom: 1px solid $table-border-color; + cursor: default; + } + } + .body > .column-user .item, + .body > .column-group .item { + height: auto !important; + margin-bottom: 0; + margin-left: 5px; + } + .body > .column-group .item { + margin-right: 5px; + } + .column-user label, + .column-group label { + cursor: pointer; + margin-bottom: 0; + margin-left: 5px; + width: 160px; + height: 24px; + line-height: 22px; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: middle; + } + .body > .column .item { + background-color: $btn-default-bg !important; + border: 1px solid $table-border-color !important; + margin-bottom: 3px; + display: block; + padding: .2em .6em .3em; + font-weight: 700; + line-height: 1; + text-align: left; + white-space: nowrap; + vertical-align: middle; + border-radius: .25em; + overflow: hidden; + } + .body > .column .item:hover { + color: $btn-default-color !important; + background-color: #e6e6e6 !important; + border-color: #adadad !important; + label { + color: $btn-default-color !important; + } + } + .body > .column .item.item-picked { + color: $btn-primary-color !important; + background-color: $btn-primary-bg !important; + border-color: #1b1b1c !important; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; + label { + color: $btn-primary-color !important; + } + } + } + .hide { + display: none; + } +} + +// .guest-edit-permission .pam .body .item:hover { +// background-color: #AAAAAA; +// } +// .guest-edit-permission .pam .body .item-picked { +// background-color: #BBBBBB; +// } +// .guest-edit-permission .pam .body .item .icon { +// display: inline-block; +// height: 15px; +// width: 15px; +// vertical-align: bottom; +// } +#form-guest-edit-permission .ldap .body .item { + margin: 8px 0; +} + +#form-guest-edit-permission .ldap .cell { + width: 250px; +} + +#form-guest-edit-permission .ldap .action-area { + float: right; + line-height: 24px; +} + +#form-guest-edit-permission .ldap .header button { + margin-bottom: 1px; +} + +#form-guest-edit-permission .ldap .checked { + border-color: red; + border-style: solid; + border-width: 1px; +} + +#form-guest-edit-permission .ldap .checked.hide { + display: none; +} + +/* + * Project Kimchi + * + * Copyright IBM, Corp. 2014 + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +#guest-storage-add-window {} + +#form-guest-storage-add .form-section .field { + overflow: visible; +} diff --git a/ui/css/src/modules/_modal-flat.scss b/ui/css/src/modules/_modal-flat.scss index 90ae44a..a6528cc 100644 --- a/ui/css/src/modules/_modal-flat.scss +++ b/ui/css/src/modules/_modal-flat.scss @@ -212,30 +212,37 @@ .modal-body .nav { margin-left: -30px; margin-right: -30px; + display: table; + width: 1082px; // Rewrite for mediaqueries later; + width: calc(100% + 60px); } .modal-body .nav-tabs { - border-bottom: 5px solid #eee; + border-bottom: 0; } .modal-body .nav-tabs > li.active > a, .modal-body .nav-tabs > li.active > a:hover, .modal-body .nav-tabs > li.active > a:focus { - border: none; + border: 0; border-radius: 0; border-bottom: 5px solid map-get($colors, guests); font-weight: 600; - padding: 8px 15px; } .modal-body .nav-tabs > li { - margin-bottom: -5px; - width: 190px; + margin-bottom: 0; + width: auto; + float: none; + position: static; + display: table-cell; + border: 0; } .modal-body .nav-tabs > li > a { font-size: 17px; font-weight: 300; font-family: $font-family-light; - border: none; + border: 0; + border-bottom: 5px solid $table-border-color; text-align: center; border-radius: 0; margin: 0; diff --git a/ui/css/src/modules/_network.scss b/ui/css/src/modules/_network.scss index 0305e22..f041981 100644 --- a/ui/css/src/modules/_network.scss +++ b/ui/css/src/modules/_network.scss @@ -66,7 +66,6 @@ width: 20px; height: 20px; position: relative; - top: 10px; } .up .fa { diff --git a/ui/css/src/modules/_storage.scss b/ui/css/src/modules/_storage.scss index fdacd12..c06d38d 100644 --- a/ui/css/src/modules/_storage.scss +++ b/ui/css/src/modules/_storage.scss @@ -41,12 +41,10 @@ width: 20px; height: 20px; position: relative; - top: 10px; } .handle { user-select: none; position: relative; - top: 11px; } .active { .handle { diff --git a/ui/css/src/modules/_templates.scss b/ui/css/src/modules/_templates.scss index f3ee854..0756f8e 100644 --- a/ui/css/src/modules/_templates.scss +++ b/ui/css/src/modules/_templates.scss @@ -76,7 +76,7 @@ .template-tab-header { background: $table-bg; display: block; - border-top: 1px solid $table-border-color; + border-bottom: 1px solid $table-border-color; > span { padding: $table-cell-padding; display: inline-block; @@ -87,7 +87,7 @@ border-bottom: none; border-top: 0; line-height: $line-height-base; - height: 40px; + height: 42px; } } .template-tab-body { @@ -97,15 +97,21 @@ &:first-child { border-top: 0; } - &:nth-child('even') { + &:nth-child(even) { background-color: $table-bg-accent; } - &:nth-child('odd') { + &:nth-child(odd) { background-color: $table-bg; } > span { padding: $table-cell-padding; display: inline-block; + vertical-align: middle; + + input[type="text"].form-control { + height: 40px; + } + } } } @@ -229,11 +235,11 @@ } } .wok-vm-body { + clear: both; border-top: 1px solid $table-border-color; &:first-child { border-color: $table-first-row-border-color; } - border-top: 1px solid $table-border-color; > span { padding: $table-cell-padding; display: inline-block; diff --git a/ui/css/src/modules/_toolbar.scss b/ui/css/src/modules/_toolbar.scss index bc55942..6e74f4e 100644 --- a/ui/css/src/modules/_toolbar.scss +++ b/ui/css/src/modules/_toolbar.scss @@ -15,29 +15,24 @@ // See the License for the specific language governing permissions and // limitations under the License. // - .navbar-default.toolbar { height: 40px; padding: 0; margin: 0; overflow: hidden; background: $navbar-default-bg; - .tools { height: 40px; } - .navbar-nav > li > a.dropdown-toggle > .caret { margin-top: -5px; width: 20px; margin-left: 5px; } - .navbar-nav > li > a.dropdown-toggle > .caret:before { top: 15px; margin-left: 0; } - .navbar-right.tools > li > a { font-family: $font-family-alternate; display: inline-block; @@ -45,45 +40,38 @@ text-decoration: none; font-size: 13pt; vertical-align: middle; - padding: 6px 0 !important; - margin-left: 50px !important; + padding: 6px 0 !important; + margin-left: 50px !important; font-weight: 600; width: auto; min-width: auto; } - - span, .fa { + span, + .fa { display: inline-block; vertical-align: middle } - .fa { font-size: 24px; margin-right: 15px; } - } -@each $page, $bgcolor in $colors { - -##{$page}-root-container .navbar-default.toolbar { - @if $page=='guests' or $page=='templates' or $page == 'storage' or $page=='network'{ - background-color: $guests-color !important; - } @else if $page =='host' or $page=='administration'{ - background-color: $hosts-color !important; - } - - @if $page == 'storage' { - .navbar-right.tools > li > a { - color: $gray-base !important; +@each $page, +$bgcolor in $colors { + ##{$page}-root-container .navbar-default.toolbar { + @if $page=='guests' or $page=='templates' or $page=='storage' or $page=='network' { + background-color: $guests-color !important; + } + @else if $page=='host' or $page=='administration' { + background-color: $hosts-color !important; } } } -} -@each $tab, $bgcolor in $colors { - -#tabPanel.#{$tab}{ - background-color: map-get($colors,$tab) !important; - } +@each $tab, +$bgcolor in $colors { + #tabPanel.#{$tab} { + background-color: map-get($colors, $tab) !important; + } } diff --git a/ui/css/src/wok.scss b/ui/css/src/wok.scss index 9057ac5..3f40e54 100755 --- a/ui/css/src/wok.scss +++ b/ui/css/src/wok.scss @@ -107,6 +107,8 @@ // Templates - To do: move to Kimchi @import "modules/guests"; // Templates - To do: move to Kimchi +@import "modules/edit-guests"; +// Templates - To do: move to Kimchi @import "modules/templates"; // Networks - To do: move to Kimchi @import "modules/network"; diff --git a/ui/js/src/wok.main.js b/ui/js/src/wok.main.js index fe934a4..3d5fb60 100644 --- a/ui/js/src/wok.main.js +++ b/ui/js/src/wok.main.js @@ -17,6 +17,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + wok.tabMode = {}; wok.main = function() { @@ -152,9 +153,9 @@ wok.main = function() { } $('#nav-menu ul.navbar-nav li.hostname').after(genFunctTabs(orderedtabs)); $('#nav-menu ul.navbar-nav li a.item').first().parent().addClass('active').focus(); - $('#tabPanel').addClass(defaultFunctionalTab+'Tab'); + $('#tabPanel').addClass(defaultFunctionalTab.toLowerCase()+'Tab'); $(genTabs(tabs[defaultFunctionalTab])).appendTo('#tabPanel ul'); - $('#tabPanel ul li a.item').first().addClass(defaultFunctionalTab+'Selected').focus(); + $('#tabPanel ul li a.item').first().addClass(defaultFunctionalTab.toLowerCase()+'Selected').focus(); wok.getHostname(); @@ -199,7 +200,7 @@ wok.main = function() { // Update the visual style of tabs; focus the selected one. $('#tabPanel ul li').removeClass('active'); $(tab).parent().addClass('active'); - $(tab).addClass(plugin+'Selected').focus(); + $(tab).addClass(plugin.toLowerCase()+'Selected').focus(); // Disable Help button according to selected tab if ($(tab).hasClass("disableHelp")) { @@ -300,18 +301,18 @@ wok.main = function() { $('#nav-menu ul li').on('click', 'a.item', function(event) { var functionalTab = $(this).text(); var previousSelection = $('#nav-menu ul li.active a').text(); - $('#tabPanel').removeClass(previousSelection+'Tab'); + $('#tabPanel').removeClass(previousSelection.toLowerCase()+'Tab'); $('#nav-menu ul li').removeClass('active'); $(this).parent().addClass('active').focus(); - $('#tabPanel').addClass(functionalTab+'Tab'); + $('#tabPanel').addClass(functionalTab.toLowerCase()+'Tab'); var tabs = JSON.parse(wok.cookie.get('tabs')); $('#tabPanel ul').empty(); $(genTabs(tabs[functionalTab])).appendTo('#tabPanel ul'); var firstTab = $('#tabPanel ul.navbar-nav li').first(); $(firstTab).addClass('active'); - $('a.item',firstTab).addClass(functionalTab+'Selected'); + $('a.item',firstTab).addClass(functionalTab.toLowerCase()+'Selected'); var href= $('a.item',firstTab).attr('href'); location.hash = href.substring(0,href.lastIndexOf('.')); event.preventDefault(); diff --git a/ui/pages/wok-ui.html.tmpl b/ui/pages/wok-ui.html.tmpl index c064d04..395c661 100644 --- a/ui/pages/wok-ui.html.tmpl +++ b/ui/pages/wok-ui.html.tmpl @@ -24,6 +24,7 @@ #silent _ = t.gettext #silent _t = t.gettext #from wok.config import get_version +<!DOCTYPE html> <html lang="$lang.lang[0]"> <head> <meta charset="UTF-8"> -- 1.9.3
participants (2)
-
Aline Manera -
sguimaraes943＠gmail.com