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

Created new help widget and applied to Inventory-> Groups. Help can now be a movable dialog with images and text. Help definitions (objects) can include many steps to tell a story or walk through a process.

Browse Source
This commit is contained in:
chouseknecht 2013-10-15 02:56:39 -04:00
parent c563f040ba
commit 4bcda34c3c
18 changed files with 257 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
awx/ui/static/css/custom-theme/jquery-ui-1.10.3.custom.css vendored
View File

@ -608,7 +608,7 @@ button.ui-button::-moz-focus-inner {
height: 100%;
}
.ui-progressbar .ui-progressbar-overlay {
background: url("images/animated-overlay.gif");
background: url("/static/css/custom-theme/images/animated-overlay.gif");
height: 100%;
filter: alpha(opacity=25);
opacity: 0.25;
@ -806,7 +806,7 @@ body .ui-tooltip {
}
.ui-widget-content {
border: 1px solid #a6c9e2;
background: #fcfdfd url(images/ui-bg_inset-hard_100_fcfdfd_1x100.png) 50% bottom repeat-x;
background: #fcfdfd url(/static/css/custom-theme/images/ui-bg_inset-hard_100_fcfdfd_1x100.png) 50% bottom repeat-x;
color: #36454F;
font-weight: normal;
}
@ -815,7 +815,7 @@ body .ui-tooltip {
}
.ui-widget-header {
border: 1px solid #a6c9e2;
background: #ffffff url(images/ui-bg_flat_50_ffffff_40x100.png) 50% 50% repeat-x;
background: #ffffff url(/static/css/custom-theme/images/ui-bg_flat_50_ffffff_40x100.png) 50% 50% repeat-x;
color: #36454F;
font-weight: bold;
}
@ -829,7 +829,7 @@ body .ui-tooltip {
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
border: 1px solid #a6c9e2;
background: #ffffff url(images/ui-bg_flat_100_ffffff_40x100.png) 50% 50% repeat-x;
background: #ffffff url(/static/css/custom-theme/images/ui-bg_flat_100_ffffff_40x100.png) 50% 50% repeat-x;
font-weight: bold;
color: #0088cc;
}
@ -846,7 +846,7 @@ body .ui-tooltip {
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
border: 1px solid #e3e3e3;
background: #e5e3e3 url(images/ui-bg_flat_75_e5e3e3_40x100.png) 50% 50% repeat-x;
background: #e5e3e3 url(/static/css/images/ui-bg_flat_75_e5e3e3_40x100.png) 50% 50% repeat-x;
font-weight: bold;
color: #005580;
}
@ -861,7 +861,7 @@ body .ui-tooltip {
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
border: 1px solid #e3e3e3;
background: #f5f5f5 url(images/ui-bg_inset-hard_100_f5f5f5_1x100.png) 50% 50% repeat-x;
background: #f5f5f5 url(/static/css/custom-theme/images/ui-bg_inset-hard_100_f5f5f5_1x100.png) 50% 50% repeat-x;
font-weight: bold;
color: #36454F;
}
@ -878,7 +878,7 @@ body .ui-tooltip {
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
border: 1px solid #fad42e;
background: #fbec88 url(images/ui-bg_flat_55_fbec88_40x100.png) 50% 50% repeat-x;
background: #fbec88 url(/static/css/custom-theme/images/ui-bg_flat_55_fbec88_40x100.png) 50% 50% repeat-x;
color: #363636;
}
.ui-state-highlight a,
@ -890,7 +890,7 @@ body .ui-tooltip {
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
border: 1px solid #cd0a0a;
background: #fef1ec url(images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x;
background: #fef1ec url(/static/css/custom-theme/images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x;
color: #cd0a0a;
}
.ui-state-error a,
@ -936,27 +936,27 @@ body .ui-tooltip {
}
.ui-icon,
.ui-widget-content .ui-icon {
background-image: url(images/ui-icons_469bdd_256x240.png);
background-image: url(/static/css/custom-theme/images/ui-icons_469bdd_256x240.png);
}
.ui-widget-header .ui-icon {
background-image: url(images/ui-icons_36454F_256x240.png);
background-image: url(/static/css/custom-theme/images/ui-icons_36454F_256x240.png);
}
.ui-state-default .ui-icon {
background-image: url(images/ui-icons_0088cc_256x240.png);
background-image: url(/static/css/custom-theme/images/ui-icons_0088cc_256x240.png);
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
background-image: url(images/ui-icons_217bc0_256x240.png);
background-image: url(/static/css/custom-theme/images/ui-icons_217bc0_256x240.png);
}
.ui-state-active .ui-icon {
background-image: url(images/ui-icons_36454F_256x240.png);
background-image: url(/static/css/custom-theme/images/ui-icons_36454F_256x240.png);
}
.ui-state-highlight .ui-icon {
background-image: url(images/ui-icons_2e83ff_256x240.png);
background-image: url(/static/css/custom-theme/images/ui-icons_2e83ff_256x240.png);
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
background-image: url(images/ui-icons_cd0a0a_256x240.png);
background-image: url(/static/css/custom-theme/images/ui-icons_cd0a0a_256x240.png);
}
/* positioning */
@ -1169,14 +1169,14 @@ body .ui-tooltip {
/* Overlays */
.ui-widget-overlay {
background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
background: #aaaaaa url(/static/css/custom-theme/images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
opacity: .3;
filter: Alpha(Opacity=30);
}
.ui-widget-shadow {
margin: -8px 0 0 -8px;
padding: 8px;
background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
background: #aaaaaa url(/static/css/custom-theme/images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
opacity: .3;
filter: Alpha(Opacity=30);
border-radius: 8px;

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

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

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

5
awx/ui/static/js/controllers/Groups.js
View File

@ -10,7 +10,7 @@
function InventoryGroups ($scope, $rootScope, $compile, $location, $log, $routeParams, InventoryGroupsForm,
GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, ReturnToCaller, ClearScope, Prompt,
TreeInit, GetBasePath, GroupsList, GroupsAdd, GroupsEdit, LoadInventory,
GroupsDelete, RefreshGroupName, EditInventory, SetShowGroupHelp, InventoryStatus)
GroupsDelete, RefreshGroupName, EditInventory, InventoryStatus)
{
ClearScope('htmlTemplate'); //Garbage collection. Don't leave behind any listeners/watchers from the prior
//scope.
@ -34,7 +34,6 @@ function InventoryGroups ($scope, $rootScope, $compile, $location, $log, $routeP
scope.inventoryLoadedRemove = scope.$on('inventoryLoaded', function() {
LoadBreadCrumbs({ path: '/inventories/' + id, title: scope.inventory_name });
TreeInit(scope.TreeParams);
SetShowGroupHelp({ scope: scope });
if (!scope.$$phase) {
scope.$digest();
}
@ -242,6 +241,6 @@ function InventoryGroups ($scope, $rootScope, $compile, $location, $log, $routeP
InventoryGroups.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'InventoryGroupsForm',
'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'ReturnToCaller', 'ClearScope', 'Prompt',
'TreeInit', 'GetBasePath', 'GroupsList', 'GroupsAdd', 'GroupsEdit', 'LoadInventory',
'GroupsDelete', 'RefreshGroupName', 'EditInventory', 'SetShowGroupHelp', 'InventoryStatus'
'GroupsDelete', 'RefreshGroupName', 'EditInventory', 'InventoryStatus'
];

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

@ -13,7 +13,7 @@ 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, SetShowGroupHelp)
HostsReload, LoadSearchTree, EditHostGroups)
{
ClearScope('htmlTemplate'); //Garbage collection. Don't leave behind any listeners/watchers from the prior
//scope.
@ -36,7 +36,6 @@ function InventoryHosts ($scope, $rootScope, $compile, $location, $log, $routePa
}
scope.loadBreadCrumbsRemove = scope.$on('buildAllGroups', function(e, inventory_name) {
LoadBreadCrumbs({ path: '/inventories/' + id, title: inventory_name });
SetShowGroupHelp({ scope: scope });
});
// Sets up the search tree and loads All Hosts for the inventory
@ -138,6 +137,6 @@ InventoryHosts.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$lo
'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'RelatedSearchInit',
'RelatedPaginateInit', 'ReturnToCaller', 'ClearScope', 'LookUpInit', 'Prompt',
'GetBasePath', 'HostsList', 'HostsAdd', 'HostsEdit', 'HostsDelete',
'HostsReload', 'LoadSearchTree', 'EditHostGroups', 'SetShowGroupHelp'
'HostsReload', 'LoadSearchTree', 'EditHostGroups'
];

29
awx/ui/static/js/help/InventorySummary.js Normal file
View File

@ -0,0 +1,29 @@
/*********************************************
* Copyright (c) 2013 AnsibleWorks, Inc.
*
* InventorySummary.js
* Help object for Inventory-> Groups page.
*
* @dict
*/
angular.module('InventorySummaryHelpDefinition', [])
.value(
'InventorySummaryHelp', {
story: {
hdr: 'Getting Started',
steps: {
step1: {
intro: 'Start by creating a group:',
img: 'help002.png',
box: "Click the <em>Create New</em> button and add a new group to the inventory.",
height: 400
},
step2: {
intro: 'After creating a group, add hosts:',
img: 'help001.png',
box: "Navigate to <em>Hosts</em> using the drop-down menu, where you can add hosts to the new group",
height: 480
}
}
}
});

58
awx/ui/static/js/helpers/Groups.js
View File

@ -9,7 +9,8 @@
angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'GroupListDefinition',
'SearchHelper', 'PaginateHelper', 'ListGenerator', 'AuthService', 'GroupsHelper',
'InventoryHelper', 'SelectionHelper', 'JobSubmissionHelper', 'RefreshHelper'
'InventoryHelper', 'SelectionHelper', 'JobSubmissionHelper', 'RefreshHelper',
'PromptDialog', 'InventorySummaryHelpDefinition'
])
.factory('GetSourceTypeOptions', [ function() {
@ -169,9 +170,10 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
.factory('InventoryStatus', [ '$rootScope', '$routeParams', 'Rest', 'Alert', 'ProcessErrors', 'GetBasePath', 'FormatDate', 'InventorySummary',
'GenerateList', 'ClearScope', 'SearchInit', 'PaginateInit', 'Refresh', 'InventoryUpdate', 'GroupsEdit', 'ShowUpdateStatus',
'GenerateList', 'ClearScope', 'SearchInit', 'PaginateInit', 'Refresh', 'InventoryUpdate', 'GroupsEdit', 'ShowUpdateStatus', 'HelpDialog',
'ShowGroupHelp', 'InventorySummaryHelp',
function($rootScope, $routeParams, Rest, Alert, ProcessErrors, GetBasePath, FormatDate, InventorySummary, GenerateList, ClearScope, SearchInit,
PaginateInit, Refresh, InventoryUpdate, GroupsEdit, ShowUpdateStatus) {
PaginateInit, Refresh, InventoryUpdate, GroupsEdit, ShowUpdateStatus, HelpDialog, ShowGroupHelp, InventorySummaryHelp) {
return function(params) {
//Build a summary of a given inventory
@ -267,6 +269,17 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
}
scope.search(list.iterator);
if (scope.removeShowHelp) {
scope.removeShowHelp();
}
scope.removeShowHelp = scope.$on('ShowHelp', function() {
HelpDialog({ defn: InventorySummaryHelp });
});
scope.showHelp = function() {
scope.$emit('ShowHelp');
}
scope.viewUpdateStatus = function(id) {
var found = false;
@ -365,20 +378,29 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
break;
}
}
if (found && group.related.current_update) {
Rest.setUrl(group.related.current_update);
Rest.get()
.success( function(data, status, headers, config) {
scope.$emit('Check_Cancel', data);
})
.error( function(data, status, headers, config) {
ProcessErrors(scope, data, status, null,
{ hdr: 'Error!', msg: 'Call to ' + group.related.current_update + ' failed. GET status: ' + status });
});
if (group.summary_fields.inventory_source.source !== '' &&
group.summary_fields.inventory_source.source !== null) {
// the group has a source
if (group.related.current_update) {
// there is an update currently running
Rest.setUrl(group.related.current_update);
Rest.get()
.success( function(data, status, headers, config) {
scope.$emit('Check_Cancel', data);
})
.error( function(data, status, headers, config) {
ProcessErrors(scope, data, status, null,
{ hdr: 'Error!', msg: 'Call to ' + group.related.current_update + ' failed. GET status: ' + status });
});
}
else {
Alert('Update Not Found', 'An Inventory update does not appear to be running for group: ' + name + '. Click the <em>Refresh</em> ' +
'button to view the latet status.', 'alert-info');
}
}
else {
Alert('Update Not Found', 'An Inventory update does not appear to be running for group: ' + name + '. Click the <em>Refresh</em> ' +
'button to view the latet status.', 'alert-info');
Alert('Missing Configuration', 'The selected group is not configured for updates. You must first edit the group and provide external Source settings ' +
'before attempting an update.', 'alert-info');
}
}
@ -394,8 +416,8 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
for (var i=0; i < scope.groups.length; i++) {
if (scope.groups[i].id == id) {
if (scope.groups[i].summary_fields.inventory_source.source == "" || scope.groups[i].summary_fields.inventory_source.source == null) {
Alert('Missing Configuration', 'The selected group is not configured for updates. You must first edit the group, provide Source settings, ' +
'and then run an update.', 'alert-info');
Alert('Missing Configuration', 'The selected group is not configured for updates. You must first edit the group and provide ' +
'external Source settings before attempting an update.', 'alert-info');
}
else if (scope.groups[i].summary_fields.inventory_source.status == 'updating') {
Alert('Update in Progress', 'The inventory update process is currently running for group <em>' +
@ -433,6 +455,8 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
}
}
}
ShowGroupHelp({ scope: scope });
}
}])

13
awx/ui/static/js/helpers/inventory.js
View File

@ -560,25 +560,20 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
}
}])
.factory('SetShowGroupHelp', ['Rest', 'ProcessErrors', 'GetBasePath', function(Rest, ProcessErrors, GetBasePath) {
.factory('ShowGroupHelp', ['Rest', 'ProcessErrors', 'GetBasePath', function(Rest, ProcessErrors, GetBasePath) {
return function(params) {
// Check if inventory has groups. If not, turn on hints to let user know groups are required
// before hosts can be added
var scope = params.scope;
var url = GetBasePath('inventory') + scope.inventory_id + '/groups/';
var url = GetBasePath('inventory') + scope.inventory_id + '/groups/?page=1';
Rest.setUrl(url);
Rest.get()
.success( function(data, status, headers, config) {
if (data.results.length > 0) {
scope.showGroupHelp = false;
}
else {
scope.showGroupHelp = true;
}
scope.$emit('ShowHelp');
})
.error( function(data, status, headers, config) {
ProcessErrors(scope, data, status, form,
{ hdr: 'Error!', msg: 'Failed to retrieve inventory groups. GET returned status: ' + status });
{ hdr: 'Error!', msg: 'Failed to retrieve inventory group count. ' + url + ' GET status: ' + status });
});
}
}])

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

@ -109,22 +109,13 @@ angular.module('InventorySummaryDefinition', [])
dataPlacement: 'top'
},
help: {
awPopOver:
"<dl>\n" +
"<dt>failed</dt><dd>Errors were encountered with the most recent inventory update.</dd>\n" +
"<dt>n/a</dt><dd>The group is not configured for inventory update.</dd>\n" +
"<dt>never</dt><dd>The inventory update has never run for the group.</dd>\n" +
"<dt>successful</dt><dd>The most recent inventory update ran to completion without incident.</dd>\n" +
"<dt>updating</dt><dd>The inventory update is currently running.</dd>\n" +
"</dl>\n",
dataPlacement: 'top',
dataContainer: 'body',
icon: "icon-question-sign",
mode: 'all',
'class': 'btn-xs btn-info btn-help',
awToolTip: 'Click for help',
dataTitle: 'Update Status',
iconSize: 'large'
iconSize: 'large',
ngClick: "showHelp()"
},
refresh: {
awRefresh: true,

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

@ -109,7 +109,7 @@ angular.module('JobHostDefinition', [])
"<dt>Unreachable</dt><dd>Times the ansible server could not reach the host.</dd>\n" +
"<dt>Skipped</dt><dd>Tasks bypassed and not performed on the host due to prior task failure or the host being unreachable.</dd>\n" +
"</dl>\n",
dataPlacement: 'top',
dataPlacement: 'left',
dataContainer: "body",
icon: "icon-question-sign",
mode: 'all',

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

@ -60,7 +60,7 @@ angular.module('ProjectsListDefinition', [])
"<dt>Missing</dt><dd>The local project directory is missing.</dd>\n" +
"<dt>N/A</dt><dd>The project does not use SCM, so an update status is not available.</dd>\n" +
"</dl>\n",
dataPlacement: 'top',
dataPlacement: 'left',
dataContainer: 'body',
icon: "icon-question-sign",
mode: 'all',

20
awx/ui/static/js/widgets/ObjectCount.js
View File

@ -31,26 +31,6 @@ angular.module('ObjectCountWidget', ['RestServices', 'Utilities'])
cnt++;
}
if (cnt == expected) {
// sort the list of objs
//for (var key in counts) {
// if (key !== 'hosts' && key !== 'groups') {
// keys.push(key);
// }
//}
// sort the keys, forcing groups and hosts to appear directlry after inventory
//keys.sort();
//var new_keys = [];
//for (var i=0; i < keys.length; i++) {
// if (keys[i] == 'inventory') {
// new_keys.push('inventory');
// new_keys.push('groups');
// new_keys.push('hosts');
// }
// else {
// new_keys.push(keys[i]);
// }
//}
//keys = new_keys;
html = "<div class=\"panel panel-default\">\n";
html += "<div class=\"panel-heading\">System Summary</div>\n";
html += "<div class=\"panel-body\">\n";

59
awx/ui/static/less/ansible-ui.less
View File

@ -7,15 +7,18 @@
*
*/
@black: #171717;
@warning: #FF9900;
@red: #da4f49;
@red-hover: #AE3F3A;
@green: #5bb75b;
@blue: #1778c3; /* logo blue */
@blue-link: #0088cc;
@grey: #A9A9A9;
@green: #5bb75b;
@black: #171717;
@warning: #FF9900;
@red: #da4f49;
@red-hover: #AE3F3A;
@green: #5bb75b;
@blue: #1778c3; /* logo blue */
@blue-link: #0088cc;
@grey: #A9A9A9;
@green: #5bb75b;
@info: #d9edf7; /* alert info background color */
@info-border: #bce8f1; /* alert info border color */
@info-color: #3a87ad;
html {
background-color: @black;
@ -1204,6 +1207,44 @@ tr td button i {
margin-bottom: 5px;
}
/* help dialog */
#help-modal {
overflow: hidden;
padding: 10px;
text-align: center;
}
.help-box {
text-align: center;
border: 1px solid @info-border;
border-radius: 6px;
margin-top: 0;
margin-bottom: 10px;
padding: 10px;
background-color: @info;
color: @info-color;
}
.help-intro {
width: 100;
text-align: left;
margin: 15px 0 30px 0;
font-weight: normal;
font-size: 16px;
color: #888;
}
.step-no {
font-weight: bold;
}
.ui-dialog-titlebar.ui-widget-header {
color: #0088cc;
background-color: #F0F0F0;
background-image: none;
}
/* Large desktop */

79
awx/ui/static/lib/ansible/Utilities.js
View File

@ -5,7 +5,7 @@
* Utility functions
*
*/
angular.module('Utilities',['RestServices'])
angular.module('Utilities',['RestServices', 'Utilities'])
.factory('ClearScope', function() {
return function(id) {
@ -219,6 +219,83 @@ angular.module('Utilities',['RestServices'])
}
}
}])
.factory('HelpDialog', ['$rootScope', '$location', function($rootScope, $location) {
return function(params) {
// Display a help dialog
//
// HelpDialog({ defn: <HelpDefinition> })
//
function showHelp(params) {
// Using a function inside a function so we can recurse
// over the steps in the help story
var defn = params.defn;
var nxtStory = { story: { steps: { } } };
var width, height;
function buildHtml(step) {
var html = '';
html += (step.intro) ? "<div class=\"help-intro\">" + step.intro + "</div>" : "";
html += (step.img) ? "<img src=\"" + $basePath + "img/help/" + step.img + "\" style=\"max-width:" + (width - 30) + "px\" >" : "";
html += (step.box) ? "<div class=\"help-box\">" + step.box + "</div>" : "";
return html;
}
var nxt;
for (var step in defn.story.steps) {
nxt = step;
break;
}
width = (defn.story.steps[nxt].width !== undefined) ? defn.story.steps[nxt].width : 500;
height = (defn.story.steps[nxt].height !== undefined) ? defn.story.steps[nxt].height : 600;
if (Object.keys(defn.story.steps).length > 1) {
// We have multiple steps
for (var step in defn.story.steps) {
if (step !== nxt) {
nxtStory.story.steps[step] = defn.story.steps[step];
}
}
nxtStory.story.hdr = defn.story.hdr;
nxtStep = function() {
showHelp({ defn: nxtStory });
}
$('#help-modal').html(buildHtml(defn.story.steps[nxt])).dialog({
position: { my: "center top", at: "center top+150", of: 'body' },
title: defn.story.hdr,
width: width,
height: height,
buttons: [{ text: "Next", click: nxtStep }],
closeOnEscape: true,
close: function() { $('#help-modal').empty(); }
});
$('.ui-dialog-buttonset button').addClass('btn btn-primary').focus();
$('.ui-dialog-titlebar-close').empty().removeClass('close').removeClass('ui-dialog-titlebar-close').addClass('close').append('x');
}
else {
$('#help-modal').html(buildHtml(defn.story.steps[nxt])).dialog({
position: { my: "center top", at: "center top+150", of: 'body' },
title: defn.story.hdr,
width: width,
height: height,
buttons: [ { text: "OK", click: function() { $( this ).dialog( "close" ); } } ],
closeOnEscape: true,
close: function() { $('#help-modal').empty(); }
});
$('.ui-dialog-buttonset button').addClass('btn btn-primary').focus();
$('.ui-dialog-titlebar button').empty().removeClass('close').removeClass('ui-dialog-titlebar-close').addClass('close').append('x');
}
}
showHelp(params);
}
}])
.factory('ReturnToCaller', ['$location', function($location) {
return function(idx) {

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

@ -105,11 +105,13 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
label.addClass('prepend-asterisk');
}
});
// Remove leftover timer, if any
//if ((!options.modal) && this.scope.timer) {
// clearInterval(this.scope.timer);
//}
try {
$('#help-modal').empty().dialog('destroy');
}
catch(e) {
//ignore any errors should the dialog not be initialized
}
if (options.modal) {
this.scope.formModalActionDisabled = false;
@ -1198,12 +1200,12 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
html += this.breadCrumbs(options, navigation);
// build the groups page
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. After creating a group, " +
"use the <a href=\"/#/inventories/\{\{ inventory_id \}\}/hosts\"><em>Inventories->Hosts</em></a> page to " +
"add hosts to the group.</p>";
html += "</div>\n";
//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. After creating a group " +
// "go to the <a href=\"/#/inventories/\{\{ inventory_id \}\}/hosts\"><em>Hosts</em></a> page to " +
// "add hosts to the group.</p>";
//html += "</div>\n";
/*
html += "<div class=\"row\">\n";

7
awx/ui/static/lib/ansible/list-generator.js
View File

@ -72,6 +72,13 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
// remove lingering popover <div>. Seems to be a bug in TB3 RC1
$(this).remove();
});
try {
$('#help-modal').empty().dialog('destroy');
}
catch(e) {
//ignore any errors should the dialog not be initialized
}
if (options.mode == 'lookup') {
// options should include {hdr: <dialog header>, action: <function...> }

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

@ -14,7 +14,9 @@
{% endif %}
<link rel="shortcut icon" href="{{ STATIC_URL }}img/favicon.ico" />
<script>
var $basePath = "{{ STATIC_URL }}";
</script>
<script src="{{ STATIC_URL }}lib/jquery/jquery-1.10.2.min.js"></script>
<script src="{{ STATIC_URL }}js/config.js"></script>
<script src="{{ STATIC_URL }}lib/angular/angular.js"></script>
@ -112,6 +114,7 @@
<script src="{{ STATIC_URL }}js/widgets/InventorySyncStatus.js"></script>
<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 }}lib/less/less-1.4.1.min.js"></script>
{% endif %}
@ -336,7 +339,10 @@
</div><!-- modal-content -->
</div><!-- modal-dialog -->
</div><!-- modal -->
<!-- Help dialog -->
<div id="help-modal"></div>
</div><!-- container -->
<div class="overlay"></div>