Added tooltips to host/group/extra variables using TB popover. Fixed bugs on Inventory detail page causing js errors. Added JSON validation to extra_vars on Job Templates add/edit page. Always grey-out/disable fields on Jobs detail page because upading a Pending job throws a 405 error -will investigate with CC later.

ansibleworks/ui/static/js/app.js

@@ -17,7 +17,6 @@ angular.module('ansible', [
     'OrganizationListDefinition',
     'UserListDefinition', 
     'ListGenerator', 
-    'AWToolTip', 
     'PromptDialog',
     'ApiLoader', 
     'RelatedSearchHelper', 

ansibleworks/ui/static/js/controllers/Inventories.js

@@ -218,13 +218,6 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
    var id = $routeParams.id;
    var relatedSets = {}; 
   
-   // After inventory is loaded, retrieve each related set and any lookups
-   scope.$on('inventoryLoaded', function() {
-       for (var set in relatedSets) {
-           scope.search(relatedSets[set].iterator);
-       }     
-       });
-
    // Retrieve detail record and prepopulate the form
    Rest.setUrl(defaultUrl + ':id/'); 
    Rest.get({ params: {id: id} })

ansibleworks/ui/static/js/controllers/JobTemplates.js

@@ -216,25 +216,32 @@ function JobTemplatesAdd ($scope, $rootScope, $compile, $location, $log, $routeP
 
    // Save
    scope.formSave = function() {
-      Rest.setUrl(defaultUrl);
+      try {
-      var data = {}
+          // Make sure we have valid JSON 
-      for (var fld in form.fields) {
+          var myjson = JSON.parse(scope.extra_vars);
-          if (form.fields[fld].type == 'select' && fld != 'playbook') {
+          Rest.setUrl(defaultUrl);
-             data[fld] = scope[fld].value;
+          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];
+              }      
           }
-          else {
+          Rest.post(data)
-             data[fld] = scope[fld];
+              .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 });
+                  });
+      }
+      catch(err) {
+          Alert("Error", "Error parsing extra variables. Expecting valid JSON. 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
@@ -389,25 +396,32 @@ function JobTemplatesEdit ($scope, $rootScope, $compile, $location, $log, $route
 
    // Save changes to the parent
    scope.formSave = function() {
-      Rest.setUrl(defaultUrl + $routeParams.id + '/');
+      try {
-      var data = {}
+          // Make sure we have valid JSON 
-      for (var fld in form.fields) {
+          var myjson = JSON.parse(scope.extra_vars);
-          if (form.fields[fld].type == 'select' && fld != 'playbook') {
+          Rest.setUrl(defaultUrl + $routeParams.id + '/');
-             data[fld] = scope[fld].value;
+          var data = {}
-          }
+          for (var fld in form.fields) {
-          else {
+              if (form.fields[fld].type == 'select' && fld != 'playbook') {
-             data[fld] = scope[fld];
+                 data[fld] = scope[fld].value;
-          }   
+              }
-      } 
+              else {
-      Rest.put(data)
+                 data[fld] = scope[fld];
-          .success( function(data, status, headers, config) {
+              }   
-              var base = $location.path().replace(/^\//,'').split('/')[0];
+          } 
-              (base == 'job_templates') ? ReturnToCaller() : ReturnToCaller(1);
+          Rest.put(data)
-              })
+              .success( function(data, status, headers, config) {
-          .error( function(data, status, headers, config) {
+                  var base = $location.path().replace(/^\//,'').split('/')[0];
-              ProcessErrors(scope, data, status, form,
+                  (base == 'job_templates') ? ReturnToCaller() : ReturnToCaller(1);
-                  { hdr: 'Error!', msg: 'Failed to update team: ' + $routeParams.id + '. PUT status: ' + status });
+                  })
+              .error( function(data, status, headers, config) {
+                  ProcessErrors(scope, data, status, form,
+                      { hdr: 'Error!', msg: 'Failed to update team: ' + $routeParams.id + '. PUT status: ' + status });
               });
+      }
+      catch(err) {
+          Alert("Error", "Error parsing extra variables. Expecting valid JSON. Parser returned " + err); 
+      }
       };
 
    // Cancel

ansibleworks/ui/static/js/controllers/Jobs.js

@@ -227,11 +227,9 @@ function JobsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams,
                }
            }
             
-           if (data.status != 'new') {
+           $('input[type="text"], textarea').attr('readonly','readonly');
-              $('input[type="text"], textarea').attr('readonly','readonly');
+           $('select').prop('disabled', 'disabled');
-              $('select').prop('disabled', 'disabled');
+           $('.lookup-btn').prop('disabled', 'disabled');
-              $('.lookup-btn').prop('disabled', 'disabled');
-           }
 
            scope.url = data.url; 
            var related = data.related;

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

@@ -35,7 +35,14 @@ angular.module('GroupFormDefinition', [])
                 editRequird: false, 
                 rows: 10,
                 class: 'span12',
-                default: "\{\}"
+                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>'
                 }
             },
 

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

@@ -40,7 +40,14 @@ angular.module('HostFormDefinition', [])
                 editRequird: false, 
                 rows: 10,
                 class: 'span12',
-                default: "\{\}"
+                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>',
+                dataTitle: 'Host Variables',
+                dataPlacement: 'right'
                 }
             },
 

ansibleworks/ui/static/js/forms/JobTemplates.js

@@ -115,7 +115,15 @@ angular.module('JobTemplateFormDefinition', [])
                 class: 'span12',
                 addRequired: false, 
                 editRequired: false,
-                column: 2
+                default: "\{\}",
+                column: 2,
+                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>',
+                dataTitle: 'Extra Variables',
+                dataPlacement: 'left'
                 }
             },
 

