Merge pull request #125 from glyptodon/list-module

GUAC-1138: Add generalized list module

guacamole/src/main/webapp/app/groupList/groupListModule.js

@@ -24,4 +24,4 @@
  * Module for displaying the contents of a connection group, allowing the user
  * to select individual connections or groups.
  */
-angular.module('groupList', ['pager', 'rest']);
+angular.module('groupList', ['list', 'rest']);

guacamole/src/main/webapp/app/index/styles/sorted-tables.css

@@ -0,0 +1,64 @@
+/*
+ * Copyright (C) 2015 Glyptodon LLC
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+table.sorted {
+    border-collapse: collapse;
+}
+
+table.sorted th {
+    background: rgba(0, 0, 0, 0.125);
+    font-weight: normal;
+}
+
+table.sorted th,
+table.sorted td {
+    border: 1px solid #AAA;
+    padding: 0.5em 1em;
+}
+
+table.sorted th.sortable {
+    cursor: pointer;
+}
+
+table.sorted th.sort-primary {
+    font-weight: bold;
+    padding-right: 0;
+}
+
+table.sorted th.sort-primary:after {
+
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    vertical-align: middle;
+    content: ' ';
+
+    background-size: 1em 1em;
+    background-position: right center;
+    background-repeat: no-repeat;
+    background-image: url('images/arrows/down.png');
+
+}
+
+table.sorted th.sort-primary.sort-descending:after {
+    background-image: url('images/arrows/up.png');
+}

guacamole/src/main/webapp/app/list/directives/guacFilter.js

@@ -0,0 +1,108 @@
+/*
+ * Copyright (C) 2015 Glyptodon LLC
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+/**
+ * A directive which provides a filtering text input field which automatically
+ * produces a filtered subset of the elements of some given array.
+ */
+angular.module('list').directive('guacFilter', [function guacFilter() {
+
+    return {
+        restrict: 'E',
+        replace: true,
+        scope: {
+
+            /**
+             * The property to which a subset of the provided array will be
+             * assigned.
+             *
+             * @type Array
+             */
+            filteredItems : '=',
+
+            /**
+             * The placeholder text to display within the filter input field
+             * when no filter has been provided.
+             * 
+             * @type String
+             */
+            placeholder : '&',
+
+            /**
+             * An array objects to filter. A subset of this array will be
+             * exposed as filteredItems.
+             *
+             * @type Array
+             */
+            items : '&'
+
+        },
+
+        templateUrl: 'app/list/templates/guacFilter.html',
+        controller: ['$scope', '$injector', function guacFilterController($scope, $injector) {
+
+            // Required types
+            var FilterPattern = $injector.get('FilterPattern');
+
+            /**
+             * The pattern object to use when filtering items.
+             *
+             * @type FilterPattern
+             */
+            var filterPattern = new FilterPattern();
+
+            /**
+             * The filter search string to use to restrict the displayed items.
+             *
+             * @type String
+             */
+            $scope.searchString = null;
+
+            /**
+             * Applies the current filter predicate, filtering all provided
+             * items and storing the result in filteredItems.
+             */
+            var updateFilteredItems = function updateFilteredItems() {
+
+                var items = $scope.items();
+                if (items)
+                    $scope.filteredItems = items.filter(filterPattern.predicate);
+                else
+                    $scope.filteredItems = [];
+
+            };
+
+            // Recompile and refilter when pattern is changed
+            $scope.$watch('searchString', function searchStringChanged(searchString) {
+                filterPattern.compile(searchString);
+                updateFilteredItems();
+            });
+
+            // Refilter when items change
+            $scope.$watchCollection($scope.items, function itemsChanged() {
+                updateFilteredItems();
+            });
+
+        }]
+
+    };
+}]);

guacamole/src/main/webapp/app/list/directives/guacPager.js

@@ -24,7 +24,7 @@
  * A directive which provides pagination controls, along with a paginated
  * subset of the elements of some given array.
  */
