Added YAML support to Host and Group variable data. User can enter variables in either format, UI will parse it and send to API as JSON. Fixed post to /hosts/N/variable_data and /groups/N/variable_data so that JSON is sent as an object rather than a string.

ansibleworks/ui/static/css/ansible-ui.css

@@ -281,12 +281,13 @@
  }
 
 /* Enable table-hover to work when table is in a well */
-.table-hover tbody tr:hover > td,
+ .table-hover tbody tr:hover > td,
-.table-hover tbody tr:hover > th {
+ .table-hover tbody tr:hover > th {
     background-color: #fff;
  }
 
- /* Jobs page */
+
+/* Jobs page */
 
  .job-error, .job-failed,
  input[type="text"].job-failed,
@@ -328,6 +329,7 @@
 
  /* End Jobs Page */
 
+ 
  /* Inventory detail */
  
  .inventory-title {
@@ -352,6 +354,24 @@
     margin-bottom: 15px;
  }
 
+ .parse-selection {
+   font-size: 12px;
+   margin: 5px 0 10px 0;
+ }
+ 
+ .parse-selection .radio.inline {
+    padding-top: 0;
+    font-size: 12px;
+ }
+
+ .parse-selection label:first-child {
+   margin-left: 5px;
+ }
+
+ .modal-input-xlarge {
+   width: 325px;
+ }
+
  #tree-view {
     min-height: 100px;
  }

ansibleworks/ui/static/js/app.js

@@ -51,7 +51,8 @@ angular.module('ansible', [
     'JobEventFormDefinition',
     'JobHostDefinition',
     'GroupsHelper',
-    'HostsHelper'
+    'HostsHelper',
+    'ParseHelper'
      ])
     .config(['$routeProvider', function($routeProvider) {
         $routeProvider.

ansibleworks/ui/static/js/forms/Groups.js

@@ -34,14 +34,13 @@ angular.module('GroupFormDefinition', [])
                 addRequired: false,
                 editRequird: false, 
                 rows: 10,
+                "class": 'modal-input-xlarge',
                 "default": "\{\}",
                 dataTitle: 'Group Variables',
                 dataPlacement: 'right',
-                awPopOver: '<p>Enter variables as JSON. Both the key and value must be wrapped in double quotes. ' +
+                awPopOver: "<p>Enter variables using either JSON or YAML syntax. Use the radio button to toggle between the two.</p>" +
-                    'Separate variables with commas, and wrap the entire string with { }. ' +
+                    '<p>View JSON examples at <a href="http://www.json.org" target="_blank">www.json.org</a></p>' +
-                    '&nbsp;For example:</p><p>{<br\>&quot;ntp_server&quot;: &quot;ntp.example.com&quot;,<br \>' + 
+                    '<p>View YAML examples at <a href="http://www.ansibleworks.com/docs/YAMLSyntax.html" target="_blank">ansiblewors.com</a></p>'
-                    '&quot;proxy&quot;: &quot;proxy.example.com&quot;<br \>}</p><p>See additional JSON examples at <a href="' +
-                    'http://www.json.org" target="_blank">www.json.org</a></p>'
                 }
             },
 

ansibleworks/ui/static/js/forms/Hosts.js

@@ -39,12 +39,11 @@ angular.module('HostFormDefinition', [])
                 addRequired: false,
                 editRequird: false, 
                 rows: 10,
+                "class": "modal-input-xlarge",
                 "default": "\{\}",
-                awPopOver: "<p>Enter variables as JSON. Both the key and value must be wrapped in double quotes. " +
+                awPopOver: "<p>Enter variables using either JSON or YAML syntax. Use the radio button to toggle between the two.</p>" +
-                    "Separate variables with commas, and wrap the entire string with { }. " +
+                    '<p>View JSON examples at <a href="http://www.json.org" target="_blank">www.json.org</a></p>' +
-                    "&nbsp;For example:</p><p>{<br\>&quot;ntp_server&quot;: &quot;ntp.example.com&quot;,<br \>" + 
+                    '<p>View YAML examples at <a href="http://www.ansibleworks.com/docs/YAMLSyntax.html" target="_blank">ansiblewors.com</a></p>',
-                    '&quot;proxy&quot;: &quot;proxy.example.com&quot;<br \>}</p><p>See additional JSON examples at <a href="' +
-                    'http://www.json.org" target="_blank">www.json.org</a></p>',
                 dataTitle: 'Host Variables',
                 dataPlacement: 'right'
                 }

ansibleworks/ui/static/js/helpers/Groups.js

