Add select to env tab on pod page

Author: benjaminapetersen

Diff for: app/scripts/controllers/pod.js

@@ -47,7 +47,14 @@ angular.module('openshiftConsole')
 
     // Must always be initialized so we can watch selectedTab
     $scope.selectedTab = {};
-
+    // we might want to start structuring this data more?
+    $scope.tabs = {
+      env: {
+        selected: {
+          container: null
+        }
+      }
+    };
     var watches = [];
 
     // Check if the metrics service is available so we know when to show the tab.
@@ -217,6 +224,7 @@ angular.module('openshiftConsole')
           function(pod) {
             $scope.loaded = true;
             $scope.pod = pod;
+            $scope.tabs.env.selected.container = pod.spec.containers[0].name;
             setLogVars(pod);
             setContainerVars();
             var pods = {};

Diff for: app/views/browse/pod.html

@@ -59,17 +59,46 @@ <h1>
                   </uib-tab>
                   <uib-tab heading="Environment" active="selectedTab.environment">
                     <uib-tab-heading>Environment</uib-tab-heading>
-                    <div ng-repeat="container in pod.spec.containers">
-                      <h3>Container {{container.name}} Environment Variables</h3>
-                      <key-value-editor
-                        entries="container.env"
-                        is-readonly
-                        cannot-add
-                        cannot-sort
-                        cannot-delete
-                        ng-if="container.env.length"></key-value-editor>
-                      <em ng-if="!container.env.length">The container specification has no environment variables set.</em>
+
+                    <div class="row">
+                      <div class="col-sm-6 col-lg-4">
+                        <span ng-if="pod.spec.containers.length === 1">
+                          <label for="selectLogContainer">Container:</label>
+                          {{pod.spec.containers[0].name}}
+                         </span>
+                        <ui-select
+                          ng-if="pod.spec.containers.length > 1"
+                          ng-model="tabs.env.selected.container">
+                          <ui-select-match
+                            class="truncate"
+                            placeholder="Container Name">
+                            <span ng-bind="tabs.env.selected.container"></span>
+                          </ui-select-match>
+                          <ui-select-choices
+                            repeat="container.name as container in pod.spec.containers">
+                            {{container.name}}
+                          </ui-select-choices>
+                        </ui-select>
+                      </div>
+                    </div>
+
+                    <div
+                      class="row"
+                      ng-repeat="container in pod.spec.containers"
+                      ng-show="tabs.env.selected.container === container.name">
+                      <div class="col-sm-12">
+                        <h3>Container {{container.name}} Environment Variables</h3>
+                        <key-value-editor
+                          entries="container.env"
+                          is-readonly
+                          cannot-add
+                          cannot-sort
+                          cannot-delete
+                          ng-if="container.env.length"></key-value-editor>
+                        <em ng-if="!container.env.length">The container specification has no environment variables set.</em>
+                      </div>
                     </div>
+
                   </uib-tab>
                   <uib-tab ng-if="metricsAvailable" heading="Metrics" active="selectedTab.metrics">
                     <!-- Use ng-if to remove the metrics directive when the tab is not active so