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

Redo the UI for the run trigger dialog to be much cleaner

Browse source 
Fixes #774
This commit is contained in:
Joseph Schorr 2016-09-29 15:19:21 +02:00
parent edc2bc8b93
commit e85a1bce0a
13 changed files with 541 additions and 369 deletions
Download patch file Download diff file Expand all files Collapse all files

65
static/directives/dockerfile-build-dialog.html
View file

@ -1,55 +1,68 @@
<div class="dockerfile-build-dialog-element">
<!-- Modal message dialog -->
<div class="modal fade dockerfilebuildModal">
<div class="modal-dialog">
<div class="co-dialog modal-dialog">
<div class="modal-content" ng-show="triggersResource && triggersResource.loading">
<div class="cor-loader"></div>
</div>
<div class="modal-content" ng-show="!triggersResource || !triggersResource.loading">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<div class="modal-header ahead-of-tabs">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"
ng-show="!buildStarting">&times;</button>
<h4 class="modal-title">
Start new Dockerfile build
Start Repository Build
</h4>
</div>
<ul class="co-top-tab-bar" ng-show="triggers.length > 0">
<li class="co-top-tab" ng-class="viewTriggers ? 'active': ''" ng-click="showTriggers(true)">Invoke Build Trigger</li>
<li class="co-top-tab" ng-class="!viewTriggers ? 'active': ''" ng-click="showTriggers(false)">Upload Dockerfile</li>
</ul>
<div class="modal-body">
<div class="btn-group btn-group-sm" ng-show="triggers.length > 0">
<button class="btn" ng-class="viewTriggers ? 'btn-default' : 'btn-info active'" ng-click="showTriggers(false)">
<i class="fa fa-upload"></i>Upload Dockerfile
</button>
<button class="btn" ng-class="viewTriggers ? 'btn-info active' : 'btn-default'" ng-click="showTriggers(true)">
<i class="fa fa-flash"></i>Start Build Trigger
</button>
</div>
<div class="co-alert co-alert-danger" ng-show="errorMessage">
{{ errorMessage }}
</div>
<!-- Upload Dockerfile -->
<div ng-show="!viewTriggers">
<div class="dockerfile-build-form" repository="repository" upload-failed="handleBuildFailed(message)"
build-started="handleBuildStarted(build)" build-failed="handleBuildFailed(message)" start-now="startCounter"
is-ready="hasDockerfile" uploading="uploading" building="building"></div>
<div class="dockerfile-build-form" repository="repository" is-ready="hasDockerfile"
ready-for-build="readyForBuild(startBuild)"></div>
</div>
<!-- Start Build Trigger -->
<div ng-show="viewTriggers">
<table class="trigger-list">
<tr ng-repeat="trigger in triggers">
<td><span class="trigger-description" trigger="trigger"></span></td>
<td>
<button class="btn btn-primary" ng-click="runTriggerNow(trigger)" ng-if="trigger.can_invoke">Run Trigger</button>
<span class="empty" ng-if="!trigger.can_invoke">You do not have permission to run this trigger</span>
</td>
</tr>
<p style="padding: 10px;">Manually running a build trigger provides the means for invoking a build trigger as-if
called from the underlying service for the latest commit to a particular branch or tag.</p>
<table class="cor-table">
<thead>
<tr>
<td>Trigger Description</td>
<td></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="trigger in triggers">
<td><span class="trigger-description" trigger="trigger"></span></td>
<td>
<a href="javascript:void(0)" ng-click="runTriggerNow(trigger)"
ng-if="trigger.can_invoke">Run Trigger Now</a>
<span ng-if="!trigger.can_invoke"
data-title="You do not have permission to run this trigger" bs-tooltip>
<i class="fa fa-exclamation-triangle"></i> No permission to run
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="startBuild()" ng-disabled="building || uploading || !hasDockerfile" ng-show="!viewTriggers">Start Build</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" ng-click="startBuild()"
ng-disabled="!hasDockerfile || buildStarting"
ng-show="!viewTriggers">Start Build</button>
<button type="button" class="btn btn-default" data-dismiss="modal"
ng-disabled="buildStarting">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

70
static/directives/dockerfile-build-form.html
View file

