Fixed host list related groups tab. Can now associate and disassociate a host from a group

This commit is contained in:
Michael Abashian 2017-05-11 15:57:35 -04:00
parent dfdf59bcf5
commit 88e5abd4d9
14 changed files with 532 additions and 17 deletions

View File

@ -36,7 +36,10 @@
}
$scope.inventory_id = $stateParams.inventory_id;
_.forEach($scope[list.name], buildStatusIndicators);
$scope.$watchCollection(list.name, function(){
_.forEach($scope[list.name], buildStatusIndicators);
});
$scope.$on('selectedOrDeselected', function(e, value) {
let item = value.value;

View File

@ -36,7 +36,10 @@
}
$scope.inventory_id = $stateParams.inventory_id;
_.forEach($scope[list.name], buildStatusIndicators);
$scope.$watchCollection(list.name, function(){
_.forEach($scope[list.name], buildStatusIndicators);
});
}

View File

@ -0,0 +1,14 @@
@import "../../../shared/branding/colors.default.less";
.HostGroupsAssociate-modalBody {
padding-top: 0px;
}
.HostGroupsAssociate-backDrop {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
opacity: 0;
transition: 0.5s opacity;
}

View File

@ -0,0 +1,111 @@
/*************************************************
* Copyright (c) 2017 Ansible, Inc.
*
* All Rights Reserved
*************************************************/
export default ['$scope', '$rootScope', 'ProcessErrors', 'GetBasePath', 'generateList',
'$state', 'Rest', '$q', 'Wait', '$window', 'QuerySet', 'GroupList', 'HostManageService',
function($scope, $rootScope, ProcessErrors, GetBasePath, generateList,
$state, Rest, $q, Wait, $window, qs, GroupList, HostManageService) {
$scope.$on("linkLists", function() {
init();
function init(){
$scope.associate_group_default_params = {
order_by: 'name',
page_size: 5
};
$scope.associate_group_queryset = {
order_by: 'name',
page_size: 5
};
let list = _.cloneDeep(GroupList);
list.basePath = GetBasePath('inventory') + $state.params.inventory_id + '/groups';
list.iterator = 'associate_group';
list.name = 'associate_groups';
list.multiSelect = true;
list.fields.name.ngClick = 'linkoutHostGroup(associate_group.id)';
list.trackBy = 'associate_group.id';
delete list.actions;
delete list.fieldActions;
delete list.fields.failed_hosts;
list.well = false;
$scope.list = list;
// Fire off the initial search
qs.search(list.basePath, $scope.associate_group_default_params)
.then(function(res) {
$scope.associate_group_dataset = res.data;
$scope.associate_groups = $scope.associate_group_dataset.results;
let html = generateList.build({
list: list,
mode: 'edit',
title: false
});
$scope.compileList(html);
$scope.$watchCollection('associate_groups', function () {
if($scope.selectedItems) {
$scope.associate_groups.forEach(function(row, i) {
if (_.includes($scope.selectedItems, row.id)) {
$scope.associate_groups[i].isSelected = true;
}
});
}
});
});
$scope.selectedItems = [];
$scope.$on('selectedOrDeselected', function(e, value) {
let item = value.value;
if (value.isSelected) {
$scope.selectedItems.push(item.id);
}
else {
// _.remove() Returns the new array of removed elements.
// This will pull all the values out of the array that don't
// match the deselected item effectively removing it
$scope.selectedItems = _.remove($scope.selectedItems, function(selectedItem) {
return selectedItem !== item.id;
});
}
});
}
$scope.linkHostGroup = function() {
// HostManageService.associateGroup(host, $scope.disassociateGroup.id).then(() => {
// $state.go($state.current, null, {reload: true});
// $('#host-disassociate-modal').modal('hide');
// $('body').removeClass('modal-open');
// $('.modal-backdrop').remove();
// });
$q.all( _.map($scope.selectedItems, (id) => HostManageService.associateGroup({id: $state.params.host_id}, id)) )
.then( () =>{
Wait('stop');
$scope.closeModal();
}, (error) => {
$scope.closeModal();
ProcessErrors(null, error.data, error.status, null, {
hdr: 'Error!',
msg: 'Failed to associate host to group(s): POST returned status' +
error.status
});
});
};
$scope.linkoutHostGroup = function(userId) {
// Open the edit user form in a new tab so as not to navigate the user
// away from the modal
$window.open('/#/users/' + userId,'_blank');
};
});
}];

View File

