added role list and deletion to projects object

awx/ui/client/legacy-styles/lists.less

@@ -39,7 +39,7 @@ table, tbody {
     border-top-left-radius: 5px;
 }
 
-.List-tableHeader:last-of-type {
+.List-tableHeader--actions {
     border-top-right-radius: 5px;
     text-align: right;
 }

awx/ui/client/src/access/main.js

@@ -0,0 +1,12 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+import roleList from './roleList.directive';
+import addPermissions from './addPermissions/main';
+
+export default
+    angular.module('access', [])
+        .directive('roleList', roleList);

awx/ui/client/src/access/roleList.block.less

@@ -0,0 +1,71 @@
+/** @define RoleList */
+
+.RoleList {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+}
+
+.RoleList-tagContainer {
+    display: flex;
+    max-width: 100%;
+}
+
+.RoleList-tag {
+    border-radius: 5px;
+    padding: 2px 10px;
+    margin: 4px 0px;
+    border: 1px solid #e1e1e1;
+    font-size: 12px;
+    color: #848992;
+    text-transform: uppercase;
+    background-color: #fff;
+    margin-right: 5px;
+    max-width: 100%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.RoleList-tag--deletable {
+    margin-right: 0px;
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+    border-right: 0;
+    max-wdith: ~"calc(100% - 23px)";
+}
+
+.RoleList-deleteContainer {
+    border: 1px solid #e1e1e1;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+    padding: 0 5px;
+    margin: 4px 0px;
+    margin-right: 5px;
+    align-items: center;
+    display: flex;
+    cursor: pointer;
+}
+
+.RoleList-tagDelete {
+    font-size: 13px;
+    color: #b7b7b7;
+}
+
+.RoleList-name {
+    flex: initial;
+    max-width: 100%;
+}
+
+.RoleList-tag--deletable > .RoleList-name {
+    max-width: ~"calc(100% - 23px)";
+}
+
+.RoleList-deleteContainer:hover, {
+    border-color: #ff5850;
+    background-color: #ff5850;
+}
+
+.RoleList-deleteContainer:hover > .RoleList-tagDelete {
+    color: #fff;
+}

awx/ui/client/src/access/roleList.directive.js

@@ -0,0 +1,44 @@
+/* jshint unused: vars */
+export default
+    [   'templateUrl',
+        function(templateUrl) {
+            return {
+                restrict: 'E',
+                scope: false,
+                templateUrl: templateUrl('access/roleList'),
+                link: function(scope, element, attrs) {
+                    // given a list of roles (things like "project
+                    // auditor") which are pulled from two different
+                    // places in summary fields, and creates a
+                    // concatenated/sorted list
+                    scope.roles = []
+                        .concat(scope.permission.summary_fields
+                            .direct_access.map(function(i) {
+                                return {
+                                    name: i.role.name,
+                                    roleId: i.role.id,
+                                    resourceName: i.role.resource_name,
+                                    explicit: true
+                                };
+                        }))
+                        .concat(scope.permission.summary_fields
+                            .indirect_access.map(function(i) {
+                                return {
+                                    name: i.role.name,
+                                    roleId: i.role.id,
+                                    explicit: false
+                                };
+                        }))
+                        .sort(function(a, b) {
+                            if (a.name
+                                .toLowerCase() > b.name
+                                    .toLowerCase()) {
+                                return 1;
+                            } else {
+                                return -1;
+                            }
+                        });
+                }
+            };
+        }
+    ];

awx/ui/client/src/access/roleList.partial.html

@@ -0,0 +1,13 @@
+<div class="RoleList-tagContainer"
+    ng-repeat="role in roles">
+    <div class="RoleList-tag"
+        ng-class="{'RoleList-tag--deletable': role.explicit}">
+        <span class="RoleList-name">{{ role.name }}</span>
+    </div>
+    <div class="RoleList-deleteContainer"
+        ng-if="role.explicit"
+        ng-click="deletePermission(permission.id, role.roleId, permission.username, role.name, role.resourceName)">
+        <i ng-if="role.explicit"
+            class="fa fa-times RoleList-tagDelete"></i>
+    </div>
+</div>

awx/ui/client/src/app.js

@@ -31,6 +31,7 @@ import permissions from './permissions/main';
 import managementJobs from './management-jobs/main';
 import jobDetail from './job-detail/main';
 import notifications from './notifications/main';
+import access from './access/main';
 
 // modules
 import about from './about/main';
@@ -101,6 +102,7 @@ var tower = angular.module('Tower', [
     jobDetail.name,
     notifications.name,
     standardOut.name,
+    access.name,
     'templates',
     'Utilities',
     'OrganizationFormDefinition',
@@ -884,16 +886,38 @@ var tower = angular.module('Tower', [
         }]);
     }])
 
