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

Get the remainder of the repo settings panel working

Browse source
This commit is contained in:
Joseph Schorr 2015-03-16 17:03:26 -04:00
parent 32956b6713
commit 31480de8c1
12 changed files with 480 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
static/css/directives/repo-view/repo-panel-builds.css
View file

@ -10,20 +10,3 @@
margin-right: 6px;
vertical-align: middle;
}
.repo-panel-builds .heading-title {
font-size: 20px;
}
.repo-panel-builds .heading-controls {
font-size: 14px;
float: right;
}
.repo-panel-builds .heading-controls .btn {
margin-top: -10px;
}
.repo-panel-builds .heading-controls .btn .fa {
margin-right: 6px;
}

25
static/css/directives/repo-view/repo-panel-settings.css Normal file
View file

@ -0,0 +1,25 @@
.repo-panel-settings-element .panel-section {
padding: 20px;
border-bottom: 1px solid #eee;
}
.repo-panel-settings-element .lock-section {
position: relative;
padding-left: 80px;
}
.repo-panel-settings-element .lock-section .lock-icon {
position: absolute;
top: 10px;
left: 22px;
color: #ccc;
font-size: 46px;
}
.repo-panel-settings-element .panel-section .btn {
margin-top: 20px;
}
.repo-panel-settings-element .panel-section .btn .fa {
margin-right: 6px;
}

3
static/css/directives/ui/repository-events-table.css Normal file
View file

@ -0,0 +1,3 @@
.repository-events-table-element .notification-row i.fa {
margin-right: 6px;
}

17
static/css/pages/repo-view.css
View file

@ -22,3 +22,20 @@
.repository-view .tab-header-controls .btn .fa {
margin-right: 6px;
}
.repository-view .heading-title {
font-size: 20px;
}
.repository-view .heading-controls {
font-size: 14px;
float: right;
}
.repository-view .heading-controls .btn {
margin-top: -10px;
}
.repository-view .heading-controls .btn .fa {
margin-right: 6px;
}

81
static/directives/repo-view/repo-panel-settings.html
View file

@ -10,5 +10,86 @@
</div>
<!-- Access Tokens (DEPRECATED) -->
<div class="co-panel" ng-show="hasTokens">
<div class="co-panel-heading"><i class="fa fa-key"></i> Access Token Permissions</div>
<div class="panel-body">
<div class="repository-tokens-table" repository="repository" has-tokens="hasTokens"></div>
</div>
</div>
<!-- Events and Notifications -->
<div class="repository-events-table" repository="repository"></div>
<!-- Other settings -->
<div class="co-panel">
<div class="co-panel-heading"><i class="fa fa-gears"></i> Repository Settings</div>
<div class="cor-loader" ng-show="!repository"></div>
<div ng-show="repository">
<!-- Public/Private -->
<div class="panel-body panel-section lock-section" ng-if="!repository.is_public">
<i class="fa fa-lock lock-icon"></i>
<div>This repository is currently <b>private</b>. Only users on the permissions list may view and interact with it.</div>
<button class="btn btn-default" ng-click="askChangeAccess('public')">
<i class="fa fa-unlock"></i>Make Public
</button>
</div>
<div class="panel-body panel-section lock-section" ng-if="repository.is_public">
<i class="fa fa-unlock lock-icon"></i>
<div>This repository is currently <b>public</b> and is visible to all users, and may be pulled by all users.</div>
<button class="btn btn-default" ng-click="askChangeAccess('private')">
<i class="fa fa-lock"></i>Make Private
</button>
</div>
<!-- Delete Repository -->
<div class="panel-body panel-section">
<div>Deleting a repository <b>cannot be undone</b>. Here be dragons!</div>
<button class="btn btn-danger" ng-click="askDelete()">
<i class="fa fa-trash"></i>
Delete Repository
</button>
</div>
<!-- Build Status Badge -->
<div class="panel-body panel-section">
<!-- Status Image -->
<a ng-href="/repository/{{ repository.namespace }}/{{ repository.name }}">
<img ng-src="/repository/{{ repository.namespace }}/{{ repository.name }}/status?token={{ repository.status_token }}"
data-title="Docker Repository on Quay.io">
</a>
<!-- Embed formats -->
<table style="margin-top: 20px; width: 600px;">
<thead>
<th style="width: 150px"></th>
<th></th>
</thead>
<tr>
<td>Image (SVG):</td>
<td>
<div class="copy-box" hovering-message="true" value="getBadgeFormat('svg', repository)"></div>
</td>
</tr>
<tr>
<td>Markdown:</td>
<td>
<div class="copy-box" hovering-message="true" value="getBadgeFormat('md', repository)"></div>
</td>
</tr>
<tr>
<td>AsciiDoc:</td>
<td>
<div class="copy-box" hovering-message="true" value="getBadgeFormat('asciidoc', repository)"></div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>