@ -0,0 +1,58 @@
/*************************************************
* Copyright (c) 2016 Ansible, Inc.
*
* All Rights Reserved
*************************************************/
import controller from './host-groups-associate.controller';
/* jshint unused: vars */
export default ['templateUrl', 'Wait', '$compile', '$state',
function(templateUrl, Wait, $compile, $state) {
return {
restrict: 'E',
transclude: true,
scope: false,
controller: controller,
templateUrl: templateUrl('inventories/host-groups/host-groups-associate/host-groups-associate'),
link: function(scope, element, attrs, controller, transcludefn) {
$("body").addClass("is-modalOpen");
//$("body").append(element);
Wait('start');
scope.$broadcast("linkLists");
setTimeout(function() {
$('#host-groups-associate-modal').modal("show");
}, 200);
$('.modal[aria-hidden=false]').each(function () {
if ($(this).attr('id') !== 'host-groups-associate-modal') {
$(this).modal('hide');
}
});
scope.closeModal = function() {
$("body").removeClass("is-modalOpen");
$('#host-groups-associate-modal').on('hidden.bs.modal',
function () {
$('.AddUsers').remove();
});
$('#host-groups-associate-modal').modal('hide');
$state.go('^', null, {reload: true});
};
scope.compileList = function(html) {
$('#host-groups-associate-list').append($compile(html)(scope));
};
Wait('stop');
window.scrollTo(0,0);
}
};
}
];

View File

@ -0,0 +1,21 @@
<div id="host-groups-associate-modal" class="modal fade">
<div class="HostGroupsAssociate-backDrop is-loggedOut"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header Form-header">
<div class="Form-title Form-title--uppercase">SELECT GROUP</div>
<div class="Form-header--fields"></div>
<div class="Form-exitHolder">
<button type="button" class="Form-exit" ng-click="closeModal()">
<i class="fa fa-times-circle"></i>
</button>
</div>
</div>
<div class="modal-body HostGroupsAssociate-modalBody" id="host-groups-associate-list"></div>
<div class="modal-footer">
<button ng-click="closeModal()" class="Lookup-cancel btn btn-default">CANCEL</button>
<button ng-click="linkHostGroup()" class="Lookup-save btn btn-primary" ng-disabled="!selectedItems || selectedItems.length === 0">SAVE</button>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,46 @@
export default {
name: 'hosts.edit.groups.associate',
squashSearchUrl: true,
url: '/associate?inventory_id',
params: {
associate_group_search: {
value: {order_by: 'name', page_size: '5', role_level: 'admin_role'},
dynamic: true
}
},
ncyBreadcrumb:{
skip:true
},
views: {
[`modal@hosts.edit`]: {
templateProvider: function(ListDefinition, generateList) {
let list_html = generateList.build({
mode: 'lookup',
list: ListDefinition,
input_type: 'radio'
});
return `<host-groups-associate>${list_html}</host-groups-associate>`;
}
}
},
resolve: {
ListDefinition: ['GroupList', (GroupList) => {
return GroupList;
}],
groupsDataset: ['QuerySet', '$stateParams', 'GetBasePath',
function(qs, $stateParams, GetBasePath) {
let path = GetBasePath('groups');
return qs.search(path, $stateParams.associate_group_search);
}
]
},
onExit: function($state) {
if ($state.transition) {
$('#add-permissions-modal').modal('hide');
$('.modal-backdrop').remove();
$('body').removeClass('modal-open');
}
},
};

View File

@ -0,0 +1,84 @@
/*************************************************
* Copyright (c) 2016 Ansible, Inc.
*
* All Rights Reserved
*************************************************/
export default
['$scope', '$rootScope', '$state', '$stateParams', 'HostGroupsList', 'InventoryUpdate',
'HostManageService', 'CancelSourceUpdate', 'rbacUiControlService', 'GetBasePath',
'GetHostsStatusMsg', 'Dataset', 'Find', 'QuerySet', 'inventoryData', 'host',
function($scope, $rootScope, $state, $stateParams, HostGroupsList, InventoryUpdate,
HostManageService, CancelSourceUpdate, rbacUiControlService, GetBasePath,
GetHostsStatusMsg, Dataset, Find, qs, inventoryData, host){
let list = HostGroupsList;
init();
function init(){
$scope.inventory_id = inventoryData.id;
$scope.canAdd = false;
rbacUiControlService.canAdd(GetBasePath('inventory') + $scope.inventory_id + "/groups")
.then(function(canAdd) {
$scope.canAdd = canAdd;
});
// Search init
$scope.list = list;
$scope[`${list.iterator}_dataset`] = Dataset.data;
$scope[list.name] = $scope[`${list.iterator}_dataset`].results;
$scope.$watchCollection(list.name, function(){
_.forEach($scope[list.name], buildStatusIndicators);
});
}
function buildStatusIndicators(group){
if (group === undefined || group === null) {
group = {};
}
let hosts_status;
hosts_status = GetHostsStatusMsg({
active_failures: group.hosts_with_active_failures,
total_hosts: group.total_hosts,
inventory_id: $scope.inventory_id,
group_id: group.id
});
_.assign(group,
{hosts_status_tip: hosts_status.tooltip},
{hosts_status_class: hosts_status.class});
}
$scope.editGroup = function(id){
$state.go('inventories.edit.groups.edit', {inventory_id: $scope.inventory_id, group_id: id});
};
$scope.associateGroup = function() {
$state.go('.associate', {inventory_id: $scope.inventory_id});
};
$scope.disassociateHost = function(group){
$scope.disassociateGroup = {};
angular.extend($scope.disassociateGroup, group);
$('#host-disassociate-modal').modal('show');
};
$scope.confirmDisassociate = function(){
$('#host-disassociate-modal').off('hidden.bs.modal').on('hidden.bs.modal', function () {
$('#host-disassociate-modal').off('hidden.bs.modal');
$state.go('.', null, {reload: true});
});
HostManageService.disassociateGroup(host, $scope.disassociateGroup.id).then(() => {
$state.go($state.current, null, {reload: true});
$('#host-disassociate-modal').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
});
};
}];

