From 345085a165cf0ead7ce446b86e5b507b3ecc954b Mon Sep 17 00:00:00 2001
From: chouseknecht <chouse@ansibleworks.com>
Date: Wed, 3 Jul 2013 18:43:51 -0400
Subject: [PATCH] Made tool tips on host variables and group variables more
 better by providing actual examples in addition to links.

---
 awx/ui/static/js/controllers/JobTemplates.js | 9 +++++----
 awx/ui/static/js/forms/Groups.js             | 7 ++++++-
 awx/ui/static/js/forms/Hosts.js              | 7 ++++++-
 awx/ui/static/js/forms/JobTemplates.js       | 7 +++++--
 awx/ui/static/lib/ansible/form-generator.js  | 1 +
 5 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/awx/ui/static/js/controllers/JobTemplates.js b/awx/ui/static/js/controllers/JobTemplates.js
index c37cb484ee..0eaec66cb6 100644
--- a/awx/ui/static/js/controllers/JobTemplates.js
+++ b/awx/ui/static/js/controllers/JobTemplates.js
@@ -409,11 +409,13 @@ function JobTemplatesEdit ($scope, $rootScope, $compile, $location, $log, $route
               }
               if (fld == 'variables') {
                  // Parse extra_vars, converting to YAML.  
-                 if ($.isEmptyObject(data.extra_vars) || data.extra_vars == "\{\}") {
+                 if ($.isEmptyObject(data.extra_vars) || data.extra_vars == "\{\}" || data.extra_vars == "null") {
                     scope.variables = "---";
                  }
                  else {
-                    scope.variables = jsyaml.safeDump(JSON.parse(data.extra_vars));
+                    var json_obj = JSON.parse(data.extra_vars);
+                    scope.variables = jsyaml.safeDump(json_obj);
+                    console.log(json_obj);
                  }
                  master.variables = scope.variables;
               }
@@ -472,8 +474,7 @@ function JobTemplatesEdit ($scope, $rootScope, $compile, $location, $log, $route
        try {
            // 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;
+              var json_data = JSON.parse(scope.variables);  //make sure JSON parses
            }
            else {
               var json_data = jsyaml.load(scope.variables);  //parse yaml
diff --git a/awx/ui/static/js/forms/Groups.js b/awx/ui/static/js/forms/Groups.js
index 5b260623fb..59712e148d 100644
--- a/awx/ui/static/js/forms/Groups.js
+++ b/awx/ui/static/js/forms/Groups.js
@@ -40,8 +40,13 @@ angular.module('GroupFormDefinition', [])
                 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>" +
+                    "JSON:<br />\n" +
+                    "<blockquote>{<br />\"somevar\": \"somevalue\",<br />\"password\": \"magic\"<br /> }</blockquote>\n" +
+                    "YAML:<br />\n" +
+                    "<blockquote>---<br />somevar: somevalue<br />password: magic<br /></blockquote>\n" +
                     '<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>'
+                    '<p>View YAML examples at <a href="http://www.ansibleworks.com/docs/YAMLSyntax.html" target="_blank">ansibleworks.com</a></p>',
+                dataContainer: '#form-modal'
                 }
             },
 
diff --git a/awx/ui/static/js/forms/Hosts.js b/awx/ui/static/js/forms/Hosts.js
index 080d6a9ec0..806931ad3f 100644
--- a/awx/ui/static/js/forms/Hosts.js
+++ b/awx/ui/static/js/forms/Hosts.js
@@ -52,10 +52,15 @@ angular.module('HostFormDefinition', [])
                 "class": "modal-input-xlarge",
                 "default": "---",
                 awPopOver: "<p>Enter variables using either JSON or YAML syntax. Use the radio button to toggle between the two.</p>" +
+                    "JSON:<br />\n" +
+                    "<blockquote>{<br />\"somevar\": \"somevalue\",<br />\"password\": \"magic\"<br /> }</blockquote>\n" +
+                    "YAML:<br />\n" +
+                    "<blockquote>---<br />somevar: somevalue<br />password: magic<br /></blockquote>\n" +
                     '<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>',
                 dataTitle: 'Host Variables',
-                dataPlacement: 'right'
+                dataPlacement: 'right',
+                dataContainer: '#form-modal'
                 }
             },
 
diff --git a/awx/ui/static/js/forms/JobTemplates.js b/awx/ui/static/js/forms/JobTemplates.js
index 98f09a21bc..349db0d9c0 100644
--- a/awx/ui/static/js/forms/JobTemplates.js
+++ b/awx/ui/static/js/forms/JobTemplates.js
@@ -137,8 +137,11 @@ angular.module('JobTemplateFormDefinition', [])
                 "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 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>",
+                    "for ansible-playbook. Provide key/value pairs using either YAML or JSON.</p>" +
+                    "JSON:<br />\n" +
+                    "<blockquote>{<br />\"somevar\": \"somevalue\",<br />\"password\": \"magic\"<br /> }</blockquote>\n" +
+                    "YAML:<br />\n" +
+                    "<blockquote>---<br />somevar: somevalue<br />password: magic<br /></blockquote>\n",
                 dataTitle: 'Extra Variables',
                 dataPlacement: 'left'
                 },
diff --git a/awx/ui/static/lib/ansible/form-generator.js b/awx/ui/static/lib/ansible/form-generator.js
index b063f263aa..ad5b6d321f 100644
--- a/awx/ui/static/lib/ansible/form-generator.js
+++ b/awx/ui/static/lib/ansible/form-generator.js
@@ -275,6 +275,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
                 html += "<a href=\"\" " + this.attr(field,'awPopOver');
                 html += (field.dataTitle) ? this.attr(field, 'dataTitle') : ""; 
                 html += (field.dataPlacement) ? this.attr(field, 'dataPlacement') : "";
+                html += (field.dataContainer) ? this.attr(field, 'dataContainer') : "";
                 html += "><i class=\"icon-info-sign\"></i></a> ";
              }
              html += field.label + '</label>' + "\n";