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.

ansibleworks/ui/static/js/app.js

@@ -54,7 +54,8 @@ angular.module('ansible', [
     'HostsHelper',
     'ParseHelper',
     'ChildrenHelper',
-    'EventsHelper'
+    'EventsHelper',
+    'ProjectPathHelper'
      ])
     .config(['$routeProvider', function($routeProvider) {
         $routeProvider.

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'
                           ];

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',
+                label: 'Project Path',
-                type: 'text',
+                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'
                 }
             },
 

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 });
+                });
+        }
+        }]);

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) ) {

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>