converted ManageTriggerGithostComponent to TypeScript

This commit is contained in:
alecmerdler 2017-02-19 18:17:12 -08:00 committed by Joseph Schorr
parent 14222be9fe
commit b1516193a5
13 changed files with 238 additions and 665 deletions

View file

@ -1,333 +0,0 @@
<div class="manage-trigger-githost-element manage-trigger-control">
<div class="linear-workflow" workflow-state="currentState" done-title="Create Trigger"
workflow-complete="createTrigger()">
<!-- Section: Namespace -->
<div class="linear-workflow-section row"
section-id="namespace"
section-title="{{ 'Select ' + namespaceTitle }}"
section-valid="local.selectedNamespace">
<div class="col-lg-7 col-md-7 col-sm-12 main-col" ng-show="local.namespaces">
<h3>Select {{ namespaceTitle }}</h3>
<strong>
Please select the {{ namespaceTitle }} under which the repository lives
</strong>
<div class="co-top-bar">
<div class="co-filter-box">
<span class="page-controls" total-count="local.orderedNamespaces.entries.length" current-page="local.namespaceOptions.page" page-size="namespacesPerPage"></span>
<input class="form-control" type="text" ng-model="local.namespaceOptions.filter" placeholder="Filter {{ namespaceTitle }}s...">
</div>
</div>
<table class="co-table" style="margin-top: 20px;">
<thead>
<td class="checkbox-col"></td>
<td ng-class="TableService.tablePredicateClass('id', local.namespaceOptions.predicate, local.namespaceOptions.reverse)">
<a ng-click="TableService.orderBy('id', local.namespaceOptions)">{{ namespaceTitle }}</a>
</td>
<td ng-class="TableService.tablePredicateClass('score', local.namespaceOptions.predicate, local.namespaceOptions.reverse)"
class="importance-col hidden-xs">
<a ng-click="TableService.orderBy('score', local.namespaceOptions)">Importance</a>
</td>
</thead>
<tr class="co-checkable-row"
ng-repeat="namespace in local.orderedNamespaces.visibleEntries | slice:(namespacesPerPage * local.namespaceOptions.page):(namespacesPerPage * (local.namespaceOptions.page + 1))"
ng-class="local.selectedNamespace == namespace ? 'checked' : ''"
bindonce>
<td>
<input type="radio" ng-model="local.selectedNamespace" ng-value="namespace">
</td>
<td>
<img class="namespace-avatar" ng-src="{{ namespace.avatar_url }}">
<span class="anchor" href="{{ namespace.url }}" is-text-only="!namespace.url">{{ namespace.id }}</span>
</td>
<td class="importance-col hidden-xs">
<span class="strength-indicator" value="::namespace.score" maximum="::local.maxScore"
log-base="10"></span>
</td>
</tr>
</table>
<div class="empty" ng-if="local.namespaces.length && !local.orderedNamespaces.entries.length"
style="margin-top: 20px;">
<div class="empty-primary-msg">No matching {{ namespaceTitle }} found.</div>
<div class="empty-secondary-msg">Try expanding your filtering terms.</div>
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 main-col" ng-show="!local.namespaces">
<span class="cor-loader-inline"></span> Retrieving {{ namespaceTitle }}s
</div>
<div class="col-lg-4 col-md-4 hidden-sm hidden-xs help-col" ng-show="local.namespaces">
<p>
<span class="registry-name"></span> has been granted access to read and view these {{ namespaceTitle }}s.
</p>
<p>
Don't see an expected {{ namespaceTitle }} here? Please make sure third-party access is enabled for <span class="registry-name"></span> under that {{ namespaceTitle }}.
</p>
</div>
</div><!-- /Section: Namespace -->
<!-- Section: Repository -->
<div class="linear-workflow-section row"
section-id="repo"
section-title="Select Repository"
section-valid="local.selectedRepository">
<div class="col-lg-7 col-md-7 col-sm-12 main-col" ng-show="local.repositories">
<h3>Select Repository</h3>
<strong>
Select a repository in
<img class="namespace-avatar" ng-src="{{ local.selectedNamespace.avatar_url }}">
{{ local.selectedNamespace.id }}
</strong>
<div class="co-top-bar">
<div class="co-filter-box">
<span class="page-controls" total-count="local.orderedRepositories.entries.length" current-page="local.repositoryOptions.page" page-size="repositoriesPerPage"></span>
<input class="form-control" type="text" ng-model="local.repositoryOptions.filter" placeholder="Filter repositories...">
<div class="filter-options">
<label><input type="checkbox" ng-model="local.repositoryOptions.hideStale">Hide stale repositories</label>
</div>
</div>
</div>
<table class="co-table" style="margin-top: 20px;">
<thead>
<td class="checkbox-col"></td>
<td ng-class="TableService.tablePredicateClass('name', local.repositoryOptions.predicate, local.repositoryOptions.reverse)" class="nowrap-col">
<a ng-click="TableService.orderBy('name', local.repositoryOptions)">Repository Name</a>
</td>
<td ng-class="TableService.tablePredicateClass('last_updated_datetime', local.repositoryOptions.predicate, local.repositoryOptions.reverse)"
class="last-updated-col nowrap-col">
<a ng-click="TableService.orderBy('last_updated_datetime', local.namespaceOptions)">Last Updated</a>
</td>
<td class="hidden-xs">Description</td>
</thead>
<tr class="co-checkable-row"
ng-repeat="repository in local.orderedRepositories.visibleEntries | slice:(repositoriesPerPage * local.repositoryOptions.page):(repositoriesPerPage * (local.repositoryOptions.page + 1))"
ng-class="local.selectedRepository == repository ? 'checked' : ''"
bindonce>
<td>
<span ng-if="!repository.has_admin_permissions">
<i class="fa fa-exclamation-triangle"
data-title="Admin access is required to add the webhook trigger to this repository" bs-tooltip></i>
</span>
<input type="radio" ng-model="local.selectedRepository" ng-value="repository"
ng-if="repository.has_admin_permissions">
</td>
<td class="nowrap-col">
<i class="service-icon fa {{ getTriggerIcon() }}"></i>
<span class="anchor" href="{{ repository.url }}" is-text-only="!repository.url">{{ repository.name }}</span>
</td>
<td class="last-updated-col nowrap-col">
<span am-time-ago="repository.last_updated_datetime"></span>
</td>
<td class="hidden-xs">
<span ng-if="repository.description">{{ repository.description }}</span>
<span class="empty-description" ng-if="!repository.description">(None)</span>
</td>
</tr>
</table>
<div class="empty" ng-if="local.repositories.length && !local.orderedRepositories.entries.length"
style="margin-top: 20px;">
<div class="empty-primary-msg">No matching repositories found.</div>
<div class="empty-secondary-msg">Try expanding your filtering terms.</div>
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 main-col" ng-show="!local.repositories">
<span class="cor-loader-inline"></span> Retrieving repositories
</div>
<div class="col-lg-4 col-md-4 hidden-sm hidden-xs help-col" ng-show="local.repositories">
<p>
A webhook will be added to the selected repository in order to detect when new commits are made.
</p>
<p>
Don't see an expected repository here? Please make sure you have admin access on that repository.
</p>
</div>
</div><!-- /Section: Repository -->
<!-- Section: Trigger Options -->
<div class="linear-workflow-section row"
section-id="triggeroptions"
section-title="Configure Trigger"
section-valid="local.triggerOptions">
<div class="col-lg-7 col-md-7 col-sm-12 main-col" ng-show="local.repositoryRefs">
<h3>Configure Trigger</h3>
<strong>
Configure trigger options for
<img class="namespace-avatar" ng-src="{{ local.selectedNamespace.avatar_url }}">
{{ local.selectedNamespace.id }}/{{ local.selectedRepository.name }}
</strong>
<div class="radio" style="margin-top: 20px;">
<label>
<input type="radio" name="optionRadio" ng-model="local.triggerOptions.hasBranchTagFilter" ng-value="false">
<div class="title">Trigger for all branches and tags <span class="weak">(default)</span></div>
<div class="description">Build a container image for each commit across all branches and tags</div>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionRadio" ng-model="local.triggerOptions.hasBranchTagFilter" ng-value="true">
<div class="title">Trigger only on branches and tags matching a regular expression</div>
<div class="description">Only build container images for a subset of branches and/or tags.</div>
<div class="extended" ng-if="local.triggerOptions.hasBranchTagFilter">
<table>
<tr>
<td style="white-space: nowrap;">Regular Expression:</td>
<td>
<input type="text" class="form-control" ng-model="local.triggerOptions.branchTagFilter" required>
<div class="description">Examples: heads/master, tags/tagname, heads/.+</div>
<regex-match-view
items="local.repositoryFullRefs"
regex="local.triggerOptions.branchTagFilter"
ng-if="local.triggerOptions.branchTagFilter"></regex-match-view>
</td>
</tr>
</table>
</div>
</label>
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 main-col" ng-show="!local.repositoryRefs">
<span class="cor-loader-inline"></span> Retrieving repository refs
</div>
<div class="col-lg-4 col-md-4 hidden-sm hidden-xs help-col">
<p>Do you want to build a new container image for commits across all branches and tags, or limit to a subset?</p>
<p>For example, if you use release branches instead of <code>master</code> for building versions of your software, you can configure the trigger to only build images for these branches.</p>
<p>All images built will be tagged with the name of the branch or tag whose change invoked the trigger</p>
</div>
</div><!-- /Section: Trigger Options -->
<!-- Section: Dockerfile Location -->
<div class="linear-workflow-section row"
section-id="dockerfilelocation"
section-title="Select Dockerfile"
section-valid="local.hasValidDockerfilePath">
<div class="col-lg-7 col-md-7 col-sm-12 main-col" ng-show="local.dockerfileLocations.status == 'error'">
<div class="co-alert co-alert-warning">
{{ local.dockerfileLocations.message }}
</div>
</div>
<div class="col-lg-7 col-md-7 col-sm-12 main-col" ng-show="local.dockerfileLocations.status == 'success'">
<h3>Select Dockerfile</h3>
<strong>
Please select the location of the Dockerfile to build when this trigger is invoked {{ local.paths }}
</strong>
<dockerfile-path-select
current-path="local.dockerfilePath"
paths="local.dockerfileLocations.subdir"
supports-full-listing="true"
is-valid-path="local.hasValidDockerfilePath"></dockerfile-path-select>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 main-col" ng-show="!local.dockerfileLocations">
<span class="cor-loader-inline"></span> Retrieving Dockerfile locations
</div>
<div class="col-lg-4 col-md-4 hidden-sm hidden-xs help-col">
<p>Please select the location containing the Dockerfile to be built.</p>
<p>The build context will start at the location selected.</p>
</div>
</div><!-- /Section: Dockerfile Location -->
<!-- Section: Verification and Robot Account -->
<div class="linear-workflow-section row"
section-id="verification"
section-title="Confirm"
section-valid="local.triggerAnalysis.status != 'error' && (local.triggerAnalysis.status != 'requiresrobot' || local.robotAccount != null)">
<!-- Error -->
<div class="col-lg-7 col-md-7 col-sm-12 main-col" ng-show="local.triggerAnalysis.status == 'error'">
<h3 class="error"><i class="fa fa-exclamation-circle"></i> Verification Error</h3>
<strong>
There was an error when verifying the state of <img class="namespace-avatar" ng-src="{{ local.selectedNamespace.avatar_url }}">
{{ local.selectedNamespace.id }}/{{ local.selectedRepository.name }}
</strong>
{{ local.triggerAnalysis.message }}
</div>
<!-- Warning -->
<div class="col-lg-7 col-md-7 col-sm-12 main-col" ng-show="local.triggerAnalysis.status == 'warning'">
<h3 class="warning"><i class="fa fa-exclamation-triangle"></i> Verification Warning</h3>
{{ local.triggerAnalysis.message }}
</div>
<!-- Public base -->
<div class="col-lg-7 col-md-7 col-sm-12 main-col" ng-show="local.triggerAnalysis.status == 'publicbase'">
<h3 class="success"><i class="fa fa-check-circle"></i> Ready to go!</h3>
<strong>Click "Create Trigger" to complete setup of this build trigger</strong>
</div>
<!-- Requires robot and is not admin -->
<div class="col-lg-7 col-md-7 col-sm-12 main-col" ng-show="local.triggerAnalysis.status == 'requiresrobot' && !local.triggerAnalysis.is_admin">
<h3>Robot Account Required</h3>
<p>The selected Dockerfile in the selected repository depends upon a private base image</p>
<p>A robot account with access to the base image is required to setup this trigger, but you are not the administrator of this namespace.</p>
<p>Administrative access is required to continue to ensure security of the robot credentials.</p>
</div>
<!-- Requires robot and is admin -->
<div class="col-lg-7 col-md-7 col-sm-12 main-col" ng-show="local.triggerAnalysis.status == 'requiresrobot' && local.triggerAnalysis.is_admin">
<h3>Select Robot Account</h3>
<strong>
The selected Dockerfile in the selected repository depends upon a private base image. Select a robot account with access:
</strong>
<div class="co-top-bar">
<div class="co-filter-box">
<span class="page-controls" total-count="local.orderedRobotAccounts.entries.length" current-page="local.robotOptions.page" page-size="robotsPerPage"></span>
<input class="form-control" type="text" ng-model="local.robotOptions.filter" placeholder="Filter robot accounts...">
</div>
</div>
<table class="co-table" style="margin-top: 20px;">
<thead>
<td class="checkbox-col"></td>
<td ng-class="TableService.tablePredicateClass('name', local.robotOptions.predicate, local.robotOptions.reverse)">
<a ng-click="TableService.orderBy('name', local.robotOptions)">Robot Account</a>
</td>
<td ng-class="TableService.tablePredicateClass('can_read', local.robotOptions.predicate, local.robotOptions.reverse)">
<a ng-click="TableService.orderBy('can_read', local.robotOptions)">Has Read Access</a>
</td>
</thead>
<tr class="co-checkable-row"
ng-repeat="robot in local.orderedRobotAccounts.visibleEntries | slice:(robotsPerPage * local.namespaceOptions.page):(robotsPerPage * (local.robotOptions.page + 1))"
ng-class="local.robotAccount == robot ? 'checked' : ''"
bindonce>
<td>
<input type="radio" ng-model="local.robotAccount" ng-value="robot">
</td>
<td>
<span class="entity-reference" entity="robot"></span>
</td>
<td>
<span ng-if="robot.can_read" class="success">Can Read</span>
<span ng-if="!robot.can_read">Read access will be added if selected</span>
</td>
</tr>
</table>
<div class="empty" ng-if="local.triggerAnalysis.robots.length && !local.orderedRobotAccounts.entries.length"
style="margin-top: 20px;">
<div class="empty-primary-msg">No matching robot accounts found.</div>
<div class="empty-secondary-msg">Try expanding your filtering terms.</div>
</div>
</div>
<div class="col-lg-4 col-md-4 hidden-sm hidden-xs help-col" ng-if="local.triggerAnalysis.status == 'requiresrobot' && local.triggerAnalysis.is_admin">
<p>The Dockerfile you selected utilizes a private base image.</p>
<p>In order for the <span class="registry-name"></span> to pull the base image during the build process, a robot account with access must be selected.</p>
<p>Robot accounts that already have access to this base image are listed first. If you select a robot account that does not currently have access, read permission will be granted to that robot account on trigger creation.</p>
</div>
</div><!-- /Section: Robot Account -->
</div>

