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.

2026-01-20 14:11:24 -03:30 · 2013-06-11 17:23:08 -04:00 · 2013-06-11 17:23:08 -04:00 · c8c9e62b4c
commit c8c9e62b4c
parent 65c8176507
10 changed files with 180 additions and 52 deletions
--- a/ansibleworks/ui/static/css/ansible-ui.css
+++ b/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 > th {
+ .table-hover tbody tr:hover > td,
+ .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;
 }
--- a/ansibleworks/ui/static/js/app.js
+++ b/ansibleworks/ui/static/js/app.js
@ -51,7 +51,8 @@ angular.module('ansible', [
    'JobEventFormDefinition',
    'JobHostDefinition',
    'GroupsHelper',
-    'HostsHelper'
+    'HostsHelper',
+    'ParseHelper'
     ])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider.
--- a/ansibleworks/ui/static/js/forms/Groups.js
+++ b/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. ' +
-                    'Separate variables with commas, and wrap the entire string with { }. ' +
-                    '&nbsp;For example:</p><p>{<br\>&quot;ntp_server&quot;: &quot;ntp.example.com&quot;,<br \>' + 
-                    '&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>'
+                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">ansiblewors.com</a></p>'
                }
            },

--- a/ansibleworks/ui/static/js/forms/Hosts.js
+++ b/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. " +
-                    "Separate variables with commas, and wrap the entire string with { }. " +
-                    "&nbsp;For example:</p><p>{<br\>&quot;ntp_server&quot;: &quot;ntp.example.com&quot;,<br \>" + 
-                    '&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>',
+                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">ansiblewors.com</a></p>',
                dataTitle: 'Host Variables',
                dataPlacement: 'right'
                }
--- a/ansibleworks/ui/static/js/helpers/Groups.js
+++ b/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.formModalHeader = 'Edit Group'
+        scope.formModalActionLabel = 'Save';
+        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 }); 
--- a/ansibleworks/ui/static/js/helpers/Hosts.js
+++ b/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,9 +160,11 @@ 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.formModalHeader = 'Create Host'
-
+        scope.formModalActionLabel = 'Save';
+        scope.formModalHeader = 'Create Host';
+        scope.parseType = 'json';
+        ParseTypeChange(scope);
+        
        $('#form-modal').unbind('hidden');
        $('#form-modal').on('hidden', function () { HostsReload(params); });
        
@ -176,9 +178,15 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
        // 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) {
                   if (fld != 'variables') {
@ -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,9 +251,11 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
        var master = {};
        var relatedSets = {};

-        scope.formModalActionLabel = 'Save'
-        scope.formModalHeader = 'Edit Host'
-  
+        scope.formModalActionLabel = 'Save';
+        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');
                               })
--- a/ansibleworks/ui/static/js/helpers/Parse.js
+++ b/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 = "---";
+                  }
+               }
+            }
+            });
+        }
+        }]);
--- a/ansibleworks/ui/static/lib/ansible/form-generator.js
+++ b/ansibleworks/ui/static/lib/ansible/form-generator.js
@ -257,7 +257,11 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
                html += "><i class=\"icon-info-sign\"></i></a> ";
             }
             html += field.label + '</label>' + "\n";
-             html += "<div class=\"controls\">\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 + '" ';
--- a/ansibleworks/ui/static/lib/js-yaml/js-yaml.min.js
+++ b/ansibleworks/ui/static/lib/js-yaml/js-yaml.min.js
--- a/ansibleworks/ui/templates/ui/index.html
+++ b/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();