Allow editing of build hooks on build configuration page

MarkDeMaria · MarkDeMaria · commit a968944f73e3 · 2017-01-18T11:06:30.000-05:00
-Single-select tag for Command, Script, and Args, Command+Args, Script+Args
-Whatever option is currently-selected upon hitting 'Save' will overwrite anything else. For example, if post commit has a command in it, and you hit save on the Args page, the command will be deleted and the args saved.
-Checkbox shows/hides the build hook editor. Leaving it unchcked and selecting "Save" with anything saved in the post commit section of the YAML will be deleted, as the user has indicated they do not wish to have any build hooks
-Alterations to edit-command directive to allow for a 'type' arg to be passed through. Will replace relevant wording. For example, 'argument.' If no type provided, defaults to 'command.'
diff --git a/app/index.html b/app/index.html
@@ -140,6 +140,7 @@ <h1>JavaScript Required</h1>
     <script src="bower_components/ace-builds/src-min-noconflict/mode-yaml.js"></script>
     <script src="bower_components/ace-builds/src-min-noconflict/theme-dreamweaver.js"></script>
     <script src="bower_components/ace-builds/src-min-noconflict/theme-eclipse.js"></script>
+    <script src="bower_components/ace-builds/src-min-noconflict/mode-sh.js"></script>
     <script src="bower_components/angular-ui-ace/ui-ace.js"></script>
     <script src="bower_components/clipboard/dist/clipboard.js"></script>
     <script src="bower_components/ansi_up/ansi_up.js"></script>
diff --git a/app/scripts/constants.js b/app/scripts/constants.js
@@ -51,6 +51,7 @@ window.OPENSHIFT_CONSTANTS = {
     "builds":                  "architecture/core_concepts/builds_and_image_streams.html#builds",
     "image-streams":           "architecture/core_concepts/builds_and_image_streams.html#image-streams",
     "storage":                 "architecture/additional_concepts/storage.html",
+    "build-hooks":             "dev_guide/builds.html#build-hooks",
     // default should remain last, add new links above
     "default":                 "welcome/index.html"
   },
