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

AC-976, AC-1000, AC-602

Browse Source
This commit is contained in:
Chris Houseknecht 2014-01-30 15:23:32 -05:00
parent bc6ec06d8f
commit c81fa0d285
20 changed files with 170 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.2 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

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

@ -76,7 +76,7 @@ angular.module('ansible', [
'StreamWidget',
'JobsHelper',
'InventoryStatusDefinition',
'InventorySummaryHelpDefinition',
'InventoryGroupsHelpDefinition',
'InventoryHostsHelpDefinition',
'InventoryTree',
'CredentialsHelper',

35
awx/ui/static/js/controllers/Inventories.js
View File

@ -316,7 +316,8 @@ function InventoriesEdit ($scope, $location, $routeParams, $compile, GenerateLis
GetSyncStatusMsg, InjectHosts, HostsReload, GroupsAdd, GroupsEdit, GroupsDelete, Breadcrumbs, LoadBreadCrumbs, Empty,
Rest, ProcessErrors, InventoryUpdate, Alert, ToggleChildren, ViewUpdateStatus, GroupsCancelUpdate, Find,
HostsCreate, EditInventoryProperties, HostsEdit, HostsDelete, ToggleHostEnabled, CopyMoveGroup, CopyMoveHost,
Stream, GetBasePath, ShowJobSummary, ApplyEllipsis, WatchInventoryWindowResize)
Stream, GetBasePath, ShowJobSummary, ApplyEllipsis, WatchInventoryWindowResize, HelpDialog, InventoryGroupsHelp,
Store)
{
ClearScope('htmlTemplate'); //Garbage collection. Don't leave behind any listeners/watchers from the prior
//scope.
@ -362,8 +363,25 @@ function InventoriesEdit ($scope, $location, $routeParams, $compile, GenerateLis
InjectHosts({ scope: $scope, inventory_id: $scope.inventory_id, tree_id: $scope.selected_tree_id, group_id: $scope.selected_group_id });
// As the window shrinks and expands, apply ellipsis
setTimeout(function() { ApplyEllipsis('#groups_table .group-name a'); }, 2500); //give the window time to display
setTimeout(function() {
// Hack to keep group name from slipping to a new line
$('#groups_table .name-column').each( function() {
var td_width = $(this).width();
var level_width = $(this).find('.level').width();
var level_padding = parseInt($(this).find('.level').css('padding-left').replace(/px/,''));
var level = level_width + level_padding;
var pct = ( 100 - Math.ceil((level / td_width)*100) ) + '%';
$(this).find('.group-name').css({ width: pct });
});
ApplyEllipsis('#groups_table .group-name a');
ApplyEllipsis('#hosts_table .host-name a');
}, 2500); //give the window time to display
WatchInventoryWindowResize();
var inventoryAutoHelp = Store('inventoryAutoHelp');
if (inventoryAutoHelp !== 'off' && $scope.autoShowGroupHelp) {
$scope.showGroupHelp({ autoShow: true });
}
});
@ -545,17 +563,24 @@ function InventoriesEdit ($scope, $location, $routeParams, $compile, GenerateLis
ShowJobSummary({ job_id: job_id });
}
$scope.showGroupHelp = function(params) {
var opts = { defn: InventoryGroupsHelp };
if (params) {
opts.autoShow = params.autoShow || false;
}
HelpDialog(opts);
}
//Load tree data for the first time
BuildTree({ scope: $scope, inventory_id: $scope.inventory_id, refresh: false });
}
}
InventoriesEdit.$inject = [ '$scope', '$location', '$routeParams', '$compile', 'GenerateList', 'ClearScope', 'InventoryGroups', 'InventoryHosts',
'BuildTree', 'Wait', 'GetSyncStatusMsg', 'InjectHosts', 'HostsReload', 'GroupsAdd', 'GroupsEdit', 'GroupsDelete',
'Breadcrumbs', 'LoadBreadCrumbs', 'Empty', 'Rest', 'ProcessErrors', 'InventoryUpdate', 'Alert', 'ToggleChildren',
'ViewUpdateStatus', 'GroupsCancelUpdate', 'Find', 'HostsCreate', 'EditInventoryProperties', 'HostsEdit',
'HostsDelete', 'ToggleHostEnabled', 'CopyMoveGroup', 'CopyMoveHost', 'Stream', 'GetBasePath', 'ShowJobSummary',
'ApplyEllipsis', 'WatchInventoryWindowResize'
'ApplyEllipsis', 'WatchInventoryWindowResize', 'HelpDialog', 'InventoryGroupsHelp', 'Store'
];

