Allow the user to select containers when adding a secret to an application

Fixes #2024

Author: jeff-phillips-18

app/scripts/directives/addSecretToApplication.js

@@ -93,13 +93,18 @@
       });
     };
 
+    var isContainerSelected = function(container) {
+      return ctrl.attachAllContainers || ctrl.attachContainers[container.name];
+    };
+
     ctrl.$postLink = function() {
       $scope.$watch(function() {
         return ctrl.application;
       }, function() {
         // Look at the existing mount paths so that we can warn if the new value is not unique.
         var podTemplate = _.get(ctrl.application, 'spec.template');
         ctrl.existingMountPaths = StorageService.getMountPaths(podTemplate);
+        ctrl.attachAllContainers = true;
       });
     };
 
@@ -119,8 +124,10 @@
 
         // For each container, add the new volume mount.
         _.each(podTemplate.spec.containers, function(container) {
-          container.envFrom = container.envFrom || [];
-          container.envFrom.push(newEnvFrom);
+          if (isContainerSelected(container)) {
+            container.envFrom = container.envFrom || [];
+            container.envFrom.push(newEnvFrom);
+          }
         });
       } else {
         var generateName = $filter('generateName');
@@ -133,8 +140,10 @@
 
         // For each selected container, add the new volume mount.
         _.each(podTemplate.spec.containers, function(container) {
-          container.volumeMounts = container.volumeMounts || [];
-          container.volumeMounts.push(newVolumeMount);
+          if (isContainerSelected(container)) {
+            container.volumeMounts = container.volumeMounts || [];
+            container.volumeMounts.push(newVolumeMount);
+          }
         });
 
         var newVolume = {

app/styles/_secrets.less

@@ -3,6 +3,17 @@
     max-width: 600px;
   }
 
+  .container-options {
+    margin-left: 20px;
+    .select-container {
+      max-height: 200px;
+      overflow-y: auto;
+      .checkbox:first-of-type {
+        margin-top: 0;
+      }
+    }
+  }
+
   .dialog-title {
     border-bottom: 1px solid @color-pf-black-300;
 

app/views/directives/add-secret-to-application.html

@@ -70,6 +70,23 @@ <h3>Add to Application</h3>
             </div>
           </div>
         </div>
+        <legend ng-if-start="ctrl.application.spec.template.spec.containers.length > 1">Containers:</legend>
+        <div ng-if-end class="form-group container-options">
+          <div ng-if="ctrl.attachAllContainers">
+            The secret will be added to all containers. You can
+            <a href="" ng-click="ctrl.attachAllContainers = false">select specific containers</a>
+            instead.
+          </div>
+          <div ng-if="!ctrl.attachAllContainers" class="form-group">
+            <label class="sr-only required">Containers</label>
+            <select-containers
+              ng-model="ctrl.attachContainers"
+              pod-template="ctrl.application.spec.template"
+              ng-required="true"
+              help-text="Add the secret to the selected containers.">
+            </select-containers>
+          </div>
+        </div>
         <div class="button-group pull-right">
           <button
             class="btn btn-default"

app/views/directives/select-containers.html

@@ -1,16 +1,18 @@
 <ng-form name="forms.containerSelect">
-  <div class="checkbox" ng-repeat="container in template.spec.containers">
-    <label class="truncate">
-      <input
+  <div class="select-container">
+    <div class="checkbox" ng-repeat="container in template.spec.containers">
+      <label class="truncate">
+        <input
           type="checkbox"
           ng-model="containers[container.name]"
           ng-required="required && !containerSelected">
-      <b>{{container.name}}</b>
+        <b>{{container.name}}</b>
       <span class="hidden-xs">
         from image
         <i ng-attr-title="{{container.image}}">{{container.image}}</i>
       </span>
-    </label>
+      </label>
+    </div>
   </div>
   <div ng-if="helpText" class="help-block">
     {{helpText}}

dist/scripts/scripts.js

@@ -10633,12 +10633,16 @@ var e = new RegExp("^[A-Za-z_]{1}[A-Za-z0-9_]*$");
 m.hasInvalidEnvVars = _.some(m.secret.data, function(t, n) {
 return !e.test(n);
 });
-}, m.$postLink = function() {
+};
+var g = function(e) {
+return m.attachAllContainers || m.attachContainers[e.name];
+};
+m.$postLink = function() {
 t.$watch(function() {
 return m.application;
 }, function() {
 var e = _.get(m.application, "spec.template");
-m.existingMountPaths = i.getMountPaths(e);
+m.existingMountPaths = i.getMountPaths(e), m.attachAllContainers = !0;
 });
 }, m.addToApplication = function() {
 var t = angular.copy(m.application), i = _.get(t, "spec.template");
@@ -10649,7 +10653,7 @@ name: m.secret.metadata.name
 }
 };
 _.each(i.spec.containers, function(e) {
-e.envFrom = e.envFrom || [], e.envFrom.push(s);
+g(e) && (e.envFrom = e.envFrom || [], e.envFrom.push(s));
 });
 } else {
 var c = e("generateName")(m.secret.metadata.name + "-"), l = {
@@ -10658,7 +10662,7 @@ mountPath: m.mountVolume,
 readOnly: !0
 };
 _.each(i.spec.containers, function(e) {
-e.volumeMounts = e.volumeMounts || [], e.volumeMounts.push(l);
+g(e) && (e.volumeMounts = e.volumeMounts || [], e.volumeMounts.push(l));
 });
 var u = {
 name: c,
@@ -10668,10 +10672,10 @@ secretName: m.secret.metadata.name
 };
 i.spec.volumes = i.spec.volumes || [], i.spec.volumes.push(u);
 }