View file

@ -1,306 +0,0 @@
/**
* An element which displays the setup and management workflow for a normal SCM git trigger.
*/
angular.module('quay').directive('manageTriggerGithost', function () {
var directiveDefinitionObject = {
priority: 0,
templateUrl: '/static/directives/manage-trigger-githost.html',
replace: false,
transclude: true,
restrict: 'C',
scope: {
'repository': '=repository',
'trigger': '=trigger',
'activateTrigger': '&activateTrigger'
},
controller: function($scope, $element, ApiService, TableService, TriggerService, RolesService) {
$scope.TableService = TableService;
$scope.config = {};
$scope.local = {};
$scope.currentState = null;
$scope.namespacesPerPage = 10;
$scope.repositoriesPerPage = 10;
$scope.robotsPerPage = 10;
$scope.local.namespaceOptions = {
'filter': '',
'predicate': 'score',
'reverse': false,
'page': 0
};
$scope.local.repositoryOptions = {
'filter': '',
'predicate': 'last_updated',
'reverse': false,
'page': 0,
'hideStale': true
};
$scope.local.robotOptions = {
'filter': '',
'predicate': 'can_read',
'reverse': false,
'page': 0
};
$scope.getTriggerIcon = function() {
return TriggerService.getIcon($scope.trigger.service);
};
$scope.createTrigger = function() {
console.log($scope.local);
var config = {
'build_source': $scope.local.selectedRepository.full_name,
'subdir': $scope.local.dockerfilePath.substr(1) // Remove starting /
};
if ($scope.local.triggerOptions.hasBranchTagFilter &&
$scope.local.triggerOptions.branchTagFilter) {
config['branchtag_regex'] = $scope.local.triggerOptions.branchTagFilter;
}
var activate = function() {
$scope.activateTrigger({'config': config, 'pull_robot': $scope.local.robotAccount});
};
if ($scope.local.robotAccount) {
if ($scope.local.robotAccount.can_read) {
activate();
} else {
// Add read permission onto the base repository for the robot and then activate the
// trigger.
var robot_name = $scope.local.robotAccount.name;
RolesService.setRepositoryRole($scope.repository, 'read', 'robot', robot_name, activate);
}
} else {
activate();
}
};
var buildOrderedNamespaces = function() {
if (!$scope.local.namespaces) {
return;
}
var namespaces = $scope.local.namespaces || [];
$scope.local.orderedNamespaces = TableService.buildOrderedItems(namespaces,
$scope.local.namespaceOptions,
['id'],
['score'])
$scope.local.maxScore = 0;
namespaces.forEach(function(namespace) {
$scope.local.maxScore = Math.max(namespace.score, $scope.local.maxScore);
});
};
var loadNamespaces = function() {
$scope.local.namespaces = null;
$scope.local.selectedNamespace = null;
$scope.local.orderedNamespaces = null;
$scope.local.selectedRepository = null;
$scope.local.orderedRepositories = null;
var params = {
'repository': $scope.repository.namespace + '/' + $scope.repository.name,
'trigger_uuid': $scope.trigger.id
};
ApiService.listTriggerBuildSourceNamespaces(null, params).then(function(resp) {
$scope.local.namespaces = resp['namespaces'];
$scope.local.repositories = null;
buildOrderedNamespaces();
}, ApiService.errorDisplay('Could not retrieve the list of ' + $scope.namespaceTitle))
};
var buildOrderedRepositories = function() {
if (!$scope.local.repositories) {
return;
}
var repositories = $scope.local.repositories || [];
repositories.forEach(function(repository) {
repository['last_updated_datetime'] = new Date(repository['last_updated'] * 1000);
});
if ($scope.local.repositoryOptions.hideStale) {
var existingRepositories = repositories;
repositories = repositories.filter(function(repository) {
var older_date = moment(repository['last_updated_datetime']).add(1, 'months');
return !moment().isAfter(older_date);
});
if (existingRepositories.length > 0 && repositories.length == 0) {
repositories = existingRepositories;
}
}
$scope.local.orderedRepositories = TableService.buildOrderedItems(repositories,
$scope.local.repositoryOptions,
['name', 'description'],
[]);
};
var loadRepositories = function(namespace) {
$scope.local.repositories = null;
$scope.local.selectedRepository = null;
$scope.local.repositoryRefs = null;
$scope.local.triggerOptions = {
'hasBranchTagFilter': false
};
$scope.local.orderedRepositories = null;
var params = {
'repository': $scope.repository.namespace + '/' + $scope.repository.name,
'trigger_uuid': $scope.trigger.id
};
var data = {
'namespace': namespace.id
};
ApiService.listTriggerBuildSources(data, params).then(function(resp) {
if (namespace == $scope.local.selectedNamespace) {
$scope.local.repositories = resp['sources'];
buildOrderedRepositories();
}
}, ApiService.errorDisplay('Could not retrieve repositories'));
};
var loadRepositoryRefs = function(repository) {
$scope.local.repositoryRefs = null;
$scope.local.triggerOptions = {
'hasBranchTagFilter': false
};
var params = {
'repository': $scope.repository.namespace + '/' + $scope.repository.name,
'trigger_uuid': $scope.trigger.id,
'field_name': 'refs'
};
var config = {
'build_source': repository.full_name
};
ApiService.listTriggerFieldValues(config, params).then(function(resp) {
if (repository == $scope.local.selectedRepository) {
$scope.local.repositoryRefs = resp['values'];
$scope.local.repositoryFullRefs = resp['values'].map(function(ref) {
var kind = ref.kind == 'branch' ? 'heads' : 'tags';
var icon = ref.kind == 'branch' ? 'fa-code-fork' : 'fa-tag';
return {
'value': kind + '/' + ref.name,
'icon': icon,
'title': ref.name
};
});
}
}, ApiService.errorDisplay('Could not retrieve repository refs'));
};
var loadDockerfileLocations = function(repository) {
$scope.local.dockerfilePath = null;
var params = {
'repository': $scope.repository.namespace + '/' + $scope.repository.name,
'trigger_uuid': $scope.trigger.id
};
var config = {
'build_source': repository.full_name
};
ApiService.listBuildTriggerSubdirs(config, params).then(function(resp) {
if (repository == $scope.local.selectedRepository) {
$scope.local.dockerfileLocations = resp;
}
}, ApiService.errorDisplay('Could not retrieve Dockerfile locations'));
};
var buildOrderedRobotAccounts = function() {
if (!$scope.local.triggerAnalysis || !$scope.local.triggerAnalysis.robots) {
return;
}
var robots = $scope.local.triggerAnalysis.robots;
$scope.local.orderedRobotAccounts = TableService.buildOrderedItems(robots,
$scope.local.robotOptions,
['name'],
[]);
};
var checkDockerfilePath = function(repository, path) {
$scope.local.triggerAnalysis = null;
$scope.local.robotAccount = null;
var params = {
'repository': $scope.repository.namespace + '/' + $scope.repository.name,
'trigger_uuid': $scope.trigger.id
};
var config = {
'build_source': repository.full_name,
'subdir': path.substr(1)
};
var data = {
'config': config
};
ApiService.analyzeBuildTrigger(data, params).then(function(resp) {
$scope.local.triggerAnalysis = resp;
buildOrderedRobotAccounts();
}, ApiService.errorDisplay('Could not analyze trigger'));
};
$scope.$watch('trigger', function(trigger) {
if (trigger && $scope.repository) {
$scope.config = trigger['config'] || {};
$scope.namespaceTitle = 'organization';
$scope.local.selectedNamespace = null;
loadNamespaces();
}
});
$scope.$watch('local.selectedNamespace', function(namespace) {
if (namespace) {
loadRepositories(namespace);
}
});
$scope.$watch('local.selectedRepository', function(repository) {
if (repository) {
loadRepositoryRefs(repository);
loadDockerfileLocations(repository);
}
});
$scope.$watch('local.dockerfilePath', function(path) {
if (path && $scope.local.selectedRepository) {
checkDockerfilePath($scope.local.selectedRepository, path);
}
});
$scope.$watch('local.namespaceOptions.predicate', buildOrderedNamespaces);
$scope.$watch('local.namespaceOptions.reverse', buildOrderedNamespaces);
$scope.$watch('local.namespaceOptions.filter', buildOrderedNamespaces);
$scope.$watch('local.repositoryOptions.predicate', buildOrderedRepositories);
$scope.$watch('local.repositoryOptions.reverse', buildOrderedRepositories);
$scope.$watch('local.repositoryOptions.filter', buildOrderedRepositories);
$scope.$watch('local.repositoryOptions.hideStale', buildOrderedRepositories);
$scope.$watch('local.robotOptions.predicate', buildOrderedRobotAccounts);
$scope.$watch('local.robotOptions.reverse', buildOrderedRobotAccounts);
$scope.$watch('local.robotOptions.filter', buildOrderedRobotAccounts);
}
};
return directiveDefinitionObject;
});

