Fix bug in entity search that caused all robots and teams to be non-lazy loaded

Should help immensely with repository page load time

Fixes https://coreosdev.atlassian.net/browse/QS-30
This commit is contained in:
Joseph Schorr 2017-10-09 15:40:39 -04:00
parent 459d0ccd44
commit ff3dac613a
2 changed files with 59 additions and 25 deletions

View file

@ -7,28 +7,28 @@
</button>
<ul class="dropdown-menu entity-menu" ng-class="pullRight == 'true' ? 'pull-right': ''" role="menu"
aria-labelledby="entityDropdownMenu">
<li ng-show="lazyLoading" style="padding: 10px"><div class="cor-loader"></div></li>
<li ng-show="requiresLazyLoading" style="padding: 10px"><div class="cor-loader"></div></li>
<li role="presentation" class="dropdown-header" ng-show="!lazyLoading && !page.robots && !isAdmin && !teams">
<li role="presentation" class="dropdown-header" ng-show="!requiresLazyLoading && !page.robots && !isAdmin && !teams">
You do not have permission to manage teams and robots for this organization
</li>
<li role="presentation" ng-show="includeTeams && isOrganization && !lazyLoading && isAdmin">
<li role="presentation" ng-show="includeTeams && isOrganization && !requiresLazyLoading && isAdmin">
<a role="menuitem" class="new-action" tabindex="-1" ng-click="askCreateTeam()">
<i class="fa fa-group"></i> Create team
</a>
</li>
<li role="presentation" ng-show="includeRobots && !lazyLoading && isAdmin">
<li role="presentation" ng-show="includeRobots && !requiresLazyLoading && isAdmin">
<a role="menuitem" class="new-action" tabindex="-1" ng-click="askCreateRobot()">
<i class="fa ci-robot"></i>
Create robot account
</a>
</li>
<li role="presentation" class="divider" ng-show="!lazyLoading && page.robots && isAdmin"></li>
<li role="presentation" class="divider" ng-show="!requiresLazyLoading && page.robots && isAdmin"></li>
<li role="presentation" class="dropdown-header"
ng-show="!lazyLoading && !teams.length && !page.robots.length && !((includeTeams && isOrganization && isAdmin) || (includeRobots && isAdmin))">
ng-show="!requiresLazyLoading && !teams.length && !page.robots.length && !((includeTeams && isOrganization && isAdmin) || (includeRobots && isAdmin))">
<span ng-if="includeRobots && includeTeams && isOrganization">
No robot accounts or teams found
</span>
@ -50,20 +50,20 @@
</span>
</li>
<li role="presentation" class="dropdown-header" ng-show="!lazyLoading && teams">Teams</li>
<li role="presentation" class="dropdown-header" ng-show="!requiresLazyLoading && teams">Teams</li>
<li class="menuitem" role="presentation" ng-repeat="team in teams | orderBy: 'name'" ng-show="!lazyLoading"
<li class="menuitem" role="presentation" ng-repeat="team in teams | orderBy: 'name'" ng-show="!requiresLazyLoading"
ng-click="setEntity(team.name, 'team', false, team.avatar)">
<a role="menuitem" tabindex="-1">
<span class="avatar" data="team.avatar" size="16"></span> <span>{{ team.name }}</span>
</a>
</li>
<li role="presentation" class="divider" ng-show="!lazyLoading && teams && (isAdmin || page.robots)"></li>
<li role="presentation" class="divider" ng-show="!requiresLazyLoading && teams && (isAdmin || page.robots)"></li>
<li role="presentation" class="dropdown-header" ng-show="!lazyLoading && page.robots">Robot Accounts</li>
<li role="presentation" class="dropdown-header" ng-show="!requiresLazyLoading && page.robots">Robot Accounts</li>
<li class="menuitem" role="presentation" ng-repeat="robot in page.robots | orderBy:'name'" ng-show="!lazyLoading">
<li class="menuitem" role="presentation" ng-repeat="robot in page.robots | orderBy:'name'" ng-show="!requiresLazyLoading">
<a role="menuitem" tabindex="-1" ng-click="setEntity(robot.name, 'user', true)">
<i class="fa ci-robot"></i> <span>{{ robot.name }}</span>
</a>

View file

@ -44,7 +44,9 @@ angular.module('quay').directive('entitySearch', function () {
'pullRight': '@pullRight'
},
controller: function($rootScope, $scope, $element, Restangular, UserService, ApiService, UtilService, AvatarService, Config) {
$scope.lazyLoading = true;
$scope.requiresLazyLoading = true;
$scope.isLazyLoading = false;
$scope.userRequestedLazyLoading = false;
$scope.teams = null;
$scope.page = {};
@ -67,37 +69,67 @@ angular.module('quay').directive('entitySearch', function () {
return $.inArray(kind, opt_array || $scope.allowedEntities || ['user', 'team', 'robot']) >= 0;
};
var resetCache = function() {
$scope.requiresLazyLoading = true;
$scope.teams = null;
$scope.page.robots = null;
};
$scope.lazyLoad = function() {
if (!$scope.namespace || !$scope.thisUser || !$scope.lazyLoading) { return; }
$scope.userRequestedLazyLoading = true;
$scope.checkLazyLoad();
};
$scope.checkLazyLoad = function() {
if (!$scope.namespace || !$scope.thisUser || !$scope.requiresLazyLoading ||
$scope.isLazyLoading || !$scope.userRequestedLazyLoading) {
return;
}
$scope.isLazyLoading = true;
$scope.isAdmin = UserService.isNamespaceAdmin($scope.namespace);
$scope.isOrganization = !!UserService.getOrganization($scope.namespace);
// Reset the cached teams and robots.
// Reset the cached teams and robots, just to be sure.
$scope.teams = null;
$scope.page.robots = null;
var requiredOperations = 0;
var operationComplete = function() {
requiredOperations--;
if (requiredOperations <= 0) {
$scope.isLazyLoading = false;
$scope.requiresLazyLoading = false;
}
};
// Load the organization's teams (if applicable).
if ($scope.isOrganization && isSupported('team')) {
// Note: We load the org here again so that we always have the fully up-to-date
requiredOperations++;
// Note: We load the org here directly so that we always have the fully up-to-date
// teams list.
ApiService.getOrganization(null, {'orgname': $scope.namespace}).then(function(resp) {
$scope.teams = Object.keys(resp.teams).map(function(key) {
return resp.teams[key];
});
});
operationComplete();
}, operationComplete);
}
// Load the user/organization's robots (if applicable).
if ($scope.isAdmin && isSupported('robot')) {
requiredOperations++;
ApiService.getRobots($scope.isOrganization ? $scope.namespace : null).then(function(resp) {
$scope.page.robots = resp.robots;
$scope.lazyLoading = false;
}, function() {
$scope.lazyLoading = false;
});
} else {
$scope.lazyLoading = false;
operationComplete();
}, operationComplete);
}
if (requiredOperations == 0) {
operationComplete();
}
};
@ -362,13 +394,15 @@ angular.module('quay').directive('entitySearch', function () {
$scope.$watch('namespace', function(namespace) {
if (!namespace) { return; }
$scope.lazyLoad();
resetCache();
$scope.checkLazyLoad();
});
UserService.updateUserIn($scope, function(currentUser){
if (currentUser.anonymous) { return; }
$scope.thisUser = currentUser;
$scope.lazyLoad();
resetCache();
$scope.checkLazyLoad();
});
$scope.$watch('currentEntity', function(entity) {