75
static/directives/repository-events-table.html Normal file
View file

@ -0,0 +1,75 @@
<div class="repository-events-table-element">
<div class="co-panel">
<div class="co-panel-heading">
<i class="fa fa-bell"></i> Events and Notifications
<div class="heading-controls hidden-sm hidden-xs">
<button class="btn btn-primary" ng-click="askCreateNotification()">
<i class="fa fa-plus"></i> Create Notification
</button>
</div>
</div>
<div class="panel-body">
<div class="resource-view" resource="notificationsResource"
error-message="'Could not load repository events'">
<div class="empty" ng-if="!notifications.length">
<div class="empty-primary-msg">No notification have been setup for this repository.</div>
<div class="empty-secondary-msg" ng-if="repository.can_write">
Click the "Create Notification" button above to add a new notification for a repository event.
</div>
</div>
<table class="co-table permissions" ng-if="notifications.length">
<thead>
<tr>
<td>Event</td>
<td>Notification</td>
<td class="options-col"></td>
</tr>
</thead>
<tbody>
<tr class="notification-row" ng-repeat="notification in notifications">
<td>
<span class="notification-event">
<i class="fa fa-lg" ng-class="getEventInfo(notification).icon"></i>
{{ getEventInfo(notification).title }}
</span>
</td>
<td>
<span class="notification-method">
<i class="fa fa-lg" ng-class="getMethodInfo(notification).icon"></i>
{{ getMethodInfo(notification).title }}
</span>
</td>
<td>
<span class="cor-options-menu">
<span class="cor-option" option-click="testNotification(notification)">
<i class="fa fa-send"></i> Test Notification
</span>
<span class="cor-option" option-click="showWebhookInfo(notification)"
ng-if="getMethodInfo(notification).id == 'webhook'">
<i class="fa fa-book"></i>
Webhook Documentation
</span>
<span class="cor-option" option-click="deleteNotification(notification)">
<i class="fa fa-times"></i> Delete Notification
</span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- New notification dialog-->
<div class="create-external-notification-dialog"
repository="repository"
counter="showNewNotificationCounter"
notification-created="handleNotificationCreated(notification)"></div>
</div>

29
static/directives/repository-permissions-table.html
View file

@ -5,9 +5,9 @@
<table class="co-table permissions">
<thead>
<tr>
<td style="min-width: 400px;">Account Name</td>
<td>Permissions</td>
<td style="width: 95px;"></td>
<td>Account Name</td>
<td style="width: 300px">Permissions</td>
<td class="options-col"></td>
</tr>
</thead>
@ -21,8 +21,13 @@
<td class="user-permissions">
<span class="role-group" current-role="permission.role" role-changed="setRole(role, name, 'team')" roles="roles"></span>
</td>
<td>
<span class="delete-ui" delete-title="'Delete Permission'" perform-delete="deleteRole(name, 'team')"></span>
<td class="options-col">
<span class="cor-options-menu">
<span class="cor-option" option-click="deleteRole(name, 'team')">
<i class="fa fa-times"></i> Delete Permission
</span>
</span>
</td>
</tr>
@ -38,8 +43,12 @@
<span class="role-group" current-role="permission.role" role-changed="setRole(role, name, 'user')" roles="roles"></span>
</div>
</td>
<td>
<span class="delete-ui" delete-title="'Delete Permission'" perform-delete="deleteRole(name, 'user')"></span>
<td class="options-col">
<span class="cor-options-menu">
<span class="cor-option" option-click="deleteRole(name, 'user')">
<i class="fa fa-times"></i> Delete Permission
</span>
</span>
</td>
</tr>
@ -49,12 +58,10 @@
placeholder="'Select a ' + (repository.is_organization ? 'team or ' : '') + 'user...'"
current-entity="addPermissionInfo.entity"></span>
</td>
<td>
<td colspan="2">
<span class="role-group" current-role="addPermissionInfo.role" roles="roles"
role-changed="addPermissionInfo.role = role"></span>
</td>
<td>
<button class="btn btn-success"
<button class="btn btn-success" style="margin-left: 10px"
ng-disabled="!addPermissionInfo.role || !addPermissionInfo.entity"
ng-click="addPermission()">
Add Permission

