Merge pull request #384 from coreos-inc/builddialogtrigger

Allow users to choose trigger or manual in the build dialog

static/css/directives/ui/dockerfile-build-dialog.css

@@ -0,0 +1,13 @@
+.dockerfile-build-dialog-element .btn-group {
+    margin-bottom: 20px;
+}
+
+.dockerfile-build-dialog-element button i {
+  margin-right: 6px;
+}
+
+.dockerfile-build-dialog-element .trigger-list {
+  margin: 0px;
+  width: 100%;
+}
+

static/directives/dockerfile-build-dialog.html

@@ -1,27 +1,57 @@
 <div class="dockerfile-build-dialog-element">
   <!-- Modal message dialog -->
-  <div class="modal fade" id="dockerfilebuildModal">
+  <div class="modal fade dockerfilebuildModal">
     <div class="modal-dialog">
-      <div class="modal-content">
+      <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>
           <h4 class="modal-title">
             Start new Dockerfile build
           </h4>
         </div>
-        <div class="modal-body token-dialog-body">
+        <div class="modal-body">
-          <div class="alert alert-danger" ng-show="errorMessage">
+          <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>
+
+          <!-- 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)">Run Trigger</button></td>
+              </tr>
+            </table>
+          </div>
+        </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-primary" ng-click="startBuild()" ng-disabled="building || uploading || !hasDockerfile">Start Build</button>
+          <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>
         </div>
       </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
   </div><!-- /.modal -->
+  <div class="manual-trigger-build-dialog" repository="repository" counter="startTriggerCounter"
+       trigger="startTrigger"
+       build-started="handleBuildStarted(build)"></div>
 </div>

static/directives/manual-trigger-build-dialog.html

@@ -1,5 +1,5 @@
 <!-- Modal message dialog -->
-<div class="modal fade" id="startTriggerDialog">
+<div class="modal fade startTriggerDialog">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">

static/directives/repo-view/repo-panel-builds.html

@@ -198,7 +198,7 @@
        repository="repository"
        trigger="currentStartTrigger"
        counter="showTriggerStartDialogCounter"
-       start-build="startTrigger(trigger, parameters)"></div>
+       build-started="handleBuildStarted(build)"></div>
 
   <!-- /Dialogs -->
 

static/js/directives/repo-view/repo-panel-builds.js

