Added new help generator to Hosts page.

awx/ui/static/js/app.js

@@ -76,7 +76,8 @@ angular.module('ansible', [
     'ObjectCountWidget',
     'JobsHelper',
     'InventoryStatusDefinition',
-    'InventorySummaryHelpDefinition'
+    'InventorySummaryHelpDefinition',
+    'InventoryHostsHelpDefinition'
      ])
     .config(['$routeProvider', function($routeProvider) {
         $routeProvider.

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

@@ -13,130 +13,134 @@ 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, LoadSearchTree, EditHostGroups) 
+                         HostsReload, LoadSearchTree, EditHostGroups, InventoryHostsHelp, HelpDialog)
 {
-   ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
+    ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                                 //scope.
 
-   var generator = GenerateForm;
+    var generator = GenerateForm;
-   var form = InventoryHostsForm;
+    var form = InventoryHostsForm;
-   var defaultUrl=GetBasePath('inventory');
+    var defaultUrl=GetBasePath('inventory');
-   var scope = generator.inject(form, {mode: 'edit', related: true, buildTree: true});
+    var scope = generator.inject(form, {mode: 'edit', related: true, buildTree: true});
-   var base = $location.path().replace(/^\//,'').split('/')[0];
+    var base = $location.path().replace(/^\//,'').split('/')[0];
-   var id = $routeParams.inventory_id;
+    var id = $routeParams.inventory_id;
     
-   scope['inventory_id'] = id;
+    scope['inventory_id'] = id;
-   scope['hostAddHide'] = true;
+    scope['hostAddHide'] = true;
-   scope['hostCreateHide'] = true;
+    scope['hostCreateHide'] = true;
-   scope['hosts'] = null;
+    scope['hosts'] = null;
-   scope['helpCount'] = 0;
+    scope['helpCount'] = 0;
 
-   if (scope.loadBreadCrumbsRemove) {
+    if (scope.loadBreadCrumbsRemove) {
       scope.loadBreadCrumbsRemove();
-   }
+    }
-   scope.loadBreadCrumbsRemove = scope.$on('buildAllGroups', function(e, inventory_name) {
+    scope.loadBreadCrumbsRemove = scope.$on('buildAllGroups', function(e, inventory_name) {
        LoadBreadCrumbs({ path: '/inventories/' + id, title: inventory_name });
        });
 
-   // Sets up the search tree and loads All Hosts for the inventory
+    // Sets up the search tree and loads All Hosts for the inventory
-   LoadSearchTree({ scope: scope, inventory_id: scope['inventory_id'] });
+    LoadSearchTree({ scope: scope, inventory_id: scope['inventory_id'] });
 
-   // Add the selected flag to the hosts set.
-   //if (scope.relatedHostsRemove) {
-   //   scope.relatedHostsRemove(); 
-   //}
-   //scope.relatedHostsRemove = scope.$on('relatedhosts', function() {
-   //    scope.toggleAllFlag = false;
-   //    for (var i=0; i < scope.hosts.length; i++) {
-   //        scope.hosts[i].selected = 0;
-   //    }
-   //    });
 
-  scope.filterHosts = function() {
+    scope.filterHosts = function() {
-      HostsReload({ scope: scope, inventory_id: scope['inventory_id'], group_id: scope['group_id'] });
+        HostsReload({ scope: scope, inventory_id: scope['inventory_id'], group_id: scope['group_id'] });
-      }
+        }
 
-  scope.addHost = function() {
+    scope.addHost = function() {
-      HostsList({ scope: scope, "inventory_id": id, group_id: scope.group_id });
+        HostsList({ scope: scope, "inventory_id": id, group_id: scope.group_id });
-      }
+        }
 
-  scope.createHost = function() {
+    scope.createHost = function() {
-      HostsAdd({ scope: scope, "inventory_id": id, group_id: scope.group_id });
+        HostsAdd({ scope: scope, "inventory_id": id, group_id: scope.group_id });
-      }
+        }
 
-  scope.editHost = function(host_id, host_name) {
+    scope.editHost = function(host_id, host_name) {
-      HostsEdit({ scope: scope, "inventory_id": id, group_id: scope.group_id, host_id: host_id, host_name: host_name });
+        HostsEdit({ scope: scope, "inventory_id": id, group_id: scope.group_id, host_id: host_id, host_name: host_name });
-      }
+        }
     
-  scope.editGroups = function() {
+    scope.editGroups = function() {
-      $location.path('/inventories/' + scope.inventory_id + '/groups');
+        $location.path('/inventories/' + scope.inventory_id + '/groups');
-      }
+        } 
 
-  scope.editHostGroups = function(host_id) {
+    scope.editHostGroups = function(host_id) {
-      EditHostGroups({ inventory_id: id, host_id: host_id });
+        EditHostGroups({ inventory_id: id, host_id: host_id });
-      }
+        }
 
-  scope.deleteHost = function(host_id, host_name) {
+    scope.deleteHost = function(host_id, host_name) {
-      HostsDelete({ scope: scope, "inventory_id": id, group_id: scope.group_id, host_id: host_id, host_name: host_name,
+        HostsDelete({ scope: scope, "inventory_id": id, group_id: scope.group_id, host_id: host_id, host_name: host_name,
-          request: 'delete' });
+            request: 'delete' });
-      }
+        }
   
-  scope.viewJobs = function(last_job) {
+    scope.viewJobs = function(last_job) {
-      $location.url('/jobs/?id__int=' + last_job );
+        $location.url('/jobs/?id__int=' + last_job );
-      }
+        }
  
-  scope.allJobs = function(id) {
+    scope.allJobs = function(id) {
-      $location.url('/jobs/?job_host_summaries__host=' + id);
+        $location.url('/jobs/?job_host_summaries__host=' + id);
-      }
+        } 
 
-  scope.allHostSummaries = function(id, name, inventory_id) {
+    scope.allHostSummaries = function(id, name, inventory_id) {
-      LoadBreadCrumbs({ path: '/hosts/' + id, title: name, altPath: '/inventories/' + inventory_id + '/hosts', 
+        LoadBreadCrumbs({ path: '/hosts/' + id, title: name, altPath: '/inventories/' + inventory_id + '/hosts', 
-          inventory_id: inventory_id });
+            inventory_id: inventory_id });
-      $location.url('/hosts/' + id + '/job_host_summaries/?inventory=' + inventory_id);
+        $location.url('/hosts/' + id + '/job_host_summaries/?inventory=' + inventory_id);
-      }
+        } 
 
-  scope.viewLastEvents = function(host_id, last_job, host_name, last_job_name) {
+    scope.viewLastEvents = function(host_id, last_job, host_name, last_job_name) {
-      // Choose View-> Latest job events
+        // Choose View-> Latest job events
-      LoadBreadCrumbs({ path: '/jobs/' + last_job, title: last_job_name });
+        LoadBreadCrumbs({ path: '/jobs/' + last_job, title: last_job_name });
-      $location.url('/jobs/' + last_job + '/job_events/?host=' + escape(host_name));
+        $location.url('/jobs/' + last_job + '/job_events/?host=' + escape(host_name));
-      }
+        }
   
-  scope.viewLastSummary = function(host_id, last_job, host_name, last_job_name) {
+    scope.viewLastSummary = function(host_id, last_job, host_name, last_job_name) {
-      // Choose View-> Latest job events
+        // Choose View-> Latest job events
-      LoadBreadCrumbs({ path: '/jobs/' + last_job, title: last_job_name });
+        LoadBreadCrumbs({ path: '/jobs/' + last_job, title: last_job_name });
-      $location.url('/jobs/' + last_job + '/job_host_summaries/?host=' + escape(host_name));
+        $location.url('/jobs/' + last_job + '/job_host_summaries/?host=' + escape(host_name));
-      }
+        }
 
-  // Respond to the scope.$emit from awTree directive
+    if (scope.removeShowHelp) {
-  if (scope.refreshHostRemove) {
+       scope.removeShowHelp();
-     scope.refreshHostRemove();
+    }
-  }
+    scope.removeShowHelp = scope.$on('ShowHelp', function() {
-  scope.refreshHostRemove = scope.$on('refreshHost', function(e, group, title) {
+        // Force display fo help tooltip when no groups exist
-      scope.groupTitle = title;
+        $('#hosts-page-help').focus();
-      scope.group_id = group;
+        });
-      scope.helpCount++;
-      if (scope.group_id == null) {
-         scope.groupTitle = 'All Hosts';
-         scope.hostAddHide = true;
-         scope.hostCreateHide = true; 
-         scope.hostDeleteHide = true;
-      }
-      else {
-         scope.hostAddHide = false;
-         scope.hostCreateHide = false; 
-         scope.hostDeleteHide = false;
-      }
-      scope['hostDeleteDisabled'] = true; 
-      scope['hostDeleteDisabledClass'] = 'disabled';
-      HostsReload({ scope: scope, inventory_id: scope['inventory_id'], group_id: group });
-      });
 
+    scope.showHelp = function() {
+        // Display help dialog
+        $('.btn').blur();  //remove focus from the help button and all buttons
+                           //this stops the tooltip from continually displaying
+        HelpDialog({ defn: InventoryHostsHelp });
+        }
+
+    // Respond to the scope.$emit from awTree directive
+    if (scope.refreshHostRemove) {
+       scope.refreshHostRemove();
+    } 
+    scope.refreshHostRemove = scope.$on('refreshHost', function(e, group, title) {
+        scope.groupTitle = title;
+        scope.group_id = group;
+        scope.helpCount++;
+        if (scope.group_id == null) {
+           scope.groupTitle = 'All Hosts';
+           scope.hostAddHide = true;
+           scope.hostCreateHide = true; 
+           scope.hostDeleteHide = true;
+        }
+        else {
+           scope.hostAddHide = false;
+           scope.hostCreateHide = false; 
+           scope.hostDeleteHide = false;
+        }
+        scope['hostDeleteDisabled'] = true; 
+        scope['hostDeleteDisabledClass'] = 'disabled';
+        HostsReload({ scope: scope, inventory_id: scope['inventory_id'], group_id: group });
+        });
 }
 
 InventoryHosts.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'InventoryHostsForm', 
                             'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'RelatedSearchInit', 
                             'RelatedPaginateInit', 'ReturnToCaller', 'ClearScope', 'LookUpInit', 'Prompt',
                             'GetBasePath', 'HostsList', 'HostsAdd', 'HostsEdit', 'HostsDelete',
-                            'HostsReload', 'LoadSearchTree', 'EditHostGroups'
+                            'HostsReload', 'LoadSearchTree', 'EditHostGroups', 'InventoryHostsHelp', 'HelpDialog'
                             ]; 
   

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

@@ -88,6 +88,17 @@ angular.module('InventoryHostsFormDefinition', [])
                 dataPlacement: 'bottom',
                 'class': 'btn-xs btn-success',
                 icon: 'icon-plus'
+                },
+            help: {
+                dataPlacement: 'left',
+                icon: "icon-question-sign",
+                mode: 'all',
+                'class': 'btn-xs btn-info btn-help',
+                awToolTip: "<div style=\"padding-top:10px; text-align: left;\"><p>Need help getting started?</p>" +
+                    "<p>Click here for help with this page</p></div>",
+                iconSize: 'large',
+                ngClick: "showHelp()",
+                id: "hosts-page-help"
                 }
             },
         

awx/ui/static/js/help/InventoryHosts.js

@@ -0,0 +1,24 @@
+/*********************************************
+ *  Copyright (c) 2013 AnsibleWorks, Inc.
+ *
+ *  InventoryHosts.js 
+ *  Help object for Inventory-> Hosts page.
+ *
+ *  
+ */
+angular.module('InventoryHostsHelpDefinition', [])
+    .value(
+    'InventoryHostsHelp', {
+        story: {
+            hdr: 'Managing Hosts',
+            steps: {
+                step1: {
+                    intro: 'Start by selecting a group:',
+                    img: { src: 'help003.png', maxWidth: 315 , maxHeight: 198 },
+                    box: "On the group selector, click the name of a group. Hosts contained in the group" +
+                        " will appear on the right.",
+                    height: 500
+                    }
+                }    
+            }
+        });

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

@@ -474,6 +474,12 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
                 }        
             }
 