View File

@ -0,0 +1,69 @@
/*************************************************
* Copyright (c) 2017 Ansible, Inc.
*
* All Rights Reserved
*************************************************/
export default {
name: 'groups',
iterator: 'group',
editTitle: '{{ host.name }}',
well: true,
wellOverride: true,
index: false,
hover: true,
trackBy: 'group.id',
basePath: 'api/v2/hosts/{{$stateParams.host_id}}/groups/',
fields: {
failed_hosts: {
label: '',
nosort: true,
mode: 'all',
iconOnly: true,
awToolTip: "{{ group.hosts_status_tip }}",
dataPlacement: "top",
icon: "{{ 'fa icon-job-' + group.hosts_status_class }}",
columnClass: 'status-column List-staticColumn--smallStatus'
},
name: {
label: 'Groups',
key: true,
ngClick: "editGroup(group.id)",
columnClass: 'col-lg-6 col-md-6 col-sm-6 col-xs-6',
class: 'InventoryManage-breakWord',
}
},
actions: {
refresh: {
mode: 'all',
awToolTip: "Refresh the page",
ngClick: "refreshGroups()",
ngShow: "socketStatus == 'error'",
actionClass: 'btn List-buttonDefault',
buttonContent: 'REFRESH'
},
associate: {
mode: 'all',
ngClick: "associateGroup()",
awToolTip: "Associate this host with a new group",
actionClass: 'btn List-buttonSubmit',
buttonContent: '&#43; ADD GROUP',
ngShow: 'canAdd',
dataPlacement: "top",
}
},
fieldActions: {
columnClass: 'col-lg-6 col-md-6 col-sm-6 col-xs-6 text-right',
"delete": {
//label: 'Delete',
mode: 'all',
ngClick: "disassociateHost(group)",
awToolTip: 'Disassociate host',
dataPlacement: "top",
ngShow: "group.summary_fields.user_capabilities.delete"
}
}
};

View File

@ -0,0 +1,31 @@
<div class="modal fade HostDelete" id="host-disassociate-modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content Modal-content">
<div class="Modal-header">
<div class="Modal-title ng-binding">
Disassociate Host
<a href="" id="awp-promote" href=""
aw-pop-over="<dl><dt>Disassociate</dt><dd>Disassociation will remove a host from a group but the host will remain in the inventory.</dd></dl>\n" aw-tool-tip="Click for help"
data-placement="right"
data-container="body"
data-title="Delete Group"
class="help-link">
<i class="fa fa-question-circle"></i>
</a>
</div>
<div class="Modal-exitHolder">
<button class="close Modal-exit" data-target="#host-disassociate-modal" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times-circle"></i></button>
</div>
</div>
<div class="Modal-body">
<div>
<div class="Prompt-bodyQuery">Are you sure you want to disassociate this host: <b>{{host.name}}</b> from this group: <b>{{disassociateGroup.name}}</b>?</div>
</div>
<div class="Modal-footer">
<a href="#" data-target="#host-disassociate-modal" data-dismiss="modal" id="prompt_cancel_btn_groups_list" class="btn Modal-defaultButton Modal-footerButton">CANCEL</a>
<a href="" ng-class="promptActionBtnClass" ng-click="confirmDisassociate()" id="prompt_action_btn_groups_list" class="btn Modal-footerButton Modal-errorButton">DISASSOCIATE</a>
</div>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,62 @@
import { N_ } from '../../i18n';
import {templateUrl} from '../../shared/template-url/template-url.factory';
export default {
name: "hosts.edit.groups",
url: "/groups?{group_search:queryset}",
resolve: {
Dataset: ['HostGroupsList', 'QuerySet', '$stateParams', 'GetBasePath', '$interpolate', '$rootScope',
(list, qs, $stateParams, GetBasePath, $interpolate, $rootScope) => {
// allow related list definitions to use interpolated $rootScope / $stateParams in basePath field
let path, interpolator;
if (GetBasePath(list.basePath)) {
path = GetBasePath(list.basePath);
} else {
interpolator = $interpolate(list.basePath);
path = interpolator({ $rootScope: $rootScope, $stateParams: $stateParams });
}
return qs.search(path, $stateParams[`${list.iterator}_search`]);
}
],
host: ['$stateParams', 'HostManageService', function($stateParams, HostManageService) {
if($stateParams.host_id){
return HostManageService.get({ id: $stateParams.host_id }).then(function(res) {
return res.data.results[0];
});
}
}],
inventoryData: ['InventoryManageService', '$stateParams', 'host', function(InventoryManageService, $stateParams, host) {
var id = ($stateParams.inventory_id) ? $stateParams.inventory_id : host.summary_fields.inventory.id;
return InventoryManageService.getInventory(id).then(res => res.data);
}]
},
params: {
group_search: {
value: {
page_size: "20",
order_by: "name"
},
dynamic: true,
squash: ""
}
},
ncyBreadcrumb: {
parent: "hosts.edit",
label: N_("GROUPS")
},
views: {
'related': {
templateProvider: function(HostGroupsList, generateList, $templateRequest) {
let html = generateList.build({
list: HostGroupsList,
mode: 'edit'
});
return $templateRequest(templateUrl('inventories/host-groups/host-groups')).then((template) => {
return html.concat(template);
});
},
controller: 'HostGroupsController'
}
}
};

