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.

2026-01-15 11:50:42 -03:30 · 2013-05-27 13:18:15 -04:00 · 2013-05-27 13:18:15 -04:00 · e61a966464
commit e61a966464
parent 2a0f528954
11 changed files with 133 additions and 77 deletions
--- a/ansibleworks/ui/static/js/app.js
+++ b/ansibleworks/ui/static/js/app.js
@ -17,7 +17,6 @@ angular.module('ansible', [
    'OrganizationListDefinition',
    'UserListDefinition', 
    'ListGenerator', 
-    'AWToolTip', 
    'PromptDialog',
    'ApiLoader', 
    'RelatedSearchHelper', 
--- a/ansibleworks/ui/static/js/controllers/Inventories.js
+++ b/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} })
--- a/ansibleworks/ui/static/js/controllers/JobTemplates.js
+++ b/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);
-      var data = {}
-      for (var fld in form.fields) {
-          if (form.fields[fld].type == 'select' && fld != 'playbook') {
-             data[fld] = scope[fld].value;
+      try {
+          // Make sure we have valid JSON 
+          var myjson = JSON.parse(scope.extra_vars);
+          Rest.setUrl(defaultUrl);
+          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 {
-             data[fld] = scope[fld];
-          }      
+          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 });
+                  });
+      }
+      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 + '/');
-      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];
-          }   
-      } 
-      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 team: ' + $routeParams.id + '. PUT status: ' + status });
+      try {
+          // Make sure we have valid JSON 
+          var myjson = JSON.parse(scope.extra_vars);
+          Rest.setUrl(defaultUrl + $routeParams.id + '/');
+          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];
+              }   
+          } 
+          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 team: ' + $routeParams.id + '. PUT status: ' + status });
              });
+      }
+      catch(err) {
+          Alert("Error", "Error parsing extra variables. Expecting valid JSON. Parser returned " + err); 
+      }
      };

   // Cancel
--- a/ansibleworks/ui/static/js/controllers/Jobs.js
+++ b/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');
-              $('select').prop('disabled', 'disabled');
-              $('.lookup-btn').prop('disabled', 'disabled');
-           }
+           $('input[type="text"], textarea').attr('readonly','readonly');
+           $('select').prop('disabled', 'disabled');
+           $('.lookup-btn').prop('disabled', 'disabled');

           scope.url = data.url; 
           var related = data.related;
--- a/ansibleworks/ui/static/js/forms/Groups.js
+++ b/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>'
                }
            },

--- a/ansibleworks/ui/static/js/forms/Hosts.js
+++ b/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'
                }
            },

--- a/ansibleworks/ui/static/js/forms/JobTemplates.js
+++ b/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'
                }
            },

--- a/ansibleworks/ui/static/lib/ansible/directives.js
+++ b/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 });
+       }
+       });
+
+
+

--- a/ansibleworks/ui/static/lib/ansible/form-generator.js
+++ b/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') : "";
--- a/ansibleworks/ui/static/lib/ansible/tooltip.js
+++ b/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 });
-       }
-   });
--- a/ansibleworks/ui/templates/ui/index.html
+++ b/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> -->