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

AC-503 latest UI work on cloud inventory

Browse Source
This commit is contained in:
chouseknecht 2013-10-02 17:26:47 -04:00
parent bb484a7520
commit c7f096f16b
11 changed files with 286 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
awx/ui/static/css/bootstrap.css vendored
View File

@ -11,7 +11,7 @@
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
article,
aside,
aside,.table
details,
figcaption,
figure,

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

@ -163,7 +163,8 @@ function InventoryGroups ($scope, $rootScope, $compile, $location, $log, $routeP
scope.groupDeleteHide = true;
scope.createButtonShow = false;
scope.group_id = null;
InventoryStatus();
scope.inventory_name = node.attr('name');
InventoryStatus({ scope: scope });
$('#tree-form').show();
}

1
awx/ui/static/js/controllers/Home.js
View File

@ -27,7 +27,6 @@ function Home ($routeParams, $scope, $rootScope, $location, Wait, ObjectCount, C
$rootScope.$on('WidgetLoaded', function() {
// Once all the widget report back 'loaded', turn off Wait widget
console.log('got here!');
loadedCount++;
if ( loadedCount == waitCount ) {
Wait('stop');

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

@ -9,7 +9,7 @@
angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'GroupListDefinition',
'SearchHelper', 'PaginateHelper', 'ListGenerator', 'AuthService', 'GroupsHelper',
'InventoryHelper', 'SelectionHelper'
'InventoryHelper', 'SelectionHelper', 'JobSubmissionHelper'
])
.factory('getSourceTypeOptions', [ function() {
@ -233,9 +233,9 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
}])
.factory('GroupsEdit', ['$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'GroupForm', 'GenerateForm',
'Prompt', 'ProcessErrors', 'GetBasePath', 'RefreshGroupName', 'ParseTypeChange', 'getSourceTypeOptions',
'Prompt', 'ProcessErrors', 'GetBasePath', 'RefreshGroupName', 'ParseTypeChange', 'getSourceTypeOptions', 'InventoryUpdate',
function($rootScope, $location, $log, $routeParams, Rest, Alert, GroupForm, GenerateForm, Prompt, ProcessErrors,
GetBasePath, RefreshGroupName, ParseTypeChange, getSourceTypeOptions) {
GetBasePath, RefreshGroupName, ParseTypeChange, getSourceTypeOptions, InventoryUpdate) {
return function(params) {
var group_id = params.group_id;
@ -348,7 +348,8 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
scope[fld] = data[fld];
master[fld] = scope[fld];
}
}
}
scope['group_update_url'] = data.related['update'];
})
.error( function(data, status, headers, config) {
scope.source = null;
@ -564,6 +565,21 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
scope[form.name + '_form'][associated].$setValidity('awpassmatch', true);
scope[form.name + '_form'].$setDirty();
}
// Start the update process
scope.updateGroup = function() {
if (scope['source'] == null || scope['source'] == '') {
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');
}
else {
InventoryUpdate({
scope: scope,
group_id: group_id,
url: scope['group_update_url']
});
}
}
// Cancel
scope.formReset = function() {

86
awx/ui/static/js/helpers/JobSubmission.js
View File

@ -5,7 +5,7 @@
*
*/
angular.module('JobSubmissionHelper', [ 'RestServices', 'Utilities', 'CredentialFormDefinition', 'CredentialsListDefinition',
'LookUpHelper', 'ProjectFormDefinition', 'JobSubmissionHelper'])
'LookUpHelper', 'ProjectFormDefinition', 'JobSubmissionHelper', 'GroupFormDefinition'])
.factory('PromptPasswords', ['CredentialForm', 'JobTemplateForm', 'ProjectsForm', '$compile', 'Rest', '$location', 'ProcessErrors', 'GetBasePath',
'Alert',
@ -350,7 +350,89 @@ angular.module('JobSubmissionHelper', [ 'RestServices', 'Utilities', 'Credential
})
.error( function(data, status, headers, config) {
ProcessErrors(scope, data, status, null,
{ hdr: 'Error!', msg: 'Failed to get job template details. GET returned status: ' + status });
{ hdr: 'Error!', msg: 'Failed to get project update details: ' + url + ' GET status: ' + status });
});
};
}])
// Sumbit Inventory Update request
.factory('InventoryUpdate',['PromptPasswords', '$compile', 'Rest', '$location', 'GetBasePath', 'ProcessErrors', 'Alert', 'GroupForm',
function(PromptPasswords, $compile, Rest, $location, GetBasePath, ProcessErrors, Alert, GroupForm) {
return function(params) {
var scope = params.scope;
var inventory_id = params.inventory_id;
var url = params.url;
if (scope.removeUpdateSubmitted) {
scope.removeUpdateSubmitted();
}
scope.removeUpdateSubmitted = scope.$on('UpdateSubmitted', function() {
// Refresh the project list after update request submitted
scope.refresh();
});
if (scope.removeInventorySubmit) {
scope.removeInventorySubmit();
}
scope.removeInventorySubmit = scope.$on('InventorySubmit', function(e, passwords_needed_to_update, extra_html) {
// After the call to update, kick off the job.
PromptPasswords({
scope: scope,
passwords: passwords_needed_to_update,
start_url: url,
form: GroupForm,
extra_html: extra_html
});
});
// Check to see if we have permission to perform the update and if any passwords are needed
Rest.setUrl(url);
Rest.get()
.success( function(data, status, headers, config) {
if (data.can_update) {
var extra_html = '';
/*
for (var i=0; i < scope.projects.length; i++) {
if (scope.projects[i].id == project_id) {
extra_html += "<div class=\"form-group\">\n";
extra_html += "<label class=\"control-label col-lg-3 normal-weight\" for=\"scm_url\">SCM URL</label>\n";
extra_html += "<div class=\"col-lg-9\">\n";
extra_html += "<input type=\"text\" readonly";
extra_html += ' name=\"scm_url\" ';
extra_html += "class=\"form-control\" ";
extra_html += "value=\"" + scope.projects[i].scm_url + "\" ";
extra_html += "/>";
extra_html += "</div>\n";
extra_html += "</div>\n";
if (scope.projects[i].scm_username) {
extra_html += "<div class=\"form-group\">\n";
extra_html += "<label class=\"control-label col-lg-3 normal-weight\" for=\"scm_username\">SCM Username</label>\n";
extra_html += "<div class=\"col-lg-9\">\n";
extra_html += "<input type=\"text\" readonly";
extra_html += ' name=\"scm_username\" ';
extra_html += "class=\"form-control\" ";
extra_html += "value=\"" + scope.projects[i].scm_username + "\" ";
extra_html += "/>";
extra_html += "</div>\n";
extra_html += "</div>\n";
}
break;
}
}
extra_html += "</p>";
*/
scope.$emit('InventorySubmit', data.passwords_needed_to_update, extra_html);
}
else {
Alert('Permission Denied', 'You do not have access to run the update. Please contact your system administrator.',
'alert-danger');
}
})
.error( function(data, status, headers, config) {
ProcessErrors(scope, data, status, null,
{ hdr: 'Error!', msg: 'Failed to get inventory_source details. ' + url + 'GET status: ' + status });
});
};
}]);

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

