Job detail page now working. Form generator now supports 2 column layout and a status fields section.

lib/ui/static/css/ansible-ui.css

@@ -244,7 +244,7 @@
     margin-left: 15px;
     margin-top: 3px;
  }
- /* Display list actions */
+ /* End Display list actions */
 
  .well {
     padding-bottom: 0;
@@ -256,7 +256,7 @@
     background-color: #fff;
  }
 
- .job-error, .job-failure {
+ .job-error, .job-failed {
     color: #da4f49;
  }
 
@@ -267,4 +267,5 @@
  .job-pending, .job-running {
     color: #5bb75b;
  }
+ /* End Jobs Page */
 

lib/ui/static/js/app.js

@@ -45,12 +45,16 @@ angular.module('ansible', [
     'JobTemplateFormDefinition',
     'JobTemplateHelper',
     'ProjectsListDefinition',
-    'JobsListDefinition'
+    'JobsListDefinition',
+    'JobFormDefinition'
      ])
     .config(['$routeProvider', function($routeProvider) {
         $routeProvider.
             when('/jobs',
                 { templateUrl: urlPrefix + 'partials/jobs.html', controller: JobsList }).
+
+            when('/jobs/:id',
+                { templateUrl: urlPrefix + 'partials/jobs.html', controller: JobsEdit }).
             
             when('/job_templates',
                 { templateUrl: urlPrefix + 'partials/job_templates.html', controller: JobTemplatesList }).

lib/ui/static/js/controllers/Groups.js

@@ -155,7 +155,7 @@ function GroupsAdd ($scope, $rootScope, $compile, $location, $log, $routeParams,
 
    // Inject dynamic view
    var defaultUrl = ($routeParams.group_id) ? GetBasePath('groups') + $routeParams.group_id + '/children/' : 
-       GetBasePath('inventory') + $routeParams.inventory_id + '/';
+       GetBasePath('inventory') + $routeParams.inventory_id + '/groups/';
    var form = GroupForm;
    var generator = GenerateForm;
    var scope = generator.inject(form, {mode: 'add', related: false});

lib/ui/static/js/controllers/JobTemplates.js

@@ -136,8 +136,7 @@ function JobTemplatesList ($scope, $rootScope, $location, $log, $routeParams, Re
        }
 
     function postJob(data) {
-        // Once we have a credential and all required passwords, use this
+        // Create the job record
-        // to create and start a job
         (scope.credentialWatchRemove) ? scope.credentialWatchRemove() : null;
         var dt = new Date().toISOString();
         Rest.setUrl(data.related.jobs);
@@ -155,17 +154,31 @@ function JobTemplatesList ($scope, $rootScope, $location, $log, $routeParams, Re
             extra_vars: data.extra_vars
             })
             .success( function(data, status, headers, config) {
-                // Prompt for passwords and start the job
+                if (data.passwords_needed_to_start.length > 0) {
-                PromptPasswords({
+                   // Passwords needed. Prompt for passwords, then start job.
-                    scope: scope,
+                   PromptPasswords({
-                    passwords: data.passwords_needed_to_start,
+                       scope: scope,
-                    start_url: data.related.start
+                       passwords: data.passwords_needed_to_start,
-                    });
+                       start_url: data.related.start
-            })
+                       });
+                }
+                else {
+                   // No passwords needed, start the job!
+                   Rest.setUrl(data.related.start); 
+                   Rest.post()
+                       .success( function(data, status, headers, config) {
+                           $location.path(GetBasePath('jobs'));
+                           })
+                       .error( function(data, status, headers, config) { 
+                           ProcessErrors(scope, data, status, null,
+                               { hdr: 'Error!', msg: 'Failed to start job. POST returned status: ' + status });
+                           });
+                }
+                })
             .error( function(data, status, headers, config) {
                 ProcessErrors(scope, data, status, null,
                    { hdr: 'Error!', msg: 'Failed to create job. POST returned status: ' + status });
-            });
+                });
         };
 
     scope.submitJob = function(id) {

lib/ui/static/js/controllers/Jobs.js

@@ -27,10 +27,242 @@ function JobsList ($scope, $rootScope, $location, $log, $routeParams, Rest, Aler
     scope.search(list.iterator);
 
     LoadBreadCrumbs();
+
+    scope.editJob = function(id) {
+       $location.path($location.path() + '/' + id);
+       }
   
 }
 
 JobsList.$inject = [ '$scope', '$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'JobList',
                      'GenerateList', 'LoadBreadCrumbs', 'Prompt', 'SearchInit', 'PaginateInit', 'ReturnToCaller', 'ClearScope',
                      'ProcessErrors','GetBasePath', 'LookUpInit'
-                     ];
+                     ];
+
+
+function JobsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams, JobForm, 
+                  GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, RelatedSearchInit,
+                  RelatedPaginateInit, ReturnToCaller, ClearScope, InventoryList, CredentialList,
+                  ProjectList, LookUpInit, PromptPasswords, GetBasePath) 
+{
+   ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
+                                //scope.
+
+   var defaultUrl= GetBasePath('jobs');
+   var generator = GenerateForm;
+   var form = JobForm;
+
+   var scope = generator.inject(form, {mode: 'edit', related: true});
+   generator.reset();
+   var base = $location.path().replace(/^\//,'').split('/')[0];
+   var master = {};
+   var id = $routeParams.id;
+   var relatedSets = {}; 
+
+
+   function getPlaybooks(project) {
+       if (project !== null && project !== '' && project !== undefined) {
+           var url = GetBasePath('projects') + project + '/playbooks/';
+           Rest.setUrl(url);
+           Rest.get()
+               .success( function(data, status, headers, config) {                      
+                   scope.playbook_options = [];
+                   for (var i=0; i < data.length; i++) {
+                       scope.playbook_options.push(data[i]);
+                   }
+                   })
+               .error( function(data, status, headers, config) {
+                   ProcessErrors(scope, data, status, form,
+                       { hdr: 'Error!', msg: 'Failed to get playbook list for ' + url +'. GET returned status: ' + status });
+                   });
+       }
+       }
+
+   // Register a watcher on project_name. Refresh the playbook list on change.
+   if (scope.selectPlaybookUnregister) {
+      scope.selectPlaybookUnregister();
+   }
+   scope.selectPlaybookUnregister = scope.$watch('project_name', function(oldValue, newValue) {
+       if (oldValue !== newValue && newValue !== '' && newValue !== null && newValue !== undefined) {
+          scope.playbook = null;
+          getPlaybooks(scope.project);
+       }
+       });
+   
+   // Retrieve each related set and populate the playbook list
+   if (scope.jobLoadedRemove) {
+      scope.jobLoadedRemove();
+   }
+   scope.jobLoadedRemove = scope.$on('jobLoaded', function() {
+       
+       scope[form.name + 'ReadOnly'] = (scope.status == 'new') ? false : true;
+       
+       // Load related sets
+       for (var set in relatedSets) {
+           scope.search(relatedSets[set].iterator);
+       }
+       // Set the playbook lookup
+       getPlaybooks(scope.project);
+       });
+
+   // Our job type options
+   scope.job_type_options = [{ value: 'run', label: 'Run' }, { value: 'check', label: 'Check' }];
+   scope.playbook_options = null;
+   scope.playbook = null; 
+
+   // Retrieve detail record and prepopulate the form
+   Rest.setUrl(defaultUrl + ':id/'); 
+   Rest.get({ params: {id: id} })
+       .success( function(data, status, headers, config) {
+           LoadBreadCrumbs({ path: '/job_templates/' + id, title: data.name });
+           for (var fld in form.fields) {
+              if (data[fld] !== null && data[fld] !== undefined) {  
+                 if (form.fields[fld].type == 'select') {
+                    if (scope[fld + '_options'] && scope[fld + '_options'].length > 0) {
+                       for (var i=0; i < scope[fld + '_options'].length; i++) {
+                           if (data[fld] == scope[fld + '_options'][i].value) {
+                              scope[fld] = scope[fld + '_options'][i];
+                           }
+                       }
+                    }
+                    else {
+                       scope[fld] = data[fld];
+                    }
+                 }
+                 else {
+                    scope[fld] = data[fld];
+                 }
+                 master[fld] = scope[fld];
+              }
+              if (form.fields[fld].type == 'lookup' && data.summary_fields[form.fields[fld].sourceModel]) {
+                  scope[form.fields[fld].sourceModel + '_' + form.fields[fld].sourceField] = 
+                      data.summary_fields[form.fields[fld].sourceModel][form.fields[fld].sourceField];
+                  master[form.fields[fld].sourceModel + '_' + form.fields[fld].sourceField] =
+                      scope[form.fields[fld].sourceModel + '_' + form.fields[fld].sourceField];
+              }
+           }
+           
+           for (var fld in form.statusFields) {
+               if (data[fld] !== null && data[fld] !== undefined) {
+                  scope[fld] = data[fld];
+               }
+           }
+
+           scope.url = data.url; 
+           var related = data.related;
+           for (var set in form.related) {
+               if (related[set]) {
+                  relatedSets[set] = { url: related[set], iterator: form.related[set].iterator };
+               }
+           }
+
+           LookUpInit({
+               scope: scope,
+               form: form,
+               current_item: data.inventory,
+               list: InventoryList, 
+               field: 'inventory' 
+               });
+
+           LookUpInit({
+               scope: scope,
+               form: form,
+               current_item: data.credential,
+               list: CredentialList, 
+               field: 'credential' 
+               });
+
+           LookUpInit({
+               scope: scope,
+               form: form,
+               current_item: data.project,
+               list: ProjectList, 
+               field: 'project'
+               });
+
+           // Initialize related search functions. Doing it here to make sure relatedSets object is populated.
+           RelatedSearchInit({ scope: scope, form: form, relatedSets: relatedSets });
+           RelatedPaginateInit({ scope: scope, relatedSets: relatedSets });
+           scope.$emit('jobLoaded');
+           })
+       .error( function(data, status, headers, config) {
+           ProcessErrors(scope, data, status, form,
+                         { hdr: 'Error!', msg: 'Failed to retrieve job template: ' + $routeParams.id + '. GET status: ' + status });
+           });
+
+   // Save changes to the parent
+   scope.formSave = function() {
+      Rest.setUrl(defaultUrl + $routeParams.id);
+      var data = {}
+      for (var fld in form.fields) {
+          if (form.fields[fld].type == 'select' && fld != 'playbook') {
+             data[fld] = scope[fld].value;
+          }
+          else {
+             data[fld] = scope[fld];
+          }   
+      } 
+      Rest.put(data)
+          .success( function(data, status, headers, config) {
+              var base = $location.path().replace(/^\//,'').split('/')[0];
+              (base == 'job_templates') ? ReturnToCaller() : ReturnToCaller(1);
+              })
+          .error( function(data, status, headers, config) {
+              ProcessErrors(scope, data, status, form,
+                            { hdr: 'Error!', msg: 'Failed to update team: ' + $routeParams.id + '. PUT status: ' + status });
+              });
+      };
+
+   // Cancel
+   scope.formReset = function() {
+      generator.reset();
+      for (var fld in master) {
+          scope[fld] = master[fld];
+      }
+      };
+
+   // Related set: Add button
+   scope.add = function(set) {
+      $rootScope.flashMessage = null;
+      $location.path('/' + base + '/' + $routeParams.id + '/' + set);
+      };
+
+   // Related set: Edit button
+   scope.edit = function(set, id, name) {
+      $rootScope.flashMessage = null;
+      $location.path('/' + base + '/' + $routeParams.id + '/' + set + '/' + id);
+      };
+
+   // Related set: Delete button
+   scope.delete = function(set, itm_id, name, title) {
+      $rootScope.flashMessage = null;
+      
+      var action = function() {
+          var url = defaultUrl + id + '/' + set + '/';
+          Rest.setUrl(url);
+          Rest.post({ id: itm_id, disassociate: 1 })
+              .success( function(data, status, headers, config) {
+                  $('#prompt-modal').modal('hide');
+                  scope.search(form.related[set].iterator);
+                  })
+              .error( function(data, status, headers, config) {
+                  $('#prompt-modal').modal('hide');
+                  ProcessErrors(scope, data, status, null,
+                            { hdr: 'Error!', msg: 'Call to ' + url + ' failed. POST returned status: ' + status });
+                  });      
+          };
+
+       Prompt({ hdr: 'Delete', 
+                body: 'Are you sure you want to remove ' + name + ' from ' + scope.name + ' ' + title + '?',
+                action: action
+                });
+       
+      }
+
+}
+
+JobsEdit.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'JobForm', 
+                     'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'RelatedSearchInit', 
+                     'RelatedPaginateInit', 'ReturnToCaller', 'ClearScope', 'InventoryList', 'CredentialList',
+                     'ProjectList', 'LookUpInit', 'PromptPasswords', 'GetBasePath'
+                     ]; 

lib/ui/static/js/forms/JobTemplates.js

@@ -2,7 +2,7 @@
  *  Copyright (c) 2013 AnsibleWorks, Inc.
  *
  *  JobTemplates.js
- *  Form definition for Credential model
+ *  Form definition for Job Template model
  *
  *
  */

lib/ui/static/js/forms/Jobs.js

@@ -0,0 +1,168 @@
+/*********************************************
+ *  Copyright (c) 2013 AnsibleWorks, Inc.
+ *
+ *  Jobs.js
+ *  Form definition for Jobs model
+ *
+ *
+ */
+angular.module('JobFormDefinition', [])
+    .value(
+    'JobForm', {
+        
+        addTitle: 'Create Job',                          //Legend in add mode
+        editTitle: '{{ name }}',                         //Legend in edit mode
+        name: 'jobs',
+        well: true,
+        twoColumns: true,
+        allowReadonly: true,
+        
+        fields: {
+            name: {
+                label: 'Name',
+                type: 'text',
+                addRequired: true,
+                editRequired: true,
+                column: 1
+                },
+            description: { 
+                label: 'Description',
+                type: 'text',
+                addRequired: false,
+                editRequired: false,
+                column: 1
+                },
+            job_type: {
+                label: 'Job Type',
+                type: 'select',
+                ngOptions: 'type.label for type in job_type_options',
+                default: 'run',
+                addRequired: true, 
+                editRequired: true,
+                column: 1
+                },
+            inventory: {
+                label: 'Inventory',
+                type: 'lookup',
+                sourceModel: 'inventory',
+                sourceField: 'name',
+                addRequired: true,
+                editRequired: true,
+                ngClick: 'lookUpInventory()',
+                column: 1
+                },
+            project: {
+                label: 'Project',
+                type: 'lookup',
+                sourceModel: 'project',
+                sourceField: 'name',
+                addRequired: true,
+                editRequired: true,
+                ngClick: 'lookUpProject()',
+                column: 1
+                },
+            playbook: {
+                label: 'Playbook',
+                type:'select',
+                ngOptions: 'book for book in playbook_options',
+                id: 'playbook-select',
+                addRequired: true, 
+                editRequired: true,
+                column: 1
+                },
+            credential: {
+                label: 'Credential',
+                type: 'lookup',
+                sourceModel: 'credential',
+                sourceField: 'name',
+                ngClick: 'lookUpCredential()',
+                addRequired: false, 
+                editRequired: false,
+                column: 2
+                },
+            forks: {
+                label: 'Forks',
+                type: 'number', 
+                integer: true,
+                min: 0,
+                max: 100,
+                default: 0,
+                addRequired: false, 
+                editRequired: false,
+                column: 2
+                },
+            limit: {
+                label: 'Limit',
+                type: 'text', 
+                addRequired: false, 
+                editRequired: false,
+                column: 2
+                },
+            verbosity: {
+                label: 'Verbosity',
+                type: 'number',
+                integer: true,
+                default: 0,
+                min: 0,
+                max: 3,
+                addRequired: false, 
+                editRequired: false,
+                column: 2
+                },
+            extra_vars: {
+                label: 'Extra Variables',
+                type: 'textarea',
+                rows: 6,
+                class: 'span5',
+                addRequired: false, 
+                editRequired: false,
+                column: 2
+                }
+            },
+
+        buttons: { //for now always generates <button> tags 
+            save: { 
+                label: 'Save', 
+                icon: 'icon-ok',
+                class: 'btn-success',
+                ngClick: 'formSave()',    //$scope.function to call on click, optional
+                ngDisabled: true          //Disable when $pristine or $invalid, optional
+                },
+            reset: { 
+                ngClick: 'formReset()',
+                label: 'Reset',
+                icon: 'icon-remove',
+                ngDisabled: true          //Disabled when $pristine
+                }
+            },
+
+        statusFields: {
+            status: {
+                label: 'Status',
+                type: 'text',
+                readonly: true,
+                icon: 'icon-circle',
+                class: 'job-\{\{ job.status \}\}'
+                },
+            result_stdout: {
+                label: 'Standard Out', 
+                type: 'textarea',
+                readonly: true,
+                rows: 10,
+                class: 'span12'
+                },
+            result_traceback: {
+                label: 'Traceback',
+                type: 'textarea', 
+                readonly: true,
+                rows: 10,
+                class: 'span12'
+                }
+            },
+
+        related: { //related colletions (and maybe items?)
+           
+            }
+            
+    }); //Form
+

lib/ui/static/js/helpers/JobTemplate.js

@@ -21,11 +21,15 @@ angular.module('JobTemplateHelper', [ 'RestServices', 'Utilities', 'CredentialFo
             $('.password-field').each(function(index) {
                 pswd[$(this).attr('name')] = $(this).val();
                 });
-            console.log(pswd);
             Rest.setUrl(start_url); 
             Rest.post(pswd)
-                .success( function(data) { alert('success!'); })
+                .success( function(data, status, headers, config) {
-                .error( function(data) { alert('fail!'); });
+                    $location.path(GetBasPath('jobs'));
+                    })
+                .error( function(data, status, headers, config) { 
+                    ProcessErrors(scope, data, status, null,
+                        { hdr: 'Error!', msg: 'Failed to start job. POST returned status: ' + status });
+                    });
             }
         
         html += html += "<form class=\"form-horizontal\" name=\"password_form\" novalidate>\n";    
@@ -75,7 +79,6 @@ angular.module('JobTemplateHelper', [ 'RestServices', 'Utilities', 'CredentialFo
             html += "</div>\n";
         }
         html += "</form>\n";
-        console.log(html);
         element = angular.element(document.getElementById('password-body'));
         element.html(html);
         $compile(element.contents())(scope);

lib/ui/static/js/lists/Jobs.js

@@ -47,7 +47,6 @@ angular.module('JobsListDefinition', [])
                 icon: 'icon-edit',
                 class: 'btn-mini',
                 awToolTip: 'Edit job',
-                ngDisabled: "job.status != 'new'"
                 },
             summary: {
                 title: 'Summary',

lib/ui/static/lib/ansible/form-generator.js

@@ -142,44 +142,12 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
                });
        },
 