-var d = e("humanizeKind"), p = d(m.secret.kind), f = d(t.kind), g = {
+var d = e("humanizeKind"), p = d(m.secret.kind), f = d(t.kind), h = {
 namespace: m.project.metadata.name
 };
-a.update(n.kindToResource(t.kind), t.metadata.name, t, g).then(function() {
+a.update(n.kindToResource(t.kind), t.metadata.name, t, h).then(function() {
 o.addNotification({
 type: "success",
 message: "Successfully added " + p + " " + m.secret.metadata.name + " to " + f + " " + t.metadata.name + ".",

dist/scripts/templates.js

@@ -5598,6 +5598,19 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "</div>\n" +
     "</div>\n" +
+    "<legend ng-if-start=\"ctrl.application.spec.template.spec.containers.length > 1\">Containers:</legend>\n" +
+    "<div ng-if-end class=\"form-group container-options\">\n" +
+    "<div ng-if=\"ctrl.attachAllContainers\">\n" +
+    "The secret will be added to all containers. You can\n" +
+    "<a href=\"\" ng-click=\"ctrl.attachAllContainers = false\">select specific containers</a>\n" +
+    "instead.\n" +
+    "</div>\n" +
+    "<div ng-if=\"!ctrl.attachAllContainers\" class=\"form-group\">\n" +
+    "<label class=\"sr-only required\">Containers</label>\n" +
+    "<select-containers ng-model=\"ctrl.attachContainers\" pod-template=\"ctrl.application.spec.template\" ng-required=\"true\" help-text=\"Add the secret to the selected containers.\">\n" +
+    "</select-containers>\n" +
+    "</div>\n" +
+    "</div>\n" +
     "<div class=\"button-group pull-right\">\n" +
     "<button class=\"btn btn-default\" ng-class=\"{'dialog-btn': isDialog}\" ng-click=\"ctrl.onCancel()\">\n" +
     "Cancel\n" +
@@ -8799,6 +8812,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
 
   $templateCache.put('views/directives/select-containers.html',
     "<ng-form name=\"forms.containerSelect\">\n" +
+    "<div class=\"select-container\">\n" +
     "<div class=\"checkbox\" ng-repeat=\"container in template.spec.containers\">\n" +
     "<label class=\"truncate\">\n" +
     "<input type=\"checkbox\" ng-model=\"containers[container.name]\" ng-required=\"required && !containerSelected\">\n" +
@@ -8809,6 +8823,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</span>\n" +
     "</label>\n" +
     "</div>\n" +
+    "</div>\n" +
     "<div ng-if=\"helpText\" class=\"help-block\">\n" +
     "{{helpText}}\n" +
     "</div>\n" +