52
awx/ui/static/js/help/InventoryGroups.js Normal file
View File

@ -0,0 +1,52 @@
/*********************************************
* Copyright (c) 2014 AnsibleWorks, Inc.
*
* InventoryGroups.js
*
* Help object for inventory groups/hosts page.
*
* @dict
*/
angular.module('InventoryGroupsHelpDefinition', [])
.value(
'InventoryGroupsHelp', {
story: {
hdr: 'Building your inventory',
steps: {
step1: {
intro: 'Start by creating a group:',
img: { src: 'groups001.png', maxWidth: 338 , maxHeight: 222 },
box: "Click the <i class=\"fa fa-plus\"></i> button to add a new group to the inventory.",
autoOffNotice: true,
height: 500
},
step2: {
img: { src: 'groups002.png', maxWidth: 443, maxHeight: 251 },
box: "Provide a name, description and any variables.",
height: 460
},
step3: {
img: { src: 'groups003.png', maxWidth: 412, maxHeight: 215 },
box: "If this a cloud inventory, choose a Source.",
height: 460
},
step4: {
img: { src: 'groups004.png', maxWidth: 261, maxHeight: 221 },
box: "For a cloud inventory, start the sync process by clicking <i class=\"fa fa-exchange\"></i>.",
height: 460
},
step5: {
intro: "Create subgroups by first clicking a group name to select it.",
img: { src: 'groups005.png', maxWidth: 430, maxHeight: 206 },
box: "With a group selected, click the <i class=\"fa fa-plus\"></i> to create the new subgroup.",
height: 500
},
step6: {
intro: ' ',
img: { src: 'groups006.png', maxWidth: 263, maxHeight: 211 },
box: "Copy or move a group by dragging and dropping the group name.",
height: 460
}
}
}
});

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

@ -1,29 +0,0 @@
/*********************************************
* Copyright (c) 2014 AnsibleWorks, Inc.
*
* InventorySummary.js
* Help object for Inventory-> Groups page.
*
* @dict
*/
angular.module('InventorySummaryHelpDefinition', [])
.value(
'InventorySummaryHelp', {
story: {
hdr: 'Building Your Inventory',
steps: {
step1: {
intro: 'Start by creating a group:',
img: { src: 'help002.png', maxWidth: 460 , maxHeight: 111 },
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: { src: 'help001.png', maxWidth: 467, maxHeight: 208 },
box: "Navigate to <em>Hosts</em> using the drop-down menu, where you can add hosts to the new group",
height: 480
}
}
}
});

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

