Project base path now displayed on Project detail page. Project path (the subdir under base path) is now selected from a drop-down. Using /api/v1/config to determine base path and drop-down values. Added help text pop-overs that should eliminate confussion around how to setup project directory structure.

2026-01-11 10:00:01 -03:30 · 2013-06-21 13:36:31 -04:00 · 2013-06-21 13:36:31 -04:00 · 5495709a61
commit 5495709a61
parent d5705ffdd0
6 changed files with 80 additions and 13 deletions
--- a/ansibleworks/ui/static/js/app.js
+++ b/ansibleworks/ui/static/js/app.js
@ -54,7 +54,8 @@ angular.module('ansible', [
    'HostsHelper',
    'ParseHelper',
    'ChildrenHelper',
-    'EventsHelper'
+    'EventsHelper',
+    'ProjectPathHelper'
     ])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider.
--- a/ansibleworks/ui/static/js/controllers/Projects.js
+++ b/ansibleworks/ui/static/js/controllers/Projects.js
@ -153,7 +153,7 @@ ProjectsList.$inject = [ '$scope', '$rootScope', '$location', '$log', '$routePar

 function ProjectsAdd ($scope, $rootScope, $compile, $location, $log, $routeParams, ProjectsForm, 
                      GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, ClearScope, 
-                      GetBasePath, ReturnToCaller) 
+                      GetBasePath, ReturnToCaller, GetProjectPath) 
 {
   ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                                //scope.
@ -165,9 +165,11 @@ function ProjectsAdd ($scope, $rootScope, $compile, $location, $log, $routeParam
   var defaultUrl = GetBasePath('projects');
   var scope = generator.inject(form, {mode: 'add', related: false});
   var id = $routeParams.id;
+   var master = {};
+
   generator.reset();
-   
   LoadBreadCrumbs();
+   GetProjectPath({ scope: scope, master: master });

   // Save
   scope.formSave = function() {
@ -190,19 +192,22 @@ function ProjectsAdd ($scope, $rootScope, $compile, $location, $log, $routeParam
   // Cancel
   scope.formReset = function() {
      $rootScope.flashMessage = null;
-      form.reset();
+      generator.reset();
+      for (var fld in master) {
+          scope[fld] = master[fld];
+      }
      }; 
 }

 ProjectsAdd.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'ProjectsForm', 
                        'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'ClearScope', 'GetBasePath',
-                        'ReturnToCaller'
+                        'ReturnToCaller', 'GetProjectPath'
                        ];


 function ProjectsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams, ProjectsForm, 
                       GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, RelatedSearchInit,
-                       RelatedPaginateInit, Prompt, ClearScope, GetBasePath, ReturnToCaller) 
+                       RelatedPaginateInit, Prompt, ClearScope, GetBasePath, ReturnToCaller, GetProjectPath) 
 {
   ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                                //scope.
@ -218,6 +223,9 @@ function ProjectsEdit ($scope, $rootScope, $compile, $location, $log, $routePara
   var master = {};
   var id = $routeParams.id;
   var relatedSets = {}; 
+   
+   scope.project_local_paths = [];
+   scope.base_dir = ''; 

   // After the project is loaded, retrieve each related set
   if (scope.projectLoadedRemove) {
@ -227,6 +235,7 @@ function ProjectsEdit ($scope, $rootScope, $compile, $location, $log, $routePara
       for (var set in relatedSets) {
           scope.search(relatedSets[set].iterator);
       }
+       GetProjectPath({ scope: scope, master: master });
       });

   // Retrieve detail record and prepopulate the form
@ -276,7 +285,7 @@ function ProjectsEdit ($scope, $rootScope, $compile, $location, $log, $routePara

   // Reset the form
   scope.formReset = function() {
-      form.reset();
+      generator.reset();
      for (var fld in master) {
          scope[fld] = master[fld];
      }
@ -319,5 +328,6 @@ function ProjectsEdit ($scope, $rootScope, $compile, $location, $log, $routePara

 ProjectsEdit.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'ProjectsForm', 
                         'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'RelatedSearchInit',
-                         'RelatedPaginateInit', 'Prompt', 'ClearScope', 'GetBasePath', 'ReturnToCaller'
+                         'RelatedPaginateInit', 'Prompt', 'ClearScope', 'GetBasePath', 'ReturnToCaller', 
+                         'GetProjectPath'
                          ];
--- a/ansibleworks/ui/static/js/forms/Projects.js
+++ b/ansibleworks/ui/static/js/forms/Projects.js
@ -30,11 +30,29 @@ angular.module('ProjectFormDefinition', [])
                addRequired: false,
                editRequired: false
                },
+            base_dir: {
+                label: 'Project Base Path',
+                type: 'textarea',
+                "class": 'span6',
+                showonly: true,
+                awPopOver: '<p>Base path used for locating playbooks. Directories found inside this path will be listed in the Project Path drop-down. ' +
+                  'Together the base path and selected project path provide the full path used to locate playbooks for this project.</p>' + 
+                  '<p>Use PROJECTS_ROOT in your environment settings file to determine the base path value.</p>',
+                dataTitle: 'Project Base Path',
+                dataPlacement: 'right'
+                },
            local_path: { 
-                label: 'Local Path',
-                type: 'text',
+                label: 'Project Path',
+                type: 'select',
+                id: 'local-path-select',
+                ngOptions: 'path for path in project_local_paths',
                addRequired: true,
-                editRequired: true
+                editRequired: true,
+                awPopOver: '<p>Select from the list of directories found in the base path.' +
+                  'Together the base path and selected project path provide the full path used to locate playbooks for this project.</p>' + 
+                  '<p>Use PROJECTS_ROOT in your environment settings file to determine the base path value.</p>',
+                dataTitle: 'Project Path',
+                dataPlacement: 'right'
                }
            },

--- a/ansibleworks/ui/static/js/helpers/ProjectPath.js
+++ b/ansibleworks/ui/static/js/helpers/ProjectPath.js
@ -0,0 +1,37 @@
+/*********************************************
+ *  Copyright (c) 2013 AnsibleWorks, Inc.
+ *
+ *  ProjectPathHelper
+ *
+ *  Use GetProjectPath({ scope: <scope>, master: <master obj> }) to 
+ *  load scope.project_local_paths (array of options for drop-down) and
+ *  scope.base_dir (readonly field). 
+ *
+ */
+
+angular.module('ProjectPathHelper', ['RestServices', 'Utilities'])  
+    .factory('GetProjectPath', ['Alert', 'Rest', 'GetBasePath','ProcessErrors', 
+    function(Alert, Rest, GetBasePath, ProcessErrors) {
+    return function(params) {
+        
+        var scope = params.scope;
+        var master = params.master; 
+
+        Rest.setUrl( GetBasePath('config') );
+        Rest.get()
+            .success( function(data, status, headers, config) {
+                var opts = [];
+                for (var i=0; i < data.project_local_paths.length; i++) {
+                   opts.push(data.project_local_paths[i]);
+                }
+                scope.project_local_paths = opts;
+                scope.base_dir = data.project_base_dir;
+                master.base_dir = scope.base_dir;  // Keep in master object so that it doesn't get
+                                                   // wiped out on form reset.
+                })
+            .error( function(data, status, headers, config) {
+                ProcessErrors(scope, data, status, null,
+                   { hdr: 'Error!', msg: 'Failed to access API config. GET status: ' + status });
+                });
+        }
+        }]);
--- a/ansibleworks/ui/static/lib/ansible/form-generator.js
+++ b/ansibleworks/ui/static/lib/ansible/form-generator.js
@ -165,7 +165,7 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
                html += (field.placeholder) ? this.attr(field,'placeholder') : "";
                html += (options.mode == 'edit' && field.editRequired) ? "required " : "";
                html += (options.mode == 'add' && field.addRequired) ? "required " : "";
-                html += (field.readonly) ? "readonly " : "";
+                html += (field.readonly || field.showonly) ? "readonly " : "";
                html += (field.awPassMatch) ? "awpassmatch=\"" + field.associated + "\" " : "";
                html += (field.capitalize) ? "capitalize " : "";
                html += (field.ask) ? "ng-disabled=\"" + fld + "_ask\" " : "";
@ -230,7 +230,7 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
             html += (field.placeholder) ? this.attr(field,'placeholder') : "";
             html += (options.mode == 'edit' && field.editRequired) ? "required " : "";
             html += (options.mode == 'add' && field.addRequired) ? "required " : "";
-             html += (field.readonly) ? "readonly " : "";
+             html += (field.readonly || field.showonly) ? "readonly " : "";
             html += "></textarea><br />\n";
             // Add error messages
             if ( (options.mode == 'add' && field.addRequired) || (options.mode == 'edit' && field.editRequired) ) {
--- a/ansibleworks/ui/templates/ui/index.html
+++ b/ansibleworks/ui/templates/ui/index.html
@ -76,6 +76,7 @@
  <script src="{{ STATIC_URL }}js/helpers/Parse.js"></script>
  <script src="{{ STATIC_URL }}js/helpers/Events.js"></script>
  <script src="{{ STATIC_URL }}js/helpers/Children.js"></script>
+  <script src="{{ STATIC_URL }}js/helpers/ProjectPath.js"></script>
  <script src="{{ STATIC_URL }}lib/ansible/directives.js"></script>
  <script src="{{ STATIC_URL }}lib/ansible/filters.js"></script>
  <script src="{{ STATIC_URL }}lib/ansible/api-loader.js"></script>