Variable data for hosts/groups/inventory now defaults to YAML. Data received from the API is converted to YAML. Changed job_template extra_vars to use the variable editor approach -user will now enter extra vars as either YAML or JSON with the default being YAML.

awx/ui/static/css/ansible-ui.css

@@ -60,7 +60,7 @@
  }  
 
  .navbar .brand img {
-    width: 243px;
+    width: 292px;
  }
 
  .navbar .nav {

awx/ui/static/js/controllers/Inventories.js

@@ -175,7 +175,7 @@ function InventoriesAdd ($scope, $rootScope, $compile, $location, $log, $routePa
    var form = InventoryForm;
    var generator = GenerateForm;
    var scope = generator.inject(form, {mode: 'add', related: false});
-   scope.parseType = 'json';
+   scope.parseType = 'yaml';
    
    generator.reset();
    LoadBreadCrumbs();
@@ -239,7 +239,7 @@ function InventoriesAdd ($scope, $rootScope, $compile, $location, $log, $routePa
                    });
        }
        catch(err) {
-           Alert("Error", "Error parsing inventory variables. Parser returned " + err);  
+           Alert("Error", "Error parsing inventory variables. Parser returned: " + err);  
            }      
        
        };
@@ -275,7 +275,7 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
    
    ParseTypeChange(scope);
 
-   scope.parseType = 'json';
+   scope.parseType = 'yaml';
    scope['inventory_id'] = id;
    
    // Retrieve each related set and any lookups
@@ -300,10 +300,10 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
           Rest.get()
               .success( function(data, status, headers, config) {
                   if ($.isEmptyObject(data)) {
-                     scope.variables = "\{\}";
+                     scope.variables = "---";
                   }
                   else {
-                     scope.variables = JSON.stringify(data, null, " ");
+                     scope.variables = jsyaml.safeDump(data);
                   }
                   })
               .error( function(data, status, headers, config) {
@@ -313,7 +313,7 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
                   });
           }
           else {
-              scope.variables = "\{\}";
+              scope.variables = "---";
           }
        });
   
@@ -371,7 +371,7 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
                    });
        }
        catch(err) {
-           Alert("Error", "Error parsing inventory variables. Parser returned " + err);  
+           Alert("Error", "Error parsing inventory variables. Parser returned: " + err);  
            }      
        
        };

awx/ui/static/js/controllers/JobTemplates.js

