From: samhenri <samuel.guimaraes@eldorado.org.br> Signed-off-by: Andre Teodoro <andreteodoro.work@gmail.com> Signed-off-by: samhenri <samuel.guimaraes@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