Let users add config maps and secrets as volumes

app/index.html

@@ -205,6 +205,7 @@ <h1>JavaScript Required</h1>
         <script src="scripts/services/quota.js"></script>
         <script src="scripts/services/labels.js"></script>
         <script src="scripts/services/catalog.js"></script>
+        <script src="scripts/services/modals.js"></script>
         <script src="scripts/controllers/projects.js"></script>
         <script src="scripts/controllers/pods.js"></script>
         <script src="scripts/controllers/pod.js"></script>
@@ -260,6 +261,7 @@ <h1>JavaScript Required</h1>
         <script src="scripts/controllers/edit/project.js"></script>
         <script src="scripts/controllers/createRoute.js"></script>
         <script src="scripts/controllers/attachPVC.js"></script>
+        <script src="scripts/controllers/addConfigVolume.js"></script>
         <script src="scripts/controllers/modals/createSecretModal.js"></script>
         <script src="scripts/controllers/modals/confirmModal.js"></script>
         <script src="scripts/controllers/modals/confirmScale.js"></script>
@@ -337,6 +339,7 @@ <h1>JavaScript Required</h1>
         <script src="scripts/directives/istagSelect.js"></script>
         <script src="scripts/directives/deployImage.js"></script>
         <script src="scripts/directives/selector.js"></script>
+        <script src="scripts/directives/selectContainers.js"></script>
         <script src="scripts/filters/date.js"></script>
         <script src="scripts/filters/resources.js"></script>
         <script src="scripts/filters/canI.js"></script>

app/scripts/app.js

@@ -319,6 +319,10 @@ angular
         templateUrl: 'views/attach-pvc.html',
         controller: 'AttachPVCController'
       })