@@ -159,7 +159,7 @@ JobTemplatesList.$inject = [ '$scope', '$rootScope', '$location', '$log', '$rout
 
 function JobTemplatesAdd ($scope, $rootScope, $compile, $location, $log, $routeParams, JobTemplateForm, 
                           GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, ReturnToCaller, ClearScope,
-                          GetBasePath, InventoryList, CredentialList, ProjectList, LookUpInit, md5Setup) 
+                          GetBasePath, InventoryList, CredentialList, ProjectList, LookUpInit, md5Setup, ParseTypeChange) 
 {
    ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                                 //scope.
@@ -170,6 +170,9 @@ function JobTemplatesAdd ($scope, $rootScope, $compile, $location, $log, $routeP
    var generator = GenerateForm;
    var scope = generator.inject(form, {mode: 'add', related: false});
    var master = {};
+   
+   scope.parseType = 'yaml';
+   ParseTypeChange(scope);
 
    scope.job_type_options = [{ value: 'run', label: 'Run' }, { value: 'check', label: 'Check' }];
    scope.verbosity_options = [
@@ -243,25 +246,43 @@ function JobTemplatesAdd ($scope, $rootScope, $compile, $location, $log, $routeP
 
    // Save
    scope.formSave = function() {
-       Rest.setUrl(defaultUrl);
        var data = {}
-       for (var fld in form.fields) {
+       try {
-           if (form.fields[fld].type == 'select' && fld != 'playbook') {
+           // Make sure we have valid variable data
-              data[fld] = scope[fld].value;
+           if (scope.parseType == 'json') {
+              var myjson = JSON.parse(scope.variables);  //make sure JSON parses
+              var json_data = scope.variables;
            }
            else {
-              data[fld] = scope[fld];
+              var json_data = jsyaml.load(scope.variables);  //parse yaml
-           }      
+           }
+
+           for (var fld in form.fields) {
+               if (form.fields[fld].type == 'select' && fld != 'playbook') {
+                  data[fld] = scope[fld].value;
+               }
+               else {
+                  if (fld != 'variables') {
+                     data[fld] = scope[fld];
+                  }
+               }      
+           }
+           data.extra_vars = json_data;
+           Rest.setUrl(defaultUrl);
+           Rest.post(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 add new job template. POST returned status: ' + status });
+                   });
+
+       }
+       catch(err) {
+           Alert("Error", "Error parsing extra variables. Parser returned: " + err);     
        }
-       Rest.post(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 add new project. POST returned status: ' + status });
-               });
        };
 
    // Reset
@@ -277,13 +298,13 @@ function JobTemplatesAdd ($scope, $rootScope, $compile, $location, $log, $routeP
 
 JobTemplatesAdd.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'JobTemplateForm',
                             'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'ReturnToCaller', 'ClearScope',
-                            'GetBasePath', 'InventoryList', 'CredentialList', 'ProjectList', 'LookUpInit', 'md5Setup' ]; 
+                            'GetBasePath', 'InventoryList', 'CredentialList', 'ProjectList', 'LookUpInit', 'md5Setup', 'ParseTypeChange' ]; 
 
 
 function JobTemplatesEdit ($scope, $rootScope, $compile, $location, $log, $routeParams, JobTemplateForm, 
                            GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, RelatedSearchInit, 
                            RelatedPaginateInit, ReturnToCaller, ClearScope, InventoryList, CredentialList,
-                           ProjectList, LookUpInit, PromptPasswords, GetBasePath, md5Setup) 
+                           ProjectList, LookUpInit, PromptPasswords, GetBasePath, md5Setup, ParseTypeChange) 
 {
    ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                                 //scope.
@@ -293,6 +314,9 @@ function JobTemplatesEdit ($scope, $rootScope, $compile, $location, $log, $route
    var form = JobTemplateForm;
    var scope = generator.inject(form, {mode: 'edit', related: true});
 
+   scope.parseType = 'yaml';
+   ParseTypeChange(scope);
+
    // Our job type options
    scope.job_type_options = [{ value: 'run', label: 'Run' }, { value: 'check', label: 'Check' }];
    scope.verbosity_options = [
@@ -365,7 +389,7 @@ function JobTemplatesEdit ($scope, $rootScope, $compile, $location, $log, $route
        .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 (fld != 'variables' && 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++) {
@@ -383,6 +407,16 @@ function JobTemplatesEdit ($scope, $rootScope, $compile, $location, $log, $route
                  }
                  master[fld] = scope[fld];
               }
+              if (fld == 'variables') {
+                 // Parse extra_vars, converting to YAML.  
+                 if ($.isEmptyObject(data.extra_vars) || data.extra_vars == "\{\}") {
+                    scope.variables = "---";
+                 }
+                 else {
+                    scope.variables = jsyaml.safeDump(JSON.parse(data.extra_vars));
+                 }
+                 master.variables = scope.variables;
+              }
               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];
@@ -435,24 +469,42 @@ function JobTemplatesEdit ($scope, $rootScope, $compile, $location, $log, $route
    // Save changes to the parent
    scope.formSave = function() {
        var data = {}
-       for (var fld in form.fields) {
+       try {
-           if (form.fields[fld].type == 'select' && fld != 'playbook') {
+           // Make sure we have valid variable data
-              data[fld] = scope[fld].value;
+           if (scope.parseType == 'json') {
+              var myjson = JSON.parse(scope.variables);  //make sure JSON parses
+              var json_data = scope.variables;
            }
            else {
-              data[fld] = scope[fld];
+              var json_data = jsyaml.load(scope.variables);  //parse yaml
-           }   
+           }
-       } 
+
-       Rest.setUrl(defaultUrl + $routeParams.id + '/');
+           for (var fld in form.fields) {
-       Rest.put(data)
+               if (form.fields[fld].type == 'select' && fld != 'playbook') {
-           .success( function(data, status, headers, config) {
+                  data[fld] = scope[fld].value;
-               var base = $location.path().replace(/^\//,'').split('/')[0];
+               }
-               (base == 'job_templates') ? ReturnToCaller() : ReturnToCaller(1);
+               else {
-               })
+                  if (fld != 'variables') {
-           .error( function(data, status, headers, config) {
+                     data[fld] = scope[fld];
-               ProcessErrors(scope, data, status, form,
+                  }
-                   { hdr: 'Error!', msg: 'Failed to update team: ' + $routeParams.id + '. PUT status: ' + status });
+               }      
-           });
+           }
+           data.extra_vars = json_data;
+           Rest.setUrl(defaultUrl + id + '/');
+           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 job template. PUT returned status: ' + status });
+                   });
+
+       }
+       catch(err) {
+           Alert("Error", "Error parsing extra variables. Parser returned: " + err);     
+       }
        };
 
    // Cancel
@@ -461,6 +513,7 @@ function JobTemplatesEdit ($scope, $rootScope, $compile, $location, $log, $route
       for (var fld in master) {
           scope[fld] = master[fld];
       }
+      scope.parseType = 'yaml';
       $('#forks-slider').slider("option", "value", scope.forks);
       };
 
@@ -506,5 +559,5 @@ function JobTemplatesEdit ($scope, $rootScope, $compile, $location, $log, $route
 JobTemplatesEdit.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'JobTemplateForm', 
                              'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'RelatedSearchInit', 
                              'RelatedPaginateInit', 'ReturnToCaller', 'ClearScope', 'InventoryList', 'CredentialList',
-                             'ProjectList', 'LookUpInit', 'PromptPasswords', 'GetBasePath', 'md5Setup'
+                             'ProjectList', 'LookUpInit', 'PromptPasswords', 'GetBasePath', 'md5Setup', 'ParseTypeChange'
                              ]; 

awx/ui/static/js/forms/Groups.js

@@ -36,7 +36,7 @@ angular.module('GroupFormDefinition', [])
                 editRequird: false, 
                 rows: 10,
                 "class": 'modal-input-xlarge',
-                "default": "\{\}",
+                "default": "---",
                 dataTitle: 'Group Variables',
                 dataPlacement: 'right',
                 awPopOver: "<p>Enter variables using either JSON or YAML syntax. Use the radio button to toggle between the two.</p>" +

awx/ui/static/js/forms/Hosts.js

@@ -41,7 +41,7 @@ angular.module('HostFormDefinition', [])
                 editRequird: false, 
                 rows: 10,
                 "class": "modal-input-xlarge",
-                "default": "\{\}",
+                "default": "---",
                 awPopOver: "<p>Enter variables using either JSON or YAML syntax. Use the radio button to toggle between the two.</p>" +
                     '<p>View JSON examples at <a href="http://www.json.org" target="_blank">www.json.org</a></p>' +
                     '<p>View YAML examples at <a href="http://www.ansibleworks.com/docs/YAMLSyntax.html" target="_blank">ansibleworks.com</a></p>',

awx/ui/static/js/forms/Inventories.js

@@ -63,7 +63,7 @@ angular.module('InventoryFormDefinition', [])
                 editRequird: false, 
                 rows: 10,
                 "class": "modal-input-xlarge",
-                "default": "\{\}",
+                "default": "---",
                 awPopOver: "<p>Enter variables using either JSON or YAML syntax. Use the radio button to toggle between the two.</p>" +
                     '<p>View JSON examples at <a href="http://www.json.org" target="_blank">www.json.org</a></p>' +
                     '<p>View YAML examples at <a href="http://www.ansibleworks.com/docs/YAMLSyntax.html" target="_blank">ansibleworks.com</a></p>',

awx/ui/static/js/forms/JobTemplates.js

@@ -127,17 +127,17 @@ angular.module('JobTemplateFormDefinition', [])
                 dataTitle: 'Verbosity',
                 dataPlacement: 'left'
                 },
-            extra_vars: {
+            variables: {
                 label: 'Extra Variables',
                 type: 'textarea',
                 rows: 6,
                 "class": 'span12',
                 addRequired: false, 
                 editRequired: false,
-                "default": "\{\}",
+                "default": "---",
                 column: 2,
                 awPopOver: "<p>Pass extra command line variables to the playbook. This is the -e or --extra-vars command line parameter " +
-                    "for ansible-playbook. Provide key=value pairs or JSON. <p><a href=\"http://www.ansibleworks.com/docs/playbooks2.html" + 
+                    "for ansible-playbook. Provide key/value pairs using either YAML or JSON. <p><a href=\"http://www.ansibleworks.com/docs/playbooks2.html" + 
                     "#passing-variables-on-the-command-line\" target=\"_blank\">Click here to view documentation and examples.</a></p>",
                 dataTitle: 'Extra Variables',
                 dataPlacement: 'left'

awx/ui/static/js/helpers/Groups.js

@@ -175,7 +175,7 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
         scope.formModalActionLabel = 'Save';
         scope.formModalHeader = 'Create Group';
         scope.formModalCancelShow = true;
-        scope.parseType = 'json';
+        scope.parseType = 'yaml';
         ParseTypeChange(scope);
         
         $('#form-modal .btn-none').removeClass('btn-none').addClass('btn-success');
@@ -237,7 +237,7 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
                        });
            }
            catch(err) {
-               Alert("Error", "Error parsing group variables. Expecting valid JSON. Parser returned " + err);     
+               Alert("Error", "Error parsing group variables. Parser returned: " + err);     
            }
            }
 
@@ -270,7 +270,7 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
         scope.formModalActionLabel = 'Save';
         scope.formModalHeader = 'Edit Group';
         scope.formModalCancelShow = true;
-        scope.parseType = 'json';
+        scope.parseType = 'yaml';
         ParseTypeChange(scope);
 
         $('#form-modal .btn-none').removeClass('btn-none').addClass('btn-success');
@@ -288,10 +288,10 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
                Rest.get()
                    .success( function(data, status, headers, config) {
                        if ($.isEmptyObject(data)) {
-                          scope.variables = "\{\}";
+                          scope.variables = "---";
                        }
                        else {
-                          scope.variables = JSON.stringify(data, null, " ");
+                          scope.variables = jsyaml.safeDump(data);
                        }
                        })
                    .error( function(data, status, headers, config) {
@@ -301,8 +301,9 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
                        });
             }
             else {
-               scope.variables = "\{\}";
+               scope.variables = "---";
             }
