Merge pull request #6577 from jaredevantabor/related-groups-labels

Related groups labels

awx/ui/client/src/inventories/related-hosts/main.js

@@ -9,12 +9,14 @@
  import relatedHostList from './list/main';
  import relatedHostsListDefinition from './related-host.list';
  import relatedHostsFormDefinition from './related-host.form';
+ import relatedGroupsLabels from './related-groups-labels/main';
 
 export default
 angular.module('relatedHost', [
         relatedHostAdd.name,
         relatedHostEdit.name,
-        relatedHostList.name
+        relatedHostList.name,
+        relatedGroupsLabels.name
     ])
     .factory('RelatedHostsFormDefinition', relatedHostsFormDefinition)
-    .value('RelatedHostsListDefinition', relatedHostsListDefinition);
+    .factory('RelatedHostsListDefinition', relatedHostsListDefinition);

awx/ui/client/src/inventories/related-hosts/related-groups-labels/main.js

@@ -0,0 +1,11 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+import relatedGroupsabelsList from './relatedGroupsLabelsList.directive';
+
+export default
+    angular.module('relatedGroupsLabels', [])
+        .directive('relatedGroupsLabelsList', relatedGroupsabelsList);

awx/ui/client/src/inventories/related-hosts/related-groups-labels/relatedGroupsLabelsList.block.less

@@ -0,0 +1,3 @@
+.RelatedGroupsLabelsCell{
+    width:100%;
+}

awx/ui/client/src/inventories/related-hosts/related-groups-labels/relatedGroupsLabelsList.directive.js

@@ -0,0 +1,103 @@
+/* jshint unused: vars */
+export default
+    [   'templateUrl',
+        'Wait',
+        'Rest',
+        'GetBasePath',
+        'ProcessErrors',
+        'Prompt',
+        '$q',
+        '$filter',
+        '$state',
+        function(templateUrl, Wait, Rest, GetBasePath, ProcessErrors, Prompt, $q, $filter, $state) {
+            return {
+                restrict: 'E',
+                scope: false,
+                templateUrl: templateUrl('inventories/related-hosts/related-groups-labels/relatedGroupsLabelsList'),
+                link: function(scope, element, attrs) {
+                    scope.showDelete = attrs.showDelete === 'true';
+                    scope.seeMoreInactive = true;
+
+                    var getNext = function(data, arr, resolve) {
+                        Rest.setUrl(data.next);
+                        Rest.get()
+                            .success(function (data) {
+                                if (data.next) {
+                                    getNext(data, arr.concat(data.results), resolve);
+                                } else {
+                                    resolve.resolve(arr.concat(data.results));
+                                }
+                            });
+                    };
+
+                    scope.seeMore = function () {
+                        var seeMoreResolve = $q.defer();
+                        Rest.setUrl(scope[scope.$parent.list.iterator].related.groups);
+                        Rest.get()
+                            .success(function(data) {
+                                if (data.next) {
+                                    getNext(data, data.results, seeMoreResolve);
+                                } else {
+                                    seeMoreResolve.resolve(data.results);
+                                }
+                            });
+
+                        seeMoreResolve.promise.then(function (groups) {
+                            scope.related_groups = groups;
+                            scope.seeMoreInactive = false;
+                        });
+                    };
+
+                    scope.seeLess = function() {
+                        // Trim the groups array back down to 10 items
+                        scope.related_groups = scope.related_groups.slice(0, 5);
+                        // Re-set the seeMoreInteractive flag so that the "See More" will be displayed
+                        scope.seeMoreInactive = true;
+                    };
+
+                    scope.deleteLabel = function(host, group) {
+                        var action = function () {
+                            $('#prompt-modal').modal('hide');
+                            scope.seeMoreInactive = true;
+                            Wait('start');
+                            let url = `${GetBasePath('groups')}${group.id}/hosts`;
+                            if(url) {
+                                Rest.setUrl(url);
+                                Rest.post({"disassociate": true, "id": host.id})
+                                    .success(function () {
+                                        Wait('stop');
+                                        $state.go('.', null, {reload: true});
+                                    })
+                                    .error(function (data, status) {
+                                        Wait('stop');
+                                        ProcessErrors(scope, data, status, null, { hdr: 'Error!',
+                                            msg: 'Could not disassociate host from group.  Call to ' + url + ' failed. DELETE returned status: ' + status });
+                                    });
+                            }
+                        };
+
+                        Prompt({
+                            hdr: 'Remove host from ' + group.name ,
+                            body: '<div class="Prompt-bodyQuery">Confirm  the removal of the <span class="Prompt-emphasis">' + $filter('sanitize')(host.name) + '</span> from the <span class="Prompt-emphasis">' + $filter('sanitize')(group.name) + '</span> group.</div>',
+                            action: action,
+                            actionText: 'REMOVE'
+                        });
+                    };
+
+                    scope.$watchCollection(scope.$parent.list.iterator, function() {
+                        // To keep the array of groups fresh, we need to set up a watcher - otherwise, the
+                        // array will get set initially and then never be updated as groups are removed
+                        if (scope[scope.$parent.list.iterator].summary_fields.groups){
+                            scope.related_groups = scope[scope.$parent.list.iterator].summary_fields.groups.results;
+                            scope.count = scope[scope.$parent.list.iterator].summary_fields.groups.count;
+                        }
+                        else{
+                            scope.related_groups = null;
+                            scope.count = null;
+                        }
+                    });
+
+                }
+            };
+        }
+    ];