35
static/directives/repository-tokens-table.html Normal file
View file

@ -0,0 +1,35 @@
<div class="repository-tokens-table-element">
<div class="resource-view" resource="tokensResource"
error-message="'Could not load repository tokens'">
<div class="alert alert-warning">Note: Access tokens are <strong>deprecated</strong> and will be removed in the near future. <a href="http://docs.quay.io/glossary/robot-accounts.html">Robot accounts</a> are the recommended replacement.
</div>
<table class="co-table permissions">
<thead>
<tr>
<td style="min-width: 400px;">Token Name</td>
<td>Permissions</td>
<td style="width: 95px;"></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="(code, token) in tokens">
<td class="user token">
<i class="fa fa-key"></i>
<a ng-click="showToken(token.code)">{{ token.friendlyName }}</a>
</td>
<td class="user-permissions">
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default" ng-click="changeTokenAccess(token.code, 'read')" ng-class="{read: 'active', write: ''}[token.role]">Read only</button>
<button type="button" class="btn btn-default" ng-click="changeTokenAccess(token.code, 'write')" ng-class="{read: '', write: 'active'}[token.role]">Write</button>
</div>
</td>
<td>
<span class="delete-ui" delete-title="'Delete Token'" perform-delete="deleteToken(token.code)"></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>

67
static/js/directives/repo-view/repo-panel-settings.js
View file