@@ -221,24 +221,6 @@ angular.module('quay').directive('repoPanelBuilds', function () {
         $scope.showTriggerSetupCounter++;
       };
 
-      $scope.startTrigger = function(trigger, opt_custom) {
-        var parameters = TriggerService.getRunParameters(trigger.service);
-        if (parameters.length && !opt_custom) {
-          $scope.currentStartTrigger = trigger;
-          $scope.showTriggerStartDialogCounter++;
-          return;
-        }
-
-        var params = {
-          'repository': $scope.repository.namespace + '/' + $scope.repository.name,
-          'trigger_uuid': trigger.id
-        };
-
-        ApiService.manuallyStartBuildTrigger(opt_custom || {}, params).then(function(resp) {
-          $scope.handleBuildStarted(resp);
-        }, ApiService.errorDisplay('Could not start build'));
-      };
-
       $scope.deleteTrigger = function(trigger, opt_callback) {
         if (!trigger) { return; }
 

static/js/directives/ui/dockerfile-build-dialog.js

@@ -13,13 +13,17 @@ angular.module('quay').directive('dockerfileBuildDialog', function () {
       'showNow': '=showNow',
       'buildStarted': '&buildStarted'
     },
-    controller: function($scope, $element) {
+    controller: function($scope, $element, ApiService) {
       $scope.building = false;
       $scope.uploading = false;
       $scope.startCounter = 0;
+      $scope.viewTriggers = false;
+      $scope.triggers = null;
+      $scope.startTriggerCounter = 0;
+      $scope.startTrigger = null;
 
       $scope.handleBuildStarted = function(build) {
-        $('#dockerfilebuildModal').modal('hide');
+        $element.find('.dockerfilebuildModal').modal('hide');
         if ($scope.buildStarted) {
           $scope.buildStarted({'build': build});
         }
@@ -34,9 +38,38 @@ angular.module('quay').directive('dockerfileBuildDialog', function () {
         $scope.startCounter++;
       };
 
+      $scope.showTriggers = function(value) {
+        $scope.viewTriggers = value;
+      };
+
+      $scope.runTriggerNow = function(trigger) {
+        $element.find('.dockerfilebuildModal').modal('hide');
+        $scope.startTrigger = trigger;
+        $scope.startTriggerCounter++;
+      };
+
       $scope.$watch('showNow', function(sn) {
         if (sn && $scope.repository) {
-          $('#dockerfilebuildModal').modal({});
+          $scope.viewTriggers = false;
+          $scope.startTrigger = null;
+
+          $element.find('.dockerfilebuildModal').modal({});
+
+          // Load the triggers (if necessary).
+          if (!$scope.repository || !$scope.repository.can_admin) {
+            $scope.triggersResource = null;
+            $scope.triggers = null;
+            return;
+          }
+
+          var params = {
+            'repository': $scope.repository.namespace + '/' + $scope.repository.name
+          };
+
+          $scope.triggersResource = ApiService.listBuildTriggersAsResource(params).get(function(resp) {
+            $scope.triggers = resp.triggers;
+            $scope.viewTriggers = $scope.triggers.length > 0;
+          });
         }
       });
     }

static/js/directives/ui/dockerfile-build-form.js

@@ -24,11 +24,15 @@ angular.module('quay').directive('dockerfileBuildForm', function () {
       var MEGABYTE = 1000000;
       var MAX_FILE_SIZE = 100 * MEGABYTE;
 
+      var resetState = function() {
         $scope.hasDockerFile = false;
         $scope.pullEntity = null;
         $scope.dockerfileState = 'none';
         $scope.privateBaseRepository = null;
         $scope.isReady = false;
+      };
+
+      resetState();
 
       $scope.handleFilesChanged = function(files) {
         $scope.dockerfileError = '';
@@ -259,6 +263,8 @@ angular.module('quay').directive('dockerfileBuildForm', function () {
       $scope.$watch('pullEntity', checkReady);
       $scope.$watch('dockerfileState', checkReady);
 
+      $scope.$watch('repository', resetState);
+
       $scope.$watch('startNow', function() {
         if ($scope.startNow && $scope.repository && !$scope.uploading && !$scope.building) {
           startFileUpload();

static/js/directives/ui/manual-trigger-build-dialog.js

@@ -11,7 +11,7 @@ angular.module('quay').directive('manualTriggerBuildDialog', function () {
       'repository': '=repository',
       'counter': '=counter',
       'trigger': '=trigger',
-      'startBuild': '&startBuild'
+      'buildStarted': '&buildStarted'
     },
     controller: function($scope, $element, ApiService, TriggerService) {
       $scope.parameters = {};
@@ -19,11 +19,19 @@ angular.module('quay').directive('manualTriggerBuildDialog', function () {
       $scope.lookaheadItems = {};
 
       $scope.startTrigger = function() {
-        $('#startTriggerDialog').modal('hide');
+        $element.find('.startTriggerDialog').modal('hide');
-        $scope.startBuild({
+        var params = {
+          'repository': $scope.repository.namespace + '/' + $scope.repository.name,
+          'trigger_uuid': $scope.trigger.id
+        };
+
+        ApiService.manuallyStartBuildTrigger($scope.parameters || {}, params).then(function(resp) {
+          $scope.buildStarted({
             'trigger': $scope.trigger,
-          'parameters': $scope.parameters
+            'parameters': $scope.parameters,
+            'build': resp
           });
+        }, ApiService.errorDisplay('Could not start build'));
       };
 
       $scope.getPattern = function(field) {
@@ -50,9 +58,9 @@ angular.module('quay').directive('manualTriggerBuildDialog', function () {
             });
           }
         }
-        $scope.runParameters = parameters;
 
-        $('#startTriggerDialog').modal('show');
+        $scope.runParameters = parameters;
+        $element.find('.startTriggerDialog').modal('show');
       };
 
       $scope.$watch('counter', function(counter) {