From d1fdc31549804336d58c022c9f205b8a83b2eff2 Mon Sep 17 00:00:00 2001 From: Joseph Schorr Date: Mon, 24 Feb 2014 20:36:54 -0500 Subject: [PATCH] - Add a dropdown-select directive and use it in the git trigger setup dialog both times - Add a dropdown-select for the docker file folder - Add an API method for listing the build source sub directories --- endpoints/api.py | 35 ++- static/css/quay.css | 37 ++- static/directives/dropdown-select-icon.html | 1 + static/directives/dropdown-select-menu.html | 1 + static/directives/dropdown-select.html | 13 ++ static/directives/trigger-setup-github.html | 61 +++-- static/js/app.js | 241 ++++++++++++++++---- templates/base.html | 1 + 8 files changed, 331 insertions(+), 59 deletions(-) create mode 100644 static/directives/dropdown-select-icon.html create mode 100644 static/directives/dropdown-select-menu.html create mode 100644 static/directives/dropdown-select.html diff --git a/endpoints/api.py b/endpoints/api.py index 877a14384..01eab914d 100644 --- a/endpoints/api.py +++ b/endpoints/api.py @@ -29,7 +29,7 @@ from auth.permissions import (ReadRepositoryPermission, ViewTeamPermission, UserPermission) from endpoints.common import common_login, get_route_data, truthy_param -from endpoints.trigger import BuildTrigger, TriggerActivationException +from endpoints.trigger import BuildTrigger, TriggerActivationException, EmptyRepositoryException from util.cache import cache_control from datetime import datetime, timedelta @@ -1369,6 +1369,39 @@ def _prepare_webhook_url(scheme, username, password, hostname, path): return urlparse.urlunparse((scheme, auth_hostname, path, '', '', '')) +@api.route('/repository//trigger//subdir', + methods=['POST']) +@api_login_required +@parse_repository_name +def list_build_trigger_subdirs(namespace, repository, trigger_uuid): + permission = AdministerRepositoryPermission(namespace, repository) + if permission.can(): + try: + trigger = model.get_build_trigger(namespace, repository, trigger_uuid) + except model.InvalidBuildTriggerException: + abort(404) + return + + handler = BuildTrigger.get_trigger_for_service(trigger.service.name) + user_permission = UserPermission(trigger.connected_user.username) + if user_permission.can(): + new_config_dict = request.get_json() + + try: + subdirs = handler.list_build_subdirs(trigger.auth_token, new_config_dict) + return jsonify({ + 'subdir': subdirs, + 'status': 'success' + }) + except EmptyRepositoryException as e: + return jsonify({ + 'status': 'error', + 'message': e.msg + }) + + abort(403) # Permission denied + + @api.route('/repository//trigger//activate', methods=['POST']) @api_login_required diff --git a/static/css/quay.css b/static/css/quay.css index c1d8aa8c6..d2861cc0e 100644 --- a/static/css/quay.css +++ b/static/css/quay.css @@ -3254,18 +3254,31 @@ pre.command:before { position: relative; } -.dropdown-select .dropdown-icon { +.dropdown-select .dropdown-select-icon { position: absolute; top: 6px; left: 6px; z-index: 2; + display: none; } -.dropdown-select .dropdown-icon.none-icon { +.dropdown-select .dropdown-select-icon.fa { top: 10px; left: 8px; font-size: 20px; +} + +.dropdown-select .dropdown-select-icon.none-icon { color: #ccc; + display: inline; +} + +.dropdown-select.has-item .dropdown-select-icon { + display: inline; +} + +.dropdown-select.has-item .dropdown-select-icon.none-icon { + display: none; } .dropdown-select .lookahead-input { @@ -3304,4 +3317,24 @@ pre.command:before { .trigger-setup-github-element li.github-org-header { padding-left: 6px; +} + +.slideinout { + -webkit-transition:0.5s all; + transition:0.5s linear all; + opacity: 1; + + position: relative; + + height: 100px; + opacity: 1; +} + +.slideinout.ng-hide { + opacity: 0; + height: 0px; +} + +.slideinout.ng-hide-add, .slideinout.ng-hide-remove { + display: block !important; } \ No newline at end of file diff --git a/static/directives/dropdown-select-icon.html b/static/directives/dropdown-select-icon.html new file mode 100644 index 000000000..8fc5d79b6 --- /dev/null +++ b/static/directives/dropdown-select-icon.html @@ -0,0 +1 @@ + diff --git a/static/directives/dropdown-select-menu.html b/static/directives/dropdown-select-menu.html new file mode 100644 index 000000000..4d6c453f0 --- /dev/null +++ b/static/directives/dropdown-select-menu.html @@ -0,0 +1 @@ +
    diff --git a/static/directives/dropdown-select.html b/static/directives/dropdown-select.html new file mode 100644 index 000000000..d24cd531e --- /dev/null +++ b/static/directives/dropdown-select.html @@ -0,0 +1,13 @@ +
    +
    +
    + +
    +
    + +
    +
    +
    +
    diff --git a/static/directives/trigger-setup-github.html b/static/directives/trigger-setup-github.html index 02f44498b..d7c4b73f2 100644 --- a/static/directives/trigger-setup-github.html +++ b/static/directives/trigger-setup-github.html @@ -5,26 +5,53 @@
    Please choose the GitHub repository that will trigger the build:
    + + +
    + + + + + + +
    -
    -
    - - - + +
    +
    Dockerfile Location:
    +
    + + + + + +
    -
    - -
    +
    diff --git a/static/js/app.js b/static/js/app.js index 7f3119c36..56c57780d 100644 --- a/static/js/app.js +++ b/static/js/app.js @@ -102,7 +102,7 @@ function getMarkedDown(string) { return Markdown.getSanitizingConverter().makeHtml(string || ''); } -quayApp = angular.module('quay', ['ngRoute', 'chieffancypants.loadingBar', 'angular-tour', 'restangular', 'angularMoment', 'angulartics', /*'angulartics.google.analytics',*/ 'angulartics.mixpanel', '$strap.directives', 'ngCookies', 'ngSanitize', 'angular-md5', 'pasvaz.bindonce', 'ansiToHtml'], function($provide, cfpLoadingBarProvider) { +quayApp = angular.module('quay', ['ngRoute', 'chieffancypants.loadingBar', 'angular-tour', 'restangular', 'angularMoment', 'angulartics', /*'angulartics.google.analytics',*/ 'angulartics.mixpanel', '$strap.directives', 'ngCookies', 'ngSanitize', 'angular-md5', 'pasvaz.bindonce', 'ansiToHtml', 'ngAnimate'], function($provide, cfpLoadingBarProvider) { cfpLoadingBarProvider.includeSpinner = false; $provide.factory('UtilService', ['$sanitize', function($sanitize) { @@ -2544,6 +2544,139 @@ quayApp.directive('triggerDescription', function () { }); +quayApp.directive('dropdownSelect', function ($compile) { + var directiveDefinitionObject = { + priority: 0, + templateUrl: '/static/directives/dropdown-select.html', + replace: true, + transclude: true, + restrict: 'C', + scope: { + 'selectedItem': '=selectedItem', + 'enteredText': '=enteredText', + 'placeholder': '=placeholder', + 'lookaheadItems': '=lookaheadItems', + 'handleItemSelected': '&handleItemSelected', + 'handleInput': '&handleInput' + }, + controller: function($scope, $element, $rootScope) { + if (!$rootScope.__dropdownSelectCounter) { + $rootScope.__dropdownSelectCounter = 1; + } + + $scope.placeholder = $scope.placeholder || ''; + $scope.internalItem = null; + + // Setup lookahead. + var input = $($element).find('.lookahead-input'); + + $scope.$watch('selectedItem', function(item) { + if ($scope.selectedItem == $scope.internalItem) { + // The item has already been set due to an internal action. + return; + } + + if ($scope.selectedItem != null) { + $(input).val(item.toString()); + } else { + $(input).val(''); + } + }); + + $scope.$watch('lookaheadItems', function(items) { + $(input).off(); + if (!items) { + return; + } + + $(input).typeahead({ + name: 'dropdown-items-' + $rootScope.__dropdownSelectCounter, + local: items, + template: function (datum) { + template = datum['template'] ? datum['template'](datum) : datum['value']; + return template; + } + }); + + $(input).on('input', function(e) { + $scope.$apply(function() { + $scope.internalItem = null; + $scope.selectedItem = null; + if ($scope.handleInput) { + $scope.handleInput({'input': $(input).val()}); + } + }); + }); + + $(input).on('typeahead:selected', function(e, datum) { + $scope.$apply(function() { + $scope.internalItem = datum['item'] || datum['value']; + $scope.selectedItem = datum['item'] || datum['value']; + if ($scope.handleItemSelected) { + $scope.handleItemSelected({'datum': datum}); + } + }); + }); + + $rootScope.__dropdownSelectCounter++; + }); + }, + link: function(scope, element, attrs) { + var transcludedBlock = element.find('div.transcluded'); + var transcludedElements = transcludedBlock.children(); + + var iconContainer = element.find('div.dropdown-select-icon-transclude'); + var menuContainer = element.find('div.dropdown-select-menu-transclude'); + + angular.forEach(transcludedElements, function(elem) { + if (angular.element(elem).hasClass('dropdown-select-icon')) { + iconContainer.append(elem); + } else if (angular.element(elem).hasClass('dropdown-select-menu')) { + menuContainer.replaceWith(elem); + } + }); + + transcludedBlock.remove(); + } + }; + return directiveDefinitionObject; +}); + + +quayApp.directive('dropdownSelectIcon', function () { + var directiveDefinitionObject = { + priority: 1, + require: '^dropdownSelect', + templateUrl: '/static/directives/dropdown-select-icon.html', + replace: false, + transclude: false, + restrict: 'C', + scope: { + }, + controller: function($scope, $element) { + } + }; + return directiveDefinitionObject; +}); + + +quayApp.directive('dropdownSelectMenu', function () { + var directiveDefinitionObject = { + priority: 1, + require: '^dropdownSelect', + templateUrl: '/static/directives/dropdown-select-menu.html', + replace: true, + transclude: true, + restrict: 'C', + scope: { + }, + controller: function($scope, $element) { + } + }; + return directiveDefinitionObject; +}); + + quayApp.directive('triggerSetupGithub', function () { var directiveDefinitionObject = { priority: 0, @@ -2558,48 +2691,86 @@ quayApp.directive('triggerSetupGithub', function () { controller: function($scope, $element, ApiService) { $scope.setupReady = false; $scope.loading = true; - - var input = $($element).find('.lookahead-input'); - - $scope.clearSelectedRepo = function() { - $scope.currentRepo = null; - $scope.trigger.$ready = false; + + $scope.setLocation = function(location) { + $scope.currentLocation = location; + $scope.trigger['config']['subdir'] = location || ''; }; - + $scope.selectRepo = function(repo, org) { - $(input).val(repo); - $scope.selectRepoInternal(repo, org); - }; - - $scope.selectRepoInternal = function(repo, org) { $scope.currentRepo = { - 'name': repo, - 'avatar_url': org['info']['avatar_url'] + 'repo': repo, + 'avatar_url': org['info']['avatar_url'], + 'toString': function() { + return this.repo; + } }; - $scope.trigger['config'] = { - 'build_source': repo - }; - $scope.trigger.$ready = true; }; - var setupTypeahead = function() { + $scope.selectRepoInternal = function(currentRepo) { + if (!currentRepo) { + $scope.trigger.$ready = false; + return; + } + + var params = { + 'repository': $scope.repository.namespace + '/' + $scope.repository.name, + 'trigger_uuid': $scope.trigger['id'] + }; + + var repo = currentRepo['repo']; + $scope.trigger['config'] = { + 'build_source': repo, + 'subdir': '' + }; + + // Lookup the possible Dockerfile locations. + $scope.locations = null; + if (repo) { + ApiService.listBuildTriggerSubdirs($scope.trigger['config'], params).then(function(resp) { + if (resp['status'] == 'error') { + $scope.locationError = resp['message'] || 'Could not load Dockerfile locations'; + $scope.locations = null; + $scope.trigger.$ready = false; + return; + } + + $scope.locationError = null; + $scope.locations = resp['subdir'] || []; + $scope.trigger.$ready = true; + }, function(resp) { + $scope.locationError = resp['message'] || 'Could not load Dockerfile locations'; + $scope.locations = null; + $scope.trigger.$ready = false; + }); + } + }; + + var setupTypeahead = function() { var repos = []; for (var i = 0; i < $scope.orgs.length; ++i) { var org = $scope.orgs[i]; var orepos = org['repos']; for (var j = 0; j < orepos.length; ++j) { - repos.push({'name': orepos[j], 'org': org, 'value': orepos[j]}); + var repoValue = { + 'repo': orepos[j], + 'avatar_url': org['info']['avatar_url'], + 'toString': function() { + return this.repo; + } + }; + var datum = { + 'name': orepos[j], + 'org': org, + 'value': orepos[j], + 'title': orepos[j], + 'item': repoValue + }; + repos.push(datum); } } - $(input).typeahead({ - name: 'repos-' + $scope.trigger.id, - local: repos, - template: function (datum) { - template = datum['name']; - return template; - } - }); + $scope.repoLookahead = repos; }; var loadSources = function() { @@ -2617,16 +2788,8 @@ quayApp.directive('triggerSetupGithub', function () { loadSources(); - $(input).on('input', function(e) { - $scope.$apply(function() { - $scope.clearSelectedRepo(); - }); - }); - - $(input).on('typeahead:selected', function(e, datum) { - $scope.$apply(function() { - $scope.selectRepoInternal(datum.repo, datum.org); - }); + $scope.$watch('currentRepo', function(repo) { + $scope.selectRepoInternal(repo); }); } }; diff --git a/templates/base.html b/templates/base.html index 151b6035c..767aeacde 100644 --- a/templates/base.html +++ b/templates/base.html @@ -42,6 +42,7 @@ +