@ -11,7 +11,72 @@ angular.module('quay').directive('repoPanelSettings', function () {
scope: {
'repository': '=repository'
},
controller: function($scope, $element, ApiService) {
controller: function($scope, $element, ApiService, Config) {
$scope.getBadgeFormat = function(format, repository) {
if (!repository) { return ''; }
var imageUrl = Config.getUrl('/repository/' + repository.namespace + '/' + repository.name + '/status');
if (!$scope.repository.is_public) {
imageUrl += '?token=' + repository.status_token;
}
var linkUrl = Config.getUrl('/repository/' + repository.namespace + '/' + repository.name);
switch (format) {
case 'svg':
return imageUrl;
case 'md':
return '[![Docker Repository on ' + Config.REGISTRY_TITLE_SHORT + '](' + imageUrl +
' "Docker Repository on ' + Config.REGISTRY_TITLE_SHORT + '")](' + linkUrl + ')';
case 'asciidoc':
return 'image:' + imageUrl + '["Docker Repository on ' + Config.REGISTRY_TITLE_SHORT + '", link="' + linkUrl + '"]';
}
return '';
};
$scope.askDelete = function() {
bootbox.confirm('Are you sure you want delete this repository?', function(r) {
if (!r) { return; }
$scope.deleteRepo();
});
};
$scope.deleteRepo = function() {
var params = {
'repository': $scope.repository.namespace + '/' + $scope.repository.name
};
ApiService.deleteRepository(null, params).then(function() {
setTimeout(function() {
document.location = '/repository/';
}, 100);
}, ApiService.errorDisplay('Could not delete repository'));
};
$scope.askChangeAccess = function(newAccess) {
bootbox.confirm('Are you sure you want to make this repository ' + newAccess + '?', function(r) {
if (!r) { return; }
$scope.changeAccess(newAccess);
});
};
$scope.changeAccess = function(newAccess) {
var visibility = {
'visibility': newAccess
};
var params = {
'repository': $scope.repository.namespace + '/' + $scope.repository.name
};
ApiService.changeRepoVisibility(visibility, params).then(function() {
$scope.repository.is_public = newAccess == 'public';
}, ApiService.errorDisplay('Could not change repository visibility'));
};
}
};
return directiveDefinitionObject;

2
static/js/directives/ui/external-notification-view.js
View file

@ -1,5 +1,5 @@
/**
* An element which displays controls and information about a defined external notification on
* DEPRECATED: An element which displays controls and information about a defined external notification on
* a repository.
*/
angular.module('quay').directive('externalNotificationView', function () {

91
static/js/directives/ui/repository-events-table.js Normal file
View file

@ -0,0 +1,91 @@
/**
* An element which displays a table of events on a repository and allows them to be
* edited.
*/
angular.module('quay').directive('repositoryEventsTable', function () {
var directiveDefinitionObject = {
priority: 0,
templateUrl: '/static/directives/repository-events-table.html',
replace: false,
transclude: true,
restrict: 'C',
scope: {
'repository': '=repository'
},
controller: function($scope, $element, ApiService, Restangular, UtilService, ExternalNotificationData) {
$scope.showNewNotificationCounter = 0;
var loadNotifications = function() {
if (!$scope.repository || $scope.notificationsResource) { return; }
var params = {
'repository': $scope.repository.namespace + '/' + $scope.repository.name
};
$scope.notificationsResource = ApiService.listRepoNotificationsAsResource(params).get(
function(resp) {
$scope.notifications = resp.notifications;
return $scope.notifications;
});
};
$scope.$watch('repository', loadNotifications);
loadNotifications();
$scope.handleNotificationCreated = function(notification) {
$scope.notifications.push(notification);
};
$scope.askCreateNotification = function() {
$scope.showNewNotificationCounter++;
};
$scope.getEventInfo = function(notification) {
return ExternalNotificationData.getEventInfo(notification.event);
};
$scope.getMethodInfo = function(notification) {
return ExternalNotificationData.getMethodInfo(notification.method);
};
$scope.deleteNotification = function(notification) {
var params = {
'repository': $scope.repository.namespace + '/' + $scope.repository.name,
'uuid': notification.uuid
};
ApiService.deleteRepoNotification(null, params).then(function() {
var index = $.inArray(notification, $scope.notifications);
if (index < 0) { return; }
$scope.notifications.splice(index, 1);
}, ApiService.errorDisplay('Cannot delete notification'));
};
$scope.showWebhookInfo = function(notification) {
var eventId = notification.event;
document.location = 'http://docs.quay.io/guides/notifications.html#webhook_' + eventId;
};
$scope.testNotification = function(notification) {
var params = {
'repository': $scope.repository.namespace + '/' + $scope.repository.name,
'uuid': notification.uuid
};
ApiService.testRepoNotification(null, params).then(function() {
bootbox.dialog({
"title": "Test Notification Queued",
"message": "A test version of this notification has been queued and should appear shortly",
"buttons": {
"close": {
"label": "Close",
"className": "btn-primary"
}
}
});
}, ApiService.errorDisplay('Could not issue test notification'));
};
}
};
return directiveDefinitionObject;
});

68
static/js/directives/ui/repository-tokens-table.js Normal file
View file

@ -0,0 +1,68 @@
/**
* An element which displays a table of tokens on a repository and allows them to be
* edited.
*/
angular.module('quay').directive('repositoryTokensTable', function () {
var directiveDefinitionObject = {
priority: 0,
templateUrl: '/static/directives/repository-tokens-table.html',
replace: false,
transclude: true,
restrict: 'C',
scope: {
'repository': '=repository',
'hasTokens': '=hasTokens'
},
controller: function($scope, $element, ApiService, Restangular, UtilService) {
$scope.roles = [
{ 'id': 'read', 'title': 'Read', 'kind': 'success' },
{ 'id': 'write', 'title': 'Write', 'kind': 'success' },
{ 'id': 'admin', 'title': 'Admin', 'kind': 'primary' }
];
$scope.hasTokens = false;
var loadTokens = function() {
if (!$scope.repository || $scope.tokensResource) { return; }
var params = {
'repository': $scope.repository.namespace + '/' + $scope.repository.name
};
$scope.tokensResource = ApiService.listRepoTokensAsResource(params).get(function(resp) {
$scope.tokens = resp.tokens;
$scope.hasTokens = Object.keys($scope.tokens).length >= 1;
}, ApiService.errorDisplay('Could not load access tokens'));
};
$scope.$watch('repository', loadTokens);
loadTokens();
$scope.deleteToken = function(tokenCode) {
var params = {
'repository': $scope.repository.namespace + '/' + $scope.repository.name,
'code': tokenCode
};
ApiService.deleteToken(null, params).then(function() {
delete $scope.tokens[tokenCode];
});
};
$scope.changeTokenAccess = function(tokenCode, newAccess) {
var role = {
'role': newAccess
};
var params = {
'repository': $scope.repository.namespace + '/' + $scope.repository.name,
'code': tokenCode
};
ApiService.changeToken(role, params).then(function(updated) {
$scope.tokens[updated.code] = updated;
});
};
}
};
return directiveDefinitionObject;
});