+            if (group_id == null || group_id == undefined) {
+               if (!scope.hosts.length) {
+                  scope.$emit('ShowHelp');
+               }
+            }
+         
             if (postAction) {
                postAction();
             }

awx/ui/static/js/lists/InventorySummary.js

@@ -113,7 +113,7 @@ angular.module('InventorySummaryDefinition', [])
                 icon: "icon-question-sign",
                 mode: 'all',
                 'class': 'btn-xs btn-info btn-help',
-                awToolTip: "<div style=\"text-align: left;\"><p>Need help getting started creating your inventory?</p>" +
+                awToolTip: "<div style=\"padding-top:10px; text-align: left;\"><p>Need help getting started creating your inventory?</p>" +
                     "<p>Click here for help with this page</p></div>",
                 iconSize: 'large',
                 ngClick: "showHelp()",

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

@@ -1254,6 +1254,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
           html += this.breadCrumbs(options, navigation);
   
           // Hint text
+         /*
           html += "<div ng-show=\"showGroupHelp\" class=\"alert alert-dismissable alert-info\">\n";
           html += "<button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-hidden=\"true\">&times;</button>\n";
           html += "<p><strong>Hint:</strong> Get started building your inventory by adding a group on the " + 
@@ -1265,6 +1266,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
           html += "<button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-hidden=\"true\">&times;</button>\n";
           html += "<p><strong>Hint:</strong> To add hosts to the inventory, select a group using the Group Selector.</p>";
           html += "</div>\n";
+          */
 
           html += "<div class=\"row\">\n";
           html += "<div class=\"col-lg-3\" id=\"search-tree-target\">\n";
