Change robots manager to use a TableService for filtering and display

This allows for much larger lists of robots with a lower loss of performance, as well as better code for filtering, sorting on the name and teams columns.

Fixes #2121

static/directives/robots-manager.html

@@ -15,7 +15,7 @@
       be shared, such as deployment systems.
     </div>
 
-    <div class="filter-box" collection="robots" filter-model="robotFilter" filter-name="Robot Accounts"></div>
+    <div class="filter-box" collection="robots" filter-model="options.filter" filter-name="Robot Accounts"></div>
 
     <div class="empty" ng-if="!robots.length">
       <div class="empty-primary-msg">No robot accounts defined.</div>
@@ -24,22 +24,26 @@
       </div>
     </div>
 
-    <div class="empty" ng-if="robots.length && !(robots | filter:robotFilter).length">
+    <div class="empty" ng-if="robots.length && !orderedRobots.entries.length">
       <div class="empty-primary-msg">No robot accounts found matching filter.</div>
       <div class="empty-secondary-msg">
         Please change your filter to display robot accounts.
       </div>
     </div>
 
-    <table class="cor-table" ng-if="(robots | filter:robotFilter).length">
+    <table class="cor-table" ng-if="orderedRobots.entries.length">
       <thead>
-        <td>Robot Account Name</td>
+        <td ng-class="TableService.tablePredicateClass('name', options.predicate, options.reverse)">
-        <td ng-if="organization">Teams</td>
+          <a ng-click="TableService.orderBy('name', options)">Robot Account Name</a>
+        </td>
+        <td ng-if="organization" ng-class="TableService.tablePredicateClass('teams_string', options.predicate, options.reverse)">
+          <a ng-click="TableService.orderBy('teams_string', options)">Teams</a>
+        </td>
         <td>Repositories</td>
         <td class="options-col"></td>
       </thead>
 
-      <tr ng-repeat="robotInfo in robots | filter:robotFilter | orderBy:getShortenedRobotName" bindonce>
+      <tr ng-repeat="robotInfo in orderedRobots.visibleEntries" bindonce>
         <td class="robot">
           <i class="fa ci-robot hidden-xs"></i>
           <a ng-click="showRobot(robotInfo)">
@@ -89,6 +93,10 @@
         </td>
       </tr>
     </table>
+
+    <div ng-if="orderedRobots.hasHiddenEntries">
+      <div class="cor-loader-inline"></div>
+    </div>
   </div>
 
   <!-- Set repo permissions dialog -->

static/js/directives/ui/robots-manager.js

@@ -13,38 +13,36 @@ angular.module('quay').directive('robotsManager', function () {
       'user': '=user',
       'isEnabled': '=isEnabled'
     },
-    controller: function($scope, $element, ApiService, $routeParams, $location, Config, $rootScope) {
+    controller: function($scope, $element, ApiService, $routeParams, Config, $rootScope, TableService) {
       $scope.robots = null;
       $scope.loading = false;
       $scope.Config = Config;
+      $scope.TableService = TableService;
       $scope.feedback = null;
 
       $scope.robotDisplayInfo = null;
       $scope.createRobotInfo = null;
 
-      // Listen for route changes and update the tabs accordingly.
+      $scope.options = {
-      var locationListener = $rootScope.$on('$routeUpdate', function(){
+        'filter': null,
-        if ($location.search()['showRobot']) {
+        'predicate': 'name',
-          $scope.filterToRobot($location.search()['showRobot']);
+        'reverse': false,
-        }
+      };
-      });
 
-      $scope.$on('$destroy', function() {
+      var buildOrderedRobots = function() {
-        locationListener && locationListener();
+        if (!$scope.robots) {
-      });
-
-      $scope.filterToRobot = function(robotName) {
-        if ($scope.robotFilter == robotName) {
           return;
         }
 
-        var index = $scope.findRobotIndexByName(robotName);
+        var robots = $scope.robots;
-        if (index < 0) {
+        robots.forEach(function(robot) {
-          // Robot doesn't exist. Reload the list to see if we can find it.
+          robot['teams_string'] = robot.teams.map(function(team) {
-          update();
+            return team['name'] || '';
-        }
+          }).join(',');
+        });
 
-        $scope.robotFilter = robotName;
+        $scope.orderedRobots = TableService.buildOrderedItems(robots, $scope.options,
+                                                              ['name', 'teams_string'], []);
       };
 
       $scope.showRobot = function(info) {
@@ -97,6 +95,7 @@ angular.module('quay').directive('robotsManager', function () {
                 'robot': info.name
               }
             };
+            buildOrderedRobots();
           }
         }, ApiService.errorDisplay('Cannot delete robot account'));
       };
@@ -139,17 +138,17 @@ angular.module('quay').directive('robotsManager', function () {
         $scope.loading = true;
         ApiService.getRobots($scope.organization, null, params).then(function(resp) {
           $scope.robots = resp.robots;
+          buildOrderedRobots();
           $scope.loading = false;
-
-          if ($routeParams.showRobot) {
-            $scope.filterToRobot($routeParams.showRobot);
-          }
         });
       };
 
       $scope.$watch('isEnabled', update);
       $scope.$watch('organization', update);
       $scope.$watch('user', update);
+      $scope.$watch('options.filter', buildOrderedRobots);
+      $scope.$watch('options.predicate', buildOrderedRobots);
+      $scope.$watch('options.reverse', buildOrderedRobots);
     }
   };
   return directiveDefinitionObject;