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
This commit is contained in:
Joseph Schorr 2016-11-18 12:38:08 -05:00
parent 96173485f8
commit a34229780d
2 changed files with 36 additions and 29 deletions

View file

@ -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 -->

View file

@ -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;