-    build: function(options) {
+    buildField: function(fld, field, options) {
-       //
+           
-       // Generate HTML. Do NOT call this function directly. Called by inject(). Returns an HTML 
+           var html='';
-       // string to be injected into the current view. 
-       //
-       var html = '';
-       
-       if (!this.modal) {
-          //Breadcrumbs
-          html += "<div class=\"nav-path\">\n";
-          html += "<ul class=\"breadcrumb\">\n";
-          html += "<li ng-repeat=\"crumb in breadcrumbs\"><a href=\"{{ '#' + crumb.path }}\">{{ crumb.title | capitalize }}</a> " +
-                  "<span class=\"divider\">/</span></li>\n";
-          html += "<li class=\"active\">";
-          if (options.mode == 'edit') {
-             html += this.form.editTitle;
-          }
-          else {
-             html += this.form.addTitle; 
-          }
-          html += "</li>\n</ul>\n</div>\n";
-       }
-
-       // Start the well
-       if ( this.has('well') ) {
-          html += "<div class=\"well\">\n";
-       }
-
-       html += "<form class=\"form-horizontal\" name=\"" + this.form.name + '_form" id="' + this.form.name + '" novalidate>' + "\n";
-
-       html += "<div ng-show=\"flashMessage != null && flashMessage != undefined\" class=\"alert alert-info\">{{ flashMessage }}</div>\n";
-
-       //fields
-       for (var fld in this.form.fields) {
-           var field = this.form.fields[fld];
 
            //Assuming horizontal form for now. This will need to be more flexible later.
-           
+
            //text fields
            if (field.type == 'text' || field.type == 'password' || field.type == 'email') {
               if ( (! field.readonly) || (field.readonly && options.mode == 'edit') ) {
@@ -405,6 +373,69 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
               html += "</div>\n";
               html += "</div>\n";
            }
+
+           return html;
+       },
+
+    build: function(options) {
+       //
+       // Generate HTML. Do NOT call this function directly. Called by inject(). Returns an HTML 
+       // string to be injected into the current view. 
+       //
+       var html = '';
+       
+       if (!this.modal) {
+          //Breadcrumbs
+          html += "<div class=\"nav-path\">\n";
+          html += "<ul class=\"breadcrumb\">\n";
+          html += "<li ng-repeat=\"crumb in breadcrumbs\"><a href=\"{{ '#' + crumb.path }}\">{{ crumb.title | capitalize }}</a> " +
+                  "<span class=\"divider\">/</span></li>\n";
+          html += "<li class=\"active\">";
+          if (options.mode == 'edit') {
+             html += this.form.editTitle;
+          }
+          else {
+             html += this.form.addTitle; 
+          }
+          html += "</li>\n</ul>\n</div>\n";
+       }
+
+       // Start the well
+       if ( this.has('well') ) {
+          html += "<div class=\"well\">\n";
+       }
+
+       html += "<form class=\"form-horizontal\" name=\"" + this.form.name + '_form" id="' + this.form.name + '" novalidate>' + "\n";
+
+       html += "<div ng-show=\"flashMessage != null && flashMessage != undefined\" class=\"alert alert-info\">{{ flashMessage }}</div>\n";
+
+       var field;
+       if (this.form.twoColumns) { 
+          html += "<div class=\"row-fluid\">\n";
+          html += "<div class=\"span6\">\n";
+          for (var fld in this.form.fields) {
+              field = this.form.fields[fld];
+              if (field.column == 1) {
+                 html += this.buildField(fld, field, options);
+              }
+          }
+          html += "</div><!-- column 1 -->\n";
+          html += "<div class=\"span6\">\n";
+          for (var fld in this.form.fields) {
+              field = this.form.fields[fld];
+              if (field.column == 2) {
+                 html += this.buildField(fld, field, options);
+              }
+          }
+          html += "</div><!-- column 2 -->\n";
+          html += "</div><!-- inner row -->\n";
+       }
+       else {
+          // original, single-column form
+          for (var fld in this.form.fields) {
+              var field = this.form.fields[fld];
+              html += this.buildField(fld, field, options);
+          }
        }
 
        //buttons
@@ -423,24 +454,30 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
               if (button.ngClick) {
                  html += this.attr(button,'ngClick');
               }
+              
               if (button.ngDisabled) {
                  if (btn !== 'reset') {
-                    html += "ng-disabled=\"" + this.form.name + "_form.$pristine || " + this.form.name + "_form.$invalid\" ";
+                    html += "ng-disabled=\"" + this.form.name + "_form.$pristine || " + this.form.name + "_form.$invalid";
+                    html += (this.form.allowReadonly) ? " || " + this.form.name + "ReadOnly == true" : ""; 
+                    html += "\" ";
                  }
                  else {
-                    html += "ng-disabled=\"" + this.form.name + "_form.$pristine\" ";   
+                    html += "ng-disabled=\"" + this.form.name + "_form.$pristine";
+                    html += (this.form.allowReadonly) ? " || " + this.form.name + "ReadOnly == true" : ""; 
+                    html += "\" ";   
                  }
               }
+           
               html += ">";
               if (button.icon) {
                  html += this.icon(button.icon);
               }
               html += button.label + "</button>\n";
-           }
+          }
-           if (this.has('buttons')) {
+          if (this.has('buttons')) {
-              html += "</div>\n";
+             html += "</div>\n";
-              html += "</div>\n";
+             html += "</div>\n";
-           }
+          }
        }
        html += "</form>\n";
 
@@ -448,10 +485,20 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
           html += "</div>\n";
        }
        