-    .run(['$q', '$compile', '$cookieStore', '$rootScope', '$log', '$state', 'CheckLicense',
+    .run(['$q', '$compile', '$cookieStore', '$rootScope', '$log', 'CheckLicense', '$location', 'Authorization', 'LoadBasePaths', 'Timer', 'ClearScope', 'Socket',
-        '$location', 'Authorization', 'LoadBasePaths', 'Timer', 'ClearScope', 'Socket',
+        'LoadConfig', 'Store', 'ShowSocketHelp', 'AboutAnsibleHelp', 'pendoService', 'Prompt', 'Rest', 'Wait', 'ProcessErrors', '$state',
-        'LoadConfig', 'Store', 'ShowSocketHelp', 'pendoService',
+        function ($q, $compile, $cookieStore, $rootScope, $log, CheckLicense, $location, Authorization, LoadBasePaths, Timer, ClearScope, Socket,
-        function (
+        LoadConfig, Store, ShowSocketHelp, AboutAnsibleHelp, pendoService, Prompt, Rest, Wait, ProcessErrors, $state) {
-            $q, $compile, $cookieStore, $rootScope, $log, $state, CheckLicense,
-            $location, Authorization, LoadBasePaths, Timer, ClearScope, Socket,
-            LoadConfig, Store, ShowSocketHelp, pendoService)
-            {
             var sock;
 
+            $rootScope.deletePermission = function (user, role, userName,
+                roleName, resourceName) {
+                    var action = function () {
+                        $('#prompt-modal').modal('hide');
+                        Wait('start');
+                        var url = "/api/v1/users/" + user + "/roles/";
+                        Rest.setUrl(url);
+                        Rest.post({"disassociate": true, "id": role})
+                            .success(function () {
+                                Wait('stop');
+                                $rootScope.$broadcast("refreshList", "permission");
+                            })
+                            .error(function (data, status) {
+                                ProcessErrors($rootScope, data, status, null, { hdr: 'Error!',
+                                    msg: 'Call to ' + url + ' failed. DELETE returned status: ' + status });
+                            });
+                    };
+
+                    Prompt({
+                        hdr: 'Remove Role from ' + resourceName,
+                        body: '<div class="Prompt-bodyQuery">Confirm  the removal of the <span class="Prompt-emphasis">' + roleName + '</span> role associated with ' + userName + '.</div>',
+                        action: action,
+                        actionText: 'REMOVE'
+                    });
+                };
+
             function activateTab() {
                 // Make the correct tab active
                 var base = $location.path().replace(/^\//, '').split('/')[0];

awx/ui/client/src/controllers/Projects.js

@@ -649,7 +649,6 @@ export function ProjectsEdit($scope, $rootScope, $compile, $location, $log,
                             data.summary_fields[form.fields[fld].sourceModel][form.fields[fld].sourceField];
                     }
                 }
-
                 relatedSets = form.relatedSets(data.related);
 
 

awx/ui/client/src/filters.js

@@ -7,7 +7,6 @@
 import sanitizeFilter from './shared/xss-sanitizer.filter';
 import capitalizeFilter from './shared/capitalize.filter';
 import longDateFilter from './shared/long-date.filter';
-
 export {
   sanitizeFilter,
   capitalizeFilter,

awx/ui/client/src/forms/Projects.js

@@ -278,83 +278,38 @@ angular.module('ProjectFormDefinition', ['SchedulesListDefinition'])
                     }
                 }
             },
-
+            permissions: {
-            schedules: {
                 type: 'collection',
-                title: 'Schedules',
+                title: 'Permissions',
-                iterator: 'schedule',
+                iterator: 'permission',
                 index: false,
                 open: false,
-
+                searchType: 'select',
                 actions: {
-                    refresh: {
-                        mode: 'all',
-                        awToolTip: "Refresh the page",
-                        ngClick: "refreshSchedules()",
-                        actionClass: 'btn List-buttonDefault',
-                        buttonContent: 'REFRESH',
-                        ngHide: 'scheduleLoading == false && schedule_active_search == false && schedule_total_rows < 1'
-                    },
                     add: {
-                        mode: 'all',
+                        ngClick: "addPermission",
-                        ngClick: 'addSchedule()',
+                        label: 'Add',
-                        awToolTip: 'Add a new schedule',
+                        awToolTip: 'Add a permission',
                         actionClass: 'btn List-buttonSubmit',
                         buttonContent: '&#43; ADD'
                     }
                 },
+
                 fields: {
-                    name: {
+                    username: {
                         key: true,
-                        label: 'Name',
+                        label: 'User',
-                        ngClick: "editSchedule(schedule.id)",
+                        linkBase: 'users',
-                        columnClass: "col-md-3 col-sm-3 col-xs-3"
+                        class: 'col-lg-3 col-md-3 col-sm-3 col-xs-4'
                     },
-                    dtstart: {
+                    role: {
-                        label: 'First Run',
+                        label: 'Role',
-                        filter: "longDate",
+                        type: 'role',
-                        searchable: false,
+                        noSort: true,
-                        columnClass: "col-md-2 col-sm-3 hidden-xs"
+                        class: 'col-lg-9 col-md-9 col-sm-9 col-xs-8'
-                    },
-                    next_run: {
-                        label: 'Next Run',
-                        filter: "longDate",
-                        searchable: false,
-                        columnClass: "col-md-2 col-sm-3 col-xs-3"
-                    },
-                    dtend: {
-                        label: 'Final Run',
-                        filter: "longDate",
-                        searchable: false,
-                        columnClass: "col-md-2 col-sm-3 hidden-xs"
-                    }
-                },
-                fieldActions: {
-                    "play": {
-                        mode: "all",
-                        ngClick: "toggleSchedule($event, schedule.id)",
-                        awToolTip: "{{ schedule.play_tip }}",
-                        dataTipWatch: "schedule.play_tip",
-                        iconClass: "{{ 'fa icon-schedule-enabled-' + schedule.enabled }}",
-                        dataPlacement: "top"
-                    },
-                    edit: {
-                        label: 'Edit',
-                        ngClick: "editSchedule(schedule.id)",
-                        icon: 'icon-edit',
-                        awToolTip: 'Edit schedule',
-                        dataPlacement: 'top'
-                    },
-                    "delete": {
-                        label: 'Delete',
-                        ngClick: "deleteSchedule(schedule.id)",
-                        icon: 'icon-trash',
-                        awToolTip: 'Delete schedule',
-                        dataPlacement: 'top'
                     }
                 }
             }
-
         },
 
         relatedSets: function(urls) {
@@ -363,9 +318,9 @@ angular.module('ProjectFormDefinition', ['SchedulesListDefinition'])
                     iterator: 'organization',
                     url: urls.organizations
                 },
-                schedules: {
+                permissions: {
-                    iterator: 'schedule',
+                    iterator: 'permission',
-                    url: urls.schedules
+                    url: urls.resource_access_list
                 }
             };
         }

awx/ui/client/src/helpers/PaginationHelpers.js

@@ -134,7 +134,7 @@ export default
                 } else if (mode === 'lookup') {
                     scope[iterator + '_page_size'] = 5;
                 } else {
-                    scope[iterator + '_page_size'] = 20;
+                    scope[iterator + '_page_size'] = 2;
                 }
 
                 scope.getPage = function (page, set, iterator) {

awx/ui/client/src/helpers/related-search.js

@@ -230,10 +230,15 @@ export default
                         url += (url.match(/\/$/)) ? '?' : '&';
                         url += scope[iterator + 'SearchParams'];
                         url += (scope[iterator + '_page_size']) ? '&page_size=' + scope[iterator + '_page_size'] : "";
+                        scope[iterator + '_active_search'] = true;
                         RefreshRelated({ scope: scope, set: set, iterator: iterator, url: url });
                     };
 
 
+                    scope.$on("refreshList", function(e, iterator) {
+                        scope.search(iterator);
+                    });
+
                     scope.sort = function (iterator, fld) {
                         var sort_order, icon, direction, set;
 

awx/ui/client/src/login/authenticationServices/authentication.service.js

@@ -85,7 +85,9 @@ export default
                 }
                 Store('sessionTime', x);
 
-                $rootScope.lastUser = $cookieStore.get('current_user').id;
+                if ($cookieStore.get('current_user')) {
+                    $rootScope.lastUser = $cookieStore.get('current_user').id;
+                }
                 $cookieStore.remove('token_expires');
                 $cookieStore.remove('current_user');
                 $cookieStore.remove('token');

awx/ui/client/src/main-menu/main-menu.block.less

@@ -136,6 +136,10 @@
     .MainMenu-itemText--username {
         padding-left: 13px;
         margin-top: -4px;
+        max-width: 85px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
     .MainMenu-itemImage {

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

@@ -1723,32 +1723,52 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                 html += "<tr class=\"List-tableHeaderRow\">\n";
                 html += (collection.index === undefined || collection.index !== false) ? "<th class=\"col-xs-1\">#</th>\n" : "";
                 for (fld in collection.fields) {
-                    html += "<th class=\"List-tableHeader list-header\" id=\"" + collection.iterator + '-' + fld + "-header\" " +
+                    html += "<th class=\"List-tableHeader list-header ";
-                        "ng-click=\"sort('" + collection.iterator + "', '" + fld + "')\">" +
+                    html += (collection.fields[fld].class) ? collection.fields[fld].class : "";
-                        collection.fields[fld].label;
+                    html += "\" id=\"" + collection.iterator + '-' + fld + "-header\" ";
-                    html += " <i class=\"";
+
-                    if (collection.fields[fld].key) {
+                    if (!collection.fields[fld].noSort) {
-                        if (collection.fields[fld].desc) {
+                        html += "ng-click=\"sort('" + collection.iterator + "', '" + fld + "')\">"
-                            html += "fa fa-sort-down";
-                        } else {
-                            html += "fa fa-sort-up";
-                        }
                     } else {
-                        html += "fa fa-sort";
+                        html += ">";
                     }
-                    html += "\"></i></a></th>\n";
+
+
+                    html += collection.fields[fld].label;
+
+                    if (!collection.fields[fld].noSort) {
+                        html += " <i class=\"";
+
+
+                        if (collection.fields[fld].key) {
+                            if (collection.fields[fld].desc) {
+                                html += "fa fa-sort-down";
+                            } else {
+                                html += "fa fa-sort-up";
+                            }
+                        } else {
+                            html += "fa fa-sort";
+                        }
+                        html += "\"></i>"
+                    }
+
+                    html += "</a></th>\n";
+                }
+                if (collection.fieldActions) {
+                    html += "<th class=\"List-tableHeader List-tableHeader--actions\">Actions</th>\n";
                 }
-                html += "<th class=\"List-tableHeader\">Actions</th>\n";
                 html += "</tr>\n";
                 html += "</thead>";
                 html += "<tbody>\n";
 
-                html += "<tr class=\"List-tableHeaderRow\" ng-repeat=\"" + collection.iterator + " in " + itm + "\" ";
+                html += "<tr class=\"List-tableRow\" ng-repeat=\"" + collection.iterator + " in " + itm + "\" ";
                 html += "ng-class-odd=\"'List-tableRow--oddRow'\" ";
                 html += "ng-class-even=\"'List-tableRow--evenRow'\" ";
                 html += "id=\"{{ " + collection.iterator + ".id }}\">\n";
                 if (collection.index === undefined || collection.index !== false) {
-                    html += "<td class=\"List-tableCell\">{{ $index + ((" + collection.iterator + "_page - 1) * " +
+                    html += "<td class=\"List-tableCell";
+                    html += (collection.fields[fld].class) ? collection.fields[fld].class : "";
+                    html += "\">{{ $index + ((" + collection.iterator + "_page - 1) * " +
                         collection.iterator + "_page_size) + 1 }}.</td>\n";
                 }
                 cnt = 1;
@@ -1765,31 +1785,33 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                 }
 
                 // Row level actions
-                html += "<td class=\"List-tableCell List-actionButtonCell actions\">";
+                if (collection.fieldActions) {
-                for (act in collection.fieldActions) {
+                    html += "<td class=\"List-tableCell List-actionButtonCell actions\">";
-                    fAction = collection.fieldActions[act];
+                    for (act in collection.fieldActions) {
-                    html += "<button id=\"" + ((fAction.id) ? fAction.id : act + "-action") + "\" ";
+                        fAction = collection.fieldActions[act];
-                    html += (fAction.href) ? "href=\"" + fAction.href + "\" " : "";
+                        html += "<button id=\"" + ((fAction.id) ? fAction.id : act + "-action") + "\" ";
-                    html += (fAction.ngClick) ? this.attr(fAction, 'ngClick') : "";
+                        html += (fAction.href) ? "href=\"" + fAction.href + "\" " : "";
-                    html += (fAction.ngHref) ? this.attr(fAction, 'ngHref') : "";
+                        html += (fAction.ngClick) ? this.attr(fAction, 'ngClick') : "";
-                    html += (fAction.ngShow) ? this.attr(fAction, 'ngShow') : "";
+                        html += (fAction.ngHref) ? this.attr(fAction, 'ngHref') : "";
-                    html += " class=\"List-actionButton ";
+                        html += (fAction.ngShow) ? this.attr(fAction, 'ngShow') : "";
-                    html += (act === 'delete') ? "List-actionButton--delete" : "";
+                        html += " class=\"List-actionButton ";
-                    html += "\"";
+                        html += (act === 'delete') ? "List-actionButton--delete" : "";
-                    html += ">";
+                        html += "\"";
-                    if (fAction.iconClass) {
+                        html += ">";
-                        html += "<i class=\"" + fAction.iconClass + "\"></i>";
+                        if (fAction.iconClass) {
-                    } else {
+                            html += "<i class=\"" + fAction.iconClass + "\"></i>";
-                        html += SelectIcon({
+                        } else {
-                            action: act
+                            html += SelectIcon({
-                        });
+                                action: act
+                            });
+                        }
+                        // html += SelectIcon({ action: act });
+                        //html += (fAction.label) ? "<span class=\"list-action-label\"> " + fAction.label + "</span>": "";
+                        html += "</button>";
                     }
-                    // html += SelectIcon({ action: act });
+                    html += "</td>";
-                    //html += (fAction.label) ? "<span class=\"list-action-label\"> " + fAction.label + "</span>": "";
+                    html += "</tr>\n";
-                    html += "</button>";
                 }
-                html += "</td>";
-                html += "</tr>\n";
 
                 // Message for loading
                 html += "<tr ng-show=\"" + collection.iterator + "Loading == true\">\n";

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

@@ -449,6 +449,8 @@ angular.module('GeneratorHelpers', [systemStatus.name])
 
             if (field.type !== undefined && field.type === 'DropDown') {
                 html = DropDown(params);
+            } else if (field.type === 'role') {
+                html += "<td class=\"List-tableCell\"><role-list class=\"RoleList\"></role-list></td>";
             } else if (field.type === 'badgeCount') {
                 html = BadgeCount(params);
             } else if (field.type === 'badgeOnly') {
@@ -520,7 +522,7 @@ angular.module('GeneratorHelpers', [systemStatus.name])
                                 list: list,
                                 field: field,
                                 fld: fld,
-                                base: base
+                                base: field.linkBase || base
                             }) + ' ';
                         });
                     }
@@ -532,7 +534,7 @@ angular.module('GeneratorHelpers', [systemStatus.name])
                             list: list,
                             field: field,
                             fld: fld,
-                            base: base
+                            base: field.linkBase || base
                         });
                     }
                 }

awx/ui/client/src/shared/list-generator/list-generator.factory.js

@@ -665,10 +665,9 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
                         }
                     }
                     if (options.mode === 'select') {
-                      html += "<th class=\"List-tableHeader col-lg-1 col-md-1 col-sm-2 col-xs-2\">Select</th>";
+                        html += "<th class=\"List-tableHeader col-lg-1 col-md-1 col-sm-2 col-xs-2\">Select</th>";
-                    }
+                    } else if (options.mode === 'edit' && list.fieldActions) {
-                    else if (options.mode === 'edit' && list.fieldActions) {
+                        html += "<th class=\"List-tableHeader List-tableHeader--actions actions-column";
-                        html += "<th class=\"List-tableHeader actions-column";
                         html += (list.fieldActions && list.fieldActions.columnClass) ? " " + list.fieldActions.columnClass : "";
                         html += "\">";
                         html += (list.fieldActions.label === undefined || list.fieldActions.label) ? "Actions" : "";

awx/ui/client/src/shared/prompt/prompt.less

@@ -8,3 +8,8 @@
 .Prompt-bodyTarget {
     color: @default-data-txt;
 }
+
+.Prompt-emphasis {
+    font-weight: bold;
+    text-transform: uppercase;
+}