View file

@ -8,7 +8,7 @@
<div class="linear-workflow-section row"
section-id="namespace"
section-title="{{ 'Select ' + $ctrl.namespaceTitle }}"
section-valid="local.selectedNamespace">
section-valid="$ctrl.local.selectedNamespace">
<div class="col-lg-7 col-md-7 col-sm-12 main-col" ng-show="$ctrl.local.namespaces">
<h3>Select {{ $ctrl.namespaceTitle }}</h3>
<strong>
@ -22,21 +22,21 @@
current-page="$ctrl.local.namespaceOptions.page"
page-size="$ctrl.namespacesPerPage"></span>
<input class="form-control" type="text"
ng-model="local.namespaceOptions.filter"
ng-model="$ctrl.local.namespaceOptions.filter"
placeholder="Filter {{ $ctrl.namespaceTitle }}s...">
</div>
</div>
<table class="co-table" style="margin-top: 20px;">
<thead>
<td class="checkbox-col"></td>
<td ng-class="$ctrl.TableService.tablePredicateClass('id', $ctrl.local.namespaceOptions.predicate, $ctrl.local.namespaceOptions.reverse)">
<a ng-click="$ctrl.TableService.orderBy('id', $ctrl.local.namespaceOptions)">{{ $ctrl.namespaceTitle }}</a>
</td>
<td ng-class="$ctrl.TableService.tablePredicateClass('score', $ctrl.local.namespaceOptions.predicate, $ctrl.local.namespaceOptions.reverse)"
class="importance-col hidden-xs">
<a ng-click="$ctrl.TableService.orderBy('score', $ctrl.local.namespaceOptions)">Importance</a>
</td>
<td class="checkbox-col"></td>
<td ng-class="$ctrl.TableService.tablePredicateClass('id', $ctrl.local.namespaceOptions.predicate, $ctrl.local.namespaceOptions.reverse)">
<a ng-click="$ctrl.TableService.orderBy('id', $ctrl.local.namespaceOptions)">{{ $ctrl.namespaceTitle }}</a>
</td>
<td ng-class="$ctrl.TableService.tablePredicateClass('score', $ctrl.local.namespaceOptions.predicate, $ctrl.local.namespaceOptions.reverse)"
class="importance-col hidden-xs">
<a ng-click="$ctrl.TableService.orderBy('score', $ctrl.local.namespaceOptions)">Importance</a>
</td>
</thead>
<tr class="co-checkable-row"
@ -46,14 +46,14 @@
<td>
<input type="radio"
ng-model="$ctrl.local.selectedNamespace"
ng-value="$ctrl.namespace">
ng-value="namespace">
</td>
<td>
<img class="namespace-avatar" ng-src="{{ $ctrl.namespace.avatar_url }}">
<span class="anchor" href="{{ $ctrl.namespace.url }}" is-text-only="!$ctrl.namespace.url">{{ $ctrl.namespace.id }}</span>
<img class="namespace-avatar" ng-src="{{ namespace.avatar_url }}">
<span class="anchor" href="{{ namespace.url }}" is-text-only="!namespace.url">{{ namespace.id }}</span>
</td>
<td class="importance-col hidden-xs">
<span class="strength-indicator" value="::$ctrl.namespace.score" maximum="::$ctrl.local.maxScore"
<span class="strength-indicator" value="::namespace.score" maximum="::$ctrl.local.maxScore"
log-base="10"></span>
</td>
</tr>
@ -133,7 +133,7 @@
<i class="fa fa-exclamation-triangle"
data-title="Admin access is required to add the webhook trigger to this repository" bs-tooltip></i>
</span>
<input type="radio" ng-model="local.selectedRepository" ng-value="repository"
<input type="radio" ng-model="$ctrl.local.selectedRepository" ng-value="repository"
ng-if="repository.has_admin_permissions">
</td>
<td class="nowrap-col">
@ -200,7 +200,7 @@
<tr>
<td style="white-space: nowrap;">Regular Expression:</td>
<td>
<input type="text" class="form-control" ng-model="local.triggerOptions.branchTagFilter" required>
<input type="text" class="form-control" ng-model="$ctrl.local.triggerOptions.branchTagFilter" required>
<div class="description">Examples: heads/master, tags/tagname, heads/.+</div>
<regex-match-view
items="$ctrl.local.repositoryFullRefs"
@ -238,7 +238,7 @@
<div class="col-lg-7 col-md-7 col-sm-12 main-col" ng-show="$ctrl.local.dockerfileLocations.status == 'success'">
<h3>Select Dockerfile</h3>
<strong>
Please select the location of the Dockerfile to build when this trigger is invoked {{ $ctrl.local.paths }}
Please select the location of the Dockerfile to build when this trigger is invoked
</strong>
<dockerfile-path-select