@@ -1279,10 +1281,10 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
           html += SearchWidget({ iterator: form.iterator, template: form, mini: true, size: 'col-md-5 col-lg-5'});
           
           html += "<div class=\"col-md-5 col-lg-5\">\n"
-          html += "<div class=\"pull-right\">\n";
+          html += "<div class=\"list-actions\">\n";
           // Add actions(s)
           for (var action in form.actions) {
-              html += "<button type=\"button\" class=\"btn ";
+              /*html += "<button type=\"button\" class=\"btn ";
               html += (form.actions[action]['class']) ? form.actions[action]['class'] : "btn-success";
               html += "\" ";
               if (form['actions'][action].id) {
@@ -1298,9 +1300,10 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
               html += (form['actions'][action].ngHide) ? this.attr(form['actions'][action],'ngHide') : "";
               html += "><i class=\"" + form['actions'][action].icon + "\"></i>";
               html += (form['actions'][action].label) ?  " " + form['actions'][action].label : ""; 
-              html += "</button>\n";
+              html += "</button>\n";*/
+              html += this.button(form.actions[action], action);
           }
-          html += "</div>\n";
+          html += "</div><!-- list-actions -->\n";
           html += "</div>\n";
           html += "</div><!-- row -->\n";
           

awx/ui/templates/ui/index.html

@@ -115,6 +115,7 @@
   <script src="{{ STATIC_URL }}js/widgets/SCMSyncStatus.js"></script>
   <script src="{{ STATIC_URL }}js/widgets/ObjectCount.js"></script>
   <script src="{{ STATIC_URL }}js/help/InventorySummary.js"></script>
+  <script src="{{ STATIC_URL }}js/help/InventoryHosts.js"></script>
   <script src="{{ STATIC_URL }}lib/less/less-1.4.1.min.js"></script>
 
   {% endif %}