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

New create entity dialogs (team and robot)

Browse source 
Fixes https://github.com/coreos-inc/design/issues/230
This commit is contained in:
Joseph Schorr 2016-05-12 17:59:49 -04:00
parent 2274d6ff84
commit 4a543be7a7
31 changed files with 687 additions and 232 deletions
Download patch file Download diff file Expand all files Collapse all files

22
static/js/directives/repo-view/repo-panel-tags.js
View file

@ -18,9 +18,7 @@ angular.module('quay').directive('repoPanelTags', function () {
'getImages': '&getImages'
},
controller: function($scope, $element, $filter, $location, ApiService, UIService, VulnerabilityService) {
var orderBy = $filter('orderBy');
controller: function($scope, $element, $filter, $location, ApiService, UIService, VulnerabilityService, TableService) {
$scope.maxTrackCount = 5;
$scope.checkedTags = UIService.createCheckStateController([], 'name');
@ -45,32 +43,26 @@ angular.module('quay').directive('repoPanelTags', function () {
var setTagState = function() {
if (!$scope.repository || !$scope.selectedTags) { return; }
var tags = [];
// Build a list of all the tags, with extending information.
var allTags = [];
// Build a list of tags and filtered tags.
for (var tag in $scope.repository.tags) {
if (!$scope.repository.tags.hasOwnProperty(tag)) { continue; }
var tagData = $scope.repository.tags[tag];
var tagInfo = $.extend(tagData, {
'name': tag,
'last_modified_datetime': (new Date(tagData.last_modified || 0)).valueOf() * (-1)
'last_modified_datetime': TableService.getReversedTimestamp(tagData.last_modified)
});
allTags.push(tagInfo);
if (!$scope.options.tagFilter || tag.indexOf($scope.options.tagFilter) >= 0 ||
tagInfo.image_id.indexOf($scope.options.tagFilter) >= 0) {
tags.push(tagInfo);
}
}
// Sort the tags by the predicate and the reverse, and map the information.
var imageIDs = [];
var ordered = orderBy(tags, $scope.options.predicate, $scope.options.reverse);
var checked = [];
var ordered = TableService.buildOrderedItems(allTags, $scope.options,
['name'], ['last_modified_datetime', 'size']).entries;
var checked = [];
var imageMap = {};
var imageIndexMap = {};
for (var i = 0; i < ordered.length; ++i) {
@ -175,7 +167,7 @@ angular.module('quay').directive('repoPanelTags', function () {
$scope.$watch('options.predicate', setTagState);
$scope.$watch('options.reverse', setTagState);
$scope.$watch('options.tagFilter', setTagState);
$scope.$watch('options.filter', setTagState);
$scope.$watch('options.page', function(page) {
if (page != null && $scope.checkedTags) {

202
static/js/directives/ui/create-entity-dialog.js Normal file
View file

@ -0,0 +1,202 @@
/**
* An element which displays a create entity dialog.
*/
angular.module('quay').directive('createEntityDialog', function () {
var directiveDefinitionObject = {
priority: 0,
templateUrl: '/static/directives/create-entity-dialog.html',
replace: false,
transclude: true,
restrict: 'C',
scope: {
'info': '=info',
'entityKind': '@entityKind',
'entityTitle': '@entityTitle',
'entityIcon': '@entityIcon',
'entityNameRegex': '@entityNameRegex',
'entityCreateRequested': '&entityCreateRequested',
'entityCreateCompleted': '&entityCreateCompleted'
},
controller: function($scope, $element, ApiService, UIService, TableService, RolesService, UserService) {
$scope.TableService = TableService;
$scope.options = {
'predicate': 'last_modified_datetime',
'reverse': false,
'filter': ''
};
var handleRepoCheckChange = function() {
$scope.repositories.forEach(function(repo) {
if ($scope.checkedRepos.isChecked(repo)) {
if (repo['permission'] == 'none') {
repo['permission'] = 'read';
}
} else {
repo['permission'] = 'none';
}
});
};
$scope.$on('$destroy', function() {
if ($scope.inBody) {
document.body.removeChild($element[0]);
}
});
$scope.setRole = function(role, repo) {
repo['permission'] = role;
if (role == 'none') {
$scope.checkedRepos.uncheckItem(repo);
} else {
$scope.checkedRepos.checkItem(repo);
}
};
$scope.hide = function() {
$element.find('.modal').modal('hide');
if ($scope.entity) {
$scope.entityCreateCompleted({'entity': $scope.entity});
$scope.entity = null;
}
};
$scope.show = function() {
$scope.entityName = null;
$scope.entity = null;
$scope.creating = false;
$scope.view = 'enterName';
$scope.enterNameForm.$setPristine(true);
// Move the dialog to the body to prevent it from nesting if called
// from within another dialog.
$element.find('.modal').modal({});
$scope.inBody = true;
document.body.appendChild($element[0]);
};
var setRepoState = function() {
if (!$scope.repositories) {
return;
}
$scope.orderedRepositories = TableService.buildOrderedItems($scope.repositories, $scope.options,
['name', 'permission'],
['last_modified_datetime']);
};
var entityCreateCallback = function(entity) {
if (!entity || $scope.info.skip_permissions) {
$scope.entity = entity;
$scope.hide();
return;
}
// Load the repositories under the entity's namespace.
var params = {
'namespace': $scope.info.namespace,
'last_modified': true
};
ApiService.listRepos(null, params).then(function(resp) {
$scope.view = 'addperms';
$scope.entity = entity;
var repos = [];
resp['repositories'].forEach(function(repo) {
repos.push({
'namespace': repo.namespace,
'name': repo.name,
'last_modified': repo.last_modified,
'last_modified_datetime': TableService.getReversedTimestamp(repo.last_modified),
'permission': 'none'
});
});
if (repos.length == 0) {
$scope.hide();
return;
}
$scope.repositories = repos;
$scope.checkedRepos = UIService.createCheckStateController($scope.repositories, 'name');
$scope.checkedRepos.listen(handleRepoCheckChange);
if ($scope.info.repository) {
repos.forEach(function(repo) {
if (repo['namespace'] == $scope.info.repository.namespace &&
repo['name'] == $scope.info.repository.name) {
$scope.checkedRepos.checkItem(repo);
$scope.options.filter = $scope.info.repository.name;
}
});
}
setRepoState();
}, ApiService.errorDisplay('Could not load repositories'));
};
$scope.addPermissions = function() {
$scope.view = 'addingperms';
var repos = $scope.checkedRepos.checked;
var counter = 0;
var addPerm = function() {
if (counter >= repos.length) {
$scope.hide();
return;
}
var repo = repos[counter];
RolesService.setRepositoryRole(repo, repo.permission, $scope.entityKind, $scope.entity.name,
function(status) {
if (status) {
counter++;
addPerm();
} else {
$scope.hide();
}
});
};
addPerm();
};
$scope.createEntity = function() {
$scope.view = 'creating';
$scope.entityCreateRequested({
'name': $scope.entityName,
'callback': entityCreateCallback
});
};
$scope.$watch('options.predicate', setRepoState);
$scope.$watch('options.reverse', setRepoState);
$scope.$watch('options.filter', setRepoState);
$scope.$watch('entityNameRegex', function(r) {
if (r) {
$scope.entityNameRegexObj = new RegExp(r);
}
});
$scope.$watch('info', function(info) {
if (!info || !info.namespace) {
$scope.hide();
return;
}
$scope.namespace = UserService.getNamespace(info.namespace);
if ($scope.namespace) {
$scope.show();
}
});
}
};
return directiveDefinitionObject;
});

43
static/js/directives/ui/create-robot-dialog.js Normal file
View file

@ -0,0 +1,43 @@
/**
* An element which displays a dialog for creating a robot account.
*/
angular.module('quay').directive('createRobotDialog', function () {
var directiveDefinitionObject = {
priority: 0,
templateUrl: '/static/directives/create-robot-dialog.html',
replace: false,
transclude: true,
restrict: 'C',
scope: {
'info': '=info',
'robotCreated': '&robotCreated'
},
controller: function($scope, $element, ApiService, UserService) {
$scope.ROBOT_PATTERN = ROBOT_PATTERN;
$scope.robotFinished = function(robot) {
$scope.robotCreated({'robot': robot});
};
$scope.createRobot = function(name, callback) {
var organization = $scope.info.namespace;
if (!UserService.isOrganization(organization)) {
organization = null;
}
var params = {
'robot_shortname': name
};
var errorDisplay = ApiService.errorDisplay('Cannot create robot account', function() {
callback(null);
});
ApiService.createRobot(organization, null, params).then(function(resp) {
callback(resp);
}, errorDisplay);
};
}
};
return directiveDefinitionObject;
});

44
static/js/directives/ui/create-team-dialog.js Normal file
View file

@ -0,0 +1,44 @@
/**
* An element which displays a dialog for creating a team.
*/
angular.module('quay').directive('createTeamDialog', function () {
var directiveDefinitionObject = {
priority: 0,
templateUrl: '/static/directives/create-team-dialog.html',
replace: false,
transclude: true,
restrict: 'C',
scope: {
'info': '=info',
'teamCreated': '&teamCreated'
},
controller: function($scope, $element, ApiService, UserService) {
$scope.TEAM_PATTERN = TEAM_PATTERN;
$scope.teamFinished = function(team) {
$scope.teamCreated({'team': team});
};
$scope.createTeam = function(name, callback) {
var data = {
'name': name,
'role': 'member'
};
var params = {
'orgname': $scope.info.namespace,
'teamname': name
};
var errorDisplay = ApiService.errorDisplay('Cannot create team', function() {
callback(null);
});
ApiService.updateOrganizationTeam(data, params).then(function(resp) {
callback(resp);
}, errorDisplay);
};
}
};
return directiveDefinitionObject;
});

38
static/js/directives/ui/entity-search.js
View file

@ -18,6 +18,8 @@ angular.module('quay').directive('entitySearch', function () {
scope: {
'namespace': '=namespace',
'placeholder': '=placeholder',
'forRepository': '=forRepository',
'skipPermissions': '=skipPermissions',
// Default: ['user', 'team', 'robot']
'allowedEntities': '=allowedEntities',
@ -41,7 +43,7 @@ angular.module('quay').directive('entitySearch', function () {
// True if the menu should pull right.
'pullRight': '@pullRight'
},
controller: function($rootScope, $scope, $element, Restangular, UserService, ApiService, UtilService, Config, CreateService) {
controller: function($rootScope, $scope, $element, Restangular, UserService, ApiService, UtilService, Config) {
$scope.lazyLoading = true;
$scope.teams = null;
@ -55,6 +57,8 @@ angular.module('quay').directive('entitySearch', function () {
$scope.includeOrgs = false;
$scope.currentEntityInternal = $scope.currentEntity;
$scope.createRobotInfo = null;
$scope.createTeamInfo = null;
$scope.Config = Config;
@ -91,18 +95,30 @@ angular.module('quay').directive('entitySearch', function () {
}
};
$scope.createTeam = function() {
CreateService.askCreateTeam($scope.namespace, function(created) {
$scope.setEntity(created.name, 'team', false, created.avatar);
$scope.teams[created.name] = created;
});
$scope.askCreateTeam = function() {
$scope.createTeamInfo = {
'namespace': $scope.namespace,
'repository': $scope.forRepository,
'skip_permissions': $scope.skipPermissions
};
};
$scope.createRobot = function() {
CreateService.askCreateRobot($scope.namespace, function(created) {
$scope.setEntity(created.name, 'user', true, created.avatar);
$scope.robots.push(created);
});
$scope.askCreateRobot = function() {
$scope.createRobotInfo = {
'namespace': $scope.namespace,
'repository': $scope.forRepository,
'skip_permissions': $scope.skipPermissions
};
};
$scope.handleTeamCreated = function(created) {
$scope.setEntity(created.name, 'team', false, created.avatar);
$scope.teams[created.name] = created;
};
$scope.handleRobotCreated = function(created) {
$scope.setEntity(created.name, 'user', true, created.avatar);
$scope.robots.push(created);
};
$scope.setEntity = function(name, kind, is_robot, avatar) {

38
static/js/directives/ui/header-bar.js
View file

@ -13,7 +13,7 @@ angular.module('quay').directive('headerBar', function () {
scope: {
},
controller: function($rootScope, $scope, $element, $location, $timeout, hotkeys, UserService,
PlanService, ApiService, NotificationService, Config, CreateService, Features,
PlanService, ApiService, NotificationService, Config, Features,
DocumentationService, ExternalLoginService) {
$scope.externalSigninUrl = ExternalLoginService.getSingleSigninUrl();
@ -268,24 +268,36 @@ angular.module('quay').directive('headerBar', function () {
$location.url('/repository/' + context.repository.namespace + '/' + context.repository.name + '/build/' + build.id);
};
$scope.createRobot = function(context) {
$scope.handleRobotCreated = function(created, context) {
var namespace = $scope.getNamespace(context);
CreateService.askCreateRobot(namespace, function(created) {
if (UserService.isOrganization(namespace)) {
$location.url('/organization/' + namespace + '?tab=robots&showRobot=' + created.name);
} else {
$location.url('/user/' + namespace + '?tab=robots&showRobot=' + created.name);
}
});
if (UserService.isOrganization(namespace)) {
$location.url('/organization/' + namespace + '?tab=robots&showRobot=' + created.name);
} else {
$location.url('/user/' + namespace + '?tab=robots&showRobot=' + created.name);
}
};
$scope.createTeam = function(context) {
$scope.handleTeamCreated = function(created, context) {
var namespace = $scope.getNamespace(context);
$location.url('/organization/' + namespace + '/teams/' + created.name);
};
$scope.askCreateRobot = function(context) {
var namespace = $scope.getNamespace(context);
if (!namespace || !UserService.isNamespaceAdmin(namespace)) { return; }
CreateService.askCreateTeam(namespace, function(created) {
$location.url('/organization/' + namespace + '/teams/' + created.name);
});
$scope.createRobotInfo = {
'namespace': namespace
};
};
$scope.askCreateTeam = function(context) {
var namespace = $scope.getNamespace(context);
if (!namespace || !UserService.isNamespaceAdmin(namespace)) { return; }
$scope.createTeamInfo = {
'namespace': namespace
};
};
}
};

20
static/js/directives/ui/repo-list-table.js
View file

@ -13,30 +13,22 @@ angular.module('quay').directive('repoListTable', function () {
'namespaces': '=namespaces',
'starToggled': '&starToggled'
},
controller: function($scope, $element, $filter) {
var orderBy = $filter('orderBy');
controller: function($scope, $element, $filter, TableService) {
$scope.repositories = null;
$scope.orderedRepositories = [];
$scope.maxPopularity = 0;
$scope.options = {
'predicate': 'popularity',
'reverse': true
'reverse': false,
'filter': null
};
var buildOrderedRepositories = function() {
if (!$scope.repositories) { return; }
var modifier = $scope.options.reverse ? '-' : '';
var fields = [modifier + $scope.options.predicate];
// Secondary ordering by full name.
if ($scope.options.predicate != 'full_name') {
fields.push('full_name');
}
var ordered = orderBy($scope.repositories, fields, false);
$scope.orderedRepositories = ordered;
$scope.orderedRepositories = TableService.buildOrderedItems($scope.repositories, $scope.options,
[], ['last_modified_datetime', 'popularity'])
};
$scope.tablePredicateClass = function(name, predicate, reverse) {
@ -92,7 +84,7 @@ angular.module('quay').directive('repoListTable', function () {
(resource.value || []).forEach(function(repository) {
var repositoryInfo = $.extend(repository, {
'full_name': repository.namespace + '/' + repository.name,
'last_modified_datetime': (new Date(repository.last_modified || 0)).valueOf() * (-1)
'last_modified_datetime': TableService.getReversedTimestamp(repository.last_modified),
});
$scope.repositories.push(repositoryInfo);

58
static/js/directives/ui/repository-permissions-table.js
View file

@ -28,7 +28,7 @@ angular.module('quay').directive('repositoryPermissionsTable', function () {
'repository': '=repository',
'isEnabled': '=isEnabled'
},
controller: function($scope, $element, ApiService, Restangular, UtilService, RolesService) {
controller: function($scope, $element, ApiService, RolesService) {
$scope.permissionResources = {'team': {}, 'user': {}};
$scope.permissionCache = {};
$scope.permissions = {};
@ -69,13 +69,6 @@ angular.module('quay').directive('repositoryPermissionsTable', function () {
loadAllPermissions();
var getPermissionEndpoint = function(entityName, kind) {
var namespace = $scope.repository.namespace;
var name = $scope.repository.name;
var url = UtilService.getRestUrl('repository', namespace, name, 'permissions', kind, entityName);
return Restangular.one(url);
};
$scope.buildEntityForPermission = function(permission, kind) {
var key = permission.name + ':' + kind;
if ($scope.permissionCache[key]) {
@ -146,51 +139,36 @@ angular.module('quay').directive('repositoryPermissionsTable', function () {
};
$scope.deleteRole = function(entityName, kind) {
var errorHandler = ApiService.errorDisplay('Cannot change permission', function(resp) {
if (resp.status == 409) {
return 'Cannot change permission as you do not have the authority';
RolesService.deleteRepositoryRole($scope.repository, kind, entityName, function(status) {
if (status) {
delete $scope.permissions[kind][entityName];
}
});
var endpoint = getPermissionEndpoint(entityName, kind);
endpoint.customDELETE().then(function() {
delete $scope.permissions[kind][entityName];
}, errorHandler);
};
$scope.addRole = function(entityName, role, kind, opt_callback) {
var permission = {
'role': role,
};
var errorHandler = ApiService.errorDisplay('Cannot change permission', function() {
opt_callback && opt_callback(false);
RolesService.setRepositoryRole($scope.repository, role, kind, entityName, function(status, result) {
$scope.addPermissionInfo = {
'role': readRole
};
if (status) {
$scope.permissions[kind][entityName] = result;
}
opt_callback && opt_callback(status);
});
var endpoint = getPermissionEndpoint(entityName, kind);
endpoint.customPUT(permission).then(function(result) {
$scope.permissions[kind][entityName] = result;
$scope.addPermissionInfo = {
'role': readRole
};
opt_callback && opt_callback(true)
}, errorHandler);
};
$scope.setRole = function(role, entityName, kind) {
var errorDisplay = ApiService.errorDisplay(function(resp) {
$scope.permissions[kind][entityName] = {'role': currentRole};
var currentRole = $scope.permissions[kind][entityName].role;
RolesService.setRepositoryRole($scope.repository, role, kind, entityName, function(status) {
if (status) {
$scope.permissions[kind][entityName]['role'] = role;
} else {
$scope.permissions[kind][entityName]['role'] = currentRole;
}
});
var permission = $scope.permissions[kind][entityName];
var currentRole = permission.role;
permission.role = role;
var endpoint = getPermissionEndpoint(entityName, kind);
endpoint.customPUT(permission).then(function() {}, errorDisplay);
};
}
};

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

@ -13,15 +13,14 @@ angular.module('quay').directive('robotsManager', function () {
'user': '=user',
'isEnabled': '=isEnabled'
},
controller: function($scope, $element, ApiService, $routeParams, $location, CreateService,
Config, $rootScope) {
$scope.ROBOT_PATTERN = ROBOT_PATTERN;
controller: function($scope, $element, ApiService, $routeParams, $location, Config, $rootScope) {
$scope.robots = null;
$scope.loading = false;
$scope.Config = Config;
$scope.feedback = null;
$scope.robotDisplayInfo = null;
$scope.createRobotInfo = null;
// Listen for route changes and update the tabs accordingly.
var locationListener = $rootScope.$on('$routeUpdate', function(){
@ -96,22 +95,10 @@ angular.module('quay').directive('robotsManager', function () {
return name.substr(0, plus);
};
$scope.createRobot = function(name) {
if (!name) { return; }
CreateService.createRobotAccount(ApiService, !!$scope.organization, $scope.organization ? $scope.organization.name : '', name,
function(created) {
created.teams = [];
created.repositories = [];
$scope.robots.push(created);
$scope.feedback = {
'kind': 'success',
'message': 'Robot account {robot} was created',
'data': {
'robot': name
}
};
});
$scope.askCreateRobot = function() {
$scope.createRobotInfo = {
'namespace': $scope.organization ? $scope.organization.name : $scope.user.username
};
};
$scope.deleteRobot = function(info) {
@ -131,7 +118,6 @@ angular.module('quay').directive('robotsManager', function () {
}, ApiService.errorDisplay('Cannot delete robot account'));
};
$scope.askDeleteRobot = function(info) {
bootbox.confirm('Are you sure you want to delete robot ' + info.name + '?', function(resp) {
if (resp) {
@ -140,6 +126,10 @@ angular.module('quay').directive('robotsManager', function () {
});
};
$scope.robotCreated = function() {
update();
};
var update = function() {
if (!$scope.user && !$scope.organization) { return; }
if ($scope.loading || !$scope.isEnabled) { return; }

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

@ -12,8 +12,7 @@ angular.module('quay').directive('teamsManager', function () {
'organization': '=organization',
'isEnabled': '=isEnabled'
},
controller: function($scope, $element, ApiService, CreateService, $timeout, UserService) {
$scope.TEAM_PATTERN = TEAM_PATTERN;
controller: function($scope, $element, ApiService, $timeout, UserService) {
$scope.teamRoles = [
{ 'id': 'member', 'title': 'Member', 'kind': 'default' },
{ 'id': 'creator', 'title': 'Creator', 'kind': 'success' },
@ -27,6 +26,7 @@ angular.module('quay').directive('teamsManager', function () {
$scope.showingMembers = false;
$scope.fullMemberList = null;
$scope.feedback = null;
$scope.createTeamInfo = null;
var loadTeamMembers = function() {
if (!$scope.organization || !$scope.isEnabled) { return; }
@ -107,35 +107,27 @@ angular.module('quay').directive('teamsManager', function () {
}, errorHandler);
};
$scope.createTeam = function(teamname) {
if (!teamname) {
return;
}
$scope.askCreateTeam = function(teamname) {
$scope.createTeamInfo = {
'namespace': $scope.organization.name
};
};
if ($scope.organization.teams[teamname]) {
$('#team-' + teamname).removeClass('highlight');
setTimeout(function() {
$('#team-' + teamname).addClass('highlight');
}, 10);
return;
}
$scope.handleTeamCreated = function(created) {
var teamname = created.name;
$scope.organization.teams[teamname] = created;
$scope.members[teamname] = {};
$scope.members[teamname].members = [];
$scope.organization.ordered_teams.push(teamname);
$scope.orderedTeams.push(created);
var orgname = $scope.organization.name;
CreateService.createOrganizationTeam(ApiService, orgname, teamname, function(created) {
$scope.organization.teams[teamname] = created;
$scope.members[teamname] = {};
$scope.members[teamname].members = [];
$scope.organization.ordered_teams.push(teamname);
$scope.orderedTeams.push(created);
$scope.feedback = {
'kind': 'success',
'message': 'Team {team} created',
'data': {
'team': teamname
}
};
});
$scope.feedback = {
'kind': 'success',
'message': 'Team {team} created',
'data': {
'team': teamname
}
};
};
$scope.askDeleteTeam = function(teamname) {