View file

@ -9,16 +9,22 @@ describe("ManageTriggerGithostComponent", () => {
var rolesServiceMock: any;
var repository: any;
var trigger: Trigger;
var $scope: ng.IScope;
beforeEach(() => {
beforeEach(inject(($injector: ng.auto.IInjectorService) => {
apiServiceMock = jasmine.createSpyObj('apiServiceMock', ['listTriggerBuildSourceNamespaces']);
tableServiceMock = jasmine.createSpyObj('tableServiceMock', ['buildOrderedItems']);
triggerServiceMock = jasmine.createSpyObj('triggerServiceMock', ['getIcon']);
rolesServiceMock = jasmine.createSpyObj('rolesServiceMock', ['setRepositoryRole']);
component = new ManageTriggerGithostComponent(apiServiceMock, tableServiceMock, triggerServiceMock, rolesServiceMock);
$scope = $injector.get('$rootScope');
component = new ManageTriggerGithostComponent(apiServiceMock,
tableServiceMock,
triggerServiceMock,
rolesServiceMock,
$scope);
trigger = {service: "serviceMock", id: 1};
component.trigger = trigger;
});
}));
describe("constructor", () => {

View file

@ -1,6 +1,10 @@
import { Input, Output, Component } from 'angular-ts-decorators';
import * as moment from 'moment';
/**
* A component that lets the user set up a build trigger for a public Git repository host service.
*/
@Component({
selector: 'manageTriggerGithost',
templateUrl: '/static/js/directives/ui/manage-trigger-githost/manage-trigger-githost.component.html'
@ -11,7 +15,7 @@ export class ManageTriggerGithostComponent implements ng.IComponentController {
@Input('=') public trigger: Trigger;
@Output() public activateTrigger: (trigger: {config: any, pull_robot: any}) => void;
private config: any;
private local: Local = {
private local: any = {
namespaceOptions: {
filter: '',
predicate: 'score',
@ -36,16 +40,65 @@ export class ManageTriggerGithostComponent implements ng.IComponentController {
private namespacesPerPage: number = 10;
private repositoriesPerPage: number = 10;
private robotsPerPage: number = 10;
private namespaceTitle: string;
private namespace: any;
constructor(private ApiService: any,
private TableService: any,
private TriggerService: any,
private RolesService: any) {
private RolesService: any,
private $scope: ng.IScope) {
// FIXME: Here binding methods to class context in order to pass them as arguments to $scope.$watch
this.buildOrderedNamespaces = this.buildOrderedNamespaces.bind(this);
this.loadNamespaces = this.loadNamespaces.bind(this);
this.buildOrderedRepositories = this.buildOrderedRepositories.bind(this);
this.loadRepositories = this.loadRepositories.bind(this);
this.loadRepositoryRefs = this.loadRepositoryRefs.bind(this);
this.buildOrderedRobotAccounts = this.buildOrderedRobotAccounts.bind(this);
this.loadDockerfileLocations = this.loadDockerfileLocations.bind(this);
this.checkDockerfilePath = this.checkDockerfilePath.bind(this);
}
public $onInit(): void {
// TODO: Replace $scope.$watch with @Output methods for child component mutations or $onChanges for parent mutations
this.$scope.$watch(() => this.trigger, (trigger) => {
if (trigger && this.repository) {
this.config = trigger['config'] || {};
this.namespaceTitle = 'organization';
this.local.selectedNamespace = null;
this.loadNamespaces();
}
});
this.$scope.$watch(() => this.local.selectedNamespace, (namespace) => {
if (namespace) {
this.loadRepositories(namespace);
}
});
this.$scope.$watch(() => this.local.selectedRepository, (repository) => {
if (repository) {
this.loadRepositoryRefs(repository);
this.loadDockerfileLocations(repository);
}
});
this.$scope.$watch(() => this.local.dockerfilePath, (path) => {
if (path && this.local.selectedRepository) {
this.checkDockerfilePath(this.local.selectedRepository, path);
}
});
this.$scope.$watch(() => this.local.namespaceOptions.predicate, this.buildOrderedNamespaces);
this.$scope.$watch(() => this.local.namespaceOptions.reverse, this.buildOrderedNamespaces);
this.$scope.$watch(() => this.local.namespaceOptions.filter, this.buildOrderedNamespaces);
this.$scope.$watch(() => this.local.repositoryOptions.predicate, this.buildOrderedRepositories);
this.$scope.$watch(() => this.local.repositoryOptions.reverse, this.buildOrderedRepositories);
this.$scope.$watch(() => this.local.repositoryOptions.filter, this.buildOrderedRepositories);
this.$scope.$watch(() => this.local.repositoryOptions.hideStale, this.buildOrderedRepositories);
this.$scope.$watch(() => this.local.robotOptions.predicate, this.buildOrderedRobotAccounts);
this.$scope.$watch(() => this.local.robotOptions.reverse, this.buildOrderedRobotAccounts);
this.$scope.$watch(() => this.local.robotOptions.filter, this.buildOrderedRobotAccounts);
}
public $onChanges(changes: ng.IOnChangesObject): void {
@ -86,35 +139,186 @@ export class ManageTriggerGithostComponent implements ng.IComponentController {
}
private buildOrderedNamespaces(): void {
if (!this.local.namespaces) {
return;
}
var namespaces = this.local.namespaces || [];
this.local.orderedNamespaces = this.TableService.buildOrderedItems(namespaces,
this.local.namespaceOptions,
['id'],
['score']);
this.local.maxScore = 0;
namespaces.forEach((namespace) => {
this.local.maxScore = Math.max(namespace.score, this.local.maxScore);
});
}
private loadNamespaces(): void {
this.local.namespaces = null;
this.local.selectedNamespace = null;
this.local.orderedNamespaces = null;
this.local.selectedRepository = null;
this.local.orderedRepositories = null;
var params = {
'repository': this.repository.namespace + '/' + this.repository.name,
'trigger_uuid': this.trigger.id
};
this.ApiService.listTriggerBuildSourceNamespaces(null, params)
.then((resp) => {
this.local.namespaces = resp['namespaces'];
this.local.repositories = null;
this.buildOrderedNamespaces();
}, this.ApiService.errorDisplay('Could not retrieve the list of ' + this.namespaceTitle));
}
private buildOrderedRepositories(): void {
if (!this.local.repositories) {
return;
}
var repositories = this.local.repositories || [];
repositories.forEach((repository) => {
repository['last_updated_datetime'] = new Date(repository['last_updated'] * 1000);
});
if (this.local.repositoryOptions.hideStale) {
var existingRepositories = repositories;
repositories = repositories.filter((repository) => {
var older_date = moment(repository['last_updated_datetime']).add(1, 'months');
return !moment().isAfter(older_date);
});
if (existingRepositories.length > 0 && repositories.length == 0) {
repositories = existingRepositories;
}
}
this.local.orderedRepositories = this.TableService.buildOrderedItems(repositories,
this.local.repositoryOptions,
['name', 'description'],
[]);
}
private loadRepositories(): void {
private loadRepositories(namespace: any): void {
this.local.repositories = null;
this.local.selectedRepository = null;
this.local.repositoryRefs = null;
this.local.triggerOptions = {
'hasBranchTagFilter': false
};
this.local.orderedRepositories = null;
var params = {
'repository': this.repository.namespace + '/' + this.repository.name,
'trigger_uuid': this.trigger.id
};
var data = {
'namespace': namespace.id
};
this.ApiService.listTriggerBuildSources(data, params).then((resp) => {
if (namespace == this.local.selectedNamespace) {
this.local.repositories = resp['sources'];
this.buildOrderedRepositories();
}
}, this.ApiService.errorDisplay('Could not retrieve repositories'));
}
private loadRepositoryRefs(repository: any): void {
this.local.repositoryRefs = null;
this.local.triggerOptions = {
'hasBranchTagFilter': false
};
var params = {
'repository': this.repository.namespace + '/' + this.repository.name,
'trigger_uuid': this.trigger.id,
'field_name': 'refs'
};
var config = {
'build_source': repository.full_name
};
this.ApiService.listTriggerFieldValues(config, params).then((resp) => {
if (repository == this.local.selectedRepository) {
this.local.repositoryRefs = resp['values'];
this.local.repositoryFullRefs = resp['values'].map((ref) => {
var kind = ref.kind == 'branch' ? 'heads' : 'tags';
var icon = ref.kind == 'branch' ? 'fa-code-fork' : 'fa-tag';
return {
'value': kind + '/' + ref.name,
'icon': icon,
'title': ref.name
};
});
}
}, this.ApiService.errorDisplay('Could not retrieve repository refs'));
}
private loadDockerfileLocations(repository: any): void {
this.local.dockerfilePath = null;
var params = {
'repository': this.repository.namespace + '/' + this.repository.name,
'trigger_uuid': this.trigger.id
};
var config = {
'build_source': repository.full_name
};
this.ApiService.listBuildTriggerSubdirs(config, params)
.then((resp) => {
if (repository == this.local.selectedRepository) {
this.local.dockerfileLocations = resp;
}
}, this.ApiService.errorDisplay('Could not retrieve Dockerfile locations'));
}
private buildOrderedRobotAccounts(): void {
if (!this.local.triggerAnalysis || !this.local.triggerAnalysis.robots) {
return;
}
var robots = this.local.triggerAnalysis.robots;
this.local.orderedRobotAccounts = this.TableService.buildOrderedItems(robots,
this.local.robotOptions,
['name'],
[]);
}
private checkDockerfilePath(repository: any, path: string): void {
this.local.triggerAnalysis = null;
this.local.robotAccount = null;
var params = {
'repository': this.repository.namespace + '/' + this.repository.name,
'trigger_uuid': this.trigger.id
};
var config = {
'build_source': repository.full_name,
'subdir': path.substr(1)
};
var data = {
'config': config
};
this.ApiService.analyzeBuildTrigger(data, params)
.then((resp) => {
this.local.triggerAnalysis = resp;
this.buildOrderedRobotAccounts();
}, this.ApiService.errorDisplay('Could not analyze trigger'));
}
}

View file

@ -51,8 +51,10 @@
<!-- Hosted Git (GitHub, Gitlab, BitBucket) -->
<div ng-switch-default>
<div class="manage-trigger-githost" trigger="trigger" repository="repository"
activate-trigger="activateTrigger(config, pull_robot)"></div>
<manage-trigger-githost
trigger="trigger"
repository="repository"
activate-trigger="activateTrigger(config, pull_robot)"></manage-trigger-githost>
</div> <!-- /hosted -->
</div> <!-- /ngSwitch -->

Binary file not shown.