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

AC-331 Latest changes to Inventories Hosts tab. Hosts is now the lead tab. Added menu bar. Added select checkbox for each row.

Browse Source
This commit is contained in:
chouseknecht 2013-08-16 11:43:39 -04:00
parent 036352f10e
commit 9abb346946
6 changed files with 93 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -199,7 +199,7 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
ParseTypeChange(scope,'inventory_variables', 'inventoryParseType');
$('#inventory-tabs a:first').tab('show'); //activate the groups tab
$('#inventory-tabs a:first').tab('show'); //activate the hosts tab
scope['inventoryParseType'] = 'yaml';
scope['inventory_id'] = id;
@ -210,11 +210,16 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
scope.inventoryLoadedRemove();
}
scope.inventoryLoadedRemove = scope.$on('inventoryLoaded', function() {
LoadSearchTree({ scope: scope, inventory_id: scope['inventory_id'] });
TreeInit(scope.TreeParams);
if (!scope.$$phase) {
scope.$digest();
}
});
LoadInventory({ scope: scope, doPostSteps: true });
$('#inventory-tabs a[href="#inventory-hosts"]').on('show.bs.tab', function() {
scope['hosts'] = null;
LoadSearchTree({ scope: scope, inventory_id: scope['inventory_id'] });
if (!scope.$$phase) {
scope.$digest();
@ -402,9 +407,6 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
if (!scope.$$phase) {
scope.$digest();
}
//HostsReload({ scope: scope, inventory_id: scope['inventory_id'], group_id: scope['group_id'] });
});
scope.addGroup = function() {
@ -423,7 +425,7 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
GroupsDelete({ scope: scope, "inventory_id": id, group_id: scope.group_id });
}
scope.selectHost = function() {
scope.addHost = function() {
HostsList({ scope: scope, "inventory_id": id, group_id: scope.group_id });
}
@ -440,10 +442,10 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
request: 'delete' });
}
scope.removeHost = function(host_id, host_name) {
/* scope.removeHost = 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: 'remove' });
}
} */
scope.showEvents = function(host_name, last_job) {
// When click on !Failed Events link, redirect to latest job/job_events for the host
@ -463,6 +465,16 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
scope.$on('refreshHost', function(e, group, title) {
scope.groupTitle = title;
scope.group_id = group;
if (scope.group_id == null) {
scope.hostAddHide = true;
scope.hostCreateHide = true;
scope.hostDeleteHide = true;
}
else {
scope.hostAddHide = false;
scope.hostCreateHide = false;
scope.hostDeleteHide = false;
}
HostsReload({ scope: scope, inventory_id: scope['inventory_id'], group_id: group });
});

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

@ -199,41 +199,41 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
});
$(tree_id).bind('move_node.jstree', function(e, data) {
// When user drags-n-drops a node, update the API
// When user drags-n-drops a node, update the API
Wait('start');
var node, target, url, parent, inv_id, variables;
node = $('#tree-view li[id="' + data.rslt.o[0].id + '"]'); // node being moved
parent = $('#tree-view li[id="' + data.args[0].op[0].id + '"]'); //node moving from
target = $('#tree-view li[id="' + data.rslt.np[0].id + '"]'); // node moving to
inv_id = inventory_id;
function cleanUp() {
Wait('stop');
if (!scope.$$phase) {
scope.$digest();
}
}
if (scope.removeCopyVariables) {
scope.removeCopyVariables();
}
scope.removeCopyVariables = scope.$on('copyVariables', function(e, id, url) {
function showSuccessMsg() {
var parent_descr = (parent.attr('type') == 'inventory') ? 'the inventory root' : parent.attr('name');
var target_descr = (target.attr('type') == 'inventory') ? 'the inventory root' : target.attr('name');
Wait('stop');
if (!scope.$$phase) {
scope.$digest();
}
}
if (variables) {
Rest.setUrl(url);
Rest.put(variables)
.success(function(data, status, headers, config) {
showSuccessMsg();
cleanUp();
})
.error(function(data, status, headers, config) {
cleanUp();
ProcessErrors(scope, data, status, null,
{ hdr: 'Error!', msg: 'Failed to update variables. PUT returned status: ' + status });
});
}
else {
showSuccessMsg();
cleanUp();
}
});
@ -263,6 +263,7 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
scope.$emit('copyVariables', data.id, data.related.variable_data);
})
.error( function(data, status, headers, config) {
cleanUp();
ProcessErrors(scope, data, status, null,
{ hdr: 'Error!', msg: 'Failed to add ' + node.attr('name') + ' to ' +
target.attr('name') + '. POST returned status: ' + status });
@ -282,6 +283,7 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
scope.$emit('addToTarget');
})
.error( function(data, status, headers, config) {
cleanUp();
ProcessErrors(scope, data, status, null,
{ hdr: 'Error!', msg: 'Failed to remove ' + node.attr('name') + ' from ' +
parent.attr('name') + '. POST returned status: ' + status });
@ -296,6 +298,7 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
scope.$emit('removeGroup');
})
.error( function(data, status, headers, config) {
cleanUp();
ProcessErrors(scope, data, status, null,
{ hdr: 'Error!', msg: 'Failed to lookup group ' + node.attr('name') +
'. GET returned status: ' + status });

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

@ -546,7 +546,7 @@ input[type="text"].job-successful {
border-radius: 6px;
}
.groups-menu {
.groups-menu, .hosts-menu {
min-height: 30px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
@ -634,27 +634,28 @@ input[type="text"].job-successful {
list-style-type: none;
padding-left: 13px;
}
ul:first-child {
padding-left: 0;
}
}
.activate:hover {
background-color: #ddd;
}
.search-tree .active {
/*background-color: #ddd;
padding: 1px 1px 1px 0;
border: 1px solid #ddd;
border-radius: 4px;*/
font-weight: bold;
color: #000;
}
.active {
font-weight: bold;
color: #000;
}
.search-tree .expand {
padding: 3px;
}
.expand {
padding: 3px;
}
.search-tree .expand:hover {
background-color: #ddd;
border: 1px solid #ddd;
.expand:hover {
background-color: #ddd;
border: 1px solid #ddd;
}
}
.parse-selection {

15
awx/ui/static/lib/ansible/directives.js
View File

@ -317,8 +317,8 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Hos
}
}])
.directive('awTree', ['Rest', 'ProcessErrors', 'Authorization', '$compile', '$rootScope',
function(Rest, ProcessErrors, Authorization, $compile, $rootScope) {
.directive('awTree', ['Rest', 'ProcessErrors', 'Authorization', '$compile', '$rootScope', 'Wait',
function(Rest, ProcessErrors, Authorization, $compile, $rootScope, Wait) {
return {
//require: 'ngModel',
@ -354,12 +354,12 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Hos
var group, title;
if (parent.attr('data-group-id')) {
group = parent.attr('data-group-id');
title = '<h4>' + parent.attr('data-name') + '</h4>';
title += (parent.attr('data-description') !== "") ? '<p>' + parent.attr('data-description') + '</p>' : '';
title = parent.attr('data-name');
//title += (parent.attr('data-description') !== "") ? '<p>' + parent.attr('data-description') + '</p>' : '';
}
else {
group = null;
title = '<h4>All Hosts</h4>'
title = 'All Hosts'
}
scope.$emit('refreshHost', group, title);
}
@ -502,6 +502,7 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Hos
scope.$emit('childrenLoaded');
},
error: function(data, status) {
Wait('stop');
ProcessErrors(scope, data, status, null,
{ hdr: 'Error!', msg: 'Failed to get child groups for ' + elm.attr('name') +
'. GET returned: ' + status });
@ -521,6 +522,7 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Hos
$rootScope.hostTabInitRemove();
}
$rootScope.hostTabInitRemove = $rootScope.$on('hostTabInit', function(e) {
Wait('start');
var container = angular.element(document.getElementById('search-tree-container'));
container.empty();
var html = "<ul>\n" +
@ -540,7 +542,8 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Hos
setTimeout(function() {
$('#search-node-1000 .expand').click();
$('#search-node-1000 .activate').click();
}, 500);
Wait('stop');
}, 1000);
});
}

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

@ -905,8 +905,8 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
html += "<div class=\"inventory-content\">\n";
html += "<ul class=\"nav nav-tabs\" id=\"inventory-tabs\">\n";
html += "<li><a href=\"#inventory-groups\" data-toggle=\"tab\">Groups</a></li>\n";
html += "<li><a href=\"#inventory-hosts\" data-toggle=\"tab\">Hosts</a></li>\n";
html += "<li><a href=\"#inventory-groups\" data-toggle=\"tab\">Groups</a></li>\n";
html += "</ul>\n";
html += "<div class=\"tab-content\">\n";
@ -928,10 +928,10 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
"aw-tool-tip=\"Delete the selected group\" data-placement=\"bottom\"><i class=\"icon-trash\"></i> Delete Group</a></li>\n";
html += "<li><a class=\"status\" ng-show=\"treeLoading\" href=\"\"><i class=\"icon-spinner icon-spin icon-large\"></i> Loading...</a></li>\n";
html += "</ul>\n";
html += "<form class=\"navbar-form\">\n";
/*html += "<form class=\"navbar-form\">\n";
html += "<label class=\"checkbox-inline\"><input type=\"checkbox\" ng-model=\"inventoryFailureFilter\" ng-change=\"filterInventory()\" > Only show groups with failed hosts" +
"</label>\n";
html += "</form>\n";
html += "</form>\n"; */
html += "</div><!-- navbar -->\n";
html += "<div id=\"tree-view\" class=\"tree-container\"></div>\n";
//html += "<span ng-show=\"has_active_failures == true\"><label class=\"checkbox inline\">";
@ -947,8 +947,24 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
html += "<div aw-tree=\"searchTree\"></div>\n";
html += "</div>\n";
html += "<div class=\"col-lg-9\">\n";
html += "<div class=\"navbar hosts-menu\">\n";
html += "<a class=\"navbar-brand\" ng-bind-html-unsafe=\"" + form.related[itm].title + "\" href=\"\"></a>\n";
html += "<ul class=\"nav navbar-nav\">\n";
html += "<li><a href=\"\" ng-click=\"addHost()\" ng-hide=\"hostAddHide\" " +
"aw-tool-tip=\"Add an existing host\" data-placement=\"bottom\"><i class=\"icon-check\"></i> Add Existing Host</a></li>\n";
html += "<li><a href=\"\" ng-click=\"createHost()\" ng-hide=\"hostCreateHide\" " +
"aw-tool-tip=\"Create a new host\" data-placement=\"bottom\"><i class=\"icon-plus\"></i> Create New Host</a></li>\n";
html += "<li><a href=\"\" ng-click=\"deleteHost()\" ng-hide=\"hostDeleteHide\" " +
"aw-tool-tip=\"Delete selected hosts\" data-placement=\"bottom\"><i class=\"icon-trash\"></i> Delete Hosts</a></li>\n";
html += "<li><a class=\"status\" ng-show=\"treeLoading\" href=\"\"><i class=\"icon-spinner icon-spin icon-large\"></i> Loading...</a></li>\n";
html += "</ul>\n";
html += "<form class=\"navbar-form\">\n";
html += "<label class=\"checkbox-inline\"><input type=\"checkbox\" ng-model=\"hostFailureFilter\" ng-change=\"filterInventory()\" > Only show hosts with failed jobs" +
"</label>\n";
html += "</form>\n";
html += "</div><!-- navbar -->\n";
html += "<div class=\"hosts-well well\">\n";
html += "<div class=\"hosts-title\" ng-bind-html-unsafe=\"" + form.related[itm].title + "\"></div>\n";
html += SearchWidget({ iterator: form.related[itm].iterator, template: form.related[itm], mini: true, size: 'col-lg-6'});
// Add actions(s)
@ -973,6 +989,8 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
html += "<thead>\n";
html += "<tr>\n";
html += "<th>#</th>\n";
html += "<th><input type=\"checkbox\" ng-click=\"toggle_all()\" aw-tool-tip=\"Select all hosts\" data-placement=\"top\"></th>\n";
for (var fld in form.related[itm].fields) {
html += "<th class=\"list-header\" id=\"" + form.related[itm].iterator + '-' + fld + "-header\" " +
"ng-click=\"sort('" + form.related[itm].iterator + "', '" + fld + "')\">" +
@ -991,14 +1009,23 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
}
html += "\"></i></a></th>\n";
}
html += "<th></th>\n";
html += "</tr>\n";
html += "</thead>";
html += "<tbody>\n";
html += "<tr ng-repeat=\"" + form.related[itm].iterator + " in " + itm + "\" >\n";
// Row counter
html += "<td>{{ $index + (" + form.related[itm].iterator + "Page * " +
form.related[itm].iterator + "PageSize) + 1 }}.</td>\n";
// Select checkbox
html += "<td><input type=\"checkbox\" ng-model=\"" + form.related[itm].iterator + ".checked\" name=\"check_{{" +
form.related[itm].iterator + ".id }}\" ng-click=\"toggle_" + form.related[itm].iterator +"({{ " + form.related[itm].iterator + ".id }}, true)\" ng-true-value=\"1\" " +
"ng-false-value=\"0\" id=\"check_{{" + form.related[itm].iterator + ".id}}\" /></td>";
var cnt = 1;
var rfield;
var base = (form.related[itm].base) ? form.related[itm].base : itm;

2
awx/ui/static/lib/ansible/utilities.js
View File

@ -226,7 +226,7 @@ angular.module('Utilities',[])
$('.overlay').css({
width: $('html').width(),
height: $(document).height() + 200
}).fadeIn(500);
}).fadeIn();
$('.spinny').css({
top: y,
left: x,