moved component templates to separate files in order to support HTML syntax highlighting in certain editors
This commit is contained in:
alecmerdler
Joseph Schorr
parent
00b1f0e3cc
commit
39c18eb216
8 changed files with 93 additions and 159 deletions
|
|
@ -70,8 +70,9 @@ module.exports = function(grunt) {
|
|||
}
|
||||
},
|
||||
quay: {
|
||||
src: ['../static/partials/*.html', '../static/directives/*.html', '../static/directives/*.html'
|
||||
, '../static/directives/config/*.html', '../static/tutorial/*.html'],
|
||||
src: ['../static/partials/*.html', '../static/directives/*.html', '../static/directives/*.html',
|
||||
'../static/directives/config/*.html', '../static/tutorial/*.html',
|
||||
'../static/js/directives/ui/**/*.html'],
|
||||
dest: '../static/dist/template-cache.js'
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,37 @@
|
|||
<div class="dockerfile-path-select-element">
|
||||
<div class="dropdown-select" placeholder="'Enter path containing a Dockerfile'"
|
||||
selected-item="$ctrl.selectedPath"
|
||||
lookahead-items="$ctrl.paths"
|
||||
handle-input="$ctrl.setPath(input)"
|
||||
handle-item-selected="$ctrl.setSelectedPath(datum.value)"
|
||||
allow-custom-input="true"
|
||||
hide-dropdown="!$ctrl.supportsFullListing">
|
||||
<!-- Icons -->
|
||||
<i class="dropdown-select-icon none-icon fa fa-folder-o fa-lg"
|
||||
ng-show="$ctrl.isUnknownPath"></i>
|
||||
<i class="dropdown-select-icon none-icon fa fa-folder fa-lg" style="color: black;"
|
||||
ng-show="!$ctrl.isUnknownPath"></i>
|
||||
<i class="dropdown-select-icon fa fa-folder fa-lg"></i>
|
||||
|
||||
<!-- Dropdown menu -->
|
||||
<ul class="dropdown-select-menu pull-right" role="menu">
|
||||
<li ng-repeat="path in $ctrl.paths">
|
||||
<a ng-click="$ctrl.setSelectedPath(path)"
|
||||
ng-if="path">
|
||||
<i class="fa fa-folder fa-lg"></i> {{ path }}
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-header" role="presentation"
|
||||
ng-show="!$ctrl.paths.length">
|
||||
No Dockerfiles found in repository
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style="padding: 10px">
|
||||
<div class="co-alert co-alert-danger"
|
||||
ng-show="!$ctrl.isValidPath && $ctrl.currentPath">
|
||||
Path entered for folder containing Dockerfile is invalid: Must start with a '/'.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,47 +1,12 @@
|
|||
import { Input, Component } from 'angular-ts-decorators';
|
||||
|
||||
|
||||
/**
|
||||
* A component that allows the user to select the location of the Dockerfile in their source code repository.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'dockerfilePathSelect',
|
||||
template: `
|
||||
<div class="dockerfile-path-select-element">
|
||||
<div class="dropdown-select" placeholder="'Enter path containing a Dockerfile'"
|
||||
selected-item="$ctrl.selectedPath"
|
||||
lookahead-items="$ctrl.paths"
|
||||
handle-input="$ctrl.setPath(input)"
|
||||
handle-item-selected="$ctrl.setSelectedPath(datum.value)"
|
||||
allow-custom-input="true"
|
||||
hide-dropdown="!$ctrl.supportsFullListing">
|
||||
<!-- Icons -->
|
||||
<i class="dropdown-select-icon none-icon fa fa-folder-o fa-lg"
|
||||
ng-show="$ctrl.isUnknownPath"></i>
|
||||
<i class="dropdown-select-icon none-icon fa fa-folder fa-lg" style="color: black;"
|
||||
ng-show="!$ctrl.isUnknownPath"></i>
|
||||
<i class="dropdown-select-icon fa fa-folder fa-lg"></i>
|
||||
|
||||
<!-- Dropdown menu -->
|
||||
<ul class="dropdown-select-menu pull-right" role="menu">
|
||||
<li ng-repeat="path in $ctrl.paths">
|
||||
<a ng-click="$ctrl.setSelectedPath(path)"
|
||||
ng-if="path">
|
||||
<i class="fa fa-folder fa-lg"></i> {{ path }}
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-header" role="presentation"
|
||||
ng-show="!$ctrl.paths.length">
|
||||
No Dockerfiles found in repository
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style="padding: 10px">
|
||||
<div class="co-alert co-alert-danger"
|
||||
ng-show="!$ctrl.isValidPath && $ctrl.currentPath">
|
||||
Path entered for folder containing Dockerfile is invalid: Must start with a '/'.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
templateUrl: '/static/js/directives/ui/dockerfile-path-select/dockerfile-path-select.component.html'
|
||||
})
|
||||
export class DockerfilePathSelectComponent implements ng.IComponentController {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,27 +0,0 @@
|
|||
/**
|
||||
* An element which displays the setup and management workflow for a custom git trigger.
|
||||
*/
|
||||
angular.module('quay').directive('manageTriggerCustomGit', function () {
|
||||
var directiveDefinitionObject = {
|
||||
priority: 0,
|
||||
templateUrl: '/static/directives/manage-trigger-custom-git.html',
|
||||
replace: false,
|
||||
transclude: true,
|
||||
restrict: 'C',
|
||||
scope: {
|
||||
'trigger': '=trigger',
|
||||
'activateTrigger': '&activateTrigger'
|
||||
},
|
||||
controller: function($scope, $element) {
|
||||
$scope.config = {};
|
||||
$scope.currentState = null;
|
||||
|
||||
$scope.$watch('trigger', function(trigger) {
|
||||
if (trigger) {
|
||||
$scope.config = trigger['config'] || {};
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
return directiveDefinitionObject;
|
||||
});
|
||||
|
|
@ -1,11 +1,13 @@
|
|||
<div class="manage-trigger-custom-git-element manage-trigger-control">
|
||||
<div class="linear-workflow" workflow-state="currentState" done-title="Create Trigger"
|
||||
workflow-complete="activateTrigger({'config': config})">
|
||||
<div class="linear-workflow"
|
||||
workflow-state="$ctrl.currentState"
|
||||
done-title="Create Trigger"
|
||||
workflow-complete="$ctrl.activateTrigger({'config': $ctrl.config})">
|
||||
<!-- Section: Repository -->
|
||||
<div class="linear-workflow-section row"
|
||||
section-id="repo"
|
||||
section-title="Git Repository"
|
||||
section-valid="config.build_source">
|
||||
section-valid="$ctrl.config.build_source">
|
||||
|
||||
<div class="col-lg-7 col-md-7 col-sm-12 main-col">
|
||||
<h3>Enter repository</h3>
|
||||
|
|
@ -13,7 +15,8 @@
|
|||
Please enter the HTTP or SSH style URL used to clone your git repository:
|
||||
</strong>
|
||||
<input class="form-control" type="text" placeholder="git@example.com:namespace/repository.git"
|
||||
ng-model="config.build_source" ng-pattern="/(((http|https):\/\/)(.+)|\w+@(.+):(.+))/">
|
||||
ng-model="$ctrl.config.build_source"
|
||||
ng-pattern="/(((http|https):\/\/)(.+)|\w+@(.+):(.+))/">
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-5 hidden-sm hidden-xs help-col">
|
||||
<p>Custom git triggers support any externally accessible git repository, via either the normal git protocol or HTTP.</p>
|
||||
|
|
@ -26,18 +29,19 @@
|
|||
<div class="linear-workflow-section row"
|
||||
section-id="dockerfile"
|
||||
section-title="Build context"
|
||||
section-valid="config.subdir">
|
||||
section-valid="$ctrl.config.subdir">
|
||||
|
||||
<div class="col-lg-7 col-md-7 col-sm-12 main-col">
|
||||
<h3>Select build context directory</h3>
|
||||
<strong>Please select the build context directory under the git repository:</strong>
|
||||
<input class="form-control" type="text" placeholder="/"
|
||||
ng-model="config.subdir" ng-pattern="/^($|\/|\/.+)/">
|
||||
ng-model="$ctrl.config.subdir"
|
||||
ng-pattern="/^($|\/|\/.+)/">
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-5 hidden-sm hidden-xs help-col">
|
||||
<p>The build context directory is the path of the directory containing the Dockerfile and any other files to be made available when the build is triggered.</p>
|
||||
<p>If the Dockerfile is located at the root of the git repository, enter <code>/</code> as the build context directory.</p>
|
||||
</div>
|
||||
|
||||
</div><!-- /Section: Build context -->
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,56 +1,12 @@
|
|||
import { Input, Output, Component } from 'angular-ts-decorators';
|
||||
|
||||
|
||||
/**
|
||||
* A component that lets the user set up a build trigger for a custom Git repository.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'manageTriggerCustomGit',
|
||||
template: `
|
||||
<div class="manage-trigger-custom-git-element manage-trigger-control">
|
||||
<div class="linear-workflow"
|
||||
workflow-state="$ctrl.currentState"
|
||||
done-title="Create Trigger"
|
||||
workflow-complete="$ctrl.activateTrigger({'config': $ctrl.config})">
|
||||
<!-- Section: Repository -->
|
||||
<div class="linear-workflow-section row"
|
||||
section-id="repo"
|
||||
section-title="Git Repository"
|
||||
section-valid="$ctrl.config.build_source">
|
||||
|
||||
<div class="col-lg-7 col-md-7 col-sm-12 main-col">
|
||||
<h3>Enter repository</h3>
|
||||
<strong>
|
||||
Please enter the HTTP or SSH style URL used to clone your git repository:
|
||||
</strong>
|
||||
<input class="form-control" type="text" placeholder="git@example.com:namespace/repository.git"
|
||||
ng-model="$ctrl.config.build_source"
|
||||
ng-pattern="$ctrl.gitUrlRegEx">
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-5 hidden-sm hidden-xs help-col">
|
||||
<p>Custom git triggers support any externally accessible git repository, via either the normal git protocol or HTTP.</p>
|
||||
|
||||
<p><b>It is the responsibility of the git repository to invoke a webhook to tell <span class="registry-name" short="true"></span> that a commit has been added.</b></p>
|
||||
</div>
|
||||
</div><!-- /Section: Repository -->
|
||||
|
||||
<!-- Section: Build context -->
|
||||
<div class="linear-workflow-section row"
|
||||
section-id="dockerfile"
|
||||
section-title="Build context"
|
||||
section-valid="$ctrl.config.subdir">
|
||||
|
||||
<div class="col-lg-7 col-md-7 col-sm-12 main-col">
|
||||
<h3>Select build context directory</h3>
|
||||
<strong>Please select the build context directory under the git repository:</strong>
|
||||
<input class="form-control" type="text" placeholder="/"
|
||||
ng-model="$ctrl.config.subdir" ng-pattern="/^($|\/|\/.+)/">
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-5 hidden-sm hidden-xs help-col">
|
||||
<p>The build context directory is the path of the directory containing the Dockerfile and any other files to be made available when the build is triggered.</p>
|
||||
<p>If the Dockerfile is located at the root of the git repository, enter <code>/</code> as the build context directory.</p>
|
||||
</div>
|
||||
|
||||
</div><!-- /Section: Build context -->
|
||||
</div>
|
||||
`
|
||||
templateUrl: '/static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.html'
|
||||
})
|
||||
export class ManageTriggerCustomGitComponent implements ng.IComponentController {
|
||||
|
||||
|
|
@ -59,7 +15,6 @@ export class ManageTriggerCustomGitComponent implements ng.IComponentController
|
|||
@Output() public activateTrigger: any;
|
||||
private config: any = {};
|
||||
private currentState: any | null;
|
||||
private gitUrlRegEx: string = "((ssh|http(s)?)|(git@[\w\.]+))(:(//)?)([\w\.@\:/\-~]+)(\.git)(/)?";
|
||||
|
||||
public $onChanges(changes: ng.IOnChangesObject): void {
|
||||
if (changes['trigger'] !== undefined) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
<div class="regex-match-view-element">
|
||||
<div ng-if="$ctrl.filterMatches($ctrl.regex, $ctrl.items, false) == null">
|
||||
<i class="fa fa-exclamation-triangle"></i>Invalid Regular Expression!
|
||||
</div>
|
||||
<div ng-if="$ctrl.filterMatches($ctrl.regex, $ctrl.items, false) != null">
|
||||
<table class="match-table">
|
||||
<tr>
|
||||
<td>Matching:</td>
|
||||
<td>
|
||||
<ul class="matching match-list">
|
||||
<li ng-repeat="item in $ctrl.filterMatches($ctrl.regex, $ctrl.items, true)">
|
||||
<i class="fa {{ item.icon }}"></i>{{ item.title }}
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Not Matching:</td>
|
||||
<td>
|
||||
<ul class="not-matching match-list">
|
||||
<li ng-repeat="item in $ctrl.filterMatches($ctrl.regex, $ctrl.items, false)">
|
||||
<i class="fa {{ item.icon }}"></i>{{ item.title }}
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -2,42 +2,12 @@ import { Input, Component } from 'angular-ts-decorators';
|
|||
|
||||
|
||||
/**
|
||||
* An element which displays the matches and non-matches for a regular expression against a set of
|
||||
* A component that displays the matches and non-matches for a regular expression against a set of
|
||||
* items.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'regexMatchView',
|
||||
template: `
|
||||
<div class="regex-match-view-element">
|
||||
<div ng-if="$ctrl.filterMatches($ctrl.regex, $ctrl.items, false) == null">
|
||||
<i class="fa fa-exclamation-triangle"></i>Invalid Regular Expression!
|
||||
</div>
|
||||
<div ng-if="$ctrl.filterMatches($ctrl.regex, $ctrl.items, false) != null">
|
||||
<table class="match-table">
|
||||
<tr>
|
||||
<td>Matching:</td>
|
||||
<td>
|
||||
<ul class="matching match-list">
|
||||
<li ng-repeat="item in $ctrl.filterMatches($ctrl.regex, $ctrl.items, true)">
|
||||
<i class="fa {{ item.icon }}"></i>{{ item.title }}
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Not Matching:</td>
|
||||
<td>
|
||||
<ul class="not-matching match-list">
|
||||
<li ng-repeat="item in $ctrl.filterMatches($ctrl.regex, $ctrl.items, false)">
|
||||
<i class="fa {{ item.icon }}"></i>{{ item.title }}
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
templateUrl: '/static/js/directives/ui/regex-match-view/regex-match-view.component.html'
|
||||
})
|
||||
export class RegexMatchViewComponent implements ng.IComponentController {
|
||||
|
||||
|
|
|
|||
Reference in a new issue