+            master.variables = scope.variables;
             });
 
         // Retrieve detail record and prepopulate the form
@@ -378,7 +379,7 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
                         });
             }
             catch(err) {
-               Alert("Error", "Error parsing group variables. Expecting valid JSON. Parser returned " + err);     
+               Alert("Error", "Error parsing group variables. Parser returned: " + err);     
             }
             };
 
@@ -388,6 +389,7 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
            for (var fld in master) {
                scope[fld] = master[fld];
            }
+           scope.parseType = 'yaml';
            }
         }
         }])

awx/ui/static/js/helpers/Hosts.js

@@ -165,7 +165,7 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
         scope.formModalActionLabel = 'Save';
         scope.formModalHeader = 'Create Host';
         scope.formModalCancelShow = true;
-        scope.parseType = 'json';
+        scope.parseType = 'yaml';
         ParseTypeChange(scope);
         
         $('#form-modal .btn-none').removeClass('btn-none').addClass('btn-success');
@@ -223,7 +223,7 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
                        });
            }
            catch(err) {
-               Alert("Error", "Error parsing host variables. Parser returned " + err);  
+               Alert("Error", "Error parsing host variables. Parser returned: " + err);  
            }
            }
 
@@ -258,7 +258,7 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
         scope.formModalActionLabel = 'Save';
         scope.formModalHeader = 'Edit Host';
         scope.formModalCancelShow = true;
