vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Make the org and user views more performant by only loading teams and robots when requested, making some loads async, and skipping others entirely on mobile

Browse source
This commit is contained in:
Joseph Schorr 2015-04-21 16:07:24 -04:00
parent 738c3efc4d
commit afa59da8d6
10 changed files with 52 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
static/directives/robots-manager.html
View file

@ -5,7 +5,8 @@
<div class="manager-header" header-title="Robot Accounts">
<span class="popup-input-button" pattern="ROBOT_PATTERN"
placeholder="'Robot Account Name'"
submitted="createRobot(value)">
submitted="createRobot(value)"
ng-show="isEnabled">
<i class="fa fa-plus"></i> Create Robot Account
</span>
</div>

2
static/directives/teams-manager.html
View file

@ -46,7 +46,7 @@
<span class="team-member-more"
ng-if="members[team.name].members.length > 20">+ {{ members[team.name].members.length - 20 }} more team members.</span>
<span class="team-member-more"
ng-if="!members[team.name].members.length">(Empty Team)</span>
ng-if="members[team.name].members && !members[team.name].members.length">(Empty Team)</span>
</div>
</div>

6
static/js/directives/ui/robots-manager.js
View file

@ -10,7 +10,8 @@ angular.module('quay').directive('robotsManager', function () {
restrict: 'C',
scope: {
'organization': '=organization',
'user': '=user'
'user': '=user',
'isEnabled': '=isEnabled'
},
controller: function($scope, $element, ApiService, $routeParams, CreateService, Config) {
$scope.ROBOT_PATTERN = ROBOT_PATTERN;
@ -101,7 +102,7 @@ angular.module('quay').directive('robotsManager', function () {
var update = function() {
if (!$scope.user && !$scope.organization) { return; }
if ($scope.loading) { return; }
if ($scope.loading || !$scope.isEnabled) { return; }
$scope.loading = true;
ApiService.getRobots($scope.organization).then(function(resp) {
@ -117,6 +118,7 @@ angular.module('quay').directive('robotsManager', function () {
});
};
$scope.$watch('isEnabled', update);
$scope.$watch('organization', update);
$scope.$watch('user', update);
}

27
static/js/directives/ui/teams-manager.js
View file

@ -9,9 +9,10 @@ angular.module('quay').directive('teamsManager', function () {
transclude: false,
restrict: 'C',
scope: {
'organization': '=organization'
'organization': '=organization',
'isEnabled': '=isEnabled'
},
controller: function($scope, $element, ApiService, CreateService) {
controller: function($scope, $element, ApiService, CreateService, $timeout) {
$scope.TEAM_PATTERN = TEAM_PATTERN;
$scope.teamRoles = [
{ 'id': 'member', 'title': 'Member', 'kind': 'default' },
@ -23,11 +24,20 @@ angular.module('quay').directive('teamsManager', function () {
$scope.orderedTeams = [];
var loadTeamMembers = function() {
if (!$scope.organization) { return; }
if (!$scope.organization || !$scope.isEnabled) { return; }
// Skip loading team members on mobile.
if (!window.matchMedia('(min-width: 768px)').matches) {
return;
}
for (var name in $scope.organization.teams) {
if (!$scope.organization.teams.hasOwnProperty(name)) { continue; }
loadMembersOfTeam(name);
if (!$scope.organization.teams.hasOwnProperty(name) || $scope.members[name]) { continue; }
// Load fully async to prevent it from blocking the UI.
$timeout(function() {
loadMembersOfTeam(name);
}, 1);
}
};
@ -47,7 +57,9 @@ angular.module('quay').directive('teamsManager', function () {
};
var loadOrderedTeams = function() {
if (!$scope.organization || !$scope.organization.ordered_teams) { return; }
if (!$scope.organization || !$scope.organization.ordered_teams || !$scope.isEnabled) {
return;
}
$scope.orderedTeams = [];
$scope.organization.ordered_teams.map(function(name) {
@ -58,6 +70,9 @@ angular.module('quay').directive('teamsManager', function () {
$scope.$watch('organization', loadOrderedTeams);
$scope.$watch('organization', loadTeamMembers);
$scope.$watch('isEnabled', loadOrderedTeams);
$scope.$watch('isEnabled', loadTeamMembers);
$scope.setRole = function(role, teamname) {
var previousRole = $scope.organization.teams[teamname].role;
$scope.organization.teams[teamname].role = role;

10
static/js/pages/org-view.js
View file

@ -19,6 +19,8 @@
$scope.showLogsCounter = 0;
$scope.showApplicationsCounter = 0;
$scope.showInvoicesCounter = 0;
$scope.showRobotsCounter = 0;
$scope.showTeamsCounter = 0;
$scope.orgScope = {
'changingOrganization': false,
@ -57,6 +59,14 @@
// Load the organization.
loadOrganization();
$scope.showRobots = function() {
$scope.showRobotsCounter++;
};
$scope.showTeams = function() {
$scope.showTeamsCounter++;
};
$scope.showInvoices = function() {
$scope.showInvoicesCounter++;
};

5
static/js/pages/user-view.js
View file

@ -15,6 +15,7 @@
$scope.showInvoicesCounter = 0;
$scope.showAppsCounter = 0;
$scope.showRobotsCounter = 0;
$scope.changeEmailInfo = {};
$scope.changePasswordInfo = {};
@ -46,6 +47,10 @@
// Load the user.
loadUser();
$scope.showRobots = function() {
$scope.showRobotsCounter++;
};
$scope.showInvoices = function() {
$scope.showInvoicesCounter++;
};

2
static/partials/org-admin.html
View file

@ -55,7 +55,7 @@
<!-- Robot accounts tab -->
<div id="robots" class="tab-pane">
<div class="robots-manager" organization="organization"></div>
<div class="robots-manager" organization="organization" is-enabled="true"></div>
</div>
<!-- Prototypes tab -->

9
static/partials/org-view.html
View file

@ -24,10 +24,11 @@
<span class="cor-tab" tab-active="true" tab-title="Repositories" tab-target="#repos">
<i class="fa fa-hdd-o"></i>
</span>
<span class="cor-tab" tab-title="Teams" tab-target="#teams">
<span class="cor-tab" tab-title="Teams" tab-target="#teams" tab-init="showTeams()">
<i class="fa fa-users"></i>
</span>
<span class="cor-tab" tab-title="Robot Accounts" tab-target="#robots" ng-show="isAdmin">
<span class="cor-tab" tab-title="Robot Accounts" tab-target="#robots" tab-init="showRobots()"
ng-show="isAdmin">
<i class="fa fa-wrench"></i>
</span>
<span class="cor-tab" tab-title="Default Permissions" tab-target="#default" ng-show="isAdmin">
@ -70,14 +71,14 @@
<!-- Teams -->
<div id="teams" class="tab-pane">
<div ng-if="!user.anonymous">
<div class="teams-manager" organization="organization"></div>
<div class="teams-manager" organization="organization" is-enabled="showTeamsCounter"></div>
</div>
</div>
<!-- Robot Accounts -->
<div id="robots" class="tab-pane">
<div ng-if="isAdmin">
<div class="robots-manager" organization="organization"></div>
<div class="robots-manager" organization="organization" is-enabled="showRobotsCounter"></div>
</div>
</div>

2
static/partials/user-admin.html
View file

@ -250,7 +250,7 @@
<!-- Robot accounts tab -->
<div id="robots" class="tab-pane">
<div class="robots-manager" user="user"></div>
<div class="robots-manager" user="user" is-enabled="true"></div>
</div>
<!-- Billing options tab -->

4
static/partials/user-view.html
View file

@ -23,7 +23,7 @@
<span class="cor-tab" tab-active="true" tab-title="Repositories" tab-target="#repos">
<i class="fa fa-hdd-o"></i>
</span>
<span class="cor-tab" tab-title="Robot Accounts" tab-target="#robots">
<span class="cor-tab" tab-title="Robot Accounts" tab-init="showRobots()" tab-target="#robots">
<i class="fa fa-wrench"></i>
</span>
<span class="cor-tab" tab-title="User Settings" tab-target="#settings">
@ -60,7 +60,7 @@
<!-- Robot Accounts -->
<div id="robots" class="tab-pane">
<div class="robots-manager" user="viewuser"></div>
<div class="robots-manager" user="viewuser" is-enabled="showRobotsCounter"></div>
</div>
<!-- External Logins -->