Add Cancel button to UI for running builds

assets/app/scripts/controllers/builds.js

@@ -136,6 +136,30 @@ angular.module('openshiftConsole')
       );
     };
 
+    $scope.cancelBuild = function(build, buildConfigName) {
+      var canceledBuild = angular.copy(build);
+      canceledBuild.status.cancelled = true;
+      DataService.update("builds", canceledBuild.metadata.name, canceledBuild, $scope).then(
+        function() {
+            $scope.alerts = [
+            {
+              type: "success",
+              message: "Cancelling build " + build.metadata.name + " of " + buildConfigName + ".",
+            }
+          ];
+        },
+        function(result) {
+          $scope.alerts = [
+            {
+              type: "error",
+              message: "An error occurred cancelling the build.",
+              details: $filter('getErrorDetails')(result)
+            }
+          ];
+        }
+      );
+    };
+
     // Function which will 'clone' build from given buildName
     $scope.cloneBuild = function(buildName) {
       var req = {

assets/app/styles/_components.less

@@ -341,6 +341,9 @@
       margin-right: 10px;
     }
   }
+  .build-status-button {
+    margin-left: 7px;
+  }
 }
 
 .animate-repeat.ng-move,

assets/app/views/builds.html

@@ -142,20 +142,12 @@ <h3>Triggers:</h3>
         <!-- When expanded, pass undefined to limitToOrAll to show all builds. -->
         <div ng-repeat="build in buildsByBuildConfig[buildConfigName] | orderObjectsByDate : true | limitToOrAll: (expanded ? undefined : defaultBuildLimit)" class="well build-well">
           <div class="row">
-            <div class="col-md-7 col-sm-7 col-xs-7">
+            <div class="col-md-12 col-sm-12 col-xs-12">
               <h3>{{build.metadata.name}}</h3>
             </div>
-            <div class="col-md-4 col-sm-4 col-xs-offset-1 col-xs-4 text-right">
-              <div>
-                <button class="btn btn-default" ng-click="cloneBuild(build.metadata.name)" ng-disabled="(buildConfigBuildsInProgress[buildConfigName] | hashSize) > 0">Rebuild</button>
-              </div>
-            </div>
           </div><!-- /.row -->
           <div class="row">
             <div class="col-md-6">
-              <div class="build-detail">
-                <span class="build-detail-label">Created:</span><relative-timestamp timestamp="build.metadata.creationTimestamp"></relative-timestamp>
-              </div>
               <div class="build-detail">
                 <span class="build-detail-label">Status:</span>
                 <span ng-switch="build.status.phase" class="hide-ng-leave">
@@ -167,6 +159,12 @@ <h3>{{build.metadata.name}}</h3>
                   <span ng-switch-default class="fa fa-refresh fa-spin" aria-hidden="true"></span>
                 </span>
                 {{build.status.phase}}
+
+                <button class="btn btn-default build-status-button btn-primary" ng-click="cancelBuild(build, buildConfigName)" ng-if="build | isIncompleteBuild">Cancel</button>
+                <button class="btn btn-default build-status-button" ng-click="cloneBuild(build.metadata.name)" ng-hide="build | isIncompleteBuild" ng-disabled="(buildConfigBuildsInProgress[buildConfigName] | hashSize) !== 0">Rebuild</button>
+              </div>
+              <div class="build-detail">
+                <span class="build-detail-label">Created:</span><relative-timestamp timestamp="build.metadata.creationTimestamp"></relative-timestamp>
               </div>
               <div class="build-detail">
                 <span class="build-detail-label">Duration:</span>
@@ -182,7 +180,7 @@ <h3>{{build.metadata.name}}</h3>
                   </span>
                 </span>
               </div>
-            </div><!-- .col -->        
+            </div><!-- .col -->
             <div class="col-md-6">
               <div class="build-detail" ng-if="buildConfig.spec.strategy.type != build.spec.strategy.type">
                 <span class="build-detail-label">Build strategy:</span>{{build.spec.strategy.type}}