@ -12,8 +12,7 @@
angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'GroupListDefinition',
'SearchHelper', 'PaginationHelpers', 'ListGenerator', 'AuthService', 'GroupsHelper',
'InventoryHelper', 'SelectionHelper', 'JobSubmissionHelper', 'RefreshHelper',
'PromptDialog', 'InventorySummaryHelpDefinition', 'CredentialsListDefinition',
'InventoryTree'
'PromptDialog', 'CredentialsListDefinition','InventoryTree'
])
.factory('GetSourceTypeOptions', [ 'Rest', 'ProcessErrors', 'GetBasePath', function(Rest, ProcessErrors, GetBasePath) {
@ -391,7 +390,6 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
scope.searchCleanup();
}
scope.formModalActionDisabled = false;
scope.showGroupHelp = false; //get rid of the Hint
BuildTree({ scope: parent_scope, inventory_id: inventory_id, refresh: true, new_group_id: group_id });
WatchInventoryWindowResize();
}
@ -848,7 +846,6 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
}
scope.formModalActionDisabled = false;
scope.showGroupHelp = false; //get rid of the Hint
$('#form-modal').modal('hide');
@ -892,7 +889,7 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
}
data['source_regions'] = r.join();
if (scope['source'].value == 'ec2') {
if (scope['source'] && scope['source'].value == 'ec2') {
// for ec2, validate variable data
try {
if (scope.envParseType == 'json') {

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

@ -91,7 +91,7 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
html += "<tr>\n";
html += "<td><a ng-click=\"showJobSummary(" + job.id + ")\">" + job.id + "</a></td>\n";
html += "<td class=\"text-center\"><a ng-click=\"showJobSummary(" + job.id + ")\"><i class=\"fa icon-job-" + job.status + "\"></i></a></td>\n";
html += "<td>" + job.name + "</td>\n";
html += "<td class=\"break\">" + "language_features/roletest.yml(limit:all:cloud)therealsuperlonglaskaname</td>\n";
html += "</tr>\n";
}
html += "</tbody>\n";

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

@ -19,6 +19,15 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
$(window).resize(function() {
clearTimeout(timeOut);
timeOut = setTimeout(function() {
// Hack to stop group-name div slipping to a new line
$('#groups_table .name-column').each( function() {
var td_width = $(this).width();
var level_width = $(this).find('.level').width();
var level_padding = parseInt($(this).find('.level').css('padding-left').replace(/px/,''));
var level = level_width + level_padding;
var pct = ( 100 - Math.ceil((level / td_width)*100) ) + '%';
$(this).find('.group-name').css({ width: pct });
});
ApplyEllipsis('#groups_table .group-name a');
ApplyEllipsis('#hosts_table .host-name a');
}, 100);

15
awx/ui/static/js/lists/InventoryGroups.js
View File

@ -1,9 +1,7 @@
/*********************************************
* Copyright (c) 2014 AnsibleWorks, Inc.
*
* InventorySummary.js
*
* Summary of groups contained within an inventory
* InventoryGroups.js
*
*/
angular.module('InventoryGroupsDefinition', [])
@ -25,7 +23,7 @@ angular.module('InventoryGroupsDefinition', [])
name: {
label: 'Groups',
key: true,
ngClick: "\{\{ 'showHosts(' + group.id + ',' + group.group_id + ', false)' \}\}",
ngClick: "showHosts(group.id,group.group_id, false)",
ngClass: "group.selected_class",
hasChildren: true,
columnClass: 'col-lg-9 col-md-9 col-sm-7 col-xs-7',
@ -66,11 +64,8 @@ angular.module('InventoryGroupsDefinition', [])
},
help: {
mode: 'all',
awToolTip:
//"<div style=\"text-align:left;\"><img src=\"/static/img/cow.png\" style=\"width:50px; height:56px; float:left; padding-right:5px;\">" +
//"<p>Need help getting started creating your inventory?</p><p>Click here for help.</p></div>",
"<div style=\"text-align:left;\"><p>Need help getting started creating your inventory?</p><p>Click here for help.</p></div>",
ngClick: "showHelp()",
awToolTip: "Get help building your inventory",
ngClick: "showGroupHelp()",
id: "inventory-summary-help"
}
},
@ -128,4 +123,4 @@ angular.module('InventoryGroupsDefinition', [])
}
}
});

12
awx/ui/static/js/lists/InventoryHosts.js
View File