@ -1,48 +1,32 @@
<div class="dockerfile-build-form-element">
<div class="cor-loader" ng-show="building"></div>
<div ng-show="uploading">
<span class="message">Uploading file {{ upload_file }}</span>
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="{{ upload_progress }}" aria-valuemin="0" aria-valuemax="100" style="{{ 'width: ' + upload_progress + '%' }}">
<div ng-show="state == 'starting-build'" class="starting-build">
<div class="cor-loader-inline"></div>
<div>Please wait while <span class="registry-name" short="true"></span> starts the build</div>
</div>
<div ng-show="state != 'starting-build'">
<div class="file-upload-box"
select-message="Please select a Dockerfile or an archive (.tar.gz or .zip) containing a Dockerfile at the root directory"
files-cleared="handleFilesCleared()"
files-selected="handleFilesSelected(files, callback)"
files-validated="handleFilesValidated(uploadFiles)"></div>
<div class="robot-permission" ng-show="privateBaseRepository && state != 'uploading-files'">
<div class="help-text">
<p>The selected Dockerfile contains a <code>FROM</code> that refers to private repository <strong>{{ privateBaseRepository }}</strong>.</p>
<p>
A robot account with read access to that repository is required for the build:
</p>
</div>
<div class="entity-search" namespace="repository.namespace"
placeholder="'Select robot account for pulling'"
current-entity="pullEntity"
pull-right="true"
allowed-entities="['robot']"></div>
<div class="co-alert co-alert-danger"
ng-if="currentRobotHasPermission === false">
Robot account <strong>{{ pullEntity.name }}</strong> does not have
read permission on repository <strong>{{ privateBaseRepository }}</strong>.
</div>
</div>
</div>
<div ng-show="!uploading && !building">
<dl>
<dt>Dockerfile or <code>.tar.gz</code> or <code>.zip</code>:</dt>
<dd>
<div class="co-alert co-alert-danger" ng-if="dockerfileState == 'error'">
{{ dockerfileError }}
</div>
<input id="file-drop" class="file-drop" type="file" files-changed="handleFilesChanged(files)">
<div class="help-text">Note: If an archive, the Dockerfile must be in the root directory.</div>
<div ng-if="dockerfileState == 'loading'">
Reading Dockerfile: <span class="cor-loader-inline"></span>
</div>
</dd>
</dl>
<dl ng-show="privateBaseRepository">
<dt>Base Image Pull Credentials:</dt>
<dd>
<div class="co-alert co-alert-warning"
ng-if="currentRobotHasPermission === false">
Warning: Robot account <strong>{{ pullEntity.name }}</strong> does not have
read permission on repository <strong>{{ privateBaseRepository }}</strong>, so
this build will fail with an authorization error.
</div>
<div class="entity-search" namespace="repository.namespace"
placeholder="'Select robot account for pulling'"
current-entity="pullEntity"
allowed-entities="['robot']"></div>
<div class="help-text">
The selected Dockerfile contains a <code>FROM</code> that refers to the private
<span class="registry-name"></span> repository <strong>{{ privateBaseRepository }}</strong>.
A robot account with read access to that repository is required for the build.
</div>
</dd>
</dl>
</div>
</div>

42
static/directives/file-upload-box.html Normal file
View file

@ -0,0 +1,42 @@
<div class="file-upload-box-element">
<div class="file-input-container">
<div ng-show="state != 'uploading'">
<input id="file-drop-{{ boxId }}" name="file-drop-{{ boxId }}" class="file-drop" type="file" files-changed="handleFilesChanged(files)">
<label for="file-drop-{{ boxId }}" ng-class="state">
<span class="chosen-file">
<span ng-if="selectedFiles.length">
{{ selectedFiles[0].name }}
<span ng-if="selectedFiles.length > 1">
and {{ selectedFiles.length - 1 }} others...
</span>
</span>
</span><span class="choose-button">
<span>Select file</span>
</span>
</label>
</div>
<div class="cor-loader-line" ng-if="state == 'checking'"></div>
<div class="status-message" ng-if="state == 'uploading'">
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar"
aria-valuenow="{{ uploadProgress }}" aria-valuemin="0" aria-valuemax="100"
style="{{ 'width: ' + uploadProgress + '%' }}">
</div>
</div>
Uploading file {{ currentlyUploadingFile.name }}...
</div>
<div class="select-message" ng-if="state == 'clear'">{{ selectMessage }}</div>
<div class="status-message error-message" ng-if="state == 'error'">
<i class="fa fa-times-circle"></i>
{{ message }}
</div>
<div class="status-message okay-message" ng-if="state == 'okay'">
<i class="fa fa-check-circle"></i>
{{ message }}
</div>
</div>
</div>

2
static/directives/repo-view/repo-panel-builds.html
View file

@ -2,7 +2,7 @@
<div class="feedback-bar" feedback="feedback"></div>
<div class="tab-header-controls">
<button class="btn btn-primary" ng-click="showNewBuildDialog()">
<i class="fa fa-plus"></i>Start Build
<i class="fa fa-play"></i> Start New Build
</button>
</div>
<h3 class="tab-header">Repository Builds</h3>