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

Fixes openshift/origin#11388

Author: jwforres

app/scripts/controllers/buildConfig.js

@@ -11,6 +11,7 @@ angular.module('openshiftConsole')
                                                  $filter,
                                                  $routeParams,
                                                  AlertMessageService,
+                                                 APIService,
                                                  BuildsService,
                                                  DataService,
                                                  LabelFilter,
@@ -23,6 +24,7 @@ angular.module('openshiftConsole')
     $scope.alerts = {};
     $scope.breadcrumbs = [];
     $scope.forms = {};
+    $scope.expand = {imageEnv: false};
 
     if ($routeParams.isPipeline) {
       $scope.breadcrumbs.push({
@@ -99,6 +101,8 @@ angular.module('openshiftConsole')
       $scope.forms.bcEnvVars.$setPristine();
     };
 
+    var lastLoadedBuildFromImageKey;
+
     var buildConfigResolved = function(buildConfig, action) {
       $scope.loaded = true;
       $scope.buildConfig = buildConfig;
@@ -110,6 +114,28 @@ 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}).then(function(imageStreamImage){
+            $scope.BCEnvVarsFromImage = _.map(_.get(imageStreamImage, 'image.dockerImageMetadata.Config.Env'),
+              function(entry) {
+                var pair = entry.split('=');
+                return {
+                  name: _.head(pair),
+                  value:_.last(pair)
+                };
+              }
+            );
+          });
+        }
+        else {
+          $scope.BCEnvVarsFromImage = [];
+        }
+      }
       copyBuildConfigAndEnsureEnv(buildConfig);
       if (action === "DELETED") {
         $scope.alerts["deleted"] = {

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">View 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>