AC-502 Finally figured out how to fix the awToolTip directive so that it watches a variable for tool tip text changes and updates the tool tip text. Pass in the variable name using badgeTipWatch. Used on home/hosts page and inventory/N/hosts page when toggling the enabled flag.

awx/ui/static/js/controllers/Home.js

@@ -116,7 +116,7 @@ HomeGroups.$inject = [ '$location', '$routeParams', 'HomeGroupList', 'GenerateLi
 
 
 function HomeHosts ($location, $routeParams, HomeHostList, GenerateList, ProcessErrors, LoadBreadCrumbs, ReturnToCaller, ClearScope, 
-    GetBasePath, SearchInit, PaginateInit, FormatDate, SetHostStatus) {
+    GetBasePath, SearchInit, PaginateInit, FormatDate, SetHostStatus, ToggleHostEnabled) {
 
     ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                                  //scope.
@@ -153,12 +153,12 @@ function HomeHosts ($location, $routeParams, HomeHostList, GenerateList, Process
    
     LoadBreadCrumbs();
    
-    scope.viewUpdateStatus = function(id) { ViewUpdateStatus({ scope: scope, group_id: id }) };
+    scope.toggle_host_enabled = function(id, sources) { ToggleHostEnabled(id, sources, scope); }
 
     }
 
 HomeGroups.$inject = [ '$location', '$routeParams', 'HomeGroupList', 'GenerateList', 'ProcessErrors', 'LoadBreadCrumbs', 'ReturnToCaller', 
     'ClearScope', 'GetBasePath', 'SearchInit', 'PaginateInit', 'FormatDate', 'HostsStatusMsg', 'UpdateStatusMsg', 'ViewUpdateStatus',
-    'SetHostStatus'
+    'SetHostStatus', 'ToggleHostEnabled'
     ]; 
   

awx/ui/static/js/controllers/Hosts.js

@@ -13,7 +13,8 @@ function InventoryHosts ($scope, $rootScope, $compile, $location, $log, $routePa
                          GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, RelatedSearchInit, 
                          RelatedPaginateInit, ReturnToCaller, ClearScope, LookUpInit, Prompt,
                          GetBasePath, HostsList, HostsAdd, HostsEdit, HostsDelete,
-                         HostsReload, BuildTree, EditHostGroups, InventoryHostsHelp, HelpDialog, Wait)
+                         HostsReload, BuildTree, EditHostGroups, InventoryHostsHelp, HelpDialog, Wait,
+                         ToggleHostEnabled)
 {
     ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                                  //scope.
@@ -76,38 +77,7 @@ function InventoryHosts ($scope, $rootScope, $compile, $location, $log, $routePa
         $location.url('/jobs/?job_host_summaries__host=' + id);
         } 
     
-    scope.toggle_host_enabled = function(id, sources) {
+    scope.toggle_host_enabled = function(id, sources) { ToggleHostEnabled(id, sources, scope); }
-        var host;
-        var i;
-        if (!sources) {
-            // Host is not managed by an external source
-            Wait('start');
-            for (i=0; i < scope.hosts.length; i++) {
-                if (scope.hosts[i].id == id) {
-                   scope.hosts[i].enabled = (scope.hosts[i].enabled) ? false : true;
-                   scope.hosts[i].enabled_flag = scope.hosts[i].enabled;
-                   host = scope.hosts[i];
-                   break;
-                }    
-            }
-            Rest.setUrl(GetBasePath('hosts') + id + '/');
-            Rest.put(host)
-                .success( function(data, status, headers, config) {
-                    Wait('stop');
-                    })
-                .error( function(data, status, headers, config) {
-                    scope.hosts[i].enabled = (scope.hosts[i].enabled) ? false : true;
-                    scope.hosts[i].enabled_flag = scope.hosts[i].enabled;
-                    Wait('stop');
-                    ProcessErrors(scope, data, status, null,
-                        { hdr: 'Error!', msg: 'Failed to update host. PUT returned status: ' + status });
-                    });
-        }
-        else {
-            Alert('External Host', 'This host is part of an external inventory. It can only be enabled or disabled by the ' + 
-                'inventory sync process.', 'alert-info');
-        }
-        }
 
     scope.allHostSummaries = function(id, name, inventory_id) {
         LoadBreadCrumbs({ path: '/hosts/' + id, title: name, altPath: '/inventories/' + inventory_id + '/hosts', 
@@ -180,6 +150,7 @@ InventoryHosts.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$lo
                             'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'RelatedSearchInit', 
                             'RelatedPaginateInit', 'ReturnToCaller', 'ClearScope', 'LookUpInit', 'Prompt',
                             'GetBasePath', 'HostsList', 'HostsAdd', 'HostsEdit', 'HostsDelete',
-                            'HostsReload', 'BuildTree', 'EditHostGroups', 'InventoryHostsHelp', 'HelpDialog', 'Wait'
+                            'HostsReload', 'BuildTree', 'EditHostGroups', 'InventoryHostsHelp', 'HelpDialog', 'Wait',
+                            'ToggleHostEnabled'
                             ]; 
   

awx/ui/static/js/controllers/Inventories.js

@@ -28,6 +28,14 @@ function InventoriesList ($scope, $rootScope, $location, $log, $routeParams, Res
     SearchInit({ scope: scope, set: 'inventories', list: list, url: defaultUrl });
     PaginateInit({ scope: scope, list: list, url: defaultUrl });
   
+    if ($routeParams['name']) {
+        scope[InventoryList.iterator + 'InputDisable'] = false;
+        scope[InventoryList.iterator + 'SearchValue'] = $routeParams['name'];
+        scope[InventoryList.iterator + 'SearchField'] = 'name';
+        scope[InventoryList.iterator + 'SearchFieldLabel'] = InventoryList.fields['name'].label;
+        scope[InventoryList.iterator + 'SearchSelectValue'] = null;
+    }
+
     if ($routeParams['has_active_failures']) {
         //scope.resetSearch(InventoryHostsForm.iterator);
         scope[InventoryList.iterator + 'InputDisable'] = true;

awx/ui/static/js/forms/InventoryHosts.js

@@ -40,6 +40,7 @@ angular.module('InventoryHostsFormDefinition', [])
                 badgePlacement: 'left',
                 badgeToolTip: "\{\{ host.enabledToolTip \}\}",
                 badgeTipPlacement: "top",
+                badgeTipWatch: "host.enabledToolTip",
                 ngClick: "toggle_host_enabled(\{\{ host.id \}\}, \{\{ host.has_inventory_sources \}\})",
                 searchable: false,
                 showValue: false

awx/ui/static/js/helpers/Hosts.js

@@ -49,6 +49,55 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
         }
         }])
     
+    .factory('ToggleHostEnabled', [ 'GetBasePath', 'Rest', 'Wait', 'ProcessErrors', 'Alert',
+    function(GetBasePath, Rest, Wait, ProcessErrors, Alert) {
+    return function(id, sources, scope) {
+        var i;
+        
+        function setMsg() {
+            scope['hosts'][i].enabled = (scope['hosts'][i].enabled) ? false : true;
+            scope['hosts'][i].enabled_flag = scope['hosts'][i].enabled;
+            if (scope['hosts'][i].has_inventory_sources) {
+                // Inventory sync managed, so not clickable 
+                scope['hosts'][i].enabledToolTip = (scope['hosts'][i].enabled) ? 'Ready! Availabe to running jobs.' :
+                    'Out to lunch! This host is not available to running jobs.';
+            }
+            else {
+                // Clickable
+                scope['hosts'][i].enabledToolTip = (scope['hosts'][i].enabled) ? 'Ready! Available to running jobs. Click to toggle.' :
+                    'Out to lunch! Host not available to running jobs. Click to toggle.';
+            }
+            }
+
+        if (!sources) {
+            // Host is not managed by an external source
+            Wait('start');
+            for (i=0; i < scope.hosts.length; i++) {
+                if (scope.hosts[i].id == id) {
+                    //host = scope.hosts[i];
+                    setMsg();
+                    break;
+                }    
+            }
+            Rest.setUrl(GetBasePath('hosts') + id + '/');
+            Rest.put(scope['hosts'][i])
+                .success( function(data, status, headers, config) {
+                    Wait('stop');
+                    })
+                .error( function(data, status, headers, config) {
+                    // Flip the enabled flag back
+                    setMsg();
+                    Wait('stop');
+                    ProcessErrors(scope, data, status, null,
+                        { hdr: 'Error!', msg: 'Failed to update host. PUT returned status: ' + status });
+                    });
+        }
+        else {
+            Alert('External Host', 'This host is part of an external inventory. It can only be enabled or disabled by the ' + 
+                'inventory sync process.', 'alert-info');
+        }
+        }
+        }])
 
     .factory('HostsList', ['$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'HostList', 'GenerateList', 
         'Prompt', 'SearchInit', 'PaginateInit', 'ProcessErrors', 'GetBasePath', 'HostsAdd', 'HostsReload',

awx/ui/static/js/lists/HomeHosts.js

@@ -16,6 +16,7 @@ angular.module('HomeHostListDefinition', [])
         selectTitle: 'Add Existing Hosts',
         editTitle: 'Hosts',
         index: true,
+        hover: true,
         well: true,
 
         fields: {
@@ -30,7 +31,7 @@ angular.module('HomeHostListDefinition', [])
                 sourceModel: 'inventory',
                 sourceField: 'name',
                 columnClass: 'col-lg-3 col-md3 col-sm-2',
-                linkTo: "\{\{ '/#/inventories/' + group.inventory \}\}"
+                linkTo: "\{\{ '/#/inventories/?name=' + host.summary_fields.inventory.name \}\}"
                 },
             active_failures: {
                 label: 'Job Status',
@@ -51,17 +52,11 @@ angular.module('HomeHostListDefinition', [])
                 badgePlacement: 'left',
                 badgeToolTip: "\{\{ host.enabledToolTip \}\}",
                 badgeTipPlacement: "top",
+                badgeTipWatch: "host.enabledToolTip",
                 ngClick: "toggle_host_enabled(\{\{ host.id \}\}, \{\{ host.has_inventory_sources \}\})",
                 searchable: false,
                 showValue: false
                 },
-            groups: {
-                label: 'Groups',
-                searchable: true,
-                sourceModel: 'groups',
-                sourceField: 'name',
-                nosort: true
-                },
             enabled: {
                 label: 'Disabled?',
                 searchSingleValue: true,

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

@@ -234,6 +234,17 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Hos
                    });  
                });
            $(element).tooltip({ placement: placement, delay: delay, html: true, title: attrs.awToolTip, container: 'body' });
+           
+           if (attrs.tipWatch) {
+              // Add 'data-tip-watch=<variable to watch>' and we'll watch for changes
+              scope.$watch(attrs.tipWatch, function(newVal, oldVal) {
+                  if (newVal !== oldVal) {
+                      // Where did fixTitle come frome?:
+                      //   http://stackoverflow.com/questions/9501921/change-twitter-bootstrap-tooltip-content-on-click
+                      $(element).tooltip('hide').attr('data-original-title', newVal).tooltip('fixTitle')
+                  }
+                  });
+           }
        }
        })
      

awx/ui/static/lib/ansible/generator-helpers.js

@@ -296,6 +296,7 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers'])
               html += (field.ngClick) ? "ng-click=\"" + field.ngClick + "\" " : "";
               html += " aw-tool-tip=\"" + field.badgeToolTip + "\"";
               html += (field.badgeTipPlacement) ? " data-placement=\"" + field.badgeTipPlacement + "\"" : "";
+              html += (field.badgeTipWatch) ? " data-tip-watch=\"" + field.badgeTipWatch + "\"" : "";
               html += (field.badgeShow) ? " ng-show=\"" + field.badgeShow + "\"" : "";
               html += ">";
            }