@@ -12,7 +12,6 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
                                  'InventoryHelper'
                                  ])
 
- 
     .factory('GroupsList', ['$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'GroupList', 'GenerateList', 
         'Prompt', 'SearchInit', 'PaginateInit', 'ProcessErrors', 'GetBasePath', 'GroupsAdd', 'RefreshTree',
     function($rootScope, $location, $log, $routeParams, Rest, Alert, GroupList, GenerateList, LoadBreadCrumbs, SearchInit,
@@ -155,9 +154,9 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
 
 
     .factory('GroupsAdd', ['$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'GroupForm', 'GenerateForm', 
-        'Prompt', 'ProcessErrors', 'GetBasePath', 'RefreshTree',
+        'Prompt', 'ProcessErrors', 'GetBasePath', 'RefreshTree', 'ParseTypeChange',
     function($rootScope, $location, $log, $routeParams, Rest, Alert, GroupForm, GenerateForm, Prompt, ProcessErrors,
-        GetBasePath, RefreshTree) {
+        GetBasePath, RefreshTree, ParseTypeChange) {
     return function(params) {
 
         var inventory_id = params.inventory_id;
@@ -169,8 +168,12 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
         var form = GroupForm;
         var generator = GenerateForm;
         var scope = generator.inject(form, {mode: 'add', modal: true, related: false});
-        scope.formModalActionLabel = 'Save'
+        
-        scope.formModalHeader = 'Create Group'
+        scope.formModalActionLabel = 'Save';
+        scope.formModalHeader = 'Create Group';
+        scope.parseType = 'json';
+        ParseTypeChange(scope);
+
         generator.reset();
         var master={};
 
@@ -181,8 +184,15 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
         // Save
         scope.formModalAction  = function() {
            try { 
-               // Make sure we have valid JSON
+
-               var myjson = JSON.parse(scope.variables);
+               // Make sure we have valid variable data
+               if (scope.parseType == 'json') {
+                  var myjson = JSON.parse(scope.variables);  //make sure JSON parses
+                  var json_data = scope.variables;
+               }
+               else {
+                  var json_data = jsyaml.load(scope.variables);  //parse yaml
+               }
                
                var data = {}
                for (var fld in form.fields) {
@@ -200,7 +210,7 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
                    .success( function(data, status, headers, config) {
                        if (scope.variables) {
                           Rest.setUrl(data.related.variable_data);
-                          Rest.put({data: scope.variables})
+                          Rest.put(json_data)
                               .success( function(data, status, headers, config) {
                                   $('#form-modal').modal('hide');
                                   RefreshTree({ scope: scope });
@@ -236,9 +246,9 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
 
 
     .factory('GroupsEdit', ['$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'GroupForm', 'GenerateForm', 
-        'Prompt', 'ProcessErrors', 'GetBasePath', 'RefreshTree',
+        'Prompt', 'ProcessErrors', 'GetBasePath', 'RefreshTree', 'ParseTypeChange',
     function($rootScope, $location, $log, $routeParams, Rest, Alert, GroupForm, GenerateForm, Prompt, ProcessErrors,
-        GetBasePath, RefreshTree) {
+        GetBasePath, RefreshTree, ParseTypeChange) {
     return function(params) {
         
         var group_id = params.group_id;
@@ -251,8 +261,10 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
         var master = {};
         var relatedSets = {};
 
-        scope.formModalActionLabel = 'Save'
+        scope.formModalActionLabel = 'Save';
-        scope.formModalHeader = 'Edit Group'
+        scope.formModalHeader = 'Edit Group';
+        scope.parseType = 'json';
+        ParseTypeChange(scope);
 
         // After the group record is loaded, retrieve any group variables
         if (scope.groupLoadedRemove) {
@@ -266,11 +278,11 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
                Rest.setUrl(scope.variable_url);
                Rest.get()
                    .success( function(data, status, headers, config) {
-                       if ($.isEmptyObject(data.data)) {
+                       if ($.isEmptyObject(data)) {
                           scope.variables = "\{\}";
                        }
                        else {
-                          scope.variables = data.data;
+                          scope.variables = JSON.stringify(data, null, " ");
                        }
                        })
                    .error( function(data, status, headers, config) {
@@ -315,8 +327,15 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
         // Save changes to the parent
         scope.formModalAction = function() {
             try { 
-                // Make sure we have valid JSON
+       
-                var myjson = JSON.parse(scope.variables);
+                // Make sure we have valid variable data
+                if (scope.parseType == 'json') {
+                   var myjson = JSON.parse(scope.variables);  //make sure JSON parses
+                   var json_data = scope.variables;
+                }
+                else {
+                   var json_data = jsyaml.load(scope.variables);  //parse yaml
+                }
 
                 var data = {}
                 for (var fld in form.fields) {
@@ -329,7 +348,7 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
                         if (scope.variables) {
                            //update group variables
                            Rest.setUrl(GetBasePath('groups') + data.id + '/variable_data/');
-                           Rest.put({data: scope.variables})
+                           Rest.put(json_data)
                                .success( function(data, status, headers, config) {
                                    $('#form-modal').modal('hide');
                                    RefreshTree({ scope: scope }); 

ansibleworks/ui/static/js/helpers/Hosts.js

@@ -146,9 +146,9 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
 
 
     .factory('HostsAdd', ['$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'HostForm', 'GenerateForm', 
-        'Prompt', 'ProcessErrors', 'GetBasePath', 'HostsReload',
+        'Prompt', 'ProcessErrors', 'GetBasePath', 'HostsReload', 'ParseTypeChange',
     function($rootScope, $location, $log, $routeParams, Rest, Alert, HostForm, GenerateForm, Prompt, ProcessErrors,
-        GetBasePath, HostsReload) {
+        GetBasePath, HostsReload, ParseTypeChange) {
     return function(params) {
 
         var inventory_id = params.inventory_id;
@@ -160,8 +160,10 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
         var generator = GenerateForm;
         var scope = generator.inject(form, {mode: 'add', modal: true, related: false});
         
-        scope.formModalActionLabel = 'Save'
+        scope.formModalActionLabel = 'Save';
-        scope.formModalHeader = 'Create Host'
+        scope.formModalHeader = 'Create Host';
+        scope.parseType = 'json';
+        ParseTypeChange(scope);
         
         $('#form-modal').unbind('hidden');
         $('#form-modal').on('hidden', function () { HostsReload(params); });
@@ -176,8 +178,14 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
         // Save
         scope.formModalAction  = function() {
            try { 
-               // Make sure we have valid JSON
+               // Make sure we have valid variable data
-               var myjson = JSON.parse(scope.variables);
+               if (scope.parseType == 'json') {
+                  var myjson = JSON.parse(scope.variables);  //make sure JSON parses
+                  var json_data = scope.variables;
+               }
+               else {
+                  var json_data = jsyaml.load(scope.variables);  //parse yaml
+               }
 
                var data = {}
                for (var fld in form.fields) {
@@ -192,7 +200,7 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
                    .success( function(data, status, headers, config) {
                        if (scope.variables) {
                           Rest.setUrl(data.related.variable_data);
-                          Rest.put({data: scope.variables})
+                          Rest.put(json_data)
                               .success( function(data, status, headers, config) {
                                   $('#form-modal').modal('hide');
                               })
@@ -211,7 +219,7 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
                        });
            }
            catch(err) {
-               Alert("Error", "Error parsing host variables. Expecting valid JSON. Parser returned " + err);     
+               Alert("Error", "Error parsing host variables. Parser returned " + err);  
            }
            }
 
@@ -226,9 +234,9 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
 
 
     .factory('HostsEdit', ['$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'HostForm', 'GenerateForm', 
-        'Prompt', 'ProcessErrors', 'GetBasePath', 'HostsReload',
+        'Prompt', 'ProcessErrors', 'GetBasePath', 'HostsReload', 'ParseTypeChange',
     function($rootScope, $location, $log, $routeParams, Rest, Alert, HostForm, GenerateForm, Prompt, ProcessErrors,
-        GetBasePath, HostsReload) {
+        GetBasePath, HostsReload, ParseTypeChange) {
     return function(params) {
         
         var host_id = params.host_id;
@@ -243,8 +251,10 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
         var master = {};
         var relatedSets = {};
 
-        scope.formModalActionLabel = 'Save'
+        scope.formModalActionLabel = 'Save';
-        scope.formModalHeader = 'Edit Host'
+        scope.formModalHeader = 'Edit Host';
+        scope.parseType = 'json';
+        ParseTypeChange(scope);
         
         $('#form-modal').unbind('hidden');
         $('#form-modal').on('hidden', function () { HostsReload(params); });
@@ -258,11 +268,11 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
                Rest.setUrl(scope.variable_url);
                Rest.get()
                    .success( function(data, status, headers, config) {
-                       if ($.isEmptyObject(data.data)) {
+                       if ($.isEmptyObject(data)) {
                           scope.variables = "\{\}";
                        }
                        else {
-                          scope.variables = data.data;
+                          scope.variables = JSON.stringify(data, null, " ");
                        }
                        })
                    .error( function(data, status, headers, config) {
@@ -307,8 +317,15 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
         // Save changes to the parent
         scope.formModalAction = function() {
             try { 
-                // Make sure we have valid JSON
+                
-                var myjson = JSON.parse(scope.variables);
+                // Make sure we have valid variable data
+                if (scope.parseType == 'json') {
+                   var myjson = JSON.parse(scope.variables);  //make sure JSON parses
+                   var json_data = scope.variables;
+                }
+                else {
+                   var json_data = jsyaml.load(scope.variables);  //parse yaml
+                }
 
                 var data = {}
                 for (var fld in form.fields) {
@@ -321,7 +338,7 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
                         if (scope.variables) {
                            //update host variables
                            Rest.setUrl(GetBasePath('hosts') + data.id + '/variable_data/');
-                           Rest.put({data: scope.variables})
+                           Rest.put(json_data)
                                .success( function(data, status, headers, config) {
                                    $('#form-modal').modal('hide');
                                })

ansibleworks/ui/static/js/helpers/Parse.js

@@ -0,0 +1,60 @@
+/*********************************************
+ *  Copyright (c) 2013 AnsibleWorks, Inc.
+ *
+ *  ParseHelper
+ *
+ *  Routines for parsing variable data and toggling 
+ *  between JSON and YAML.
+ *
+ */
+
+angular.module('ParseHelper', [])  
+    .factory('ParseTypeChange', [function() {
+    return function(scope) {
+
+        // Toggle displayed variable string between JSON and YAML
+        
+        scope.blockParseTypeWatch = false; 
+        scope.blockVariableDataWatch = false; 
+
+        if (scope.removeParseTypeWatch) {
+           scope.removeParseTypeWatch();
+        }
+        scope.removeParseTypeWatch = scope.$watch('parseType', function(newVal, oldVal) {
+            if (newVal !== oldVal) {
+               if (newVal == 'json') {
+                  if ( scope.variables && !/^---$/.test(scope.variables)) { 
+                     // convert YAML to JSON
+                     try {
+                        var json_obj = jsyaml.load(scope.variables);  //parse yaml into an obj
+                        scope.variables = JSON.stringify(json_obj, null, " ");
+                     }
+                     catch (err) {
+                        // ignore parse errors. allow the user to paste values in and sync the
+                        // radio button later. parse errors will be flagged on save.
+                     }
+                  }
+                  else {   
+                     scope.variables = "\{\}";
+                  }
+               }
+               else {
+                  if ( scope.variables && !/^\{\}$/.test(scope.variables) ) {
+                     // convert JSON to YAML
+                     try {
+                        var json_obj = JSON.parse(scope.variables);
+                        scope.variables = jsyaml.safeDump(json_obj);
+                     }
+                     catch (err) {
+                        // ignore the errors. allow the user to paste values in and sync the
+                        // radio button later. parse errors will be flagged on save.
+                     }
+                  }
+                  else {
+                     scope.variables = "---";
+                  }
+               }
+            }
+            });
+        }
+        }]);

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

@@ -258,6 +258,10 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
              }
              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";
+                html += "<label class=\"radio inline\"><input type=\"radio\" ng-model=\"parseType\" value=\"yaml\"> YAML</label></div>\n";
+             }
              html += "<textarea ";
              html += (field.rows) ? this.attr(field, 'rows') : "";
              html += "ng-model=\"" + fld + '" ';

ansibleworks/ui/templates/ui/index.html

@@ -73,6 +73,7 @@
   <script src="{{ STATIC_URL }}js/helpers/Lookup.js"></script>
   <script src="{{ STATIC_URL }}js/helpers/Groups.js"></script>
   <script src="{{ STATIC_URL }}js/helpers/Hosts.js"></script>
+  <script src="{{ STATIC_URL }}js/helpers/Parse.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>
@@ -218,6 +219,8 @@
   <script src="{{ STATIC_URL }}lib/jquery/jquery-ui-1.10.3.custom.min.js"></script>
   <script src="{{ STATIC_URL }}lib/twitter/bootstrap.min.js"></script>
   <script src="{{ STATIC_URL }}lib/jstree/jquery.jstree.js"></script>
+  <script src="{{ STATIC_URL }}lib/js-yaml/js-yaml.min.js"></script>
+  
   <script>
       $('a[data-toggle="tab"]').on('show', function (e) {
           var url = $(e.target).text();