1
0
mirror of https://github.com/ansible/awx.git synced 2024-10-30 22:21:13 +03:00

Inventory refactory: working on inventory group copy/move via drag-n-drop. The graphical piece is mostly working.

This commit is contained in:
Chris Houseknecht 2014-01-14 23:25:25 +00:00
parent b81e7ad967
commit 902008d17e
10 changed files with 312 additions and 233 deletions

View File

@ -319,7 +319,7 @@ InventoriesAdd.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$lo
function InventoriesEdit ($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)
HostsCreate, EditInventoryProperties, HostsEdit, HostsDelete, ToggleHostEnabled, CopyMoveGroup)
{
ClearScope('htmlTemplate'); //Garbage collection. Don't leave behind any listeners/watchers from the prior
//scope.
@ -384,6 +384,13 @@ function InventoriesEdit ($scope, $location, $routeParams, $compile, GenerateLis
BuildTree({ scope: $scope, inventory_id: $scope.inventory_id, refresh: true });
});
if ($scope.removeCopMoveGroup) {
$scope.removeCopyMoveGroup();
}
$scope.removeCopyMoveGroup = $scope.$on('CopyMoveGroup', function(e, inbound_tree_id, target_tree_id) {
CopyMoveGroup({ scope: $scope, target_tree_id: target_tree_id, inbound_tree_id: inbound_tree_id });
});
$scope.showHosts = function(tree_id, group_id, show_failures) {
// Clicked on group
if (tree_id !== null) {
@ -512,6 +519,6 @@ InventoriesEdit.$inject = [ '$scope', '$location', '$routeParams', '$compile', '
'BuildTree', 'Wait', 'GetSyncStatusMsg', 'InjectHosts', 'HostsReload', 'GroupsAdd', 'GroupsEdit', 'GroupsDelete',
'Breadcrumbs', 'LoadBreadCrumbs', 'Empty', 'Rest', 'ProcessErrors', 'InventoryUpdate', 'Alert', 'ToggleChildren',
'ViewUpdateStatus', 'GroupsCancelUpdate', 'Find', 'HostsCreate', 'EditInventoryProperties', 'HostsEdit',
'HostsDelete', 'ToggleHostEnabled'
'HostsDelete', 'ToggleHostEnabled', 'CopyMoveGroup'
];

View File

@ -41,6 +41,7 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
}
}])
.factory('GetUpdateIntervalOptions', [ function() {
return function() {
return [
@ -217,110 +218,6 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
}
}])
.factory('GroupsList', ['$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'GroupList', 'GenerateList',
'Prompt', 'SearchInit', 'PaginateInit', 'ProcessErrors', 'GetBasePath', 'GroupsAdd', 'SelectionInit',
function($rootScope, $location, $log, $routeParams, Rest, Alert, GroupList, GenerateList, Prompt, SearchInit, PaginateInit,
ProcessErrors, GetBasePath, GroupsAdd, SelectionInit) {
return function(params) {
// build and present the list of groups we can add to an existing group
var inventory_id = params.inventory_id;
var group_id = (params.group_id !== undefined) ? params.group_id : null;
var list = GroupList;
var defaultUrl = GetBasePath('inventory') + inventory_id + '/groups/';
var view = GenerateList;
var scope = view.inject(GroupList, {
id: 'form-modal-body',
mode: 'select',
breadCrumbs: false,
selectButton: false
});
scope.formModalActionLabel = 'Select';
scope.formModalHeader = 'Copy Groups';
scope.formModalCancelShow = true;
scope.formModalActionClass = 'btn btn-success';
$('.popover').popover('hide'); //remove any lingering pop-overs
$('#form-modal .btn-none').removeClass('btn-none').addClass('btn-success');
$('#form-modal').modal({ backdrop: 'static', keyboard: false });
// Initialize the selection list
var url = (group_id) ? GetBasePath('groups') + group_id + '/children/' :
GetBasePath('inventory') + inventory_id + '/groups/';
var selected = [];
SelectionInit({ scope: scope, list: list, url: url, selected: selected });
scope.formModalAction = function() {
var groups = [];
for (var j=0; j < selected.length; j++) {
if (scope.inventoryRootGroups.indexOf(selected[j].id) > -1) {
groups.push(selected[j].name);
}
}
if (groups.length > 0) {
var action = function() {
$('#prompt-modal').modal('hide');
scope.finishSelection();
}
if (groups.length == 1) {
Prompt({ hdr: 'Warning', body: 'Be aware that ' + groups[0] +
' is a top level group. Adding it to ' + scope.selectedNodeName + ' will remove it from the top level. Do you ' +
' want to continue with this action?',
action: action });
}
else {
var list = '';
for (var i=0; i < groups.length; i++) {
if (i+1 == groups.length) {
list += ' and ' + groups[i];
}
else {
list += groups[i] + ', ';
}
}
Prompt({ hdr: 'Warning', body: 'Be aware that ' + list +
' are top level groups. Adding them to ' + scope.selectedNodeName + ' will remove them from the top level. Do you ' +
' want to continue with this action?',
action: action });
}
}
else {
scope.finishSelection();
}
}
var searchUrl = (group_id) ? GetBasePath('groups') + group_id + '/potential_children/' :
GetBasePath('inventory') + inventory_id + '/groups/';
SearchInit({ scope: scope, set: 'groups', list: list, url: searchUrl });
PaginateInit({ scope: scope, list: list, url: searchUrl, mode: 'lookup' });
scope.search(list.iterator);
if (!scope.$$phase) {
scope.$digest();
}
if (scope.removeModalClosed) {
scope.removeModalClosed();
}
scope.removeModalClosed = scope.$on('modalClosed', function() {
/*BuildTree({
scope: scope,
inventory_id: inventory_id,
emit_on_select: 'NodeSelect',
target_id: 'search-tree-container',
refresh: true,
moveable: true
});*/
});
}
}])
.factory('SourceChange', [ 'GetBasePath', 'CredentialList', 'LookUpInit',
function(GetBasePath, CredentialList, LookUpInit){
return function(params) {
@ -488,6 +385,7 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
}
scope.removeSaveComplete = scope.$on('SaveComplete', function(e, group_id, error) {
if (!error) {
if (scope.searchCleanup)
scope.searchCleanup();
scope.formModalActionDisabled = false;
scope.showGroupHelp = false; //get rid of the Hint

View File

@ -187,7 +187,6 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
scope.formModalAction = function() {
scope.inventory_id = inventory_id;
parent_scope.inventory_name = scope.inventory_name;
console.log('set inventory_name to: ' + parent_scope.inventory_name);
SaveInventory({ scope: scope });
}

View File

@ -22,8 +22,6 @@ angular.module('RefreshHelper', ['RestServices', 'Utilities'])
var set = params.set;
var iterator = params.iterator;
var url = params.url;
console.log('Inside refresh');
console.log(url);
scope.current_url = url;
Rest.setUrl(url);
Rest.get()

View File

@ -29,9 +29,15 @@ angular.module('InventoryGroupsDefinition', [])
ngClass: "group.selected_class",
hasChildren: true,
columnClass: 'col-lg-9',
nosort: true
},
source: {
nosort: true,
awDroppable: "\{\{ group.isDroppable \}\}",
awDraggable: "\{\{ group.isDraggable \}\}",
dataContainment: "#groups_table",
dataTreeId: "\{\{ group.id \}\}",
dataGroupId: "\{\{ group.group_id \}\}",
dataAccept: "dropAccept" //function determining when draggable is accepted by droppable
}
/*source: {
label: 'Source',
searchType: 'select',
searchOptions: [
@ -65,7 +71,7 @@ angular.module('InventoryGroupsDefinition', [])
searchOnly: true,
sourceModel: 'inventory_source',
sourceField: 'status'
}
}*/
},
actions: {

View File

@ -240,6 +240,7 @@ td.actions {
.dropdown-toggle,
/*
.dropdown-toggle:hover,
.btn-default:visited,
.btn-default:hover,
@ -249,6 +250,7 @@ td.actions {
background-color: #bbb;
border-color: #bbb;
}
*/
.btn-light {
color: #333;
@ -1058,6 +1060,23 @@ input[type="checkbox"].checkbox-no-label {
opacity: .30;
}
.draggable-clone {
/* padding: 4px;
border-radius: 6px;
background: transparent;
border: 1px solid @grey; */
font-weight: bold;
}
.droppable-hover {
background-color: @info;
color: @info-color;
padding: 4px;
border: 1px solid @info-border;
border-radius: 4px;
}
.disabled {
color: @grey;
}
@ -1336,7 +1355,7 @@ tr td button i {
margin-top: 10px;
}
.tree-form-container {
/*.tree-form-container {
padding-left: 15px;
padding-right: 15px;
@ -1358,7 +1377,7 @@ tr td button i {
#tree-form {
margin-top: 10px;
}
}*/
.label-text {
text-align: left;

View File

@ -9,7 +9,7 @@
*
*/
angular.module('InventoryTree', ['Utilities', 'RestServices', 'GroupsHelper'])
angular.module('InventoryTree', ['Utilities', 'RestServices', 'GroupsHelper', 'PromptDialog'])
.factory('SortNodes', [ function() {
return function(data) {
@ -31,6 +31,7 @@ angular.module('InventoryTree', ['Utilities', 'RestServices', 'GroupsHelper'])
}
}])
// Figure out the group level tool tip
.factory('GetToolTip', [ 'FormatDate', function(FormatDate) {
return function(params) {
@ -106,6 +107,7 @@ angular.module('InventoryTree', ['Utilities', 'RestServices', 'GroupsHelper'])
}
}])
.factory('GetInventoryToolTip', [ 'FormatDate', function(FormatDate) {
return function(params) {
@ -171,6 +173,7 @@ angular.module('InventoryTree', ['Utilities', 'RestServices', 'GroupsHelper'])
}
}])
.factory('BuildTree', ['Rest', 'GetBasePath', 'ProcessErrors', 'SortNodes', 'Wait', 'GetSyncStatusMsg', 'GetHostsStatusMsg',
function(Rest, GetBasePath, ProcessErrors, SortNodes, Wait, GetSyncStatusMsg, GetHostsStatusMsg) {
return function(params) {
@ -180,16 +183,22 @@ angular.module('InventoryTree', ['Utilities', 'RestServices', 'GroupsHelper'])
var refresh = params.refresh;
var emit = params.emit;
var new_group_id = params.new_group_id;
//var selected_id = params.
var groups = [];
var id = 1;
function buildAllHosts(tree_data) {
// Start our tree object with All Hosts
var children = [];
var sorted = SortNodes(tree_data);
for (var j=0; j < sorted[j].length; i++) {
push(sorted[j].id);
}
var all_hosts = {
name: 'All Hosts', id: 1, group_id: null, parent: 0, description: '', show: true, ngicon: null,
has_children: false, related: {}, selected_class: '', show_failures: false };
has_children: false, related: {}, selected_class: '', show_failures: false, isDraggable: false,
isDroppable: true, children: children };
groups.push(all_hosts);
}
function buildGroups(tree_data, parent, level) {
var sorted = SortNodes(tree_data);
@ -204,6 +213,12 @@ angular.module('InventoryTree', ['Utilities', 'RestServices', 'GroupsHelper'])
inventory_id: inventory_id,
group_id: sorted[i].id
}); // from helpers/Groups.js
var children = [];
for (var j=0; j < sorted[j].children.length; i++) {
children.push(sorted[j].id);
}
var group = {
name: sorted[i].name,
has_active_failures: sorted[i].has_active_failures,
@ -218,6 +233,7 @@ angular.module('InventoryTree', ['Utilities', 'RestServices', 'GroupsHelper'])
source: sorted[i].summary_fields.inventory_source.source,
group_id: sorted[i].id,
event_level: level,
children: children,
ngicon: (sorted[i].children.length > 0) ? 'fa fa-minus-square-o node-toggle' : 'fa fa-square-o node-no-toggle',
ngclick: 'toggle(' + id + ')',
related: {
@ -233,7 +249,9 @@ angular.module('InventoryTree', ['Utilities', 'RestServices', 'GroupsHelper'])
show_failures: hosts_status['failures'],
hosts_status_class: hosts_status['class'],
selected_class: '',
show: true
show: true,
isDraggable: true,
isDroppable: true
}
groups.push(group);
if (new_group_id && group.group_id == new_group_id) {
@ -255,6 +273,7 @@ angular.module('InventoryTree', ['Utilities', 'RestServices', 'GroupsHelper'])
Rest.setUrl(inventory_tree);
Rest.get()
.success( function(data, status, headers, config) {
buildAllHosts(data);
buildGroups(data, 0, 0);
//console.log(groups);
if (refresh) {
@ -292,6 +311,7 @@ angular.module('InventoryTree', ['Utilities', 'RestServices', 'GroupsHelper'])
}
}])
// Update a group with a set of properties
.factory('UpdateGroup', [ function() {
return function(params) {
@ -338,5 +358,88 @@ angular.module('InventoryTree', ['Utilities', 'RestServices', 'GroupsHelper'])
if (inventory_id !== null) {
$('#inventory-root-node').attr('data-name', name).attr('data-description', descr).find('.activate').first().text(name);
}
}
}])
// Copy or Move a group on the tree after drag-n-drop
.factory('CopyMoveGroup', ['$compile', 'Alert', 'ProcessErrors', 'Find',
function($compile, Alert, ProcessErrors, Find) {
return function(params) {
var scope = params.scope;
var target = Find({ list: scope.groups, key: 'id', val: params.target_tree_id });
var inbound = Find({ list: scope.groups, key: 'id', val: params.inbound_tree_id });
var html = '';
html += "<div id=\"copy-prompt-modal\" class=\"modal fade\">\n";
html += "<div class=\"modal-dialog\">\n";
html += "<div class=\"modal-content\">\n";
html += "<div class=\"modal-header\">\n";
html += "<button type=\"button\" class=\"close\" data-target=\"#copy-prompt-modal\" " +
"data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\n";
if (target.id == 1 || inbound.parent == 0) {
// We're moving the group to the top level, or we're moving a top level group down
html += "<h3>Move Group</h3>\n";
}
else {
html += "<h3>Copy or Move?</h3>\n";
}
html += "</div>\n";
html += "<div class=\"modal-body text-center\">\n";
if (target.id == 1) {
html += "<p>Are you sure you want to move group " + inbound.name + " to the top level?</p>";
}
else if (inbound.parent == 0) {
html += "<p>Are you sure you want to move group " + inbound.name + " away from the top level?</p>";
}
else {
html += "<p>Would you like to copy or move group <em>" + inbound.name + "</em> to group <em>" + target.name + "</em>?</p>\n";
html += "<div style=\"margin-top: 30px;\">\n";
html += "<a href=\"\" ng-click=\"moveGroup()\" class=\"btn btn-primary\" style=\"margin-right: 15px;\"><i class=\"fa fa-cut\"></i> Move</a>\n";
html += "<a href=\"\" ng-click=\"copyGroup()\" class=\"btn btn-primary\"><i class=\"fa fa-copy\"></i> Copy</a>\n";
html += "</div>\n";
}
html += "</div>\n";
html += "<div class=\"modal-footer\">\n";
html += "<a href=\"#\" data-target=\"#prompt-modal\" data-dismiss=\"modal\" class=\"btn btn-default\">Cancel</a>\n";
if (target.id == 1 || inbound.parent == 0) {
// We're moving the group to the top level, or we're moving a top level group down
html += "<a href=\"\" data-target=\"#prompt-modal\" ng-click=\"moveGroup()\" class=\"btn btn-primary\">Yes</a>\n";
}
html += "</div>\n";
html += "</div><!-- modal-content -->\n";
html += "</div><!-- modal-dialog -->\n";
html += "</div><!-- modal -->\n";
// Inject our custom dialog
var e = angular.element(document.getElementById('inventory-modal-container'));
e.append(html);
$compile(e)(scope);
// Display it
$('#copy-prompt-modal').modal({
backdrop: 'static',
keyboard: true,
show: true
});
// Respond to copy or move...
scope.moveGroup = function() {
$('#copy-prompt-modal').modal('hide');
console.log('moving the group...');
}
scope.copyGroup = function() {
$('#copy-prompt-modal').modal('hide');
console.log('copying the group...');
}
}
}]);

View File

@ -511,6 +511,72 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService'])
}
});
}
}
}])
/*
* Make an element draggable. Used on inventory groups tree.
*
* awDraggable: boolean || {{ expression }}
*
*/
.directive('awDraggable', [ function() {
return function(scope, element, attrs) {
if (attrs.awDraggable == "true") {
var containment = attrs.containment; //provide dataContainment:"#id"
$(element).draggable({
containment: containment,
scroll: true,
revert: "invalid",
helper: "clone",
start: function(e, ui) {
ui.helper.addClass('draggable-clone');
}
});
}
}
}])
/*
* Make an element droppable- it can receive draggable elements
*
* awDroppable: boolean || {{ expression }}
*
*/
.directive('awDroppable', ['Find', function(Find) {
return function(scope, element, attrs) {
if (attrs.awDroppable == "true") {
$(element).droppable({
// the following is inventory specific accept checking and
// drop processing.
accept: function(draggable) {
var node = Find({ list: scope.groups, key: 'id', val: parseInt($(this).attr('data-tree-id')) });
if (node) {
var group = draggable.attr('data-group-id');
return (node.children.indexOf(group) > -1) ? false : true;
}
else {
// this shouldn't be possible
return false;
}
},
over: function(e, ui) {
$(this).addClass('droppable-hover');
},
out: function(e, ui) {
$(this).removeClass('droppable-hover');
},
drop: function(e, ui) {
// Drag-n-drop succeeded. Trigger a response from the inventory.edit controller
$(this).removeClass('droppable-hover');
scope.$emit('CopyMoveGroup', ui.draggable.attr('data-tree-id'), $(this).attr('data-tree-id'));
}
});
}
}
}]);

View File

@ -13,40 +13,30 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers'])
return function(obj, key, fld) {
var result;
var value = (typeof obj[key] === "string") ? obj[key].replace(/[\'\"]/g, '&quot;') : obj[key];
if (/^ng/.test(key)) {
result = 'ng-' + key.replace(/^ng/,'').toLowerCase() + "=\"" + value + "\" ";
}
else if (/^data|^aw/.test(key) && key != 'awPopOver') {
var s = '';
for (var i=0; i < key.length; i++) {
if (/[A-Z]/.test(key.charAt(i))) {
s += '-' + key.charAt(i).toLowerCase();
}
else {
s += key.charAt(i);
}
}
result = s + "=\"" + value + "\" ";
}
else {
switch(key) {
case 'ngClick':
result = "ng-click=\"" + value + "\" ";
break;
case 'ngOptions':
result = "ng-options=\"" + value + "\" ";
break;
case 'ngClass':
result = "ng-class=\"" + value + "\" ";
break;
case 'ngChange':
result = "ng-change=\"" + value + "\" ";
break;
case 'ngDisabled':
result = "ng-disabled=\"" + value + "\" ";
break;
case 'ngShow':
result = "ng-show=\"" + value + "\" ";
break;
case 'ngHide':
result = "ng-hide=\"" + value + "\" ";
break;
case 'ngBind':
result = "ng-bind=\"" + value + "\" ";
break;
case 'trueValue':
result = "ng-true-value=\"" + value + "\" ";
break;
case 'falseValue':
result = "ng-false-value=\"" + value + "\" ";
break;
case 'awToolTip':
result = "aw-tool-tip=\"" + value + "\" ";
break;
case 'awPopOver':
// construct the entire help link
result = "<a id=\"awp-" + fld + "\" href=\"\" aw-pop-over=\'" + value + "\' ";
@ -56,24 +46,9 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers'])
result += "class=\"help-link\" ";
result += "><i class=\"fa fa-question-circle\"></i></a> ";
break;
case 'dataTitle':
result = "data-title=\"" + value + "\" ";
break;
case 'awTipPlacement':
result = "aw-tip-placement=\"" + value + "\" ";
break;
case 'dataTipWatch':
result = "data-tip-watch=\"" + value + "\" ";
break;
case 'columnShow':
result = "ng-show=\"" + value + "\" ";
break;
case 'dataPlacement':
result = "data-placement=\"" + value + "\" ";
break;
case 'dataContainer':
result = "data-container=\"" + value + "\" ";
break;
case 'icon':
// new method of constructing <i> icon tag. Replces Icon method.
result = "<i class=\"fa fa-" + value;
@ -88,6 +63,7 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers'])
default:
result = key + "=\"" + value + "\" ";
}
}
return result;
@ -532,14 +508,20 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers'])
html += "<a href=\"#/" + base + "/{{" + list.iterator + ".id }}\" ";
cap = true;
}
if (field.awDroppable) {
html += Attr(field, 'awDroppable');
html += (field.dataAccept) ? Attr(field, 'dataAccept') : '';
}
if (field.awDraggable) {
html += Attr(field, 'awDraggable');
html += (field.dataContainment) ? Attr(field, 'dataContainment') : '';
html += (field.dataTreeId) ? Attr(field, 'dataTreeId') : '';
html += (field.dataGroupId) ? Attr(field, 'dataGroupId') : '';
}
if (field.awToolTip) {
html += Attr(field, 'awToolTip');
if (field.dataPlacement) {
html += Attr(field,'dataPlacement');
}
if (field.dataTipWatch) {
html += Attr(field,'dataTipWatch');
}
html += (field.dataPlacement) ? Attr(field,'dataPlacement') : "";
html += (field.dataTipWatch) ? Attr(field,'dataTipWatch') : "";
}
html += (cap) ? ">" : "";
}

View File

@ -10,5 +10,6 @@
<div id="groups-container" class="col-lg-6"></div>
<div id="hosts-container" class="col-lg-6"></div>
</div>
<div id="inventory-modal-container"></div>
</div>
</div>