@ -57,7 +57,6 @@ angular.module('InventoryHostsDefinition', [])
fieldActions: {
enabled_flag: {
//label: 'Enabled',
iconClass: "{{ 'fa icon-enabled-' + host.enabled }}",
dataPlacement: 'top',
awToolTip: "{{ host.enabledToolTip }}",
@ -65,8 +64,6 @@ angular.module('InventoryHostsDefinition', [])
ngClick: "toggleHostEnabled(host.id, host.has_inventory_sources)"
},
active_failures: {
//label: 'Job Status',
//ngHref: "\{\{'/#/hosts/' + host.id + '/job_host_summaries/?inventory=' + inventory_id \}\}",
awPopOver: "{{ host.job_status_html }}",
dataTitle: "{{ host.job_status_title }}",
awToolTip: "{{ host.badgeToolTip }}",
@ -105,15 +102,6 @@ angular.module('InventoryHostsDefinition', [])
awToolTip: "View Activity Stream",
mode: 'all',
ngShow: "user_is_superuser"
},
help: {
mode: 'all',
awToolTip:
//"<div style=\"text-align:left;\"><img src=\"/static/img/cow.png\" style=\"width:50px; height:56px; float:left; padding-right:5px;\">" +
//"<p>Need help getting started creating your inventory?</p><p>Click here for help.</p></div>",
"<div style=\"text-align:left;\"><p>Need help getting started creating your inventory?</p><p>Click here for help.</p></div>",
ngClick: "showHelp()",
id: "inventory-summary-help"
}
}

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

