[Kimchi-devel] [PATCH] [Kimchi] Issue 776: Adding filter on Guest screen
sguimaraes943 at gmail.com
sguimaraes943 at gmail.com
Tue Dec 15 17:04:42 UTC 2015
From: samhenri <samuel.guimaraes at eldorado.org.br>
Signed-off-by: Andre Teodoro <andreteodoro.work at gmail.com>
Signed-off-by: samhenri <samuel.guimaraes at eldorado.org.br>
---
ui/js/src/kimchi.guest_main.js | 56 +++++++++++++++++++++++++++++++++++++-----
ui/pages/tabs/guests.html.tmpl | 32 ++++++++++++++----------
2 files changed, 69 insertions(+), 19 deletions(-)
diff --git a/ui/js/src/kimchi.guest_main.js b/ui/js/src/kimchi.guest_main.js
index 3287c00..5e30320 100644
--- a/ui/js/src/kimchi.guest_main.js
+++ b/ui/js/src/kimchi.guest_main.js
@@ -16,6 +16,10 @@
* limitations under the License.
*/
+// init Guest Filter List global variable
+var guestFilterList;
+var listFiltered;
+
kimchi.sampleGuestObject = {
"name": "",
"uuid": "",
@@ -259,7 +263,26 @@ kimchi.getOpenMenuVmId = function() {
return result;
};
+kimchi.initGuestFilter = function() {
+ // Create the list with the css classes that could be filtered at
+ // the first click at the Filter Input Field
+ $('#search_input').one('keyup', function(event) {
+ var options = {
+ valueNames: ['title', 'distro-icon', 'processors-percentage', 'memory-percentage', 'storage-percentage', 'network-percentage']
+ };
+ guestFilterList = new List('guest-content-container', options);
+ });
+};
+
+kimchi.resetGuestFilter = function() {
+ if(guestFilterList){
+ $('#search_input').val();
+ listFiltered = false;
+ }
+};
+
kimchi.listVmsAuto = function() {
+
//Check if the actions button is opened or not,
//if opended stop the reload of the itens until closed
var $isDropdownOpened = $('[name="guest-actions"] ul.dropdown-menu').is(":visible");
@@ -313,14 +336,29 @@ kimchi.listVmsAuto = function() {
var currentConsoleImages = kimchi.getVmsCurrentConsoleImgs();
var openMenuGuest = kimchi.getOpenMenuVmId();
$('#guestList').empty();
+ $('.grid-control').removeClass('hidden');
$('#guestListField').show();
$('#noGuests').hide();
-
- $.each(result, function(index, vm) {
- var guestLI = kimchi.createGuestLi(vm, currentConsoleImages[vm.name], vm.name == openMenuGuest);
- $('#guestList').append(guestLI);
- });
+ // Check if the list is being filtered, if true populate
+ // the #guestList only with the filtered elements
+ listFiltered = ((guestFilterList != undefined) && (guestFilterList.matchingItems.length != result.length) && $('#search_input').val() != "");
+ if (!listFiltered) {
+ $.each(result, function(index, vm) {
+ var guestLI = kimchi.createGuestLi(vm, currentConsoleImages[vm.name], vm.name == openMenuGuest);
+ $('#guestList').append(guestLI);
+ });
+ } else {
+ $.each(result, function(index, vm) {
+ $.each(guestFilterList.matchingItems, function(index, listFiltered) {
+ if (listFiltered._values.title === vm.name) {
+ var guestLI = kimchi.createGuestLi(vm, currentConsoleImages[vm.name], vm.name == openMenuGuest);
+ $('#guestList').append(guestLI);
+ }
+ });
+ });
+ }
} else {
+ $('.grid-control').addClass('hidden');
$('#guestListField').hide();
$('#noGuests').show();
}
@@ -331,6 +369,9 @@ kimchi.listVmsAuto = function() {
function(errorResponse, textStatus, errorThrown) {
if (errorResponse.responseJSON && errorResponse.responseJSON.reason) {
wok.message.error(errorResponse.responseJSON.reason);
+ $('.wok-mask').fadeOut(300, function() {
+ $('.wok-mask').addClass('hidden');
+ });
}
kimchi.vmTimeout = window.setTimeout("kimchi.listVmsAuto();", 5000);
});
@@ -665,6 +706,7 @@ kimchi.guestSetRequestHeader = function(xhr) {
};
kimchi.guest_main = function() {
+
if (wok.tabMode['guests'] === 'admin') {
$('.tools').attr('style', 'display');
$("#vm-add").on("click", function(event) {
@@ -676,7 +718,9 @@ kimchi.guest_main = function() {
$('#guests-root-container').on('remove', function() {
kimchi.vmTimeout && clearTimeout(kimchi.vmTimeout);
});
- kimchi.listVmsAuto()
+ kimchi.resetGuestFilter();
+ kimchi.initGuestFilter();
+ kimchi.listVmsAuto();
};
kimchi.editTemplate = function(guestTemplate, oldPopStat) {
diff --git a/ui/pages/tabs/guests.html.tmpl b/ui/pages/tabs/guests.html.tmpl
index 66a6e00..3f9bdcb 100644
--- a/ui/pages/tabs/guests.html.tmpl
+++ b/ui/pages/tabs/guests.html.tmpl
@@ -39,7 +39,7 @@
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toolbar" aria-expanded="false">
- <span class="sr-only">Toggle navigation</span>
+ <span class="sr-only">$_("Toggle navigation")</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
@@ -48,7 +48,7 @@
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="toolbar">
<ul class="nav navbar-nav navbar-right tools" display="none">
- <li><a id="vm-add" class="btn-tool" href="javascript:void(0);"><i class="fa fa-plus-circle"></i><span>Add a Guest</span></a></li>
+ <li><a id="vm-add" class="btn-tool" href="javascript:void(0);"><i class="fa fa-plus-circle"></i><span>$_("Add a Guest")</span></a></li>
</ul>
</div>
</div>
@@ -57,11 +57,11 @@
<div class="container">
<div class="row grid-control hidden">
<div class="pull-right">
- <label for="guests-filter" class="sr-only">$_("Filter"):</label>
- <input type="text" class="filter form-control" placeholder="$_("Filter")">
+ <label for="search_input" class="sr-only">$_("Filter"):</label>
+ <input type="text" class="filter form-control search" id="search_input" placeholder="$_("Filter")">
</div>
</div>
- <div id="alert-container"></div>
+ <div id="alert-container"></div>
<div id="guestListField" style="display: none">
<ul class="wok-guest-list">
<li class="wok-guest-list-header">
@@ -74,11 +74,12 @@
--><span class="column-storage"><span>$_("Storage I/O")</span></span><!--
--><span class="column-network"><span>$_("Network I/O")</span></span><!--
--><span class="column-action" style="display:none">
- <span class="sr-only">Actions</span><!--
+ <span class="sr-only">$_("Actions")</span><!--
--></span>
</li>
<li class="wok-guest-list-body">
- <ul id="guestList" class="wok-guest-list empty-when-logged-off" style="-webkit-padding-start: 0px;">
+ <ul id="guestList" class="wok-guest-list empty-when-logged-off list">
+ </ul>
</li>
</ul>
</div>
@@ -87,12 +88,17 @@
</div>
</div>
</div>
-<div id="modalWindow" class="modal fade host-modal guests-modal" tabindex="-1" role="dialog" aria-labelledby="guestsModalLabel" aria-hidden="true">
-</div>
-<div id="extendCreateTemplate" class="modal fade host-modal templates-modal" tabindex="-1" role="dialog" aria-labelledby="templateModalLabel" aria-hidden="true">
-</div>
-<div id="extendCreateStorage" class="modal fade host-modal storage-modal" tabindex="-1" role="dialog" aria-labelledby="storageModalLabel" aria-hidden="true">
-</div>
+ <div class="wok-mask hidden">
+ <div class="wok-mask-loader-container">
+ <div class="wok-mask-loading">
+ <div class="wok-mask-loading-icon"></div>
+ <div class="wok-mask-loading-text">$_("Loading...")</div>
+ </div>
+ </div>
+ </div>
+ <div id="modalWindow" class="modal fade host-modal guests-modal" tabindex="-1" role="dialog" aria-labelledby="guestsModalLabel" aria-hidden="true"></div>
+ <div id="extendCreateTemplate" class="modal fade host-modal templates-modal" tabindex="-1" role="dialog" aria-labelledby="templateModalLabel" aria-hidden="true"></div>
+ <div id="extendCreateStorage" class="modal fade host-modal storage-modal" tabindex="-1" role="dialog" aria-labelledby="storageModalLabel" aria-hidden="true"></div>
<script id="guest-tmpl" type="kimchi/template">
$ht(file=$data.ui_dir + "/pages/guest.html.tmpl", searchList=[self, {'lang':$lang}])
</script>
--
1.9.3
More information about the Kimchi-devel
mailing list