Show environment variables coming from the builder image in the Environment tab

Fixes openshift/origin#11388

Author: jwforres

app/scripts/controllers/buildConfig.js

@@ -11,7 +11,9 @@ angular.module('openshiftConsole')
                                                  $filter,
                                                  $routeParams,
                                                  AlertMessageService,
+                                                 APIService,
                                                  BuildsService,
+                                                 ImagesService,
                                                  DataService,
                                                  LabelFilter,
                                                  ProjectsService,
@@ -23,6 +25,7 @@ angular.module('openshiftConsole')
     $scope.alerts = {};
     $scope.breadcrumbs = [];
     $scope.forms = {};
+    $scope.expand = {imageEnv: false};
 
     if ($routeParams.isPipeline) {
       $scope.breadcrumbs.push({
@@ -99,6 +102,8 @@ angular.module('openshiftConsole')
       $scope.forms.bcEnvVars.$setPristine();
     };
 
+    var lastLoadedBuildFromImageKey;
+
     var buildConfigResolved = function(buildConfig, action) {
       $scope.loaded = true;
       $scope.buildConfig = buildConfig;
@@ -110,6 +115,23 @@ angular.module('openshiftConsole')
           $scope.imageSourcesPaths.push($filter('destinationSourcePair')(imageSource.paths));
         });
       }
+      var buildFrom = _.get(buildStrategy(buildConfig), 'from', {});
+      // We don't want to reload the image every time the BC updates, only load again if the from changes
+      var buildFromImageKey = buildFrom.kind + "/" + buildFrom.name + "/" + (buildFrom.namespace || $scope.projectName);
+      if (lastLoadedBuildFromImageKey !== buildFromImageKey) {
+        if (_.includes(["ImageStreamTag", "ImageStreamImage"], buildFrom.kind)) {
+          lastLoadedBuildFromImageKey = buildFromImageKey;
+          DataService.get(APIService.kindToResource(buildFrom.kind), buildFrom.name, {namespace: buildFrom.namespace || $scope.projectName}, {errorNotification: false}).then(function(imageStreamImage){
+            $scope.BCEnvVarsFromImage = ImagesService.getEnvironment(imageStreamImage);
+          }, function() {
+            // We may not be able to fetch the image info as the end user, don't reveal any errors
+            $scope.BCEnvVarsFromImage = [];
+          });
+        }
+        else {
+          $scope.BCEnvVarsFromImage = [];
+        }
+      }
       copyBuildConfigAndEnsureEnv(buildConfig);
       if (action === "DELETED") {
         $scope.alerts["deleted"] = {

app/scripts/controllers/create/createFromImage.js

@@ -15,6 +15,7 @@ angular.module("openshiftConsole")
       HPAService,
       QuotaService,
       SecretsService,
+      ImagesService,
       TaskList,
       failureObjectNameFilter,
       $filter,
@@ -150,15 +151,7 @@ angular.module("openshiftConsole")
               var imageName = scope.imageTag;
               DataService.get("imagestreamtags", imageStream.metadata.name + ":" + imageName, {namespace: scope.namespace}).then(function(imageStreamTag){
                   scope.image = imageStreamTag.image;
-                  scope.DCEnvVarsFromImage = _.map(
-                                              _.get(imageStreamTag, 'image.dockerImageMetadata.Config.Env'),
-                                              function(entry) {
-                                                var pair = entry.split('=');
-                                                return {
-                                                  name: _.head(pair),
-                                                  value:_.last(pair)
-                                                };
-                                              });
+                  scope.DCEnvVarsFromImage = ImagesService.getEnvironment(imageStreamTag);
                   var ports = ApplicationGenerator.parsePorts(imageStreamTag.image);
                   if (ports.length === 0) {
                     scope.routing.include = false;

app/scripts/services/images.js

@@ -213,10 +213,34 @@ angular.module("openshiftConsole")
       return resources;
     };
 
+    var getEnvironment = function(imageStreamImage) {
+      return _.map(_.get(imageStreamImage, 'image.dockerImageMetadata.Config.Env'),
+              function(entry) {
+                var ind = entry.indexOf('=');
+                var key = "";
+                var value = "";
+                if (ind > 0) {
+                  key = entry.substring(0, ind);
+                  if (ind + 1 < entry.length) {
+                    value = entry.substring(ind + 1);
+                  }
+                }
+                else {
+                  key = entry;
+                }
+                return {
+                  name: key,
+                  value: value
+                };
+              }
+            );
+    };
+
     return {
       findImage: findImage,
       getVolumes: getVolumes,
       runsAsRoot: runsAsRoot,
-      getResources: getResources
+      getResources: getResources,
+      getEnvironment: getEnvironment
     };
   });

app/views/browse/build-config.html

@@ -365,6 +365,21 @@ <h3>Triggers</h3>
                   <uib-tab heading="Environment" active="selectedTab.environment" ng-if="buildConfig && !(buildConfig | isJenkinsPipelineStrategy)">
                     <uib-tab-heading>Environment</uib-tab-heading>
                     <h3>Environment Variables</h3>
+                    <div style="margin-top: -5px;" ng-if="BCEnvVarsFromImage.length">
+                      The builder image has additional environment variables defined.  Variables defined below will overwrite any from the image with the same name.
+                      <a href="" ng-click="expand.imageEnv = true" ng-if="!expand.imageEnv">Show image environment variables</a>
+                      <a href="" ng-click="expand.imageEnv = false" ng-if="expand.imageEnv">Hide image environment variables</a>
+                    </div>
+                    <key-value-editor
+                      ng-if="expand.imageEnv"
+                      entries="BCEnvVarsFromImage"
+                      key-placeholder="Name"
+                      value-placeholder="Value"
+                      is-readonly
+                      cannot-add
+                      cannot-sort
+                      cannot-delete
+                      show-header></key-value-editor>
                     <ng-form name="forms.bcEnvVars">
                       <div ng-if="'buildconfigs' | canI : 'update'">
                         <key-value-editor
@@ -376,6 +391,16 @@ <h3>Environment Variables</h3>
                           key-validator-error-tooltip="A valid environment variable name is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores."
                           add-row-link="Add environment variable"
                           show-header></key-value-editor>
+                        <key-value-editor
+                          ng-if="!('buildconfigs' | canI : 'update')"
+                          entries="envVars"
+                          key-placeholder="Name"
+                          value-placeholder="Value"
+                          is-readonly
+                          cannot-add
+                          cannot-sort
+                          cannot-delete
+                          show-header></key-value-editor>
                         <button
                           class="btn btn-default"
                           ng-click="saveEnvVars()"
@@ -387,16 +412,6 @@ <h3>Environment Variables</h3>
                           class="mar-left-sm"
                           style="vertical-align: -2px;">Clear changes</a>
                       </div>
-                      <key-value-editor
-                        ng-if="!('buildconfigs' | canI : 'update')"
-                        entries="envVars"
-                        key-placeholder="Name"
-                        value-placeholder="Value"
-                        is-readonly
-                        cannot-add
-                        cannot-sort
-                        cannot-delete
-                        show-header></key-value-editor>
                     </ng-form>
                   </uib-tab>
                 </uib-tabset>