@ -71,7 +71,7 @@ body.modal-open {
.group-name {
display: inline-block;
width: 90%;
width: 85%;
}
a {
@ -223,6 +223,14 @@ hr {
display: inline-block;
}
.help-auto-off {
margin-top: 15px;
margin-bottom: 15px;
label {
font-weight: normal;
}
}
/* help collapse */
h4.panel-title {
font-size: 14px;
@ -315,7 +323,7 @@ dd {
}
.break {
word-wrap: break-word;
word-break: break-all;
}
.login-alert {
@ -1059,16 +1067,17 @@ input[type="checkbox"].checkbox-no-label {
cursor: default;
}
/* Padding levels used on job events and inventory groups */
.level-1 { padding-left: 20px; }
.level-2 { padding-left: 40px; }
.level-3 { padding-left: 60px; }
.level-4 { padding-left: 80px; }
.level-5 { padding-left: 100px; }
.level-6 { padding-left: 120px; }
.level-7 { padding-left: 140px; }
.level-8 { padding-left: 160px; }
.level-9 { padding-left: 180px; }
.level-10 { padding-left: 200px; }
.level { display: inline-block; }
.level-1 { padding-left: 15px; }
.level-2 { padding-left: 30px; }
.level-3 { padding-left: 45px; }
.level-4 { padding-left: 60px; }
.level-5 { padding-left: 75px; }
.level-6 { padding-left: 90px; }
.level-7 { padding-left: 105px; }
.level-8 { padding-left: 120px; }
.level-9 { padding-left: 135px; }
.level-10 { padding-left: 150px; }
.level-3-detail {
padding-left: 80px;
@ -1344,7 +1353,7 @@ tr td button i {
text-align: center;
border: 1px solid @info-border;
border-radius: 6px;
margin-top: 0;
margin-top: 10px;
margin-bottom: 10px;
padding: 10px;
background-color: @info;
@ -1440,6 +1449,20 @@ tr td button i {
}
@media (min-width: 768px) and (max-width: 1199px) {
.level-1,
.level-2,
.level-3,
.level-4,
.level-5,
.level-6,
.level-7,
.level-8,
.level-9,
.level-10,
.level-3-detail {
padding-left: 0;
}
.list-actions button, .list-actions .checkbox-inline {
margin-top: 10px;
@ -1465,6 +1488,13 @@ tr td button i {
.level-1,
.level-2,
.level-3,
.level-4,
.level-5,
.level-6,
.level-7,
.level-8,
.level-9,
.level-10,
.level-3-detail {
padding-left: 0;
}

1
awx/ui/static/lib/ansible/InventoryTree.js
View File

@ -136,6 +136,7 @@ angular.module('InventoryTree', ['Utilities', 'RestServices', 'GroupsHelper', 'P
.success( function(data, status, headers, config) {
buildAllHosts(data);
buildGroups(data, 0, 0);
scope.autoShowGroupHelp = (data.length == 0) ? true : false;
if (refresh) {
scope.groups = groups;
scope.$emit('GroupTreeRefreshed', inventory_name, groups, emit);

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

@ -243,7 +243,7 @@ angular.module('Utilities',['RestServices', 'Utilities'])
}
}])
.factory('HelpDialog', ['$rootScope', '$location', function($rootScope, $location) {
.factory('HelpDialog', ['$rootScope', '$location', 'Store', function($rootScope, $location, Store) {
return function(params) {
// Display a help dialog
//
@ -257,6 +257,7 @@ angular.module('Utilities',['RestServices', 'Utilities'])
var defn = params.defn;
var nxtStory = { story: { steps: { } } };
var width, height;
var autoShow = params.autoShow || false;
function buildHtml(step) {
var html = '';
@ -270,6 +271,8 @@ angular.module('Utilities',['RestServices', 'Utilities'])
html += ">";
}
html += (step.box) ? "<div class=\"help-box\">" + step.box + "</div>" : "";
html += (autoShow && step.autoOffNotice) ? "<div class=\"help-auto-off\"><label><input type=\"checkbox\" name=\"auto-off-checkbox\" " +
"id=\"auto-off-checkbox\"> Do not show this message in the future</label></div>\n" : "";
return html;
}
@ -291,7 +294,7 @@ angular.module('Utilities',['RestServices', 'Utilities'])
}
nxtStory.story.hdr = defn.story.hdr;
nxtStep = function() {
var nxtStep = function() {
showHelp({ defn: nxtStory });
}
@ -312,8 +315,9 @@ angular.module('Utilities',['RestServices', 'Utilities'])
hide: 500,
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');
$('.ui-dialog-buttonset button').attr({ 'class': 'btn btn-primary' });
$('.ui-dialog[aria-describedby="help-modal"]').find('.ui-dialog-titlebar button')
.empty().attr({ 'class': 'close' }).text('x');
}
else {
try {
@ -333,9 +337,19 @@ angular.module('Utilities',['RestServices', 'Utilities'])
hide: 500,
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');
$('.ui-dialog-buttonset button').attr({ 'class': 'btn btn-primary' });
$('.ui-dialog[aria-describedby="help-modal"]').find('.ui-dialog-titlebar button')
.empty().attr({ 'class': 'close' }).text('x');
}
$('#auto-off-checkbox').click(function() {
if ($('input[name="auto-off-checkbox"]:checked').length) {
Store('inventoryAutoHelp','off');
}
else {
Store('inventoryAutoHelp','on');
}
});
}
showHelp(params);

10
awx/ui/static/lib/ansible/generator-helpers.js
View File

@ -471,8 +471,8 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers'])
// Add collapse/expand icon --used on job_events page
if (list['hasChildren'] && field.hasChildren) {
html += "<span class=\"level-\{\{ " + list.iterator + ".event_level \}\}\"><a href=\"\" ng-click=\"\{\{ " + list.iterator + ".ngclick \}\}\"> " +
"<i class=\"\{\{ " + list.iterator + ".ngicon \}\}\"></i></a> ";
html += "<div class=\"level level-\{\{ " + list.iterator + ".event_level \}\}\"><a href=\"\" ng-click=\"\{\{ " + list.iterator + ".ngclick \}\}\"> " +
"<i class=\"\{\{ " + list.iterator + ".ngicon \}\}\"></i></a></div>";
//ng-show=\"'\{\{ " + list.iterator + ".related.children \}\}' !== ''\"
}
@ -548,9 +548,9 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers'])
html += field.text;
}
if (list['hasChildren'] && field.hasChildren) {
html += "</span>";
}
//if (list['hasChildren'] && field.hasChildren) {
// html += "</span>";
//}
// close the link
if ( (field.key || field.link || field.linkTo || field.ngClick || field.ngHref )

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

@ -122,7 +122,7 @@
<script src="{{ STATIC_URL }}js/widgets/SCMSyncStatus.js"></script>
<script src="{{ STATIC_URL }}js/widgets/ObjectCount.js"></script>
<script src="{{ STATIC_URL }}js/widgets/Stream.js"></script>
<script src="{{ STATIC_URL }}js/help/InventorySummary.js"></script>
<script src="{{ STATIC_URL }}js/help/InventoryGroups.js"></script>
<script src="{{ STATIC_URL }}js/help/InventoryHosts.js"></script>
<script src="{{ STATIC_URL }}lib/less/less-1.4.1.min.js"></script>