"Add to Application" for config maps

Implement "Add to Application" on the config map page like we've already done for secrets.
openshift · Sep 16, 2017 · faadfc7 · faadfc7
1 parent 1466f66
commit faadfc7
Show file tree

Hide file tree

Showing 12 changed files with 262 additions and 165 deletions.
diff --git a/app/index.html b/app/index.html
@@ -328,7 +328,7 @@ <h1>JavaScript Required</h1>
         <script src="scripts/directives/labels.js"></script>
         <script src="scripts/directives/lifecycleHook.js"></script>
         <script src="scripts/directives/actionChip.js"></script>
-        <script src="scripts/directives/addSecretToApplication.js"></script>
+        <script src="scripts/directives/addConfigToApplication.js"></script>
         <script src="scripts/directives/templateopt.js"></script>
         <script src="scripts/directives/tasks.js"></script>
         <script src="scripts/directives/catalog.js"></script>

diff --git a/app/scripts/controllers/configMap.js b/app/scripts/controllers/configMap.js
@@ -37,9 +37,20 @@ angular.module('openshiftConsole')
       }
     };
 
+    $scope.addToApplicationVisible = false;
+
+    $scope.addToApplication = function() {
+      $scope.addToApplicationVisible = true;
+    };
+
+    $scope.closeAddToApplication = function() {
+      $scope.addToApplicationVisible = false;
+    };
+
     ProjectsService
       .get($routeParams.project)
       .then(_.spread(function(project, context) {
+        $scope.project = project;
         DataService
           .get("configmaps", $routeParams.configMap, context, { errorNotification: false })
           .then(function(configMap) {

diff --git a/...ipts/directives/addSecretToApplication.js → ...ipts/directives/addConfigToApplication.js b/...ipts/directives/addSecretToApplication.js → ...ipts/directives/addConfigToApplication.js
@@ -1,6 +1,6 @@
 "use strict";
 (function() {
-  angular.module("openshiftConsole").component('addSecretToApplication', {
+  angular.module("openshiftConsole").component('addConfigToApplication', {
     controller: [
       '$filter',
       '$scope',
@@ -10,19 +10,19 @@
       'Navigate',
       'NotificationsService',
       'StorageService',
-      AddSecretToApplication
+      AddConfigToApplication
     ],
     controllerAs: 'ctrl',
     bindings: {
       project: '<',
-      secret: '<',
+      apiObject: '<',
       onComplete: '<',
       onCancel: '<'
     },
-    templateUrl: 'views/directives/add-secret-to-application.html'
+    templateUrl: 'views/directives/add-config-to-application.html'
   });
 
-  function AddSecretToApplication($filter, $scope, APIService, ApplicationsService, DataService, Navigate, NotificationsService, StorageService) {
+  function AddConfigToApplication($filter, $scope, APIService, ApplicationsService, DataService, Navigate, NotificationsService, StorageService) {
     var ctrl = this;
 
     var getApplications = function() {
@@ -41,8 +41,8 @@
 
       getApplications();
 
-      var keyValidator = new RegExp("^[A-Za-z_]{1}[A-Za-z0-9_]*$");
-      ctrl.hasInvalidEnvVars = _.some(ctrl.secret.data, function(value, key) {
+      var keyValidator = new RegExp("^[A-Za-z_][A-Za-z0-9_]*$");
+      ctrl.hasInvalidEnvVars = _.some(ctrl.apiObject.data, function(value, key) {
         return !keyValidator.test(key);
       });
     };
@@ -70,11 +70,19 @@
       ctrl.disableInputs = true;
 
       if (ctrl.addType === 'env') {
-        var newEnvFrom = {
-          secretRef: {
-            name: ctrl.secret.metadata.name
-          }
-        };
+        var newEnvFrom = {};
+        switch (ctrl.apiObject.kind) {
+          case 'Secret':
+            newEnvFrom.secretRef = {
+              name: ctrl.apiObject.metadata.name
+            };
+            break;
+          case 'ConfigMap':
+            newEnvFrom.configMapRef = {
+              name: ctrl.apiObject.metadata.name
+            };
+            break;
+        }
 
         // For each container, add the new volume mount.
         _.each(podTemplate.spec.containers, function(container) {
@@ -85,7 +93,7 @@
         });
       } else {
         var generateName = $filter('generateName');
-        var name = generateName(ctrl.secret.metadata.name + '-');
+        var name = generateName(ctrl.apiObject.metadata.name + '-');
         var newVolumeMount = {
           name: name,
           mountPath: ctrl.mountVolume,
@@ -101,18 +109,28 @@
         });
 
         var newVolume = {
-          name: name,
-          secret: {
-            secretName: ctrl.secret.metadata.name
-          }
+          name: name
         };
 
+        switch (ctrl.apiObject.kind) {
+          case 'Secret':
+            newVolume.secret = {
+              secretName: ctrl.apiObject.metadata.name
+            };
+            break;
+          case 'ConfigMap':
+            newVolume.configMap = {
+              name: ctrl.apiObject.metadata.name
+            };
+            break;
+        }
+
         podTemplate.spec.volumes = podTemplate.spec.volumes || [];
         podTemplate.spec.volumes.push(newVolume);
       }
 
       var humanizeKind = $filter('humanizeKind');
-      var sourceKind = humanizeKind(ctrl.secret.kind);
+      var sourceKind = humanizeKind(ctrl.apiObject.kind);
       var targetKind = humanizeKind(applicationToUpdate.kind);
       var context = {
         namespace: ctrl.project.metadata.name
@@ -122,7 +140,7 @@
         function() {
           NotificationsService.addNotification({
             type: "success",
-            message: "Successfully added " + sourceKind + " " + ctrl.secret.metadata.name + " to " + targetKind + " " + applicationToUpdate.metadata.name + ".",
+            message: "Successfully added " + sourceKind + " " + ctrl.apiObject.metadata.name + " to " + targetKind + " " + applicationToUpdate.metadata.name + ".",
             links: [{
               href: Navigate.resourceURL(applicationToUpdate),
               label: "View " + humanizeKind(applicationToUpdate.kind, true)
@@ -137,7 +155,7 @@
 
           NotificationsService.addNotification({
             type: "error",
-            message: "An error occurred  adding " + sourceKind + " " + ctrl.secret.metadata.name + " to " + targetKind + " " + applicationToUpdate.metadata.name + ". " +
+            message: "An error occurred  adding " + sourceKind + " " + ctrl.apiObject.metadata.name + " to " + targetKind + " " + applicationToUpdate.metadata.name + ". " +
             getErrorDetails(result)
           });
         }).finally(function() {

diff --git a/app/styles/_add-config-to-application.less b/app/styles/_add-config-to-application.less
@@ -0,0 +1,69 @@
+.add-config-to-application {
+  .catalogs-overlay-panel {
+    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;
+
+    h3 {
+      margin: 18px 0;
+      padding-left: 15px;
+    }
+  }
+
+  .dialog-body {
+    padding: 20px;
+
+    .add-choice {
+      margin-bottom: 10px;
+    }
+    .button-group {
+      .btn {
+        margin-left: 10px;
+        &:first-of-type {
+          margin-left: 0;
+        }
+      }
+    }
+    legend {
+      border-bottom: 0;
+      font-size:  @font-size-base + 1;
+      font-weight: 600;
+      margin-bottom: 10px;
+    }
+    .radio {
+      margin-top: 0;
+    }
+  }
+
+  .env-warning {
+    margin-left: 20px;
+  }
+
+  .updating {
+    background-color: @color-pf-white;
+    bottom: 55px;
+    left: 0;
+    padding-top: 60px;
+    position: absolute;
+    right: 0;
+    top: 55px;
+    z-index: 1000;
+  }
+
+  .volume-options {
+    margin-left: 20px;
+  }
+}
diff --git a/app/styles/_secrets.less b/app/styles/_secrets.less
@@ -1,73 +1,3 @@
-.add-secret-to-application {
-  .catalogs-overlay-panel {
-    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;
-
-    h3 {
-      margin: 18px 0;
-      padding-left: 15px;
-    }
-  }
-
-  .dialog-body {
-    padding: 20px;
-
-    .add-choice {
-      margin-bottom: 10px;
-    }
-    .button-group {
-      .btn {
-        margin-left: 10px;
-        &:first-of-type {
-          margin-left: 0;
-        }
-      }
-    }
-    legend {
-      border-bottom: 0;
-      font-size:  @font-size-base + 1;
-      font-weight: 600;
-      margin-bottom: 10px;
-    }
-    .radio {
-      margin-top: 0;
-    }
-  }
-
-  .env-warning {
-    margin-left: 20px;
-  }
-
-  .updating {
-    background-color: @color-pf-white;
-    bottom: 55px;
-    left: 0;
-    padding-top: 60px;
-    position: absolute;
-    right: 0;
-    top: 55px;
-    z-index: 1000;
-  }
-
-  .volume-options {
-    margin-left: 20px;
-  }
-}
-
 .osc-secrets-form {
   .advanced-secrets,
   .basic-secrets {

diff --git a/app/styles/main.less b/app/styles/main.less
@@ -65,3 +65,4 @@
 @import "_wizard.less";
 @import "_builds.less";
 @import "_editor.less";
+@import "_add-config-to-application.less";
diff --git a/app/views/browse/config-map.html b/app/views/browse/config-map.html
@@ -10,15 +10,31 @@ <h2>The config map could not be loaded.</h2>
       </div>
       <div ng-if="loaded && !error">
         <h1 class="contains-actions">
-          <div class="pull-right dropdown" ng-if="'configmaps' | canIDoAny">
-            <button type="button" class="dropdown-toggle btn btn-default actions-dropdown-btn hidden-xs" data-toggle="dropdown">
+          <div class="pull-right dropdown">
+            <!--
+              `canIAddToProject` returns true if you can update any resource.
+              We'll use this as a best-effort check to see if we should show the
+              button.
+            -->
+            <button ng-if="project.metadata.name | canIAddToProject"
+                    type="button"
+                    class="btn btn-default hidden-xs"
+                    ng-click="addToApplication()">
+              Add to Application
+            </button>
+            <button ng-if="'configmaps' | canIDoAny" type="button" class="dropdown-toggle btn btn-default actions-dropdown-btn hidden-xs" data-toggle="dropdown">
               Actions
               <span class="caret"></span>
             </button>
+            <!-- Check `canIAddToProject` for the mobile menu since "Add to Application" uses it. -->
             <a href=""
+               ng-if="project.metadata.name | canIAddToProject"
                class="dropdown-toggle actions-dropdown-kebab visible-xs-inline"
-               data-toggle="dropdown"><i class="fa fa-ellipsis-v"></i><span class="sr-only">Actions</span></a>
+               data-toggle="dropdown"><i class="fa fa-ellipsis-v" aria-hidden="true"></i><span class="sr-only">Actions</span></a>
             <ul class="dropdown-menu dropdown-menu-right actions action-button">
+              <li ng-if="project.metadata.name | canIAddToProject" class="visible-xs">
+                <a href="" role="button" ng-click="addToApplication()">Add to Application</a>
+              </li>
               <li ng-if="'configmaps' | canI : 'update'">
                 <a ng-href="{{configMap | editResourceURL}}" role="button">Edit</a>
               </li>
@@ -58,7 +74,7 @@ <h2>The config map has no items.</h2>
                     <truncate-long-text
                         content="value"
                         limit="1024"
-                        newlineLimit="20"
+                        newline-limit="20"
                         expandable="true">
                     </truncate-long-text>
                   </td>
@@ -70,5 +86,8 @@ <h2>The config map has no items.</h2>
         </div><!-- /col-* -->
       </div>
     </div>
+    <overlay-panel class="add-config-to-application" show-panel="addToApplicationVisible" show-close="true" handle-close="closeAddToApplication">
+      <add-config-to-application project="project" api-object="configMap" on-cancel="closeAddToApplication" on-complete="closeAddToApplication"></add-config-to-application>
+    </overlay-panel>
   </div><!-- /middle-content -->
 </div>