diff --git a/awx/ui/static/img/help/help003.png b/awx/ui/static/img/help/help003.png new file mode 100644 index 0000000000..4036e34cc2 Binary files /dev/null and b/awx/ui/static/img/help/help003.png differ diff --git a/awx/ui/static/js/app.js b/awx/ui/static/js/app.js index ae2831ac18..cb32841562 100644 --- a/awx/ui/static/js/app.js +++ b/awx/ui/static/js/app.js @@ -76,7 +76,8 @@ angular.module('ansible', [ 'ObjectCountWidget', 'JobsHelper', 'InventoryStatusDefinition', - 'InventorySummaryHelpDefinition' + 'InventorySummaryHelpDefinition', + 'InventoryHostsHelpDefinition' ]) .config(['$routeProvider', function($routeProvider) { $routeProvider. diff --git a/awx/ui/static/js/controllers/Hosts.js b/awx/ui/static/js/controllers/Hosts.js index 1e49b9f966..e6b6b2d8a4 100644 --- a/awx/ui/static/js/controllers/Hosts.js +++ b/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 form = InventoryHostsForm; - var defaultUrl=GetBasePath('inventory'); - var scope = generator.inject(form, {mode: 'edit', related: true, buildTree: true}); - var base = $location.path().replace(/^\//,'').split('/')[0]; - var id = $routeParams.inventory_id; - - scope['inventory_id'] = id; - scope['hostAddHide'] = true; - scope['hostCreateHide'] = true; - scope['hosts'] = null; - scope['helpCount'] = 0; + var generator = GenerateForm; + var form = InventoryHostsForm; + var defaultUrl=GetBasePath('inventory'); + var scope = generator.inject(form, {mode: 'edit', related: true, buildTree: true}); + var base = $location.path().replace(/^\//,'').split('/')[0]; + var id = $routeParams.inventory_id; + + scope['inventory_id'] = id; + scope['hostAddHide'] = true; + scope['hostCreateHide'] = true; + scope['hosts'] = null; + 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 - 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; - // } - // }); + // Sets up the search tree and loads All Hosts for the inventory + LoadSearchTree({ scope: scope, inventory_id: scope['inventory_id'] }); - scope.filterHosts = function() { - HostsReload({ scope: scope, inventory_id: scope['inventory_id'], group_id: scope['group_id'] }); - } + + scope.filterHosts = function() { + HostsReload({ scope: scope, inventory_id: scope['inventory_id'], group_id: scope['group_id'] }); + } + + scope.addHost = function() { + HostsList({ scope: scope, "inventory_id": id, group_id: scope.group_id }); + } + + scope.createHost = function() { + HostsAdd({ scope: scope, "inventory_id": id, group_id: scope.group_id }); + } + + 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 }); + } + + scope.editGroups = function() { + $location.path('/inventories/' + scope.inventory_id + '/groups'); + } + + scope.editHostGroups = function(host_id) { + EditHostGroups({ inventory_id: id, host_id: host_id }); + } + + 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, + request: 'delete' }); + } - scope.addHost = function() { - HostsList({ scope: scope, "inventory_id": id, group_id: scope.group_id }); - } + scope.viewJobs = function(last_job) { + $location.url('/jobs/?id__int=' + last_job ); + } + + scope.allJobs = function(id) { + $location.url('/jobs/?job_host_summaries__host=' + id); + } - scope.createHost = function() { - HostsAdd({ scope: scope, "inventory_id": id, group_id: scope.group_id }); - } + scope.allHostSummaries = function(id, name, inventory_id) { + LoadBreadCrumbs({ path: '/hosts/' + id, title: name, altPath: '/inventories/' + inventory_id + '/hosts', + inventory_id: inventory_id }); + $location.url('/hosts/' + id + '/job_host_summaries/?inventory=' + inventory_id); + } - 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 }); - } + scope.viewLastEvents = function(host_id, last_job, host_name, last_job_name) { + // Choose View-> Latest job events + LoadBreadCrumbs({ path: '/jobs/' + last_job, title: last_job_name }); + $location.url('/jobs/' + last_job + '/job_events/?host=' + escape(host_name)); + } - scope.editGroups = function() { - $location.path('/inventories/' + scope.inventory_id + '/groups'); - } + scope.viewLastSummary = function(host_id, last_job, host_name, last_job_name) { + // Choose View-> Latest job events + LoadBreadCrumbs({ path: '/jobs/' + last_job, title: last_job_name }); + $location.url('/jobs/' + last_job + '/job_host_summaries/?host=' + escape(host_name)); + } - scope.editHostGroups = function(host_id) { - EditHostGroups({ inventory_id: id, host_id: host_id }); - } + if (scope.removeShowHelp) { + scope.removeShowHelp(); + } + scope.removeShowHelp = scope.$on('ShowHelp', function() { + // Force display fo help tooltip when no groups exist + $('#hosts-page-help').focus(); + }); - 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, - request: 'delete' }); - } - - scope.viewJobs = function(last_job) { - $location.url('/jobs/?id__int=' + last_job ); - } - - scope.allJobs = function(id) { - $location.url('/jobs/?job_host_summaries__host=' + id); - } - - scope.allHostSummaries = function(id, name, inventory_id) { - LoadBreadCrumbs({ path: '/hosts/' + id, title: name, altPath: '/inventories/' + inventory_id + '/hosts', - inventory_id: inventory_id }); - $location.url('/hosts/' + id + '/job_host_summaries/?inventory=' + inventory_id); - } - - scope.viewLastEvents = function(host_id, last_job, host_name, last_job_name) { - // Choose View-> Latest job events - LoadBreadCrumbs({ path: '/jobs/' + last_job, title: last_job_name }); - $location.url('/jobs/' + last_job + '/job_events/?host=' + escape(host_name)); - } - - scope.viewLastSummary = function(host_id, last_job, host_name, last_job_name) { - // Choose View-> Latest job events - LoadBreadCrumbs({ path: '/jobs/' + last_job, title: last_job_name }); - $location.url('/jobs/' + last_job + '/job_host_summaries/?host=' + escape(host_name)); - } - - // 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 }); - }); + 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' ]; diff --git a/awx/ui/static/js/forms/InventoryHosts.js b/awx/ui/static/js/forms/InventoryHosts.js index e9904491d8..62b89ad048 100644 --- a/awx/ui/static/js/forms/InventoryHosts.js +++ b/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: "

Need help getting started?

" + + "

Click here for help with this page

", + iconSize: 'large', + ngClick: "showHelp()", + id: "hosts-page-help" } }, diff --git a/awx/ui/static/js/help/InventoryHosts.js b/awx/ui/static/js/help/InventoryHosts.js new file mode 100644 index 0000000000..e4adc971ee --- /dev/null +++ b/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 + } + } + } + }); \ No newline at end of file diff --git a/awx/ui/static/js/helpers/Hosts.js b/awx/ui/static/js/helpers/Hosts.js index 6a26b42aed..b6c9190da9 100644 --- a/awx/ui/static/js/helpers/Hosts.js +++ b/awx/ui/static/js/helpers/Hosts.js @@ -473,6 +473,12 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H scope.hosts[i].active_failures = 'success'; } } + + if (group_id == null || group_id == undefined) { + if (!scope.hosts.length) { + scope.$emit('ShowHelp'); + } + } if (postAction) { postAction(); diff --git a/awx/ui/static/js/lists/InventorySummary.js b/awx/ui/static/js/lists/InventorySummary.js index 959ebdbb1b..17d625cc37 100644 --- a/awx/ui/static/js/lists/InventorySummary.js +++ b/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: "

Need help getting started creating your inventory?

" + + awToolTip: "

Need help getting started creating your inventory?

" + "

Click here for help with this page

", iconSize: 'large', ngClick: "showHelp()", diff --git a/awx/ui/static/lib/ansible/form-generator.js b/awx/ui/static/lib/ansible/form-generator.js index 7d7bc873fb..ee3fa368b0 100644 --- a/awx/ui/static/lib/ansible/form-generator.js +++ b/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 += "
\n"; html += "\n"; html += "

Hint: Get started building your inventory by adding a group on the " + @@ -1265,6 +1266,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies']) html += "\n"; html += "

Hint: To add hosts to the inventory, select a group using the Group Selector.

"; html += "
\n"; + */ html += "
\n"; html += "
\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 += "
\n" - html += "
\n"; + html += "
\n"; // Add actions(s) for (var action in form.actions) { - html += "\n"; + html += "\n";*/ + html += this.button(form.actions[action], action); } - html += "
\n"; + html += "
\n"; html += "
\n"; html += "
\n"; diff --git a/awx/ui/templates/ui/index.html b/awx/ui/templates/ui/index.html index db1138495e..b953182261 100644 --- a/awx/ui/templates/ui/index.html +++ b/awx/ui/templates/ui/index.html @@ -115,6 +115,7 @@ + {% endif %}