[Kimchi-devel] [PATCH] [new-ui] Edit Guests modal window
sguimaraes943 at gmail.com
sguimaraes943 at gmail.com
Wed Nov 25 14:05:34 UTC 2015
From: samhenri <samuel.guimaraes at 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 at 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 at foo.com") class="{editMode}"/>
+ <span class="{viewMode}">{user}</span>
+ <input type="text" placeholder=$_("LDAP User ID,e.g.foo at 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;
}
-
}
- at 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;
+ at 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;
}
}
}
-}
- at each $tab, $bgcolor in $colors {
-
-#tabPanel.#{$tab}{
- background-color: map-get($colors,$tab) !important;
- }
+ at 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
+ at 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
More information about the Kimchi-devel
mailing list