From a34229780d2d8a653807f29b8fc8587fd56cb914 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <josephschorr@users.noreply.github.com>
Date: Fri, 18 Nov 2016 12:38:08 -0500
Subject: [PATCH] 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     | 20 +++++++---
 static/js/directives/ui/robots-manager.js | 45 +++++++++++------------
 2 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/static/directives/robots-manager.html b/static/directives/robots-manager.html
index 2cba9e6ad..65908bd21 100644
--- a/static/directives/robots-manager.html
+++ b/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-if="organization">Teams</td>
+        <td ng-class="TableService.tablePredicateClass('name', options.predicate, options.reverse)">
+          <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 -->
diff --git a/static/js/directives/ui/robots-manager.js b/static/js/directives/ui/robots-manager.js
index 5d5715fb8..67bf312ae 100644
--- a/static/js/directives/ui/robots-manager.js
+++ b/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.
-      var locationListener = $rootScope.$on('$routeUpdate', function(){
-        if ($location.search()['showRobot']) {
-          $scope.filterToRobot($location.search()['showRobot']);
-        }
-      });
+      $scope.options = {
+        'filter': null,
+        'predicate': 'name',
+        'reverse': false,
+      };
 
-      $scope.$on('$destroy', function() {
-        locationListener && locationListener();
-      });
-
-      $scope.filterToRobot = function(robotName) {
-        if ($scope.robotFilter == robotName) {
+      var buildOrderedRobots = function() {
+        if (!$scope.robots) {
           return;
         }
 
-        var index = $scope.findRobotIndexByName(robotName);
-        if (index < 0) {
-          // Robot doesn't exist. Reload the list to see if we can find it.
-          update();
-        }
+        var robots = $scope.robots;
+        robots.forEach(function(robot) {
+          robot['teams_string'] = robot.teams.map(function(team) {
+            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;