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.

2026-03-13 15:09:32 -02:30 · 2013-11-11 22:24:15 +00:00
parent 353858cf28
commit 5a62ba3a32
8 changed files with 82 additions and 46 deletions
--- a/awx/ui/static/js/controllers/Home.js
+++ b/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.
@@ -152,13 +152,13 @@ function HomeHosts ($location, $routeParams, HomeHostList, GenerateList, Process
    scope.search(list.iterator);
   
    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'
    ]; 
  
--- a/awx/ui/static/js/controllers/Hosts.js
+++ b/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) {
-        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.toggle_host_enabled = function(id, sources) { ToggleHostEnabled(id, sources, scope); }

    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'
                            ]; 
  
--- a/awx/ui/static/js/controllers/Inventories.js
+++ b/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;
--- a/awx/ui/static/js/forms/InventoryHosts.js
+++ b/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
--- a/awx/ui/static/js/helpers/Hosts.js
+++ b/awx/ui/static/js/helpers/Hosts.js
@@ -48,7 +48,56 @@ 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',
--- a/awx/ui/static/js/lists/HomeHosts.js
+++ b/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,
--- a/awx/ui/static/lib/ansible/directives.js
+++ b/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')
+                  }
+                  });
+           }
       }
       })
     
--- a/awx/ui/static/lib/ansible/generator-helpers.js
+++ b/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 += ">";
           }