@ -669,42 +669,82 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
}
}])
.factory('InventoryStatus', [ 'Rest', 'Alert', 'ProcessErrors', 'GetBasePath', 'FormatDate', 'InventorySummary', 'GenerateList',
function(Rest, Aler, ProcessErrors, GetBasePath, FormatDate, InventorySummary, GenerateList) {
.factory('InventoryStatus', [ '$rootScope', 'Rest', 'Alert', 'ProcessErrors', 'GetBasePath', 'FormatDate', 'InventorySummary',
'GenerateList', 'ClearScope',
function($rootScope, Rest, Aler, ProcessErrors, GetBasePath, FormatDate, InventorySummary, GenerateList, ClearScope) {
return function(params) {
//Build a summary of a given inventory
ClearScope('tree-form');
$('#tree-form').hide().empty();
var view = GenerateList;
var scope = view.inject(InventorySummary, { mode: 'summary', id: 'tree-form', breadCrumbs: false });
scope['groups'] = [];
var total;
var cnt=0;
var groups = new Array();
if (scope.RemoveGroupsLoaded) {
scope.RemoveGroupsLoaded();
}
scope.RemoveGroupsLoaded = scope.$on('GroupsLoaded', function() {
// Using this sort of indirect method of updating scope['groups'] works. Pushing data directly into
// scope['groups'] directly causes it to grow exponentially with duplicates each time user navigates away
// and comes back -despite emptying/resetting/initializing.
scope['groups'] = groups;
if (!scope.$$phase) {
scope.$apply();
}
});
function checkSource(url) {
Rest.setUrl(url);
Rest.get()
.success( function(data, status, headers, config) {
//console.log(data);
var last_update = (data.last_updated == null) ? 'n/a' : FormatDate(new Date(data.last_updated));
var last_update = (data.last_updated == null) ? '' : FormatDate(new Date(data.last_updated));
var source = 'Manual';
var stat;
switch (data.status) {
case 'never updated':
stat = 'never';
break;
case 'none':
stat = 'na';
break;
default:
stat = data.status;
}
switch(data.source) {
case 'file':
source = 'File';
break;
case 'ec2':
source = 'Amazon EC2';
break;
case 'rackspace':
source = 'Rackspace';
break;
}
scope['groups'].push({
case 'file':
source = 'File';
break;
case 'ec2':
source = 'Amazon EC2';
break;
case 'rackspace':
source = 'Rackspace';
break;
}
groups.push({
name: data.summary_fields.group.name,
description: data.summary_fields.group.description,
failures: data.summary_fields.group.hosts_with_active_failures,
source: source,
last_update: last_update,
status: data.status
status: stat,
has_active_failures: data.summary_fields.group.has_active_failures
});
cnt++;
if (cnt >= total) {
scope.$emit('GroupsLoaded');
}
})
.error( function(data, status, headers, config) {
ProcessErrors(scope, data, status, null,
@ -716,11 +756,12 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
Rest.setUrl(url);
Rest.get()
.success( function(data, status, headers, config) {
total = data.count;
for (var i=0; i < data.results.length; i++) {
if (data.results[i].related.inventory_source) {
checkSource(data.results[i].related.inventory_source);
}
}
}
})
.error( function(data, status, headers, config) {
ProcessErrors(scope, data, status, null,

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

@ -12,26 +12,40 @@ angular.module('InventorySummaryDefinition', [])
name: 'groups',
iterator: 'group',
editTitle: 'Inventory Summary',
editTitle: 'Inventory Summary: {{ inventory_name }}',
showTitle: true,
well: false,
index: false,
hover: true,
fields: {
name: {
key: true,
label: 'Name'
label: 'Group',
noLink: true,
badges: [
{ //Active Failures
icon: "\{\{ 'icon-failures-' + group.has_active_failures \}\}",
toolTip: 'Indicates if inventory contains hosts with active failures',
toolTipPlacement: 'bottom'
},
{ //Cloud Status
icon: "\{\{ 'icon-cloud-' + group.status \}\}",
toolTip: 'Indicates if inventory contains hosts with active failures',
toolTipPlacement: 'bottom'
}]
},
failures: {
label: 'Hosts Failures'
label: 'Active<br />Failures'
},
source: {
label: 'Source'
},
last_update: {
label: 'Last Update'
label: 'Last<br />Updated'
},
status: {
label: 'Update Status'
label: 'Update<br />Status'
}
},

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

@ -10,6 +10,7 @@
@black: #171717;
@warning: #FF9900;
@red: #FF0000;
@green: #5bb75b;
@blue: #1778c3; /* logo blue */
@blue-link: #0088cc;
@grey: #A9A9A9;
@ -591,6 +592,19 @@ select.field-mini-height {
background-color: #dff0d8;
}
.table-summary thead > tr > th,
.table-summary tbody > tr > th,
.table-summary tfoot > tr > th,
.table-summary thead > tr > td,
.table-summary tbody > tr > td,
.table-summary tfoot > tr > td {
border-top: 1px solid #ccc;
}
.table-summary thead > tr > th {
border-bottom: 1px solid #ccc;
}
/* Jobs pages */
.job-error,
@ -646,6 +660,31 @@ select.field-mini-height {
content: "\f111";
}
/* Cloud inventory status. i.e. inventory_source.status values */
.icon-cloud-na:before,
.icon-cloud-never:before,
.icon-cloud-updating:before,
.icon-cloud-failed:before,
.icon-cloud-success:before {
content: "\f0c2";
}
.icon-cloud-na {
color: #e3e3e3;
}
.icon-cloud-never {
color: #888;
}
.icon-cloud-updating,
.icon-cloud-success {
color: #5bb75b;
}
.icon-cloud-failed {
color: @red;
}
.field-success {
color: #5bb75b;
}
@ -813,7 +852,7 @@ select.field-mini-height {
background-color: #ccc;
height: 1px;
margin-top: 5px;
margin-bottom: 30px;
margin-bottom: 15px;
}
}

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

@ -1220,7 +1220,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
html += "<button type=\"button\" id=\"create_group_btn\" class=\"btn btn-success btn-sm\" ng-click=\"createGroup()\" ng-hide=\"groupCreateHide\" " +
"aw-tool-tip=\"Create a brand new group and add it to the selected group\" data-placement=\"bottom\" ng-disabled=\"grpBtnDisable\"><i class=\"icon-plus\"></i> Create New</button>\n";
html += "<button type=\"button\" id=\"update_group_btn\" class=\"btn btn-success btn-sm\" ng-click=\"updateGroup()\" ng-hide=\"groupUpdateHide\" " +
"aw-tool-tip=\"Start the inventory update process, refreshing the group.\" " +
"aw-tool-tip=\"Start the inventory update process to refresh the group.\" " +
"data-placement=\"bottom\" ng-disabled=\"grpBtnDisable\"><i class=\"icon-cloud-download\"></i> Update</button>\n";
html += "<button type=\"button\" id=\"delete_group_btn\" class=\"btn btn-danger btn-sm\" ng-click=\"deleteGroup()\" ng-hide=\"groupDeleteHide\" " +
"aw-tool-tip=\"Permanently delete the selected group. Any hosts in the group will still be available in All Hosts.\" " +

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

@ -232,25 +232,43 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers'])
return function(field) {
var html = '';
if (field.badgeToolTip) {
html += "<a href=\"\" aw-tool-tip=\"" + field.badgeToolTip + "\"";
html += (field.badgeTipPlacement) ? " data-placement=\"" + field.badgeTipPlacement + "\"" : "";
html += (field.badgeShow) ? " ng-show=\"" + field.badgeShow + "\"" : "";
html += ">";
}
html += "<i ";
html += (field.badgeShow) ? "ng-show=\"" + field.badgeShow + "\" " : "";
html += " class=\"field-badge " + field.badgeIcon;
html += (field.badgeClass) ? " " + field.badgeClass : "";
html += "\"></i>";
if (field.badgeToolTip) {
html += "</a>";
if (field.badges) {
for (var i=0; i < field.badges.length; i++) {
if (field.badges[i].toolTip) {
html += "<a href=\"\" aw-tool-tip=\"" + field.badges[i].toolTip + "\"";
html += (field.badges[i].toolTipPlacement) ? " data-placement=\"" + field.badges[i].toolTipPlacement + "\"" : "";
html += (field.badges[i].badgeShow) ? " ng-show=\"" + field.badges[i].badgeShow + "\"" : "";
html += ">";
}
html += "<i ";
html += (field.badges[i].badgeShow) ? "ng-show=\"" + field.badges[i].badgeShow + "\" " : "";
html += " class=\"field-badge " + field.badges[i].icon;
html += (field.badges[i].badgeClass) ? " " + field.badges[i].badgeClass : "";
html += "\"></i>";
if (field.badges[i].toolTip) {
html += "</a>";
}
html += "\n";
}
}
else {
if (field.badgeToolTip) {
html += "<a href=\"\" aw-tool-tip=\"" + field.badgeToolTip + "\"";
html += (field.badgeTipPlacement) ? " data-placement=\"" + field.badgeTipPlacement + "\"" : "";
html += (field.badgeShow) ? " ng-show=\"" + field.badgeShow + "\"" : "";
html += ">";
}
html += "<i ";
html += (field.badgeShow) ? "ng-show=\"" + field.badgeShow + "\" " : "";
html += " class=\"field-badge " + field.badgeIcon;
html += (field.badgeClass) ? " " + field.badgeClass : "";
html += "\"></i>";
if (field.badgeToolTip) {
html += "</a>";
}
html += "\n";
}
html += "\n";
return html;
@ -284,7 +302,7 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers'])
html += (field.ngShow) ? "<span " + Attr(field,'ngShow') + ">" : "";
// Badge
if (options.mode !== 'lookup' && field.badgeIcon && field.badgePlacement && field.badgePlacement == 'left') {
if ( options.mode !== 'lookup' && (field.badges || (field.badgeIcon && field.badgePlacement && field.badgePlacement == 'left')) ) {
html += Badge(field);
}
@ -296,7 +314,8 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers'])
}
// Start the Link
if ((field.key || field.link || field.linkTo || field.ngClick ) && options['mode'] != 'lookup' && options['mode'] != 'select') {
if ( (field.key || field.link || field.linkTo || field.ngClick ) &&
options['mode'] != 'lookup' && options['mode'] != 'select' && !field.noLink ) {
var cap=false;
if (field.linkTo) {
html += "<a href=\"#" + field.linkTo + "\" ";
@ -349,11 +368,10 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers'])
}
// close the link
if ((field.key || field.link || field.linkTo || field.ngClick )
&& options.mode != 'lookup' && options.mode != 'select') {
html += "</a>";
if ( (field.key || field.link || field.linkTo || field.ngClick )
&& options.mode != 'lookup' && options.mode != 'select' && !field.noLink ) {
html += "</a>";
}
// close ngShow
html += (field.ngShow) ? "</span>" : "";

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

@ -67,15 +67,11 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
$('.tooltip').each( function(index) {
$(this).remove();
});
$('.popover').each(function(index) {
// remove lingering popover <div>. Seems to be a bug in TB3 RC1
$(this).remove();
});
// Remove leftover timer, if any
//if (options.mode != 'lookup' && this.scope.timer) {
// clearInterval(this.scope.timer);
//}
if (options.mode == 'lookup') {
// options should include {hdr: <dialog header>, action: <function...> }
@ -169,6 +165,18 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
if (options.mode != 'lookup' && (list.well == undefined || list.well == 'true')) {
html += "<div class=\"well\">\n";
}
// Add a title and optionally a close button (used on Inventory->Groups)
if (options.mode !== 'lookup' && list.showTitle) {
html += "<div class=\"form-title\">";
html += (options.mode == 'edit' || options.mode == 'summary') ? list.editTitle : list.addTitle;
if (list.cancelButton) {
html += "<button type=\"button\" ng-click=\"closeForm()\" class=\"close form-cancel\" aria-hidden=\"true\">" +
"&times;</button>\n";
}
html += "</div>\n";
html += "<hr class=\"form-title-hr\">\n";
}
if (options.mode !== 'summary') {
@ -226,9 +234,9 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
html += "<table id=\"" + list.name + "_table\" ";
html += "class=\"table"
html += (list['class']) ? " " + list['class'] : "";
html += (options.mode == 'lookup' || options.id) ? ' table-hover-inverse' : '';
html += (options.mode !== 'summary' && (options.mode == 'lookup' || options.id)) ? ' table-hover-inverse' : '';
html += (list.hover) ? ' table-hover' : '';
html += (options.mode == 'summary') ? ' table-summary' : '';
html += "\" ";
html += ">\n";
html += "<thead>\n";
@ -354,7 +362,9 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
html += PaginateWidget({ set: list.name, iterator: list.iterator, mini: true, mode: 'lookup' });
}
else {
html += PaginateWidget({ set: list.name, iterator: list.iterator, mini: true });
if (options.mode !== 'summary') {
html += PaginateWidget({ set: list.name, iterator: list.iterator, mini: true });
}
}
return html;