ansibleworks/ui/static/lib/ansible/directives.js

@@ -130,5 +130,43 @@ angular.module('AWDirectives', ['RestServices'])
                 })
             }
         }
-        }]);
+        }])
+    
+    /*  
+     *  Enable TB tooltips. To add a tooltip to an element, include the following directive in
+     *  the element's attributes:
+     *
+     *     aw-tool-tip="<< tooltip text here >>"
+     *
+     *  Include the standard TB data-XXX attributes to controll a tooltip's appearance.  We will 
+     *  default placement to the left and delay to 2 seconds.
+     */ 
+    .directive('awToolTip', function() {
+       return function(scope, element, attrs) {
+           var delay = (attrs.delay != undefined && attrs.delay != null) ? attrs.delay : $AnsibleConfig.tooltip_delay;
+           var placement = (attrs.placement != undefined && attrs.placement != null) ? attrs.placement : 'left';
+           $(element).tooltip({ placement: placement, delay: delay, title: attrs.awToolTip });
+       }
+       })
+     
+     /*  
+     *  Enable TB pop-overs. To add a pop-over to an element, include the following directive in
+     *  the element's attributes:
+     *
+     *     aw-pop-over="<< pop-over html here >>"
+     *
+     *  Include the standard TB data-XXX attributes to controll the pop-over's appearance.  We will 
+     *  default placement to the left, delay to 0 seconds, content type to HTML, and title to 'Help'.
+     */ 
+    .directive('awPopOver', function() {
+       return function(scope, element, attrs) {
+           var placement = (attrs.placement != undefined && attrs.placement != null) ? attrs.placement : 'left';
+           var title = (attrs.title != undefined && attrs.title != null) ? attrs.title : 'Help';
+           $(element).popover({ placement: placement, delay: 0, title: title, 
+               content: attrs.awPopOver, delay: 0, trigger: 'click', html: true });
+       }
+       });
+
+
+
 

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

@@ -40,6 +40,15 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
            case 'awToolTip':
                result = "aw-tool-tip=\"" + obj[key] + "\" ";
                break;
+           case 'awPopOver':
+               result = "aw-pop-over='" + obj[key] + "' ";
+               break;
+           case 'dataTitle':
+               result = "data-title=\"" + obj[key] + "\" ";
+               break;
+           case 'dataPlacement':
+               result = "data-placement=\"" + obj[key] + "\" ";
+               break;
            default: 
                result = key + "=\"" + obj[key] + "\" ";
        }
@@ -226,7 +235,14 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
              html += "<div class=\"control-group\""
              html += (field.ngShow) ? this.attr(field,'ngShow') : "";
              html += ">\n";
-             html += "<label class=\"control-label\" for=\"" + fld + '">' + field.label + '</label>' + "\n";
+             html += "<label class=\"control-label\" for=\"" + fld + '">';
+             if (field.awPopOver) {
+                html += "<a href=\"\" " + this.attr(field,'awPopOver');
+                html += (field.dataTitle) ? this.attr(field, 'dataTitle') : ""; 
+                html += (field.dataPlacement) ? this.attr(field, 'dataPlacement') : "";
+                html += "><i class=\"icon-info-sign\"></i></a> ";
+             }
+             html += field.label + '</label>' + "\n";
              html += "<div class=\"controls\">\n"; 
              html += "<textarea ";
              html += (field.rows) ? this.attr(field, 'rows') : "";

ansibleworks/ui/static/lib/ansible/tooltip.js

@@ -1,23 +0,0 @@
-/************************************
- * Copyright (c) 2013 AnsibleWorks, Inc.
- *
- *
- *  tooltip.js
- *  
- *  Custom directive to enable TB tooltips. To add a tooltip to an element, include the following directive in
- *  the element's attributes:
- *
- *     aw-tool-tip="<< tooltip text here >>"
- *
- *  Include the standard TB data-XXX attributes to controll a tooltip's appearance.  We will default placement
- *  to the left and delay to 2 seconds.
- *
- */ 
-angular.module('AWToolTip', [])
-   .directive('awToolTip', function() {
-       return function(scope, element, attrs) {
-           var delay = (attrs.delay != undefined && attrs.delay != null) ? attrs.delay : $AnsibleConfig.tooltip_delay;
-           var placement = (attrs.placement != undefined && attrs.placement != null) ? attrs.placement : 'left';
-           $(element).tooltip({ placement: placement, delay: delay, title: attrs.awToolTip });
-       }
-   });

ansibleworks/ui/templates/ui/index.html

@@ -74,7 +74,6 @@
   <script src="{{ STATIC_URL }}js/helpers/Lookup.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/tooltip.js"></script>
   <script src="{{ STATIC_URL }}lib/ansible/api-loader.js"></script>
   {% endif %}
   <!-- <script src="{{ STATIC_URL }}lib/angular/http-auth-interceptor.js"></script> -->