+       if ((!this.modal && this.form.statusFields)) {
+          // Add status fields section (used in Jobs form)
+          html += "<div class=\"well\">\n";
+          for (var fld in this.form.statusFields) {
+              field = this.form.statusFields[fld];
+              html += this.buildField(fld, field, options);
+          }
+          html += "</div><!-- well -->\n";
+       }
+       
        if ((!this.modal) && options.related && this.form.related) {
           html += this.buildCollections();
        }
-     
+       
        return html;
      
        },

lib/ui/static/lib/ansible/list-generator.js

@@ -193,22 +193,22 @@ angular.module('ListGenerator', ['GeneratorHelpers',])
               html += "<td class=\"" + fld + "-column"; 
               html += (list.fields[fld].class) ? " " + list.fields[fld].class : "";
               html +=  "\">";
-              if ((list.fields[fld].key || list.fields[fld].link) && options.mode != 'lookup') { 
+              if ((list.fields[fld].key || list.fields[fld].link) && options.mode != 'lookup' && options.mode != 'select') { 
                  html += "<a href=\"#/" + base + "/{{" + list.iterator + ".id }}\">";
               }
               html += (list.fields[fld].icon) ? this.icon(list.fields[fld].icon) : "";
               html += "{{" + list.iterator + "." + fld + "}}";
-              html += ((list.fields[fld].key || list.fields[fld].link) && options.mode != 'lookup') ? "</a>" : "";
+              html += ((list.fields[fld].key || list.fields[fld].link) && options.mode != 'lookup' && options.mode != 'select') ? "</a>" : "";
               html += "</td>\n";
            }
            else {
               html += "<td class=\"" + fld + "-column\">";
-              if ((list.fields[fld].key || list.fields[fld].link) && options.mode != 'lookup') {
+              if ((list.fields[fld].key || list.fields[fld].link) && options.mode != 'lookup' && options.mode != 'select') {
                  html += "<a href=\"#/" + base + "/{{" + list.iterator + ".id }}\">";
               }
               html += (list.fields[fld].icon) ? this.icon(list.fields[fld].icon) : "";
               html += "{{ " + list.fields[fld].ngBind + " }}";
-              html += ((list.fields[fld].key || list.fields[fld].link) && options.mode != 'lookup') ? "</a>" : "";
+              html += ((list.fields[fld].key || list.fields[fld].link) && options.mode != 'lookup' && options.mode != 'select') ? "</a>" : "";
               html += "</td>\n";
           }
        }

lib/ui/templates/ui/index.html

@@ -44,6 +44,7 @@
   <script src="{{ STATIC_URL }}js/forms/Groups.js"></script>
   <script src="{{ STATIC_URL }}js/forms/Credentials.js"></script>
   <script src="{{ STATIC_URL }}js/forms/JobTemplates.js"></script>
+  <script src="{{ STATIC_URL }}js/forms/Jobs.js"></script>
   <script src="{{ STATIC_URL }}js/lists/Users.js"></script>
   <script src="{{ STATIC_URL }}js/lists/Organizations.js"></script>
   <script src="{{ STATIC_URL }}js/lists/Admins.js"></script>