-        scope.parseType = 'json';
+        scope.parseType = 'yaml';
         ParseTypeChange(scope);
         
         $('#form-modal .btn-none').removeClass('btn-none').addClass('btn-success');
@@ -275,10 +275,10 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
                Rest.get()
                    .success( function(data, status, headers, config) {
                        if ($.isEmptyObject(data)) {
-                          scope.variables = "\{\}";
+                          scope.variables = "---";
                        }
                        else {
-                          scope.variables = JSON.stringify(data, null, " ");
+                          scope.variables = jsyaml.safeDump(data);
                        }
                        })
                    .error( function(data, status, headers, config) {
@@ -288,8 +288,9 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
                        });
             }
             else {
-               scope.variables = "\{\}";
+               scope.variables = "---";
             }
+            master.variables = scope.variables;
             });
 
         // Retrieve detail record and prepopulate the form
@@ -363,7 +364,7 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
                         });
             }
             catch(err) {
-               Alert("Error", "Error parsing group variables. Expecting valid JSON. Parser returned " + err);     
+               Alert("Error", "Error parsing group variables. Parser returned: " + err);     
             }
             };
 
@@ -373,6 +374,7 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
            for (var fld in master) {
                scope[fld] = master[fld];
            }
+           scope.parseType = 'yaml';
            }
         }
         }])

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

@@ -278,10 +278,14 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
              }
              html += field.label + '</label>' + "\n";
              html += "<div class=\"controls\">\n";
-             if (fld == "variables") {
+             
-                html += "<div class=\"parse-selection\">Parse as: <label class=\"radio inline\"><input type=\"radio\" ng-model=\"parseType\" value=\"json\"> JSON</label>\n";
+             // Variable editing
-                html += "<label class=\"radio inline\"><input type=\"radio\" ng-model=\"parseType\" value=\"yaml\"> YAML</label></div>\n";
+             if (fld == "variables" || fld == "extra_vars") {
+                html += "<div class=\"parse-selection\">Parse as: " +
+                    "<label class=\"radio inline\"><input type=\"radio\" ng-model=\"parseType\" value=\"yaml\"> YAML</label>\n" +
+                    "<label class=\"radio inline\"><input type=\"radio\" ng-model=\"parseType\" value=\"json\"> JSON</label></div>\n";
              }
+             
              html += "<textarea ";
              html += (field.rows) ? this.attr(field, 'rows') : "";
              html += "ng-model=\"" + fld + '" ';