awx/ui/client/src/inventories/related-hosts/related-groups-labels/relatedGroupsLabelsList.partial.html

@@ -0,0 +1,14 @@
+<div class="LabelList-tagContainer" ng-repeat="related_group in related_groups">
+    <div class="LabelList-deleteContainer"
+        ng-click="deleteLabel(host, related_group)"
+        ng-show="showDelete && host.summary_fields.user_capabilities.edit">
+        <i class="fa fa-times LabelList-tagDelete"></i>
+    </div>
+    <div class="LabelList-tag" ng-class="{'LabelList-tag--deletable' : (showDelete && host.summary_fields.user_capabilities.edit)}">
+        <span class="LabelList-name">{{ related_group.name }}</span>
+    </div>
+</div>
+<div class="LabelList-seeMoreLess" ng-show="count > 5 && seeMoreInactive"
+    ng-click="seeMore()">View More</div>
+<div class="LabelList-seeMoreLess" ng-show="count > 5 && !seeMoreInactive"
+    ng-click="seeLess()">View Less</div>

awx/ui/client/src/inventories/related-hosts/related-host.list.js

@@ -4,7 +4,8 @@
  * All Rights Reserved
  *************************************************/
 
-export default {
+export default ['i18n', function(i18n) {
+    return {
         name: 'hosts',
         iterator: 'host',
         editTitle: '{{ selected_group }}',
@@ -19,6 +20,22 @@ export default {
         basePath:  'api/v2/inventories/{{$stateParams.inventory_id}}/hosts/',
 
         fields: {
+            toggleHost: {
+                ngDisabled: 'host.has_inventory_sources',
+                label: '',
+                columnClass: 'List-staticColumn--toggle',
+                type: "toggle",
+                ngClick: "toggleHost($event, host)",
+                awToolTip: "<p>" +
+                    i18n._("Indicates if a host is available and should be included in running jobs.") +
+                    "</p><p>" +
+                    i18n._("For hosts that are part of an external" +
+                           " inventory, this flag cannot be changed. It will be" +
+                           " set by the inventory sync process.") +
+                    "</p>",
+                dataPlacement: "right",
+                nosort: true,
+            },
             active_failures: {
                 label: '',
                 iconOnly: true,
@@ -44,6 +61,20 @@ export default {
                 dataHostId: "{{ host.id }}",
                 dataType: "host",
                 class: 'InventoryManage-breakWord'
+            },
+            groups: {
+                label: "Related Groups",
+                type: 'related_groups',
+                nosort: true,
+                showDelete: true,
+                columnClass: 'RelatedGroupsLabelsCell List-tableCell col-lg-2 col-md-3 hidden-sm hidden-xs'
+                // ngBind: 'host.summary_fields.groups',
+                // ngClass: "{ 'host-disabled-label': !host.enabled }",
+                // columnClass: 'col-lg-6 col-md-8 col-sm-8 col-xs-7',
+                // dataHostId: "{{ host.id }}",
+                // dataType: "host",
+                // class: 'InventoryManage-breakWord'
+
             }
         },
 
@@ -126,5 +157,5 @@ export default {
                 dataPlacement: "top",
             }
         }
-
+    };
-};
+}];

awx/ui/client/src/shared/generator-helpers.js

@@ -491,13 +491,23 @@ angular.module('GeneratorHelpers', [systemStatus.name])
 </td>
                 `;
             } else if (field.type === 'labels') {
-                var showDelete = field.showDelete === undefined ? true : field.showDelete;
+                let showDelete = field.showDelete === undefined ? true : field.showDelete;
                 classList = (field.columnClass) ?
                     Attr(field, 'columnClass') : "";
                     html += `
 <td ${classList}>
     <labels-list class=\"LabelList\" show-delete="${showDelete}">
     </labels-list>
+</td>
+                    `;
+            } else if (field.type === 'related_groups') {
+                let showDelete = field.showDelete === undefined ? true : field.showDelete;
+                classList = (field.columnClass) ?
+                    Attr(field, 'columnClass') : "";
+                    html += `
+<td ${classList}>
+    <related-groups-labels-list class=\"LabelList\" show-delete="${showDelete}">
+    </related-groups-labels-list>
 </td>
                     `;
             } else if (field.type === 'owners') {