External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-14 19:30:39 -03:30
Code Issues Packages Projects Releases Wiki Activity

Added new help generator to Hosts page.

Browse Source
This commit is contained in:
chouseknecht 2013-10-15 16:10:33 -04:00
parent dbdf94d945
commit 78852bfb86
9 changed files with 159 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
awx/ui/static/img/help/help003.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

3
awx/ui/static/js/app.js
View File

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

210
awx/ui/static/js/controllers/Hosts.js
View File

@ -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'
];

11
awx/ui/static/js/forms/InventoryHosts.js
View File

@ -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"
}
},

24
awx/ui/static/js/help/InventoryHosts.js Normal file
View File

@ -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
}
}
}
});

6
awx/ui/static/js/helpers/Hosts.js
View File

@ -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();

2
awx/ui/static/js/lists/InventorySummary.js
View File

@ -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()",

11
awx/ui/static/lib/ansible/form-generator.js
View File

@ -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";

1
awx/ui/templates/ui/index.html
View File

@ -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 %}