+      .when('/project/:project/add-config-volume', {
+        templateUrl: 'views/add-config-volume.html',
+        controller: 'AddConfigVolumeController'
+      })
       .when('/project/:project/create', {
         templateUrl: 'views/create.html',
         controller: 'CreateController',

app/scripts/controllers/addConfigVolume.js

@@ -0,0 +1,233 @@
+'use strict';
+
+/**
+ * @ngdoc function
+ * @name openshiftConsole.controller:AddConfigVolumeController
+ * @description
+ * # AddConfigVolumeController
+ * Controller of the openshiftConsole
+ */
+angular.module('openshiftConsole')
+  .controller('AddConfigVolumeController',
+              function($filter,
+                       $routeParams,
+                       $scope,
+                       $window,
+                       APIService,
+                       BreadcrumbsService,
+                       DataService,
+                       Navigate,
+                       ProjectsService,
+                       StorageService) {
+    if (!$routeParams.kind || !$routeParams.name) {
+      Navigate.toErrorPage("Kind or name parameter missing.");
+      return;
+    }
+
+    var supportedKinds = [
+      'Deployment',
+      'DeploymentConfig',
+      'ReplicaSet',
+      'ReplicationController'
+    ];
+
+    if (!_.includes(supportedKinds, $routeParams.kind)) {
+      Navigate.toErrorPage("Volumes are not supported for kind " + $routeParams.kind + ".");
+      return;
+    }
+
+    var resourceGroupVersion = {
+      resource: APIService.kindToResource($routeParams.kind),
+      group: $routeParams.group
+    };
+
+    $scope.alerts = {};
+    $scope.projectName = $routeParams.project;
+    $scope.kind = $routeParams.kind;
+    $scope.name = $routeParams.name;
+    $scope.attach = {
+      allContainers: true,
+      pickKeys: false
+    };
+    $scope.forms = {};
+
+    $scope.breadcrumbs = BreadcrumbsService.getBreadcrumbs({
+      name: $routeParams.name,
+      kind: $routeParams.kind,
+      namespace: $routeParams.project,
+      subpage: 'Add Config Files',
+      includeProject: true
+    });
+
+    var humanizeKind = $filter('humanizeKind');
+    $scope.groupByKind = function(object) {
+      return humanizeKind(object.kind);
+    };
+
+    var resetItems = function() {
+      // Add an empty item so one appears when the section is first expanded.
+      _.set($scope, 'attach.items', [{}]);
+    };
+
+    // Clear the items if the source has changed.
+    $scope.$watch('attach.source', resetItems);
+
+    var setDirty = function() {
+      $scope.forms.addConfigVolumeForm.$setDirty();
+    };
+
+    $scope.addItem = function() {
+      $scope.attach.items.push({});
+      setDirty();
+    };
+
+    $scope.removeItem = function(index) {
+      $scope.attach.items.splice(index, 1);
+      setDirty();
+    };
+
+    ProjectsService
+      .get($routeParams.project)
+      .then(_.spread(function(project, context) {
+        $scope.project = project;
+
+        var orderByDisplayName = $filter('orderByDisplayName');
+        var getErrorDetails = $filter('getErrorDetails');
+        var generateName = $filter('generateName');
+
+        var displayError = function(errorMessage, errorDetails) {
+          $scope.disableInputs = true;
+          $scope.alerts['attach-persistent-volume-claim'] = {
+            type: "error",
+            message: errorMessage,
+            details: errorDetails
+          };
+        };
+
+        DataService.get(resourceGroupVersion, $routeParams.name, context, { errorNotification: false }).then(
+          function(object) {
+            $scope.targetObject = object;
+            $scope.breadcrumbs = BreadcrumbsService.getBreadcrumbs({
+              object: object,
+              project: project,
+              subpage: 'Add Config Files',
+              includeProject: true
+            });
+          },
+          function(e) {
+            $scope.error = e;
+          }
+        );
+
+        DataService.list("configmaps", context, null, { errorNotification: false }).then(function(configMapData) {
+          $scope.configMaps = orderByDisplayName(configMapData.by("metadata.name"));
+        }, function(e) {
+          if (e.status === 403) {
+            $scope.configMaps = [];
+            return;
+          }
+
+          displayError('Could not load config maps', getErrorDetails(e));
+        });
+        DataService.list("secrets", context, null, { errorNotification: false }).then(function(secretData) {
+          $scope.secrets = orderByDisplayName(secretData.by("metadata.name"));
+        }, function(e) {
+          if (e.status === 403) {
+            $scope.secrets = [];
+            return;
+          }
+
+          displayError('Could not load secrets', getErrorDetails(e));
+        });
+
+        var isContainerSelected = function(container) {
+          return $scope.attach.allContainers || $scope.attach.containers[container.name];
+        };
+
+        // Look at the existing mount paths so that we can warn if the new value is not unique.
+        var updateMountPaths = function() {
+          var podTemplate = _.get($scope, 'targetObject.spec.template');
+          $scope.existingMountPaths = StorageService.getMountPaths(podTemplate, isContainerSelected);
+        };
+
+        $scope.$watchGroup(['targetObject', 'attach.allContainers'], updateMountPaths);
+        $scope.$watch('attach.containers', updateMountPaths, true);
+
+        // Make sure the path for each item is unique.
+        var updateItemPaths = function() {
+          // Call `_.compact` to remove empty values.
+          var paths = _.map($scope.attach.items, 'path');
+          $scope.itemPaths = _.compact(paths);
+        };
+        $scope.$watch('attach.items', updateItemPaths, true);
+
+        $scope.addVolume = function() {
+          if ($scope.forms.addConfigVolumeForm.$invalid) {
+            return;
+          }
+
+          var resource = $scope.targetObject;
+          var source = _.get($scope, 'attach.source');
+          var podTemplate = _.get(resource, 'spec.template');
+          var name = generateName('volume-');
+          var mountPath = _.get($scope, 'attach.mountPath');
+          var newVolumeMount = {
+            name: name,
+            mountPath: mountPath
+          };
+
+          // The volume mount is read-only for secrets.
+          if (source.kind === 'Secret') {
+            newVolumeMount.readOnly = true;
+          }
+
+          // For each selected container, add the new volume mount.
+          _.each(podTemplate.spec.containers, function(container) {
+            if (isContainerSelected(container)) {
+              container.volumeMounts = container.volumeMounts || [];
+              container.volumeMounts.push(newVolumeMount);
+            }
+          });
+
+          var newVolume = {
+            name: name
+          };
+
+          var items;
+          if ($scope.attach.pickKeys) {
+            items = $scope.attach.items;
+          }
+
+          switch (source.kind) {
+          case 'ConfigMap':
+            newVolume.configMap = {
+              name: source.metadata.name,
+              items: items
+            };
+            break;
+          case 'Secret':
+            newVolume.secret = {
+              secretName: source.metadata.name,
+              items: items
+            };
+            break;
+          }
+
+          podTemplate.spec.volumes = podTemplate.spec.volumes || [];
+          podTemplate.spec.volumes.push(newVolume);
+
+          // Clear any previous alerts.
+          $scope.alerts = {};
+
+          $scope.disableInputs = true;
+          DataService.update(resourceGroupVersion, resource.metadata.name, $scope.targetObject, context).then(
+            function() {
+              $window.history.back();
+            },
+            function(result) {
+              displayError("An error occurred attaching the persistent volume claim to the " + $filter('humanizeKind')($routeParams.kind) + ".", getErrorDetails(result));
+            }
+          );
+        };
+    }));
+  });

app/scripts/controllers/attachPVC.js

@@ -53,10 +53,8 @@ angular.module('openshiftConsole')
       persistentVolumeClaim: null,
       volumeName: null,
       mountPath: null,
-      containers: {
-        all: true,
-        individual: {}
-      }
+      allContainers: true,
+      containers: {}
     };
 
     $scope.breadcrumbs = BreadcrumbsService.getBreadcrumbs({
@@ -88,20 +86,31 @@ angular.module('openshiftConsole')
           };
         };
 
+        var isContainerSelected = function(container) {
+          return $scope.attach.allContainers || $scope.attach.containers[container.name];
+        };
+
+        // Look at the existing mount paths so that we can warn if the new value is not unique.
+        var updateMountPaths = function() {
+          var podTemplate = _.get($scope, 'attach.resource.spec.template');
+          $scope.existingMountPaths = StorageService.getMountPaths(podTemplate, isContainerSelected);
+        };
+        $scope.$watchGroup(['attach.resource', 'attach.allContainers'], updateMountPaths);
+        $scope.$watch('attach.containers', updateMountPaths, true);
+
         // load resources required to show the page (list of pvcs and deployment or deployment config)
         var load = function() {
           DataService.get(resourceGroupVersion, $routeParams.name, context).then(
             function(resource) {
-              angular.forEach(resource.spec.template.spec.containers, function(container) {
-                $scope.attach.containers.individual[container.name] = true;
-              });
               $scope.attach.resource = resource;
               $scope.breadcrumbs = BreadcrumbsService.getBreadcrumbs({
                 object: resource,
                 project: project,
                 subpage: 'Add Storage',
                 includeProject: true
               });
+              var podTemplate = _.get(resource, 'spec.template');
+              $scope.existingVolumeNames = StorageService.getVolumeNames(podTemplate);
             },
             function(e) {
               displayError($routeParams.name + " could not be loaded.", getErrorDetails(e));
@@ -116,55 +125,8 @@ angular.module('openshiftConsole')
           });
         };
 
-        var isVolumeNameUsed = function(name, podTemplate) {
-          if (podTemplate.spec.volumes) {
-            for (var i = 0; i < podTemplate.spec.volumes.length; i++) {
-              var volume = podTemplate.spec.volumes[i];
-              if (volume.name === name) {
-                $scope.isVolumeNameUsed = true;
-                return true;
-              }
-            }
-          }
-          $scope.isVolumeNameUsed = false;
-          return false;
-        };
-
-        var isVolumeMountPathUsed = function(name, mountPath, podTemplate) {
-          if (podTemplate.spec.containers) {
-            for (var i = 0; i < podTemplate.spec.containers.length; i++) {
-              var container = podTemplate.spec.containers[i];
-              if ($scope.attach.containers.all || $scope.attach.containers.individual[container.name]) {
-                if (container.volumeMounts) {
-                  for (var j = 0; j < container.volumeMounts.length; j++) {
-                    var volumeMount = container.volumeMounts[j];
-                    if (volumeMount.mountPath === mountPath && name !== volumeMount.Name) {
-                      $scope.isVolumeMountPathUsed = true;
-                      return true;
-                    }
-                  }
-                }
-              }
-            }
-          }
-          $scope.isVolumeMountPathUsed = false;
-          return false;
-        };
-
         load();
 
-        $scope.containerToAttachProvided = function() {
-          if ($scope.attach.containers.all) {
-            return true;
-          }
-          for (var key in $scope.attach.containers.individual) {
-            if ($scope.attach.containers.individual[key] === true) {
-              return true;
-            }
-          }
-          return false;
-        };
-
         $scope.attachPVC = function() {
           $scope.disableInputs = true;
 
@@ -179,23 +141,10 @@ angular.module('openshiftConsole')
             var persistentVolumeClaim = $scope.attach.persistentVolumeClaim;
             var name = $scope.attach.volumeName;
             var mountPath = $scope.attach.mountPath;
-
-            // check the volume name wanted was not yet used in this pod template
-            if (isVolumeNameUsed(name, podTemplate)) {
-              $scope.disableInputs = false;
-              return;
-            }
-
             if (mountPath) {
-              // if we want to mount, check if the mount path is unique in this pod template 
-              if (isVolumeMountPathUsed(name, mountPath, podTemplate)) {
-                $scope.disableInputs = false;
-                return;
-              }
-
               // for each container in the pod spec, add the new volume mount
               angular.forEach(podTemplate.spec.containers, function(container) {
-                if ($scope.attach.containers.all || $scope.attach.containers.individual[container.name]) {
+                if (isContainerSelected(container)) {
                   var newVolumeMount = StorageService.createVolumeMount(name, mountPath);
                   if (!container.volumeMounts) {
                     container.volumeMounts = [];