-angular.module('pager').directive('guacPager', [function guacPager() {
+angular.module('list').directive('guacPager', [function guacPager() {
 
     return {
         restrict: 'E',
@@ -64,7 +64,7 @@ angular.module('pager').directive('guacPager', [function guacPager() {
 
         },
 
-        templateUrl: 'app/pager/templates/guacPager.html',
+        templateUrl: 'app/list/templates/guacPager.html',
         controller: ['$scope', function guacPagerController($scope) {
 
             /**
@@ -265,7 +265,7 @@ angular.module('pager').directive('guacPager', [function guacPager() {
              *     pageNumbers array, false otherwise.
              */
             $scope.hasMorePagesBefore = function hasMorePagesBefore() {
-                var firstPageNumber = $scope.pageNumbers[0]
+                var firstPageNumber = $scope.pageNumbers[0];
                 return firstPageNumber !== $scope.firstPage;
             };
 

guacamole/src/main/webapp/app/list/directives/guacSortOrder.js

@@ -0,0 +1,104 @@
+/*
+ * Copyright (C) 2015 Glyptodon LLC
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+/**
+ * Updates the priority of the sorting property given by "guac-sort-property"
+ * within the SortOrder object given by "guac-sort-order". The CSS classes
+ * "sort-primary" and "sort-descending" will be applied to the associated
+ * element depending on the priority and sort direction of the given property.
+ * 
+ * The associated element will automatically be assigned the "sortable" CSS
+ * class.
+ */
+angular.module('list').directive('guacSortOrder', [function guacFocus() {
+
+    return {
+        restrict: 'A',
+
+        link: function linkGuacSortOrder($scope, $element, $attrs) {
+
+            /**
+             * The object defining the sorting order.
+             *
+             * @type SortOrder
+             */
+            var sortOrder = $scope.$eval($attrs.guacSortOrder);
+
+            /**
+             * The name of the property whose priority within the sort order
+             * is controlled by this directive.
+             *
+             * @type String
+             */
+            var sortProperty = $scope.$eval($attrs.guacSortProperty);
+
+            /**
+             * Returns whether the sort property defined via the
+             * "guac-sort-property" attribute is the primary sort property of
+             * the associated sort order.
+             *
+             * @returns {Boolean}
+             *     true if the sort property defined via the
+             *     "guac-sort-property" attribute is the primary sort property,
+             *     false otherwise.
+             */
+            var isPrimary = function isPrimary() {
+                return sortOrder.primary === sortProperty;
+            };
+
+            /**
+             * Returns whether the primary property of the sort order is
+             * sorted in descending order.
+             *
+             * @returns {Boolean}
+             *     true if the primary property of the sort order is sorted in
+             *     descending order, false otherwise.
+             */
+            var isDescending = function isDescending() {
+                return sortOrder.descending;
+            };
+
+            // Assign "sortable" class to associated element
+            $element.addClass('sortable');
+
+            // Add/remove "sort-primary" class depending on sort order
+            $scope.$watch(isPrimary, function primaryChanged(primary) {
+                $element.toggleClass('sort-primary', primary);
+            });
+
+            // Add/remove "sort-descending" class depending on sort order
+            $scope.$watch(isDescending, function descendingChanged(descending) {
+                $element.toggleClass('sort-descending', descending);
+            });
+
+            // Update sort order when clicked
+            $element[0].addEventListener('click', function clicked() {
+                $scope.$evalAsync(function updateSortOrder() {
+                    sortOrder.togglePrimary(sortProperty);
+                });
+            });
+
+        } // end guacSortOrder link function
+
+    };
+
+}]);

guacamole/src/main/webapp/app/list/listModule.js

@@ -21,6 +21,7 @@
  */
 
 /**
- * Module for displaying the contents of a list, split into multiple pages.
+ * Module for displaying, sorting, and filtering the contents of a list, split
+ * into multiple pages.
  */
-angular.module('pager', []);
+angular.module('list', []);

guacamole/src/main/webapp/app/list/styles/filter.css

@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2015 Glyptodon LLC
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+.filter {
+    margin: 0.5em 0;
+}
+
+.filter .search-string {
+    background-image: url('images/magnifier.png');
+    background-repeat: no-repeat;
+    background-size: 1.75em;
+    background-position: 0.25em center;
+    padding: 0.5em;
+    padding-left: 2.25em;
+    width: 100%;
+    max-width: none;
+}

guacamole/src/main/webapp/app/list/templates/guacFilter.html

@@ -0,0 +1,27 @@
+<div class="filter">
+    <!--
+       Copyright (C) 2015 Glyptodon LLC
+
+       Permission is hereby granted, free of charge, to any person obtaining a copy
+       of this software and associated documentation files (the "Software"), to deal
+       in the Software without restriction, including without limitation the rights
+       to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+       copies of the Software, and to permit persons to whom the Software is
+       furnished to do so, subject to the following conditions:
+
+       The above copyright notice and this permission notice shall be included in
+       all copies or substantial portions of the Software.
+
+       THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+       IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+       FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+       AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+       LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+       OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+       THE SOFTWARE.
+    -->
+
+    <!-- Filter string -->
+    <input class="search-string" placeholder="{{placeholder()}}" type="text" ng-model="searchString"/>
+
+</div>

guacamole/src/main/webapp/app/list/types/FilterPattern.js

@@ -23,7 +23,7 @@
 /**
  * A service for defining the FilterPattern class.
  */
-angular.module('manage').factory('FilterPattern', [
+angular.module('list').factory('FilterPattern', [
     function defineFilterPattern() {
 
     /**

guacamole/src/main/webapp/app/list/types/SortOrder.js

@@ -21,10 +21,10 @@
  */
 
 /**
- * A service for defining the StableSort class.
+ * A service for defining the SortOrder class.
  */
-angular.module('manage').factory('StableSort', [
+angular.module('list').factory('SortOrder', [
-    function defineStableSort() {
+    function defineSortOrder() {
 
     /**
      * Maintains a sorting predicate as required by the Angular orderBy filter.
@@ -35,14 +35,14 @@ angular.module('manage').factory('StableSort', [
      * @param {String[]} predicate
      *     The properties to sort by, in order of precidence.
      */
-    var StableSort = function StableSort(predicate) {
+    var SortOrder = function SortOrder(predicate) {
 
         /**
          * Reference to this instance.
          *
-         * @type StableSort
+         * @type SortOrder
          */
-        var stableSort = this;
+        var sortOrder = this;
 
         /**
          * The current sorting predicate.
@@ -91,25 +91,59 @@ angular.module('manage').factory('StableSort', [
             var descendingName = '-' + name;
 
             // Remove requested property from current predicate
-            stableSort.predicate = stableSort.predicate.filter(function notRequestedProperty(current) {
+            sortOrder.predicate = sortOrder.predicate.filter(function notRequestedProperty(current) {
                 return current !== ascendingName
                     && current !== descendingName;
             });
 
             // Add property to beginning of predicate
             if (descending)
-                stableSort.predicate.unshift(descendingName);
+                sortOrder.predicate.unshift(descendingName);
             else
-                stableSort.predicate.unshift(ascendingName);
+                sortOrder.predicate.unshift(ascendingName);
 
             // Update sorted state
-            stableSort.primary    = name;
+            sortOrder.primary    = name;
-            stableSort.descending = !!descending;
+            sortOrder.descending = !!descending;
+
+        };
+
+        /**
+         * Returns whether the sort order is primarily determined by the given
+         * property.
+         *
+         * @param {String} property
+         *     The name of the property to check.
+         *
+         * @returns {Boolean}
+         *     true if the sort order is primarily determined by the given
+         *     property, false otherwise.
+         */
+        this.isSortedBy = function isSortedBy(property) {
+            return sortOrder.primary === property;
+        };
+
+        /**
+         * Sets the primary sorting property to the given property, if not already
+         * set. If already set, the ascending/descending sort order is toggled.
+         *
+         * @param {String} property
+         *     The name of the property to assign as the primary sorting property.
+         */
+        this.togglePrimary = function togglePrimary(property) {
+
+            // Sort in ascending order by new property, if different
+            if (!sortOrder.isSortedBy(property))
+                sortOrder.reorder(property, false);
+
+            // Otherwise, toggle sort order
+            else
+                sortOrder.reorder(property, !sortOrder.descending);
 
         };
 
     };
 
-    return StableSort;
+    return SortOrder;
 
 }]);

guacamole/src/main/webapp/app/manage/controllers/manageSessionsController.js

@@ -29,8 +29,7 @@ angular.module('manage').controller('manageSessionsController', ['$scope', '$inj
     // Required types
     var ActiveConnectionWrapper = $injector.get('ActiveConnectionWrapper');
     var ConnectionGroup         = $injector.get('ConnectionGroup');
-    var FilterPattern           = $injector.get('FilterPattern');
+    var SortOrder               = $injector.get('SortOrder');
-    var StableSort              = $injector.get('StableSort');
 
     // Required services
     var activeConnectionService = $injector.get('activeConnectionService');
@@ -56,26 +55,12 @@ angular.module('manage').controller('manageSessionsController', ['$scope', '$inj
     $scope.wrappers = null;
 
     /**
-     * The filter search string to use to restrict the displayed active sessions
+     * SortOrder instance which maintains the sort order of the visible
-     *
-     * @type String
-     */
-    $scope.filterSearchString = null;
-
-    /**
-     * The pattern object to use when filtering active sessions.
-     *
-     * @type FilterPattern
-     */
-    $scope.filterPattern = new FilterPattern();
-
-    /**
-     * StableSort instance which maintains the sort order of the visible
      * connection wrappers.
      *
-     * @type StableSort
+     * @type SortOrder
      */
-    $scope.wrapperOrder = new StableSort([
+    $scope.wrapperOrder = new SortOrder([
         'activeConnection.username',
         'activeConnection.startDate',
         'activeConnection.remoteHost',
@@ -210,40 +195,6 @@ angular.module('manage').controller('manageSessionsController', ['$scope', '$inj
 
     };
 
-    /**
-     * Returns whether the wrapped session list is sorted by the given
-     * property.
-     *
-     * @param {String} property
-     *     The name of the property to check.
-     *
-     * @returns {Boolean}
-     *     true if the wrapped session list is sorted by the given property,
-     *     false otherwise.
-     */
-    $scope.isSortedBy = function isSortedBy(property) {
-        return $scope.wrapperOrder.primary === property;
-    };
-
-    /**
-     * Sets the primary sorting property to the given property, if not already
-     * set. If already set, the ascending/descending sort order is toggled.
-     *
-     * @param {String} property
-     *     The name of the property to assign as the primary sorting property.
-     */
-    $scope.toggleSort = function toggleSort(property) {
-
-        // Sort in ascending order by new property, if different
-        if (!$scope.isSortedBy(property))
-            $scope.wrapperOrder.reorder(property, false);
-
-        // Otherwise, toggle sort order
-        else
-            $scope.wrapperOrder.reorder(property, !$scope.wrapperOrder.descending);
-
-    };
-
     /**
      * An action to be provided along with the object sent to showStatus which
      * closes the currently-shown status dialog.
@@ -361,9 +312,4 @@ angular.module('manage').controller('manageSessionsController', ['$scope', '$inj
 
     };
     
-    // Recompile the filter pattern when changed
-    $scope.$watch('filterSearchString', function recompilePredicate(searchString) {
-        $scope.filterPattern.compile(searchString);
-    });
-
 }]);

guacamole/src/main/webapp/app/manage/manageModule.js

@@ -25,9 +25,9 @@
  */
 angular.module('manage', [
     'groupList',
+    'list',
     'locale',
     'notification',
-    'pager',
     'rest',
     'userMenu'
 ]);

guacamole/src/main/webapp/app/manage/styles/sessions.css

@@ -22,66 +22,13 @@
 
 .manage table.session-list {
     width: 100%;
-    border-collapse: collapse;
 }
 
 .manage table.session-list tr.session:hover {
     background: #CDA;
 }
 
-.manage table.session-list th {
-    background: rgba(0, 0, 0, 0.125);
-    font-weight: normal;
-}
-
-.manage table.session-list th,
-.manage table.session-list td {
-    border: 1px solid #AAA;
-    padding: 0.5em 1em;
-}
-
 .manage table.session-list .select-session {
     min-width: 2em;
     text-align: center;
 }
-
-.manage table.session-list th {
-    cursor: pointer;
-}
-
-.manage table.session-list th.select-session {
-    cursor: auto;
-}
-
-.manage table.session-list th.sort-primary {
-    font-weight: bold;
-    padding-right: 0;
-}
-
-.manage table.session-list th.sort-primary:after {
-
-    display: inline-block;
-    width: 1em;
-    height: 1em;
-    vertical-align: middle;
-    content: ' ';
-
-    background-size: 1em 1em;
-    background-position: right center;
-    background-repeat: no-repeat;
-    background-image: url('images/arrows/down.png');
-
-}
-
-.manage table.session-list th.sort-primary.sort-descending:after {
-    background-image: url('images/arrows/up.png');
-}
-
-.manage .sessions .filter{
-    background-image: url('images/magnifier.png');
-    background-repeat: no-repeat;
-    background-size: 1.75em;
-    padding-left: 1.75em;
-    width: 100%;
-    max-width: none;
-}

guacamole/src/main/webapp/app/manage/templates/manageSessions.html

@@ -35,30 +35,26 @@ THE SOFTWARE.
         <div class="action-buttons">
             <button class="delete-sessions danger" ng-disabled="!canDeleteSessions()" ng-click="deleteSessions()">{{'MANAGE_SESSION.ACTION_DELETE' | translate}}</button>
         </div>
-        
+
-        <div>
+        <!-- Session filter -->
-            <input class="filter" placeholder="{{'MANAGE_SESSION.FIELD_PLACEHOLDER_FILTER' | translate}}" type="text" ng-model="filterSearchString"/>
+        <guac-filter filtered-items="filteredWrappers" items="wrappers"
-        </div>
+                     placeholder="'MANAGE_SESSION.FIELD_PLACEHOLDER_FILTER' | translate"></guac-filter>
 
         <!-- List of current user sessions -->
-        <table class="session-list">
+        <table class="sorted session-list">
             <thead>
                 <tr>
                     <th class="select-session"></th>
-                    <th ng-class="{'sort-primary': isSortedBy('activeConnection.username'), 'sort-descending': wrapperOrder.descending}"
+                    <th guac-sort-order="wrapperOrder" guac-sort-property="'activeConnection.username'">
-                        ng-click="toggleSort('activeConnection.username')">
                         {{'MANAGE_SESSION.TABLE_HEADER_SESSION_USERNAME' | translate}}
                     </th>
-                    <th ng-class="{'sort-primary': isSortedBy('activeConnection.startDate'), 'sort-descending': wrapperOrder.descending}"
+                    <th guac-sort-order="wrapperOrder" guac-sort-property="'activeConnection.startDate'">
-                        ng-click="toggleSort('activeConnection.startDate')">
                         {{'MANAGE_SESSION.TABLE_HEADER_SESSION_STARTDATE' | translate}}
                     </th>
-                    <th ng-class="{'sort-primary': isSortedBy('activeConnection.remoteHost'), 'sort-descending': wrapperOrder.descending}"
+                    <th guac-sort-order="wrapperOrder" guac-sort-property="'activeConnection.remoteHost'">
-                        ng-click="toggleSort('activeConnection.remoteHost')">
                         {{'MANAGE_SESSION.TABLE_HEADER_SESSION_REMOTEHOST' | translate}}
                     </th>
-                    <th ng-class="{'sort-primary': isSortedBy('name'), 'sort-descending': wrapperOrder.descending}"
+                    <th guac-sort-order="wrapperOrder" guac-sort-property="'name'">
-                        ng-click="toggleSort('name')">
                         {{'MANAGE_SESSION.TABLE_HEADER_SESSION_CONNECTION_NAME' | translate}}
                     </th>
                 </tr>
@@ -83,7 +79,7 @@ THE SOFTWARE.
 
         <!-- Pager for session list -->
         <guac-pager page="wrapperPage" page-size="25"
-                    items="wrappers | filter : filterPattern.predicate | orderBy : wrapperOrder.predicate"></guac-pager>
+                    items="filteredWrappers | orderBy : wrapperOrder.predicate"></guac-pager>
     </div>
 
 </div>