View File

@ -0,0 +1,15 @@
/*************************************************
* Copyright (c) 2017 Ansible, Inc.
*
* All Rights Reserved
*************************************************/
import controller from './host-groups.controller';
import hostGroupsDefinition from './host-groups.list';
import hostGroupsAssociate from './host-groups-associate/host-groups-associate.directive';
export default
angular.module('hostGroups', [])
.value('HostGroupsList', hostGroupsDefinition)
.directive('hostGroupsAssociate', hostGroupsAssociate)
.controller('HostGroupsController', controller);

View File

@ -111,15 +111,14 @@ function(i18n) {
title: i18n._('Facts'),
skipGenerator: true
},
nested_groups: {
name: 'nested_groups',
groups: {
name: 'groups',
awToolTip: i18n._('Please save before defining groups'),
dataPlacement: 'top',
ngClick: "$state.go('hosts.edit.nested_groups')",
include: "NestedGroupListDefinition",
includeForm: "NestedGroupFormDefinition",
ngClick: "$state.go('hosts.edit.groups')",
title: i18n._('Groups'),
iterator: 'nested_group'
iterator: 'group',
skipGenerator: true
},
insights: {
name: 'insights',

View File

@ -13,6 +13,7 @@ import inventoryCompletedJobs from './completed_jobs/main';
import inventoryAdd from './add/main';
import inventoryEdit from './edit/main';
import inventoryList from './list/main';
import hostGroups from './host-groups/main';
import { templateUrl } from '../shared/template-url/template-url.factory';
import { N_ } from '../i18n';
import InventoryList from './inventory.list';
@ -45,6 +46,8 @@ import nestedHostsAdd from './groups/nested-hosts/nested-hosts-add.route';
import nestedHostsEdit from './groups/nested-hosts/nested-hosts-edit.route';
import ansibleFactsRoute from './ansible_facts/ansible_facts.route';
import insightsRoute from './insights/insights.route';
import hostGroupsRoute from './host-groups/host-groups.route';
import hostGroupsAssociateRoute from './host-groups/host-groups-associate/host-groups-associate.route';
export default
angular.module('inventory', [
@ -59,7 +62,8 @@ angular.module('inventory', [
inventoryList.name,
ansibleFacts.name,
insights.name,
copyMove.name
copyMove.name,
hostGroups.name
])
.factory('InventoryForm', InventoryForm)
.factory('InventoryList', InventoryList)
@ -245,13 +249,6 @@ angular.module('inventory', [
let hostInsights = _.cloneDeep(insightsRoute);
hostInsights.name = 'hosts.edit.insights';
let hostsEditGroups = _.cloneDeep(nestedGroups);
hostsEditGroups.name = "hosts.edit.nested_groups";
hostsEditGroups.ncyBreadcrumb = {
parent: "hosts.edit",
label: "ASSOCIATED GROUPS"
};
return Promise.all([
hostTree
]).then((generated) => {
@ -260,7 +257,9 @@ angular.module('inventory', [
return result.concat(definition.states);
}, [
stateExtender.buildDefinition(hostAnsibleFacts),
stateExtender.buildDefinition(hostInsights)
stateExtender.buildDefinition(hostInsights),
stateExtender.buildDefinition(hostGroupsRoute),
stateExtender.buildDefinition(hostGroupsAssociateRoute)
])
};
});