diff --git a/app/scripts/controllers/edit/buildConfig.js b/app/scripts/controllers/edit/buildConfig.js
@@ -55,7 +55,8 @@ angular.module('openshiftConsole')
       "title": "Inline"
     }];
     $scope.view = {
-      advancedOptions: false
+      advancedOptions: false,
+      hasHooks: false
     };
     $scope.breadcrumbs = [
       {
@@ -117,6 +118,79 @@ angular.module('openshiftConsole')
       "SerialLatestOnly"
     ];
 
+    $scope.buildHookTypes = [{
+      id: "command",
+      label: "Command"
+    }, {
+      id: "script",
+      label: "Shell Script"
+    }, {
+      id: "args",
+      label: "Arguments to default image entry point"
+    }, {
+      id: "commandArgs",
+      label: "Command with arguments"
+    }, {
+      id: "scriptArgs",
+      label: "Shell script with arguments"
+    }];
+
+    $scope.buildHookSelection = {
+      type: {}
+    };
+
+    var getInitialBuildHookSelection = function() {
+      var hasArgs = !_.isEmpty(_.get($scope, 'buildConfig.spec.postCommit.args'));
+      var hasCommand = !_.isEmpty(_.get($scope, 'buildConfig.spec.postCommit.command'));
+      var hasScript = !!_.get($scope, 'buildConfig.spec.postCommit.script');
+      $scope.view.hasHooks = hasArgs || hasCommand || hasScript;
+
+      var id;
+
+      if (hasArgs && hasCommand) {
+        id = 'commandArgs';
+      } else if (hasArgs && hasScript) {
+        id = 'scriptArgs';
+      } else if (hasArgs) {
+        id = 'args';
+      } else if (hasScript) {
+        id = 'script';
+      } else {
+        id = 'command';
+      }
+
+      $scope.buildHookSelection.type = _.find($scope.buildHookTypes, { id: id });
+    };
+
+    var clearIncompatibleBuildHookFields = function() {
+      if (!$scope.view.hasHooks) {
+        delete $scope.updatedBuildConfig.spec.postCommit.command;
+        delete $scope.updatedBuildConfig.spec.postCommit.args;
+        delete $scope.updatedBuildConfig.spec.postCommit.script;
+      } else {
+        switch ($scope.buildHookSelection.type.id) {
+          case "script":
+            delete $scope.updatedBuildConfig.spec.postCommit.command;
+            delete $scope.updatedBuildConfig.spec.postCommit.args;
+            break;
+          case "command":
+            delete $scope.updatedBuildConfig.spec.postCommit.script;
+            delete $scope.updatedBuildConfig.spec.postCommit.args;
+            break;
+          case "args":
+            delete $scope.updatedBuildConfig.spec.postCommit.script;
+            delete $scope.updatedBuildConfig.spec.postCommit.command;
+            break;
+          case "scriptArgs":
+            delete $scope.updatedBuildConfig.spec.postCommit.command;
+            break;
+          case "commandArgs":
+            delete $scope.updatedBuildConfig.spec.postCommit.script;
+            break;
+        }
+      }
+    };
+
     AlertMessageService.getAlerts().forEach(function(alert) {
       $scope.alerts[alert.name] = alert.data;
     });
@@ -143,6 +217,8 @@ angular.module('openshiftConsole')
           // success
           function(buildConfig) {
             $scope.buildConfig = buildConfig;
+            getInitialBuildHookSelection();
+
             $scope.updatedBuildConfig = angular.copy($scope.buildConfig);
             $scope.buildStrategy = buildStrategy($scope.updatedBuildConfig);
             $scope.strategyType = $scope.buildConfig.spec.strategy.type;
@@ -180,7 +256,7 @@ angular.module('openshiftConsole')
               }
 
               if (imageOptions.type === "ImageStreamImage") {
-                isimage = (imageData.namespace || buildConfig.metadata.namespace) + "/" + imageData.name;               
+                isimage = (imageData.namespace || buildConfig.metadata.namespace) + "/" + imageData.name;
               } else {
                 isimage = "";
               }
@@ -414,6 +490,7 @@ angular.module('openshiftConsole')
 
     $scope.save = function() {
       $scope.disableInputs = true;
+      clearIncompatibleBuildHookFields();
       // Update Configuration
       buildStrategy($scope.updatedBuildConfig).forcePull = $scope.options.forcePull;
 
diff --git a/app/scripts/directives/editCommand.js b/app/scripts/directives/editCommand.js
@@ -6,6 +6,7 @@ angular.module('openshiftConsole')
       restrict: 'E',
       scope: {
         args: '=',
+        type: '@',
         isRequired: '='
       },
       templateUrl: 'views/directives/_edit-command.html',
diff --git a/app/views/directives/_edit-command.html b/app/views/directives/_edit-command.html
@@ -1,5 +1,5 @@
 <ng-form name="form">
-  <p ng-hide="input.args.length"><em>No command set.</em></p>
+  <p ng-hide="input.args.length"><em>No {{type || 'command'}} set.</em></p>
   <p ng-show="input.args.length" as-sortable ng-model="input.args" class="command-args">
     <span ng-repeat="arg in input.args" as-sortable-item class="form-group">
       <span class="input-group">
@@ -25,23 +25,23 @@
         <span as-sortable-item-handle class="input-group-addon action-button drag-handle">
           <i class="fa fa-bars" aria-hidden="true"></i>
         </span>
-        <a href="" ng-click="removeArg($index)" class="input-group-addon action-button remove-arg" title="Remove Argument">
-          <span class="sr-only">Remove Argument</span>
+        <a href="" ng-click="removeArg($index)" class="input-group-addon action-button remove-arg" title="Remove Item">
+          <span class="sr-only">Remove Item</span>
           <i class="pficon pficon-close" aria-hidden="true"></i>
         </a>
       </span>
     </span>
   </p>
   <div class="form-group">
-    <label class="sr-only" ng-attr-for="{{id}}-add-arg">Add Argument</label>
+    <label class="sr-only" ng-attr-for="{{id}}-add-arg">Add {{type || 'Command'}}</label>
     <!-- Single-line entry -->
     <span ng-show="!multiline" class="input-group">
       <input type="text"
              ng-model="nextArg"
              name="nextArg"
              ng-attr-id="{{id}}-add-arg"
              on-enter="addArg()"
-             placeholder="Add argument"
+             placeholder="Add {{type || 'command'}}"
              class="form-control"
              autocorrect="off"
              autocapitalize="off"
@@ -64,7 +64,7 @@
                 name="nextArg"
                 rows="10"
                 ng-attr-id="{{id}}-add-arg"
-                placeholder="Add argument"
+                placeholder="Add {{type || 'command'}}"
                 class="form-control"
                 autocorrect="off"
                 autocapitalize="off"
@@ -81,14 +81,19 @@
     </span>
   </div>
   <div class="help-block">
-    Enter the command to run inside the container. The command is considered successful if its exit code is 0.
-    Drag and drop command arguments to reorder them.
+    <div ng-if="!type">
+      Enter the command to run inside the container. The command is considered successful if its exit code is 0.
+      Drag and drop command arguments to reorder them.
+    </div>
+    <div ng-if="type">
+      Enter the arguments that will be appended to the container's command. Drag and drop arguments to reorder them.
+    </div>
   </div>
   <div class="mar-top-sm mar-bottom-md">
     <a href="" ng-click="multiline = !multiline">Switch to {{multiline ? 'Single-line' : 'Multiline'}} Editor</a>
     <span ng-show="input.args.length">
       <span class="action-divider">|</span>
-      <a href="" ng-click="clear()" role="button">Clear Command</a>
+      <a href="" ng-click="clear()" role="button">Clear {{ (type || 'Command') | sentenceCase }}</a>
     </span>
   </div>
   <!-- Add a hidden input to help with form validation. -->
diff --git a/app/views/edit/build-config.html b/app/views/edit/build-config.html
@@ -115,7 +115,6 @@ <h3>Source Configuration</h3>
                             <div ui-ace="{
                               mode: 'dockerfile',
                               theme: 'dreamweaver',
-                              onLoad: aceLoaded,
                               rendererOptions: {
                                 fadeFoldWidgets: true,
                                 showPrintMargin: false
@@ -275,7 +274,6 @@ <h3 ng-class="{ 'with-divider': !sources.none }">Jenkins Pipeline Configuration<
                         <div ui-ace="{
                           mode: 'groovy',
                           theme: 'eclipse',
-                          onLoad: aceLoaded,
                           rendererOptions: {
                             fadeFoldWidgets: true,
                             showPrintMargin: false
@@ -416,8 +414,6 @@ <h3 class="with-divider">Image Configuration</h3>
                       </dl>
                     </div>
 
-
-
                     <div ng-if="!(updatedBuildConfig | isJenkinsPipelineStrategy)" class="section">
                       <h3 class="with-divider">Environment Variables<span class="help action-inline">
                         <a href="">
@@ -523,8 +519,8 @@ <h3 class="with-divider">Run Policy
                             {{type | sentenceCase}}
                           </ui-select-choices>
                         </ui-select>
-
                       </div>
+
                       <div ng-switch="updatedBuildConfig.spec.runPolicy">
                         <div class="help-block" ng-switch-when="Serial">Builds triggered from this Build Configuration will run one at the time, in the order they have been triggered.</div>
                         <div class="help-block" ng-switch-when="Parallel">Builds triggered from this Build Configuration will run all at the same time. The order in which they will finish is not guaranteed.</div>
@@ -533,8 +529,73 @@ <h3 class="with-divider">Run Policy
                       </div>
                     </div>
 
-                    <div>
-                      <a href="" ng-click="view.advancedOptions = !view.advancedOptions" role="button">{{view.advancedOptions ? 'Hide' : 'Show'}} Advanced Options</a>
+                    <div ng-if="view.advancedOptions && !(updatedBuildConfig | isJenkinsPipelineStrategy)" class="section">
+                      <h3 class="with-divider">Build Hooks
+                        <span class="help action-inline">
+                          <a href="{{'build-hooks' | helpLink}}" aria-hidden="true" target="_blank"><span class="learn-more-inline">Learn More&nbsp;<i class="fa fa-external-link"></i></span></a>
+                        </span>
+                      </h3>
+
+                      <div class="checkbox">
+                        <label>
+                          <input type="checkbox" ng-model="view.hasHooks" id="enable-build-hooks">
+                          Run build hooks after image is built
+                        </label>
+                        <div class="help-block">
+                          Build hooks allow you to run commands at the end of the build to verify the image.
+                        </div>
+                      </div>
+
+                      <div ng-show="view.hasHooks">
+                        <div class="form-group">
+                          <h4>Hook Types</h4>
+                          <ui-select
+                             ng-model="buildHookSelection.type"
+                             title="Choose a type of build hook">
+                            <ui-select-match>{{$select.selected.label}}</ui-select-match>
+                            <ui-select-choices repeat="type in buildHookTypes">
+                              {{type.label}}
+                            </ui-select-choices>
+                          </ui-select>
+                        </div>
+
+                        <fieldset>
+                          <div ng-show="buildHookSelection.type.id === 'script' || buildHookSelection.type.id === 'scriptArgs'">
+                            <h4>Script</h4>
+                            <div
+                              ui-ace="{
+                                mode: 'sh',
+                                theme: 'eclipse',
+                                rendererOptions: {
+                                  fadeFoldWidgets: true,
+                                  showPrintMargin: false
+                                }
+                              }"
+                              ng-model="updatedBuildConfig.spec.postCommit.script"
+                              class="ace-bordered ace-inline mar-top-md">
+                            </div>
+                          </div>
+
+                          <div ng-show="buildHookSelection.type.id === 'command' || buildHookSelection.type.id === 'commandArgs'">
+                            <h4>Command</h4>
+                            <edit-command
+                              args="updatedBuildConfig.spec.postCommit.command">
+                            </edit-command>
+                          </div>
+
+                          <div ng-show="buildHookSelection.type.id === 'args' || buildHookSelection.type.id === 'commandArgs' || buildHookSelection.type.id === 'scriptArgs' ">
+                            <h4>Arguments</h4>
+                            <edit-command
+                              args="updatedBuildConfig.spec.postCommit.args"
+                              type="argument">
+                            </edit-command>
+                          </div>
+                        </fieldset>
+                      </div>
+                    </div>
+
+                    <div class="gutter-top">
+                      <a href="" ng-click="view.advancedOptions = !view.advancedOptions" role="button">{{view.advancedOptions ? 'Hide' : 'Show'}} advanced options</a>
                     </div>
                     <div class="buttons gutter-top-bottom">
                       <button
diff --git a/bower.json b/bower.json
@@ -105,7 +105,8 @@
         "src-min-noconflict/mode-groovy.js",
         "src-min-noconflict/mode-yaml.js",
         "src-min-noconflict/theme-dreamweaver.js",
-        "src-min-noconflict/theme-eclipse.js"
+        "src-min-noconflict/theme-eclipse.js",
+        "src-min-noconflict/mode-sh.js"
       ]
     }
   }
diff --git a/dist/scripts/scripts.js b/dist/scripts/scripts.js
diff --git a/dist/scripts/templates.js b/dist/scripts/templates.js
diff --git a/dist/scripts/vendor.js b/dist/scripts/vendor.js

Original file line number	Diff line number	Diff line change
`@@ -105,7 +105,8 @@`
`105`	`105`	`"src-min-noconflict/mode-groovy.js",`
`106`	`106`	`"src-min-noconflict/mode-yaml.js",`
`107`	`107`	`"src-min-noconflict/theme-dreamweaver.js",`
`108`		`- "src-min-noconflict/theme-eclipse.js"`
	`108`	`+ "src-min-noconflict/theme-eclipse.js",`
	`109`	`+ "src-min-noconflict/mode-sh.js"`
`109`	`110`	`]`
`110`	`111`	`}`
`111`	`112`	`}`